tango-app-ui-analyse-trax 3.3.1-alpha-task.63 → 3.3.1-alpha-task.65

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 (12) hide show
  1. package/esm2022/lib/components/chip-dropdown/chip-dropdown.component.mjs +2 -2
  2. package/esm2022/lib/components/create-task/create-task.component.mjs +2 -2
  3. package/esm2022/lib/components/flags-info/flags-info.component.mjs +5 -10
  4. package/esm2022/lib/components/task/task.component.mjs +6 -3
  5. package/esm2022/lib/components/task-configure/task-configure.component.mjs +24 -5
  6. package/esm2022/lib/components/trax-store/trax-store.component.mjs +10 -5
  7. package/esm2022/lib/services/trax.service.mjs +4 -1
  8. package/fesm2022/tango-app-ui-analyse-trax.mjs +44 -21
  9. package/fesm2022/tango-app-ui-analyse-trax.mjs.map +1 -1
  10. package/lib/components/task/task.component.d.ts +2 -0
  11. package/lib/services/trax.service.d.ts +1 -0
  12. package/package.json +1 -1
package/fesm2022/tango-app-ui-analyse-trax.mjs CHANGED
@@ -27,7 +27,6 @@ import utc from 'dayjs/plugin/utc';
27
27
  import * as am5 from '@amcharts/amcharts5';
28
28
  import * as am5percent from '@amcharts/amcharts5/percent';
29
29
  import am5themes_Animated from '@amcharts/amcharts5/themes/Animated';
30
- import * as moment from 'moment';
31
30
 
32
31
  class TraxpopupComponent {
33
32
  dialogRef;
@@ -172,6 +171,9 @@ class TraxService {
172
171
  imageupload(users) {
173
172
  return this.http.post(`${this.traxUrl}/upload`, users);
174
173
  }
174
+ taskImageupload(users) {
175
+ return this.http.post(`${this.traxTaskUrl}/uploadImage`, users);
176
+ }
175
177
  validateUser(users) {
176
178
  return this.http.post(`${this.traxUrl}/validateUser`, users);
177
179
  }
@@ -2172,7 +2174,8 @@ class TraxStoreComponent {
2172
2174
  let stores = [];
2173
2175
  res.data.result.forEach((item) => {
2174
2176
  stores.push({
2175
- name: item.storeName
2177
+ name: item.storeName,
2178
+ city: item.city
2176
2179
  });
2177
2180
  });
2178
2181
  this.storeList = this.store = stores;
@@ -2229,22 +2232,26 @@ class TraxStoreComponent {
2229
2232
  this.toast.getErrorToast('Invalid Email Format');
2230
2233
  return false;
2231
2234
  }
2235
+ if (!this.selectedStore?.city.trim()) {
2236
+ this.toast.getErrorToast('City is Required');
2237
+ return false;
2238
+ }
2232
2239
  let userData = [{
2233
2240
  storeName: this.selectedStore?.name,
2234
2241
  userName: this?.userName?.trim(),
2235
2242
  userEmail: this?.userEmail?.toLowerCase()?.trim(),
2236
2243
  userPhone: '',
2237
2244
  checkFlag: true,
2238
- city: this.city
2245
+ city: this.selectedStore?.city || ''
2239
2246
  }];
2240
2247
  this.dialogRef.close(userData);
2241
2248
  }
2242
2249
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TraxStoreComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TraxService }, { token: i6.NgbActiveModal }, { token: i3.ToastService }, { token: i2$1.GlobalStateService }], target: i0.ɵɵFactoryTarget.Component });
2243
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TraxStoreComponent, selector: "lib-trax-store", inputs: { data: "data", client: "client" }, host: { listeners: { "document:click": "clickOutside($event)" } }, ngImport: i0, template: "<div class=\"storePopupcontent p-5\">\r\n <div class=\"mb-4\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path d=\"M28 21V35M21 28H35\" stroke=\"#009BF3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <span class=\"popuptitle\">Add Stores</span>\r\n <p class=\"popupsubtitle mt-3\">Finish configuring your store by providing the details below.</p>\r\n <div class=\"pt-3 position-relative\" (clickOutside)=\"closeDropDown()\">\r\n <label for=\"inputmodel\" class=\"label pb-2\">Select Store</label>\r\n <div class=\"dropdown-close\">\r\n <div class=\"w-100\">\r\n <div class=\"d-flex align-items-center position-relative w-100\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M2.68015 5.8038L2.6269 5.88697C2.06886 6.87402 2.66469 8.12144 3.7363 8.26454C3.83339 8.27641 3.92373 8.28269 4.012 8.28269C4.59015 8.28269 5.10132 8.03467 5.45759 7.64794L6.01093 7.04732L6.56238 7.64967C6.91432 8.03409 7.42433 8.28269 8.00639 8.28269C8.58583 8.28269 9.09877 8.03374 9.45039 7.64967L10.0036 7.04543L10.5568 7.64967C10.9084 8.03374 11.4213 8.28269 12.0008 8.28269C12.5802 8.28269 13.0932 8.03374 13.4448 7.64967L13.998 7.04543L14.5511 7.64967C14.9028 8.03374 15.4157 8.28269 15.9952 8.28269C16.0805 8.28269 16.1736 8.2764 16.27 8.26464C17.3652 8.11532 17.963 6.80105 17.3243 5.8043C17.3242 5.80425 17.3242 5.80419 17.3242 5.80413L15.566 3.06272L15.566 3.06272L15.5651 3.06125C15.5499 3.03742 15.5124 3.01186 15.4652 3.01186H4.53581C4.48866 3.01186 4.45117 3.03742 4.43597 3.06125L4.43535 3.06222L2.68015 5.8038ZM15.6516 10.7371V13.869V14.619H14.9016H5.09943H4.34943V13.869V10.7375C4.2392 10.7457 4.12768 10.75 4.01507 10.75C3.97276 10.75 3.93074 10.7493 3.889 10.7481V13.869V15.8035C3.889 16.4469 4.4229 16.9881 5.09943 16.9881H14.9016C15.5781 16.9881 16.112 16.4469 16.112 15.8035V13.869V10.7483C16.0722 10.7494 16.0322 10.75 15.9921 10.75C15.8777 10.75 15.7641 10.7456 15.6516 10.7371Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" />\r\n </svg>\r\n </span>\r\n <input type=\"text\" class=\"form-control dropdown-input ps-14\" [ngModel]=\"selectedStore?.name\"\r\n (click)=\"toggleDropDown()\" readonly placeholder=\"Select Store...\" />\r\n </div>\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu w-100\" *ngIf=\"showDropDown\">\r\n <input type=\"text\" class=\"form-control mb-2 dropdown-search mx-3 formSeach\"\r\n placeholder=\"Search Store...\" [(ngModel)]=\"searchStore\" (ngModelChange)=\"filterSearch()\" />\r\n <div [class]=\"storeList?.length > 5 ? 'h-200px overflow-auto' : 'h-auto'\">\r\n <div class=\"dropdown-item form-check custom-dropdown-item\"\r\n *ngFor=\"let store of storeList;let i= index\" (click)=\"updateSelectedStore(i)\">\r\n <label class=\"form-check-label\" [for]=\"store.name\">\r\n {{ store.name }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"storetext mt-2\">Store that I\u2019m looking for isn\u2019t available,<a class=\"text-primary\"\r\n href=\"/manage/stores/addition-method\"><u>Onboard Stores</u></a></div>\r\n\r\n <div class=\"pt-5\">\r\n <label for=\"inputmodel\" class=\"label pb-2\">Assign To</label>\r\n <input type=\"text\" class=\"form-control form-control-solid w-430px fw-bold inputname\" placeholder=\"User Name\"\r\n [(ngModel)]=\"userName\">\r\n </div>\r\n\r\n <div class=\"pt-5\">\r\n <label for=\"inputmodel\" class=\"label pb-2\">Assignee Mail ID</label>\r\n <div class=\"d-flex align-items-center position-relatives w-100\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M18.3334 4.99999C18.3334 4.08333 17.5834 3.33333 16.6667 3.33333H3.33341C2.41675 3.33333 1.66675 4.08333 1.66675 4.99999M18.3334 4.99999V15C18.3334 15.9167 17.5834 16.6667 16.6667 16.6667H3.33341C2.41675 16.6667 1.66675 15.9167 1.66675 15V4.99999M18.3334 4.99999L10.0001 10.8333L1.66675 4.99999\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input type=\"text\" class=\"form-control form-control-solid w-430px ps-14 fw-bold inputname\"\r\n placeholder=\"User Email\" [(ngModel)]=\"userEmail\">\r\n </div>\r\n </div>\r\n <div class=\"pt-5\">\r\n <label for=\"inputmodel\" class=\"label pb-2\">City</label>\r\n <input type=\"text\" class=\"form-control form-control-solid w-430px fw-bold inputname\" placeholder=\"City\"\r\n [(ngModel)]=\"city\">\r\n </div>\r\n <div class=\"mt-6\">\r\n <button class=\"btn btn-primary w-100\" (click)=\"updatedStore()\">\r\n Add Store\r\n </button>\r\n </div>\r\n</div>", styles: [".storePopupcontent{font-family:Inter;align-items:left}.storePopupcontent .popuptitle{color:var(--gray-900, #101828);font-size:18px;font-weight:600;line-height:20px}.storePopupcontent .popupsubtitle{color:var(--gray-500, #667085);font-size:14px;font-weight:400;line-height:20px}.storePopupcontent .btn-outline{border:1px solid lightgrey}.storePopupcontent button{width:45%}.storePopupcontent .inputname{width:100%;border:none;color:#000000de;height:45px;font-size:14px!important;padding:10px 16px;border-radius:4px;outline:1px solid #D0D5DD}.label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}::ng-deep .storePopupcontent input{display:flex!important;align-items:center!important;gap:8px!important;align-self:stretch!important;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important}.btn-primary{line-height:18px!important}.position-relative{position:relative}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;display:block;box-sizing:border-box}.dropdown-item{padding:8px 12px}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.formSeach{width:95%}.storetext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}\n"], dependencies: [{ kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] });
2250
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TraxStoreComponent, selector: "lib-trax-store", inputs: { data: "data", client: "client" }, host: { listeners: { "document:click": "clickOutside($event)" } }, ngImport: i0, template: "<div class=\"storePopupcontent p-5\">\r\n <div class=\"mb-4\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path d=\"M28 21V35M21 28H35\" stroke=\"#009BF3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <span class=\"popuptitle\">Add Stores</span>\r\n <p class=\"popupsubtitle mt-3\">Finish configuring your store by providing the details below.</p>\r\n <div class=\"pt-3 position-relative\" (clickOutside)=\"closeDropDown()\">\r\n <label for=\"inputmodel\" class=\"label pb-2\">Select Store</label>\r\n <div class=\"dropdown-close\">\r\n <div class=\"w-100\">\r\n <div class=\"d-flex align-items-center position-relative w-100\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M2.68015 5.8038L2.6269 5.88697C2.06886 6.87402 2.66469 8.12144 3.7363 8.26454C3.83339 8.27641 3.92373 8.28269 4.012 8.28269C4.59015 8.28269 5.10132 8.03467 5.45759 7.64794L6.01093 7.04732L6.56238 7.64967C6.91432 8.03409 7.42433 8.28269 8.00639 8.28269C8.58583 8.28269 9.09877 8.03374 9.45039 7.64967L10.0036 7.04543L10.5568 7.64967C10.9084 8.03374 11.4213 8.28269 12.0008 8.28269C12.5802 8.28269 13.0932 8.03374 13.4448 7.64967L13.998 7.04543L14.5511 7.64967C14.9028 8.03374 15.4157 8.28269 15.9952 8.28269C16.0805 8.28269 16.1736 8.2764 16.27 8.26464C17.3652 8.11532 17.963 6.80105 17.3243 5.8043C17.3242 5.80425 17.3242 5.80419 17.3242 5.80413L15.566 3.06272L15.566 3.06272L15.5651 3.06125C15.5499 3.03742 15.5124 3.01186 15.4652 3.01186H4.53581C4.48866 3.01186 4.45117 3.03742 4.43597 3.06125L4.43535 3.06222L2.68015 5.8038ZM15.6516 10.7371V13.869V14.619H14.9016H5.09943H4.34943V13.869V10.7375C4.2392 10.7457 4.12768 10.75 4.01507 10.75C3.97276 10.75 3.93074 10.7493 3.889 10.7481V13.869V15.8035C3.889 16.4469 4.4229 16.9881 5.09943 16.9881H14.9016C15.5781 16.9881 16.112 16.4469 16.112 15.8035V13.869V10.7483C16.0722 10.7494 16.0322 10.75 15.9921 10.75C15.8777 10.75 15.7641 10.7456 15.6516 10.7371Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" />\r\n </svg>\r\n </span>\r\n <input type=\"text\" class=\"form-control dropdown-input ps-14\" [ngModel]=\"selectedStore?.name\"\r\n (click)=\"toggleDropDown()\" readonly placeholder=\"Select Store...\" />\r\n </div>\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu w-100\" *ngIf=\"showDropDown\">\r\n <input type=\"text\" class=\"form-control mb-2 dropdown-search mx-3 formSeach\"\r\n placeholder=\"Search Store...\" [(ngModel)]=\"searchStore\" (ngModelChange)=\"filterSearch()\" />\r\n <div [class]=\"storeList?.length > 5 ? 'h-200px overflow-auto' : 'h-auto'\">\r\n <div class=\"dropdown-item form-check custom-dropdown-item\"\r\n *ngFor=\"let store of storeList;let i= index\" (click)=\"updateSelectedStore(i)\">\r\n <label class=\"form-check-label\" [for]=\"store.name\">\r\n {{ store.name }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"storetext mt-2\">Store that I\u2019m looking for isn\u2019t available,<a class=\"text-primary\"\r\n href=\"/manage/stores/addition-method\"><u>Onboard Stores</u></a></div>\r\n\r\n <div class=\"pt-5\">\r\n <label for=\"inputmodel\" class=\"label pb-2\">Assign To</label>\r\n <input type=\"text\" class=\"form-control form-control-solid w-430px fw-bold inputname\" placeholder=\"User Name\"\r\n [(ngModel)]=\"userName\">\r\n </div>\r\n\r\n <div class=\"pt-5\">\r\n <label for=\"inputmodel\" class=\"label pb-2\">Assignee Mail ID</label>\r\n <div class=\"d-flex align-items-center position-relatives w-100\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M18.3334 4.99999C18.3334 4.08333 17.5834 3.33333 16.6667 3.33333H3.33341C2.41675 3.33333 1.66675 4.08333 1.66675 4.99999M18.3334 4.99999V15C18.3334 15.9167 17.5834 16.6667 16.6667 16.6667H3.33341C2.41675 16.6667 1.66675 15.9167 1.66675 15V4.99999M18.3334 4.99999L10.0001 10.8333L1.66675 4.99999\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input type=\"text\" class=\"form-control form-control-solid w-430px ps-14 fw-bold inputname\"\r\n placeholder=\"User Email\" [(ngModel)]=\"userEmail\">\r\n </div>\r\n </div>\r\n <div class=\"pt-5\">\r\n <label for=\"inputmodel\" class=\"label pb-2\">City</label>\r\n <input type=\"text\" class=\"form-control form-control-solid w-430px fw-bold inputname\" placeholder=\"City\"\r\n [(ngModel)]=\"this.selectedStore.city\">\r\n </div>\r\n <div class=\"mt-6\">\r\n <button class=\"btn btn-primary w-100\" (click)=\"updatedStore()\">\r\n Add Store\r\n </button>\r\n </div>\r\n</div>", styles: [".storePopupcontent{font-family:Inter;align-items:left}.storePopupcontent .popuptitle{color:var(--gray-900, #101828);font-size:18px;font-weight:600;line-height:20px}.storePopupcontent .popupsubtitle{color:var(--gray-500, #667085);font-size:14px;font-weight:400;line-height:20px}.storePopupcontent .btn-outline{border:1px solid lightgrey}.storePopupcontent button{width:45%}.storePopupcontent .inputname{width:100%;border:none;color:#000000de;height:45px;font-size:14px!important;padding:10px 16px;border-radius:4px;outline:1px solid #D0D5DD}.label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}::ng-deep .storePopupcontent input{display:flex!important;align-items:center!important;gap:8px!important;align-self:stretch!important;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important}.btn-primary{line-height:18px!important}.position-relative{position:relative}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;display:block;box-sizing:border-box}.dropdown-item{padding:8px 12px}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.formSeach{width:95%}.storetext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}\n"], dependencies: [{ kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] });
2244
2251
  }
