tango-app-ui-analyse-trax 3.6.9 → 3.7.0-task-1

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 (8) hide show
  1. package/esm2022/lib/components/dashboard/dashboard.component.mjs +3 -3
  2. package/esm2022/lib/components/task-info/task-info.component.mjs +3 -3
  3. package/fesm2022/{tango-app-ui-analyse-trax-eye-test-audit.module-Csq99TS-.mjs → tango-app-ui-analyse-trax-eye-test-audit.module-BK3BtQ1z.mjs} +2 -2
  4. package/fesm2022/{tango-app-ui-analyse-trax-eye-test-audit.module-Csq99TS-.mjs.map → tango-app-ui-analyse-trax-eye-test-audit.module-BK3BtQ1z.mjs.map} +1 -1
  5. package/fesm2022/{tango-app-ui-analyse-trax-tango-app-ui-analyse-trax-CerEGl20.mjs → tango-app-ui-analyse-trax-tango-app-ui-analyse-trax-NVvyOYAJ.mjs} +6 -6
  6. package/fesm2022/{tango-app-ui-analyse-trax-tango-app-ui-analyse-trax-CerEGl20.mjs.map → tango-app-ui-analyse-trax-tango-app-ui-analyse-trax-NVvyOYAJ.mjs.map} +1 -1
  7. package/fesm2022/tango-app-ui-analyse-trax.mjs +1 -1
  8. package/package.json +1 -1
package/fesm2022/{tango-app-ui-analyse-trax-tango-app-ui-analyse-trax-CerEGl20.mjs → tango-app-ui-analyse-trax-tango-app-ui-analyse-trax-NVvyOYAJ.mjs} RENAMED
@@ -11698,11 +11698,11 @@ class DashboardComponent {
11698
11698
  this.type = selectedType;
11699
11699
  }