2245
2252
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TraxStoreComponent, decorators: [{
2246
2253
  type: Component,
2247
- args: [{ selector: 'lib-trax-store', template: "<div class=\"storePopupcontent p-5\">\r\n <div class=\"mb-4\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path d=\"M28 21V35M21 28H35\" stroke=\"#009BF3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <span class=\"popuptitle\">Add Stores</span>\r\n <p class=\"popupsubtitle mt-3\">Finish configuring your store by providing the details below.</p>\r\n <div class=\"pt-3 position-relative\" (clickOutside)=\"closeDropDown()\">\r\n <label for=\"inputmodel\" class=\"label pb-2\">Select Store</label>\r\n <div class=\"dropdown-close\">\r\n <div class=\"w-100\">\r\n <div class=\"d-flex align-items-center position-relative w-100\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M2.68015 5.8038L2.6269 5.88697C2.06886 6.87402 2.66469 8.12144 3.7363 8.26454C3.83339 8.27641 3.92373 8.28269 4.012 8.28269C4.59015 8.28269 5.10132 8.03467 5.45759 7.64794L6.01093 7.04732L6.56238 7.64967C6.91432 8.03409 7.42433 8.28269 8.00639 8.28269C8.58583 8.28269 9.09877 8.03374 9.45039 7.64967L10.0036 7.04543L10.5568 7.64967C10.9084 8.03374 11.4213 8.28269 12.0008 8.28269C12.5802 8.28269 13.0932 8.03374 13.4448 7.64967L13.998 7.04543L14.5511 7.64967C14.9028 8.03374 15.4157 8.28269 15.9952 8.28269C16.0805 8.28269 16.1736 8.2764 16.27 8.26464C17.3652 8.11532 17.963 6.80105 17.3243 5.8043C17.3242 5.80425 17.3242 5.80419 17.3242 5.80413L15.566 3.06272L15.566 3.06272L15.5651 3.06125C15.5499 3.03742 15.5124 3.01186 15.4652 3.01186H4.53581C4.48866 3.01186 4.45117 3.03742 4.43597 3.06125L4.43535 3.06222L2.68015 5.8038ZM15.6516 10.7371V13.869V14.619H14.9016H5.09943H4.34943V13.869V10.7375C4.2392 10.7457 4.12768 10.75 4.01507 10.75C3.97276 10.75 3.93074 10.7493 3.889 10.7481V13.869V15.8035C3.889 16.4469 4.4229 16.9881 5.09943 16.9881H14.9016C15.5781 16.9881 16.112 16.4469 16.112 15.8035V13.869V10.7483C16.0722 10.7494 16.0322 10.75 15.9921 10.75C15.8777 10.75 15.7641 10.7456 15.6516 10.7371Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" />\r\n </svg>\r\n </span>\r\n <input type=\"text\" class=\"form-control dropdown-input ps-14\" [ngModel]=\"selectedStore?.name\"\r\n (click)=\"toggleDropDown()\" readonly placeholder=\"Select Store...\" />\r\n </div>\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu w-100\" *ngIf=\"showDropDown\">\r\n <input type=\"text\" class=\"form-control mb-2 dropdown-search mx-3 formSeach\"\r\n placeholder=\"Search Store...\" [(ngModel)]=\"searchStore\" (ngModelChange)=\"filterSearch()\" />\r\n <div [class]=\"storeList?.length > 5 ? 'h-200px overflow-auto' : 'h-auto'\">\r\n <div class=\"dropdown-item form-check custom-dropdown-item\"\r\n *ngFor=\"let store of storeList;let i= index\" (click)=\"updateSelectedStore(i)\">\r\n <label class=\"form-check-label\" [for]=\"store.name\">\r\n {{ store.name }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"storetext mt-2\">Store that I\u2019m looking for isn\u2019t available,<a class=\"text-primary\"\r\n href=\"/manage/stores/addition-method\"><u>Onboard Stores</u></a></div>\r\n\r\n <div class=\"pt-5\">\r\n <label for=\"inputmodel\" class=\"label pb-2\">Assign To</label>\r\n <input type=\"text\" class=\"form-control form-control-solid w-430px fw-bold inputname\" placeholder=\"User Name\"\r\n [(ngModel)]=\"userName\">\r\n </div>\r\n\r\n <div class=\"pt-5\">\r\n <label for=\"inputmodel\" class=\"label pb-2\">Assignee Mail ID</label>\r\n <div class=\"d-flex align-items-center position-relatives w-100\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M18.3334 4.99999C18.3334 4.08333 17.5834 3.33333 16.6667 3.33333H3.33341C2.41675 3.33333 1.66675 4.08333 1.66675 4.99999M18.3334 4.99999V15C18.3334 15.9167 17.5834 16.6667 16.6667 16.6667H3.33341C2.41675 16.6667 1.66675 15.9167 1.66675 15V4.99999M18.3334 4.99999L10.0001 10.8333L1.66675 4.99999\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input type=\"text\" class=\"form-control form-control-solid w-430px ps-14 fw-bold inputname\"\r\n placeholder=\"User Email\" [(ngModel)]=\"userEmail\">\r\n </div>\r\n </div>\r\n <div class=\"pt-5\">\r\n <label for=\"inputmodel\" class=\"label pb-2\">City</label>\r\n <input type=\"text\" class=\"form-control form-control-solid w-430px fw-bold inputname\" placeholder=\"City\"\r\n [(ngModel)]=\"city\">\r\n </div>\r\n <div class=\"mt-6\">\r\n <button class=\"btn btn-primary w-100\" (click)=\"updatedStore()\">\r\n Add Store\r\n </button>\r\n </div>\r\n</div>", styles: [".storePopupcontent{font-family:Inter;align-items:left}.storePopupcontent .popuptitle{color:var(--gray-900, #101828);font-size:18px;font-weight:600;line-height:20px}.storePopupcontent .popupsubtitle{color:var(--gray-500, #667085);font-size:14px;font-weight:400;line-height:20px}.storePopupcontent .btn-outline{border:1px solid lightgrey}.storePopupcontent button{width:45%}.storePopupcontent .inputname{width:100%;border:none;color:#000000de;height:45px;font-size:14px!important;padding:10px 16px;border-radius:4px;outline:1px solid #D0D5DD}.label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}::ng-deep .storePopupcontent input{display:flex!important;align-items:center!important;gap:8px!important;align-self:stretch!important;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important}.btn-primary{line-height:18px!important}.position-relative{position:relative}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;display:block;box-sizing:border-box}.dropdown-item{padding:8px 12px}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.formSeach{width:95%}.storetext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}\n"] }]
2254
+ args: [{ selector: 'lib-trax-store', template: "<div class=\"storePopupcontent p-5\">\r\n <div class=\"mb-4\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path d=\"M28 21V35M21 28H35\" stroke=\"#009BF3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <span class=\"popuptitle\">Add Stores</span>\r\n <p class=\"popupsubtitle mt-3\">Finish configuring your store by providing the details below.</p>\r\n <div class=\"pt-3 position-relative\" (clickOutside)=\"closeDropDown()\">\r\n <label for=\"inputmodel\" class=\"label pb-2\">Select Store</label>\r\n <div class=\"dropdown-close\">\r\n <div class=\"w-100\">\r\n <div class=\"d-flex align-items-center position-relative w-100\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M2.68015 5.8038L2.6269 5.88697C2.06886 6.87402 2.66469 8.12144 3.7363 8.26454C3.83339 8.27641 3.92373 8.28269 4.012 8.28269C4.59015 8.28269 5.10132 8.03467 5.45759 7.64794L6.01093 7.04732L6.56238 7.64967C6.91432 8.03409 7.42433 8.28269 8.00639 8.28269C8.58583 8.28269 9.09877 8.03374 9.45039 7.64967L10.0036 7.04543L10.5568 7.64967C10.9084 8.03374 11.4213 8.28269 12.0008 8.28269C12.5802 8.28269 13.0932 8.03374 13.4448 7.64967L13.998 7.04543L14.5511 7.64967C14.9028 8.03374 15.4157 8.28269 15.9952 8.28269C16.0805 8.28269 16.1736 8.2764 16.27 8.26464C17.3652 8.11532 17.963 6.80105 17.3243 5.8043C17.3242 5.80425 17.3242 5.80419 17.3242 5.80413L15.566 3.06272L15.566 3.06272L15.5651 3.06125C15.5499 3.03742 15.5124 3.01186 15.4652 3.01186H4.53581C4.48866 3.01186 4.45117 3.03742 4.43597 3.06125L4.43535 3.06222L2.68015 5.8038ZM15.6516 10.7371V13.869V14.619H14.9016H5.09943H4.34943V13.869V10.7375C4.2392 10.7457 4.12768 10.75 4.01507 10.75C3.97276 10.75 3.93074 10.7493 3.889 10.7481V13.869V15.8035C3.889 16.4469 4.4229 16.9881 5.09943 16.9881H14.9016C15.5781 16.9881 16.112 16.4469 16.112 15.8035V13.869V10.7483C16.0722 10.7494 16.0322 10.75 15.9921 10.75C15.8777 10.75 15.7641 10.7456 15.6516 10.7371Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" />\r\n </svg>\r\n </span>\r\n <input type=\"text\" class=\"form-control dropdown-input ps-14\" [ngModel]=\"selectedStore?.name\"\r\n (click)=\"toggleDropDown()\" readonly placeholder=\"Select Store...\" />\r\n </div>\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu w-100\" *ngIf=\"showDropDown\">\r\n <input type=\"text\" class=\"form-control mb-2 dropdown-search mx-3 formSeach\"\r\n placeholder=\"Search Store...\" [(ngModel)]=\"searchStore\" (ngModelChange)=\"filterSearch()\" />\r\n <div [class]=\"storeList?.length > 5 ? 'h-200px overflow-auto' : 'h-auto'\">\r\n <div class=\"dropdown-item form-check custom-dropdown-item\"\r\n *ngFor=\"let store of storeList;let i= index\" (click)=\"updateSelectedStore(i)\">\r\n <label class=\"form-check-label\" [for]=\"store.name\">\r\n {{ store.name }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"storetext mt-2\">Store that I\u2019m looking for isn\u2019t available,<a class=\"text-primary\"\r\n href=\"/manage/stores/addition-method\"><u>Onboard Stores</u></a></div>\r\n\r\n <div class=\"pt-5\">\r\n <label for=\"inputmodel\" class=\"label pb-2\">Assign To</label>\r\n <input type=\"text\" class=\"form-control form-control-solid w-430px fw-bold inputname\" placeholder=\"User Name\"\r\n [(ngModel)]=\"userName\">\r\n </div>\r\n\r\n <div class=\"pt-5\">\r\n <label for=\"inputmodel\" class=\"label pb-2\">Assignee Mail ID</label>\r\n <div class=\"d-flex align-items-center position-relatives w-100\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M18.3334 4.99999C18.3334 4.08333 17.5834 3.33333 16.6667 3.33333H3.33341C2.41675 3.33333 1.66675 4.08333 1.66675 4.99999M18.3334 4.99999V15C18.3334 15.9167 17.5834 16.6667 16.6667 16.6667H3.33341C2.41675 16.6667 1.66675 15.9167 1.66675 15V4.99999M18.3334 4.99999L10.0001 10.8333L1.66675 4.99999\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input type=\"text\" class=\"form-control form-control-solid w-430px ps-14 fw-bold inputname\"\r\n placeholder=\"User Email\" [(ngModel)]=\"userEmail\">\r\n </div>\r\n </div>\r\n <div class=\"pt-5\">\r\n <label for=\"inputmodel\" class=\"label pb-2\">City</label>\r\n <input type=\"text\" class=\"form-control form-control-solid w-430px fw-bold inputname\" placeholder=\"City\"\r\n [(ngModel)]=\"this.selectedStore.city\">\r\n </div>\r\n <div class=\"mt-6\">\r\n <button class=\"btn btn-primary w-100\" (click)=\"updatedStore()\">\r\n Add Store\r\n </button>\r\n </div>\r\n</div>", styles: [".storePopupcontent{font-family:Inter;align-items:left}.storePopupcontent .popuptitle{color:var(--gray-900, #101828);font-size:18px;font-weight:600;line-height:20px}.storePopupcontent .popupsubtitle{color:var(--gray-500, #667085);font-size:14px;font-weight:400;line-height:20px}.storePopupcontent .btn-outline{border:1px solid lightgrey}.storePopupcontent button{width:45%}.storePopupcontent .inputname{width:100%;border:none;color:#000000de;height:45px;font-size:14px!important;padding:10px 16px;border-radius:4px;outline:1px solid #D0D5DD}.label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}::ng-deep .storePopupcontent input{display:flex!important;align-items:center!important;gap:8px!important;align-self:stretch!important;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important}.btn-primary{line-height:18px!important}.position-relative{position:relative}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;display:block;box-sizing:border-box}.dropdown-item{padding:8px 12px}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.formSeach{width:95%}.storetext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}\n"] }]
2248
2255
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: TraxService }, { type: i6.NgbActiveModal }, { type: i3.ToastService }, { type: i2$1.GlobalStateService }], propDecorators: { data: [{
2249
2256
  type: Input
2250
2257
  }], client: [{
@@ -2391,7 +2398,7 @@ class ChipDropdownComponent {
2391
2398
  }
2392
2399
  ngOnChanges(changes) {
2393
2400
  if (changes['data']) {
2394
- let selectedEmail = this.selectedData.map((item) => item.value);
2401
+ let selectedEmail = this.selectedData?.map((item) => item.value);
2395
2402
  this.data = this.data.filter((ele) => !selectedEmail.includes(ele.value));
2396
2403
  this.dummyData = this.data ? JSON.parse(JSON.stringify(this.data)) : [];
2397
2404
  console.log(432);
@@ -8052,14 +8059,9 @@ class FlagsInfoComponent {
8052
8059
  if (res?.data?.checklistData) {
8053
8060
  this.checkLists = res.data.checklistData;
8054
8061
  this.currentChecklist = this.checkLists?.filter((item) => item.sourceCheckList_id === this.checklistSelectControl.value)[0];
8055
- // this.currentChecklist.checkListType = 'storeopenandclose'
8056
- // this.currentChecklist.checkListType = 'mobileusagedetection'
8057
- // this.currentChecklist.checkListType = 'uniformdetection'
8058
- // this.currentChecklist.checkListType = 'customerunattended'
8059
- // this.currentChecklist.checkListType = 'staffleftinthemiddle'
8060
- // this.currentChecklist.checkListType = 'custom'
8061
8062
  if (!this.currentChecklist) {
8062
- this.currentChecklist = this.checkLists[0];
8063
+ // this.currentChecklist = this.checkLists[0]
8064
+ this.flagsTableApiState.next('loaded');
8063
8065
  }
8064
8066
  setTimeout(() => {
8065
8067
  this.checklistSelectControl.setValue(this.currentChecklist?.sourceCheckList_id);
@@ -8285,11 +8287,11 @@ class FlagsInfoComponent {
8285
8287
  return !inputDate.isSame(today, 'day');
8286
8288
  }
8287
8289
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlagsInfoComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i2$1.GlobalStateService }, { token: TraxService }, { token: i0.ChangeDetectorRef }, { token: i1$2.Router }, { token: i3.ToastService }, { token: i2$1.PageInfoService }], target: i0.ɵɵFactoryTarget.Component });
8288
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FlagsInfoComponent, selector: "lib-flags-info", ngImport: i0, template: "<div class=\"row\">\r\n <!-- header start -->\r\n <div class=\"col-md-12 mb-6 mt-4\">\r\n\r\n <ng-container *ngIf=\"(checkListsApiState | async) === 'loaded'\" >\r\n <div class=\"d-flex align-items-center justify-content-between header-card\">\r\n <div class=\"d-flex align-items-center\">\r\n <a (click)=\"onBack()\" class=\"d-flex align-items-center me-3 mt-1 cursor-pointer\">\r\n <span><svg width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_987_30898)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M27.8346 21.0001H16.168M16.168 21.0001L22.0013 26.8334M16.168 21.0001L22.0013 15.1667\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_987_30898\" x=\"0\" y=\"0\" width=\"44\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_987_30898\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_987_30898\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </a> \r\n <span class=\"mt-1 me-3 borderless-select\" style=\"min-width: 200px;\" >\r\n <!-- <lib-reactive-select [formControl]=\"checklistSelectControl\" [idField]=\"'sourceCheckList_id'\"\r\n [nameField]=\"'checkListName'\" [data]=\"checkLists\" class=\"w-100 \"\r\n style=\"border: none !important; box-shadow: none !important;\">\r\n <ng-template let-item>\r\n <div\r\n class=\"d-flex justify-content-between align-items-center no-border-custom-select\">\r\n <span>{{ item.label }}</span>\r\n <span class=\"d-flex align-items-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#101828\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-template>\r\n </lib-reactive-select> -->\r\n\r\n <lib-select [items]=\"checkLists\" [multi]=\"false\" [searchField]=\"'checkListName'\" [idField]=\"'sourceCheckList_id'\"\r\n (selected)=\"onChecklistSelect($event)\" [selectedValues]=\"[this.currentChecklist]\"></lib-select>\r\n\r\n </span>\r\n\r\n <div *ngIf=\"currentChecklist?.checkListType !== 'custom'\"\r\n class=\"d-flex align-items-center grey-badge me-3 my-3\">\r\n AI Manager\r\n </div>\r\n <div *ngIf=\"currentChecklist?.publish\" class=\"d-flex align-items-center text-success me-3 my-3\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\"\r\n fill=\"none\">\r\n <circle cx=\"4\" cy=\"4\" r=\"3\" fill=\"#12B76A\" />\r\n </svg> Active</span>\r\n </div>\r\n <div class=\"d-flex align-items-center me-3 checklisttext\"><span><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M13.3307 14V12.6667C13.3307 11.9594 13.0498 11.2811 12.5497 10.781C12.0496 10.281 11.3713 10 10.6641 10H5.33073C4.62349 10 3.94521 10.281 3.44511 10.781C2.94501 11.2811 2.66406 11.9594 2.66406 12.6667V14M10.6641 4.66667C10.6641 6.13943 9.47015 7.33333 7.9974 7.33333C6.52464 7.33333 5.33073 6.13943 5.33073 4.66667C5.33073 3.19391 6.52464 2 7.9974 2C9.47015 2 10.6641 3.19391 10.6641 4.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>{{currentChecklist?.createdByName}}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center me-3 checklisttext\"><span><svg class=\"mx-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 3H13.5C13.8978 3 14.2794 3.15804 14.5607 3.43934C14.842 3.72064 15 4.10218 15 4.5V15C15 15.3978 14.842 15.7794 14.5607 16.0607C14.2794 16.342 13.8978 16.5 13.5 16.5H4.5C4.10218 16.5 3.72064 16.342 3.43934 16.0607C3.15804 15.7794 3 15.3978 3 15V4.5C3 4.10218 3.15804 3.72064 3.43934 3.43934C3.72064 3.15804 4.10218 3 4.5 3H6M6.75 1.5H11.25C11.6642 1.5 12 1.83579 12 2.25V3.75C12 4.16421 11.6642 4.5 11.25 4.5H6.75C6.33579 4.5 6 4.16421 6 3.75V2.25C6 1.83579 6.33579 1.5 6.75 1.5Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>{{currentChecklist?.checkListType === 'custom' ? currentChecklist?.storeCount : headerData?.stores?.length}} Stores</span>\r\n </div>\r\n <div class=\"d-flex align-items-center me-3 checklisttext\"><span><svg class=\"mx-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 1.5V4.5M6 1.5V4.5M2.25 7.5H15.75M3.75 3H14.25C15.0784 3 15.75 3.67157 15.75 4.5V15C15.75 15.8284 15.0784 16.5 14.25 16.5H3.75C2.92157 16.5 2.25 15.8284 2.25 15V4.5C2.25 3.67157 2.92157 3 3.75 3Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>Repeats {{currentChecklist?.scheduleRepeatedType}}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center me-3 checklisttext\"><span><svg class=\"mx-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_987_30895)\">\r\n <path\r\n d=\"M9 4.5V9L12 10.5M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_987_30895\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>{{currentChecklist?.scheduleStartTime}} -\r\n {{currentChecklist?.scheduleEndTime}}</span>\r\n </div>\r\n </div> \r\n \r\n </div> \r\n </ng-container>\r\n \r\n \r\n <ng-container *ngIf=\"(checkListsApiState | async) === 'loading' || (checkListsApiState | async) === 'initial'\" >\r\n <div style=\"margin:0px; padding:0px; height:unset\" class=\"row loader d-flex justify-content-center align-items-center w-100\">\r\n <div style=\"height: unset; margin:unset; border-radius: 5px;\" class=\"shimmer w-100\">\r\n <div class=\"wrapper\">\r\n <div style=\"margin-top: unset;\" class=\"stroke animate title\"></div>\r\n <div style=\"margin-top: 5px;\" class=\"stroke animate link\"></div>\r\n <div style=\"margin-top: 5px;\" class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n </div>\r\n <!-- header end -->\r\n <!-- card start -->\r\n <ng-container >\r\n <!-- <div *ngIf=\"currentChecklist?.checkListType === 'custom' && (headerData?.stores?.length ?? 0) > 1\" class=\"col-md-12 my-2\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Total Assigned Stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customCards?.totalAssignedStores?.count === 0 ||\r\n flagCardValues?.customCards?.totalAssignedStores?.count) ?\r\n flagCardValues?.customCards?.totalAssignedStores?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.customCards?.totalAssignedStores?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customCards?.totalAssignedStores?.comparisonData === 0 ||\r\n flagCardTrends?.customCards?.totalAssignedStores?.comparisonData) ?\r\n flagCardTrends?.customCards?.totalAssignedStores?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Flag Incidents</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customCards?.flagIncidents?.count === 0 ||\r\n flagCardValues?.customCards?.flagIncidents?.count) ?\r\n flagCardValues?.customCards?.flagIncidents?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.customCards?.flagIncidents?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customCards?.flagIncidents?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customCards?.flagIncidents?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customCards?.flagIncidents?.comparisonData === 0 ||\r\n flagCardTrends?.customCards?.flagIncidents?.comparisonData) ?\r\n flagCardTrends?.customCards?.flagIncidents?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Compliance Rate</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customCards?.complianceRate?.count === 0 ||\r\n flagCardValues?.customCards?.complianceRate?.count) ?\r\n flagCardValues?.customCards?.complianceRate?.count?.toLocaleString('en-IN') : '--'}} %\r\n <div ><span *ngIf=\"flagCardTrends?.customCards?.complianceRate?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customCards?.complianceRate?.comparisonData === 0 ||\r\n flagCardTrends?.customCards?.complianceRate?.comparisonData) ?\r\n flagCardTrends?.customCards?.complianceRate?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div> -->\r\n <div *ngIf=\"currentChecklist?.checkListType === 'storeopenandclose' && (headerData?.stores?.length ?? 0) > 1\" class=\"col-md-12 my-2\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n <div class=\"col-3\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Total Flagged Stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.storeopenandcloseCards?.totalAssignedStores?.count === 0 ||\r\n flagCardValues?.storeopenandcloseCards?.totalAssignedStores?.count) ?\r\n flagCardValues?.storeopenandcloseCards?.totalAssignedStores?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.storeopenandcloseCards?.totalAssignedStores?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.storeopenandcloseCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.storeopenandcloseCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.storeopenandcloseCards?.totalAssignedStores?.comparisonData === 0 ||\r\n flagCardTrends?.storeopenandcloseCards?.totalAssignedStores?.comparisonData) ?\r\n flagCardTrends?.storeopenandcloseCards?.totalAssignedStores?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Late Open Stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.storeopenandcloseCards?.lateOpenStores?.count === 0 ||\r\n flagCardValues?.storeopenandcloseCards?.lateOpenStores?.count) ?\r\n flagCardValues?.storeopenandcloseCards?.lateOpenStores?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.storeopenandcloseCards?.lateOpenStores?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.storeopenandcloseCards?.lateOpenStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.storeopenandcloseCards?.lateOpenStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.storeopenandcloseCards?.lateOpenStores?.comparisonData === 0 ||\r\n flagCardTrends?.storeopenandcloseCards?.lateOpenStores?.comparisonData) ?\r\n flagCardTrends?.storeopenandcloseCards?.lateOpenStores?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Early Closed Stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.storeopenandcloseCards?.earlyClosedStores?.count === 0 ||\r\n flagCardValues?.storeopenandcloseCards?.earlyClosedStores?.count) ?\r\n flagCardValues?.storeopenandcloseCards?.earlyClosedStores?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.storeopenandcloseCards?.earlyClosedStores?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.storeopenandcloseCards?.earlyClosedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.storeopenandcloseCards?.earlyClosedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.storeopenandcloseCards?.earlyClosedStores?.comparisonData === 0 ||\r\n flagCardTrends?.storeopenandcloseCards?.earlyClosedStores?.comparisonData) ?\r\n flagCardTrends?.storeopenandcloseCards?.earlyClosedStores?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Compliance Rate</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.storeopenandcloseCards?.complianceRate?.rate === 0 ||\r\n flagCardValues?.storeopenandcloseCards?.complianceRate?.rate) ?\r\n flagCardValues?.storeopenandcloseCards?.complianceRate?.rate?.toLocaleString('en-IN') : '--'}} %\r\n <div ><span *ngIf=\"flagCardTrends?.storeopenandcloseCards?.complianceRate?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.storeopenandcloseCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.storeopenandcloseCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.storeopenandcloseCards?.complianceRate?.comparisonData === 0 ||\r\n flagCardTrends?.storeopenandcloseCards?.complianceRate?.comparisonData) ?\r\n flagCardTrends?.storeopenandcloseCards?.complianceRate?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div *ngIf=\"currentChecklist?.checkListType === 'mobileusagedetection' && (headerData?.stores?.length ?? 0) > 1\" class=\"col-md-12 my-2\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Total Flagged Stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.mobileusagedetectionCards?.totalAssignedStores?.count === 0 ||\r\n flagCardValues?.mobileusagedetectionCards?.totalAssignedStores?.count) ?\r\n flagCardValues?.mobileusagedetectionCards?.totalAssignedStores?.count?.toLocaleString('en-IN') : '--'}}\r\n <div><span *ngIf=\"flagCardTrends?.mobileusagedetectionCards?.totalAssignedStores?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.mobileusagedetectionCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.mobileusagedetectionCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.mobileusagedetectionCards?.totalAssignedStores?.comparisonData === 0 ||\r\n flagCardTrends?.mobileusagedetectionCards?.totalAssignedStores?.comparisonData) ?\r\n flagCardTrends?.mobileusagedetectionCards?.totalAssignedStores?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Flag Incidents</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.mobileusagedetectionCards?.flagIncidents?.count === 0 ||\r\n flagCardValues?.mobileusagedetectionCards?.flagIncidents?.count) ?\r\n flagCardValues?.mobileusagedetectionCards?.flagIncidents?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.mobileusagedetectionCards?.flagIncidents?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.mobileusagedetectionCards?.flagIncidents?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.mobileusagedetectionCards?.flagIncidents?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.mobileusagedetectionCards?.flagIncidents?.comparisonData === 0 ||\r\n flagCardTrends?.mobileusagedetectionCards?.flagIncidents?.comparisonData) ?\r\n flagCardTrends?.mobileusagedetectionCards?.flagIncidents?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Compliance Rate</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.mobileusagedetectionCards?.complianceRate?.rate === 0 ||\r\n flagCardValues?.mobileusagedetectionCards?.complianceRate?.rate) ?\r\n flagCardValues?.mobileusagedetectionCards?.complianceRate?.rate?.toLocaleString('en-IN') : '--'}} %\r\n <div ><span *ngIf=\"flagCardTrends?.mobileusagedetectionCards?.complianceRate?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.mobileusagedetectionCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.mobileusagedetectionCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.mobileusagedetectionCards?.complianceRate?.comparisonData === 0 ||\r\n flagCardTrends?.mobileusagedetectionCards?.complianceRate?.comparisonData) ?\r\n flagCardTrends?.mobileusagedetectionCards?.complianceRate?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div *ngIf=\"currentChecklist?.checkListType === 'uniformdetection' && (headerData?.stores?.length ?? 0) > 1\" class=\"col-md-12 my-2\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Total Flagged Stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.uniformdetectionCards?.totalAssignedStores?.count === 0 ||\r\n flagCardValues?.uniformdetectionCards?.totalAssignedStores?.count) ?\r\n flagCardValues?.uniformdetectionCards?.totalAssignedStores?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.comparisonData === 0 ||\r\n flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.comparisonData) ?\r\n flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Flag Incidents</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.uniformdetectionCards?.flagIncidents?.count === 0 ||\r\n flagCardValues?.uniformdetectionCards?.flagIncidents?.count) ?\r\n flagCardValues?.uniformdetectionCards?.flagIncidents?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.uniformdetectionCards?.flagIncidents?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.uniformdetectionCards?.flagIncidents?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.uniformdetectionCards?.flagIncidents?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.uniformdetectionCards?.flagIncidents?.comparisonData === 0 ||\r\n flagCardTrends?.uniformdetectionCards?.flagIncidents?.comparisonData) ?\r\n flagCardTrends?.uniformdetectionCards?.flagIncidents?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Compliance Rate</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.uniformdetectionCards?.complianceRate?.rate === 0 ||\r\n flagCardValues?.uniformdetectionCards?.complianceRate?.rate) ?\r\n flagCardValues?.uniformdetectionCards?.complianceRate?.rate?.toLocaleString('en-IN') : '--'}} %\r\n <div ><span *ngIf=\"flagCardTrends?.uniformdetectionCards?.complianceRate?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.uniformdetectionCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.uniformdetectionCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.uniformdetectionCards?.complianceRate?.comparisonData === 0 ||\r\n flagCardTrends?.uniformdetectionCards?.complianceRate?.comparisonData) ?\r\n flagCardTrends?.uniformdetectionCards?.complianceRate?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div *ngIf=\"currentChecklist?.checkListType === 'customerunattended' \" class=\"col-md-12\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n <div class=\"col-9\">\r\n <div class=\"row\">\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"> <span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Avg</span> Footfall</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customerunattendedCards?.averageFootfall?.count === 0 ||\r\n flagCardValues?.customerunattendedCards?.averageFootfall?.count) ?\r\n flagCardValues?.customerunattendedCards?.averageFootfall?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.customerunattendedCards?.averageFootfall?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customerunattendedCards?.averageFootfall?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customerunattendedCards?.averageFootfall?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customerunattendedCards?.averageFootfall?.comparisonData === 0 ||\r\n flagCardTrends?.customerunattendedCards?.averageFootfall?.comparisonData) ?\r\n flagCardTrends?.customerunattendedCards?.averageFootfall?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Avg</span> Staff to Customer Ratio</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customerunattendedCards?.stafftoCustomerRatio?.ratio === 0 ||\r\n flagCardValues?.customerunattendedCards?.stafftoCustomerRatio?.ratio) ?\r\n flagCardValues?.customerunattendedCards?.stafftoCustomerRatio?.ratio?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.customerunattendedCards?.stafftoCustomerRatio?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customerunattendedCards?.stafftoCustomerRatio?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customerunattendedCards?.stafftoCustomerRatio?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customerunattendedCards?.stafftoCustomerRatio?.comparisonData === 0 ||\r\n flagCardTrends?.customerunattendedCards?.stafftoCustomerRatio?.comparisonData) ?\r\n flagCardTrends?.customerunattendedCards?.stafftoCustomerRatio?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Avg</span> Attended Customers</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customerunattendedCards?.attendedCustomers?.count === 0 ||\r\n flagCardValues?.customerunattendedCards?.attendedCustomers?.count) ?\r\n flagCardValues?.customerunattendedCards?.attendedCustomers?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.customerunattendedCards?.attendedCustomers?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customerunattendedCards?.attendedCustomers?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customerunattendedCards?.attendedCustomers?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customerunattendedCards?.attendedCustomers?.comparisonData === 0 ||\r\n flagCardTrends?.customerunattendedCards?.attendedCustomers?.comparisonData) ?\r\n flagCardTrends?.customerunattendedCards?.attendedCustomers?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Avg</span> Unattended Customers</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-4\">\r\n {{(flagCardValues?.customerunattendedCards?.unattendedCustomers?.count === 0 ||\r\n flagCardValues?.customerunattendedCards?.unattendedCustomers?.count) ?\r\n flagCardValues?.customerunattendedCards?.unattendedCustomers?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.customerunattendedCards?.unattendedCustomers?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customerunattendedCards?.unattendedCustomers?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customerunattendedCards?.unattendedCustomers?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customerunattendedCards?.unattendedCustomers?.comparisonData === 0 ||\r\n flagCardTrends?.customerunattendedCards?.unattendedCustomers?.comparisonData) ?\r\n flagCardTrends?.customerunattendedCards?.unattendedCustomers?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\">Avg</span> Time Taken to Assist</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customerunattendedCards?.timeTakentoAssist?.mins === 0 ||\r\n flagCardValues?.customerunattendedCards?.timeTakentoAssist?.mins) ?\r\n flagCardValues?.customerunattendedCards?.timeTakentoAssist?.mins?.toLocaleString('en-IN') : '--'}}\r\n Mins\r\n <div ><span *ngIf=\"flagCardTrends?.customerunattendedCards?.timeTakentoAssist?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customerunattendedCards?.timeTakentoAssist?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customerunattendedCards?.timeTakentoAssist?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customerunattendedCards?.timeTakentoAssist?.comparisonData === 0 ||\r\n flagCardTrends?.customerunattendedCards?.timeTakentoAssist?.comparisonData) ?\r\n flagCardTrends?.customerunattendedCards?.timeTakentoAssist?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\">Avg</span> Time Spent with Customer</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customerunattendedCards?.timeSpentwithCustomer?.mins === 0 ||\r\n flagCardValues?.customerunattendedCards?.timeSpentwithCustomer?.mins) ?\r\n flagCardValues?.customerunattendedCards?.timeSpentwithCustomer?.mins?.toLocaleString('en-IN') : '--'}}\r\n Mins\r\n <div ><span *ngIf=\"flagCardTrends?.customerunattendedCards?.timeSpentwithCustomer?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customerunattendedCards?.timeSpentwithCustomer?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customerunattendedCards?.timeSpentwithCustomer?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customerunattendedCards?.timeSpentwithCustomer?.comparisonData === 0 ||\r\n flagCardTrends?.customerunattendedCards?.timeSpentwithCustomer?.comparisonData) ?\r\n flagCardTrends?.customerunattendedCards?.timeSpentwithCustomer?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"flagCardValues?.customerunattendedCards?.unattendedSummaryChart?.chart1?.length\" class=\"col-3 mb-6\">\r\n <div class=\"row h-100\">\r\n <div class=\"col-12 h-100\">\r\n <div class=\"summarycard h-100\">\r\n <div *ngIf=\"unattendedSummaryChartNumber === 1\" class=\"cardtext\">\r\n Attended Summary\r\n </div>\r\n <div *ngIf=\"unattendedSummaryChartNumber === 2\" class=\"cardtext\">\r\n Unattended Summary\r\n </div>\r\n <div *ngIf=\"unattendedSummaryChartNumber === 1\" >\r\n <lib-unattended-pie-chart\r\n [chartData]=\"flagCardValues?.customerunattendedCards?.unattendedSummaryChart?.chart2\" [chartId]=\"'chart-two'\"></lib-unattended-pie-chart>\r\n </div>\r\n <div *ngIf=\"unattendedSummaryChartNumber === 2\" >\r\n <lib-unattended-pie-chart\r\n [chartData]=\"flagCardValues?.customerunattendedCards?.unattendedSummaryChart?.chart1\" [chartId]=\"'chart-one'\"></lib-unattended-pie-chart>\r\n </div>\r\n \r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <span (click)=\"unattendedSummaryChartNumber = 1\" [ngClass]=\"unattendedSummaryChartNumber === 1 ? 'selected-dot' : 'unselected-dot'\" class=\"cursor-pointer me-4\" ></span>\r\n <span (click)=\"unattendedSummaryChartNumber = 2\" [ngClass]=\"unattendedSummaryChartNumber === 2 ? 'selected-dot' : 'unselected-dot'\" class=\"cursor-pointer\"></span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"currentChecklist?.checkListType === 'staffleftinthemiddle' \" class=\"col-md-12\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n \r\n <div class=\"row\">\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Average </span>Staff Present</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.staffleftinthemiddleCards?.avgStaffPresent?.count === 0 ||\r\n flagCardValues?.staffleftinthemiddleCards?.avgStaffPresent?.count) ?\r\n flagCardValues?.staffleftinthemiddleCards?.avgStaffPresent?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresent?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresent?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresent?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresent?.comparisonData === 0 ||\r\n flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresent?.comparisonData) ?\r\n flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresent?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Average </span>Staff left </span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.staffleftinthemiddleCards?.avgStaffleft?.count === 0 ||\r\n flagCardValues?.staffleftinthemiddleCards?.avgStaffleft?.count) ?\r\n flagCardValues?.staffleftinthemiddleCards?.avgStaffleft?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.avgStaffleft?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.avgStaffleft?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.staffleftinthemiddleCards?.avgStaffleft?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.staffleftinthemiddleCards?.avgStaffleft?.comparisonData === 0 ||\r\n flagCardTrends?.staffleftinthemiddleCards?.avgStaffleft?.comparisonData) ?\r\n flagCardTrends?.staffleftinthemiddleCards?.avgStaffleft?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"> <span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\">Avg </span>Staff Present In Peak Hours</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.rate === 0 ||\r\n flagCardValues?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.rate) ?\r\n flagCardValues?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.rate?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.comparisonData === 0 ||\r\n flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.comparisonData) ?\r\n flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"row \">\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"> Staff <span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\"> Avg</span> Punctuality Rate</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.rate === 0 ||\r\n flagCardValues?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.rate) ?\r\n flagCardValues?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.rate?.toLocaleString('en-IN') : '--'}} %\r\n <div ><span *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.comparisonData === 0 ||\r\n flagCardTrends?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.comparisonData) ?\r\n flagCardTrends?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Staff <span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Avg</span> Break Hours</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.staffleftinthemiddleCards?.staffAvgBreakHours?.mins === 0 ||\r\n flagCardValues?.staffleftinthemiddleCards?.staffAvgBreakHours?.mins) ?\r\n flagCardValues?.staffleftinthemiddleCards?.staffAvgBreakHours?.mins?.toLocaleString('en-IN') : '--'}}\r\n Mins\r\n <div ><span *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.staffAvgBreakHours?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.staffAvgBreakHours?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.staffleftinthemiddleCards?.staffAvgBreakHours?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.staffleftinthemiddleCards?.staffAvgBreakHours?.comparisonData === 0 ||\r\n flagCardTrends?.staffleftinthemiddleCards?.staffAvgBreakHours?.comparisonData) ?\r\n flagCardTrends?.staffleftinthemiddleCards?.staffAvgBreakHours?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Staff <span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Avg</span> Productive Hours</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.staffleftinthemiddleCards?.staffAvgProductiveHours?.mins === 0 ||\r\n flagCardValues?.staffleftinthemiddleCards?.staffAvgProductiveHours?.mins) ?\r\n flagCardValues?.staffleftinthemiddleCards?.staffAvgProductiveHours?.mins?.toLocaleString('en-IN') : '--'}}\r\n Mins\r\n <div ><span *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.staffAvgProductiveHours?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.staffAvgProductiveHours?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.staffleftinthemiddleCards?.staffAvgProductiveHours?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.staffleftinthemiddleCards?.staffAvgProductiveHours?.comparisonData === 0 ||\r\n flagCardTrends?.staffleftinthemiddleCards?.staffAvgProductiveHours?.comparisonData) ?\r\n flagCardTrends?.staffleftinthemiddleCards?.staffAvgProductiveHours?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n <!-- <ng-container *ngIf=\"(flagsCardValuesState | async) === 'loading' || (flagsCardValuesState | async) === 'initial'\">\r\n <div class=\"col-md-12 my-2\">\r\n <div class=\"card\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container> -->\r\n <!-- card end -->\r\n <!-- table start -->\r\n <div class=\"col-md-12 my-2\" >\r\n <div class=\" card\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"card-header border-0 pt-4 px-4\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Store Info</span>\r\n <span class=\"text-sub mb-2\"> Based on {{ headerData?.date?.startDate | date: 'MMM d' }} - {{\r\n headerData?.date?.endDate | date: 'MMM d, y' }}\r\n </span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon footfallsearch svg-icon-1 position-absolute ms-8\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\">\r\n </rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input [formControl]=\"searchInput\" type=\"text\"\r\n class=\"form-control ps-14 ms-4 footfallsearch\" placeholder=\"Search by Store Name\"\r\n autocomplete=\"off\" />\r\n <button (click)=\"exportTable()\" type=\"button\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader ms-4\">\r\n <!-- Export Icon -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <ng-container *ngIf=\"currentChecklist?.checkListType === 'custom'\" >\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.customData?.length\">\r\n <div class=\"table-responsive px-4\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('date_iso')\">Date<svg\r\n [ngClass]=\"sortColumName === 'date_iso' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date_iso' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\" >Store Name\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeSpocEmail')\" >Store SPOC\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeSpocEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeSpocEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('detections')\">No. of flags\r\n <svg\r\n [ngClass]=\"sortColumName === 'detections' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'detections' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let flagData of checklistFlagList?.customData\">\r\n \r\n <td>\r\n <div class=\"table-title\">{{flagData?.date}}</div>\r\n </td>\r\n <td class=\"table-title-primary\">\r\n <u class=\"cursor-pointer\" (click)=\"storeView(flagData.storeId)\" >{{flagData?.storeName}}</u></td>\r\n <td >\r\n <div class=\"table-title\">{{flagData?.storeSpocEmail ? flagData?.storeSpocEmail : '--'}}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex\">\r\n <div class=\"table-title\">{{flagData?.detections?.toLocaleString('en-IN')}}</div>\r\n <span *ngIf=\"flagData?.questionFlagCount\" class=\"badge badge-light-default mx-3\" >Questions</span> \r\n <span *ngIf=\"flagData?.timeFlagCount\" class=\"badge badge-light-default mx-3\" >Not Submitted</span> \r\n </div>\r\n \r\n </td>\r\n \r\n <td>\r\n <div class=\"table-title d-flex\">\r\n <span *ngIf=\"flagData?.checklistStatus === 'submit'\" (click)=\"onView(flagData)\" class=\"actionview me-4 cursor-pointer text-primary\">View</span>\r\n <span *ngIf=\"(flagData?.checklistStatus === 'inprogress' || flagData?.checklistStatus === 'open') && (flagData?.timeFlagCount ?? 0) > 0 \" (click)=\"reInitiate(flagData)\" [ngClass]=\" isToday(flagData.dateString) || flagData?.reinitiateStatus ? 'pe-none' : 'text-primary'\" class=\"actionview me-4 cursor-pointer\">Reinitiate</span>\r\n <span *ngIf=\"flagData?.checklistStatus === 'open' && !flagData?.timeFlagCount\" class=\" me-4 \">--</span>\r\n\r\n\r\n </div>\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.customData?.length\" >\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container> \r\n </ng-container>\r\n <ng-container *ngIf=\"currentChecklist?.checkListType === 'storeopenandclose'\" >\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.storeopenandcloseData?.length\">\r\n <div class=\"table-responsive px-4\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('date')\">Date<svg\r\n [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\" >Store Name\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <!-- <th class=\"cursor-pointer\" (click)=\"sortData('storeSpocEmail')\" >Store SPOC\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeSpocEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeSpocEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th> -->\r\n <th class=\"cursor-pointer\" (click)=\"sortData('openTime')\" >Open Time\r\n <svg\r\n [ngClass]=\"sortColumName === 'openTime' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'openTime' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('closeTime')\" >Close Time\r\n <svg\r\n [ngClass]=\"sortColumName === 'closeTime' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'closeTime' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let flagData of checklistFlagList?.storeopenandcloseData\">\r\n\r\n <td>\r\n <div class=\"table-title\">{{flagData?.date}}</div>\r\n </td>\r\n <td class=\"table-title-primary\">\r\n <u class=\"cursor-pointer\" (click)=\"storeView(flagData.storeId)\">{{flagData?.storeName}}</u></td>\r\n <!-- <td >\r\n <div class=\"table-title\">{{flagData?.storeSpocEmail ? flagData?.storeSpocEmail : '--'}}\r\n </div>\r\n </td> -->\r\n <td >\r\n <span class=\"badge \" [ngClass]=\"flagData?.openTimeFlag ? 'badge-light-danger' : 'badge-light-success'\">{{flagData?.openTime}}</span>\r\n </td>\r\n <td >\r\n <span class=\"badge \" [ngClass]=\"flagData?.closeTimeFlag ? 'badge-light-danger' : 'badge-light-success'\">{{flagData?.closeTime}}</span>\r\n </td>\r\n\r\n <td>\r\n <div (click)=\"onView(flagData)\" class=\"table-title d-flex\"><span\r\n class=\"actionview me-4 cursor-pointer\">View</span>\r\n </div>\r\n </td>\r\n\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n </div>\r\n <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.storeopenandcloseData?.length\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"currentChecklist?.checkListType === 'mobileusagedetection'\" >\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.mobileusagedetectionData?.length\">\r\n <div class=\"table-responsive px-4\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('date')\">Date<svg\r\n [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\" >Store Name\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <!-- <th class=\"cursor-pointer\" (click)=\"sortData('storeSpocEmail')\" >Store SPOC\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeSpocEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeSpocEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th> -->\r\n <th class=\"cursor-pointer\" (click)=\"sortData('detections')\">Detections\r\n <svg\r\n [ngClass]=\"sortColumName === 'detections' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'detections' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th >Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let flagData of checklistFlagList?.mobileusagedetectionData\">\r\n \r\n <td>\r\n <div class=\"table-title\">{{flagData?.date}}</div>\r\n </td>\r\n <td class=\"table-title-primary\">\r\n <u class=\"cursor-pointer\" (click)=\"storeView(flagData.storeId)\">{{flagData?.storeName}}</u></td>\r\n <!-- <td >\r\n <div class=\"table-title\">{{flagData?.storeSpocEmail ? flagData?.storeSpocEmail : '--'}}\r\n </div>\r\n </td> -->\r\n <td>\r\n <div class=\"table-title\">{{flagData?.detections?.toLocaleString('en-IN')}}</div>\r\n </td>\r\n \r\n <td>\r\n <div (click)=\"onView(flagData)\" class=\"table-title d-flex\"><span\r\n class=\"actionview me-4 cursor-pointer\">View</span>\r\n </div>\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.mobileusagedetectionData?.length\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container> \r\n </ng-container>\r\n <ng-container *ngIf=\"currentChecklist?.checkListType === 'uniformdetection'\" >\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.uniformdetectionData?.length\">\r\n <div class=\"table-responsive px-4\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('date')\">Date<svg\r\n [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\" >Store Name\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <!-- <th class=\"cursor-pointer\" (click)=\"sortData('storeSpocEmail')\" >Store SPOC\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeSpocEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeSpocEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th> -->\r\n <th class=\"cursor-pointer\" (click)=\"sortData('detections')\">Detections\r\n <svg\r\n [ngClass]=\"sortColumName === 'detections' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'detections' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let flagData of checklistFlagList?.uniformdetectionData\">\r\n \r\n <td>\r\n <div class=\"table-title\">{{flagData?.date}}</div>\r\n </td>\r\n <td class=\"table-title-primary\">\r\n <u class=\"cursor-pointer\" (click)=\"storeView(flagData.storeId)\">{{flagData?.storeName}}</u></td>\r\n <!-- <td >\r\n <div class=\"table-title\">{{flagData?.storeSpocEmail ? flagData?.storeSpocEmail : '--'}}\r\n </div>\r\n </td> -->\r\n <td>\r\n <div class=\"table-title\">{{flagData?.detections?.toLocaleString('en-IN')}}</div>\r\n </td>\r\n \r\n <td>\r\n <div (click)=\"onView(flagData)\" class=\"table-title d-flex\"><span\r\n class=\"actionview me-4 cursor-pointer\">View</span>\r\n </div>\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.uniformdetectionData?.length\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container> \r\n </ng-container>\r\n <ng-container *ngIf=\"currentChecklist?.checkListType === 'customerunattended'\" >\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.customerunattendedData?.length\">\r\n <div class=\"table-responsive px-4\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('date')\">Date<svg\r\n [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\" >Store Name\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <!-- <th class=\"cursor-pointer\" (click)=\"sortData('storeSpocEmail')\" >Store SPOC\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeSpocEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeSpocEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th> -->\r\n <th class=\"cursor-pointer\" (click)=\"sortData('detections')\" >Detections\r\n <svg\r\n [ngClass]=\"sortColumName === 'detections' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'detections' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th >Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let flagData of checklistFlagList?.customerunattendedData\">\r\n \r\n <td>\r\n <div class=\"table-title\">{{flagData?.date}}</div>\r\n </td>\r\n <td class=\"table-title-primary\">\r\n <u class=\"cursor-pointer\" (click)=\"storeView(flagData.storeId)\">{{flagData?.storeName}}</u></td>\r\n <!-- <td >\r\n <div class=\"table-title\">{{flagData?.storeSpocEmail ? flagData?.storeSpocEmail : '--'}}\r\n </div>\r\n </td> -->\r\n <td>\r\n <div class=\"table-title\">{{flagData?.detections?.toLocaleString('en-IN')}}</div>\r\n </td>\r\n \r\n <td>\r\n <div (click)=\"onView(flagData)\" class=\"table-title d-flex\"><span\r\n class=\"actionview me-4 cursor-pointer\">View</span>\r\n </div>\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.customerunattendedData?.length\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container> \r\n </ng-container>\r\n <ng-container *ngIf=\"currentChecklist?.checkListType === 'staffleftinthemiddle'\" >\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.staffleftinthemiddleData?.length\">\r\n <div class=\"table-responsive px-4\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('date')\">Date<svg\r\n [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\" >Store Name\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <!-- <th class=\"cursor-pointer\" (click)=\"sortData('storeSpocEmail')\" >Store SPOC\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeSpocEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeSpocEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th> -->\r\n <th class=\"cursor-pointer\" (click)=\"sortData('detections')\">Detections\r\n <svg\r\n [ngClass]=\"sortColumName === 'detections' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'detections' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let flagData of checklistFlagList?.staffleftinthemiddleData\">\r\n \r\n <td>\r\n <div class=\"table-title\">{{flagData?.date}}</div>\r\n </td>\r\n <td class=\"table-title-primary\">\r\n <u class=\"cursor-pointer\" (click)=\"storeView(flagData.storeId)\">{{flagData?.storeName}}</u></td>\r\n <!-- <td >\r\n <div class=\"table-title\">{{flagData?.storeSpocEmail ? flagData?.storeSpocEmail : '--'}}\r\n </div>\r\n </td> -->\r\n <td>\r\n <div class=\"table-title\">{{flagData?.detections?.toLocaleString('en-IN')}}</div>\r\n </td>\r\n \r\n <td>\r\n <div (click)=\"onView(flagData)\" class=\"table-title d-flex\"><span\r\n class=\"actionview me-4 cursor-pointer\">View</span>\r\n </div>\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.staffleftinthemiddleData?.length\" >\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container> \r\n </ng-container>\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loading' || (flagsTableApiState | async) === 'initial'\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && !checklistFlagList?.customData?.length && !checklistFlagList?.storeopenandcloseData?.length\r\n && !checklistFlagList?.mobileusagedetectionData?.length && !checklistFlagList?.uniformdetectionData?.length && !checklistFlagList?.customerunattendedData?.length\r\n && !checklistFlagList?.staffleftinthemiddleData?.length\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Flags Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container> \r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div> \r\n </div>\r\n \r\n</div>", styles: [".table-title-primary{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-style:normal;font-weight:500!important;line-height:30px}.table-title{color:var(--Gray-500, #667085);font-size:14px;font-style:normal;font-weight:500!important;line-height:20px}.infocount{color:var(--Black, #101828);font-size:24px;font-style:normal;font-weight:600;line-height:32px;text-align:center}.percent-value{color:var(--Gray-500, #667085);text-align:center;font-size:16px;font-style:normal;font-weight:600;line-height:18px}.week-font{color:var(--Black, #101828);font-size:12px;font-style:normal;font-weight:400!important;line-height:18px}.subinfocard{border-radius:5.359px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;display:flex;padding:31px 12px;flex-direction:column;align-items:center;gap:24px;align-self:stretch}.avgcount{color:var(--Black, #101828);font-size:14px;font-style:normal;font-weight:400;line-height:20px}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.cardcount{color:var(--Black, #101828);font-size:30px;font-style:normal;font-weight:600;line-height:38px}.cardtext{color:var(--Black, #101828);font-size:18px;font-style:normal;font-weight:600;line-height:28px;text-align:center}.cardsubcount{color:var(--Black, #101828);font-size:20px;font-style:normal;font-weight:700;line-height:30px}.card-border{padding:8px;border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.actionview{color:var(--Gray-500, #667085);font-size:14px;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.grey-badge{border-radius:16px;background:var(--Gray-100, #F2F4F7);display:flex;padding:2px 8px;justify-content:center;align-items:center;color:var(--Gray-700, #344054);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.text-success{border-radius:16px;background:var(--Success-50, #ECFDF3);display:flex;padding:2px 8px 2px 6px;justify-content:center;align-items:center;gap:6px;color:var(--Success-500, #12B76A);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.checklistheading{color:var(--Gray-900, #101828);font-size:18px;font-style:normal;font-weight:600;line-height:28px}.checklisttext{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.totalinfocard{border-radius:5.359px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;display:flex;padding:16px 12px 24px;flex-direction:column;align-items:center;gap:24px;align-self:stretch}.headingcard{border-radius:4px;background:var(--Gray-50, #F9FAFB);display:flex;padding:8px;flex-direction:column;align-items:center;gap:4px;align-self:stretch;color:var(--Black, #101828);font-size:16px;font-style:normal;font-weight:500;line-height:24px}.no-border-custom-select{border:none!important;box-shadow:none!important}.summarycard{padding:8px;flex-direction:column;align-items:center;gap:16px;flex:1 0 0;border-radius:8px;background:var(--White, #FFF)}.staffcard{padding:8px;border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.unselected-dot{width:8px;height:8px;border-radius:4px;background:#daf1ff}.selected-dot{width:8px;height:8px;border-radius:4px;background:#009bf3}.header-card{padding:16px;border-radius:12px;background:#fff}.rotate{rotate:180deg;transition:1s}\n"], dependencies: [{ kind: "directive", type: i6$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: i3.CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: UnattendedPieChartComponent, selector: "lib-unattended-pie-chart", inputs: ["chartData", "chartId"] }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6$1.DatePipe, name: "date" }] });
8290
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FlagsInfoComponent, selector: "lib-flags-info", ngImport: i0, template: "<div class=\"row\">\r\n <!-- header start -->\r\n <div class=\"col-md-12 mb-6 mt-4\">\r\n\r\n <ng-container *ngIf=\"(checkListsApiState | async) === 'loaded'\" >\r\n <div class=\"d-flex align-items-center justify-content-between header-card\">\r\n <div class=\"d-flex align-items-center\">\r\n <a (click)=\"onBack()\" class=\"d-flex align-items-center me-3 mt-1 cursor-pointer\">\r\n <span><svg width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_987_30898)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M27.8346 21.0001H16.168M16.168 21.0001L22.0013 26.8334M16.168 21.0001L22.0013 15.1667\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_987_30898\" x=\"0\" y=\"0\" width=\"44\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_987_30898\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_987_30898\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </a> \r\n <span class=\"mt-1 me-3 borderless-select\" style=\"min-width: 200px;\" >\r\n <!-- <lib-reactive-select [formControl]=\"checklistSelectControl\" [idField]=\"'sourceCheckList_id'\"\r\n [nameField]=\"'checkListName'\" [data]=\"checkLists\" class=\"w-100 \"\r\n style=\"border: none !important; box-shadow: none !important;\">\r\n <ng-template let-item>\r\n <div\r\n class=\"d-flex justify-content-between align-items-center no-border-custom-select\">\r\n <span>{{ item.label }}</span>\r\n <span class=\"d-flex align-items-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#101828\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-template>\r\n </lib-reactive-select> -->\r\n\r\n <lib-select [items]=\"checkLists\" [multi]=\"false\" [searchField]=\"'checkListName'\" [idField]=\"'sourceCheckList_id'\"\r\n (selected)=\"onChecklistSelect($event)\" [selectedValues]=\"[this.currentChecklist]\"></lib-select>\r\n\r\n </span>\r\n\r\n <ng-container *ngIf=\"checklistFlagList\" >\r\n <div *ngIf=\"currentChecklist?.checkListType !== 'custom'\"\r\n class=\"d-flex align-items-center grey-badge me-3 my-3\">\r\n AI Manager\r\n </div>\r\n <div *ngIf=\"currentChecklist?.publish\" class=\"d-flex align-items-center text-success me-3 my-3\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\"\r\n fill=\"none\">\r\n <circle cx=\"4\" cy=\"4\" r=\"3\" fill=\"#12B76A\" />\r\n </svg> Active</span>\r\n </div>\r\n <div class=\"d-flex align-items-center me-3 checklisttext\"><span><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M13.3307 14V12.6667C13.3307 11.9594 13.0498 11.2811 12.5497 10.781C12.0496 10.281 11.3713 10 10.6641 10H5.33073C4.62349 10 3.94521 10.281 3.44511 10.781C2.94501 11.2811 2.66406 11.9594 2.66406 12.6667V14M10.6641 4.66667C10.6641 6.13943 9.47015 7.33333 7.9974 7.33333C6.52464 7.33333 5.33073 6.13943 5.33073 4.66667C5.33073 3.19391 6.52464 2 7.9974 2C9.47015 2 10.6641 3.19391 10.6641 4.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>{{currentChecklist?.createdByName}}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center me-3 checklisttext\"><span><svg class=\"mx-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 3H13.5C13.8978 3 14.2794 3.15804 14.5607 3.43934C14.842 3.72064 15 4.10218 15 4.5V15C15 15.3978 14.842 15.7794 14.5607 16.0607C14.2794 16.342 13.8978 16.5 13.5 16.5H4.5C4.10218 16.5 3.72064 16.342 3.43934 16.0607C3.15804 15.7794 3 15.3978 3 15V4.5C3 4.10218 3.15804 3.72064 3.43934 3.43934C3.72064 3.15804 4.10218 3 4.5 3H6M6.75 1.5H11.25C11.6642 1.5 12 1.83579 12 2.25V3.75C12 4.16421 11.6642 4.5 11.25 4.5H6.75C6.33579 4.5 6 4.16421 6 3.75V2.25C6 1.83579 6.33579 1.5 6.75 1.5Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>{{currentChecklist?.checkListType === 'custom' ? currentChecklist?.storeCount : headerData?.stores?.length}} Stores</span>\r\n </div>\r\n <div class=\"d-flex align-items-center me-3 checklisttext\"><span><svg class=\"mx-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 1.5V4.5M6 1.5V4.5M2.25 7.5H15.75M3.75 3H14.25C15.0784 3 15.75 3.67157 15.75 4.5V15C15.75 15.8284 15.0784 16.5 14.25 16.5H3.75C2.92157 16.5 2.25 15.8284 2.25 15V4.5C2.25 3.67157 2.92157 3 3.75 3Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>Repeats {{currentChecklist?.scheduleRepeatedType}}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center me-3 checklisttext\"><span><svg class=\"mx-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_987_30895)\">\r\n <path\r\n d=\"M9 4.5V9L12 10.5M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_987_30895\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>{{currentChecklist?.scheduleStartTime}} -\r\n {{currentChecklist?.scheduleEndTime}}</span>\r\n </div>\r\n </ng-container>\r\n \r\n </div> \r\n \r\n </div> \r\n </ng-container>\r\n \r\n \r\n <ng-container *ngIf=\"(checkListsApiState | async) === 'loading' || (checkListsApiState | async) === 'initial'\" >\r\n <div style=\"margin:0px; padding:0px; height:unset\" class=\"row loader d-flex justify-content-center align-items-center w-100\">\r\n <div style=\"height: unset; margin:unset; border-radius: 5px;\" class=\"shimmer w-100\">\r\n <div class=\"wrapper\">\r\n <div style=\"margin-top: unset;\" class=\"stroke animate title\"></div>\r\n <div style=\"margin-top: 5px;\" class=\"stroke animate link\"></div>\r\n <div style=\"margin-top: 5px;\" class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n </div>\r\n <!-- header end -->\r\n <!-- card start -->\r\n <ng-container >\r\n <!-- <div *ngIf=\"currentChecklist?.checkListType === 'custom' && (headerData?.stores?.length ?? 0) > 1\" class=\"col-md-12 my-2\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Total Assigned Stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customCards?.totalAssignedStores?.count === 0 ||\r\n flagCardValues?.customCards?.totalAssignedStores?.count) ?\r\n flagCardValues?.customCards?.totalAssignedStores?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.customCards?.totalAssignedStores?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customCards?.totalAssignedStores?.comparisonData === 0 ||\r\n flagCardTrends?.customCards?.totalAssignedStores?.comparisonData) ?\r\n flagCardTrends?.customCards?.totalAssignedStores?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Flag Incidents</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customCards?.flagIncidents?.count === 0 ||\r\n flagCardValues?.customCards?.flagIncidents?.count) ?\r\n flagCardValues?.customCards?.flagIncidents?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.customCards?.flagIncidents?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customCards?.flagIncidents?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customCards?.flagIncidents?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customCards?.flagIncidents?.comparisonData === 0 ||\r\n flagCardTrends?.customCards?.flagIncidents?.comparisonData) ?\r\n flagCardTrends?.customCards?.flagIncidents?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Compliance Rate</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customCards?.complianceRate?.count === 0 ||\r\n flagCardValues?.customCards?.complianceRate?.count) ?\r\n flagCardValues?.customCards?.complianceRate?.count?.toLocaleString('en-IN') : '--'}} %\r\n <div ><span *ngIf=\"flagCardTrends?.customCards?.complianceRate?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customCards?.complianceRate?.comparisonData === 0 ||\r\n flagCardTrends?.customCards?.complianceRate?.comparisonData) ?\r\n flagCardTrends?.customCards?.complianceRate?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div> -->\r\n <div *ngIf=\"currentChecklist?.checkListType === 'storeopenandclose' && (headerData?.stores?.length ?? 0) > 1\" class=\"col-md-12 my-2\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n <div class=\"col-3\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Total Flagged Stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.storeopenandcloseCards?.totalAssignedStores?.count === 0 ||\r\n flagCardValues?.storeopenandcloseCards?.totalAssignedStores?.count) ?\r\n flagCardValues?.storeopenandcloseCards?.totalAssignedStores?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.storeopenandcloseCards?.totalAssignedStores?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.storeopenandcloseCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.storeopenandcloseCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.storeopenandcloseCards?.totalAssignedStores?.comparisonData === 0 ||\r\n flagCardTrends?.storeopenandcloseCards?.totalAssignedStores?.comparisonData) ?\r\n flagCardTrends?.storeopenandcloseCards?.totalAssignedStores?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Late Open Stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.storeopenandcloseCards?.lateOpenStores?.count === 0 ||\r\n flagCardValues?.storeopenandcloseCards?.lateOpenStores?.count) ?\r\n flagCardValues?.storeopenandcloseCards?.lateOpenStores?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.storeopenandcloseCards?.lateOpenStores?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.storeopenandcloseCards?.lateOpenStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.storeopenandcloseCards?.lateOpenStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.storeopenandcloseCards?.lateOpenStores?.comparisonData === 0 ||\r\n flagCardTrends?.storeopenandcloseCards?.lateOpenStores?.comparisonData) ?\r\n flagCardTrends?.storeopenandcloseCards?.lateOpenStores?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Early Closed Stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.storeopenandcloseCards?.earlyClosedStores?.count === 0 ||\r\n flagCardValues?.storeopenandcloseCards?.earlyClosedStores?.count) ?\r\n flagCardValues?.storeopenandcloseCards?.earlyClosedStores?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.storeopenandcloseCards?.earlyClosedStores?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.storeopenandcloseCards?.earlyClosedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.storeopenandcloseCards?.earlyClosedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.storeopenandcloseCards?.earlyClosedStores?.comparisonData === 0 ||\r\n flagCardTrends?.storeopenandcloseCards?.earlyClosedStores?.comparisonData) ?\r\n flagCardTrends?.storeopenandcloseCards?.earlyClosedStores?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Compliance Rate</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.storeopenandcloseCards?.complianceRate?.rate === 0 ||\r\n flagCardValues?.storeopenandcloseCards?.complianceRate?.rate) ?\r\n flagCardValues?.storeopenandcloseCards?.complianceRate?.rate?.toLocaleString('en-IN') : '--'}} %\r\n <div ><span *ngIf=\"flagCardTrends?.storeopenandcloseCards?.complianceRate?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.storeopenandcloseCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.storeopenandcloseCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.storeopenandcloseCards?.complianceRate?.comparisonData === 0 ||\r\n flagCardTrends?.storeopenandcloseCards?.complianceRate?.comparisonData) ?\r\n flagCardTrends?.storeopenandcloseCards?.complianceRate?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div *ngIf=\"currentChecklist?.checkListType === 'mobileusagedetection' && (headerData?.stores?.length ?? 0) > 1\" class=\"col-md-12 my-2\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Total Flagged Stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.mobileusagedetectionCards?.totalAssignedStores?.count === 0 ||\r\n flagCardValues?.mobileusagedetectionCards?.totalAssignedStores?.count) ?\r\n flagCardValues?.mobileusagedetectionCards?.totalAssignedStores?.count?.toLocaleString('en-IN') : '--'}}\r\n <div><span *ngIf=\"flagCardTrends?.mobileusagedetectionCards?.totalAssignedStores?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.mobileusagedetectionCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.mobileusagedetectionCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.mobileusagedetectionCards?.totalAssignedStores?.comparisonData === 0 ||\r\n flagCardTrends?.mobileusagedetectionCards?.totalAssignedStores?.comparisonData) ?\r\n flagCardTrends?.mobileusagedetectionCards?.totalAssignedStores?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Flag Incidents</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.mobileusagedetectionCards?.flagIncidents?.count === 0 ||\r\n flagCardValues?.mobileusagedetectionCards?.flagIncidents?.count) ?\r\n flagCardValues?.mobileusagedetectionCards?.flagIncidents?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.mobileusagedetectionCards?.flagIncidents?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.mobileusagedetectionCards?.flagIncidents?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.mobileusagedetectionCards?.flagIncidents?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.mobileusagedetectionCards?.flagIncidents?.comparisonData === 0 ||\r\n flagCardTrends?.mobileusagedetectionCards?.flagIncidents?.comparisonData) ?\r\n flagCardTrends?.mobileusagedetectionCards?.flagIncidents?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Compliance Rate</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.mobileusagedetectionCards?.complianceRate?.rate === 0 ||\r\n flagCardValues?.mobileusagedetectionCards?.complianceRate?.rate) ?\r\n flagCardValues?.mobileusagedetectionCards?.complianceRate?.rate?.toLocaleString('en-IN') : '--'}} %\r\n <div ><span *ngIf=\"flagCardTrends?.mobileusagedetectionCards?.complianceRate?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.mobileusagedetectionCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.mobileusagedetectionCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.mobileusagedetectionCards?.complianceRate?.comparisonData === 0 ||\r\n flagCardTrends?.mobileusagedetectionCards?.complianceRate?.comparisonData) ?\r\n flagCardTrends?.mobileusagedetectionCards?.complianceRate?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div *ngIf=\"currentChecklist?.checkListType === 'uniformdetection' && (headerData?.stores?.length ?? 0) > 1\" class=\"col-md-12 my-2\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Total Flagged Stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.uniformdetectionCards?.totalAssignedStores?.count === 0 ||\r\n flagCardValues?.uniformdetectionCards?.totalAssignedStores?.count) ?\r\n flagCardValues?.uniformdetectionCards?.totalAssignedStores?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.comparisonData === 0 ||\r\n flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.comparisonData) ?\r\n flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Flag Incidents</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.uniformdetectionCards?.flagIncidents?.count === 0 ||\r\n flagCardValues?.uniformdetectionCards?.flagIncidents?.count) ?\r\n flagCardValues?.uniformdetectionCards?.flagIncidents?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.uniformdetectionCards?.flagIncidents?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.uniformdetectionCards?.flagIncidents?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.uniformdetectionCards?.flagIncidents?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.uniformdetectionCards?.flagIncidents?.comparisonData === 0 ||\r\n flagCardTrends?.uniformdetectionCards?.flagIncidents?.comparisonData) ?\r\n flagCardTrends?.uniformdetectionCards?.flagIncidents?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Compliance Rate</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.uniformdetectionCards?.complianceRate?.rate === 0 ||\r\n flagCardValues?.uniformdetectionCards?.complianceRate?.rate) ?\r\n flagCardValues?.uniformdetectionCards?.complianceRate?.rate?.toLocaleString('en-IN') : '--'}} %\r\n <div ><span *ngIf=\"flagCardTrends?.uniformdetectionCards?.complianceRate?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.uniformdetectionCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.uniformdetectionCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.uniformdetectionCards?.complianceRate?.comparisonData === 0 ||\r\n flagCardTrends?.uniformdetectionCards?.complianceRate?.comparisonData) ?\r\n flagCardTrends?.uniformdetectionCards?.complianceRate?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div *ngIf=\"currentChecklist?.checkListType === 'customerunattended' \" class=\"col-md-12\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n <div class=\"col-9\">\r\n <div class=\"row\">\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"> <span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Avg</span> Footfall</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customerunattendedCards?.averageFootfall?.count === 0 ||\r\n flagCardValues?.customerunattendedCards?.averageFootfall?.count) ?\r\n flagCardValues?.customerunattendedCards?.averageFootfall?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.customerunattendedCards?.averageFootfall?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customerunattendedCards?.averageFootfall?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customerunattendedCards?.averageFootfall?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customerunattendedCards?.averageFootfall?.comparisonData === 0 ||\r\n flagCardTrends?.customerunattendedCards?.averageFootfall?.comparisonData) ?\r\n flagCardTrends?.customerunattendedCards?.averageFootfall?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Avg</span> Staff to Customer Ratio</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customerunattendedCards?.stafftoCustomerRatio?.ratio === 0 ||\r\n flagCardValues?.customerunattendedCards?.stafftoCustomerRatio?.ratio) ?\r\n flagCardValues?.customerunattendedCards?.stafftoCustomerRatio?.ratio?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.customerunattendedCards?.stafftoCustomerRatio?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customerunattendedCards?.stafftoCustomerRatio?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customerunattendedCards?.stafftoCustomerRatio?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customerunattendedCards?.stafftoCustomerRatio?.comparisonData === 0 ||\r\n flagCardTrends?.customerunattendedCards?.stafftoCustomerRatio?.comparisonData) ?\r\n flagCardTrends?.customerunattendedCards?.stafftoCustomerRatio?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Avg</span> Attended Customers</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customerunattendedCards?.attendedCustomers?.count === 0 ||\r\n flagCardValues?.customerunattendedCards?.attendedCustomers?.count) ?\r\n flagCardValues?.customerunattendedCards?.attendedCustomers?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.customerunattendedCards?.attendedCustomers?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customerunattendedCards?.attendedCustomers?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customerunattendedCards?.attendedCustomers?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customerunattendedCards?.attendedCustomers?.comparisonData === 0 ||\r\n flagCardTrends?.customerunattendedCards?.attendedCustomers?.comparisonData) ?\r\n flagCardTrends?.customerunattendedCards?.attendedCustomers?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Avg</span> Unattended Customers</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-4\">\r\n {{(flagCardValues?.customerunattendedCards?.unattendedCustomers?.count === 0 ||\r\n flagCardValues?.customerunattendedCards?.unattendedCustomers?.count) ?\r\n flagCardValues?.customerunattendedCards?.unattendedCustomers?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.customerunattendedCards?.unattendedCustomers?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customerunattendedCards?.unattendedCustomers?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customerunattendedCards?.unattendedCustomers?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customerunattendedCards?.unattendedCustomers?.comparisonData === 0 ||\r\n flagCardTrends?.customerunattendedCards?.unattendedCustomers?.comparisonData) ?\r\n flagCardTrends?.customerunattendedCards?.unattendedCustomers?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\">Avg</span> Time Taken to Assist</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customerunattendedCards?.timeTakentoAssist?.mins === 0 ||\r\n flagCardValues?.customerunattendedCards?.timeTakentoAssist?.mins) ?\r\n flagCardValues?.customerunattendedCards?.timeTakentoAssist?.mins?.toLocaleString('en-IN') : '--'}}\r\n Mins\r\n <div ><span *ngIf=\"flagCardTrends?.customerunattendedCards?.timeTakentoAssist?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customerunattendedCards?.timeTakentoAssist?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customerunattendedCards?.timeTakentoAssist?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customerunattendedCards?.timeTakentoAssist?.comparisonData === 0 ||\r\n flagCardTrends?.customerunattendedCards?.timeTakentoAssist?.comparisonData) ?\r\n flagCardTrends?.customerunattendedCards?.timeTakentoAssist?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\">Avg</span> Time Spent with Customer</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customerunattendedCards?.timeSpentwithCustomer?.mins === 0 ||\r\n flagCardValues?.customerunattendedCards?.timeSpentwithCustomer?.mins) ?\r\n flagCardValues?.customerunattendedCards?.timeSpentwithCustomer?.mins?.toLocaleString('en-IN') : '--'}}\r\n Mins\r\n <div ><span *ngIf=\"flagCardTrends?.customerunattendedCards?.timeSpentwithCustomer?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customerunattendedCards?.timeSpentwithCustomer?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customerunattendedCards?.timeSpentwithCustomer?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customerunattendedCards?.timeSpentwithCustomer?.comparisonData === 0 ||\r\n flagCardTrends?.customerunattendedCards?.timeSpentwithCustomer?.comparisonData) ?\r\n flagCardTrends?.customerunattendedCards?.timeSpentwithCustomer?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"flagCardValues?.customerunattendedCards?.unattendedSummaryChart?.chart1?.length\" class=\"col-3 mb-6\">\r\n <div class=\"row h-100\">\r\n <div class=\"col-12 h-100\">\r\n <div class=\"summarycard h-100\">\r\n <div *ngIf=\"unattendedSummaryChartNumber === 1\" class=\"cardtext\">\r\n Attended Summary\r\n </div>\r\n <div *ngIf=\"unattendedSummaryChartNumber === 2\" class=\"cardtext\">\r\n Unattended Summary\r\n </div>\r\n <div *ngIf=\"unattendedSummaryChartNumber === 1\" >\r\n <lib-unattended-pie-chart\r\n [chartData]=\"flagCardValues?.customerunattendedCards?.unattendedSummaryChart?.chart2\" [chartId]=\"'chart-two'\"></lib-unattended-pie-chart>\r\n </div>\r\n <div *ngIf=\"unattendedSummaryChartNumber === 2\" >\r\n <lib-unattended-pie-chart\r\n [chartData]=\"flagCardValues?.customerunattendedCards?.unattendedSummaryChart?.chart1\" [chartId]=\"'chart-one'\"></lib-unattended-pie-chart>\r\n </div>\r\n \r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <span (click)=\"unattendedSummaryChartNumber = 1\" [ngClass]=\"unattendedSummaryChartNumber === 1 ? 'selected-dot' : 'unselected-dot'\" class=\"cursor-pointer me-4\" ></span>\r\n <span (click)=\"unattendedSummaryChartNumber = 2\" [ngClass]=\"unattendedSummaryChartNumber === 2 ? 'selected-dot' : 'unselected-dot'\" class=\"cursor-pointer\"></span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"currentChecklist?.checkListType === 'staffleftinthemiddle' \" class=\"col-md-12\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n \r\n <div class=\"row\">\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Average </span>Staff Present</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.staffleftinthemiddleCards?.avgStaffPresent?.count === 0 ||\r\n flagCardValues?.staffleftinthemiddleCards?.avgStaffPresent?.count) ?\r\n flagCardValues?.staffleftinthemiddleCards?.avgStaffPresent?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresent?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresent?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresent?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresent?.comparisonData === 0 ||\r\n flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresent?.comparisonData) ?\r\n flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresent?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Average </span>Staff left </span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.staffleftinthemiddleCards?.avgStaffleft?.count === 0 ||\r\n flagCardValues?.staffleftinthemiddleCards?.avgStaffleft?.count) ?\r\n flagCardValues?.staffleftinthemiddleCards?.avgStaffleft?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.avgStaffleft?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.avgStaffleft?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.staffleftinthemiddleCards?.avgStaffleft?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.staffleftinthemiddleCards?.avgStaffleft?.comparisonData === 0 ||\r\n flagCardTrends?.staffleftinthemiddleCards?.avgStaffleft?.comparisonData) ?\r\n flagCardTrends?.staffleftinthemiddleCards?.avgStaffleft?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"> <span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\">Avg </span>Staff Present In Peak Hours</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.rate === 0 ||\r\n flagCardValues?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.rate) ?\r\n flagCardValues?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.rate?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.comparisonData === 0 ||\r\n flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.comparisonData) ?\r\n flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"row \">\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"> Staff <span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\"> Avg</span> Punctuality Rate</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.rate === 0 ||\r\n flagCardValues?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.rate) ?\r\n flagCardValues?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.rate?.toLocaleString('en-IN') : '--'}} %\r\n <div ><span *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.comparisonData === 0 ||\r\n flagCardTrends?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.comparisonData) ?\r\n flagCardTrends?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Staff <span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Avg</span> Break Hours</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.staffleftinthemiddleCards?.staffAvgBreakHours?.mins === 0 ||\r\n flagCardValues?.staffleftinthemiddleCards?.staffAvgBreakHours?.mins) ?\r\n flagCardValues?.staffleftinthemiddleCards?.staffAvgBreakHours?.mins?.toLocaleString('en-IN') : '--'}}\r\n Mins\r\n <div ><span *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.staffAvgBreakHours?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.staffAvgBreakHours?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.staffleftinthemiddleCards?.staffAvgBreakHours?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.staffleftinthemiddleCards?.staffAvgBreakHours?.comparisonData === 0 ||\r\n flagCardTrends?.staffleftinthemiddleCards?.staffAvgBreakHours?.comparisonData) ?\r\n flagCardTrends?.staffleftinthemiddleCards?.staffAvgBreakHours?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Staff <span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Avg</span> Productive Hours</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.staffleftinthemiddleCards?.staffAvgProductiveHours?.mins === 0 ||\r\n flagCardValues?.staffleftinthemiddleCards?.staffAvgProductiveHours?.mins) ?\r\n flagCardValues?.staffleftinthemiddleCards?.staffAvgProductiveHours?.mins?.toLocaleString('en-IN') : '--'}}\r\n Mins\r\n <div ><span *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.staffAvgProductiveHours?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.staffAvgProductiveHours?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.staffleftinthemiddleCards?.staffAvgProductiveHours?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.staffleftinthemiddleCards?.staffAvgProductiveHours?.comparisonData === 0 ||\r\n flagCardTrends?.staffleftinthemiddleCards?.staffAvgProductiveHours?.comparisonData) ?\r\n flagCardTrends?.staffleftinthemiddleCards?.staffAvgProductiveHours?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n <!-- <ng-container *ngIf=\"(flagsCardValuesState | async) === 'loading' || (flagsCardValuesState | async) === 'initial'\">\r\n <div class=\"col-md-12 my-2\">\r\n <div class=\"card\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container> -->\r\n <!-- card end -->\r\n <!-- table start -->\r\n <div class=\"col-md-12 my-2\" >\r\n <div class=\" card\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"card-header border-0 pt-4 px-4\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Store Info</span>\r\n <span class=\"text-sub mb-2\"> Based on {{ headerData?.date?.startDate | date: 'MMM d' }} - {{\r\n headerData?.date?.endDate | date: 'MMM d, y' }}\r\n </span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon footfallsearch svg-icon-1 position-absolute ms-8\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\">\r\n </rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input [formControl]=\"searchInput\" type=\"text\"\r\n class=\"form-control ps-14 ms-4 footfallsearch\" placeholder=\"Search by Store Name\"\r\n autocomplete=\"off\" />\r\n <button (click)=\"exportTable()\" type=\"button\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader ms-4\">\r\n <!-- Export Icon -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <ng-container *ngIf=\"currentChecklist?.checkListType === 'custom'\" >\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.customData?.length\">\r\n <div class=\"table-responsive px-4\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('date_iso')\">Date<svg\r\n [ngClass]=\"sortColumName === 'date_iso' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date_iso' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\" >Store Name\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeSpocEmail')\" >Store SPOC\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeSpocEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeSpocEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('detections')\">No. of flags\r\n <svg\r\n [ngClass]=\"sortColumName === 'detections' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'detections' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let flagData of checklistFlagList?.customData\">\r\n \r\n <td>\r\n <div class=\"table-title\">{{flagData?.date}}</div>\r\n </td>\r\n <td class=\"table-title-primary\">\r\n <u class=\"cursor-pointer\" (click)=\"storeView(flagData.storeId)\" >{{flagData?.storeName}}</u></td>\r\n <td >\r\n <div class=\"table-title\">{{flagData?.storeSpocEmail ? flagData?.storeSpocEmail : '--'}}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex\">\r\n <div class=\"table-title\">{{flagData?.detections?.toLocaleString('en-IN')}}</div>\r\n <span *ngIf=\"flagData?.questionFlagCount\" class=\"badge badge-light-default mx-3\" >Questions</span> \r\n <span *ngIf=\"flagData?.timeFlagCount\" class=\"badge badge-light-default mx-3\" >Not Submitted</span> \r\n </div>\r\n \r\n </td>\r\n \r\n <td>\r\n <div class=\"table-title d-flex\">\r\n <span *ngIf=\"flagData?.checklistStatus === 'submit'\" (click)=\"onView(flagData)\" class=\"actionview me-4 cursor-pointer text-primary\">View</span>\r\n <span *ngIf=\"(flagData?.checklistStatus === 'inprogress' || flagData?.checklistStatus === 'open') && (flagData?.timeFlagCount ?? 0) > 0 \" (click)=\"reInitiate(flagData)\" [ngClass]=\" isToday(flagData.dateString) || flagData?.reinitiateStatus ? 'pe-none' : 'text-primary'\" class=\"actionview me-4 cursor-pointer\">Reinitiate</span>\r\n <span *ngIf=\"flagData?.checklistStatus === 'open' && !flagData?.timeFlagCount\" class=\" me-4 \">--</span>\r\n\r\n\r\n </div>\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.customData?.length\" >\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container> \r\n </ng-container>\r\n <ng-container *ngIf=\"currentChecklist?.checkListType === 'storeopenandclose'\" >\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.storeopenandcloseData?.length\">\r\n <div class=\"table-responsive px-4\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('date')\">Date<svg\r\n [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\" >Store Name\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <!-- <th class=\"cursor-pointer\" (click)=\"sortData('storeSpocEmail')\" >Store SPOC\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeSpocEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeSpocEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th> -->\r\n <th class=\"cursor-pointer\" (click)=\"sortData('openTime')\" >Open Time\r\n <svg\r\n [ngClass]=\"sortColumName === 'openTime' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'openTime' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('closeTime')\" >Close Time\r\n <svg\r\n [ngClass]=\"sortColumName === 'closeTime' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'closeTime' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let flagData of checklistFlagList?.storeopenandcloseData\">\r\n\r\n <td>\r\n <div class=\"table-title\">{{flagData?.date}}</div>\r\n </td>\r\n <td class=\"table-title-primary\">\r\n <u class=\"cursor-pointer\" (click)=\"storeView(flagData.storeId)\">{{flagData?.storeName}}</u></td>\r\n <!-- <td >\r\n <div class=\"table-title\">{{flagData?.storeSpocEmail ? flagData?.storeSpocEmail : '--'}}\r\n </div>\r\n </td> -->\r\n <td >\r\n <span class=\"badge \" [ngClass]=\"flagData?.openTimeFlag ? 'badge-light-danger' : 'badge-light-success'\">{{flagData?.openTime}}</span>\r\n </td>\r\n <td >\r\n <span class=\"badge \" [ngClass]=\"flagData?.closeTimeFlag ? 'badge-light-danger' : 'badge-light-success'\">{{flagData?.closeTime}}</span>\r\n </td>\r\n\r\n <td>\r\n <div (click)=\"onView(flagData)\" class=\"table-title d-flex\"><span\r\n class=\"actionview me-4 cursor-pointer\">View</span>\r\n </div>\r\n </td>\r\n\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n </div>\r\n <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.storeopenandcloseData?.length\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"currentChecklist?.checkListType === 'mobileusagedetection'\" >\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.mobileusagedetectionData?.length\">\r\n <div class=\"table-responsive px-4\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('date')\">Date<svg\r\n [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\" >Store Name\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <!-- <th class=\"cursor-pointer\" (click)=\"sortData('storeSpocEmail')\" >Store SPOC\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeSpocEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeSpocEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th> -->\r\n <th class=\"cursor-pointer\" (click)=\"sortData('detections')\">Detections\r\n <svg\r\n [ngClass]=\"sortColumName === 'detections' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'detections' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th >Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let flagData of checklistFlagList?.mobileusagedetectionData\">\r\n \r\n <td>\r\n <div class=\"table-title\">{{flagData?.date}}</div>\r\n </td>\r\n <td class=\"table-title-primary\">\r\n <u class=\"cursor-pointer\" (click)=\"storeView(flagData.storeId)\">{{flagData?.storeName}}</u></td>\r\n <!-- <td >\r\n <div class=\"table-title\">{{flagData?.storeSpocEmail ? flagData?.storeSpocEmail : '--'}}\r\n </div>\r\n </td> -->\r\n <td>\r\n <div class=\"table-title\">{{flagData?.detections?.toLocaleString('en-IN')}}</div>\r\n </td>\r\n \r\n <td>\r\n <div (click)=\"onView(flagData)\" class=\"table-title d-flex\"><span\r\n class=\"actionview me-4 cursor-pointer\">View</span>\r\n </div>\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.mobileusagedetectionData?.length\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container> \r\n </ng-container>\r\n <ng-container *ngIf=\"currentChecklist?.checkListType === 'uniformdetection'\" >\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.uniformdetectionData?.length\">\r\n <div class=\"table-responsive px-4\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('date')\">Date<svg\r\n [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\" >Store Name\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <!-- <th class=\"cursor-pointer\" (click)=\"sortData('storeSpocEmail')\" >Store SPOC\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeSpocEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeSpocEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th> -->\r\n <th class=\"cursor-pointer\" (click)=\"sortData('detections')\">Detections\r\n <svg\r\n [ngClass]=\"sortColumName === 'detections' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'detections' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let flagData of checklistFlagList?.uniformdetectionData\">\r\n \r\n <td>\r\n <div class=\"table-title\">{{flagData?.date}}</div>\r\n </td>\r\n <td class=\"table-title-primary\">\r\n <u class=\"cursor-pointer\" (click)=\"storeView(flagData.storeId)\">{{flagData?.storeName}}</u></td>\r\n <!-- <td >\r\n <div class=\"table-title\">{{flagData?.storeSpocEmail ? flagData?.storeSpocEmail : '--'}}\r\n </div>\r\n </td> -->\r\n <td>\r\n <div class=\"table-title\">{{flagData?.detections?.toLocaleString('en-IN')}}</div>\r\n </td>\r\n \r\n <td>\r\n <div (click)=\"onView(flagData)\" class=\"table-title d-flex\"><span\r\n class=\"actionview me-4 cursor-pointer\">View</span>\r\n </div>\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.uniformdetectionData?.length\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container> \r\n </ng-container>\r\n <ng-container *ngIf=\"currentChecklist?.checkListType === 'customerunattended'\" >\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.customerunattendedData?.length\">\r\n <div class=\"table-responsive px-4\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('date')\">Date<svg\r\n [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\" >Store Name\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <!-- <th class=\"cursor-pointer\" (click)=\"sortData('storeSpocEmail')\" >Store SPOC\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeSpocEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeSpocEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th> -->\r\n <th class=\"cursor-pointer\" (click)=\"sortData('detections')\" >Detections\r\n <svg\r\n [ngClass]=\"sortColumName === 'detections' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'detections' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th >Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let flagData of checklistFlagList?.customerunattendedData\">\r\n \r\n <td>\r\n <div class=\"table-title\">{{flagData?.date}}</div>\r\n </td>\r\n <td class=\"table-title-primary\">\r\n <u class=\"cursor-pointer\" (click)=\"storeView(flagData.storeId)\">{{flagData?.storeName}}</u></td>\r\n <!-- <td >\r\n <div class=\"table-title\">{{flagData?.storeSpocEmail ? flagData?.storeSpocEmail : '--'}}\r\n </div>\r\n </td> -->\r\n <td>\r\n <div class=\"table-title\">{{flagData?.detections?.toLocaleString('en-IN')}}</div>\r\n </td>\r\n \r\n <td>\r\n <div (click)=\"onView(flagData)\" class=\"table-title d-flex\"><span\r\n class=\"actionview me-4 cursor-pointer\">View</span>\r\n </div>\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.customerunattendedData?.length\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container> \r\n </ng-container>\r\n <ng-container *ngIf=\"currentChecklist?.checkListType === 'staffleftinthemiddle'\" >\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.staffleftinthemiddleData?.length\">\r\n <div class=\"table-responsive px-4\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('date')\">Date<svg\r\n [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\" >Store Name\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <!-- <th class=\"cursor-pointer\" (click)=\"sortData('storeSpocEmail')\" >Store SPOC\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeSpocEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeSpocEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th> -->\r\n <th class=\"cursor-pointer\" (click)=\"sortData('detections')\">Detections\r\n <svg\r\n [ngClass]=\"sortColumName === 'detections' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'detections' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let flagData of checklistFlagList?.staffleftinthemiddleData\">\r\n \r\n <td>\r\n <div class=\"table-title\">{{flagData?.date}}</div>\r\n </td>\r\n <td class=\"table-title-primary\">\r\n <u class=\"cursor-pointer\" (click)=\"storeView(flagData.storeId)\">{{flagData?.storeName}}</u></td>\r\n <!-- <td >\r\n <div class=\"table-title\">{{flagData?.storeSpocEmail ? flagData?.storeSpocEmail : '--'}}\r\n </div>\r\n </td> -->\r\n <td>\r\n <div class=\"table-title\">{{flagData?.detections?.toLocaleString('en-IN')}}</div>\r\n </td>\r\n \r\n <td>\r\n <div (click)=\"onView(flagData)\" class=\"table-title d-flex\"><span\r\n class=\"actionview me-4 cursor-pointer\">View</span>\r\n </div>\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.staffleftinthemiddleData?.length\" >\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container> \r\n </ng-container>\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loading' || (flagsTableApiState | async) === 'initial'\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && !checklistFlagList?.customData?.length && !checklistFlagList?.storeopenandcloseData?.length\r\n && !checklistFlagList?.mobileusagedetectionData?.length && !checklistFlagList?.uniformdetectionData?.length && !checklistFlagList?.customerunattendedData?.length\r\n && !checklistFlagList?.staffleftinthemiddleData?.length\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Flags Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container> \r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div> \r\n </div>\r\n \r\n</div>", styles: [".table-title-primary{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-style:normal;font-weight:500!important;line-height:30px}.table-title{color:var(--Gray-500, #667085);font-size:14px;font-style:normal;font-weight:500!important;line-height:20px}.infocount{color:var(--Black, #101828);font-size:24px;font-style:normal;font-weight:600;line-height:32px;text-align:center}.percent-value{color:var(--Gray-500, #667085);text-align:center;font-size:16px;font-style:normal;font-weight:600;line-height:18px}.week-font{color:var(--Black, #101828);font-size:12px;font-style:normal;font-weight:400!important;line-height:18px}.subinfocard{border-radius:5.359px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;display:flex;padding:31px 12px;flex-direction:column;align-items:center;gap:24px;align-self:stretch}.avgcount{color:var(--Black, #101828);font-size:14px;font-style:normal;font-weight:400;line-height:20px}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.cardcount{color:var(--Black, #101828);font-size:30px;font-style:normal;font-weight:600;line-height:38px}.cardtext{color:var(--Black, #101828);font-size:18px;font-style:normal;font-weight:600;line-height:28px;text-align:center}.cardsubcount{color:var(--Black, #101828);font-size:20px;font-style:normal;font-weight:700;line-height:30px}.card-border{padding:8px;border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.actionview{color:var(--Gray-500, #667085);font-size:14px;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.grey-badge{border-radius:16px;background:var(--Gray-100, #F2F4F7);display:flex;padding:2px 8px;justify-content:center;align-items:center;color:var(--Gray-700, #344054);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.text-success{border-radius:16px;background:var(--Success-50, #ECFDF3);display:flex;padding:2px 8px 2px 6px;justify-content:center;align-items:center;gap:6px;color:var(--Success-500, #12B76A);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.checklistheading{color:var(--Gray-900, #101828);font-size:18px;font-style:normal;font-weight:600;line-height:28px}.checklisttext{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.totalinfocard{border-radius:5.359px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;display:flex;padding:16px 12px 24px;flex-direction:column;align-items:center;gap:24px;align-self:stretch}.headingcard{border-radius:4px;background:var(--Gray-50, #F9FAFB);display:flex;padding:8px;flex-direction:column;align-items:center;gap:4px;align-self:stretch;color:var(--Black, #101828);font-size:16px;font-style:normal;font-weight:500;line-height:24px}.no-border-custom-select{border:none!important;box-shadow:none!important}.summarycard{padding:8px;flex-direction:column;align-items:center;gap:16px;flex:1 0 0;border-radius:8px;background:var(--White, #FFF)}.staffcard{padding:8px;border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.unselected-dot{width:8px;height:8px;border-radius:4px;background:#daf1ff}.selected-dot{width:8px;height:8px;border-radius:4px;background:#009bf3}.header-card{padding:16px;border-radius:12px;background:#fff}.rotate{rotate:180deg;transition:1s}\n"], dependencies: [{ kind: "directive", type: i6$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: i3.CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: UnattendedPieChartComponent, selector: "lib-unattended-pie-chart", inputs: ["chartData", "chartId"] }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6$1.DatePipe, name: "date" }] });
8289
8291
  }
8290
8292
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlagsInfoComponent, decorators: [{
8291
8293
  type: Component,
8292
- args: [{ selector: 'lib-flags-info', template: "<div class=\"row\">\r\n <!-- header start -->\r\n <div class=\"col-md-12 mb-6 mt-4\">\r\n\r\n <ng-container *ngIf=\"(checkListsApiState | async) === 'loaded'\" >\r\n <div class=\"d-flex align-items-center justify-content-between header-card\">\r\n <div class=\"d-flex align-items-center\">\r\n <a (click)=\"onBack()\" class=\"d-flex align-items-center me-3 mt-1 cursor-pointer\">\r\n <span><svg width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_987_30898)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M27.8346 21.0001H16.168M16.168 21.0001L22.0013 26.8334M16.168 21.0001L22.0013 15.1667\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_987_30898\" x=\"0\" y=\"0\" width=\"44\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_987_30898\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_987_30898\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </a> \r\n <span class=\"mt-1 me-3 borderless-select\" style=\"min-width: 200px;\" >\r\n <!-- <lib-reactive-select [formControl]=\"checklistSelectControl\" [idField]=\"'sourceCheckList_id'\"\r\n [nameField]=\"'checkListName'\" [data]=\"checkLists\" class=\"w-100 \"\r\n style=\"border: none !important; box-shadow: none !important;\">\r\n <ng-template let-item>\r\n <div\r\n class=\"d-flex justify-content-between align-items-center no-border-custom-select\">\r\n <span>{{ item.label }}</span>\r\n <span class=\"d-flex align-items-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#101828\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-template>\r\n </lib-reactive-select> -->\r\n\r\n <lib-select [items]=\"checkLists\" [multi]=\"false\" [searchField]=\"'checkListName'\" [idField]=\"'sourceCheckList_id'\"\r\n (selected)=\"onChecklistSelect($event)\" [selectedValues]=\"[this.currentChecklist]\"></lib-select>\r\n\r\n </span>\r\n\r\n <div *ngIf=\"currentChecklist?.checkListType !== 'custom'\"\r\n class=\"d-flex align-items-center grey-badge me-3 my-3\">\r\n AI Manager\r\n </div>\r\n <div *ngIf=\"currentChecklist?.publish\" class=\"d-flex align-items-center text-success me-3 my-3\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\"\r\n fill=\"none\">\r\n <circle cx=\"4\" cy=\"4\" r=\"3\" fill=\"#12B76A\" />\r\n </svg> Active</span>\r\n </div>\r\n <div class=\"d-flex align-items-center me-3 checklisttext\"><span><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M13.3307 14V12.6667C13.3307 11.9594 13.0498 11.2811 12.5497 10.781C12.0496 10.281 11.3713 10 10.6641 10H5.33073C4.62349 10 3.94521 10.281 3.44511 10.781C2.94501 11.2811 2.66406 11.9594 2.66406 12.6667V14M10.6641 4.66667C10.6641 6.13943 9.47015 7.33333 7.9974 7.33333C6.52464 7.33333 5.33073 6.13943 5.33073 4.66667C5.33073 3.19391 6.52464 2 7.9974 2C9.47015 2 10.6641 3.19391 10.6641 4.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>{{currentChecklist?.createdByName}}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center me-3 checklisttext\"><span><svg class=\"mx-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 3H13.5C13.8978 3 14.2794 3.15804 14.5607 3.43934C14.842 3.72064 15 4.10218 15 4.5V15C15 15.3978 14.842 15.7794 14.5607 16.0607C14.2794 16.342 13.8978 16.5 13.5 16.5H4.5C4.10218 16.5 3.72064 16.342 3.43934 16.0607C3.15804 15.7794 3 15.3978 3 15V4.5C3 4.10218 3.15804 3.72064 3.43934 3.43934C3.72064 3.15804 4.10218 3 4.5 3H6M6.75 1.5H11.25C11.6642 1.5 12 1.83579 12 2.25V3.75C12 4.16421 11.6642 4.5 11.25 4.5H6.75C6.33579 4.5 6 4.16421 6 3.75V2.25C6 1.83579 6.33579 1.5 6.75 1.5Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>{{currentChecklist?.checkListType === 'custom' ? currentChecklist?.storeCount : headerData?.stores?.length}} Stores</span>\r\n </div>\r\n <div class=\"d-flex align-items-center me-3 checklisttext\"><span><svg class=\"mx-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 1.5V4.5M6 1.5V4.5M2.25 7.5H15.75M3.75 3H14.25C15.0784 3 15.75 3.67157 15.75 4.5V15C15.75 15.8284 15.0784 16.5 14.25 16.5H3.75C2.92157 16.5 2.25 15.8284 2.25 15V4.5C2.25 3.67157 2.92157 3 3.75 3Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>Repeats {{currentChecklist?.scheduleRepeatedType}}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center me-3 checklisttext\"><span><svg class=\"mx-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_987_30895)\">\r\n <path\r\n d=\"M9 4.5V9L12 10.5M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_987_30895\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>{{currentChecklist?.scheduleStartTime}} -\r\n {{currentChecklist?.scheduleEndTime}}</span>\r\n </div>\r\n </div> \r\n \r\n </div> \r\n </ng-container>\r\n \r\n \r\n <ng-container *ngIf=\"(checkListsApiState | async) === 'loading' || (checkListsApiState | async) === 'initial'\" >\r\n <div style=\"margin:0px; padding:0px; height:unset\" class=\"row loader d-flex justify-content-center align-items-center w-100\">\r\n <div style=\"height: unset; margin:unset; border-radius: 5px;\" class=\"shimmer w-100\">\r\n <div class=\"wrapper\">\r\n <div style=\"margin-top: unset;\" class=\"stroke animate title\"></div>\r\n <div style=\"margin-top: 5px;\" class=\"stroke animate link\"></div>\r\n <div style=\"margin-top: 5px;\" class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n </div>\r\n <!-- header end -->\r\n <!-- card start -->\r\n <ng-container >\r\n <!-- <div *ngIf=\"currentChecklist?.checkListType === 'custom' && (headerData?.stores?.length ?? 0) > 1\" class=\"col-md-12 my-2\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Total Assigned Stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customCards?.totalAssignedStores?.count === 0 ||\r\n flagCardValues?.customCards?.totalAssignedStores?.count) ?\r\n flagCardValues?.customCards?.totalAssignedStores?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.customCards?.totalAssignedStores?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customCards?.totalAssignedStores?.comparisonData === 0 ||\r\n flagCardTrends?.customCards?.totalAssignedStores?.comparisonData) ?\r\n flagCardTrends?.customCards?.totalAssignedStores?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Flag Incidents</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customCards?.flagIncidents?.count === 0 ||\r\n flagCardValues?.customCards?.flagIncidents?.count) ?\r\n flagCardValues?.customCards?.flagIncidents?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.customCards?.flagIncidents?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customCards?.flagIncidents?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customCards?.flagIncidents?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customCards?.flagIncidents?.comparisonData === 0 ||\r\n flagCardTrends?.customCards?.flagIncidents?.comparisonData) ?\r\n flagCardTrends?.customCards?.flagIncidents?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Compliance Rate</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customCards?.complianceRate?.count === 0 ||\r\n flagCardValues?.customCards?.complianceRate?.count) ?\r\n flagCardValues?.customCards?.complianceRate?.count?.toLocaleString('en-IN') : '--'}} %\r\n <div ><span *ngIf=\"flagCardTrends?.customCards?.complianceRate?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customCards?.complianceRate?.comparisonData === 0 ||\r\n flagCardTrends?.customCards?.complianceRate?.comparisonData) ?\r\n flagCardTrends?.customCards?.complianceRate?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div> -->\r\n <div *ngIf=\"currentChecklist?.checkListType === 'storeopenandclose' && (headerData?.stores?.length ?? 0) > 1\" class=\"col-md-12 my-2\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n <div class=\"col-3\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Total Flagged Stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.storeopenandcloseCards?.totalAssignedStores?.count === 0 ||\r\n flagCardValues?.storeopenandcloseCards?.totalAssignedStores?.count) ?\r\n flagCardValues?.storeopenandcloseCards?.totalAssignedStores?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.storeopenandcloseCards?.totalAssignedStores?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.storeopenandcloseCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.storeopenandcloseCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.storeopenandcloseCards?.totalAssignedStores?.comparisonData === 0 ||\r\n flagCardTrends?.storeopenandcloseCards?.totalAssignedStores?.comparisonData) ?\r\n flagCardTrends?.storeopenandcloseCards?.totalAssignedStores?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Late Open Stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.storeopenandcloseCards?.lateOpenStores?.count === 0 ||\r\n flagCardValues?.storeopenandcloseCards?.lateOpenStores?.count) ?\r\n flagCardValues?.storeopenandcloseCards?.lateOpenStores?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.storeopenandcloseCards?.lateOpenStores?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.storeopenandcloseCards?.lateOpenStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.storeopenandcloseCards?.lateOpenStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.storeopenandcloseCards?.lateOpenStores?.comparisonData === 0 ||\r\n flagCardTrends?.storeopenandcloseCards?.lateOpenStores?.comparisonData) ?\r\n flagCardTrends?.storeopenandcloseCards?.lateOpenStores?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Early Closed Stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.storeopenandcloseCards?.earlyClosedStores?.count === 0 ||\r\n flagCardValues?.storeopenandcloseCards?.earlyClosedStores?.count) ?\r\n flagCardValues?.storeopenandcloseCards?.earlyClosedStores?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.storeopenandcloseCards?.earlyClosedStores?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.storeopenandcloseCards?.earlyClosedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.storeopenandcloseCards?.earlyClosedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.storeopenandcloseCards?.earlyClosedStores?.comparisonData === 0 ||\r\n flagCardTrends?.storeopenandcloseCards?.earlyClosedStores?.comparisonData) ?\r\n flagCardTrends?.storeopenandcloseCards?.earlyClosedStores?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Compliance Rate</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.storeopenandcloseCards?.complianceRate?.rate === 0 ||\r\n flagCardValues?.storeopenandcloseCards?.complianceRate?.rate) ?\r\n flagCardValues?.storeopenandcloseCards?.complianceRate?.rate?.toLocaleString('en-IN') : '--'}} %\r\n <div ><span *ngIf=\"flagCardTrends?.storeopenandcloseCards?.complianceRate?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.storeopenandcloseCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.storeopenandcloseCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.storeopenandcloseCards?.complianceRate?.comparisonData === 0 ||\r\n flagCardTrends?.storeopenandcloseCards?.complianceRate?.comparisonData) ?\r\n flagCardTrends?.storeopenandcloseCards?.complianceRate?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div *ngIf=\"currentChecklist?.checkListType === 'mobileusagedetection' && (headerData?.stores?.length ?? 0) > 1\" class=\"col-md-12 my-2\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Total Flagged Stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.mobileusagedetectionCards?.totalAssignedStores?.count === 0 ||\r\n flagCardValues?.mobileusagedetectionCards?.totalAssignedStores?.count) ?\r\n flagCardValues?.mobileusagedetectionCards?.totalAssignedStores?.count?.toLocaleString('en-IN') : '--'}}\r\n <div><span *ngIf=\"flagCardTrends?.mobileusagedetectionCards?.totalAssignedStores?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.mobileusagedetectionCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.mobileusagedetectionCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.mobileusagedetectionCards?.totalAssignedStores?.comparisonData === 0 ||\r\n flagCardTrends?.mobileusagedetectionCards?.totalAssignedStores?.comparisonData) ?\r\n flagCardTrends?.mobileusagedetectionCards?.totalAssignedStores?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Flag Incidents</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.mobileusagedetectionCards?.flagIncidents?.count === 0 ||\r\n flagCardValues?.mobileusagedetectionCards?.flagIncidents?.count) ?\r\n flagCardValues?.mobileusagedetectionCards?.flagIncidents?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.mobileusagedetectionCards?.flagIncidents?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.mobileusagedetectionCards?.flagIncidents?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.mobileusagedetectionCards?.flagIncidents?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.mobileusagedetectionCards?.flagIncidents?.comparisonData === 0 ||\r\n flagCardTrends?.mobileusagedetectionCards?.flagIncidents?.comparisonData) ?\r\n flagCardTrends?.mobileusagedetectionCards?.flagIncidents?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Compliance Rate</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.mobileusagedetectionCards?.complianceRate?.rate === 0 ||\r\n flagCardValues?.mobileusagedetectionCards?.complianceRate?.rate) ?\r\n flagCardValues?.mobileusagedetectionCards?.complianceRate?.rate?.toLocaleString('en-IN') : '--'}} %\r\n <div ><span *ngIf=\"flagCardTrends?.mobileusagedetectionCards?.complianceRate?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.mobileusagedetectionCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.mobileusagedetectionCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.mobileusagedetectionCards?.complianceRate?.comparisonData === 0 ||\r\n flagCardTrends?.mobileusagedetectionCards?.complianceRate?.comparisonData) ?\r\n flagCardTrends?.mobileusagedetectionCards?.complianceRate?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div *ngIf=\"currentChecklist?.checkListType === 'uniformdetection' && (headerData?.stores?.length ?? 0) > 1\" class=\"col-md-12 my-2\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Total Flagged Stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.uniformdetectionCards?.totalAssignedStores?.count === 0 ||\r\n flagCardValues?.uniformdetectionCards?.totalAssignedStores?.count) ?\r\n flagCardValues?.uniformdetectionCards?.totalAssignedStores?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.comparisonData === 0 ||\r\n flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.comparisonData) ?\r\n flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Flag Incidents</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.uniformdetectionCards?.flagIncidents?.count === 0 ||\r\n flagCardValues?.uniformdetectionCards?.flagIncidents?.count) ?\r\n flagCardValues?.uniformdetectionCards?.flagIncidents?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.uniformdetectionCards?.flagIncidents?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.uniformdetectionCards?.flagIncidents?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.uniformdetectionCards?.flagIncidents?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.uniformdetectionCards?.flagIncidents?.comparisonData === 0 ||\r\n flagCardTrends?.uniformdetectionCards?.flagIncidents?.comparisonData) ?\r\n flagCardTrends?.uniformdetectionCards?.flagIncidents?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Compliance Rate</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.uniformdetectionCards?.complianceRate?.rate === 0 ||\r\n flagCardValues?.uniformdetectionCards?.complianceRate?.rate) ?\r\n flagCardValues?.uniformdetectionCards?.complianceRate?.rate?.toLocaleString('en-IN') : '--'}} %\r\n <div ><span *ngIf=\"flagCardTrends?.uniformdetectionCards?.complianceRate?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.uniformdetectionCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.uniformdetectionCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.uniformdetectionCards?.complianceRate?.comparisonData === 0 ||\r\n flagCardTrends?.uniformdetectionCards?.complianceRate?.comparisonData) ?\r\n flagCardTrends?.uniformdetectionCards?.complianceRate?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div *ngIf=\"currentChecklist?.checkListType === 'customerunattended' \" class=\"col-md-12\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n <div class=\"col-9\">\r\n <div class=\"row\">\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"> <span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Avg</span> Footfall</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customerunattendedCards?.averageFootfall?.count === 0 ||\r\n flagCardValues?.customerunattendedCards?.averageFootfall?.count) ?\r\n flagCardValues?.customerunattendedCards?.averageFootfall?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.customerunattendedCards?.averageFootfall?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customerunattendedCards?.averageFootfall?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customerunattendedCards?.averageFootfall?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customerunattendedCards?.averageFootfall?.comparisonData === 0 ||\r\n flagCardTrends?.customerunattendedCards?.averageFootfall?.comparisonData) ?\r\n flagCardTrends?.customerunattendedCards?.averageFootfall?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Avg</span> Staff to Customer Ratio</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customerunattendedCards?.stafftoCustomerRatio?.ratio === 0 ||\r\n flagCardValues?.customerunattendedCards?.stafftoCustomerRatio?.ratio) ?\r\n flagCardValues?.customerunattendedCards?.stafftoCustomerRatio?.ratio?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.customerunattendedCards?.stafftoCustomerRatio?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customerunattendedCards?.stafftoCustomerRatio?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customerunattendedCards?.stafftoCustomerRatio?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customerunattendedCards?.stafftoCustomerRatio?.comparisonData === 0 ||\r\n flagCardTrends?.customerunattendedCards?.stafftoCustomerRatio?.comparisonData) ?\r\n flagCardTrends?.customerunattendedCards?.stafftoCustomerRatio?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Avg</span> Attended Customers</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customerunattendedCards?.attendedCustomers?.count === 0 ||\r\n flagCardValues?.customerunattendedCards?.attendedCustomers?.count) ?\r\n flagCardValues?.customerunattendedCards?.attendedCustomers?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.customerunattendedCards?.attendedCustomers?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customerunattendedCards?.attendedCustomers?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customerunattendedCards?.attendedCustomers?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customerunattendedCards?.attendedCustomers?.comparisonData === 0 ||\r\n flagCardTrends?.customerunattendedCards?.attendedCustomers?.comparisonData) ?\r\n flagCardTrends?.customerunattendedCards?.attendedCustomers?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Avg</span> Unattended Customers</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-4\">\r\n {{(flagCardValues?.customerunattendedCards?.unattendedCustomers?.count === 0 ||\r\n flagCardValues?.customerunattendedCards?.unattendedCustomers?.count) ?\r\n flagCardValues?.customerunattendedCards?.unattendedCustomers?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.customerunattendedCards?.unattendedCustomers?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customerunattendedCards?.unattendedCustomers?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customerunattendedCards?.unattendedCustomers?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customerunattendedCards?.unattendedCustomers?.comparisonData === 0 ||\r\n flagCardTrends?.customerunattendedCards?.unattendedCustomers?.comparisonData) ?\r\n flagCardTrends?.customerunattendedCards?.unattendedCustomers?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\">Avg</span> Time Taken to Assist</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customerunattendedCards?.timeTakentoAssist?.mins === 0 ||\r\n flagCardValues?.customerunattendedCards?.timeTakentoAssist?.mins) ?\r\n flagCardValues?.customerunattendedCards?.timeTakentoAssist?.mins?.toLocaleString('en-IN') : '--'}}\r\n Mins\r\n <div ><span *ngIf=\"flagCardTrends?.customerunattendedCards?.timeTakentoAssist?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customerunattendedCards?.timeTakentoAssist?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customerunattendedCards?.timeTakentoAssist?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customerunattendedCards?.timeTakentoAssist?.comparisonData === 0 ||\r\n flagCardTrends?.customerunattendedCards?.timeTakentoAssist?.comparisonData) ?\r\n flagCardTrends?.customerunattendedCards?.timeTakentoAssist?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\">Avg</span> Time Spent with Customer</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customerunattendedCards?.timeSpentwithCustomer?.mins === 0 ||\r\n flagCardValues?.customerunattendedCards?.timeSpentwithCustomer?.mins) ?\r\n flagCardValues?.customerunattendedCards?.timeSpentwithCustomer?.mins?.toLocaleString('en-IN') : '--'}}\r\n Mins\r\n <div ><span *ngIf=\"flagCardTrends?.customerunattendedCards?.timeSpentwithCustomer?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customerunattendedCards?.timeSpentwithCustomer?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customerunattendedCards?.timeSpentwithCustomer?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customerunattendedCards?.timeSpentwithCustomer?.comparisonData === 0 ||\r\n flagCardTrends?.customerunattendedCards?.timeSpentwithCustomer?.comparisonData) ?\r\n flagCardTrends?.customerunattendedCards?.timeSpentwithCustomer?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"flagCardValues?.customerunattendedCards?.unattendedSummaryChart?.chart1?.length\" class=\"col-3 mb-6\">\r\n <div class=\"row h-100\">\r\n <div class=\"col-12 h-100\">\r\n <div class=\"summarycard h-100\">\r\n <div *ngIf=\"unattendedSummaryChartNumber === 1\" class=\"cardtext\">\r\n Attended Summary\r\n </div>\r\n <div *ngIf=\"unattendedSummaryChartNumber === 2\" class=\"cardtext\">\r\n Unattended Summary\r\n </div>\r\n <div *ngIf=\"unattendedSummaryChartNumber === 1\" >\r\n <lib-unattended-pie-chart\r\n [chartData]=\"flagCardValues?.customerunattendedCards?.unattendedSummaryChart?.chart2\" [chartId]=\"'chart-two'\"></lib-unattended-pie-chart>\r\n </div>\r\n <div *ngIf=\"unattendedSummaryChartNumber === 2\" >\r\n <lib-unattended-pie-chart\r\n [chartData]=\"flagCardValues?.customerunattendedCards?.unattendedSummaryChart?.chart1\" [chartId]=\"'chart-one'\"></lib-unattended-pie-chart>\r\n </div>\r\n \r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <span (click)=\"unattendedSummaryChartNumber = 1\" [ngClass]=\"unattendedSummaryChartNumber === 1 ? 'selected-dot' : 'unselected-dot'\" class=\"cursor-pointer me-4\" ></span>\r\n <span (click)=\"unattendedSummaryChartNumber = 2\" [ngClass]=\"unattendedSummaryChartNumber === 2 ? 'selected-dot' : 'unselected-dot'\" class=\"cursor-pointer\"></span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"currentChecklist?.checkListType === 'staffleftinthemiddle' \" class=\"col-md-12\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n \r\n <div class=\"row\">\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Average </span>Staff Present</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.staffleftinthemiddleCards?.avgStaffPresent?.count === 0 ||\r\n flagCardValues?.staffleftinthemiddleCards?.avgStaffPresent?.count) ?\r\n flagCardValues?.staffleftinthemiddleCards?.avgStaffPresent?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresent?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresent?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresent?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresent?.comparisonData === 0 ||\r\n flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresent?.comparisonData) ?\r\n flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresent?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Average </span>Staff left </span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.staffleftinthemiddleCards?.avgStaffleft?.count === 0 ||\r\n flagCardValues?.staffleftinthemiddleCards?.avgStaffleft?.count) ?\r\n flagCardValues?.staffleftinthemiddleCards?.avgStaffleft?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.avgStaffleft?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.avgStaffleft?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.staffleftinthemiddleCards?.avgStaffleft?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.staffleftinthemiddleCards?.avgStaffleft?.comparisonData === 0 ||\r\n flagCardTrends?.staffleftinthemiddleCards?.avgStaffleft?.comparisonData) ?\r\n flagCardTrends?.staffleftinthemiddleCards?.avgStaffleft?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"> <span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\">Avg </span>Staff Present In Peak Hours</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.rate === 0 ||\r\n flagCardValues?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.rate) ?\r\n flagCardValues?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.rate?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.comparisonData === 0 ||\r\n flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.comparisonData) ?\r\n flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"row \">\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"> Staff <span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\"> Avg</span> Punctuality Rate</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.rate === 0 ||\r\n flagCardValues?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.rate) ?\r\n flagCardValues?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.rate?.toLocaleString('en-IN') : '--'}} %\r\n <div ><span *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.comparisonData === 0 ||\r\n flagCardTrends?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.comparisonData) ?\r\n flagCardTrends?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Staff <span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Avg</span> Break Hours</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.staffleftinthemiddleCards?.staffAvgBreakHours?.mins === 0 ||\r\n flagCardValues?.staffleftinthemiddleCards?.staffAvgBreakHours?.mins) ?\r\n flagCardValues?.staffleftinthemiddleCards?.staffAvgBreakHours?.mins?.toLocaleString('en-IN') : '--'}}\r\n Mins\r\n <div ><span *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.staffAvgBreakHours?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.staffAvgBreakHours?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.staffleftinthemiddleCards?.staffAvgBreakHours?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.staffleftinthemiddleCards?.staffAvgBreakHours?.comparisonData === 0 ||\r\n flagCardTrends?.staffleftinthemiddleCards?.staffAvgBreakHours?.comparisonData) ?\r\n flagCardTrends?.staffleftinthemiddleCards?.staffAvgBreakHours?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Staff <span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Avg</span> Productive Hours</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.staffleftinthemiddleCards?.staffAvgProductiveHours?.mins === 0 ||\r\n flagCardValues?.staffleftinthemiddleCards?.staffAvgProductiveHours?.mins) ?\r\n flagCardValues?.staffleftinthemiddleCards?.staffAvgProductiveHours?.mins?.toLocaleString('en-IN') : '--'}}\r\n Mins\r\n <div ><span *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.staffAvgProductiveHours?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.staffAvgProductiveHours?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.staffleftinthemiddleCards?.staffAvgProductiveHours?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.staffleftinthemiddleCards?.staffAvgProductiveHours?.comparisonData === 0 ||\r\n flagCardTrends?.staffleftinthemiddleCards?.staffAvgProductiveHours?.comparisonData) ?\r\n flagCardTrends?.staffleftinthemiddleCards?.staffAvgProductiveHours?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n <!-- <ng-container *ngIf=\"(flagsCardValuesState | async) === 'loading' || (flagsCardValuesState | async) === 'initial'\">\r\n <div class=\"col-md-12 my-2\">\r\n <div class=\"card\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container> -->\r\n <!-- card end -->\r\n <!-- table start -->\r\n <div class=\"col-md-12 my-2\" >\r\n <div class=\" card\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"card-header border-0 pt-4 px-4\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Store Info</span>\r\n <span class=\"text-sub mb-2\"> Based on {{ headerData?.date?.startDate | date: 'MMM d' }} - {{\r\n headerData?.date?.endDate | date: 'MMM d, y' }}\r\n </span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon footfallsearch svg-icon-1 position-absolute ms-8\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\">\r\n </rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input [formControl]=\"searchInput\" type=\"text\"\r\n class=\"form-control ps-14 ms-4 footfallsearch\" placeholder=\"Search by Store Name\"\r\n autocomplete=\"off\" />\r\n <button (click)=\"exportTable()\" type=\"button\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader ms-4\">\r\n <!-- Export Icon -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <ng-container *ngIf=\"currentChecklist?.checkListType === 'custom'\" >\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.customData?.length\">\r\n <div class=\"table-responsive px-4\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('date_iso')\">Date<svg\r\n [ngClass]=\"sortColumName === 'date_iso' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date_iso' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\" >Store Name\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeSpocEmail')\" >Store SPOC\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeSpocEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeSpocEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('detections')\">No. of flags\r\n <svg\r\n [ngClass]=\"sortColumName === 'detections' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'detections' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let flagData of checklistFlagList?.customData\">\r\n \r\n <td>\r\n <div class=\"table-title\">{{flagData?.date}}</div>\r\n </td>\r\n <td class=\"table-title-primary\">\r\n <u class=\"cursor-pointer\" (click)=\"storeView(flagData.storeId)\" >{{flagData?.storeName}}</u></td>\r\n <td >\r\n <div class=\"table-title\">{{flagData?.storeSpocEmail ? flagData?.storeSpocEmail : '--'}}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex\">\r\n <div class=\"table-title\">{{flagData?.detections?.toLocaleString('en-IN')}}</div>\r\n <span *ngIf=\"flagData?.questionFlagCount\" class=\"badge badge-light-default mx-3\" >Questions</span> \r\n <span *ngIf=\"flagData?.timeFlagCount\" class=\"badge badge-light-default mx-3\" >Not Submitted</span> \r\n </div>\r\n \r\n </td>\r\n \r\n <td>\r\n <div class=\"table-title d-flex\">\r\n <span *ngIf=\"flagData?.checklistStatus === 'submit'\" (click)=\"onView(flagData)\" class=\"actionview me-4 cursor-pointer text-primary\">View</span>\r\n <span *ngIf=\"(flagData?.checklistStatus === 'inprogress' || flagData?.checklistStatus === 'open') && (flagData?.timeFlagCount ?? 0) > 0 \" (click)=\"reInitiate(flagData)\" [ngClass]=\" isToday(flagData.dateString) || flagData?.reinitiateStatus ? 'pe-none' : 'text-primary'\" class=\"actionview me-4 cursor-pointer\">Reinitiate</span>\r\n <span *ngIf=\"flagData?.checklistStatus === 'open' && !flagData?.timeFlagCount\" class=\" me-4 \">--</span>\r\n\r\n\r\n </div>\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.customData?.length\" >\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container> \r\n </ng-container>\r\n <ng-container *ngIf=\"currentChecklist?.checkListType === 'storeopenandclose'\" >\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.storeopenandcloseData?.length\">\r\n <div class=\"table-responsive px-4\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('date')\">Date<svg\r\n [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\" >Store Name\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <!-- <th class=\"cursor-pointer\" (click)=\"sortData('storeSpocEmail')\" >Store SPOC\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeSpocEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeSpocEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th> -->\r\n <th class=\"cursor-pointer\" (click)=\"sortData('openTime')\" >Open Time\r\n <svg\r\n [ngClass]=\"sortColumName === 'openTime' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'openTime' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('closeTime')\" >Close Time\r\n <svg\r\n [ngClass]=\"sortColumName === 'closeTime' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'closeTime' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let flagData of checklistFlagList?.storeopenandcloseData\">\r\n\r\n <td>\r\n <div class=\"table-title\">{{flagData?.date}}</div>\r\n </td>\r\n <td class=\"table-title-primary\">\r\n <u class=\"cursor-pointer\" (click)=\"storeView(flagData.storeId)\">{{flagData?.storeName}}</u></td>\r\n <!-- <td >\r\n <div class=\"table-title\">{{flagData?.storeSpocEmail ? flagData?.storeSpocEmail : '--'}}\r\n </div>\r\n </td> -->\r\n <td >\r\n <span class=\"badge \" [ngClass]=\"flagData?.openTimeFlag ? 'badge-light-danger' : 'badge-light-success'\">{{flagData?.openTime}}</span>\r\n </td>\r\n <td >\r\n <span class=\"badge \" [ngClass]=\"flagData?.closeTimeFlag ? 'badge-light-danger' : 'badge-light-success'\">{{flagData?.closeTime}}</span>\r\n </td>\r\n\r\n <td>\r\n <div (click)=\"onView(flagData)\" class=\"table-title d-flex\"><span\r\n class=\"actionview me-4 cursor-pointer\">View</span>\r\n </div>\r\n </td>\r\n\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n </div>\r\n <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.storeopenandcloseData?.length\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"currentChecklist?.checkListType === 'mobileusagedetection'\" >\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.mobileusagedetectionData?.length\">\r\n <div class=\"table-responsive px-4\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('date')\">Date<svg\r\n [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\" >Store Name\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <!-- <th class=\"cursor-pointer\" (click)=\"sortData('storeSpocEmail')\" >Store SPOC\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeSpocEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeSpocEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th> -->\r\n <th class=\"cursor-pointer\" (click)=\"sortData('detections')\">Detections\r\n <svg\r\n [ngClass]=\"sortColumName === 'detections' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'detections' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th >Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let flagData of checklistFlagList?.mobileusagedetectionData\">\r\n \r\n <td>\r\n <div class=\"table-title\">{{flagData?.date}}</div>\r\n </td>\r\n <td class=\"table-title-primary\">\r\n <u class=\"cursor-pointer\" (click)=\"storeView(flagData.storeId)\">{{flagData?.storeName}}</u></td>\r\n <!-- <td >\r\n <div class=\"table-title\">{{flagData?.storeSpocEmail ? flagData?.storeSpocEmail : '--'}}\r\n </div>\r\n </td> -->\r\n <td>\r\n <div class=\"table-title\">{{flagData?.detections?.toLocaleString('en-IN')}}</div>\r\n </td>\r\n \r\n <td>\r\n <div (click)=\"onView(flagData)\" class=\"table-title d-flex\"><span\r\n class=\"actionview me-4 cursor-pointer\">View</span>\r\n </div>\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.mobileusagedetectionData?.length\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container> \r\n </ng-container>\r\n <ng-container *ngIf=\"currentChecklist?.checkListType === 'uniformdetection'\" >\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.uniformdetectionData?.length\">\r\n <div class=\"table-responsive px-4\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('date')\">Date<svg\r\n [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\" >Store Name\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <!-- <th class=\"cursor-pointer\" (click)=\"sortData('storeSpocEmail')\" >Store SPOC\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeSpocEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeSpocEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th> -->\r\n <th class=\"cursor-pointer\" (click)=\"sortData('detections')\">Detections\r\n <svg\r\n [ngClass]=\"sortColumName === 'detections' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'detections' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let flagData of checklistFlagList?.uniformdetectionData\">\r\n \r\n <td>\r\n <div class=\"table-title\">{{flagData?.date}}</div>\r\n </td>\r\n <td class=\"table-title-primary\">\r\n <u class=\"cursor-pointer\" (click)=\"storeView(flagData.storeId)\">{{flagData?.storeName}}</u></td>\r\n <!-- <td >\r\n <div class=\"table-title\">{{flagData?.storeSpocEmail ? flagData?.storeSpocEmail : '--'}}\r\n </div>\r\n </td> -->\r\n <td>\r\n <div class=\"table-title\">{{flagData?.detections?.toLocaleString('en-IN')}}</div>\r\n </td>\r\n \r\n <td>\r\n <div (click)=\"onView(flagData)\" class=\"table-title d-flex\"><span\r\n class=\"actionview me-4 cursor-pointer\">View</span>\r\n </div>\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.uniformdetectionData?.length\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container> \r\n </ng-container>\r\n <ng-container *ngIf=\"currentChecklist?.checkListType === 'customerunattended'\" >\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.customerunattendedData?.length\">\r\n <div class=\"table-responsive px-4\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('date')\">Date<svg\r\n [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\" >Store Name\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <!-- <th class=\"cursor-pointer\" (click)=\"sortData('storeSpocEmail')\" >Store SPOC\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeSpocEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeSpocEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th> -->\r\n <th class=\"cursor-pointer\" (click)=\"sortData('detections')\" >Detections\r\n <svg\r\n [ngClass]=\"sortColumName === 'detections' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'detections' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th >Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let flagData of checklistFlagList?.customerunattendedData\">\r\n \r\n <td>\r\n <div class=\"table-title\">{{flagData?.date}}</div>\r\n </td>\r\n <td class=\"table-title-primary\">\r\n <u class=\"cursor-pointer\" (click)=\"storeView(flagData.storeId)\">{{flagData?.storeName}}</u></td>\r\n <!-- <td >\r\n <div class=\"table-title\">{{flagData?.storeSpocEmail ? flagData?.storeSpocEmail : '--'}}\r\n </div>\r\n </td> -->\r\n <td>\r\n <div class=\"table-title\">{{flagData?.detections?.toLocaleString('en-IN')}}</div>\r\n </td>\r\n \r\n <td>\r\n <div (click)=\"onView(flagData)\" class=\"table-title d-flex\"><span\r\n class=\"actionview me-4 cursor-pointer\">View</span>\r\n </div>\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.customerunattendedData?.length\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container> \r\n </ng-container>\r\n <ng-container *ngIf=\"currentChecklist?.checkListType === 'staffleftinthemiddle'\" >\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.staffleftinthemiddleData?.length\">\r\n <div class=\"table-responsive px-4\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('date')\">Date<svg\r\n [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\" >Store Name\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <!-- <th class=\"cursor-pointer\" (click)=\"sortData('storeSpocEmail')\" >Store SPOC\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeSpocEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeSpocEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th> -->\r\n <th class=\"cursor-pointer\" (click)=\"sortData('detections')\">Detections\r\n <svg\r\n [ngClass]=\"sortColumName === 'detections' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'detections' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let flagData of checklistFlagList?.staffleftinthemiddleData\">\r\n \r\n <td>\r\n <div class=\"table-title\">{{flagData?.date}}</div>\r\n </td>\r\n <td class=\"table-title-primary\">\r\n <u class=\"cursor-pointer\" (click)=\"storeView(flagData.storeId)\">{{flagData?.storeName}}</u></td>\r\n <!-- <td >\r\n <div class=\"table-title\">{{flagData?.storeSpocEmail ? flagData?.storeSpocEmail : '--'}}\r\n </div>\r\n </td> -->\r\n <td>\r\n <div class=\"table-title\">{{flagData?.detections?.toLocaleString('en-IN')}}</div>\r\n </td>\r\n \r\n <td>\r\n <div (click)=\"onView(flagData)\" class=\"table-title d-flex\"><span\r\n class=\"actionview me-4 cursor-pointer\">View</span>\r\n </div>\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.staffleftinthemiddleData?.length\" >\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container> \r\n </ng-container>\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loading' || (flagsTableApiState | async) === 'initial'\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && !checklistFlagList?.customData?.length && !checklistFlagList?.storeopenandcloseData?.length\r\n && !checklistFlagList?.mobileusagedetectionData?.length && !checklistFlagList?.uniformdetectionData?.length && !checklistFlagList?.customerunattendedData?.length\r\n && !checklistFlagList?.staffleftinthemiddleData?.length\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Flags Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container> \r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div> \r\n </div>\r\n \r\n</div>", styles: [".table-title-primary{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-style:normal;font-weight:500!important;line-height:30px}.table-title{color:var(--Gray-500, #667085);font-size:14px;font-style:normal;font-weight:500!important;line-height:20px}.infocount{color:var(--Black, #101828);font-size:24px;font-style:normal;font-weight:600;line-height:32px;text-align:center}.percent-value{color:var(--Gray-500, #667085);text-align:center;font-size:16px;font-style:normal;font-weight:600;line-height:18px}.week-font{color:var(--Black, #101828);font-size:12px;font-style:normal;font-weight:400!important;line-height:18px}.subinfocard{border-radius:5.359px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;display:flex;padding:31px 12px;flex-direction:column;align-items:center;gap:24px;align-self:stretch}.avgcount{color:var(--Black, #101828);font-size:14px;font-style:normal;font-weight:400;line-height:20px}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.cardcount{color:var(--Black, #101828);font-size:30px;font-style:normal;font-weight:600;line-height:38px}.cardtext{color:var(--Black, #101828);font-size:18px;font-style:normal;font-weight:600;line-height:28px;text-align:center}.cardsubcount{color:var(--Black, #101828);font-size:20px;font-style:normal;font-weight:700;line-height:30px}.card-border{padding:8px;border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.actionview{color:var(--Gray-500, #667085);font-size:14px;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.grey-badge{border-radius:16px;background:var(--Gray-100, #F2F4F7);display:flex;padding:2px 8px;justify-content:center;align-items:center;color:var(--Gray-700, #344054);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.text-success{border-radius:16px;background:var(--Success-50, #ECFDF3);display:flex;padding:2px 8px 2px 6px;justify-content:center;align-items:center;gap:6px;color:var(--Success-500, #12B76A);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.checklistheading{color:var(--Gray-900, #101828);font-size:18px;font-style:normal;font-weight:600;line-height:28px}.checklisttext{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.totalinfocard{border-radius:5.359px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;display:flex;padding:16px 12px 24px;flex-direction:column;align-items:center;gap:24px;align-self:stretch}.headingcard{border-radius:4px;background:var(--Gray-50, #F9FAFB);display:flex;padding:8px;flex-direction:column;align-items:center;gap:4px;align-self:stretch;color:var(--Black, #101828);font-size:16px;font-style:normal;font-weight:500;line-height:24px}.no-border-custom-select{border:none!important;box-shadow:none!important}.summarycard{padding:8px;flex-direction:column;align-items:center;gap:16px;flex:1 0 0;border-radius:8px;background:var(--White, #FFF)}.staffcard{padding:8px;border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.unselected-dot{width:8px;height:8px;border-radius:4px;background:#daf1ff}.selected-dot{width:8px;height:8px;border-radius:4px;background:#009bf3}.header-card{padding:16px;border-radius:12px;background:#fff}.rotate{rotate:180deg;transition:1s}\n"] }]
8294
+ args: [{ selector: 'lib-flags-info', template: "<div class=\"row\">\r\n <!-- header start -->\r\n <div class=\"col-md-12 mb-6 mt-4\">\r\n\r\n <ng-container *ngIf=\"(checkListsApiState | async) === 'loaded'\" >\r\n <div class=\"d-flex align-items-center justify-content-between header-card\">\r\n <div class=\"d-flex align-items-center\">\r\n <a (click)=\"onBack()\" class=\"d-flex align-items-center me-3 mt-1 cursor-pointer\">\r\n <span><svg width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_987_30898)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M27.8346 21.0001H16.168M16.168 21.0001L22.0013 26.8334M16.168 21.0001L22.0013 15.1667\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_987_30898\" x=\"0\" y=\"0\" width=\"44\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_987_30898\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_987_30898\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </a> \r\n <span class=\"mt-1 me-3 borderless-select\" style=\"min-width: 200px;\" >\r\n <!-- <lib-reactive-select [formControl]=\"checklistSelectControl\" [idField]=\"'sourceCheckList_id'\"\r\n [nameField]=\"'checkListName'\" [data]=\"checkLists\" class=\"w-100 \"\r\n style=\"border: none !important; box-shadow: none !important;\">\r\n <ng-template let-item>\r\n <div\r\n class=\"d-flex justify-content-between align-items-center no-border-custom-select\">\r\n <span>{{ item.label }}</span>\r\n <span class=\"d-flex align-items-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#101828\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-template>\r\n </lib-reactive-select> -->\r\n\r\n <lib-select [items]=\"checkLists\" [multi]=\"false\" [searchField]=\"'checkListName'\" [idField]=\"'sourceCheckList_id'\"\r\n (selected)=\"onChecklistSelect($event)\" [selectedValues]=\"[this.currentChecklist]\"></lib-select>\r\n\r\n </span>\r\n\r\n <ng-container *ngIf=\"checklistFlagList\" >\r\n <div *ngIf=\"currentChecklist?.checkListType !== 'custom'\"\r\n class=\"d-flex align-items-center grey-badge me-3 my-3\">\r\n AI Manager\r\n </div>\r\n <div *ngIf=\"currentChecklist?.publish\" class=\"d-flex align-items-center text-success me-3 my-3\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\"\r\n fill=\"none\">\r\n <circle cx=\"4\" cy=\"4\" r=\"3\" fill=\"#12B76A\" />\r\n </svg> Active</span>\r\n </div>\r\n <div class=\"d-flex align-items-center me-3 checklisttext\"><span><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M13.3307 14V12.6667C13.3307 11.9594 13.0498 11.2811 12.5497 10.781C12.0496 10.281 11.3713 10 10.6641 10H5.33073C4.62349 10 3.94521 10.281 3.44511 10.781C2.94501 11.2811 2.66406 11.9594 2.66406 12.6667V14M10.6641 4.66667C10.6641 6.13943 9.47015 7.33333 7.9974 7.33333C6.52464 7.33333 5.33073 6.13943 5.33073 4.66667C5.33073 3.19391 6.52464 2 7.9974 2C9.47015 2 10.6641 3.19391 10.6641 4.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>{{currentChecklist?.createdByName}}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center me-3 checklisttext\"><span><svg class=\"mx-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 3H13.5C13.8978 3 14.2794 3.15804 14.5607 3.43934C14.842 3.72064 15 4.10218 15 4.5V15C15 15.3978 14.842 15.7794 14.5607 16.0607C14.2794 16.342 13.8978 16.5 13.5 16.5H4.5C4.10218 16.5 3.72064 16.342 3.43934 16.0607C3.15804 15.7794 3 15.3978 3 15V4.5C3 4.10218 3.15804 3.72064 3.43934 3.43934C3.72064 3.15804 4.10218 3 4.5 3H6M6.75 1.5H11.25C11.6642 1.5 12 1.83579 12 2.25V3.75C12 4.16421 11.6642 4.5 11.25 4.5H6.75C6.33579 4.5 6 4.16421 6 3.75V2.25C6 1.83579 6.33579 1.5 6.75 1.5Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>{{currentChecklist?.checkListType === 'custom' ? currentChecklist?.storeCount : headerData?.stores?.length}} Stores</span>\r\n </div>\r\n <div class=\"d-flex align-items-center me-3 checklisttext\"><span><svg class=\"mx-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 1.5V4.5M6 1.5V4.5M2.25 7.5H15.75M3.75 3H14.25C15.0784 3 15.75 3.67157 15.75 4.5V15C15.75 15.8284 15.0784 16.5 14.25 16.5H3.75C2.92157 16.5 2.25 15.8284 2.25 15V4.5C2.25 3.67157 2.92157 3 3.75 3Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>Repeats {{currentChecklist?.scheduleRepeatedType}}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center me-3 checklisttext\"><span><svg class=\"mx-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_987_30895)\">\r\n <path\r\n d=\"M9 4.5V9L12 10.5M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_987_30895\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>{{currentChecklist?.scheduleStartTime}} -\r\n {{currentChecklist?.scheduleEndTime}}</span>\r\n </div>\r\n </ng-container>\r\n \r\n </div> \r\n \r\n </div> \r\n </ng-container>\r\n \r\n \r\n <ng-container *ngIf=\"(checkListsApiState | async) === 'loading' || (checkListsApiState | async) === 'initial'\" >\r\n <div style=\"margin:0px; padding:0px; height:unset\" class=\"row loader d-flex justify-content-center align-items-center w-100\">\r\n <div style=\"height: unset; margin:unset; border-radius: 5px;\" class=\"shimmer w-100\">\r\n <div class=\"wrapper\">\r\n <div style=\"margin-top: unset;\" class=\"stroke animate title\"></div>\r\n <div style=\"margin-top: 5px;\" class=\"stroke animate link\"></div>\r\n <div style=\"margin-top: 5px;\" class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n </div>\r\n <!-- header end -->\r\n <!-- card start -->\r\n <ng-container >\r\n <!-- <div *ngIf=\"currentChecklist?.checkListType === 'custom' && (headerData?.stores?.length ?? 0) > 1\" class=\"col-md-12 my-2\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Total Assigned Stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customCards?.totalAssignedStores?.count === 0 ||\r\n flagCardValues?.customCards?.totalAssignedStores?.count) ?\r\n flagCardValues?.customCards?.totalAssignedStores?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.customCards?.totalAssignedStores?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customCards?.totalAssignedStores?.comparisonData === 0 ||\r\n flagCardTrends?.customCards?.totalAssignedStores?.comparisonData) ?\r\n flagCardTrends?.customCards?.totalAssignedStores?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Flag Incidents</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customCards?.flagIncidents?.count === 0 ||\r\n flagCardValues?.customCards?.flagIncidents?.count) ?\r\n flagCardValues?.customCards?.flagIncidents?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.customCards?.flagIncidents?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customCards?.flagIncidents?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customCards?.flagIncidents?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customCards?.flagIncidents?.comparisonData === 0 ||\r\n flagCardTrends?.customCards?.flagIncidents?.comparisonData) ?\r\n flagCardTrends?.customCards?.flagIncidents?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Compliance Rate</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customCards?.complianceRate?.count === 0 ||\r\n flagCardValues?.customCards?.complianceRate?.count) ?\r\n flagCardValues?.customCards?.complianceRate?.count?.toLocaleString('en-IN') : '--'}} %\r\n <div ><span *ngIf=\"flagCardTrends?.customCards?.complianceRate?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customCards?.complianceRate?.comparisonData === 0 ||\r\n flagCardTrends?.customCards?.complianceRate?.comparisonData) ?\r\n flagCardTrends?.customCards?.complianceRate?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div> -->\r\n <div *ngIf=\"currentChecklist?.checkListType === 'storeopenandclose' && (headerData?.stores?.length ?? 0) > 1\" class=\"col-md-12 my-2\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n <div class=\"col-3\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Total Flagged Stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.storeopenandcloseCards?.totalAssignedStores?.count === 0 ||\r\n flagCardValues?.storeopenandcloseCards?.totalAssignedStores?.count) ?\r\n flagCardValues?.storeopenandcloseCards?.totalAssignedStores?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.storeopenandcloseCards?.totalAssignedStores?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.storeopenandcloseCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.storeopenandcloseCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.storeopenandcloseCards?.totalAssignedStores?.comparisonData === 0 ||\r\n flagCardTrends?.storeopenandcloseCards?.totalAssignedStores?.comparisonData) ?\r\n flagCardTrends?.storeopenandcloseCards?.totalAssignedStores?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Late Open Stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.storeopenandcloseCards?.lateOpenStores?.count === 0 ||\r\n flagCardValues?.storeopenandcloseCards?.lateOpenStores?.count) ?\r\n flagCardValues?.storeopenandcloseCards?.lateOpenStores?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.storeopenandcloseCards?.lateOpenStores?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.storeopenandcloseCards?.lateOpenStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.storeopenandcloseCards?.lateOpenStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.storeopenandcloseCards?.lateOpenStores?.comparisonData === 0 ||\r\n flagCardTrends?.storeopenandcloseCards?.lateOpenStores?.comparisonData) ?\r\n flagCardTrends?.storeopenandcloseCards?.lateOpenStores?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Early Closed Stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.storeopenandcloseCards?.earlyClosedStores?.count === 0 ||\r\n flagCardValues?.storeopenandcloseCards?.earlyClosedStores?.count) ?\r\n flagCardValues?.storeopenandcloseCards?.earlyClosedStores?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.storeopenandcloseCards?.earlyClosedStores?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.storeopenandcloseCards?.earlyClosedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.storeopenandcloseCards?.earlyClosedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.storeopenandcloseCards?.earlyClosedStores?.comparisonData === 0 ||\r\n flagCardTrends?.storeopenandcloseCards?.earlyClosedStores?.comparisonData) ?\r\n flagCardTrends?.storeopenandcloseCards?.earlyClosedStores?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Compliance Rate</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.storeopenandcloseCards?.complianceRate?.rate === 0 ||\r\n flagCardValues?.storeopenandcloseCards?.complianceRate?.rate) ?\r\n flagCardValues?.storeopenandcloseCards?.complianceRate?.rate?.toLocaleString('en-IN') : '--'}} %\r\n <div ><span *ngIf=\"flagCardTrends?.storeopenandcloseCards?.complianceRate?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.storeopenandcloseCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.storeopenandcloseCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.storeopenandcloseCards?.complianceRate?.comparisonData === 0 ||\r\n flagCardTrends?.storeopenandcloseCards?.complianceRate?.comparisonData) ?\r\n flagCardTrends?.storeopenandcloseCards?.complianceRate?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div *ngIf=\"currentChecklist?.checkListType === 'mobileusagedetection' && (headerData?.stores?.length ?? 0) > 1\" class=\"col-md-12 my-2\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Total Flagged Stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.mobileusagedetectionCards?.totalAssignedStores?.count === 0 ||\r\n flagCardValues?.mobileusagedetectionCards?.totalAssignedStores?.count) ?\r\n flagCardValues?.mobileusagedetectionCards?.totalAssignedStores?.count?.toLocaleString('en-IN') : '--'}}\r\n <div><span *ngIf=\"flagCardTrends?.mobileusagedetectionCards?.totalAssignedStores?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.mobileusagedetectionCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.mobileusagedetectionCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.mobileusagedetectionCards?.totalAssignedStores?.comparisonData === 0 ||\r\n flagCardTrends?.mobileusagedetectionCards?.totalAssignedStores?.comparisonData) ?\r\n flagCardTrends?.mobileusagedetectionCards?.totalAssignedStores?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Flag Incidents</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.mobileusagedetectionCards?.flagIncidents?.count === 0 ||\r\n flagCardValues?.mobileusagedetectionCards?.flagIncidents?.count) ?\r\n flagCardValues?.mobileusagedetectionCards?.flagIncidents?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.mobileusagedetectionCards?.flagIncidents?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.mobileusagedetectionCards?.flagIncidents?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.mobileusagedetectionCards?.flagIncidents?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.mobileusagedetectionCards?.flagIncidents?.comparisonData === 0 ||\r\n flagCardTrends?.mobileusagedetectionCards?.flagIncidents?.comparisonData) ?\r\n flagCardTrends?.mobileusagedetectionCards?.flagIncidents?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Compliance Rate</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.mobileusagedetectionCards?.complianceRate?.rate === 0 ||\r\n flagCardValues?.mobileusagedetectionCards?.complianceRate?.rate) ?\r\n flagCardValues?.mobileusagedetectionCards?.complianceRate?.rate?.toLocaleString('en-IN') : '--'}} %\r\n <div ><span *ngIf=\"flagCardTrends?.mobileusagedetectionCards?.complianceRate?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.mobileusagedetectionCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.mobileusagedetectionCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.mobileusagedetectionCards?.complianceRate?.comparisonData === 0 ||\r\n flagCardTrends?.mobileusagedetectionCards?.complianceRate?.comparisonData) ?\r\n flagCardTrends?.mobileusagedetectionCards?.complianceRate?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div *ngIf=\"currentChecklist?.checkListType === 'uniformdetection' && (headerData?.stores?.length ?? 0) > 1\" class=\"col-md-12 my-2\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Total Flagged Stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.uniformdetectionCards?.totalAssignedStores?.count === 0 ||\r\n flagCardValues?.uniformdetectionCards?.totalAssignedStores?.count) ?\r\n flagCardValues?.uniformdetectionCards?.totalAssignedStores?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.comparisonData === 0 ||\r\n flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.comparisonData) ?\r\n flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Flag Incidents</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.uniformdetectionCards?.flagIncidents?.count === 0 ||\r\n flagCardValues?.uniformdetectionCards?.flagIncidents?.count) ?\r\n flagCardValues?.uniformdetectionCards?.flagIncidents?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.uniformdetectionCards?.flagIncidents?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.uniformdetectionCards?.flagIncidents?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.uniformdetectionCards?.flagIncidents?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.uniformdetectionCards?.flagIncidents?.comparisonData === 0 ||\r\n flagCardTrends?.uniformdetectionCards?.flagIncidents?.comparisonData) ?\r\n flagCardTrends?.uniformdetectionCards?.flagIncidents?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Compliance Rate</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.uniformdetectionCards?.complianceRate?.rate === 0 ||\r\n flagCardValues?.uniformdetectionCards?.complianceRate?.rate) ?\r\n flagCardValues?.uniformdetectionCards?.complianceRate?.rate?.toLocaleString('en-IN') : '--'}} %\r\n <div ><span *ngIf=\"flagCardTrends?.uniformdetectionCards?.complianceRate?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.uniformdetectionCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.uniformdetectionCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.uniformdetectionCards?.complianceRate?.comparisonData === 0 ||\r\n flagCardTrends?.uniformdetectionCards?.complianceRate?.comparisonData) ?\r\n flagCardTrends?.uniformdetectionCards?.complianceRate?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div *ngIf=\"currentChecklist?.checkListType === 'customerunattended' \" class=\"col-md-12\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n <div class=\"col-9\">\r\n <div class=\"row\">\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"> <span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Avg</span> Footfall</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customerunattendedCards?.averageFootfall?.count === 0 ||\r\n flagCardValues?.customerunattendedCards?.averageFootfall?.count) ?\r\n flagCardValues?.customerunattendedCards?.averageFootfall?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.customerunattendedCards?.averageFootfall?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customerunattendedCards?.averageFootfall?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customerunattendedCards?.averageFootfall?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customerunattendedCards?.averageFootfall?.comparisonData === 0 ||\r\n flagCardTrends?.customerunattendedCards?.averageFootfall?.comparisonData) ?\r\n flagCardTrends?.customerunattendedCards?.averageFootfall?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Avg</span> Staff to Customer Ratio</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customerunattendedCards?.stafftoCustomerRatio?.ratio === 0 ||\r\n flagCardValues?.customerunattendedCards?.stafftoCustomerRatio?.ratio) ?\r\n flagCardValues?.customerunattendedCards?.stafftoCustomerRatio?.ratio?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.customerunattendedCards?.stafftoCustomerRatio?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customerunattendedCards?.stafftoCustomerRatio?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customerunattendedCards?.stafftoCustomerRatio?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customerunattendedCards?.stafftoCustomerRatio?.comparisonData === 0 ||\r\n flagCardTrends?.customerunattendedCards?.stafftoCustomerRatio?.comparisonData) ?\r\n flagCardTrends?.customerunattendedCards?.stafftoCustomerRatio?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Avg</span> Attended Customers</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customerunattendedCards?.attendedCustomers?.count === 0 ||\r\n flagCardValues?.customerunattendedCards?.attendedCustomers?.count) ?\r\n flagCardValues?.customerunattendedCards?.attendedCustomers?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.customerunattendedCards?.attendedCustomers?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customerunattendedCards?.attendedCustomers?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customerunattendedCards?.attendedCustomers?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customerunattendedCards?.attendedCustomers?.comparisonData === 0 ||\r\n flagCardTrends?.customerunattendedCards?.attendedCustomers?.comparisonData) ?\r\n flagCardTrends?.customerunattendedCards?.attendedCustomers?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Avg</span> Unattended Customers</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-4\">\r\n {{(flagCardValues?.customerunattendedCards?.unattendedCustomers?.count === 0 ||\r\n flagCardValues?.customerunattendedCards?.unattendedCustomers?.count) ?\r\n flagCardValues?.customerunattendedCards?.unattendedCustomers?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.customerunattendedCards?.unattendedCustomers?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customerunattendedCards?.unattendedCustomers?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customerunattendedCards?.unattendedCustomers?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customerunattendedCards?.unattendedCustomers?.comparisonData === 0 ||\r\n flagCardTrends?.customerunattendedCards?.unattendedCustomers?.comparisonData) ?\r\n flagCardTrends?.customerunattendedCards?.unattendedCustomers?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\">Avg</span> Time Taken to Assist</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customerunattendedCards?.timeTakentoAssist?.mins === 0 ||\r\n flagCardValues?.customerunattendedCards?.timeTakentoAssist?.mins) ?\r\n flagCardValues?.customerunattendedCards?.timeTakentoAssist?.mins?.toLocaleString('en-IN') : '--'}}\r\n Mins\r\n <div ><span *ngIf=\"flagCardTrends?.customerunattendedCards?.timeTakentoAssist?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customerunattendedCards?.timeTakentoAssist?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customerunattendedCards?.timeTakentoAssist?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customerunattendedCards?.timeTakentoAssist?.comparisonData === 0 ||\r\n flagCardTrends?.customerunattendedCards?.timeTakentoAssist?.comparisonData) ?\r\n flagCardTrends?.customerunattendedCards?.timeTakentoAssist?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\">Avg</span> Time Spent with Customer</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customerunattendedCards?.timeSpentwithCustomer?.mins === 0 ||\r\n flagCardValues?.customerunattendedCards?.timeSpentwithCustomer?.mins) ?\r\n flagCardValues?.customerunattendedCards?.timeSpentwithCustomer?.mins?.toLocaleString('en-IN') : '--'}}\r\n Mins\r\n <div ><span *ngIf=\"flagCardTrends?.customerunattendedCards?.timeSpentwithCustomer?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customerunattendedCards?.timeSpentwithCustomer?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customerunattendedCards?.timeSpentwithCustomer?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customerunattendedCards?.timeSpentwithCustomer?.comparisonData === 0 ||\r\n flagCardTrends?.customerunattendedCards?.timeSpentwithCustomer?.comparisonData) ?\r\n flagCardTrends?.customerunattendedCards?.timeSpentwithCustomer?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"flagCardValues?.customerunattendedCards?.unattendedSummaryChart?.chart1?.length\" class=\"col-3 mb-6\">\r\n <div class=\"row h-100\">\r\n <div class=\"col-12 h-100\">\r\n <div class=\"summarycard h-100\">\r\n <div *ngIf=\"unattendedSummaryChartNumber === 1\" class=\"cardtext\">\r\n Attended Summary\r\n </div>\r\n <div *ngIf=\"unattendedSummaryChartNumber === 2\" class=\"cardtext\">\r\n Unattended Summary\r\n </div>\r\n <div *ngIf=\"unattendedSummaryChartNumber === 1\" >\r\n <lib-unattended-pie-chart\r\n [chartData]=\"flagCardValues?.customerunattendedCards?.unattendedSummaryChart?.chart2\" [chartId]=\"'chart-two'\"></lib-unattended-pie-chart>\r\n </div>\r\n <div *ngIf=\"unattendedSummaryChartNumber === 2\" >\r\n <lib-unattended-pie-chart\r\n [chartData]=\"flagCardValues?.customerunattendedCards?.unattendedSummaryChart?.chart1\" [chartId]=\"'chart-one'\"></lib-unattended-pie-chart>\r\n </div>\r\n \r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <span (click)=\"unattendedSummaryChartNumber = 1\" [ngClass]=\"unattendedSummaryChartNumber === 1 ? 'selected-dot' : 'unselected-dot'\" class=\"cursor-pointer me-4\" ></span>\r\n <span (click)=\"unattendedSummaryChartNumber = 2\" [ngClass]=\"unattendedSummaryChartNumber === 2 ? 'selected-dot' : 'unselected-dot'\" class=\"cursor-pointer\"></span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"currentChecklist?.checkListType === 'staffleftinthemiddle' \" class=\"col-md-12\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n \r\n <div class=\"row\">\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Average </span>Staff Present</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.staffleftinthemiddleCards?.avgStaffPresent?.count === 0 ||\r\n flagCardValues?.staffleftinthemiddleCards?.avgStaffPresent?.count) ?\r\n flagCardValues?.staffleftinthemiddleCards?.avgStaffPresent?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresent?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresent?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresent?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresent?.comparisonData === 0 ||\r\n flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresent?.comparisonData) ?\r\n flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresent?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Average </span>Staff left </span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.staffleftinthemiddleCards?.avgStaffleft?.count === 0 ||\r\n flagCardValues?.staffleftinthemiddleCards?.avgStaffleft?.count) ?\r\n flagCardValues?.staffleftinthemiddleCards?.avgStaffleft?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.avgStaffleft?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.avgStaffleft?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.staffleftinthemiddleCards?.avgStaffleft?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.staffleftinthemiddleCards?.avgStaffleft?.comparisonData === 0 ||\r\n flagCardTrends?.staffleftinthemiddleCards?.avgStaffleft?.comparisonData) ?\r\n flagCardTrends?.staffleftinthemiddleCards?.avgStaffleft?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"> <span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\">Avg </span>Staff Present In Peak Hours</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.rate === 0 ||\r\n flagCardValues?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.rate) ?\r\n flagCardValues?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.rate?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.comparisonData === 0 ||\r\n flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.comparisonData) ?\r\n flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"row \">\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"> Staff <span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\"> Avg</span> Punctuality Rate</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.rate === 0 ||\r\n flagCardValues?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.rate) ?\r\n flagCardValues?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.rate?.toLocaleString('en-IN') : '--'}} %\r\n <div ><span *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.comparisonData === 0 ||\r\n flagCardTrends?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.comparisonData) ?\r\n flagCardTrends?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Staff <span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Avg</span> Break Hours</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.staffleftinthemiddleCards?.staffAvgBreakHours?.mins === 0 ||\r\n flagCardValues?.staffleftinthemiddleCards?.staffAvgBreakHours?.mins) ?\r\n flagCardValues?.staffleftinthemiddleCards?.staffAvgBreakHours?.mins?.toLocaleString('en-IN') : '--'}}\r\n Mins\r\n <div ><span *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.staffAvgBreakHours?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.staffAvgBreakHours?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.staffleftinthemiddleCards?.staffAvgBreakHours?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.staffleftinthemiddleCards?.staffAvgBreakHours?.comparisonData === 0 ||\r\n flagCardTrends?.staffleftinthemiddleCards?.staffAvgBreakHours?.comparisonData) ?\r\n flagCardTrends?.staffleftinthemiddleCards?.staffAvgBreakHours?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Staff <span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Avg</span> Productive Hours</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.staffleftinthemiddleCards?.staffAvgProductiveHours?.mins === 0 ||\r\n flagCardValues?.staffleftinthemiddleCards?.staffAvgProductiveHours?.mins) ?\r\n flagCardValues?.staffleftinthemiddleCards?.staffAvgProductiveHours?.mins?.toLocaleString('en-IN') : '--'}}\r\n Mins\r\n <div ><span *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.staffAvgProductiveHours?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.staffAvgProductiveHours?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.staffleftinthemiddleCards?.staffAvgProductiveHours?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.staffleftinthemiddleCards?.staffAvgProductiveHours?.comparisonData === 0 ||\r\n flagCardTrends?.staffleftinthemiddleCards?.staffAvgProductiveHours?.comparisonData) ?\r\n flagCardTrends?.staffleftinthemiddleCards?.staffAvgProductiveHours?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n <!-- <ng-container *ngIf=\"(flagsCardValuesState | async) === 'loading' || (flagsCardValuesState | async) === 'initial'\">\r\n <div class=\"col-md-12 my-2\">\r\n <div class=\"card\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container> -->\r\n <!-- card end -->\r\n <!-- table start -->\r\n <div class=\"col-md-12 my-2\" >\r\n <div class=\" card\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"card-header border-0 pt-4 px-4\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Store Info</span>\r\n <span class=\"text-sub mb-2\"> Based on {{ headerData?.date?.startDate | date: 'MMM d' }} - {{\r\n headerData?.date?.endDate | date: 'MMM d, y' }}\r\n </span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon footfallsearch svg-icon-1 position-absolute ms-8\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\">\r\n </rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input [formControl]=\"searchInput\" type=\"text\"\r\n class=\"form-control ps-14 ms-4 footfallsearch\" placeholder=\"Search by Store Name\"\r\n autocomplete=\"off\" />\r\n <button (click)=\"exportTable()\" type=\"button\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader ms-4\">\r\n <!-- Export Icon -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <ng-container *ngIf=\"currentChecklist?.checkListType === 'custom'\" >\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.customData?.length\">\r\n <div class=\"table-responsive px-4\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('date_iso')\">Date<svg\r\n [ngClass]=\"sortColumName === 'date_iso' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date_iso' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\" >Store Name\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeSpocEmail')\" >Store SPOC\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeSpocEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeSpocEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('detections')\">No. of flags\r\n <svg\r\n [ngClass]=\"sortColumName === 'detections' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'detections' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let flagData of checklistFlagList?.customData\">\r\n \r\n <td>\r\n <div class=\"table-title\">{{flagData?.date}}</div>\r\n </td>\r\n <td class=\"table-title-primary\">\r\n <u class=\"cursor-pointer\" (click)=\"storeView(flagData.storeId)\" >{{flagData?.storeName}}</u></td>\r\n <td >\r\n <div class=\"table-title\">{{flagData?.storeSpocEmail ? flagData?.storeSpocEmail : '--'}}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex\">\r\n <div class=\"table-title\">{{flagData?.detections?.toLocaleString('en-IN')}}</div>\r\n <span *ngIf=\"flagData?.questionFlagCount\" class=\"badge badge-light-default mx-3\" >Questions</span> \r\n <span *ngIf=\"flagData?.timeFlagCount\" class=\"badge badge-light-default mx-3\" >Not Submitted</span> \r\n </div>\r\n \r\n </td>\r\n \r\n <td>\r\n <div class=\"table-title d-flex\">\r\n <span *ngIf=\"flagData?.checklistStatus === 'submit'\" (click)=\"onView(flagData)\" class=\"actionview me-4 cursor-pointer text-primary\">View</span>\r\n <span *ngIf=\"(flagData?.checklistStatus === 'inprogress' || flagData?.checklistStatus === 'open') && (flagData?.timeFlagCount ?? 0) > 0 \" (click)=\"reInitiate(flagData)\" [ngClass]=\" isToday(flagData.dateString) || flagData?.reinitiateStatus ? 'pe-none' : 'text-primary'\" class=\"actionview me-4 cursor-pointer\">Reinitiate</span>\r\n <span *ngIf=\"flagData?.checklistStatus === 'open' && !flagData?.timeFlagCount\" class=\" me-4 \">--</span>\r\n\r\n\r\n </div>\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.customData?.length\" >\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container> \r\n </ng-container>\r\n <ng-container *ngIf=\"currentChecklist?.checkListType === 'storeopenandclose'\" >\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.storeopenandcloseData?.length\">\r\n <div class=\"table-responsive px-4\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('date')\">Date<svg\r\n [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\" >Store Name\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <!-- <th class=\"cursor-pointer\" (click)=\"sortData('storeSpocEmail')\" >Store SPOC\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeSpocEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeSpocEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th> -->\r\n <th class=\"cursor-pointer\" (click)=\"sortData('openTime')\" >Open Time\r\n <svg\r\n [ngClass]=\"sortColumName === 'openTime' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'openTime' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('closeTime')\" >Close Time\r\n <svg\r\n [ngClass]=\"sortColumName === 'closeTime' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'closeTime' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let flagData of checklistFlagList?.storeopenandcloseData\">\r\n\r\n <td>\r\n <div class=\"table-title\">{{flagData?.date}}</div>\r\n </td>\r\n <td class=\"table-title-primary\">\r\n <u class=\"cursor-pointer\" (click)=\"storeView(flagData.storeId)\">{{flagData?.storeName}}</u></td>\r\n <!-- <td >\r\n <div class=\"table-title\">{{flagData?.storeSpocEmail ? flagData?.storeSpocEmail : '--'}}\r\n </div>\r\n </td> -->\r\n <td >\r\n <span class=\"badge \" [ngClass]=\"flagData?.openTimeFlag ? 'badge-light-danger' : 'badge-light-success'\">{{flagData?.openTime}}</span>\r\n </td>\r\n <td >\r\n <span class=\"badge \" [ngClass]=\"flagData?.closeTimeFlag ? 'badge-light-danger' : 'badge-light-success'\">{{flagData?.closeTime}}</span>\r\n </td>\r\n\r\n <td>\r\n <div (click)=\"onView(flagData)\" class=\"table-title d-flex\"><span\r\n class=\"actionview me-4 cursor-pointer\">View</span>\r\n </div>\r\n </td>\r\n\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n </div>\r\n <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.storeopenandcloseData?.length\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"currentChecklist?.checkListType === 'mobileusagedetection'\" >\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.mobileusagedetectionData?.length\">\r\n <div class=\"table-responsive px-4\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('date')\">Date<svg\r\n [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\" >Store Name\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <!-- <th class=\"cursor-pointer\" (click)=\"sortData('storeSpocEmail')\" >Store SPOC\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeSpocEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeSpocEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th> -->\r\n <th class=\"cursor-pointer\" (click)=\"sortData('detections')\">Detections\r\n <svg\r\n [ngClass]=\"sortColumName === 'detections' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'detections' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th >Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let flagData of checklistFlagList?.mobileusagedetectionData\">\r\n \r\n <td>\r\n <div class=\"table-title\">{{flagData?.date}}</div>\r\n </td>\r\n <td class=\"table-title-primary\">\r\n <u class=\"cursor-pointer\" (click)=\"storeView(flagData.storeId)\">{{flagData?.storeName}}</u></td>\r\n <!-- <td >\r\n <div class=\"table-title\">{{flagData?.storeSpocEmail ? flagData?.storeSpocEmail : '--'}}\r\n </div>\r\n </td> -->\r\n <td>\r\n <div class=\"table-title\">{{flagData?.detections?.toLocaleString('en-IN')}}</div>\r\n </td>\r\n \r\n <td>\r\n <div (click)=\"onView(flagData)\" class=\"table-title d-flex\"><span\r\n class=\"actionview me-4 cursor-pointer\">View</span>\r\n </div>\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.mobileusagedetectionData?.length\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container> \r\n </ng-container>\r\n <ng-container *ngIf=\"currentChecklist?.checkListType === 'uniformdetection'\" >\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.uniformdetectionData?.length\">\r\n <div class=\"table-responsive px-4\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('date')\">Date<svg\r\n [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\" >Store Name\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <!-- <th class=\"cursor-pointer\" (click)=\"sortData('storeSpocEmail')\" >Store SPOC\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeSpocEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeSpocEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th> -->\r\n <th class=\"cursor-pointer\" (click)=\"sortData('detections')\">Detections\r\n <svg\r\n [ngClass]=\"sortColumName === 'detections' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'detections' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let flagData of checklistFlagList?.uniformdetectionData\">\r\n \r\n <td>\r\n <div class=\"table-title\">{{flagData?.date}}</div>\r\n </td>\r\n <td class=\"table-title-primary\">\r\n <u class=\"cursor-pointer\" (click)=\"storeView(flagData.storeId)\">{{flagData?.storeName}}</u></td>\r\n <!-- <td >\r\n <div class=\"table-title\">{{flagData?.storeSpocEmail ? flagData?.storeSpocEmail : '--'}}\r\n </div>\r\n </td> -->\r\n <td>\r\n <div class=\"table-title\">{{flagData?.detections?.toLocaleString('en-IN')}}</div>\r\n </td>\r\n \r\n <td>\r\n <div (click)=\"onView(flagData)\" class=\"table-title d-flex\"><span\r\n class=\"actionview me-4 cursor-pointer\">View</span>\r\n </div>\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.uniformdetectionData?.length\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container> \r\n </ng-container>\r\n <ng-container *ngIf=\"currentChecklist?.checkListType === 'customerunattended'\" >\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.customerunattendedData?.length\">\r\n <div class=\"table-responsive px-4\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('date')\">Date<svg\r\n [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\" >Store Name\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <!-- <th class=\"cursor-pointer\" (click)=\"sortData('storeSpocEmail')\" >Store SPOC\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeSpocEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeSpocEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th> -->\r\n <th class=\"cursor-pointer\" (click)=\"sortData('detections')\" >Detections\r\n <svg\r\n [ngClass]=\"sortColumName === 'detections' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'detections' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th >Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let flagData of checklistFlagList?.customerunattendedData\">\r\n \r\n <td>\r\n <div class=\"table-title\">{{flagData?.date}}</div>\r\n </td>\r\n <td class=\"table-title-primary\">\r\n <u class=\"cursor-pointer\" (click)=\"storeView(flagData.storeId)\">{{flagData?.storeName}}</u></td>\r\n <!-- <td >\r\n <div class=\"table-title\">{{flagData?.storeSpocEmail ? flagData?.storeSpocEmail : '--'}}\r\n </div>\r\n </td> -->\r\n <td>\r\n <div class=\"table-title\">{{flagData?.detections?.toLocaleString('en-IN')}}</div>\r\n </td>\r\n \r\n <td>\r\n <div (click)=\"onView(flagData)\" class=\"table-title d-flex\"><span\r\n class=\"actionview me-4 cursor-pointer\">View</span>\r\n </div>\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.customerunattendedData?.length\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container> \r\n </ng-container>\r\n <ng-container *ngIf=\"currentChecklist?.checkListType === 'staffleftinthemiddle'\" >\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.staffleftinthemiddleData?.length\">\r\n <div class=\"table-responsive px-4\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('date')\">Date<svg\r\n [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\" >Store Name\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <!-- <th class=\"cursor-pointer\" (click)=\"sortData('storeSpocEmail')\" >Store SPOC\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeSpocEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeSpocEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th> -->\r\n <th class=\"cursor-pointer\" (click)=\"sortData('detections')\">Detections\r\n <svg\r\n [ngClass]=\"sortColumName === 'detections' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'detections' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let flagData of checklistFlagList?.staffleftinthemiddleData\">\r\n \r\n <td>\r\n <div class=\"table-title\">{{flagData?.date}}</div>\r\n </td>\r\n <td class=\"table-title-primary\">\r\n <u class=\"cursor-pointer\" (click)=\"storeView(flagData.storeId)\">{{flagData?.storeName}}</u></td>\r\n <!-- <td >\r\n <div class=\"table-title\">{{flagData?.storeSpocEmail ? flagData?.storeSpocEmail : '--'}}\r\n </div>\r\n </td> -->\r\n <td>\r\n <div class=\"table-title\">{{flagData?.detections?.toLocaleString('en-IN')}}</div>\r\n </td>\r\n \r\n <td>\r\n <div (click)=\"onView(flagData)\" class=\"table-title d-flex\"><span\r\n class=\"actionview me-4 cursor-pointer\">View</span>\r\n </div>\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.staffleftinthemiddleData?.length\" >\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container> \r\n </ng-container>\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loading' || (flagsTableApiState | async) === 'initial'\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && !checklistFlagList?.customData?.length && !checklistFlagList?.storeopenandcloseData?.length\r\n && !checklistFlagList?.mobileusagedetectionData?.length && !checklistFlagList?.uniformdetectionData?.length && !checklistFlagList?.customerunattendedData?.length\r\n && !checklistFlagList?.staffleftinthemiddleData?.length\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Flags Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container> \r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div> \r\n </div>\r\n \r\n</div>", styles: [".table-title-primary{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-style:normal;font-weight:500!important;line-height:30px}.table-title{color:var(--Gray-500, #667085);font-size:14px;font-style:normal;font-weight:500!important;line-height:20px}.infocount{color:var(--Black, #101828);font-size:24px;font-style:normal;font-weight:600;line-height:32px;text-align:center}.percent-value{color:var(--Gray-500, #667085);text-align:center;font-size:16px;font-style:normal;font-weight:600;line-height:18px}.week-font{color:var(--Black, #101828);font-size:12px;font-style:normal;font-weight:400!important;line-height:18px}.subinfocard{border-radius:5.359px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;display:flex;padding:31px 12px;flex-direction:column;align-items:center;gap:24px;align-self:stretch}.avgcount{color:var(--Black, #101828);font-size:14px;font-style:normal;font-weight:400;line-height:20px}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.cardcount{color:var(--Black, #101828);font-size:30px;font-style:normal;font-weight:600;line-height:38px}.cardtext{color:var(--Black, #101828);font-size:18px;font-style:normal;font-weight:600;line-height:28px;text-align:center}.cardsubcount{color:var(--Black, #101828);font-size:20px;font-style:normal;font-weight:700;line-height:30px}.card-border{padding:8px;border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.actionview{color:var(--Gray-500, #667085);font-size:14px;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.grey-badge{border-radius:16px;background:var(--Gray-100, #F2F4F7);display:flex;padding:2px 8px;justify-content:center;align-items:center;color:var(--Gray-700, #344054);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.text-success{border-radius:16px;background:var(--Success-50, #ECFDF3);display:flex;padding:2px 8px 2px 6px;justify-content:center;align-items:center;gap:6px;color:var(--Success-500, #12B76A);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.checklistheading{color:var(--Gray-900, #101828);font-size:18px;font-style:normal;font-weight:600;line-height:28px}.checklisttext{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.totalinfocard{border-radius:5.359px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;display:flex;padding:16px 12px 24px;flex-direction:column;align-items:center;gap:24px;align-self:stretch}.headingcard{border-radius:4px;background:var(--Gray-50, #F9FAFB);display:flex;padding:8px;flex-direction:column;align-items:center;gap:4px;align-self:stretch;color:var(--Black, #101828);font-size:16px;font-style:normal;font-weight:500;line-height:24px}.no-border-custom-select{border:none!important;box-shadow:none!important}.summarycard{padding:8px;flex-direction:column;align-items:center;gap:16px;flex:1 0 0;border-radius:8px;background:var(--White, #FFF)}.staffcard{padding:8px;border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.unselected-dot{width:8px;height:8px;border-radius:4px;background:#daf1ff}.selected-dot{width:8px;height:8px;border-radius:4px;background:#009bf3}.header-card{padding:16px;border-radius:12px;background:#fff}.rotate{rotate:180deg;transition:1s}\n"] }]
8293
8295
  }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i2$1.GlobalStateService }, { type: TraxService }, { type: i0.ChangeDetectorRef }, { type: i1$2.Router }, { type: i3.ToastService }, { type: i2$1.PageInfoService }] });