11700
11700
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DashboardComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i1$2.Router }, { token: i2$1.GlobalStateService }, { token: i0.ChangeDetectorRef }, { token: i3.ToastService }, { token: TraxService }, { token: i2$1.PageInfoService }], target: i0.ɵɵFactoryTarget.Component });
11701
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DashboardComponent, selector: "lib-dashboard", ngImport: i0, template: "<div class=\"daterange my-4 d-flex justify-content-between W-100\">\r\n <span class=\"mt-3\">Last refreshed at {{reloadDate}}</span>\r\n <div class=\"nav-group nav-group-outline border-1 btn-group p-0\">\r\n <button class=\"btn btn-outline\"\r\n [ngClass]=\"{\r\n 'activePlanBtn': type === 'Checklist',\r\n 'inactivePlanBtn': type !== 'Checklist',\r\n }\"\r\n (click)=\"selectPlan('Checklist')\"\r\n [routerLink]=\"'/manage/trax/dashboard'\"\r\n >\r\n Checklist\r\n </button>\r\n <button class=\"btn btn-outline px-6 py-3\"\r\n [ngClass]=\"{\r\n 'activePlanBtn': type === 'Task',\r\n 'inactivePlanBtn': type !== 'Task',\r\n }\"\r\n (click)=\"selectPlan('Task')\"\r\n [routerLink]=\"'/manage/trax/dashboard/task'\"\r\n\r\n >\r\n Task\r\n </button>\r\n </div>\r\n </div>\r\n \r\n<div class=\"col-md-12\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n <div class=\"col-2 px-2\">\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=\"cardcount\">\r\n {{ overallCardsData.activeUnique !==null ? overallCardsData?.activeUnique?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}\r\n </span>\r\n <span class=\"cardtext\">Active Checklists</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100-auto py-3 px-3\">\r\n <div class=\"cardsubcount my-2\">\r\n {{ overallCardsData.totalInstances?.count !==null ?\r\n overallCardsData.totalInstances?.count?.toLocaleString('en-US', { minimumFractionDigits: 0 })\r\n : '--' }}\r\n </div>\r\n <div class=\"cardtext\">Checklist Instances</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-5 px-2\">\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=\"cardcount\">\r\n {{ overallCardsData.notSubmittedInstances?.count !==null ? \r\n overallCardsData.notSubmittedInstances?.count?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}\r\n </span>\r\n <span class=\"cardtext\">Not Submitted Checklists</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"row h-100-auto py-3 px-3\">\r\n <div class=\"col-md-6\">\r\n <div class=\"cardsubcount my-2\">\r\n {{ overallCardsData.notSubmittedInstances?.open !==null ?\r\n overallCardsData?.notSubmittedInstances.open?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}\r\n </div>\r\n <div class=\"cardtext\">Open Checklists</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <div class=\"cardsubcount my-2\">\r\n {{ overallCardsData.notSubmittedInstances?.inprogress !==null ?\r\n overallCardsData.notSubmittedInstances?.inprogress?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}\r\n </div>\r\n <div class=\"cardtext\">In Progress Checklists</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-5 px-2\">\r\n <div class=\"card card-border pt-2 h-100-auto\">\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=\"cardcount\">\r\n {{ overallCardsData.completedInstances?.count !==null ?\r\n overallCardsData.completedInstances?.count?.toLocaleString('en-US', { minimumFractionDigits: 0\r\n }) : '--' }}\r\n </span>\r\n <span class=\"cardtext\">Submitted Checklists</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"row h-100-auto py-3 px-3\">\r\n <div class=\"col-md-11\">\r\n <div class=\"row\">\r\n <div class=\"col-md-4\">\r\n <div class=\"cardsubcount my-2\">\r\n {{ overallCardsData.completionScore?.count !==null ?\r\n overallCardsData.completionScore?.count?.toLocaleString('en-US', { minimumFractionDigits:\r\n 0 }) :\r\n '--' }}%\r\n </div>\r\n <div class=\"cardtext\">Completion Score</div>\r\n <div class=\"mt-2\">\r\n <span *ngIf=\"overallComparisonData?.completionScore?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"overallComparisonData?.completionScore?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg 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\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\"><span class=\"percent-value\">{{\r\n overallComparisonData?.completionScore?.comparisonData !==null ?\r\n overallComparisonData?.completionScore?.comparisonData?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--'}}%</span><span\r\n class=\"week-font\"> vs last <span *ngIf=\"dateType ==='daily'\">day</span><span *ngIf=\"dateType ==='weekly'\">week</span> <span *ngIf=\"dateType ==='monthly'\">month</span></span></span>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <div class=\"cardsubcount my-2\">\r\n {{ overallCardsData.complianceRate?.count !==null ?\r\n overallCardsData.complianceRate.count?.toLocaleString('en-US', { minimumFractionDigits: 0\r\n }) :\r\n '--' }}%\r\n </div>\r\n <div class=\"cardtext\">Compliance Score</div>\r\n <div class=\"mt-2\">\r\n <span *ngIf=\" overallComparisonData?.complianceRate?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"overallComparisonData?.complianceRate?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg 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\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\"><span class=\"percent-value\">{{\r\n overallComparisonData?.complianceRate?.comparisonData !==null ?\r\n overallComparisonData?.complianceRate?.comparisonData?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--'}}%</span><span\r\n class=\"week-font\"> vs last <span *ngIf=\"dateType ==='daily'\">day</span><span *ngIf=\"dateType ==='weekly'\">week</span> <span *ngIf=\"dateType ==='monthly'\">month</span></span></span>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <div *ngIf=\"overallCardsData.flags?.count; else noDataFlagged\" [routerLink]=\"['/manage/trax/flags']\" class=\"cardsubcount my-2 cursor-pointer\"> <u>\r\n {{ overallCardsData.flags?.count !==null ?\r\n overallCardsData.flags?.count?.toLocaleString('en-US', { minimumFractionDigits: 0 }) :\r\n '--' }}</u>\r\n </div>\r\n <ng-template #noDataFlagged>\r\n <div class=\"cardsubcount my-2\">--</div>\r\n </ng-template>\r\n <div class=\"cardtext\">Total Flags</div>\r\n <div class=\"mt-2\">\r\n <span *ngIf=\"overallComparisonData?.flags?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"overallComparisonData?.flags?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg 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\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\"><span class=\"percent-value\">{{\r\n overallComparisonData?.flags?.comparisonData !==null ?\r\n overallComparisonData?.flags?.comparisonData?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--'}}%</span><span\r\n class=\"week-font\"> vs last <span *ngIf=\"dateType ==='daily'\">day</span><span *ngIf=\"dateType ==='weekly'\">week</span> <span *ngIf=\"dateType ==='monthly'\">month</span></span></span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-1 mt-3\">\r\n <div class=\"mt-1 cursor-pointer fs-5\" [ngClass]=\"dateType ==='daily' ? 'text-primary' :''\" (click)=\"dateValue('daily')\">1D</div>\r\n <div class=\"mt-1 cursor-pointer fs-5\" [ngClass]=\"dateType ==='weekly' ? 'text-primary' :''\" (click)=\"dateValue('weekly')\">1W</div>\r\n <div *ngIf=\"traxMonthlyComparisonData\" class=\"mt-1 cursor-pointer fs-5\" [ngClass]=\"dateType ==='monthly' ? 'text-primary' :''\" (click)=\"dateValue('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 \r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n\r\n<div class=\"col-md-12 mt-4 card\">\r\n <div class=\"row\">\r\n <div class=\"d-flex overflow-auto p-7\">\r\n <ul\r\n class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs-2x justify-content-center align-items-center border-transparent flex-nowrap\">\r\n <li class=\"nav-item cursor-pointer\" (click)=\"Selecttabs('checklist')\"\r\n [routerLink]=\"['/manage/trax/dashboard']\" [queryParams]=\"{ type: 'Checklist' }\">\r\n <a [ngClass]=\"receivedData === 'checklist'?'btn activebtn':''\" class=\"fw-semibold nav-link me-6\">\r\n Checklist Performance\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" (click)=\"Selecttabs('store')\" [routerLink]=\"['/manage/trax/store']\"\r\n [queryParams]=\"{ type: 'store' }\">\r\n <a [ngClass]=\"receivedData === 'store' || receivedData === 'Group Details Value'? 'btn activebtn':''\"\r\n class=\"nav-link me-6\">Store Performance\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" (click)=\"Selecttabs('user')\" [routerLink]=\"['/manage/trax/user']\"\r\n [queryParams]=\"{ type: 'user' }\">\r\n <a [ngClass]=\"receivedData === 'user' || receivedData === 'Group Details Value'? 'btn activebtn':''\"\r\n class=\"nav-link me-6\">User Performance\r\n </a>\r\n </li>\r\n </ul>\r\n </div>\r\n <div *ngIf=\"receivedData === 'checklist'\" class=\"col-lg-12\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Checklist Info <span class=\"badge badge-light-primary\">{{totalItems}} Total</span></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 <!-- [disabled]=\"searchDisabled\" -->\r\n <input [(ngModel)]=\"searchInput\" type=\"text\" class=\"form-control ps-14 ms-4 footfallsearch\"\r\n placeholder=\"Search by Checklist\" autocomplete=\"off\" (keyup.enter)=\"searchField()\" />\r\n <button type=\"button\" (click)=\"onExport()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader ms-4\"\r\n [disabled]=\"!checklistPerformance.length\">\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 <a *ngIf=\"(gs.userAccess | async)?.TangoTrax_checklist_isAdd\" [routerLink]=\"['/manage/trax/createChecklist']\" type=\"button\"\r\n class=\"btn btn-primary ms-4 rounded-3 text-nowrap ng-star-inserted\" tabindex=\"0\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg><span class=\"ms-2 text-white\">Create Checklist</span></a>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"table-responsive\">\r\n <table *ngIf=\"!checklistLoading && !checklistNoData\" class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>Checklist Name</th>\r\n <th>Scheduled</th>\r\n <th (click)=\"sortData('coverage')\" class=\"cuyrsor-pointer\">Coverage<svg\r\n [ngClass]=\"sortColumName === 'coverage' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'coverage' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeCount')\">Assigned To<svg\r\n [ngClass]=\"sortColumName === 'storeCount' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('submittedChecklist')\">Submitted<svg\r\n [ngClass]=\"sortColumName === 'submittedChecklist' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'submittedChecklist' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('flaggedChecklist')\">Flags<svg\r\n [ngClass]=\"sortColumName === 'flaggedChecklist' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'flaggedChecklist' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('task')\">Tasks<svg\r\n [ngClass]=\"sortColumName === 'task' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'task' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('redo')\">ReDo<svg\r\n [ngClass]=\"sortColumName === 'redo' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'redo' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\" 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 store of checklistPerformance\">\r\n <td>\r\n <div class=\"symbol symbol-35px symbol-circle\">\r\n <span class=\"symbol-label bg-light-primary text-primary me-2\">\r\n {{ store.checkListChar || '--' }}\r\n </span>\r\n </div>\r\n <span [routerLink]=\"['/manage/trax/dashboard/info']\"\r\n [queryParams]=\"{ type: 'Checklist', checklist: store.sourceCheckList_id, }\"\r\n class=\"table-title-primary cursor-pointer\">{{ store.checkListName || '--'\r\n }}</span>\r\n </td>\r\n <td>\r\n \r\n <div class=\"table-title\">\r\n {{ store.scheduleRepeatedType === 'Onetime' ? 'Single' : (store.scheduleRepeatedType ? store?.scheduleRepeatedType?.toLocaleString('en-US', { minimumFractionDigits: 0 }) : '--') }}\r\n </div>\r\n \r\n </td>\r\n <td>{{ store?.coverage ? store?.coverage : '--'}}</td>\r\n <td>\r\n <div class=\"table-title\">{{ store.storeCount !==null ?\r\n store?.storeCount?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}</div>\r\n </td>\r\n <td>\r\n <div *ngIf=\"store.submittedChecklist; else noDataSubmitted\" [routerLink]=\"['/manage/trax/dashboard/info']\"\r\n [queryParams]=\"{ type: 'Checklist', checklist: store.sourceCheckList_id, status: 'submit' }\"\r\n class=\"table-title-primary cursor-pointer\">{{\r\n store.submittedChecklist !==null ? store.submittedChecklist?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 })\r\n : '--' }}</div>\r\n <ng-template #noDataSubmitted>\r\n <div class=\"table-title\">--</div>\r\n </ng-template>\r\n </td>\r\n <td>\r\n <div *ngIf=\"store.flaggedChecklist > 0; else noDataFlagged\" [routerLink]=\"['/manage/trax/flags/flagsinfo']\" [queryParams]=\"{ id: store._id }\"\r\n class=\"table-title-primary cursor-pointer\">{{ store.flaggedChecklist !==null ?\r\n store?.flaggedChecklist?.toLocaleString('en-US',\r\n { minimumFractionDigits: 0 }) : '--' }}</div>\r\n <ng-template #noDataFlagged>\r\n <div class=\"table-title\">--</div>\r\n </ng-template>\r\n </td>\r\n <td>\r\n <div *ngIf=\"store.task > 0; else noDataTasks\" [routerLink]=\"['/manage/trax/dashboard/task']\" [queryParams]=\"{ coverage: 'checklist', checklistId: store._id}\"\r\n class=\"table-title-primary cursor-pointer\">{{ store.task !==null ?\r\n store?.task?.toLocaleString('en-US',\r\n { minimumFractionDigits: 0 }) : '--' }}</div>\r\n <ng-template #noDataTasks>\r\n <div class=\"table-title\">--</div>\r\n </ng-template>\r\n </td>\r\n <td>\r\n <div *ngIf=\"store.redo > 0; else noDataRedo\" [routerLink]=\"['/manage/trax/dashboard/info']\" [queryParams]=\"{ type: 'Checklist', checklist: store.sourceCheckList_id, status: 'redo' }\"\r\n class=\"table-title-primary cursor-pointer\">{{ store.redo !==null ?\r\n store?.redo?.toLocaleString('en-US',\r\n { minimumFractionDigits: 0 }) : '--' }}</div>\r\n <ng-template #noDataRedo>\r\n <div class=\"table-title\">--</div>\r\n </ng-template>\r\n </td>\r\n\r\n <!-- <td>\r\n <div class=\"table-title-primary\">{{ store.checkListType || '--' }}</div>\r\n </td> -->\r\n <td>\r\n <a class=\"cursor-pointer\" [routerLink]=\"['/manage/trax/dashboard/info']\"\r\n [queryParams]=\"{ type: 'Checklist', checklist: store.sourceCheckList_id, }\"\r\n class=\"table-title\"><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\r\n d=\"M0.832031 9.99992C0.832031 9.99992 4.16536 3.33325 9.9987 3.33325C15.832 3.33325 19.1654 9.99992 19.1654 9.99992C19.1654 9.99992 15.832 16.6666 9.9987 16.6666C4.16536 16.6666 0.832031 9.99992 0.832031 9.99992Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M9.9987 12.4999C11.3794 12.4999 12.4987 11.3806 12.4987 9.99992C12.4987 8.61921 11.3794 7.49992 9.9987 7.49992C8.61799 7.49992 7.4987 8.61921 7.4987 9.99992C7.4987 11.3806 8.61799 12.4999 9.9987 12.4999Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span></a>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n <ng-container *ngIf=\"checklistLoading\">\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=\"checklistNoData && !checklistLoading\">\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 Checklist Performance Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n <div *ngIf=\"!checklistLoading && !checklistNoData\">\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 </div>\r\n </div>\r\n\r\n <div *ngIf=\"receivedData === 'store'\" class=\"col-lg-12\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Stores Info<span class=\"badge badge-light-primary ms-2\">{{totalItems}} Total</span></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 [(ngModel)]=\"searchInput\" type=\"text\" class=\"form-control ps-14 ms-4 footfallsearch\"\r\n placeholder=\"Search by Store Name\" autocomplete=\"off\" (keyup.enter)=\"searchField()\" />\r\n <button type=\"button\" (click)=\"onExport()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader ms-4\"\r\n [disabled]=\"!storePerformanceData.length\">\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 <a *ngIf=\"(gs.userAccess | async)?.TangoTrax_checklist_isAdd\" [routerLink]=\"['/manage/trax/createChecklist']\" type=\"button\"\r\n class=\"btn btn-primary ms-4 rounded-3 text-nowrap ng-star-inserted\" tabindex=\"0\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg><span class=\"ms-2 text-white\">Create Checklist</span></a>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"table-responsive\">\r\n <table *ngIf=\"!storePerformanceLoading && !storePerformanceNoData\"\r\n class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\">Store Name<svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\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=\"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\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th>Store Spoc</th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('checkListCount')\">Checklist\r\n Assigned<svg\r\n [ngClass]=\"sortColumName === 'checkListCount' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'checkListCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('flaggedCount')\">Flags<svg\r\n [ngClass]=\"sortColumName === 'flaggedCount' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'flaggedCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('completion')\">Completion % <svg\r\n [ngClass]=\"sortColumName === 'completion' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'completion' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('compliance')\">Compliance %<svg\r\n [ngClass]=\"sortColumName === 'compliance' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'compliance' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('performance')\">Performance %<svg\r\n [ngClass]=\"sortColumName === 'performance' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'performance' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n <tr *ngFor=\"let item of storePerformanceData\">\r\n {{item.storeId}}\r\n <td>\r\n <!-- [routerLink]=\"['/manage/trax/dashboard/info']\"\r\n [queryParams]=\"{ store_id: item._id, type: 'store' }\" -->\r\n <a (click)=\"storeView(item._id)\" class=\"table-title-primary cursor-pointer\">{{\r\n item.storeName }}</a>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ item.userEmail }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n {{ item.checkListCount !==null ? item?.checkListCount?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n {{ item.flaggedCount !==null ? item?.flaggedCount?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex\">\r\n <div class=\"h-5px w-100 bg-light mt-2 \">\r\n <div role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\"\r\n class=\"bg-primary rounded h-5px\"\r\n [ngStyle]=\"{ width: item.completion + '%' }\"></div>\r\n </div>\r\n <div class=\"text-end table-title\"><span class=\"my-1 mx-1 text-end\">{{\r\n item.completion !==null ? item?.completion?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 })\r\n : '--' }}%</span></div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex\">\r\n <div class=\"h-5px w-100 bg-light mt-2 \">\r\n <div role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\"\r\n class=\"bg-primary rounded h-5px\"\r\n [ngStyle]=\"{ width: item.compliance + '%' }\"></div>\r\n </div>\r\n <div class=\"text-end table-title\"><span class=\"my-1 mx-1 text-end\">{{\r\n item.compliance !==null ? item?.compliance?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 })\r\n : '--' }}%</span></div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex\">\r\n <div class=\"h-5px w-100 bg-light mt-2 \">\r\n <div role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\"\r\n class=\"bg-primary rounded h-5px\"\r\n [ngStyle]=\"{ width: item.performance + '%' }\"></div>\r\n </div>\r\n <div class=\"text-end table-title\"><span class=\"my-1 mx-1 text-end\">{{\r\n item.performance !==null ? item?.performance?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 })\r\n : '--' }}%</span></div>\r\n </div>\r\n </td>\r\n <td>\r\n <a (click)=\"storeView(item._id)\" class=\"table-title cursor-pointer\"><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\r\n d=\"M0.832031 9.99992C0.832031 9.99992 4.16536 3.33325 9.9987 3.33325C15.832 3.33325 19.1654 9.99992 19.1654 9.99992C19.1654 9.99992 15.832 16.6666 9.9987 16.6666C4.16536 16.6666 0.832031 9.99992 0.832031 9.99992Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M9.9987 12.4999C11.3794 12.4999 12.4987 11.3806 12.4987 9.99992C12.4987 8.61921 11.3794 7.49992 9.9987 7.49992C8.61799 7.49992 7.4987 8.61921 7.4987 9.99992C7.4987 11.3806 8.61799 12.4999 9.9987 12.4999Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span></a>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"storePerformanceLoading\">\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=\"storePerformanceNoData && !storePerformanceLoading\">\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 Store Performance Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n <div *ngIf=\"!storePerformanceLoading && !storePerformanceNoData\">\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 </div>\r\n </div>\r\n\r\n <div *ngIf=\"receivedData === 'user'\" class=\"col-lg-12\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">User Info <span class=\"badge badge-light-primary\">{{totalItems}} Total</span></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 [(ngModel)]=\"searchInput\" type=\"text\" class=\"form-control ps-14 ms-4 footfallsearch\"\r\n placeholder=\"Search by User Name\" autocomplete=\"off\" (keyup.enter)=\"searchField()\" />\r\n <button type=\"button\" (click)=\"onExport()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader ms-4\"\r\n [disabled]=\"!userPerformanceData.length\">\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 <a *ngIf=\"(gs.userAccess | async)?.TangoTrax_checklist_isAdd\" [routerLink]=\"['/manage/trax/createChecklist']\" type=\"button\"\r\n class=\"btn btn-primary ms-4 rounded-3 text-nowrap ng-star-inserted\" tabindex=\"0\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg><span class=\"ms-2 text-white\">Create Checklist</span></a>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"table-responsive\">\r\n <table *ngIf=\"!userPerformanceLoading && !userPerformanceNoData\"\r\n class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('userName')\">User Name<svg\r\n [ngClass]=\"sortColumName === 'userName' && sortDirection === 1 ? 'rotate' : ''\"\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=\"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\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('userEmail')\">Email<svg\r\n [ngClass]=\"sortColumName === 'userEmail' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'userEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('checkListCount')\">Checklist\r\n Assigned<svg\r\n [ngClass]=\"sortColumName === 'checkListCount' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'checkListCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('flaggedCount')\">Flags<svg\r\n [ngClass]=\"sortColumName === 'flaggedCount' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'flaggedCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('completion')\">Completion % <svg\r\n [ngClass]=\"sortColumName === 'completion' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'completion' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('compliance')\">Compliance %<svg\r\n [ngClass]=\"sortColumName === 'compliance' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'compliance' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('performance')\">Performance %<svg\r\n [ngClass]=\"sortColumName === 'performance' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'performance' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let user of userPerformanceData\">\r\n <td>\r\n <a [routerLink]=\"['/manage/trax/dashboard/info']\"\r\n [queryParams]=\"{ type: 'user', userEmail: user.userEmail, }\"\r\n class=\"table-title-primary\">{{ user.userName }}</a>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ user.userEmail }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n {{ user.checkListCount !==null ? user?.checkListCount?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ user.flaggedCount !==null ?\r\n user?.flaggedCount?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex\">\r\n <div class=\"h-5px w-100 bg-light mt-2\">\r\n <div role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\"\r\n class=\"bg-primary rounded h-5px\"\r\n [ngStyle]=\"{ width: user.completion + '%' }\">\r\n </div>\r\n </div>\r\n <div class=\"text-end table-title\"><span class=\"my-1 mx-1 text-end\">{{\r\n user.completion !==null ? user?.completion?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 })\r\n : '--' }}%</span></div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex\">\r\n <div class=\"h-5px w-100 bg-light mt-2\">\r\n <div role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\"\r\n class=\"bg-primary rounded h-5px\"\r\n [ngStyle]=\"{ width: user.compliance + '%' }\">\r\n </div>\r\n </div>\r\n <div class=\"text-end table-title\"><span class=\"my-1 mx-1 text-end\">{{\r\n user.compliance !==null ? user?.compliance?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 })\r\n : '--' }}%</span></div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex\">\r\n <div class=\"h-5px w-100 bg-light mt-2\">\r\n <div role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\"\r\n class=\"bg-primary rounded h-5px\"\r\n [ngStyle]=\"{ width: user.performance + '%' }\">\r\n </div>\r\n </div>\r\n <div class=\"text-end table-title\"><span class=\"my-1 mx-1 text-end\">{{\r\n user.performance !==null ? user?.performance?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 })\r\n : '--' }}%</span></div>\r\n </div>\r\n </td>\r\n\r\n <td>\r\n <a class=\"cursor-pointer\" [routerLink]=\"['/manage/trax/dashboard/info']\"\r\n [queryParams]=\"{type: 'user', userEmail: user.userEmail, }\"\r\n class=\"table-title\"><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\r\n d=\"M0.832031 9.99992C0.832031 9.99992 4.16536 3.33325 9.9987 3.33325C15.832 3.33325 19.1654 9.99992 19.1654 9.99992C19.1654 9.99992 15.832 16.6666 9.9987 16.6666C4.16536 16.6666 0.832031 9.99992 0.832031 9.99992Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M9.9987 12.4999C11.3794 12.4999 12.4987 11.3806 12.4987 9.99992C12.4987 8.61921 11.3794 7.49992 9.9987 7.49992C8.61799 7.49992 7.4987 8.61921 7.4987 9.99992C7.4987 11.3806 8.61799 12.4999 9.9987 12.4999Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span></a>\r\n </td>\r\n\r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"userPerformanceLoading\">\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=\"userPerformanceNoData && !userPerformanceLoading\">\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 User Performance Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"!userPerformanceLoading && !userPerformanceNoData\">\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 </div>\r\n </div>\r\n\r\n\r\n </div>\r\n</div>", styles: [".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}.card .card-header{padding:0px 1.5rem}.cardcount{color:var(--Black, #101828);font-size:30px;font-style:normal;font-weight:600;line-height:38px}.cardtext{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.cardsubcount{color:var(--Black, #101828);font-size:20px;font-style:normal;font-weight:700;line-height:30px}.card-border{padding:8px;border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.percent-value{color:var(--Gray-500, #667085);text-align:center;font-size:12px;font-style:normal;font-weight:600;line-height:18px}.week-font{color:var(--Gray-800, #1D2939);font-size:12px;font-style:normal;font-weight:400;line-height:18px}.nav-item .nav-link{color:var(--Gray-500, #667085);font-size:16px;font-weight:500}.activebtn{color:var(--Primary-700, #009BF3)!important;border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;font-size:16px!important;font-weight:500!important}.buttonsec{border-radius:8px;margin:0;background:var(--gray-50, white);width:100%;height:fit-content;padding:5px}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;text-decoration-line:underline}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.rotate{transform:rotate(180deg)}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}table tr{vertical-align:middle}table th,table td{height:44px!important;padding:20px 15px!important;align-items:center;gap:12px;align-self:stretch}.table-title{color:var(--Gray-500, #667085);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.daterange{color:var(--Gray-500, #667085);font-size:16px;font-style:normal;font-weight:600;line-height:24px}.nav-group-outline{border-radius:8px;border:1px solid var(--Primary-300, #6BCAFF);box-shadow:0 1px 2px #1018280d}.nav-group .btn.activePlanBtn{border-right:1px solid var(--Primary-300, #6BCAFF);background:var(--Primary-600, #00A3FF);color:#fff}.nav-group .btn.inactivePlanBtn{background-color:#fff;color:#333;border:1px solid #dcdcdc}\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: "directive", type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.DatePipe, name: "date" }] });
11701
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DashboardComponent, selector: "lib-dashboard", ngImport: i0, template: "<div class=\"daterange my-4 d-flex justify-content-between W-100\">\r\n <span class=\"mt-3\">Last refreshed at {{reloadDate}}</span>\r\n <div class=\"nav-group nav-group-outline border-1 btn-group p-0\">\r\n <button class=\"btn btn-outline\"\r\n [ngClass]=\"{\r\n 'activePlanBtn': type === 'Checklist',\r\n 'inactivePlanBtn': type !== 'Checklist',\r\n }\"\r\n (click)=\"selectPlan('Checklist')\"\r\n [routerLink]=\"'/manage/trax/dashboard'\"\r\n >\r\n Checklist\r\n </button>\r\n <button class=\"btn btn-outline px-6 py-3\"\r\n [ngClass]=\"{\r\n 'activePlanBtn': type === 'Task',\r\n 'inactivePlanBtn': type !== 'Task',\r\n }\"\r\n (click)=\"selectPlan('Task')\"\r\n [routerLink]=\"'/manage/trax/dashboard/task'\"\r\n\r\n >\r\n Task\r\n </button>\r\n </div>\r\n </div>\r\n \r\n<div class=\"col-md-12\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n <div class=\"col-2 px-2\">\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=\"cardcount\">\r\n {{ overallCardsData.activeUnique !==null ? overallCardsData?.activeUnique?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}\r\n </span>\r\n <span class=\"cardtext\">Active Checklists</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100-auto py-3 px-3\">\r\n <div class=\"cardsubcount my-2\">\r\n {{ overallCardsData.totalInstances?.count !==null ?\r\n overallCardsData.totalInstances?.count?.toLocaleString('en-US', { minimumFractionDigits: 0 })\r\n : '--' }}\r\n </div>\r\n <div class=\"cardtext\">Checklist Instances</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-5 px-2\">\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=\"cardcount\">\r\n {{ overallCardsData.notSubmittedInstances?.count !==null ? \r\n overallCardsData.notSubmittedInstances?.count?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}\r\n </span>\r\n <span class=\"cardtext\">Not Submitted Checklists</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"row h-100-auto py-3 px-3\">\r\n <div class=\"col-md-6\">\r\n <div class=\"cardsubcount my-2\">\r\n {{ overallCardsData.notSubmittedInstances?.open !==null ?\r\n overallCardsData?.notSubmittedInstances.open?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}\r\n </div>\r\n <div class=\"cardtext\">Open Checklists</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <div class=\"cardsubcount my-2\">\r\n {{ overallCardsData.notSubmittedInstances?.inprogress !==null ?\r\n overallCardsData.notSubmittedInstances?.inprogress?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}\r\n </div>\r\n <div class=\"cardtext\">In Progress Checklists</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-5 px-2\">\r\n <div class=\"card card-border pt-2 h-100-auto\">\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=\"cardcount\">\r\n {{ overallCardsData.completedInstances?.count !==null ?\r\n overallCardsData.completedInstances?.count?.toLocaleString('en-US', { minimumFractionDigits: 0\r\n }) : '--' }}\r\n </span>\r\n <span class=\"cardtext\">Submitted Checklists</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"row h-100-auto py-3 px-3\">\r\n <div class=\"col-md-11\">\r\n <div class=\"row\">\r\n <div class=\"col-md-4\">\r\n <div class=\"cardsubcount my-2\">\r\n {{ overallCardsData.completionScore?.count !==null ?\r\n overallCardsData.completionScore?.count?.toLocaleString('en-US', { minimumFractionDigits:\r\n 0 }) :\r\n '--' }}%\r\n </div>\r\n <div class=\"cardtext\">Completion Score</div>\r\n <div class=\"mt-2\">\r\n <span *ngIf=\"overallComparisonData?.completionScore?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"overallComparisonData?.completionScore?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg 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\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\"><span class=\"percent-value\">{{\r\n overallComparisonData?.completionScore?.comparisonData !==null ?\r\n overallComparisonData?.completionScore?.comparisonData?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--'}}%</span><span\r\n class=\"week-font\"> vs last <span *ngIf=\"dateType ==='daily'\">day</span><span *ngIf=\"dateType ==='weekly'\">week</span> <span *ngIf=\"dateType ==='monthly'\">month</span></span></span>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <div class=\"cardsubcount my-2\">\r\n {{ overallCardsData.complianceRate?.count !==null ?\r\n overallCardsData.complianceRate.count?.toLocaleString('en-US', { minimumFractionDigits: 0\r\n }) :\r\n '--' }}%\r\n </div>\r\n <div class=\"cardtext\">Compliance Score</div>\r\n <div class=\"mt-2\">\r\n <span *ngIf=\" overallComparisonData?.complianceRate?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"overallComparisonData?.complianceRate?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg 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\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\"><span class=\"percent-value\">{{\r\n overallComparisonData?.complianceRate?.comparisonData !==null ?\r\n overallComparisonData?.complianceRate?.comparisonData?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--'}}%</span><span\r\n class=\"week-font\"> vs last <span *ngIf=\"dateType ==='daily'\">day</span><span *ngIf=\"dateType ==='weekly'\">week</span> <span *ngIf=\"dateType ==='monthly'\">month</span></span></span>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <div *ngIf=\"overallCardsData.flags?.count; else noDataFlagged\" [routerLink]=\"['/manage/trax/flags']\" class=\"cardsubcount my-2 cursor-pointer\"> <u>\r\n {{ overallCardsData.flags?.count !==null ?\r\n overallCardsData.flags?.count?.toLocaleString('en-US', { minimumFractionDigits: 0 }) :\r\n '--' }}</u>\r\n </div>\r\n <ng-template #noDataFlagged>\r\n <div class=\"cardsubcount my-2\">--</div>\r\n </ng-template>\r\n <div class=\"cardtext\">Total Flags</div>\r\n <div class=\"mt-2\">\r\n <span *ngIf=\"overallComparisonData?.flags?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"overallComparisonData?.flags?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg 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\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\"><span class=\"percent-value\">{{\r\n overallComparisonData?.flags?.comparisonData !==null ?\r\n overallComparisonData?.flags?.comparisonData?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--'}}%</span><span\r\n class=\"week-font\"> vs last <span *ngIf=\"dateType ==='daily'\">day</span><span *ngIf=\"dateType ==='weekly'\">week</span> <span *ngIf=\"dateType ==='monthly'\">month</span></span></span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-1 mt-3\">\r\n <div class=\"mt-1 cursor-pointer fs-5\" [ngClass]=\"dateType ==='daily' ? 'text-primary' :''\" (click)=\"dateValue('daily')\">1D</div>\r\n <div class=\"mt-1 cursor-pointer fs-5\" [ngClass]=\"dateType ==='weekly' ? 'text-primary' :''\" (click)=\"dateValue('weekly')\">1W</div>\r\n <div *ngIf=\"traxMonthlyComparisonData\" class=\"mt-1 cursor-pointer fs-5\" [ngClass]=\"dateType ==='monthly' ? 'text-primary' :''\" (click)=\"dateValue('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 \r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n\r\n<div class=\"col-md-12 mt-4 card\">\r\n <div class=\"row\">\r\n <div class=\"d-flex overflow-auto p-7\">\r\n <ul\r\n class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs-2x justify-content-center align-items-center border-transparent flex-nowrap\">\r\n <li class=\"nav-item cursor-pointer\" (click)=\"Selecttabs('checklist')\"\r\n [routerLink]=\"['/manage/trax/dashboard']\" [queryParams]=\"{ type: 'Checklist' }\">\r\n <a [ngClass]=\"receivedData === 'checklist'?'btn activebtn':''\" class=\"fw-semibold nav-link me-6\">\r\n Checklist Performance\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" (click)=\"Selecttabs('store')\" [routerLink]=\"['/manage/trax/store']\"\r\n [queryParams]=\"{ type: 'store' }\">\r\n <a [ngClass]=\"receivedData === 'store' || receivedData === 'Group Details Value'? 'btn activebtn':''\"\r\n class=\"nav-link me-6\">Store Performance\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" (click)=\"Selecttabs('user')\" [routerLink]=\"['/manage/trax/user']\"\r\n [queryParams]=\"{ type: 'user' }\">\r\n <a [ngClass]=\"receivedData === 'user' || receivedData === 'Group Details Value'? 'btn activebtn':''\"\r\n class=\"nav-link me-6\">User Performance\r\n </a>\r\n </li>\r\n </ul>\r\n </div>\r\n <div *ngIf=\"receivedData === 'checklist'\" class=\"col-lg-12\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Checklist Info <span class=\"badge badge-light-primary\">{{totalItems}} Total</span></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 <!-- [disabled]=\"searchDisabled\" -->\r\n <input [(ngModel)]=\"searchInput\" type=\"text\" class=\"form-control ps-14 ms-4 footfallsearch\"\r\n placeholder=\"Search by Checklist\" autocomplete=\"off\" (keyup.enter)=\"searchField()\" />\r\n <button type=\"button\" (click)=\"onExport()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader ms-4\"\r\n [disabled]=\"!checklistPerformance.length\">\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 <a *ngIf=\"(gs.userAccess | async)?.TangoTrax_checklist_isAdd\" [routerLink]=\"['/manage/trax/createChecklist']\" type=\"button\"\r\n class=\"btn btn-primary ms-4 rounded-3 text-nowrap ng-star-inserted\" tabindex=\"0\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg><span class=\"ms-2 text-white\">Create Checklist</span></a>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"table-responsive\">\r\n <table *ngIf=\"!checklistLoading && !checklistNoData\" class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>Checklist Name</th>\r\n <th>Scheduled</th>\r\n <th (click)=\"sortData('coverage')\" class=\"cuyrsor-pointer\">Coverage<svg\r\n [ngClass]=\"sortColumName === 'coverage' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'coverage' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeCount')\">Assigned To<svg\r\n [ngClass]=\"sortColumName === 'storeCount' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('submittedChecklist')\">Submitted<svg\r\n [ngClass]=\"sortColumName === 'submittedChecklist' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'submittedChecklist' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('flaggedChecklist')\">Flags<svg\r\n [ngClass]=\"sortColumName === 'flaggedChecklist' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'flaggedChecklist' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('task')\">Tasks<svg\r\n [ngClass]=\"sortColumName === 'task' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'task' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('redo')\">ReDo<svg\r\n [ngClass]=\"sortColumName === 'redo' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'redo' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\" 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 store of checklistPerformance\">\r\n <td>\r\n <div class=\"symbol symbol-35px symbol-circle\">\r\n <span class=\"symbol-label bg-light-primary text-primary me-2\">\r\n {{ store.checkListChar || '--' }}\r\n </span>\r\n </div>\r\n <span [routerLink]=\"['/manage/trax/dashboard/info']\"\r\n [queryParams]=\"{ type: 'Checklist', checklist: store.sourceCheckList_id, }\"\r\n class=\"table-title-primary cursor-pointer\">{{ store.checkListName || '--'\r\n }}</span>\r\n </td>\r\n <td>\r\n \r\n <div class=\"table-title\">\r\n {{ store.scheduleRepeatedType === 'Onetime' ? 'Single' : (store.scheduleRepeatedType ? store?.scheduleRepeatedType?.toLocaleString('en-US', { minimumFractionDigits: 0 }) : '--') }}\r\n </div>\r\n \r\n </td>\r\n <td>{{ store?.coverage ? store?.coverage : '--'}}</td>\r\n <td>\r\n <div class=\"table-title\">{{ store.storeCount !==null ?\r\n store?.storeCount?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}</div>\r\n </td>\r\n <td>\r\n <div *ngIf=\"store.submittedChecklist; else noDataSubmitted\" [routerLink]=\"['/manage/trax/dashboard/info']\"\r\n [queryParams]=\"{ type: 'Checklist', checklist: store.sourceCheckList_id, status: 'submit' }\"\r\n class=\"table-title-primary cursor-pointer\">{{\r\n store.submittedChecklist !==null ? store.submittedChecklist?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 })\r\n : '--' }}</div>\r\n <ng-template #noDataSubmitted>\r\n <div class=\"table-title\">--</div>\r\n </ng-template>\r\n </td>\r\n <td>\r\n <div *ngIf=\"store.flaggedChecklist > 0; else noDataFlagged\" [routerLink]=\"['/manage/trax/flags/flagsinfo']\" [queryParams]=\"{ id: store._id }\"\r\n class=\"table-title-primary cursor-pointer\">{{ store.flaggedChecklist !==null ?\r\n store?.flaggedChecklist?.toLocaleString('en-US',\r\n { minimumFractionDigits: 0 }) : '--' }}</div>\r\n <ng-template #noDataFlagged>\r\n <div class=\"table-title\">--</div>\r\n </ng-template>\r\n </td>\r\n <td>\r\n <div *ngIf=\"store.task > 0; else noDataTasks\" [routerLink]=\"['/manage/trax/dashboard/task']\" [queryParams]=\"{ coverage: 'checklist', checklistId: store._id}\"\r\n class=\"table-title-primary cursor-pointer\">{{ store.task !==null ?\r\n store?.task?.toLocaleString('en-US',\r\n { minimumFractionDigits: 0 }) : '--' }}</div>\r\n <ng-template #noDataTasks>\r\n <div class=\"table-title\">--</div>\r\n </ng-template>\r\n </td>\r\n <td>\r\n <div *ngIf=\"store.redo > 0; else noDataRedo\" [routerLink]=\"['/manage/trax/dashboard/info']\" [queryParams]=\"{ type: 'Checklist', checklist: store.sourceCheckList_id, status: 'redo' }\"\r\n class=\"table-title-primary cursor-pointer\">{{ store.redo !==null ?\r\n store?.redo?.toLocaleString('en-US',\r\n { minimumFractionDigits: 0 }) : '--' }}</div>\r\n <ng-template #noDataRedo>\r\n <div class=\"table-title\">--</div>\r\n </ng-template>\r\n </td>\r\n\r\n <!-- <td>\r\n <div class=\"table-title-primary\">{{ store.checkListType || '--' }}</div>\r\n </td> -->\r\n <td>\r\n <a class=\"cursor-pointer\" [routerLink]=\"['/manage/trax/dashboard/info']\"\r\n [queryParams]=\"{ type: 'Checklist', checklist: store.sourceCheckList_id, }\"\r\n class=\"table-title\"><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\r\n d=\"M0.832031 9.99992C0.832031 9.99992 4.16536 3.33325 9.9987 3.33325C15.832 3.33325 19.1654 9.99992 19.1654 9.99992C19.1654 9.99992 15.832 16.6666 9.9987 16.6666C4.16536 16.6666 0.832031 9.99992 0.832031 9.99992Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M9.9987 12.4999C11.3794 12.4999 12.4987 11.3806 12.4987 9.99992C12.4987 8.61921 11.3794 7.49992 9.9987 7.49992C8.61799 7.49992 7.4987 8.61921 7.4987 9.99992C7.4987 11.3806 8.61799 12.4999 9.9987 12.4999Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span></a>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n <ng-container *ngIf=\"checklistLoading\">\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=\"checklistNoData && !checklistLoading\">\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 Checklist Performance Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n <div *ngIf=\"!checklistLoading && !checklistNoData\">\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 </div>\r\n </div>\r\n\r\n <div *ngIf=\"receivedData === 'store'\" class=\"col-lg-12\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Stores Info<span class=\"badge badge-light-primary ms-2\">{{totalItems}} Total</span></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 [(ngModel)]=\"searchInput\" type=\"text\" class=\"form-control ps-14 ms-4 footfallsearch\"\r\n placeholder=\"Search by Store Name\" autocomplete=\"off\" (keyup.enter)=\"searchField()\" />\r\n <button type=\"button\" (click)=\"onExport()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader ms-4\"\r\n [disabled]=\"!storePerformanceData.length\">\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 <a *ngIf=\"(gs.userAccess | async)?.TangoTrax_checklist_isAdd\" [routerLink]=\"['/manage/trax/createChecklist']\" type=\"button\"\r\n class=\"btn btn-primary ms-4 rounded-3 text-nowrap ng-star-inserted\" tabindex=\"0\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg><span class=\"ms-2 text-white\">Create Checklist</span></a>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"table-responsive\">\r\n <table *ngIf=\"!storePerformanceLoading && !storePerformanceNoData\"\r\n class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\">Store Name<svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\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=\"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\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th>Store Spoc</th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('checkListCount')\">Checklist\r\n Assigned<svg\r\n [ngClass]=\"sortColumName === 'checkListCount' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'checkListCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('flaggedCount')\">Flags<svg\r\n [ngClass]=\"sortColumName === 'flaggedCount' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'flaggedCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('completion')\">Completion % <svg\r\n [ngClass]=\"sortColumName === 'completion' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'completion' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('compliance')\">Compliance %<svg\r\n [ngClass]=\"sortColumName === 'compliance' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'compliance' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('performance')\">Performance %<svg\r\n [ngClass]=\"sortColumName === 'performance' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'performance' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n <tr *ngFor=\"let item of storePerformanceData\">\r\n {{item.storeId}}\r\n <td>\r\n <!-- [routerLink]=\"['/manage/trax/dashboard/info']\"\r\n [queryParams]=\"{ store_id: item._id, type: 'store' }\" -->\r\n <a (click)=\"storeView(item._id)\" class=\"table-title-primary cursor-pointer\">{{\r\n item.storeName }}</a>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ item.userEmail }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n {{ item.checkListCount !==null ? item?.checkListCount?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n {{ item.flaggedCount !==null ? item?.flaggedCount?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex\">\r\n <div class=\"h-5px w-100 bg-light mt-2 \">\r\n <div role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\"\r\n class=\"bg-primary rounded h-5px\"\r\n [ngStyle]=\"{ width: item.completion + '%' }\"></div>\r\n </div>\r\n <div class=\"text-end table-title\"><span class=\"my-1 mx-1 text-end\">{{\r\n item.completion !==null ? item?.completion?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 })\r\n : '--' }}%</span></div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex\">\r\n <div class=\"h-5px w-100 bg-light mt-2 \">\r\n <div role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\"\r\n class=\"bg-primary rounded h-5px\"\r\n [ngStyle]=\"{ width: item.compliance + '%' }\"></div>\r\n </div>\r\n <div class=\"text-end table-title\"><span class=\"my-1 mx-1 text-end\">{{\r\n item.compliance !==null ? item?.compliance?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 })\r\n : '--' }}%</span></div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex\">\r\n <div class=\"h-5px w-100 bg-light mt-2 \">\r\n <div role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\"\r\n class=\"bg-primary rounded h-5px\"\r\n [ngStyle]=\"{ width: item.performance + '%' }\"></div>\r\n </div>\r\n <div class=\"text-end table-title\"><span class=\"my-1 mx-1 text-end\">{{\r\n item.performance !==null ? item?.performance?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 })\r\n : '--' }}%</span></div>\r\n </div>\r\n </td>\r\n <td>\r\n <a (click)=\"storeView(item._id)\" class=\"table-title cursor-pointer\"><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\r\n d=\"M0.832031 9.99992C0.832031 9.99992 4.16536 3.33325 9.9987 3.33325C15.832 3.33325 19.1654 9.99992 19.1654 9.99992C19.1654 9.99992 15.832 16.6666 9.9987 16.6666C4.16536 16.6666 0.832031 9.99992 0.832031 9.99992Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M9.9987 12.4999C11.3794 12.4999 12.4987 11.3806 12.4987 9.99992C12.4987 8.61921 11.3794 7.49992 9.9987 7.49992C8.61799 7.49992 7.4987 8.61921 7.4987 9.99992C7.4987 11.3806 8.61799 12.4999 9.9987 12.4999Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span></a>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"storePerformanceLoading\">\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=\"storePerformanceNoData && !storePerformanceLoading\">\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 Store Performance Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n <div *ngIf=\"!storePerformanceLoading && !storePerformanceNoData\">\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 </div>\r\n </div>\r\n\r\n <div *ngIf=\"receivedData === 'user'\" class=\"col-lg-12\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">User Info <span class=\"badge badge-light-primary\">{{totalItems}} Total</span></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 [(ngModel)]=\"searchInput\" type=\"text\" class=\"form-control ps-14 ms-4 footfallsearch\"\r\n placeholder=\"Search by User Name\" autocomplete=\"off\" (keyup.enter)=\"searchField()\" />\r\n <button type=\"button\" (click)=\"onExport()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader ms-4\"\r\n [disabled]=\"!userPerformanceData.length\">\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 <a *ngIf=\"(gs.userAccess | async)?.TangoTrax_checklist_isAdd\" [routerLink]=\"['/manage/trax/createChecklist']\" type=\"button\"\r\n class=\"btn btn-primary ms-4 rounded-3 text-nowrap ng-star-inserted\" tabindex=\"0\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg><span class=\"ms-2 text-white\">Create Checklist</span></a>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"table-responsive\">\r\n <table *ngIf=\"!userPerformanceLoading && !userPerformanceNoData\"\r\n class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('userName')\">User Name<svg\r\n [ngClass]=\"sortColumName === 'userName' && sortDirection === 1 ? 'rotate' : ''\"\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=\"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\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('userEmail')\">Email<svg\r\n [ngClass]=\"sortColumName === 'userEmail' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'userEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('checkListCount')\">Checklist\r\n Assigned<svg\r\n [ngClass]=\"sortColumName === 'checkListCount' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'checkListCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('flaggedCount')\">Flags<svg\r\n [ngClass]=\"sortColumName === 'flaggedCount' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'flaggedCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('redo')\">ReDo<svg\r\n [ngClass]=\"sortColumName === 'redo' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'redo' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('completion')\">Completion % <svg\r\n [ngClass]=\"sortColumName === 'completion' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'completion' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('compliance')\">Compliance %<svg\r\n [ngClass]=\"sortColumName === 'compliance' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'compliance' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('performance')\">Performance %<svg\r\n [ngClass]=\"sortColumName === 'performance' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'performance' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let user of userPerformanceData\">\r\n <td>\r\n <a [routerLink]=\"['/manage/trax/dashboard/info']\"\r\n [queryParams]=\"{ type: 'user', userEmail: user.userEmail, }\"\r\n class=\"table-title-primary\">{{ user.userName }}</a>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ user.userEmail }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n {{ user.checkListCount !==null ? user?.checkListCount?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ user.flaggedCount !==null ?\r\n user?.flaggedCount?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}</div>\r\n </td> \r\n <td>\r\n <div class=\"d-flex\">\r\n <div class=\"text-end table-title\"><span class=\"my-1 mx-1 text-end\">{{\r\n user.redo !==null ? user?.redo?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 })\r\n : '--' }}</span></div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex\">\r\n <div class=\"h-5px w-100 bg-light mt-2\">\r\n <div role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\"\r\n class=\"bg-primary rounded h-5px\"\r\n [ngStyle]=\"{ width: user.completion + '%' }\">\r\n </div>\r\n </div>\r\n <div class=\"text-end table-title\"><span class=\"my-1 mx-1 text-end\">{{\r\n user.completion !==null ? user?.completion?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 })\r\n : '--' }}%</span></div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex\">\r\n <div class=\"h-5px w-100 bg-light mt-2\">\r\n <div role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\"\r\n class=\"bg-primary rounded h-5px\"\r\n [ngStyle]=\"{ width: user.compliance + '%' }\">\r\n </div>\r\n </div>\r\n <div class=\"text-end table-title\"><span class=\"my-1 mx-1 text-end\">{{\r\n user.compliance !==null ? user?.compliance?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 })\r\n : '--' }}%</span></div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex\">\r\n <div class=\"h-5px w-100 bg-light mt-2\">\r\n <div role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\"\r\n class=\"bg-primary rounded h-5px\"\r\n [ngStyle]=\"{ width: user.performance + '%' }\">\r\n </div>\r\n </div>\r\n <div class=\"text-end table-title\"><span class=\"my-1 mx-1 text-end\">{{\r\n user.performance !==null ? user?.performance?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 })\r\n : '--' }}%</span></div>\r\n </div>\r\n </td>\r\n\r\n <td>\r\n <a class=\"cursor-pointer\" [routerLink]=\"['/manage/trax/dashboard/info']\"\r\n [queryParams]=\"{type: 'user', userEmail: user.userEmail, }\"\r\n class=\"table-title\"><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\r\n d=\"M0.832031 9.99992C0.832031 9.99992 4.16536 3.33325 9.9987 3.33325C15.832 3.33325 19.1654 9.99992 19.1654 9.99992C19.1654 9.99992 15.832 16.6666 9.9987 16.6666C4.16536 16.6666 0.832031 9.99992 0.832031 9.99992Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M9.9987 12.4999C11.3794 12.4999 12.4987 11.3806 12.4987 9.99992C12.4987 8.61921 11.3794 7.49992 9.9987 7.49992C8.61799 7.49992 7.4987 8.61921 7.4987 9.99992C7.4987 11.3806 8.61799 12.4999 9.9987 12.4999Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span></a>\r\n </td>\r\n\r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"userPerformanceLoading\">\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=\"userPerformanceNoData && !userPerformanceLoading\">\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 User Performance Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"!userPerformanceLoading && !userPerformanceNoData\">\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 </div>\r\n </div>\r\n\r\n\r\n </div>\r\n</div>", styles: [".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}.card .card-header{padding:0px 1.5rem}.cardcount{color:var(--Black, #101828);font-size:30px;font-style:normal;font-weight:600;line-height:38px}.cardtext{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.cardsubcount{color:var(--Black, #101828);font-size:20px;font-style:normal;font-weight:700;line-height:30px}.card-border{padding:8px;border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.percent-value{color:var(--Gray-500, #667085);text-align:center;font-size:12px;font-style:normal;font-weight:600;line-height:18px}.week-font{color:var(--Gray-800, #1D2939);font-size:12px;font-style:normal;font-weight:400;line-height:18px}.nav-item .nav-link{color:var(--Gray-500, #667085);font-size:16px;font-weight:500}.activebtn{color:var(--Primary-700, #009BF3)!important;border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;font-size:16px!important;font-weight:500!important}.buttonsec{border-radius:8px;margin:0;background:var(--gray-50, white);width:100%;height:fit-content;padding:5px}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;text-decoration-line:underline}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.rotate{transform:rotate(180deg)}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}table tr{vertical-align:middle}table th,table td{height:44px!important;padding:20px 15px!important;align-items:center;gap:12px;align-self:stretch}.table-title{color:var(--Gray-500, #667085);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.daterange{color:var(--Gray-500, #667085);font-size:16px;font-style:normal;font-weight:600;line-height:24px}.nav-group-outline{border-radius:8px;border:1px solid var(--Primary-300, #6BCAFF);box-shadow:0 1px 2px #1018280d}.nav-group .btn.activePlanBtn{border-right:1px solid var(--Primary-300, #6BCAFF);background:var(--Primary-600, #00A3FF);color:#fff}.nav-group .btn.inactivePlanBtn{background-color:#fff;color:#333;border:1px solid #dcdcdc}\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: "directive", type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.DatePipe, name: "date" }] });
11702
11702
  }
11703
11703
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DashboardComponent, decorators: [{
11704
11704
  type: Component,
11705
- args: [{ selector: 'lib-dashboard', template: "<div class=\"daterange my-4 d-flex justify-content-between W-100\">\r\n <span class=\"mt-3\">Last refreshed at {{reloadDate}}</span>\r\n <div class=\"nav-group nav-group-outline border-1 btn-group p-0\">\r\n <button class=\"btn btn-outline\"\r\n [ngClass]=\"{\r\n 'activePlanBtn': type === 'Checklist',\r\n 'inactivePlanBtn': type !== 'Checklist',\r\n }\"\r\n (click)=\"selectPlan('Checklist')\"\r\n [routerLink]=\"'/manage/trax/dashboard'\"\r\n >\r\n Checklist\r\n </button>\r\n <button class=\"btn btn-outline px-6 py-3\"\r\n [ngClass]=\"{\r\n 'activePlanBtn': type === 'Task',\r\n 'inactivePlanBtn': type !== 'Task',\r\n }\"\r\n (click)=\"selectPlan('Task')\"\r\n [routerLink]=\"'/manage/trax/dashboard/task'\"\r\n\r\n >\r\n Task\r\n </button>\r\n </div>\r\n </div>\r\n \r\n<div class=\"col-md-12\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n <div class=\"col-2 px-2\">\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=\"cardcount\">\r\n {{ overallCardsData.activeUnique !==null ? overallCardsData?.activeUnique?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}\r\n </span>\r\n <span class=\"cardtext\">Active Checklists</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100-auto py-3 px-3\">\r\n <div class=\"cardsubcount my-2\">\r\n {{ overallCardsData.totalInstances?.count !==null ?\r\n overallCardsData.totalInstances?.count?.toLocaleString('en-US', { minimumFractionDigits: 0 })\r\n : '--' }}\r\n </div>\r\n <div class=\"cardtext\">Checklist Instances</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-5 px-2\">\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=\"cardcount\">\r\n {{ overallCardsData.notSubmittedInstances?.count !==null ? \r\n overallCardsData.notSubmittedInstances?.count?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}\r\n </span>\r\n <span class=\"cardtext\">Not Submitted Checklists</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"row h-100-auto py-3 px-3\">\r\n <div class=\"col-md-6\">\r\n <div class=\"cardsubcount my-2\">\r\n {{ overallCardsData.notSubmittedInstances?.open !==null ?\r\n overallCardsData?.notSubmittedInstances.open?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}\r\n </div>\r\n <div class=\"cardtext\">Open Checklists</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <div class=\"cardsubcount my-2\">\r\n {{ overallCardsData.notSubmittedInstances?.inprogress !==null ?\r\n overallCardsData.notSubmittedInstances?.inprogress?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}\r\n </div>\r\n <div class=\"cardtext\">In Progress Checklists</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-5 px-2\">\r\n <div class=\"card card-border pt-2 h-100-auto\">\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=\"cardcount\">\r\n {{ overallCardsData.completedInstances?.count !==null ?\r\n overallCardsData.completedInstances?.count?.toLocaleString('en-US', { minimumFractionDigits: 0\r\n }) : '--' }}\r\n </span>\r\n <span class=\"cardtext\">Submitted Checklists</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"row h-100-auto py-3 px-3\">\r\n <div class=\"col-md-11\">\r\n <div class=\"row\">\r\n <div class=\"col-md-4\">\r\n <div class=\"cardsubcount my-2\">\r\n {{ overallCardsData.completionScore?.count !==null ?\r\n overallCardsData.completionScore?.count?.toLocaleString('en-US', { minimumFractionDigits:\r\n 0 }) :\r\n '--' }}%\r\n </div>\r\n <div class=\"cardtext\">Completion Score</div>\r\n <div class=\"mt-2\">\r\n <span *ngIf=\"overallComparisonData?.completionScore?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"overallComparisonData?.completionScore?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg 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\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\"><span class=\"percent-value\">{{\r\n overallComparisonData?.completionScore?.comparisonData !==null ?\r\n overallComparisonData?.completionScore?.comparisonData?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--'}}%</span><span\r\n class=\"week-font\"> vs last <span *ngIf=\"dateType ==='daily'\">day</span><span *ngIf=\"dateType ==='weekly'\">week</span> <span *ngIf=\"dateType ==='monthly'\">month</span></span></span>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <div class=\"cardsubcount my-2\">\r\n {{ overallCardsData.complianceRate?.count !==null ?\r\n overallCardsData.complianceRate.count?.toLocaleString('en-US', { minimumFractionDigits: 0\r\n }) :\r\n '--' }}%\r\n </div>\r\n <div class=\"cardtext\">Compliance Score</div>\r\n <div class=\"mt-2\">\r\n <span *ngIf=\" overallComparisonData?.complianceRate?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"overallComparisonData?.complianceRate?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg 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\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\"><span class=\"percent-value\">{{\r\n overallComparisonData?.complianceRate?.comparisonData !==null ?\r\n overallComparisonData?.complianceRate?.comparisonData?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--'}}%</span><span\r\n class=\"week-font\"> vs last <span *ngIf=\"dateType ==='daily'\">day</span><span *ngIf=\"dateType ==='weekly'\">week</span> <span *ngIf=\"dateType ==='monthly'\">month</span></span></span>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <div *ngIf=\"overallCardsData.flags?.count; else noDataFlagged\" [routerLink]=\"['/manage/trax/flags']\" class=\"cardsubcount my-2 cursor-pointer\"> <u>\r\n {{ overallCardsData.flags?.count !==null ?\r\n overallCardsData.flags?.count?.toLocaleString('en-US', { minimumFractionDigits: 0 }) :\r\n '--' }}</u>\r\n </div>\r\n <ng-template #noDataFlagged>\r\n <div class=\"cardsubcount my-2\">--</div>\r\n </ng-template>\r\n <div class=\"cardtext\">Total Flags</div>\r\n <div class=\"mt-2\">\r\n <span *ngIf=\"overallComparisonData?.flags?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"overallComparisonData?.flags?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg 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\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\"><span class=\"percent-value\">{{\r\n overallComparisonData?.flags?.comparisonData !==null ?\r\n overallComparisonData?.flags?.comparisonData?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--'}}%</span><span\r\n class=\"week-font\"> vs last <span *ngIf=\"dateType ==='daily'\">day</span><span *ngIf=\"dateType ==='weekly'\">week</span> <span *ngIf=\"dateType ==='monthly'\">month</span></span></span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-1 mt-3\">\r\n <div class=\"mt-1 cursor-pointer fs-5\" [ngClass]=\"dateType ==='daily' ? 'text-primary' :''\" (click)=\"dateValue('daily')\">1D</div>\r\n <div class=\"mt-1 cursor-pointer fs-5\" [ngClass]=\"dateType ==='weekly' ? 'text-primary' :''\" (click)=\"dateValue('weekly')\">1W</div>\r\n <div *ngIf=\"traxMonthlyComparisonData\" class=\"mt-1 cursor-pointer fs-5\" [ngClass]=\"dateType ==='monthly' ? 'text-primary' :''\" (click)=\"dateValue('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 \r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n\r\n<div class=\"col-md-12 mt-4 card\">\r\n <div class=\"row\">\r\n <div class=\"d-flex overflow-auto p-7\">\r\n <ul\r\n class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs-2x justify-content-center align-items-center border-transparent flex-nowrap\">\r\n <li class=\"nav-item cursor-pointer\" (click)=\"Selecttabs('checklist')\"\r\n [routerLink]=\"['/manage/trax/dashboard']\" [queryParams]=\"{ type: 'Checklist' }\">\r\n <a [ngClass]=\"receivedData === 'checklist'?'btn activebtn':''\" class=\"fw-semibold nav-link me-6\">\r\n Checklist Performance\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" (click)=\"Selecttabs('store')\" [routerLink]=\"['/manage/trax/store']\"\r\n [queryParams]=\"{ type: 'store' }\">\r\n <a [ngClass]=\"receivedData === 'store' || receivedData === 'Group Details Value'? 'btn activebtn':''\"\r\n class=\"nav-link me-6\">Store Performance\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" (click)=\"Selecttabs('user')\" [routerLink]=\"['/manage/trax/user']\"\r\n [queryParams]=\"{ type: 'user' }\">\r\n <a [ngClass]=\"receivedData === 'user' || receivedData === 'Group Details Value'? 'btn activebtn':''\"\r\n class=\"nav-link me-6\">User Performance\r\n </a>\r\n </li>\r\n </ul>\r\n </div>\r\n <div *ngIf=\"receivedData === 'checklist'\" class=\"col-lg-12\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Checklist Info <span class=\"badge badge-light-primary\">{{totalItems}} Total</span></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 <!-- [disabled]=\"searchDisabled\" -->\r\n <input [(ngModel)]=\"searchInput\" type=\"text\" class=\"form-control ps-14 ms-4 footfallsearch\"\r\n placeholder=\"Search by Checklist\" autocomplete=\"off\" (keyup.enter)=\"searchField()\" />\r\n <button type=\"button\" (click)=\"onExport()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader ms-4\"\r\n [disabled]=\"!checklistPerformance.length\">\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 <a *ngIf=\"(gs.userAccess | async)?.TangoTrax_checklist_isAdd\" [routerLink]=\"['/manage/trax/createChecklist']\" type=\"button\"\r\n class=\"btn btn-primary ms-4 rounded-3 text-nowrap ng-star-inserted\" tabindex=\"0\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg><span class=\"ms-2 text-white\">Create Checklist</span></a>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"table-responsive\">\r\n <table *ngIf=\"!checklistLoading && !checklistNoData\" class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>Checklist Name</th>\r\n <th>Scheduled</th>\r\n <th (click)=\"sortData('coverage')\" class=\"cuyrsor-pointer\">Coverage<svg\r\n [ngClass]=\"sortColumName === 'coverage' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'coverage' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeCount')\">Assigned To<svg\r\n [ngClass]=\"sortColumName === 'storeCount' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('submittedChecklist')\">Submitted<svg\r\n [ngClass]=\"sortColumName === 'submittedChecklist' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'submittedChecklist' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('flaggedChecklist')\">Flags<svg\r\n [ngClass]=\"sortColumName === 'flaggedChecklist' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'flaggedChecklist' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('task')\">Tasks<svg\r\n [ngClass]=\"sortColumName === 'task' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'task' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('redo')\">ReDo<svg\r\n [ngClass]=\"sortColumName === 'redo' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'redo' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\" 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 store of checklistPerformance\">\r\n <td>\r\n <div class=\"symbol symbol-35px symbol-circle\">\r\n <span class=\"symbol-label bg-light-primary text-primary me-2\">\r\n {{ store.checkListChar || '--' }}\r\n </span>\r\n </div>\r\n <span [routerLink]=\"['/manage/trax/dashboard/info']\"\r\n [queryParams]=\"{ type: 'Checklist', checklist: store.sourceCheckList_id, }\"\r\n class=\"table-title-primary cursor-pointer\">{{ store.checkListName || '--'\r\n }}</span>\r\n </td>\r\n <td>\r\n \r\n <div class=\"table-title\">\r\n {{ store.scheduleRepeatedType === 'Onetime' ? 'Single' : (store.scheduleRepeatedType ? store?.scheduleRepeatedType?.toLocaleString('en-US', { minimumFractionDigits: 0 }) : '--') }}\r\n </div>\r\n \r\n </td>\r\n <td>{{ store?.coverage ? store?.coverage : '--'}}</td>\r\n <td>\r\n <div class=\"table-title\">{{ store.storeCount !==null ?\r\n store?.storeCount?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}</div>\r\n </td>\r\n <td>\r\n <div *ngIf=\"store.submittedChecklist; else noDataSubmitted\" [routerLink]=\"['/manage/trax/dashboard/info']\"\r\n [queryParams]=\"{ type: 'Checklist', checklist: store.sourceCheckList_id, status: 'submit' }\"\r\n class=\"table-title-primary cursor-pointer\">{{\r\n store.submittedChecklist !==null ? store.submittedChecklist?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 })\r\n : '--' }}</div>\r\n <ng-template #noDataSubmitted>\r\n <div class=\"table-title\">--</div>\r\n </ng-template>\r\n </td>\r\n <td>\r\n <div *ngIf=\"store.flaggedChecklist > 0; else noDataFlagged\" [routerLink]=\"['/manage/trax/flags/flagsinfo']\" [queryParams]=\"{ id: store._id }\"\r\n class=\"table-title-primary cursor-pointer\">{{ store.flaggedChecklist !==null ?\r\n store?.flaggedChecklist?.toLocaleString('en-US',\r\n { minimumFractionDigits: 0 }) : '--' }}</div>\r\n <ng-template #noDataFlagged>\r\n <div class=\"table-title\">--</div>\r\n </ng-template>\r\n </td>\r\n <td>\r\n <div *ngIf=\"store.task > 0; else noDataTasks\" [routerLink]=\"['/manage/trax/dashboard/task']\" [queryParams]=\"{ coverage: 'checklist', checklistId: store._id}\"\r\n class=\"table-title-primary cursor-pointer\">{{ store.task !==null ?\r\n store?.task?.toLocaleString('en-US',\r\n { minimumFractionDigits: 0 }) : '--' }}</div>\r\n <ng-template #noDataTasks>\r\n <div class=\"table-title\">--</div>\r\n </ng-template>\r\n </td>\r\n <td>\r\n <div *ngIf=\"store.redo > 0; else noDataRedo\" [routerLink]=\"['/manage/trax/dashboard/info']\" [queryParams]=\"{ type: 'Checklist', checklist: store.sourceCheckList_id, status: 'redo' }\"\r\n class=\"table-title-primary cursor-pointer\">{{ store.redo !==null ?\r\n store?.redo?.toLocaleString('en-US',\r\n { minimumFractionDigits: 0 }) : '--' }}</div>\r\n <ng-template #noDataRedo>\r\n <div class=\"table-title\">--</div>\r\n </ng-template>\r\n </td>\r\n\r\n <!-- <td>\r\n <div class=\"table-title-primary\">{{ store.checkListType || '--' }}</div>\r\n </td> -->\r\n <td>\r\n <a class=\"cursor-pointer\" [routerLink]=\"['/manage/trax/dashboard/info']\"\r\n [queryParams]=\"{ type: 'Checklist', checklist: store.sourceCheckList_id, }\"\r\n class=\"table-title\"><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\r\n d=\"M0.832031 9.99992C0.832031 9.99992 4.16536 3.33325 9.9987 3.33325C15.832 3.33325 19.1654 9.99992 19.1654 9.99992C19.1654 9.99992 15.832 16.6666 9.9987 16.6666C4.16536 16.6666 0.832031 9.99992 0.832031 9.99992Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M9.9987 12.4999C11.3794 12.4999 12.4987 11.3806 12.4987 9.99992C12.4987 8.61921 11.3794 7.49992 9.9987 7.49992C8.61799 7.49992 7.4987 8.61921 7.4987 9.99992C7.4987 11.3806 8.61799 12.4999 9.9987 12.4999Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span></a>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n <ng-container *ngIf=\"checklistLoading\">\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=\"checklistNoData && !checklistLoading\">\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 Checklist Performance Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n <div *ngIf=\"!checklistLoading && !checklistNoData\">\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 </div>\r\n </div>\r\n\r\n <div *ngIf=\"receivedData === 'store'\" class=\"col-lg-12\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Stores Info<span class=\"badge badge-light-primary ms-2\">{{totalItems}} Total</span></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 [(ngModel)]=\"searchInput\" type=\"text\" class=\"form-control ps-14 ms-4 footfallsearch\"\r\n placeholder=\"Search by Store Name\" autocomplete=\"off\" (keyup.enter)=\"searchField()\" />\r\n <button type=\"button\" (click)=\"onExport()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader ms-4\"\r\n [disabled]=\"!storePerformanceData.length\">\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 <a *ngIf=\"(gs.userAccess | async)?.TangoTrax_checklist_isAdd\" [routerLink]=\"['/manage/trax/createChecklist']\" type=\"button\"\r\n class=\"btn btn-primary ms-4 rounded-3 text-nowrap ng-star-inserted\" tabindex=\"0\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg><span class=\"ms-2 text-white\">Create Checklist</span></a>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"table-responsive\">\r\n <table *ngIf=\"!storePerformanceLoading && !storePerformanceNoData\"\r\n class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\">Store Name<svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\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=\"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\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th>Store Spoc</th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('checkListCount')\">Checklist\r\n Assigned<svg\r\n [ngClass]=\"sortColumName === 'checkListCount' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'checkListCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('flaggedCount')\">Flags<svg\r\n [ngClass]=\"sortColumName === 'flaggedCount' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'flaggedCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('completion')\">Completion % <svg\r\n [ngClass]=\"sortColumName === 'completion' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'completion' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('compliance')\">Compliance %<svg\r\n [ngClass]=\"sortColumName === 'compliance' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'compliance' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('performance')\">Performance %<svg\r\n [ngClass]=\"sortColumName === 'performance' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'performance' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n <tr *ngFor=\"let item of storePerformanceData\">\r\n {{item.storeId}}\r\n <td>\r\n <!-- [routerLink]=\"['/manage/trax/dashboard/info']\"\r\n [queryParams]=\"{ store_id: item._id, type: 'store' }\" -->\r\n <a (click)=\"storeView(item._id)\" class=\"table-title-primary cursor-pointer\">{{\r\n item.storeName }}</a>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ item.userEmail }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n {{ item.checkListCount !==null ? item?.checkListCount?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n {{ item.flaggedCount !==null ? item?.flaggedCount?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex\">\r\n <div class=\"h-5px w-100 bg-light mt-2 \">\r\n <div role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\"\r\n class=\"bg-primary rounded h-5px\"\r\n [ngStyle]=\"{ width: item.completion + '%' }\"></div>\r\n </div>\r\n <div class=\"text-end table-title\"><span class=\"my-1 mx-1 text-end\">{{\r\n item.completion !==null ? item?.completion?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 })\r\n : '--' }}%</span></div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex\">\r\n <div class=\"h-5px w-100 bg-light mt-2 \">\r\n <div role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\"\r\n class=\"bg-primary rounded h-5px\"\r\n [ngStyle]=\"{ width: item.compliance + '%' }\"></div>\r\n </div>\r\n <div class=\"text-end table-title\"><span class=\"my-1 mx-1 text-end\">{{\r\n item.compliance !==null ? item?.compliance?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 })\r\n : '--' }}%</span></div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex\">\r\n <div class=\"h-5px w-100 bg-light mt-2 \">\r\n <div role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\"\r\n class=\"bg-primary rounded h-5px\"\r\n [ngStyle]=\"{ width: item.performance + '%' }\"></div>\r\n </div>\r\n <div class=\"text-end table-title\"><span class=\"my-1 mx-1 text-end\">{{\r\n item.performance !==null ? item?.performance?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 })\r\n : '--' }}%</span></div>\r\n </div>\r\n </td>\r\n <td>\r\n <a (click)=\"storeView(item._id)\" class=\"table-title cursor-pointer\"><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\r\n d=\"M0.832031 9.99992C0.832031 9.99992 4.16536 3.33325 9.9987 3.33325C15.832 3.33325 19.1654 9.99992 19.1654 9.99992C19.1654 9.99992 15.832 16.6666 9.9987 16.6666C4.16536 16.6666 0.832031 9.99992 0.832031 9.99992Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M9.9987 12.4999C11.3794 12.4999 12.4987 11.3806 12.4987 9.99992C12.4987 8.61921 11.3794 7.49992 9.9987 7.49992C8.61799 7.49992 7.4987 8.61921 7.4987 9.99992C7.4987 11.3806 8.61799 12.4999 9.9987 12.4999Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span></a>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"storePerformanceLoading\">\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=\"storePerformanceNoData && !storePerformanceLoading\">\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 Store Performance Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n <div *ngIf=\"!storePerformanceLoading && !storePerformanceNoData\">\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 </div>\r\n </div>\r\n\r\n <div *ngIf=\"receivedData === 'user'\" class=\"col-lg-12\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">User Info <span class=\"badge badge-light-primary\">{{totalItems}} Total</span></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 [(ngModel)]=\"searchInput\" type=\"text\" class=\"form-control ps-14 ms-4 footfallsearch\"\r\n placeholder=\"Search by User Name\" autocomplete=\"off\" (keyup.enter)=\"searchField()\" />\r\n <button type=\"button\" (click)=\"onExport()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader ms-4\"\r\n [disabled]=\"!userPerformanceData.length\">\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 <a *ngIf=\"(gs.userAccess | async)?.TangoTrax_checklist_isAdd\" [routerLink]=\"['/manage/trax/createChecklist']\" type=\"button\"\r\n class=\"btn btn-primary ms-4 rounded-3 text-nowrap ng-star-inserted\" tabindex=\"0\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg><span class=\"ms-2 text-white\">Create Checklist</span></a>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"table-responsive\">\r\n <table *ngIf=\"!userPerformanceLoading && !userPerformanceNoData\"\r\n class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('userName')\">User Name<svg\r\n [ngClass]=\"sortColumName === 'userName' && sortDirection === 1 ? 'rotate' : ''\"\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=\"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\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('userEmail')\">Email<svg\r\n [ngClass]=\"sortColumName === 'userEmail' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'userEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('checkListCount')\">Checklist\r\n Assigned<svg\r\n [ngClass]=\"sortColumName === 'checkListCount' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'checkListCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('flaggedCount')\">Flags<svg\r\n [ngClass]=\"sortColumName === 'flaggedCount' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'flaggedCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('completion')\">Completion % <svg\r\n [ngClass]=\"sortColumName === 'completion' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'completion' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('compliance')\">Compliance %<svg\r\n [ngClass]=\"sortColumName === 'compliance' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'compliance' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('performance')\">Performance %<svg\r\n [ngClass]=\"sortColumName === 'performance' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'performance' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let user of userPerformanceData\">\r\n <td>\r\n <a [routerLink]=\"['/manage/trax/dashboard/info']\"\r\n [queryParams]=\"{ type: 'user', userEmail: user.userEmail, }\"\r\n class=\"table-title-primary\">{{ user.userName }}</a>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ user.userEmail }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n {{ user.checkListCount !==null ? user?.checkListCount?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ user.flaggedCount !==null ?\r\n user?.flaggedCount?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex\">\r\n <div class=\"h-5px w-100 bg-light mt-2\">\r\n <div role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\"\r\n class=\"bg-primary rounded h-5px\"\r\n [ngStyle]=\"{ width: user.completion + '%' }\">\r\n </div>\r\n </div>\r\n <div class=\"text-end table-title\"><span class=\"my-1 mx-1 text-end\">{{\r\n user.completion !==null ? user?.completion?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 })\r\n : '--' }}%</span></div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex\">\r\n <div class=\"h-5px w-100 bg-light mt-2\">\r\n <div role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\"\r\n class=\"bg-primary rounded h-5px\"\r\n [ngStyle]=\"{ width: user.compliance + '%' }\">\r\n </div>\r\n </div>\r\n <div class=\"text-end table-title\"><span class=\"my-1 mx-1 text-end\">{{\r\n user.compliance !==null ? user?.compliance?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 })\r\n : '--' }}%</span></div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex\">\r\n <div class=\"h-5px w-100 bg-light mt-2\">\r\n <div role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\"\r\n class=\"bg-primary rounded h-5px\"\r\n [ngStyle]=\"{ width: user.performance + '%' }\">\r\n </div>\r\n </div>\r\n <div class=\"text-end table-title\"><span class=\"my-1 mx-1 text-end\">{{\r\n user.performance !==null ? user?.performance?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 })\r\n : '--' }}%</span></div>\r\n </div>\r\n </td>\r\n\r\n <td>\r\n <a class=\"cursor-pointer\" [routerLink]=\"['/manage/trax/dashboard/info']\"\r\n [queryParams]=\"{type: 'user', userEmail: user.userEmail, }\"\r\n class=\"table-title\"><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\r\n d=\"M0.832031 9.99992C0.832031 9.99992 4.16536 3.33325 9.9987 3.33325C15.832 3.33325 19.1654 9.99992 19.1654 9.99992C19.1654 9.99992 15.832 16.6666 9.9987 16.6666C4.16536 16.6666 0.832031 9.99992 0.832031 9.99992Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M9.9987 12.4999C11.3794 12.4999 12.4987 11.3806 12.4987 9.99992C12.4987 8.61921 11.3794 7.49992 9.9987 7.49992C8.61799 7.49992 7.4987 8.61921 7.4987 9.99992C7.4987 11.3806 8.61799 12.4999 9.9987 12.4999Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span></a>\r\n </td>\r\n\r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"userPerformanceLoading\">\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=\"userPerformanceNoData && !userPerformanceLoading\">\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 User Performance Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"!userPerformanceLoading && !userPerformanceNoData\">\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 </div>\r\n </div>\r\n\r\n\r\n </div>\r\n</div>", styles: [".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}.card .card-header{padding:0px 1.5rem}.cardcount{color:var(--Black, #101828);font-size:30px;font-style:normal;font-weight:600;line-height:38px}.cardtext{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.cardsubcount{color:var(--Black, #101828);font-size:20px;font-style:normal;font-weight:700;line-height:30px}.card-border{padding:8px;border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.percent-value{color:var(--Gray-500, #667085);text-align:center;font-size:12px;font-style:normal;font-weight:600;line-height:18px}.week-font{color:var(--Gray-800, #1D2939);font-size:12px;font-style:normal;font-weight:400;line-height:18px}.nav-item .nav-link{color:var(--Gray-500, #667085);font-size:16px;font-weight:500}.activebtn{color:var(--Primary-700, #009BF3)!important;border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;font-size:16px!important;font-weight:500!important}.buttonsec{border-radius:8px;margin:0;background:var(--gray-50, white);width:100%;height:fit-content;padding:5px}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;text-decoration-line:underline}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.rotate{transform:rotate(180deg)}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}table tr{vertical-align:middle}table th,table td{height:44px!important;padding:20px 15px!important;align-items:center;gap:12px;align-self:stretch}.table-title{color:var(--Gray-500, #667085);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.daterange{color:var(--Gray-500, #667085);font-size:16px;font-style:normal;font-weight:600;line-height:24px}.nav-group-outline{border-radius:8px;border:1px solid var(--Primary-300, #6BCAFF);box-shadow:0 1px 2px #1018280d}.nav-group .btn.activePlanBtn{border-right:1px solid var(--Primary-300, #6BCAFF);background:var(--Primary-600, #00A3FF);color:#fff}.nav-group .btn.inactivePlanBtn{background-color:#fff;color:#333;border:1px solid #dcdcdc}\n"] }]
11705
+ args: [{ selector: 'lib-dashboard', template: "<div class=\"daterange my-4 d-flex justify-content-between W-100\">\r\n <span class=\"mt-3\">Last refreshed at {{reloadDate}}</span>\r\n <div class=\"nav-group nav-group-outline border-1 btn-group p-0\">\r\n <button class=\"btn btn-outline\"\r\n [ngClass]=\"{\r\n 'activePlanBtn': type === 'Checklist',\r\n 'inactivePlanBtn': type !== 'Checklist',\r\n }\"\r\n (click)=\"selectPlan('Checklist')\"\r\n [routerLink]=\"'/manage/trax/dashboard'\"\r\n >\r\n Checklist\r\n </button>\r\n <button class=\"btn btn-outline px-6 py-3\"\r\n [ngClass]=\"{\r\n 'activePlanBtn': type === 'Task',\r\n 'inactivePlanBtn': type !== 'Task',\r\n }\"\r\n (click)=\"selectPlan('Task')\"\r\n [routerLink]=\"'/manage/trax/dashboard/task'\"\r\n\r\n >\r\n Task\r\n </button>\r\n </div>\r\n </div>\r\n \r\n<div class=\"col-md-12\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n <div class=\"col-2 px-2\">\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=\"cardcount\">\r\n {{ overallCardsData.activeUnique !==null ? overallCardsData?.activeUnique?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}\r\n </span>\r\n <span class=\"cardtext\">Active Checklists</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100-auto py-3 px-3\">\r\n <div class=\"cardsubcount my-2\">\r\n {{ overallCardsData.totalInstances?.count !==null ?\r\n overallCardsData.totalInstances?.count?.toLocaleString('en-US', { minimumFractionDigits: 0 })\r\n : '--' }}\r\n </div>\r\n <div class=\"cardtext\">Checklist Instances</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-5 px-2\">\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=\"cardcount\">\r\n {{ overallCardsData.notSubmittedInstances?.count !==null ? \r\n overallCardsData.notSubmittedInstances?.count?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}\r\n </span>\r\n <span class=\"cardtext\">Not Submitted Checklists</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"row h-100-auto py-3 px-3\">\r\n <div class=\"col-md-6\">\r\n <div class=\"cardsubcount my-2\">\r\n {{ overallCardsData.notSubmittedInstances?.open !==null ?\r\n overallCardsData?.notSubmittedInstances.open?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}\r\n </div>\r\n <div class=\"cardtext\">Open Checklists</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <div class=\"cardsubcount my-2\">\r\n {{ overallCardsData.notSubmittedInstances?.inprogress !==null ?\r\n overallCardsData.notSubmittedInstances?.inprogress?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}\r\n </div>\r\n <div class=\"cardtext\">In Progress Checklists</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-5 px-2\">\r\n <div class=\"card card-border pt-2 h-100-auto\">\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=\"cardcount\">\r\n {{ overallCardsData.completedInstances?.count !==null ?\r\n overallCardsData.completedInstances?.count?.toLocaleString('en-US', { minimumFractionDigits: 0\r\n }) : '--' }}\r\n </span>\r\n <span class=\"cardtext\">Submitted Checklists</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"row h-100-auto py-3 px-3\">\r\n <div class=\"col-md-11\">\r\n <div class=\"row\">\r\n <div class=\"col-md-4\">\r\n <div class=\"cardsubcount my-2\">\r\n {{ overallCardsData.completionScore?.count !==null ?\r\n overallCardsData.completionScore?.count?.toLocaleString('en-US', { minimumFractionDigits:\r\n 0 }) :\r\n '--' }}%\r\n </div>\r\n <div class=\"cardtext\">Completion Score</div>\r\n <div class=\"mt-2\">\r\n <span *ngIf=\"overallComparisonData?.completionScore?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"overallComparisonData?.completionScore?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg 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\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\"><span class=\"percent-value\">{{\r\n overallComparisonData?.completionScore?.comparisonData !==null ?\r\n overallComparisonData?.completionScore?.comparisonData?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--'}}%</span><span\r\n class=\"week-font\"> vs last <span *ngIf=\"dateType ==='daily'\">day</span><span *ngIf=\"dateType ==='weekly'\">week</span> <span *ngIf=\"dateType ==='monthly'\">month</span></span></span>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <div class=\"cardsubcount my-2\">\r\n {{ overallCardsData.complianceRate?.count !==null ?\r\n overallCardsData.complianceRate.count?.toLocaleString('en-US', { minimumFractionDigits: 0\r\n }) :\r\n '--' }}%\r\n </div>\r\n <div class=\"cardtext\">Compliance Score</div>\r\n <div class=\"mt-2\">\r\n <span *ngIf=\" overallComparisonData?.complianceRate?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"overallComparisonData?.complianceRate?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg 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\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\"><span class=\"percent-value\">{{\r\n overallComparisonData?.complianceRate?.comparisonData !==null ?\r\n overallComparisonData?.complianceRate?.comparisonData?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--'}}%</span><span\r\n class=\"week-font\"> vs last <span *ngIf=\"dateType ==='daily'\">day</span><span *ngIf=\"dateType ==='weekly'\">week</span> <span *ngIf=\"dateType ==='monthly'\">month</span></span></span>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <div *ngIf=\"overallCardsData.flags?.count; else noDataFlagged\" [routerLink]=\"['/manage/trax/flags']\" class=\"cardsubcount my-2 cursor-pointer\"> <u>\r\n {{ overallCardsData.flags?.count !==null ?\r\n overallCardsData.flags?.count?.toLocaleString('en-US', { minimumFractionDigits: 0 }) :\r\n '--' }}</u>\r\n </div>\r\n <ng-template #noDataFlagged>\r\n <div class=\"cardsubcount my-2\">--</div>\r\n </ng-template>\r\n <div class=\"cardtext\">Total Flags</div>\r\n <div class=\"mt-2\">\r\n <span *ngIf=\"overallComparisonData?.flags?.comparisonData\">\r\n <span class=\"mt-2\"\r\n *ngIf=\"overallComparisonData?.flags?.ComparisonFlag; else showArrow2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_3216_118)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3216_118\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #showArrow2>\r\n <span class=\"arrow2\">\r\n <svg 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\"></rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </span>\r\n <span class=\"mt-2 ms-2\"><span class=\"percent-value\">{{\r\n overallComparisonData?.flags?.comparisonData !==null ?\r\n overallComparisonData?.flags?.comparisonData?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--'}}%</span><span\r\n class=\"week-font\"> vs last <span *ngIf=\"dateType ==='daily'\">day</span><span *ngIf=\"dateType ==='weekly'\">week</span> <span *ngIf=\"dateType ==='monthly'\">month</span></span></span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-1 mt-3\">\r\n <div class=\"mt-1 cursor-pointer fs-5\" [ngClass]=\"dateType ==='daily' ? 'text-primary' :''\" (click)=\"dateValue('daily')\">1D</div>\r\n <div class=\"mt-1 cursor-pointer fs-5\" [ngClass]=\"dateType ==='weekly' ? 'text-primary' :''\" (click)=\"dateValue('weekly')\">1W</div>\r\n <div *ngIf=\"traxMonthlyComparisonData\" class=\"mt-1 cursor-pointer fs-5\" [ngClass]=\"dateType ==='monthly' ? 'text-primary' :''\" (click)=\"dateValue('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 \r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n\r\n<div class=\"col-md-12 mt-4 card\">\r\n <div class=\"row\">\r\n <div class=\"d-flex overflow-auto p-7\">\r\n <ul\r\n class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs-2x justify-content-center align-items-center border-transparent flex-nowrap\">\r\n <li class=\"nav-item cursor-pointer\" (click)=\"Selecttabs('checklist')\"\r\n [routerLink]=\"['/manage/trax/dashboard']\" [queryParams]=\"{ type: 'Checklist' }\">\r\n <a [ngClass]=\"receivedData === 'checklist'?'btn activebtn':''\" class=\"fw-semibold nav-link me-6\">\r\n Checklist Performance\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" (click)=\"Selecttabs('store')\" [routerLink]=\"['/manage/trax/store']\"\r\n [queryParams]=\"{ type: 'store' }\">\r\n <a [ngClass]=\"receivedData === 'store' || receivedData === 'Group Details Value'? 'btn activebtn':''\"\r\n class=\"nav-link me-6\">Store Performance\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" (click)=\"Selecttabs('user')\" [routerLink]=\"['/manage/trax/user']\"\r\n [queryParams]=\"{ type: 'user' }\">\r\n <a [ngClass]=\"receivedData === 'user' || receivedData === 'Group Details Value'? 'btn activebtn':''\"\r\n class=\"nav-link me-6\">User Performance\r\n </a>\r\n </li>\r\n </ul>\r\n </div>\r\n <div *ngIf=\"receivedData === 'checklist'\" class=\"col-lg-12\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Checklist Info <span class=\"badge badge-light-primary\">{{totalItems}} Total</span></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 <!-- [disabled]=\"searchDisabled\" -->\r\n <input [(ngModel)]=\"searchInput\" type=\"text\" class=\"form-control ps-14 ms-4 footfallsearch\"\r\n placeholder=\"Search by Checklist\" autocomplete=\"off\" (keyup.enter)=\"searchField()\" />\r\n <button type=\"button\" (click)=\"onExport()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader ms-4\"\r\n [disabled]=\"!checklistPerformance.length\">\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 <a *ngIf=\"(gs.userAccess | async)?.TangoTrax_checklist_isAdd\" [routerLink]=\"['/manage/trax/createChecklist']\" type=\"button\"\r\n class=\"btn btn-primary ms-4 rounded-3 text-nowrap ng-star-inserted\" tabindex=\"0\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg><span class=\"ms-2 text-white\">Create Checklist</span></a>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"table-responsive\">\r\n <table *ngIf=\"!checklistLoading && !checklistNoData\" class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>Checklist Name</th>\r\n <th>Scheduled</th>\r\n <th (click)=\"sortData('coverage')\" class=\"cuyrsor-pointer\">Coverage<svg\r\n [ngClass]=\"sortColumName === 'coverage' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'coverage' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeCount')\">Assigned To<svg\r\n [ngClass]=\"sortColumName === 'storeCount' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('submittedChecklist')\">Submitted<svg\r\n [ngClass]=\"sortColumName === 'submittedChecklist' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'submittedChecklist' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('flaggedChecklist')\">Flags<svg\r\n [ngClass]=\"sortColumName === 'flaggedChecklist' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'flaggedChecklist' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('task')\">Tasks<svg\r\n [ngClass]=\"sortColumName === 'task' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'task' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('redo')\">ReDo<svg\r\n [ngClass]=\"sortColumName === 'redo' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'redo' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\" 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 store of checklistPerformance\">\r\n <td>\r\n <div class=\"symbol symbol-35px symbol-circle\">\r\n <span class=\"symbol-label bg-light-primary text-primary me-2\">\r\n {{ store.checkListChar || '--' }}\r\n </span>\r\n </div>\r\n <span [routerLink]=\"['/manage/trax/dashboard/info']\"\r\n [queryParams]=\"{ type: 'Checklist', checklist: store.sourceCheckList_id, }\"\r\n class=\"table-title-primary cursor-pointer\">{{ store.checkListName || '--'\r\n }}</span>\r\n </td>\r\n <td>\r\n \r\n <div class=\"table-title\">\r\n {{ store.scheduleRepeatedType === 'Onetime' ? 'Single' : (store.scheduleRepeatedType ? store?.scheduleRepeatedType?.toLocaleString('en-US', { minimumFractionDigits: 0 }) : '--') }}\r\n </div>\r\n \r\n </td>\r\n <td>{{ store?.coverage ? store?.coverage : '--'}}</td>\r\n <td>\r\n <div class=\"table-title\">{{ store.storeCount !==null ?\r\n store?.storeCount?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}</div>\r\n </td>\r\n <td>\r\n <div *ngIf=\"store.submittedChecklist; else noDataSubmitted\" [routerLink]=\"['/manage/trax/dashboard/info']\"\r\n [queryParams]=\"{ type: 'Checklist', checklist: store.sourceCheckList_id, status: 'submit' }\"\r\n class=\"table-title-primary cursor-pointer\">{{\r\n store.submittedChecklist !==null ? store.submittedChecklist?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 })\r\n : '--' }}</div>\r\n <ng-template #noDataSubmitted>\r\n <div class=\"table-title\">--</div>\r\n </ng-template>\r\n </td>\r\n <td>\r\n <div *ngIf=\"store.flaggedChecklist > 0; else noDataFlagged\" [routerLink]=\"['/manage/trax/flags/flagsinfo']\" [queryParams]=\"{ id: store._id }\"\r\n class=\"table-title-primary cursor-pointer\">{{ store.flaggedChecklist !==null ?\r\n store?.flaggedChecklist?.toLocaleString('en-US',\r\n { minimumFractionDigits: 0 }) : '--' }}</div>\r\n <ng-template #noDataFlagged>\r\n <div class=\"table-title\">--</div>\r\n </ng-template>\r\n </td>\r\n <td>\r\n <div *ngIf=\"store.task > 0; else noDataTasks\" [routerLink]=\"['/manage/trax/dashboard/task']\" [queryParams]=\"{ coverage: 'checklist', checklistId: store._id}\"\r\n class=\"table-title-primary cursor-pointer\">{{ store.task !==null ?\r\n store?.task?.toLocaleString('en-US',\r\n { minimumFractionDigits: 0 }) : '--' }}</div>\r\n <ng-template #noDataTasks>\r\n <div class=\"table-title\">--</div>\r\n </ng-template>\r\n </td>\r\n <td>\r\n <div *ngIf=\"store.redo > 0; else noDataRedo\" [routerLink]=\"['/manage/trax/dashboard/info']\" [queryParams]=\"{ type: 'Checklist', checklist: store.sourceCheckList_id, status: 'redo' }\"\r\n class=\"table-title-primary cursor-pointer\">{{ store.redo !==null ?\r\n store?.redo?.toLocaleString('en-US',\r\n { minimumFractionDigits: 0 }) : '--' }}</div>\r\n <ng-template #noDataRedo>\r\n <div class=\"table-title\">--</div>\r\n </ng-template>\r\n </td>\r\n\r\n <!-- <td>\r\n <div class=\"table-title-primary\">{{ store.checkListType || '--' }}</div>\r\n </td> -->\r\n <td>\r\n <a class=\"cursor-pointer\" [routerLink]=\"['/manage/trax/dashboard/info']\"\r\n [queryParams]=\"{ type: 'Checklist', checklist: store.sourceCheckList_id, }\"\r\n class=\"table-title\"><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\r\n d=\"M0.832031 9.99992C0.832031 9.99992 4.16536 3.33325 9.9987 3.33325C15.832 3.33325 19.1654 9.99992 19.1654 9.99992C19.1654 9.99992 15.832 16.6666 9.9987 16.6666C4.16536 16.6666 0.832031 9.99992 0.832031 9.99992Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M9.9987 12.4999C11.3794 12.4999 12.4987 11.3806 12.4987 9.99992C12.4987 8.61921 11.3794 7.49992 9.9987 7.49992C8.61799 7.49992 7.4987 8.61921 7.4987 9.99992C7.4987 11.3806 8.61799 12.4999 9.9987 12.4999Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span></a>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n <ng-container *ngIf=\"checklistLoading\">\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=\"checklistNoData && !checklistLoading\">\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 Checklist Performance Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n <div *ngIf=\"!checklistLoading && !checklistNoData\">\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 </div>\r\n </div>\r\n\r\n <div *ngIf=\"receivedData === 'store'\" class=\"col-lg-12\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Stores Info<span class=\"badge badge-light-primary ms-2\">{{totalItems}} Total</span></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 [(ngModel)]=\"searchInput\" type=\"text\" class=\"form-control ps-14 ms-4 footfallsearch\"\r\n placeholder=\"Search by Store Name\" autocomplete=\"off\" (keyup.enter)=\"searchField()\" />\r\n <button type=\"button\" (click)=\"onExport()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader ms-4\"\r\n [disabled]=\"!storePerformanceData.length\">\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 <a *ngIf=\"(gs.userAccess | async)?.TangoTrax_checklist_isAdd\" [routerLink]=\"['/manage/trax/createChecklist']\" type=\"button\"\r\n class=\"btn btn-primary ms-4 rounded-3 text-nowrap ng-star-inserted\" tabindex=\"0\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg><span class=\"ms-2 text-white\">Create Checklist</span></a>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"table-responsive\">\r\n <table *ngIf=\"!storePerformanceLoading && !storePerformanceNoData\"\r\n class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\">Store Name<svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\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=\"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\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th>Store Spoc</th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('checkListCount')\">Checklist\r\n Assigned<svg\r\n [ngClass]=\"sortColumName === 'checkListCount' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'checkListCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('flaggedCount')\">Flags<svg\r\n [ngClass]=\"sortColumName === 'flaggedCount' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'flaggedCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('completion')\">Completion % <svg\r\n [ngClass]=\"sortColumName === 'completion' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'completion' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('compliance')\">Compliance %<svg\r\n [ngClass]=\"sortColumName === 'compliance' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'compliance' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('performance')\">Performance %<svg\r\n [ngClass]=\"sortColumName === 'performance' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'performance' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n <tr *ngFor=\"let item of storePerformanceData\">\r\n {{item.storeId}}\r\n <td>\r\n <!-- [routerLink]=\"['/manage/trax/dashboard/info']\"\r\n [queryParams]=\"{ store_id: item._id, type: 'store' }\" -->\r\n <a (click)=\"storeView(item._id)\" class=\"table-title-primary cursor-pointer\">{{\r\n item.storeName }}</a>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ item.userEmail }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n {{ item.checkListCount !==null ? item?.checkListCount?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n {{ item.flaggedCount !==null ? item?.flaggedCount?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex\">\r\n <div class=\"h-5px w-100 bg-light mt-2 \">\r\n <div role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\"\r\n class=\"bg-primary rounded h-5px\"\r\n [ngStyle]=\"{ width: item.completion + '%' }\"></div>\r\n </div>\r\n <div class=\"text-end table-title\"><span class=\"my-1 mx-1 text-end\">{{\r\n item.completion !==null ? item?.completion?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 })\r\n : '--' }}%</span></div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex\">\r\n <div class=\"h-5px w-100 bg-light mt-2 \">\r\n <div role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\"\r\n class=\"bg-primary rounded h-5px\"\r\n [ngStyle]=\"{ width: item.compliance + '%' }\"></div>\r\n </div>\r\n <div class=\"text-end table-title\"><span class=\"my-1 mx-1 text-end\">{{\r\n item.compliance !==null ? item?.compliance?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 })\r\n : '--' }}%</span></div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex\">\r\n <div class=\"h-5px w-100 bg-light mt-2 \">\r\n <div role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\"\r\n class=\"bg-primary rounded h-5px\"\r\n [ngStyle]=\"{ width: item.performance + '%' }\"></div>\r\n </div>\r\n <div class=\"text-end table-title\"><span class=\"my-1 mx-1 text-end\">{{\r\n item.performance !==null ? item?.performance?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 })\r\n : '--' }}%</span></div>\r\n </div>\r\n </td>\r\n <td>\r\n <a (click)=\"storeView(item._id)\" class=\"table-title cursor-pointer\"><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\r\n d=\"M0.832031 9.99992C0.832031 9.99992 4.16536 3.33325 9.9987 3.33325C15.832 3.33325 19.1654 9.99992 19.1654 9.99992C19.1654 9.99992 15.832 16.6666 9.9987 16.6666C4.16536 16.6666 0.832031 9.99992 0.832031 9.99992Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M9.9987 12.4999C11.3794 12.4999 12.4987 11.3806 12.4987 9.99992C12.4987 8.61921 11.3794 7.49992 9.9987 7.49992C8.61799 7.49992 7.4987 8.61921 7.4987 9.99992C7.4987 11.3806 8.61799 12.4999 9.9987 12.4999Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span></a>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"storePerformanceLoading\">\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=\"storePerformanceNoData && !storePerformanceLoading\">\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 Store Performance Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n <div *ngIf=\"!storePerformanceLoading && !storePerformanceNoData\">\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 </div>\r\n </div>\r\n\r\n <div *ngIf=\"receivedData === 'user'\" class=\"col-lg-12\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">User Info <span class=\"badge badge-light-primary\">{{totalItems}} Total</span></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 [(ngModel)]=\"searchInput\" type=\"text\" class=\"form-control ps-14 ms-4 footfallsearch\"\r\n placeholder=\"Search by User Name\" autocomplete=\"off\" (keyup.enter)=\"searchField()\" />\r\n <button type=\"button\" (click)=\"onExport()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader ms-4\"\r\n [disabled]=\"!userPerformanceData.length\">\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 <a *ngIf=\"(gs.userAccess | async)?.TangoTrax_checklist_isAdd\" [routerLink]=\"['/manage/trax/createChecklist']\" type=\"button\"\r\n class=\"btn btn-primary ms-4 rounded-3 text-nowrap ng-star-inserted\" tabindex=\"0\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg><span class=\"ms-2 text-white\">Create Checklist</span></a>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"table-responsive\">\r\n <table *ngIf=\"!userPerformanceLoading && !userPerformanceNoData\"\r\n class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('userName')\">User Name<svg\r\n [ngClass]=\"sortColumName === 'userName' && sortDirection === 1 ? 'rotate' : ''\"\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=\"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\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('userEmail')\">Email<svg\r\n [ngClass]=\"sortColumName === 'userEmail' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'userEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('checkListCount')\">Checklist\r\n Assigned<svg\r\n [ngClass]=\"sortColumName === 'checkListCount' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'checkListCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('flaggedCount')\">Flags<svg\r\n [ngClass]=\"sortColumName === 'flaggedCount' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'flaggedCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('redo')\">ReDo<svg\r\n [ngClass]=\"sortColumName === 'redo' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'redo' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('completion')\">Completion % <svg\r\n [ngClass]=\"sortColumName === 'completion' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'completion' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('compliance')\">Compliance %<svg\r\n [ngClass]=\"sortColumName === 'compliance' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'compliance' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('performance')\">Performance %<svg\r\n [ngClass]=\"sortColumName === 'performance' && sortDirection === 1 ? 'rotate' : ''\"\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=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'performance' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let user of userPerformanceData\">\r\n <td>\r\n <a [routerLink]=\"['/manage/trax/dashboard/info']\"\r\n [queryParams]=\"{ type: 'user', userEmail: user.userEmail, }\"\r\n class=\"table-title-primary\">{{ user.userName }}</a>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ user.userEmail }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n {{ user.checkListCount !==null ? user?.checkListCount?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) :\r\n '--' }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ user.flaggedCount !==null ?\r\n user?.flaggedCount?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 }) : '--' }}</div>\r\n </td> \r\n <td>\r\n <div class=\"d-flex\">\r\n <div class=\"text-end table-title\"><span class=\"my-1 mx-1 text-end\">{{\r\n user.redo !==null ? user?.redo?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 })\r\n : '--' }}</span></div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex\">\r\n <div class=\"h-5px w-100 bg-light mt-2\">\r\n <div role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\"\r\n class=\"bg-primary rounded h-5px\"\r\n [ngStyle]=\"{ width: user.completion + '%' }\">\r\n </div>\r\n </div>\r\n <div class=\"text-end table-title\"><span class=\"my-1 mx-1 text-end\">{{\r\n user.completion !==null ? user?.completion?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 })\r\n : '--' }}%</span></div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex\">\r\n <div class=\"h-5px w-100 bg-light mt-2\">\r\n <div role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\"\r\n class=\"bg-primary rounded h-5px\"\r\n [ngStyle]=\"{ width: user.compliance + '%' }\">\r\n </div>\r\n </div>\r\n <div class=\"text-end table-title\"><span class=\"my-1 mx-1 text-end\">{{\r\n user.compliance !==null ? user?.compliance?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 })\r\n : '--' }}%</span></div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex\">\r\n <div class=\"h-5px w-100 bg-light mt-2\">\r\n <div role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\"\r\n class=\"bg-primary rounded h-5px\"\r\n [ngStyle]=\"{ width: user.performance + '%' }\">\r\n </div>\r\n </div>\r\n <div class=\"text-end table-title\"><span class=\"my-1 mx-1 text-end\">{{\r\n user.performance !==null ? user?.performance?.toLocaleString('en-US', {\r\n minimumFractionDigits: 0 })\r\n : '--' }}%</span></div>\r\n </div>\r\n </td>\r\n\r\n <td>\r\n <a class=\"cursor-pointer\" [routerLink]=\"['/manage/trax/dashboard/info']\"\r\n [queryParams]=\"{type: 'user', userEmail: user.userEmail, }\"\r\n class=\"table-title\"><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\r\n d=\"M0.832031 9.99992C0.832031 9.99992 4.16536 3.33325 9.9987 3.33325C15.832 3.33325 19.1654 9.99992 19.1654 9.99992C19.1654 9.99992 15.832 16.6666 9.9987 16.6666C4.16536 16.6666 0.832031 9.99992 0.832031 9.99992Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M9.9987 12.4999C11.3794 12.4999 12.4987 11.3806 12.4987 9.99992C12.4987 8.61921 11.3794 7.49992 9.9987 7.49992C8.61799 7.49992 7.4987 8.61921 7.4987 9.99992C7.4987 11.3806 8.61799 12.4999 9.9987 12.4999Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span></a>\r\n </td>\r\n\r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"userPerformanceLoading\">\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=\"userPerformanceNoData && !userPerformanceLoading\">\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 User Performance Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"!userPerformanceLoading && !userPerformanceNoData\">\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 </div>\r\n </div>\r\n\r\n\r\n </div>\r\n</div>", styles: [".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}.card .card-header{padding:0px 1.5rem}.cardcount{color:var(--Black, #101828);font-size:30px;font-style:normal;font-weight:600;line-height:38px}.cardtext{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.cardsubcount{color:var(--Black, #101828);font-size:20px;font-style:normal;font-weight:700;line-height:30px}.card-border{padding:8px;border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.percent-value{color:var(--Gray-500, #667085);text-align:center;font-size:12px;font-style:normal;font-weight:600;line-height:18px}.week-font{color:var(--Gray-800, #1D2939);font-size:12px;font-style:normal;font-weight:400;line-height:18px}.nav-item .nav-link{color:var(--Gray-500, #667085);font-size:16px;font-weight:500}.activebtn{color:var(--Primary-700, #009BF3)!important;border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;font-size:16px!important;font-weight:500!important}.buttonsec{border-radius:8px;margin:0;background:var(--gray-50, white);width:100%;height:fit-content;padding:5px}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;text-decoration-line:underline}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.rotate{transform:rotate(180deg)}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}table tr{vertical-align:middle}table th,table td{height:44px!important;padding:20px 15px!important;align-items:center;gap:12px;align-self:stretch}.table-title{color:var(--Gray-500, #667085);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.daterange{color:var(--Gray-500, #667085);font-size:16px;font-style:normal;font-weight:600;line-height:24px}.nav-group-outline{border-radius:8px;border:1px solid var(--Primary-300, #6BCAFF);box-shadow:0 1px 2px #1018280d}.nav-group .btn.activePlanBtn{border-right:1px solid var(--Primary-300, #6BCAFF);background:var(--Primary-600, #00A3FF);color:#fff}.nav-group .btn.inactivePlanBtn{background-color:#fff;color:#333;border:1px solid #dcdcdc}\n"] }]
11706
11706
  }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i1$2.Router }, { type: i2$1.GlobalStateService }, { type: i0.ChangeDetectorRef }, { type: i3.ToastService }, { type: TraxService }, { type: i2$1.PageInfoService }] });