8294
8296
 
8295
8297
  dayjs.extend(utc);
@@ -9475,7 +9477,7 @@ class CreateTaskComponent {
9475
9477
  const file = event.target.files[0];
9476
9478
  formData.append('file', file, file.name);
9477
9479
  formData.append('clientId', this.headerData?.client);
9478
- this.traxService.imageupload(formData).pipe(takeUntil(this.destroy$)).subscribe({
9480
+ this.traxService.taskImageupload(formData).pipe(takeUntil(this.destroy$)).subscribe({
9479
9481
  next: (res) => {
9480
9482
  if (res.data.imgUrl) {
9481
9483
  if (answerIndex === undefined) {
@@ -9805,7 +9807,7 @@ class TaskConfigureComponent {
9805
9807
  priorityType: this.priorityType.value,
9806
9808
  allowedStoreLocation: this.allowedStoreLocation.value,
9807
9809
  restrictAttendance: this.restrictAttendance.value,
9808
- client_id: this.headerData?.client,
9810
+ clientId: this.headerData?.client,
9809
9811
  submitType: action,
9810
9812
  _id: this.taskDetails?._id,
9811
9813
  removedUsers: [...this.removedUsers],
@@ -9945,8 +9947,11 @@ class TaskConfigureComponent {
9945
9947
  }
9946
9948
  const filteredData = jsonWithPosition.filter(row => {
9947
9949
  const keys = Object.keys(row).filter(key => !key.startsWith('column_') && key !== 'row');
9948
- return keys.some(key => row[key] !== undefined && row[key] !== null && row[key] !== "");
9950
+ return keys.some(key => row[key].trim() !== undefined && row[key].trim() !== null && row[key].trim() !== "");
9949
9951
  });
9952
+ if (!filteredData.length) {
9953
+ return this.toastService.getErrorToast(`Please enter valid details`);
9954
+ }
9950
9955
  const emptyKeys = [];
9951
9956
  const invalidEmails = [];
9952
9957
  filteredData.forEach((row) => {
@@ -10038,6 +10043,22 @@ class TaskConfigureComponent {
10038
10043
  }
10039
10044
  });
10040
10045
  }
10046
+ if (res?.data?.store?.length) {
10047
+ function formatMessages(messages) {
10048
+ const groupedMessages = {};
10049
+ messages.forEach(({ store, message }) => {
10050
+ if (!groupedMessages[store]) {
10051
+ groupedMessages[store] = [];
10052
+ }
10053
+ groupedMessages[store].push(message);
10054
+ });
10055
+ const formattedMessages = Object.entries(groupedMessages).map(([store, msgs]) => {
10056
+ return `${msgs.join(', ')} in ${store}`;
10057
+ });
10058
+ return formattedMessages.join(', ');
10059
+ }
10060
+ this.toastService.getErrorToast(formatMessages(res?.data?.store));
10061
+ }
10041
10062
  },
10042
10063
  error: (err) => {
10043
10064
  this.toastService.getErrorToast(err?.error?.error?.message || 'Something went wrong');
@@ -10116,11 +10137,11 @@ class TaskConfigureComponent {
10116
10137
  return this.traxService.uploadTaskAssignees(reqPayload);
10117
10138
  }
10118
10139
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TaskConfigureComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i2$1.GlobalStateService }, { token: i2$1.PageInfoService }, { token: TraxService }, { token: i6.NgbModal }, { token: i3.ToastService }, { token: i1$2.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
10119
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TaskConfigureComponent, selector: "lib-task-configure", viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["file"], descendants: true }], ngImport: i0, template: "<div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"c-card d-flex justify-content-between\">\r\n <div>\r\n <div class=\"checklist-name mb-5\">{{taskDetails?.checkListName}}</div>\r\n <div class=\"checklist-desc\">{{taskDetails?.checkListDescription}}</div>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <button class=\"btn btn-primary me-5\" (click)=\"onSubmit('publish')\" >Publish</button>\r\n <button class=\"btn btn-outline\" (click)=\"onSubmit('save')\" >Save as Draft</button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">\r\n <div style=\"height: 80vh; overflow-y: auto;\" class=\"c-card\">\r\n <h2 class=\"mb-5\">Schedule</h2>\r\n <div class=\"d-flex mb-5\" >\r\n <svg class=\"me-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M16 2V6M8 2V6M3 10H21M5 4H19C20.1046 4 21 4.89543 21 6V20C21 21.1046 20.1046 22 19 22H5C3.89543 22 3 21.1046 3 20V6C3 4.89543 3.89543 4 5 4Z\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"schedule-text\" >\r\n {{dueDateFormatted}}\r\n </span>\r\n </div>\r\n <div class=\"d-flex mb-5\">\r\n <svg class=\"me-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"schedule-text\" >{{dueTimeFormatted}}</span>\r\n </div>\r\n <h2 class=\"mb-5\">Assign</h2>\r\n <div class=\"d-flex mb-5\" >\r\n <svg class=\"me-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M16 4H18C18.5304 4 19.0391 4.21071 19.4142 4.58579C19.7893 4.96086 20 5.46957 20 6V20C20 20.5304 19.7893 21.0391 19.4142 21.4142C19.0391 21.7893 18.5304 22 18 22H6C5.46957 22 4.96086 21.7893 4.58579 21.4142C4.21071 21.0391 4 20.5304 4 20V6C4 5.46957 4.21071 4.96086 4.58579 4.58579C4.96086 4.21071 5.46957 4 6 4H8M9 2H15C15.5523 2 16 2.44772 16 3V5C16 5.55228 15.5523 6 15 6H9C8.44772 6 8 5.55228 8 5V3C8 2.44772 8.44772 2 9 2Z\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"schedule-text\" >\r\n Users\r\n </span>\r\n </div>\r\n <div class=\"d-flex mb-5\">\r\n <svg class=\"me-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M3.08995 6.88381L3.02401 6.98681C2.30358 8.25569 3.06101 9.87957 4.46464 10.0664C4.58627 10.0813 4.70112 10.0894 4.8145 10.0894C5.55255 10.0894 6.20523 9.77241 6.65953 9.27929L7.21286 8.67867L7.76432 9.28101C8.21367 9.77184 8.8652 10.0894 9.60776 10.0894C10.3471 10.0894 11.0022 9.77149 11.4512 9.28101L12.0044 8.67677L12.5576 9.28101C13.0066 9.77149 13.6617 10.0894 14.401 10.0894C15.1404 10.0894 15.7954 9.77149 16.2445 9.28101L16.7977 8.67678L17.3508 9.28101C17.7999 9.77149 18.4549 10.0894 19.1943 10.0894C19.3041 10.0894 19.4223 10.0812 19.5433 10.0665C20.9772 9.8718 21.7355 8.164 20.9155 6.88431C20.9154 6.88425 20.9154 6.8842 20.9154 6.88414L18.8056 3.59441L18.8056 3.59441L18.8046 3.59294C18.7582 3.52014 18.6649 3.46436 18.5584 3.46436H5.44307C5.3365 3.46436 5.24326 3.52014 5.19681 3.59295L5.19619 3.59391L3.08995 6.88381ZM4.81818 12.7501C4.71644 12.7501 4.616 12.747 4.5169 12.7411V16.6429V18.9644C4.5169 19.8212 5.22663 20.5358 6.11942 20.5358H17.882C18.7748 20.5358 19.4845 19.8212 19.4845 18.9644V16.6429V12.7416C19.3874 12.7471 19.2893 12.7501 19.1906 12.7501C19.0022 12.7501 18.8157 12.74 18.632 12.7203V16.6429V17.3929H17.882H6.11942H5.36942V16.6429V12.7211C5.18866 12.7402 5.00472 12.7501 4.81818 12.7501Z\" stroke=\"#101828\" stroke-width=\"1.5\"/>\r\n </svg>\r\n <span class=\"schedule-text\" >{{taskDetails?.storeCount}} Stores</span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-9\">\r\n <div style=\"height: 80vh; overflow-y: auto;\" class=\"c-card\">\r\n <div class=\"row\">\r\n <div class=\"col-6 mb-5\">\r\n <div class=\"date-picker\">\r\n <label for=\"datepick\" class=\"form-label\">Due date</label>\r\n <div style=\"position: relative;\" >\r\n <svg style=\"position: absolute; top: 12px; left:12px;\" 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=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </path>\r\n </svg>\r\n <input id=\"datepick\" class=\"fx-date-range form-control ps-14\" type=\"text\"\r\n ngxDaterangepickerMd [singleDatePicker]=\"true\" [minDate]=\"minDate\" [drops]=\"'down'\"\r\n [opens]=\"'right'\" [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\"\r\n [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"scheduleDate\" [autoApply]=\"false\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n name=\"daterange\" [readonly]=\"true\" />\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6 mb-5\">\r\n <label for=\"timePick\" class=\"form-label\">Due time</label>\r\n <input [formControl]=\"scheduleEndTime\" type=\"time\" class=\"form-control\" id=\"timePick\" placeholder=\"name@example.com\">\r\n </div>\r\n <div class=\"col-6 mb-5\">\r\n <label class=\"form-label\">Approver</label>\r\n <lib-chip-dropdown [data]=\"approversList\" [selectedData]=\"approver.value\" (selectedList)=\"onApproveAdded($event)\" ></lib-chip-dropdown>\r\n\r\n </div>\r\n <div class=\"col-6 mb-5\">\r\n <label for=\"priority\" class=\"form-label\">Priority</label>\r\n <select [formControl]=\"priorityType\" id=\"priority\" class=\"form-select mb-5\">\r\n <option value=\"high\">High</option>\r\n <option value=\"medium\">Medium</option>\r\n <option value=\"medium\">Low</option>\r\n </select>\r\n </div>\r\n\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"toggle-card\" [ngClass]=\"allowedStoreLocation.value ? 'selected' : ''\">\r\n <div class=\"form-check form-switch me-4\">\r\n <input [formControl]=\"allowedStoreLocation\" class=\"form-check-input\" type=\"checkbox\" role=\"switch\" >\r\n </div>\r\n <div>\r\n <div class=\"header\">Geo fencing</div>\r\n <div class=\"desc\">By enabling, the checklist can be filled by the user only when inside the\r\n store.</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"toggle-card \" [ngClass]=\"restrictAttendance.value ? 'selected' : ''\">\r\n <div class=\"form-check form-switch me-4\">\r\n <input [formControl]=\"restrictAttendance\" class=\"form-check-input\" type=\"checkbox\" role=\"switch\" >\r\n </div>\r\n <div>\r\n <div class=\"header\">Restrict attendance</div>\r\n <div class=\"desc\">By enabling, user can't be able to clockout without completing the task.\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"col-12\">\r\n <div class=\"d-flex align-items-center justify-content-between mb-5\" >\r\n <h2>Assign</h2>\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1 me-2\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-6\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\">\r\n </rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input [formControl]=\"searchInput\" type=\"text\" data-kt-subscription-table-filter=\"search\"\r\n class=\"form-control form-control-solid w-400px ps-14 mx-1 me-4\"\r\n placeholder=\"Search by Store name\">\r\n </div>\r\n <div (click)=\"addStoreComponent()\" class=\"btn btn-primary\">\r\n <svg class=\"mr-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16602V15.8327M4.16675 9.99935H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </path>\r\n </svg>\r\n <span>Add Stote</span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <ng-container *ngIf=\"(assignTableApiState | async) === 'loaded' && assignTableData?.length\" >\r\n <div>\r\n <div class=\"table-responsive\">\r\n <table class=\"w-100 table bottom-border text-nowrap\">\r\n <thead>\r\n <tr>\r\n <th class=\"text-align-left\">\r\n <span><input [formControl]=\"selectAllInput\" class=\"form-check-input h-14px w-14px c-checkbox\" type=\"checkbox\"\r\n name=\"flag\"> <span\r\n class=\"form-check-label mx-4\">StoreName</span></span>\r\n </th>\r\n <th class=\"text-align-left\">\r\n <span>Assigned To</span>\r\n </th>\r\n <th class=\"text-align-left\">\r\n <span>Email </span>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let user of assignTableData\" >\r\n <td>\r\n <input [(ngModel)]=\"user.checkFlag\" (ngModelChange)=\"onUserAssignChange($event, user.id)\" class=\"form-check-input h-14px w-14px userFlag c-checkbox\" type=\"checkbox\"\r\n name=\"flag\" /><span class=\"form-check-label mx-4\">{{user?.storeName}}</span>\r\n </td>\r\n <td>{{user?.userName}}</td>\r\n <td>{{user?.userEmail}}</td>\r\n </tbody>\r\n </table>\r\n </div>\r\n <lib-pagination [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"(assignTableApiState | async) === 'loading' || (assignTableApiState | async) === 'initial'\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container >\r\n <div class=\"d-flex flex-column justify-content-center align-items-center\">\r\n <ng-container *ngIf=\"(assignTableApiState | async) === 'loaded' && !assignTableData?.length\" >\r\n <span class=\"mx-14\"><svg class=\"mx-20 mt-12\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#D1FADF\" />\r\n <path\r\n d=\"M25.09 25C25.3251 24.3317 25.7892 23.7681 26.4 23.4091C27.0108 23.0502 27.7289 22.9189 28.4272 23.0387C29.1255 23.1585 29.7588 23.5215 30.2151 24.0635C30.6713 24.6055 30.9211 25.2915 30.92 26C30.92 28 27.92 29 27.92 29M28 33H28.01M38 28C38 33.5228 33.5228 38 28 38C22.4772 38 18 33.5228 18 28C18 22.4772 22.4772 18 28 18C33.5228 18 38 22.4772 38 28Z\"\r\n stroke=\"#039855\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#ECFDF3\" stroke-width=\"8\" />\r\n </svg>\r\n </span>\r\n <h5 class=\"section-leftheading mt-6 mx-10\">Upload to assign users</h5>\r\n <ul class=\"sub-txt mb-5\">\r\n <li>Click \u201CDownload Template\u201D</li>\r\n <li> Add your data to the template file</li>\r\n <li> Upload it below to assign users</li>\r\n </ul> \r\n </ng-container>\r\n \r\n \r\n <div class=\"d-flex\">\r\n <button #upload (click)=\"file.click()\" class=\"btn btn-primary reupload\">\r\n <span class=\"svg-icon svg-icon-primary \">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"mb-2 mx-1\" width=\"21\"\r\n height=\"20\" viewBox=\"0 0 19 19\" fill=\"none\">\r\n <path\r\n d=\"M18 12.5V15.8333C18 16.2754 17.8244 16.6993 17.5118 17.0118C17.1993 17.3244 16.7754 17.5 16.3333 17.5H4.66667C4.22464 17.5 3.80072 17.3244 3.48816 17.0118C3.17559 16.6993 3 16.2754 3 15.8333V12.5M14.6667 6.66667L10.5 2.5M10.5 2.5L6.33333 6.66667M10.5 2.5V12.5\"\r\n stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"reuploadtext\">\r\n Upload Template\r\n </span>\r\n </button>\r\n <input style=\"visibility: hidden;\" type=\"file\" #file\r\n id=\"kt_account_team_size_select_1\" (change)=\"onFileUpload($event)\" />\r\n \r\n <span (click)=\"downloadTemplate()\" class=\"cstm-blu-btn\">\r\n <svg _ngcontent-ng-c842475337=\"\" xmlns=\"http://www.w3.org/2000/svg\" width=\"21\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class=\"mb-1\">\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.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </svg>\r\n Download Template\r\n </span>\r\n \r\n </div>\r\n \r\n </div> \r\n </ng-container> \r\n \r\n \r\n \r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".c-card{padding:24px;background:#fff;border-radius:16px}.plain-input{border:none;outline:none;background:transparent;padding:0;margin:0;width:100%;overflow:hidden;color:var(--black, #101828);text-overflow:ellipsis;font-family:Inter;font-size:18px;font-style:normal;font-weight:500;line-height:28px}.plain-input:focus{border-radius:0!important;border:white!important;outline:none!important;box-shadow:none!important}.checklist-name{font-size:20px;font-weight:600;line-height:28px;text-align:left;color:#667085!important}.checklist-desc{font-size:14px;font-weight:400;line-height:18px;text-align:left}:host::ng-deep .date-picker .md-drppicker .btn{line-height:10px!important}:host::ng-deep .date-picker .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .date-picker .md-drppicker.drops-down-right.ltr.show-ranges.shown{top:65px!important}:host::ng-deep .date-picker .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;right:-475px!important;left:unset!important;height:400px!important}:host::ng-deep .date-picker .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .date-picker .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .date-picker .md-drppicker td.active,:host::ng-deep .date-picker .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .date-picker .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .date-picker .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .date-picker .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep .date-picker table th,:host::ng-deep .date-picker table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .date-picker .md-drppicker td.available.prev,:host::ng-deep .date-picker .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .date-picker .md-drppicker td.available.next,:host::ng-deep .date-picker .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .date-picker table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .date-picker .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .date-picker .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .date-picker .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.outer-container{position:relative}.outer-container .form-control{padding-top:0;padding-bottom:0}.outer-container .input-container{border:1px solid black;height:100%;width:100%;display:flex;flex-wrap:wrap;border:1px solid #D0D5DD}.outer-container .input-container input{all:unset;flex:1;min-width:50px}.outer-container .input-container .chip{margin:10px 0 10px 10px;padding:3px 10px;border-radius:16px;background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .chip .initials{color:var(--Primary-600, #00A3FF);font-size:12px;font-weight:500;line-height:18px}.outer-container .input-container .chip:nth-child(1){margin-left:0}.toggle-card{padding:16px;display:flex;align-items:center;border-radius:8px;border:1px solid #EAECF0;background:#fff}.toggle-card .header{color:#344054;font-size:16px;font-weight:500;line-height:24px}.toggle-card .desc{color:var(--Gray-500, #667085);font-size:14px;font-weight:400;line-height:20px}.toggle-card.selected{border:1px solid #6BCAFF}.toggle-card.selected .header{color:#008edf}.toggle-card.selected .desc{color:#00a3ff}.sub-txt{color:#667085;font-size:14px;font-weight:400;line-height:20px;gap:8px}.cstm-blu-btn{padding:8px 14px;border-radius:8px;border:1px solid #EAF8FF;background:#eaf8ff;box-shadow:0 1px 2px #1018280d;color:#009bf3;font-size:14px;font-weight:600;line-height:20px;cursor:pointer;display:flex;align-items:center}.schedule-text{color:#344054;font-size:16px;font-weight:500;line-height:24px}input[type=checkbox].c-checkbox{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}input[type=checkbox].c-checkbox:checked{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}input[type=checkbox].c-checkbox:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}\n"], dependencies: [{ kind: "directive", type: i6$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i9.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }, { kind: "component", type: ChipDropdownComponent, selector: "lib-chip-dropdown", inputs: ["data", "selectedData"], outputs: ["selectedList"] }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }] });
10140
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TaskConfigureComponent, selector: "lib-task-configure", viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["file"], descendants: true }], ngImport: i0, template: "<div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"c-card d-flex justify-content-between\">\r\n <div>\r\n <div class=\"checklist-name mb-5\">{{taskDetails?.checkListName}}</div>\r\n <div class=\"checklist-desc\">{{taskDetails?.checkListDescription}}</div>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <button class=\"btn btn-primary me-5\" (click)=\"onSubmit('publish')\" >Publish</button>\r\n <button class=\"btn btn-outline\" (click)=\"onSubmit('save')\" >Save as Draft</button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">\r\n <div style=\"height: 80vh; overflow-y: auto;\" class=\"c-card\">\r\n <h2 class=\"mb-5\">Schedule</h2>\r\n <div class=\"d-flex mb-5\" >\r\n <svg class=\"me-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M16 2V6M8 2V6M3 10H21M5 4H19C20.1046 4 21 4.89543 21 6V20C21 21.1046 20.1046 22 19 22H5C3.89543 22 3 21.1046 3 20V6C3 4.89543 3.89543 4 5 4Z\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"schedule-text\" >\r\n {{dueDateFormatted}}\r\n </span>\r\n </div>\r\n <div class=\"d-flex mb-5\">\r\n <svg class=\"me-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"schedule-text\" >{{dueTimeFormatted}}</span>\r\n </div>\r\n <h2 class=\"mb-5\">Assign</h2>\r\n <div class=\"d-flex mb-5\" >\r\n <svg class=\"me-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M16 4H18C18.5304 4 19.0391 4.21071 19.4142 4.58579C19.7893 4.96086 20 5.46957 20 6V20C20 20.5304 19.7893 21.0391 19.4142 21.4142C19.0391 21.7893 18.5304 22 18 22H6C5.46957 22 4.96086 21.7893 4.58579 21.4142C4.21071 21.0391 4 20.5304 4 20V6C4 5.46957 4.21071 4.96086 4.58579 4.58579C4.96086 4.21071 5.46957 4 6 4H8M9 2H15C15.5523 2 16 2.44772 16 3V5C16 5.55228 15.5523 6 15 6H9C8.44772 6 8 5.55228 8 5V3C8 2.44772 8.44772 2 9 2Z\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"schedule-text\" >\r\n Users\r\n </span>\r\n </div>\r\n <div class=\"d-flex mb-5\">\r\n <svg class=\"me-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M3.08995 6.88381L3.02401 6.98681C2.30358 8.25569 3.06101 9.87957 4.46464 10.0664C4.58627 10.0813 4.70112 10.0894 4.8145 10.0894C5.55255 10.0894 6.20523 9.77241 6.65953 9.27929L7.21286 8.67867L7.76432 9.28101C8.21367 9.77184 8.8652 10.0894 9.60776 10.0894C10.3471 10.0894 11.0022 9.77149 11.4512 9.28101L12.0044 8.67677L12.5576 9.28101C13.0066 9.77149 13.6617 10.0894 14.401 10.0894C15.1404 10.0894 15.7954 9.77149 16.2445 9.28101L16.7977 8.67678L17.3508 9.28101C17.7999 9.77149 18.4549 10.0894 19.1943 10.0894C19.3041 10.0894 19.4223 10.0812 19.5433 10.0665C20.9772 9.8718 21.7355 8.164 20.9155 6.88431C20.9154 6.88425 20.9154 6.8842 20.9154 6.88414L18.8056 3.59441L18.8056 3.59441L18.8046 3.59294C18.7582 3.52014 18.6649 3.46436 18.5584 3.46436H5.44307C5.3365 3.46436 5.24326 3.52014 5.19681 3.59295L5.19619 3.59391L3.08995 6.88381ZM4.81818 12.7501C4.71644 12.7501 4.616 12.747 4.5169 12.7411V16.6429V18.9644C4.5169 19.8212 5.22663 20.5358 6.11942 20.5358H17.882C18.7748 20.5358 19.4845 19.8212 19.4845 18.9644V16.6429V12.7416C19.3874 12.7471 19.2893 12.7501 19.1906 12.7501C19.0022 12.7501 18.8157 12.74 18.632 12.7203V16.6429V17.3929H17.882H6.11942H5.36942V16.6429V12.7211C5.18866 12.7402 5.00472 12.7501 4.81818 12.7501Z\" stroke=\"#101828\" stroke-width=\"1.5\"/>\r\n </svg>\r\n <span class=\"schedule-text\" >{{taskDetails?.storeCount}} Stores</span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-9\">\r\n <div style=\"height: 80vh; overflow-y: auto;\" class=\"c-card\">\r\n <div class=\"row\">\r\n <div class=\"col-6 mb-5\">\r\n <div class=\"date-picker\">\r\n <label for=\"datepick\" class=\"form-label\">Due date</label>\r\n <div style=\"position: relative;\" >\r\n <svg style=\"position: absolute; top: 12px; left:12px;\" 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=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </path>\r\n </svg>\r\n <input id=\"datepick\" class=\"fx-date-range form-control ps-14\" type=\"text\"\r\n ngxDaterangepickerMd [singleDatePicker]=\"true\" [minDate]=\"minDate\" [drops]=\"'down'\"\r\n [opens]=\"'right'\" [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\"\r\n [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"scheduleDate\" [autoApply]=\"false\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n name=\"daterange\" [readonly]=\"true\" />\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6 mb-5\">\r\n <label for=\"timePick\" class=\"form-label\">Due time</label>\r\n <input [formControl]=\"scheduleEndTime\" type=\"time\" class=\"form-control\" id=\"timePick\" placeholder=\"name@example.com\">\r\n </div>\r\n <div class=\"col-6 mb-5\">\r\n <label class=\"form-label\">Approver</label>\r\n <lib-chip-dropdown [data]=\"approversList\" [selectedData]=\"approver.value\" (selectedList)=\"onApproveAdded($event)\" ></lib-chip-dropdown>\r\n\r\n </div>\r\n <div class=\"col-6 mb-5\">\r\n <label for=\"priority\" class=\"form-label\">Priority</label>\r\n <select [formControl]=\"priorityType\" id=\"priority\" class=\"form-select mb-5\">\r\n <option value=\"high\">High</option>\r\n <option value=\"medium\">Medium</option>\r\n <option value=\"medium\">Low</option>\r\n </select>\r\n </div>\r\n\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"toggle-card\" [ngClass]=\"allowedStoreLocation.value ? 'selected' : ''\">\r\n <div class=\"form-check form-switch me-4\">\r\n <input [formControl]=\"allowedStoreLocation\" class=\"form-check-input\" type=\"checkbox\" role=\"switch\" >\r\n </div>\r\n <div>\r\n <div class=\"header\">Geo fencing</div>\r\n <div class=\"desc\">By enabling, the checklist can be filled by the user only when inside the\r\n store.</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"toggle-card \" [ngClass]=\"restrictAttendance.value ? 'selected' : ''\">\r\n <div class=\"form-check form-switch me-4\">\r\n <input [formControl]=\"restrictAttendance\" class=\"form-check-input\" type=\"checkbox\" role=\"switch\" >\r\n </div>\r\n <div>\r\n <div class=\"header\">Restrict attendance</div>\r\n <div class=\"desc\">By enabling, user can't be able to clockout without completing the task.\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"col-12\">\r\n <div class=\"d-flex align-items-center justify-content-between mb-5\" >\r\n <h2>Assign</h2>\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1 me-2\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-6\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\">\r\n </rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input [formControl]=\"searchInput\" type=\"text\" data-kt-subscription-table-filter=\"search\"\r\n class=\"form-control form-control-solid w-400px ps-14 mx-1 me-4\"\r\n placeholder=\"Search by Store name\">\r\n </div>\r\n <div (click)=\"addStoreComponent()\" class=\"btn btn-primary\">\r\n <svg class=\"mr-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16602V15.8327M4.16675 9.99935H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </path>\r\n </svg>\r\n <span>Add Stote</span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <ng-container *ngIf=\"(assignTableApiState | async) === 'loaded' && assignTableData?.length\" >\r\n <div>\r\n <div class=\"table-responsive\">\r\n <table class=\"w-100 table bottom-border text-nowrap\">\r\n <thead>\r\n <tr>\r\n <th class=\"text-align-left\">\r\n <span><input [formControl]=\"selectAllInput\" class=\"form-check-input h-14px w-14px c-checkbox\" type=\"checkbox\"\r\n name=\"flag\"> <span\r\n class=\"form-check-label mx-4\">StoreName</span></span>\r\n </th>\r\n <th class=\"text-align-left\">\r\n <span>Assigned To</span>\r\n </th>\r\n <th class=\"text-align-left\">\r\n <span>Email </span>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let user of assignTableData\" >\r\n <td>\r\n <input [(ngModel)]=\"user.checkFlag\" (ngModelChange)=\"onUserAssignChange($event, user.id)\" class=\"form-check-input h-14px w-14px userFlag c-checkbox\" type=\"checkbox\"\r\n name=\"flag\" /><span class=\"form-check-label mx-4\">{{user?.storeName}}</span>\r\n </td>\r\n <td>{{user?.userName}}</td>\r\n <td>{{user?.userEmail}}</td>\r\n </tbody>\r\n </table>\r\n </div>\r\n <lib-pagination [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"(assignTableApiState | async) === 'loading' || (assignTableApiState | async) === 'initial'\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container >\r\n <div class=\"d-flex flex-column justify-content-center align-items-center\">\r\n <ng-container *ngIf=\"(assignTableApiState | async) === 'loaded' && !assignTableData?.length\" >\r\n <span class=\"mx-14\"><svg class=\"mx-20 mt-12\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#D1FADF\" />\r\n <path\r\n d=\"M25.09 25C25.3251 24.3317 25.7892 23.7681 26.4 23.4091C27.0108 23.0502 27.7289 22.9189 28.4272 23.0387C29.1255 23.1585 29.7588 23.5215 30.2151 24.0635C30.6713 24.6055 30.9211 25.2915 30.92 26C30.92 28 27.92 29 27.92 29M28 33H28.01M38 28C38 33.5228 33.5228 38 28 38C22.4772 38 18 33.5228 18 28C18 22.4772 22.4772 18 28 18C33.5228 18 38 22.4772 38 28Z\"\r\n stroke=\"#039855\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#ECFDF3\" stroke-width=\"8\" />\r\n </svg>\r\n </span>\r\n <h5 class=\"section-leftheading mt-6 mx-10\">Upload to assign users</h5>\r\n <ul class=\"sub-txt mb-5\">\r\n <li>Click \u201CDownload Template\u201D</li>\r\n <li> Add your data to the template file</li>\r\n <li> Upload it below to assign users</li>\r\n </ul> \r\n </ng-container>\r\n \r\n \r\n <div class=\"d-flex\">\r\n <button #upload (click)=\"file.click()\" class=\"btn btn-primary reupload\">\r\n <span class=\"svg-icon svg-icon-primary me-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"mb-2 mx-1\" width=\"21\"\r\n height=\"20\" viewBox=\"0 0 19 19\" fill=\"none\">\r\n <path\r\n d=\"M18 12.5V15.8333C18 16.2754 17.8244 16.6993 17.5118 17.0118C17.1993 17.3244 16.7754 17.5 16.3333 17.5H4.66667C4.22464 17.5 3.80072 17.3244 3.48816 17.0118C3.17559 16.6993 3 16.2754 3 15.8333V12.5M14.6667 6.66667L10.5 2.5M10.5 2.5L6.33333 6.66667M10.5 2.5V12.5\"\r\n stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"reuploadtext\">\r\n <span *ngIf=\"assignTableData?.length\" >Reupload Template</span>\r\n <span *ngIf=\"!assignTableData?.length\" >Upload Template</span>\r\n </span>\r\n </button>\r\n <input style=\"visibility: hidden;\" type=\"file\" #file\r\n id=\"kt_account_team_size_select_1\" (change)=\"onFileUpload($event)\" />\r\n \r\n <span (click)=\"downloadTemplate()\" class=\"cstm-blu-btn\">\r\n <svg _ngcontent-ng-c842475337=\"\" xmlns=\"http://www.w3.org/2000/svg\" width=\"21\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class=\"mb-1\">\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.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </svg>\r\n Download Template\r\n </span>\r\n \r\n </div>\r\n \r\n </div> \r\n </ng-container> \r\n \r\n \r\n \r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".c-card{padding:24px;background:#fff;border-radius:16px}.plain-input{border:none;outline:none;background:transparent;padding:0;margin:0;width:100%;overflow:hidden;color:var(--black, #101828);text-overflow:ellipsis;font-family:Inter;font-size:18px;font-style:normal;font-weight:500;line-height:28px}.plain-input:focus{border-radius:0!important;border:white!important;outline:none!important;box-shadow:none!important}.checklist-name{font-size:20px;font-weight:600;line-height:28px;text-align:left;color:#667085!important}.checklist-desc{font-size:14px;font-weight:400;line-height:18px;text-align:left}:host::ng-deep .date-picker .md-drppicker .btn{line-height:10px!important}:host::ng-deep .date-picker .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .date-picker .md-drppicker.drops-down-right.ltr.show-ranges.shown{top:65px!important}:host::ng-deep .date-picker .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;right:-475px!important;left:unset!important;height:400px!important}:host::ng-deep .date-picker .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .date-picker .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .date-picker .md-drppicker td.active,:host::ng-deep .date-picker .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .date-picker .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .date-picker .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .date-picker .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep .date-picker table th,:host::ng-deep .date-picker table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .date-picker .md-drppicker td.available.prev,:host::ng-deep .date-picker .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .date-picker .md-drppicker td.available.next,:host::ng-deep .date-picker .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .date-picker table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .date-picker .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .date-picker .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .date-picker .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.outer-container{position:relative}.outer-container .form-control{padding-top:0;padding-bottom:0}.outer-container .input-container{border:1px solid black;height:100%;width:100%;display:flex;flex-wrap:wrap;border:1px solid #D0D5DD}.outer-container .input-container input{all:unset;flex:1;min-width:50px}.outer-container .input-container .chip{margin:10px 0 10px 10px;padding:3px 10px;border-radius:16px;background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .chip .initials{color:var(--Primary-600, #00A3FF);font-size:12px;font-weight:500;line-height:18px}.outer-container .input-container .chip:nth-child(1){margin-left:0}.toggle-card{padding:16px;display:flex;align-items:center;border-radius:8px;border:1px solid #EAECF0;background:#fff}.toggle-card .header{color:#344054;font-size:16px;font-weight:500;line-height:24px}.toggle-card .desc{color:var(--Gray-500, #667085);font-size:14px;font-weight:400;line-height:20px}.toggle-card.selected{border:1px solid #6BCAFF}.toggle-card.selected .header{color:#008edf}.toggle-card.selected .desc{color:#00a3ff}.sub-txt{color:#667085;font-size:14px;font-weight:400;line-height:20px;gap:8px}.cstm-blu-btn{padding:8px 14px;border-radius:8px;border:1px solid #EAF8FF;background:#eaf8ff;box-shadow:0 1px 2px #1018280d;color:#009bf3;font-size:14px;font-weight:600;line-height:20px;cursor:pointer;display:flex;align-items:center}.schedule-text{color:#344054;font-size:16px;font-weight:500;line-height:24px}input[type=checkbox].c-checkbox{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}input[type=checkbox].c-checkbox:checked{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}input[type=checkbox].c-checkbox:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}\n"], dependencies: [{ kind: "directive", type: i6$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i9.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }, { kind: "component", type: ChipDropdownComponent, selector: "lib-chip-dropdown", inputs: ["data", "selectedData"], outputs: ["selectedList"] }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }] });
10120
10141
  }
10121
10142
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TaskConfigureComponent, decorators: [{
10122
10143
  type: Component,
10123
- args: [{ selector: 'lib-task-configure', template: "<div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"c-card d-flex justify-content-between\">\r\n <div>\r\n <div class=\"checklist-name mb-5\">{{taskDetails?.checkListName}}</div>\r\n <div class=\"checklist-desc\">{{taskDetails?.checkListDescription}}</div>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <button class=\"btn btn-primary me-5\" (click)=\"onSubmit('publish')\" >Publish</button>\r\n <button class=\"btn btn-outline\" (click)=\"onSubmit('save')\" >Save as Draft</button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">\r\n <div style=\"height: 80vh; overflow-y: auto;\" class=\"c-card\">\r\n <h2 class=\"mb-5\">Schedule</h2>\r\n <div class=\"d-flex mb-5\" >\r\n <svg class=\"me-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M16 2V6M8 2V6M3 10H21M5 4H19C20.1046 4 21 4.89543 21 6V20C21 21.1046 20.1046 22 19 22H5C3.89543 22 3 21.1046 3 20V6C3 4.89543 3.89543 4 5 4Z\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"schedule-text\" >\r\n {{dueDateFormatted}}\r\n </span>\r\n </div>\r\n <div class=\"d-flex mb-5\">\r\n <svg class=\"me-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"schedule-text\" >{{dueTimeFormatted}}</span>\r\n </div>\r\n <h2 class=\"mb-5\">Assign</h2>\r\n <div class=\"d-flex mb-5\" >\r\n <svg class=\"me-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M16 4H18C18.5304 4 19.0391 4.21071 19.4142 4.58579C19.7893 4.96086 20 5.46957 20 6V20C20 20.5304 19.7893 21.0391 19.4142 21.4142C19.0391 21.7893 18.5304 22 18 22H6C5.46957 22 4.96086 21.7893 4.58579 21.4142C4.21071 21.0391 4 20.5304 4 20V6C4 5.46957 4.21071 4.96086 4.58579 4.58579C4.96086 4.21071 5.46957 4 6 4H8M9 2H15C15.5523 2 16 2.44772 16 3V5C16 5.55228 15.5523 6 15 6H9C8.44772 6 8 5.55228 8 5V3C8 2.44772 8.44772 2 9 2Z\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"schedule-text\" >\r\n Users\r\n </span>\r\n </div>\r\n <div class=\"d-flex mb-5\">\r\n <svg class=\"me-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M3.08995 6.88381L3.02401 6.98681C2.30358 8.25569 3.06101 9.87957 4.46464 10.0664C4.58627 10.0813 4.70112 10.0894 4.8145 10.0894C5.55255 10.0894 6.20523 9.77241 6.65953 9.27929L7.21286 8.67867L7.76432 9.28101C8.21367 9.77184 8.8652 10.0894 9.60776 10.0894C10.3471 10.0894 11.0022 9.77149 11.4512 9.28101L12.0044 8.67677L12.5576 9.28101C13.0066 9.77149 13.6617 10.0894 14.401 10.0894C15.1404 10.0894 15.7954 9.77149 16.2445 9.28101L16.7977 8.67678L17.3508 9.28101C17.7999 9.77149 18.4549 10.0894 19.1943 10.0894C19.3041 10.0894 19.4223 10.0812 19.5433 10.0665C20.9772 9.8718 21.7355 8.164 20.9155 6.88431C20.9154 6.88425 20.9154 6.8842 20.9154 6.88414L18.8056 3.59441L18.8056 3.59441L18.8046 3.59294C18.7582 3.52014 18.6649 3.46436 18.5584 3.46436H5.44307C5.3365 3.46436 5.24326 3.52014 5.19681 3.59295L5.19619 3.59391L3.08995 6.88381ZM4.81818 12.7501C4.71644 12.7501 4.616 12.747 4.5169 12.7411V16.6429V18.9644C4.5169 19.8212 5.22663 20.5358 6.11942 20.5358H17.882C18.7748 20.5358 19.4845 19.8212 19.4845 18.9644V16.6429V12.7416C19.3874 12.7471 19.2893 12.7501 19.1906 12.7501C19.0022 12.7501 18.8157 12.74 18.632 12.7203V16.6429V17.3929H17.882H6.11942H5.36942V16.6429V12.7211C5.18866 12.7402 5.00472 12.7501 4.81818 12.7501Z\" stroke=\"#101828\" stroke-width=\"1.5\"/>\r\n </svg>\r\n <span class=\"schedule-text\" >{{taskDetails?.storeCount}} Stores</span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-9\">\r\n <div style=\"height: 80vh; overflow-y: auto;\" class=\"c-card\">\r\n <div class=\"row\">\r\n <div class=\"col-6 mb-5\">\r\n <div class=\"date-picker\">\r\n <label for=\"datepick\" class=\"form-label\">Due date</label>\r\n <div style=\"position: relative;\" >\r\n <svg style=\"position: absolute; top: 12px; left:12px;\" 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=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </path>\r\n </svg>\r\n <input id=\"datepick\" class=\"fx-date-range form-control ps-14\" type=\"text\"\r\n ngxDaterangepickerMd [singleDatePicker]=\"true\" [minDate]=\"minDate\" [drops]=\"'down'\"\r\n [opens]=\"'right'\" [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\"\r\n [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"scheduleDate\" [autoApply]=\"false\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n name=\"daterange\" [readonly]=\"true\" />\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6 mb-5\">\r\n <label for=\"timePick\" class=\"form-label\">Due time</label>\r\n <input [formControl]=\"scheduleEndTime\" type=\"time\" class=\"form-control\" id=\"timePick\" placeholder=\"name@example.com\">\r\n </div>\r\n <div class=\"col-6 mb-5\">\r\n <label class=\"form-label\">Approver</label>\r\n <lib-chip-dropdown [data]=\"approversList\" [selectedData]=\"approver.value\" (selectedList)=\"onApproveAdded($event)\" ></lib-chip-dropdown>\r\n\r\n </div>\r\n <div class=\"col-6 mb-5\">\r\n <label for=\"priority\" class=\"form-label\">Priority</label>\r\n <select [formControl]=\"priorityType\" id=\"priority\" class=\"form-select mb-5\">\r\n <option value=\"high\">High</option>\r\n <option value=\"medium\">Medium</option>\r\n <option value=\"medium\">Low</option>\r\n </select>\r\n </div>\r\n\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"toggle-card\" [ngClass]=\"allowedStoreLocation.value ? 'selected' : ''\">\r\n <div class=\"form-check form-switch me-4\">\r\n <input [formControl]=\"allowedStoreLocation\" class=\"form-check-input\" type=\"checkbox\" role=\"switch\" >\r\n </div>\r\n <div>\r\n <div class=\"header\">Geo fencing</div>\r\n <div class=\"desc\">By enabling, the checklist can be filled by the user only when inside the\r\n store.</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"toggle-card \" [ngClass]=\"restrictAttendance.value ? 'selected' : ''\">\r\n <div class=\"form-check form-switch me-4\">\r\n <input [formControl]=\"restrictAttendance\" class=\"form-check-input\" type=\"checkbox\" role=\"switch\" >\r\n </div>\r\n <div>\r\n <div class=\"header\">Restrict attendance</div>\r\n <div class=\"desc\">By enabling, user can't be able to clockout without completing the task.\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"col-12\">\r\n <div class=\"d-flex align-items-center justify-content-between mb-5\" >\r\n <h2>Assign</h2>\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1 me-2\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-6\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\">\r\n </rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input [formControl]=\"searchInput\" type=\"text\" data-kt-subscription-table-filter=\"search\"\r\n class=\"form-control form-control-solid w-400px ps-14 mx-1 me-4\"\r\n placeholder=\"Search by Store name\">\r\n </div>\r\n <div (click)=\"addStoreComponent()\" class=\"btn btn-primary\">\r\n <svg class=\"mr-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16602V15.8327M4.16675 9.99935H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </path>\r\n </svg>\r\n <span>Add Stote</span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <ng-container *ngIf=\"(assignTableApiState | async) === 'loaded' && assignTableData?.length\" >\r\n <div>\r\n <div class=\"table-responsive\">\r\n <table class=\"w-100 table bottom-border text-nowrap\">\r\n <thead>\r\n <tr>\r\n <th class=\"text-align-left\">\r\n <span><input [formControl]=\"selectAllInput\" class=\"form-check-input h-14px w-14px c-checkbox\" type=\"checkbox\"\r\n name=\"flag\"> <span\r\n class=\"form-check-label mx-4\">StoreName</span></span>\r\n </th>\r\n <th class=\"text-align-left\">\r\n <span>Assigned To</span>\r\n </th>\r\n <th class=\"text-align-left\">\r\n <span>Email </span>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let user of assignTableData\" >\r\n <td>\r\n <input [(ngModel)]=\"user.checkFlag\" (ngModelChange)=\"onUserAssignChange($event, user.id)\" class=\"form-check-input h-14px w-14px userFlag c-checkbox\" type=\"checkbox\"\r\n name=\"flag\" /><span class=\"form-check-label mx-4\">{{user?.storeName}}</span>\r\n </td>\r\n <td>{{user?.userName}}</td>\r\n <td>{{user?.userEmail}}</td>\r\n </tbody>\r\n </table>\r\n </div>\r\n <lib-pagination [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"(assignTableApiState | async) === 'loading' || (assignTableApiState | async) === 'initial'\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container >\r\n <div class=\"d-flex flex-column justify-content-center align-items-center\">\r\n <ng-container *ngIf=\"(assignTableApiState | async) === 'loaded' && !assignTableData?.length\" >\r\n <span class=\"mx-14\"><svg class=\"mx-20 mt-12\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#D1FADF\" />\r\n <path\r\n d=\"M25.09 25C25.3251 24.3317 25.7892 23.7681 26.4 23.4091C27.0108 23.0502 27.7289 22.9189 28.4272 23.0387C29.1255 23.1585 29.7588 23.5215 30.2151 24.0635C30.6713 24.6055 30.9211 25.2915 30.92 26C30.92 28 27.92 29 27.92 29M28 33H28.01M38 28C38 33.5228 33.5228 38 28 38C22.4772 38 18 33.5228 18 28C18 22.4772 22.4772 18 28 18C33.5228 18 38 22.4772 38 28Z\"\r\n stroke=\"#039855\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#ECFDF3\" stroke-width=\"8\" />\r\n </svg>\r\n </span>\r\n <h5 class=\"section-leftheading mt-6 mx-10\">Upload to assign users</h5>\r\n <ul class=\"sub-txt mb-5\">\r\n <li>Click \u201CDownload Template\u201D</li>\r\n <li> Add your data to the template file</li>\r\n <li> Upload it below to assign users</li>\r\n </ul> \r\n </ng-container>\r\n \r\n \r\n <div class=\"d-flex\">\r\n <button #upload (click)=\"file.click()\" class=\"btn btn-primary reupload\">\r\n <span class=\"svg-icon svg-icon-primary \">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"mb-2 mx-1\" width=\"21\"\r\n height=\"20\" viewBox=\"0 0 19 19\" fill=\"none\">\r\n <path\r\n d=\"M18 12.5V15.8333C18 16.2754 17.8244 16.6993 17.5118 17.0118C17.1993 17.3244 16.7754 17.5 16.3333 17.5H4.66667C4.22464 17.5 3.80072 17.3244 3.48816 17.0118C3.17559 16.6993 3 16.2754 3 15.8333V12.5M14.6667 6.66667L10.5 2.5M10.5 2.5L6.33333 6.66667M10.5 2.5V12.5\"\r\n stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"reuploadtext\">\r\n Upload Template\r\n </span>\r\n </button>\r\n <input style=\"visibility: hidden;\" type=\"file\" #file\r\n id=\"kt_account_team_size_select_1\" (change)=\"onFileUpload($event)\" />\r\n \r\n <span (click)=\"downloadTemplate()\" class=\"cstm-blu-btn\">\r\n <svg _ngcontent-ng-c842475337=\"\" xmlns=\"http://www.w3.org/2000/svg\" width=\"21\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class=\"mb-1\">\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.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </svg>\r\n Download Template\r\n </span>\r\n \r\n </div>\r\n \r\n </div> \r\n </ng-container> \r\n \r\n \r\n \r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".c-card{padding:24px;background:#fff;border-radius:16px}.plain-input{border:none;outline:none;background:transparent;padding:0;margin:0;width:100%;overflow:hidden;color:var(--black, #101828);text-overflow:ellipsis;font-family:Inter;font-size:18px;font-style:normal;font-weight:500;line-height:28px}.plain-input:focus{border-radius:0!important;border:white!important;outline:none!important;box-shadow:none!important}.checklist-name{font-size:20px;font-weight:600;line-height:28px;text-align:left;color:#667085!important}.checklist-desc{font-size:14px;font-weight:400;line-height:18px;text-align:left}:host::ng-deep .date-picker .md-drppicker .btn{line-height:10px!important}:host::ng-deep .date-picker .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .date-picker .md-drppicker.drops-down-right.ltr.show-ranges.shown{top:65px!important}:host::ng-deep .date-picker .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;right:-475px!important;left:unset!important;height:400px!important}:host::ng-deep .date-picker .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .date-picker .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .date-picker .md-drppicker td.active,:host::ng-deep .date-picker .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .date-picker .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .date-picker .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .date-picker .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep .date-picker table th,:host::ng-deep .date-picker table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .date-picker .md-drppicker td.available.prev,:host::ng-deep .date-picker .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .date-picker .md-drppicker td.available.next,:host::ng-deep .date-picker .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .date-picker table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .date-picker .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .date-picker .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .date-picker .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.outer-container{position:relative}.outer-container .form-control{padding-top:0;padding-bottom:0}.outer-container .input-container{border:1px solid black;height:100%;width:100%;display:flex;flex-wrap:wrap;border:1px solid #D0D5DD}.outer-container .input-container input{all:unset;flex:1;min-width:50px}.outer-container .input-container .chip{margin:10px 0 10px 10px;padding:3px 10px;border-radius:16px;background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .chip .initials{color:var(--Primary-600, #00A3FF);font-size:12px;font-weight:500;line-height:18px}.outer-container .input-container .chip:nth-child(1){margin-left:0}.toggle-card{padding:16px;display:flex;align-items:center;border-radius:8px;border:1px solid #EAECF0;background:#fff}.toggle-card .header{color:#344054;font-size:16px;font-weight:500;line-height:24px}.toggle-card .desc{color:var(--Gray-500, #667085);font-size:14px;font-weight:400;line-height:20px}.toggle-card.selected{border:1px solid #6BCAFF}.toggle-card.selected .header{color:#008edf}.toggle-card.selected .desc{color:#00a3ff}.sub-txt{color:#667085;font-size:14px;font-weight:400;line-height:20px;gap:8px}.cstm-blu-btn{padding:8px 14px;border-radius:8px;border:1px solid #EAF8FF;background:#eaf8ff;box-shadow:0 1px 2px #1018280d;color:#009bf3;font-size:14px;font-weight:600;line-height:20px;cursor:pointer;display:flex;align-items:center}.schedule-text{color:#344054;font-size:16px;font-weight:500;line-height:24px}input[type=checkbox].c-checkbox{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}input[type=checkbox].c-checkbox:checked{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}input[type=checkbox].c-checkbox:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}\n"] }]
10144
+ args: [{ selector: 'lib-task-configure', template: "<div class=\"row\">\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"c-card d-flex justify-content-between\">\r\n <div>\r\n <div class=\"checklist-name mb-5\">{{taskDetails?.checkListName}}</div>\r\n <div class=\"checklist-desc\">{{taskDetails?.checkListDescription}}</div>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <button class=\"btn btn-primary me-5\" (click)=\"onSubmit('publish')\" >Publish</button>\r\n <button class=\"btn btn-outline\" (click)=\"onSubmit('save')\" >Save as Draft</button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">\r\n <div style=\"height: 80vh; overflow-y: auto;\" class=\"c-card\">\r\n <h2 class=\"mb-5\">Schedule</h2>\r\n <div class=\"d-flex mb-5\" >\r\n <svg class=\"me-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M16 2V6M8 2V6M3 10H21M5 4H19C20.1046 4 21 4.89543 21 6V20C21 21.1046 20.1046 22 19 22H5C3.89543 22 3 21.1046 3 20V6C3 4.89543 3.89543 4 5 4Z\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"schedule-text\" >\r\n {{dueDateFormatted}}\r\n </span>\r\n </div>\r\n <div class=\"d-flex mb-5\">\r\n <svg class=\"me-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"schedule-text\" >{{dueTimeFormatted}}</span>\r\n </div>\r\n <h2 class=\"mb-5\">Assign</h2>\r\n <div class=\"d-flex mb-5\" >\r\n <svg class=\"me-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M16 4H18C18.5304 4 19.0391 4.21071 19.4142 4.58579C19.7893 4.96086 20 5.46957 20 6V20C20 20.5304 19.7893 21.0391 19.4142 21.4142C19.0391 21.7893 18.5304 22 18 22H6C5.46957 22 4.96086 21.7893 4.58579 21.4142C4.21071 21.0391 4 20.5304 4 20V6C4 5.46957 4.21071 4.96086 4.58579 4.58579C4.96086 4.21071 5.46957 4 6 4H8M9 2H15C15.5523 2 16 2.44772 16 3V5C16 5.55228 15.5523 6 15 6H9C8.44772 6 8 5.55228 8 5V3C8 2.44772 8.44772 2 9 2Z\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"schedule-text\" >\r\n Users\r\n </span>\r\n </div>\r\n <div class=\"d-flex mb-5\">\r\n <svg class=\"me-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M3.08995 6.88381L3.02401 6.98681C2.30358 8.25569 3.06101 9.87957 4.46464 10.0664C4.58627 10.0813 4.70112 10.0894 4.8145 10.0894C5.55255 10.0894 6.20523 9.77241 6.65953 9.27929L7.21286 8.67867L7.76432 9.28101C8.21367 9.77184 8.8652 10.0894 9.60776 10.0894C10.3471 10.0894 11.0022 9.77149 11.4512 9.28101L12.0044 8.67677L12.5576 9.28101C13.0066 9.77149 13.6617 10.0894 14.401 10.0894C15.1404 10.0894 15.7954 9.77149 16.2445 9.28101L16.7977 8.67678L17.3508 9.28101C17.7999 9.77149 18.4549 10.0894 19.1943 10.0894C19.3041 10.0894 19.4223 10.0812 19.5433 10.0665C20.9772 9.8718 21.7355 8.164 20.9155 6.88431C20.9154 6.88425 20.9154 6.8842 20.9154 6.88414L18.8056 3.59441L18.8056 3.59441L18.8046 3.59294C18.7582 3.52014 18.6649 3.46436 18.5584 3.46436H5.44307C5.3365 3.46436 5.24326 3.52014 5.19681 3.59295L5.19619 3.59391L3.08995 6.88381ZM4.81818 12.7501C4.71644 12.7501 4.616 12.747 4.5169 12.7411V16.6429V18.9644C4.5169 19.8212 5.22663 20.5358 6.11942 20.5358H17.882C18.7748 20.5358 19.4845 19.8212 19.4845 18.9644V16.6429V12.7416C19.3874 12.7471 19.2893 12.7501 19.1906 12.7501C19.0022 12.7501 18.8157 12.74 18.632 12.7203V16.6429V17.3929H17.882H6.11942H5.36942V16.6429V12.7211C5.18866 12.7402 5.00472 12.7501 4.81818 12.7501Z\" stroke=\"#101828\" stroke-width=\"1.5\"/>\r\n </svg>\r\n <span class=\"schedule-text\" >{{taskDetails?.storeCount}} Stores</span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-9\">\r\n <div style=\"height: 80vh; overflow-y: auto;\" class=\"c-card\">\r\n <div class=\"row\">\r\n <div class=\"col-6 mb-5\">\r\n <div class=\"date-picker\">\r\n <label for=\"datepick\" class=\"form-label\">Due date</label>\r\n <div style=\"position: relative;\" >\r\n <svg style=\"position: absolute; top: 12px; left:12px;\" 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=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </path>\r\n </svg>\r\n <input id=\"datepick\" class=\"fx-date-range form-control ps-14\" type=\"text\"\r\n ngxDaterangepickerMd [singleDatePicker]=\"true\" [minDate]=\"minDate\" [drops]=\"'down'\"\r\n [opens]=\"'right'\" [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\"\r\n [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"scheduleDate\" [autoApply]=\"false\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n name=\"daterange\" [readonly]=\"true\" />\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6 mb-5\">\r\n <label for=\"timePick\" class=\"form-label\">Due time</label>\r\n <input [formControl]=\"scheduleEndTime\" type=\"time\" class=\"form-control\" id=\"timePick\" placeholder=\"name@example.com\">\r\n </div>\r\n <div class=\"col-6 mb-5\">\r\n <label class=\"form-label\">Approver</label>\r\n <lib-chip-dropdown [data]=\"approversList\" [selectedData]=\"approver.value\" (selectedList)=\"onApproveAdded($event)\" ></lib-chip-dropdown>\r\n\r\n </div>\r\n <div class=\"col-6 mb-5\">\r\n <label for=\"priority\" class=\"form-label\">Priority</label>\r\n <select [formControl]=\"priorityType\" id=\"priority\" class=\"form-select mb-5\">\r\n <option value=\"high\">High</option>\r\n <option value=\"medium\">Medium</option>\r\n <option value=\"medium\">Low</option>\r\n </select>\r\n </div>\r\n\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"toggle-card\" [ngClass]=\"allowedStoreLocation.value ? 'selected' : ''\">\r\n <div class=\"form-check form-switch me-4\">\r\n <input [formControl]=\"allowedStoreLocation\" class=\"form-check-input\" type=\"checkbox\" role=\"switch\" >\r\n </div>\r\n <div>\r\n <div class=\"header\">Geo fencing</div>\r\n <div class=\"desc\">By enabling, the checklist can be filled by the user only when inside the\r\n store.</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"col-12 mb-5\">\r\n <div class=\"toggle-card \" [ngClass]=\"restrictAttendance.value ? 'selected' : ''\">\r\n <div class=\"form-check form-switch me-4\">\r\n <input [formControl]=\"restrictAttendance\" class=\"form-check-input\" type=\"checkbox\" role=\"switch\" >\r\n </div>\r\n <div>\r\n <div class=\"header\">Restrict attendance</div>\r\n <div class=\"desc\">By enabling, user can't be able to clockout without completing the task.\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"col-12\">\r\n <div class=\"d-flex align-items-center justify-content-between mb-5\" >\r\n <h2>Assign</h2>\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1 me-2\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-6\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\">\r\n </rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input [formControl]=\"searchInput\" type=\"text\" data-kt-subscription-table-filter=\"search\"\r\n class=\"form-control form-control-solid w-400px ps-14 mx-1 me-4\"\r\n placeholder=\"Search by Store name\">\r\n </div>\r\n <div (click)=\"addStoreComponent()\" class=\"btn btn-primary\">\r\n <svg class=\"mr-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16602V15.8327M4.16675 9.99935H15.8334\" stroke=\"white\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </path>\r\n </svg>\r\n <span>Add Stote</span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <ng-container *ngIf=\"(assignTableApiState | async) === 'loaded' && assignTableData?.length\" >\r\n <div>\r\n <div class=\"table-responsive\">\r\n <table class=\"w-100 table bottom-border text-nowrap\">\r\n <thead>\r\n <tr>\r\n <th class=\"text-align-left\">\r\n <span><input [formControl]=\"selectAllInput\" class=\"form-check-input h-14px w-14px c-checkbox\" type=\"checkbox\"\r\n name=\"flag\"> <span\r\n class=\"form-check-label mx-4\">StoreName</span></span>\r\n </th>\r\n <th class=\"text-align-left\">\r\n <span>Assigned To</span>\r\n </th>\r\n <th class=\"text-align-left\">\r\n <span>Email </span>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let user of assignTableData\" >\r\n <td>\r\n <input [(ngModel)]=\"user.checkFlag\" (ngModelChange)=\"onUserAssignChange($event, user.id)\" class=\"form-check-input h-14px w-14px userFlag c-checkbox\" type=\"checkbox\"\r\n name=\"flag\" /><span class=\"form-check-label mx-4\">{{user?.storeName}}</span>\r\n </td>\r\n <td>{{user?.userName}}</td>\r\n <td>{{user?.userEmail}}</td>\r\n </tbody>\r\n </table>\r\n </div>\r\n <lib-pagination [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"(assignTableApiState | async) === 'loading' || (assignTableApiState | async) === 'initial'\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container >\r\n <div class=\"d-flex flex-column justify-content-center align-items-center\">\r\n <ng-container *ngIf=\"(assignTableApiState | async) === 'loaded' && !assignTableData?.length\" >\r\n <span class=\"mx-14\"><svg class=\"mx-20 mt-12\" width=\"56\" height=\"56\" viewBox=\"0 0 56 56\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#D1FADF\" />\r\n <path\r\n d=\"M25.09 25C25.3251 24.3317 25.7892 23.7681 26.4 23.4091C27.0108 23.0502 27.7289 22.9189 28.4272 23.0387C29.1255 23.1585 29.7588 23.5215 30.2151 24.0635C30.6713 24.6055 30.9211 25.2915 30.92 26C30.92 28 27.92 29 27.92 29M28 33H28.01M38 28C38 33.5228 33.5228 38 28 38C22.4772 38 18 33.5228 18 28C18 22.4772 22.4772 18 28 18C33.5228 18 38 22.4772 38 28Z\"\r\n stroke=\"#039855\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#ECFDF3\" stroke-width=\"8\" />\r\n </svg>\r\n </span>\r\n <h5 class=\"section-leftheading mt-6 mx-10\">Upload to assign users</h5>\r\n <ul class=\"sub-txt mb-5\">\r\n <li>Click \u201CDownload Template\u201D</li>\r\n <li> Add your data to the template file</li>\r\n <li> Upload it below to assign users</li>\r\n </ul> \r\n </ng-container>\r\n \r\n \r\n <div class=\"d-flex\">\r\n <button #upload (click)=\"file.click()\" class=\"btn btn-primary reupload\">\r\n <span class=\"svg-icon svg-icon-primary me-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"mb-2 mx-1\" width=\"21\"\r\n height=\"20\" viewBox=\"0 0 19 19\" fill=\"none\">\r\n <path\r\n d=\"M18 12.5V15.8333C18 16.2754 17.8244 16.6993 17.5118 17.0118C17.1993 17.3244 16.7754 17.5 16.3333 17.5H4.66667C4.22464 17.5 3.80072 17.3244 3.48816 17.0118C3.17559 16.6993 3 16.2754 3 15.8333V12.5M14.6667 6.66667L10.5 2.5M10.5 2.5L6.33333 6.66667M10.5 2.5V12.5\"\r\n stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"reuploadtext\">\r\n <span *ngIf=\"assignTableData?.length\" >Reupload Template</span>\r\n <span *ngIf=\"!assignTableData?.length\" >Upload Template</span>\r\n </span>\r\n </button>\r\n <input style=\"visibility: hidden;\" type=\"file\" #file\r\n id=\"kt_account_team_size_select_1\" (change)=\"onFileUpload($event)\" />\r\n \r\n <span (click)=\"downloadTemplate()\" class=\"cstm-blu-btn\">\r\n <svg _ngcontent-ng-c842475337=\"\" xmlns=\"http://www.w3.org/2000/svg\" width=\"21\"\r\n height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class=\"mb-1\">\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.5M5.83333 8.33333L10 12.5M10 12.5L14.1667 8.33333M10 12.5V2.5\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </svg>\r\n Download Template\r\n </span>\r\n \r\n </div>\r\n \r\n </div> \r\n </ng-container> \r\n \r\n \r\n \r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".c-card{padding:24px;background:#fff;border-radius:16px}.plain-input{border:none;outline:none;background:transparent;padding:0;margin:0;width:100%;overflow:hidden;color:var(--black, #101828);text-overflow:ellipsis;font-family:Inter;font-size:18px;font-style:normal;font-weight:500;line-height:28px}.plain-input:focus{border-radius:0!important;border:white!important;outline:none!important;box-shadow:none!important}.checklist-name{font-size:20px;font-weight:600;line-height:28px;text-align:left;color:#667085!important}.checklist-desc{font-size:14px;font-weight:400;line-height:18px;text-align:left}:host::ng-deep .date-picker .md-drppicker .btn{line-height:10px!important}:host::ng-deep .date-picker .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .date-picker .md-drppicker.drops-down-right.ltr.show-ranges.shown{top:65px!important}:host::ng-deep .date-picker .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;right:-475px!important;left:unset!important;height:400px!important}:host::ng-deep .date-picker .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .date-picker .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .date-picker .md-drppicker td.active,:host::ng-deep .date-picker .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .date-picker .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .date-picker .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .date-picker .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep .date-picker table th,:host::ng-deep .date-picker table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .date-picker .md-drppicker td.available.prev,:host::ng-deep .date-picker .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .date-picker .md-drppicker td.available.next,:host::ng-deep .date-picker .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .date-picker table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .date-picker .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .date-picker .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .date-picker .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.outer-container{position:relative}.outer-container .form-control{padding-top:0;padding-bottom:0}.outer-container .input-container{border:1px solid black;height:100%;width:100%;display:flex;flex-wrap:wrap;border:1px solid #D0D5DD}.outer-container .input-container input{all:unset;flex:1;min-width:50px}.outer-container .input-container .chip{margin:10px 0 10px 10px;padding:3px 10px;border-radius:16px;background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .chip .initials{color:var(--Primary-600, #00A3FF);font-size:12px;font-weight:500;line-height:18px}.outer-container .input-container .chip:nth-child(1){margin-left:0}.toggle-card{padding:16px;display:flex;align-items:center;border-radius:8px;border:1px solid #EAECF0;background:#fff}.toggle-card .header{color:#344054;font-size:16px;font-weight:500;line-height:24px}.toggle-card .desc{color:var(--Gray-500, #667085);font-size:14px;font-weight:400;line-height:20px}.toggle-card.selected{border:1px solid #6BCAFF}.toggle-card.selected .header{color:#008edf}.toggle-card.selected .desc{color:#00a3ff}.sub-txt{color:#667085;font-size:14px;font-weight:400;line-height:20px;gap:8px}.cstm-blu-btn{padding:8px 14px;border-radius:8px;border:1px solid #EAF8FF;background:#eaf8ff;box-shadow:0 1px 2px #1018280d;color:#009bf3;font-size:14px;font-weight:600;line-height:20px;cursor:pointer;display:flex;align-items:center}.schedule-text{color:#344054;font-size:16px;font-weight:500;line-height:24px}input[type=checkbox].c-checkbox{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}input[type=checkbox].c-checkbox:checked{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}input[type=checkbox].c-checkbox:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}\n"] }]
10124
10145
  }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i2$1.GlobalStateService }, { type: i2$1.PageInfoService }, { type: TraxService }, { type: i6.NgbModal }, { type: i3.ToastService }, { type: i1$2.Router }, { type: i0.ChangeDetectorRef }], propDecorators: { fileInput: [{
10125
10146
  type: ViewChild,
10126
10147
  args: ['file']
@@ -10514,6 +10535,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
10514
10535
  args: [{ selector: 'lib-task-layout', template: "<router-outlet></router-outlet>" }]
10515
10536
  }] });
10516
10537
 
10538
+ dayjs.extend(utc);
10517
10539
  class TaskComponent {
10518
10540
  route;
10519
10541
  router;
@@ -10522,6 +10544,7 @@ class TaskComponent {
10522
10544
  toast;
10523
10545
  TraxService;
10524
10546
  pageInfo;
10547
+ dayjs = dayjs;
10525
10548
  destroy$ = new Subject();
10526
10549
  isExport = false;
10527
10550
  itemsPerPage = 10;
@@ -10571,7 +10594,7 @@ class TaskComponent {
10571
10594
  this.destroy$.complete();
10572
10595
  }
10573
10596
  ngOnInit() {
10574
- this.reloadDate = moment().format('hh:mm:ss A');
10597
+ this.reloadDate = this.dayjs().format('hh:mm:ss A');
10575
10598
  this.gs.dataRangeValue
10576
10599
  .pipe(takeUntil(this.destroy$), debounceTime(300))
10577
10600
  .subscribe((data) => {