11707
11707
  function getDaysBetweenDates$1(fromDate, toDate) {
11708
11708
  // Parse the date strings into Date objects
@@ -17781,8 +17781,8 @@ class TaskInfoComponent {
17781
17781
  this.taskInfoLoading = true;
17782
17782
  this.taskInfoNoData = true;
17783
17783
  const requestData = {
17784
- // fromDate: this.headerData.date.startDate,
17785
- // toDate: this.headerData.date.endDate,
17784
+ fromDate: this.headerData.date.startDate,
17785
+ toDate: this.headerData.date.endDate,
17786
17786
  storeId: this.headerData.stores.filter((store) => store.checked).map((store) => store.storeId),
17787
17787
  userEmailes: this.userEmailes,
17788
17788
  clientId: this.headerData.client,
@@ -18614,7 +18614,7 @@ const routes = [
18614
18614
  },
18615
18615
  {
18616
18616
  path: 'audit',
18617
- loadChildren: () => import('./tango-app-ui-analyse-trax-eye-test-audit.module-Csq99TS-.mjs').then((m) => m.EyeTestAuditModule)
18617
+ loadChildren: () => import('./tango-app-ui-analyse-trax-eye-test-audit.module-BK3BtQ1z.mjs').then((m) => m.EyeTestAuditModule)
18618
18618
  }
18619
18619
  // {
18620
18620
  // path:'task',
@@ -19255,4 +19255,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
19255
19255
  */
19256
19256
 
19257
19257
  export { TraxService as T, TangoAnalyseTraxModule as a, TangoAnalyseTraxComponent as b };
19258
- //# sourceMappingURL=tango-app-ui-analyse-trax-tango-app-ui-analyse-trax-CerEGl20.mjs.map
19258
+ //# sourceMappingURL=tango-app-ui-analyse-trax-tango-app-ui-analyse-trax-NVvyOYAJ.mjs.map