tango-app-ui-store-builder 1.2.18 → 1.2.19
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.
- package/esm2022/lib/components/manage-plano/verification-table/verification-table.component.mjs +26 -11
- package/esm2022/lib/components/plano-tools/delete-floor/delete-floor.component.mjs +3 -3
- package/esm2022/lib/components/plano-tools/layout-touchup/layout-touchup.component.mjs +3 -3
- package/esm2022/lib/components/plano-tools/tool-page-header/tool-page-header.component.mjs +3 -3
- package/esm2022/lib/components/plano-tools/tools-parent/tools-parent.component.mjs +3 -3
- package/esm2022/lib/components/popups/publish-plano-modal/publish-plano-modal.component.mjs +1 -1
- package/fesm2022/tango-app-ui-store-builder.mjs +35 -20
- package/fesm2022/tango-app-ui-store-builder.mjs.map +1 -1
- package/lib/components/manage-plano/rollout-table/rollout-table.component.d.ts +4 -4
- package/lib/components/manage-plano/verification-table/verification-table.component.d.ts +6 -5
- package/package.json +1 -1
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, Injectable, inject,
|
|
2
|
+
import { Component, Injectable, inject, ViewChild, Input, EventEmitter, Output, HostListener, ChangeDetectionStrategy, forwardRef, Pipe, ViewChildren, ChangeDetectorRef, NgModule } from '@angular/core';
|
|
3
3
|
import * as i2 from '@angular/router';
|
|
4
4
|
import { NavigationEnd, RouterLink, RouterOutlet, RouterModule, Router } from '@angular/router';
|
|
5
5
|
import * as i2$1 from 'tango-app-ui-global';
|
|
6
6
|
import { GlobalStateService } from 'tango-app-ui-global';
|
|
7
7
|
import * as i5 from '@angular/common';
|
|
8
|
-
import {
|
|
8
|
+
import { CommonModule, DatePipe, NgClass, NgStyle, NgFor, NgIf, TitleCasePipe, UpperCasePipe } from '@angular/common';
|
|
9
9
|
import * as i1$2 from '@angular/forms';
|
|
10
10
|
import { FormControl, FormGroup, FormsModule, FormArray, NG_VALUE_ACCESSOR, Validators, ReactiveFormsModule } from '@angular/forms';
|
|
11
11
|
import * as i7 from '@angular/cdk/drag-drop';
|
|
@@ -29772,6 +29772,9 @@ class PlanoVerificationTableComponent {
|
|
|
29772
29772
|
let data = JSON.parse(localStorage.getItem("header-filters"));
|
|
29773
29773
|
this.clientId = data?.client;
|
|
29774
29774
|
}
|
|
29775
|
+
// Cards are frozen full-bucket totals (independent of search / filter /
|
|
29776
|
+
// tab), so fetch them once per client change — not on every table reload.
|
|
29777
|
+
this.getCards();
|
|
29775
29778
|
this.route.queryParamMap
|
|
29776
29779
|
.pipe(takeUntil(this.destroy$))
|
|
29777
29780
|
.subscribe((params) => {
|
|
@@ -29786,10 +29789,8 @@ class PlanoVerificationTableComponent {
|
|
|
29786
29789
|
key: "tab",
|
|
29787
29790
|
fallback: "all",
|
|
29788
29791
|
});
|
|
29789
|
-
|
|
29790
|
-
|
|
29791
|
-
? "fixture"
|
|
29792
|
-
: this.selectedFilterTab;
|
|
29792
|
+
// VM card/tab removed — taskPending maps straight through.
|
|
29793
|
+
this.appliedFilters.taskPending = this.selectedFilterTab;
|
|
29793
29794
|
this.limit = getQueryParamNumber({
|
|
29794
29795
|
params,
|
|
29795
29796
|
key: "limit",
|
|
@@ -29848,7 +29849,6 @@ class PlanoVerificationTableComponent {
|
|
|
29848
29849
|
if (res && res?.code == 200) {
|
|
29849
29850
|
this.totalItems = res?.data?.count;
|
|
29850
29851
|
this.planogramsList = res?.data?.data ?? [];
|
|
29851
|
-
this.pendingDetails = res?.data?.pendingDetails?.[0] || [];
|
|
29852
29852
|
if (this.totalItems < 10) {
|
|
29853
29853
|
this.paginationSizes = [this.totalItems];
|
|
29854
29854
|
}
|
|
@@ -29864,6 +29864,23 @@ class PlanoVerificationTableComponent {
|
|
|
29864
29864
|
});
|
|
29865
29865
|
this.totalItems = this.planogramsList.length;
|
|
29866
29866
|
}
|
|
29867
|
+
// Frozen verification cards (allStores / layoutComplete / fixturePending /
|
|
29868
|
+
// zonePending), computed over the full active-store bucket independent of any UI
|
|
29869
|
+
// filter. Fetched once per client change so search / filter / pagination never
|
|
29870
|
+
// recompute them (also keeps the heavy card aggregation off the table requests).
|
|
29871
|
+
getCards() {
|
|
29872
|
+
this.storeBuilderService
|
|
29873
|
+
.getPlanoCards({ clientId: this.clientId })
|
|
29874
|
+
.pipe(takeUntil(this.destroy$))
|
|
29875
|
+
.subscribe({
|
|
29876
|
+
next: (res) => {
|
|
29877
|
+
if (res && res?.code == 200) {
|
|
29878
|
+
this.pendingDetails = res?.data || {};
|
|
29879
|
+
}
|
|
29880
|
+
},
|
|
29881
|
+
error: () => { },
|
|
29882
|
+
});
|
|
29883
|
+
}
|
|
29867
29884
|
openBulkUploadModal() {
|
|
29868
29885
|
const modelRef = this.ngbModal.open(BulkUploadPlanogramComponent);
|
|
29869
29886
|
}
|
|
@@ -29925,10 +29942,8 @@ class PlanoVerificationTableComponent {
|
|
|
29925
29942
|
this.appliedFilters[ele.title.toLowerCase()] = ele.selected;
|
|
29926
29943
|
}
|
|
29927
29944
|
});
|
|
29945
|
+
// VM card/tab removed.
|
|
29928
29946
|
let task = this.selectedFilterTab;
|
|
29929
|
-
if (this.selectedFilterTab == "vm") {
|
|
29930
|
-
task = "fixture";
|
|
29931
|
-
}
|
|
29932
29947
|
if (this.appliedFilters["planogram status"]?.length) {
|
|
29933
29948
|
this.appliedFilters["fixture"].push(...this.appliedFilters["planogram status"]);
|
|
29934
29949
|
this.appliedFilters["fixture"] = [...new Set(this.appliedFilters["fixture"].map((ele) => ele))];
|
|
@@ -30221,11 +30236,11 @@ class PlanoVerificationTableComponent {
|
|
|
30221
30236
|
});
|
|
30222
30237
|
}
|
|
30223
30238
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PlanoVerificationTableComponent, deps: [{ token: i1$1.NgbModal }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: StoreBuilderService }, { token: i2$1.GlobalStateService }, { token: i2$1.PageInfoService }], target: i0.ɵɵFactoryTarget.Component });
|
|
30224
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PlanoVerificationTableComponent, selector: "lib-plano-verification-table", ngImport: i0, template: "<div class=\"row mx-0 my-5 gap-2\">\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'all' }\" (click)=\"filterTable('all')\">\r\n <h3>{{ pendingDetails?.allStores || 0 }}</h3>\r\n <p>Total stores</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'layout' }\" (click)=\"filterTable('layout')\">\r\n <h3>{{ pendingDetails?.layoutComplete ?? 0 }}</h3>\r\n <p>Layout verification completed</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'fixture' }\" (click)=\"filterTable('fixture')\">\r\n <h3>{{ pendingDetails?.fixturePending ?? 0 }}</h3>\r\n <p>Fixture verification pending</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'vm' }\" (click)=\"filterTable('vm')\">\r\n <h3>{{ pendingDetails?.fixturePending ?? 0 }}</h3>\r\n <p>VM verification pending</p>\r\n </div>\r\n <!-- [ZONE-VERIFICATION] additive \u2014 5th stat card -->\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'zone' }\" (click)=\"filterTable('zone')\">\r\n <h3>{{ pendingDetails?.zonePending ?? 0 }}</h3>\r\n <p>Zone verification pending</p>\r\n </div>\r\n</div>\r\n\r\n<div class=\"content-wrapper\">\r\n <div [class.restrict-interaction]=\"isButtonLoading\">\r\n <!-- Manage Planogram view header -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-5\">\r\n <div>\r\n <h4>All Planograms</h4>\r\n <span>{{ totalItems }} - Total Records</span>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <div style=\"position: relative\">\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"searchTerm\"\r\n (change)=\"onSearch()\"\r\n style=\"padding-left: 3rem; padding-right: 3rem\"\r\n class=\"form-control\"\r\n name=\"search\"\r\n autocomplete=\"off\"\r\n placeholder=\"Search\"\r\n />\r\n\r\n <span class=\"search-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <line x1=\"13\" y1=\"13\" x2=\"16\" y2=\"16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n </svg>\r\n </span>\r\n\r\n <button *ngIf=\"searchTerm\" type=\"button\" aria-label=\"Clear\" (click)=\"searchTerm = ''; onSearch()\" class=\"clear-search\">\r\n <svg width=\"64px\" height=\"64px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path d=\"M9 9L15 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <path d=\"M15 9L9 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <circle\r\n cx=\"12\"\r\n cy=\"12\"\r\n r=\"9\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n ></circle>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- <button type=\"button\" (click)=\"openBulkUploadModal()\" class=\"btn btn-outline text-nowrap\">\r\n <svg class=\"me-2\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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=\"currentColor\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n Bulk Upload\r\n </button> -->\r\n\r\n <!-- <button type=\"button\" class=\"btn btn-outline d-line-flex align-items-center text-nowrap\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n Filter\r\n </button> -->\r\n\r\n <plano-filter [clientId]=\"clientId\" [data]=\"filterObject\" (applyFilters)=\"applyFilters($event)\"\r\n (resetFilters)=\"applyFilters($event)\" [config]=\"{ 'Merchandise compliance': false }\"></plano-filter>\r\n\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader\"\r\n [disabled]=\"!planogramsList.length\">\r\n \r\n <svg *ngIf=\"!isButtonLoading\" 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\" stroke-linejoin=\"round\"></path>\r\n </svg>\r\n \r\n <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n <span class=\"ms-2\"> Export</span>\r\n </button>\r\n\r\n <!-- <button type=\"button\" (click)=\"onClickCreatePlanogram()\" class=\"btn btn-primary d-inline-flex align-items-center\">\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=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\"\r\n stroke=\"white\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <span class=\"ms-2 text-white\">Create </span>\r\n </button> -->\r\n\r\n <!-- <lib-filters [dataObject]=\"filterObject\" (appliedFilters)=\"applyFilters($event)\"></lib-filters> -->\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"isPageLoading\">\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 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 <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\"\r\n *ngIf=\"!isPageLoading && planogramsList.length === 0\"\r\n >\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 manage planogram table</div>\r\n </div>\r\n\r\n <!-- Manage Planogram list view -->\r\n <section id=\"list-view\" *ngIf=\"!isPageLoading && planogramsList.length !== 0\">\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>\r\n <span (click)=\"onSortTable('storeName')\" class=\"cursor-pointer\">\r\n Store Name\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'storeName' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'storeName' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th>\r\n <span (click)=\"onSortTable('layoutName')\" class=\"cursor-pointer\">\r\n Layout Name\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'layoutName' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'layoutName' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th>\r\n Country\r\n </th>\r\n <th>\r\n City\r\n </th>\r\n <th>\r\n <span class=\"cursor-pointer d-flex align-items-center\">\r\n Plano Completion %\r\n <!-- <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'planoProgress' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'planoProgress' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i> -->\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n ngbTooltip=\"% of overall planogram completion\"\r\n class=\"ms-2\"\r\n >\r\n <g clip-path=\"url(#clip0_844_17538)\">\r\n <path\r\n d=\"M8.00065 10.6663V7.99967M8.00065 5.33301H8.00732M14.6673 7.99967C14.6673 11.6816 11.6826 14.6663 8.00065 14.6663C4.31875 14.6663 1.33398 11.6816 1.33398 7.99967C1.33398 4.31778 4.31875 1.33301 8.00065 1.33301C11.6826 1.33301 14.6673 4.31778 14.6673 7.99967Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_844_17538\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </th>\r\n <th>\r\n <span (click)=\"onSortTable('layoutCount')\" class=\"cursor-pointer\">\r\n Layout\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'layoutCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'layoutCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('fixtureCount')\" class=\"cursor-pointer\">\r\n No of Fixtures\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'fixtureCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('vmCount')\" class=\"cursor-pointer\">\r\n No of VMs\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'vmCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'vmCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <!-- [ZONE-VERIFICATION] additive \u2014 Zone status header -->\r\n <th class=\"text-center\">\r\n <span>Zone</span>\r\n </th>\r\n <th class=\"text-center\">\r\n <ng-template #tooltip>\r\n <div class=\"w-100\">\r\n <h6>Total store capacity</h6>\r\n <span> Combining product capacity of all fixtures </span>\r\n </div>\r\n </ng-template>\r\n <span (click)=\"onSortTable('fixtureCapacity')\" class=\"cursor-pointer d-flex align-items-center\">\r\n Store Capacity\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'fixtureCapacity' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureCapacity' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n [ngbTooltip]=\"tooltip\"\r\n class=\"ms-2\"\r\n >\r\n <g clip-path=\"url(#clip0_844_17538)\">\r\n <path\r\n d=\"M8.00065 10.6663V7.99967M8.00065 5.33301H8.00732M14.6673 7.99967C14.6673 11.6816 11.6826 14.6663 8.00065 14.6663C4.31875 14.6663 1.33398 11.6816 1.33398 7.99967C1.33398 4.31778 4.31875 1.33301 8.00065 1.33301C11.6826 1.33301 14.6673 4.31778 14.6673 7.99967Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_844_17538\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('lastUpdate')\" class=\"cursor-pointer\">\r\n Last update\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'lastUpdate' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'lastUpdate' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span class=\"cursor-pointer\">\r\n Planogram Status\r\n <!-- <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'planogramStatus' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'planogramStatus' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i> -->\r\n </span>\r\n </th>\r\n <th></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let plano of planogramsList\">\r\n <td>\r\n <div class=\"d-flex align-items-center\">\r\n <a (click)=\"redirectStore(plano.storeId)\" class=\"cursor-pointer text-decoration-underline\">\r\n {{ plano.storeName }}</a\r\n >\r\n </div>\r\n </td>\r\n <td>\r\n <a\r\n [routerLink]=\"['/manage/planogram/manage-planogram']\"\r\n [queryParams]=\"{ planoId: plano._id, floorId: plano?.layoutDetails?.[0]?.id }\"\r\n class=\"text-decoration-underline\"\r\n >\r\n {{\r\n plano.layoutName\r\n }}\r\n </a>\r\n </td>\r\n <td>\r\n {{plano?.country}}\r\n </td>\r\n <td>\r\n {{plano?.city}}\r\n </td>\r\n <td>\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-9\">\r\n <div class=\"progress\" style=\"height: 4px\">\r\n <div\r\n class=\"progress-bar\"\r\n [ngClass]=\"\r\n [25, 50].includes(getProgressValue(plano))\r\n ? 'bg-warning'\r\n : 'bg-success'\r\n \"\r\n role=\"progressbar\"\r\n [style]=\"getProgressValue(plano) ? 'width: ' + getProgressValue(plano) + '%' : 'width:25%'\"\r\n [attr.aria-valuenow]=\"getProgressValue(plano)\"\r\n aria-valuemin=\"0\"\r\n aria-valuemax=\"100\"\r\n ></div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">{{ getProgressValue(plano) }}%</div>\r\n </div>\r\n <!-- <div class=\"row align-items-center\">\r\n <div class=\"col-8 progress\" style=\"height: 4px; border-radius: 4px;\">\r\n <div\r\n class=\"progress-bar\"\r\n role=\"progressbar\"\r\n style=\"width: 25%\"\r\n aria-valuenow=\"25\"\r\n aria-valuemin=\"0\"\r\n aria-valuemax=\"100\"\r\n ></div>\r\n </div>\r\n <div class=\"col-4\">\r\n {{ plano.planoCompletion }}\r\n </div>\r\n </div> -->\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano?.layoutCount === 1 ? 1 : updateFloor(plano) }}\r\n </span>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 14 14\"\r\n fill=\"none\"\r\n ngbTooltip=\"Didn\u2019t respond within the due date\"\r\n *ngIf=\"showBreach(plano, 'layout')\"\r\n >\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33463 9.33398 9.33463C11.084 9.33463 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513Z\"\r\n fill=\"#FECDCA\"\r\n />\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33464 9.33398 9.33464C11.084 9.33464 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513ZM2.33398 8.7513V12.8346\"\r\n stroke=\"#D92D20\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <div\r\n class=\"indicator short\"\r\n [ngClass]=\"getTaskStatus(plano, 'layout') || 'taskAssigned'\"\r\n *ngIf=\"!showBreach(plano, 'layout')\"\r\n >\r\n <svg\r\n width=\"8\"\r\n height=\"7\"\r\n viewBox=\"0 0 8 7\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"{{ getTaskTooltip(plano, 'layout') || 'Task Assigned' }}\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M6.97284 0.310967L2.79617 4.3418L1.68784 3.15763C1.48367 2.96513 1.16284 2.95347 0.929505 3.1168C0.702005 3.28597 0.637838 3.58347 0.777838 3.82263L2.09034 5.95763C2.21867 6.15597 2.44034 6.27847 2.69117 6.27847C2.93034 6.27847 3.15784 6.15597 3.28617 5.95763C3.49617 5.68347 7.50367 0.905967 7.50367 0.905967C8.02867 0.3693 7.39284 -0.1032 6.97284 0.305134V0.310967Z\"\r\n fill=\"#667085\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano.fixtureCount }}\r\n </span>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 14 14\"\r\n fill=\"none\"\r\n ngbTooltip=\"Didn\u2019t respond within the due date\"\r\n *ngIf=\"showBreach(plano, 'fixture')\"\r\n >\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33463 9.33398 9.33463C11.084 9.33463 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513Z\"\r\n fill=\"#FECDCA\"\r\n />\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33464 9.33398 9.33464C11.084 9.33464 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513ZM2.33398 8.7513V12.8346\"\r\n stroke=\"#D92D20\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <div\r\n class=\"indicator short\"\r\n [ngClass]=\"getTaskStatus(plano, 'fixture') || 'taskAssigned'\"\r\n *ngIf=\"!showBreach(plano, 'fixture')\"\r\n >\r\n <svg\r\n width=\"8\"\r\n height=\"7\"\r\n viewBox=\"0 0 8 7\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"{{ getTaskTooltip(plano, 'fixture') || 'Task Assigned' }}\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M6.97284 0.310967L2.79617 4.3418L1.68784 3.15763C1.48367 2.96513 1.16284 2.95347 0.929505 3.1168C0.702005 3.28597 0.637838 3.58347 0.777838 3.82263L2.09034 5.95763C2.21867 6.15597 2.44034 6.27847 2.69117 6.27847C2.93034 6.27847 3.15784 6.15597 3.28617 5.95763C3.49617 5.68347 7.50367 0.905967 7.50367 0.905967C8.02867 0.3693 7.39284 -0.1032 6.97284 0.305134V0.310967Z\"\r\n fill=\"#667085\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano.vmCount }}\r\n </span>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 14 14\"\r\n fill=\"none\"\r\n ngbTooltip=\"Didn\u2019t respond within the due date\"\r\n *ngIf=\"showBreach(plano, 'fixture')\"\r\n >\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33463 9.33398 9.33463C11.084 9.33463 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513Z\"\r\n fill=\"#FECDCA\"\r\n />\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33464 9.33398 9.33464C11.084 9.33464 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513ZM2.33398 8.7513V12.8346\"\r\n stroke=\"#D92D20\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <div\r\n class=\"indicator short\"\r\n [ngClass]=\"getTaskStatus(plano, 'vm') || 'taskAssigned'\"\r\n *ngIf=\"!showBreach(plano, 'fixture')\"\r\n >\r\n <svg\r\n width=\"8\"\r\n height=\"7\"\r\n viewBox=\"0 0 8 7\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"{{ getTaskTooltip(plano, 'vm') || 'Task Assigned' }}\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M6.97284 0.310967L2.79617 4.3418L1.68784 3.15763C1.48367 2.96513 1.16284 2.95347 0.929505 3.1168C0.702005 3.28597 0.637838 3.58347 0.777838 3.82263L2.09034 5.95763C2.21867 6.15597 2.44034 6.27847 2.69117 6.27847C2.93034 6.27847 3.15784 6.15597 3.28617 5.95763C3.49617 5.68347 7.50367 0.905967 7.50367 0.905967C8.02867 0.3693 7.39284 -0.1032 6.97284 0.305134V0.310967Z\"\r\n fill=\"#667085\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </td>\r\n <!-- [ZONE-VERIFICATION] additive \u2014 Zone status cell -->\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 14 14\"\r\n fill=\"none\"\r\n ngbTooltip=\"Didn\u2019t respond within the due date\"\r\n *ngIf=\"getZoneStatus(plano) === 'flag'\"\r\n >\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33463 9.33398 9.33463C11.084 9.33463 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513Z\"\r\n fill=\"#FECDCA\"\r\n />\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33464 9.33398 9.33464C11.084 9.33464 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513ZM2.33398 8.7513V12.8346\"\r\n stroke=\"#D92D20\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <div\r\n class=\"indicator short\"\r\n [ngClass]=\"getZoneStatus(plano)\"\r\n *ngIf=\"getZoneStatus(plano) !== 'flag'\"\r\n >\r\n <svg\r\n width=\"8\"\r\n height=\"7\"\r\n viewBox=\"0 0 8 7\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"{{ getZoneTooltip(plano) }}\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M6.97284 0.310967L2.79617 4.3418L1.68784 3.15763C1.48367 2.96513 1.16284 2.95347 0.929505 3.1168C0.702005 3.28597 0.637838 3.58347 0.777838 3.82263L2.09034 5.95763C2.21867 6.15597 2.44034 6.27847 2.69117 6.27847C2.93034 6.27847 3.15784 6.15597 3.28617 5.95763C3.49617 5.68347 7.50367 0.905967 7.50367 0.905967C8.02867 0.3693 7.39284 -0.1032 6.97284 0.305134V0.310967Z\"\r\n fill=\"#667085\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano?.fixtureCapacity ?? 0 }}\r\n </span>\r\n </div>\r\n </td>\r\n <td class=\"text-center\">\r\n <span [ngbTooltip]=\"plano?.lastUpdate | date : 'medium'\">\r\n {{ plano?.lastUpdate | date }}\r\n </span>\r\n </td>\r\n <td class=\"text-center\">\r\n <div class=\"badge\" [ngClass]=\"getStatusBadge(plano)\">\r\n {{ getStatus(plano) }}\r\n </div>\r\n </td>\r\n <!-- <td>\r\n <div class=\"d-flex align-items-center gap-2 justify-content-center\">\r\n <svg width=\"21\" height=\"22\" viewBox=\"0 0 21 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_17_71425)\">\r\n <path\r\n d=\"M12.1971 18.7144C12.0464 18.9742 11.8302 19.1898 11.5699 19.3397C11.3097 19.4896 11.0146 19.5685 10.7143 19.5685C10.414 19.5685 10.1189 19.4896 9.85866 19.3397C9.59842 19.1898 9.38212 18.9742 9.23143 18.7144M15.8571 7.57157C15.8571 6.2076 15.3153 4.89949 14.3508 3.93502C13.3864 2.97055 12.0783 2.42871 10.7143 2.42871C9.35032 2.42871 8.04221 2.97055 7.07774 3.93502C6.11326 4.89949 5.57143 6.2076 5.57143 7.57157C5.57143 13.5716 3 15.2859 3 15.2859H18.4286C18.4286 15.2859 15.8571 13.5716 15.8571 7.57157Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M2.08574 8.04805C1.55611 8.04805 1.12146 7.61768 1.17082 7.09036C1.286 5.85989 1.627 4.71322 2.19383 3.65034C2.75229 2.60318 3.46062 1.69605 4.31882 0.928939C4.71052 0.578823 5.30965 0.673501 5.62062 1.09695C5.93175 1.52062 5.83525 2.1121 5.45225 2.47212C4.82875 3.05819 4.30987 3.74239 3.89559 4.52471C3.47303 5.32267 3.20776 6.17833 3.0998 7.09169C3.03766 7.61747 2.61518 8.04805 2.08574 8.04805ZM19.3431 8.04805C18.8134 8.04805 18.3908 7.6171 18.3287 7.09105C18.2209 6.17793 17.9556 5.32248 17.5326 4.52471C17.118 3.74258 16.5993 3.05852 15.9765 2.47254C15.5937 2.11226 15.4973 1.5207 15.8085 1.09696C16.1196 0.673433 16.7187 0.578551 17.1107 0.928571C17.9693 1.6954 18.6778 2.60266 19.2363 3.65034C19.8032 4.71381 20.1438 5.86068 20.2581 7.09095C20.3071 7.61809 19.8725 8.04805 19.3431 8.04805Z\"\r\n fill=\"#667085\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_17_71425\">\r\n <rect width=\"20.5714\" height=\"20.5714\" fill=\"white\" transform=\"translate(0.428711 0.714355)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n <svg width=\"23\" height=\"24\" viewBox=\"0 0 23 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_139_112685)\">\r\n <path\r\n d=\"M12.4843 21.4302C12.3336 21.69 12.1173 21.9057 11.857 22.0556C11.5968 22.2055 11.3017 22.2844 11.0014 22.2844C10.7011 22.2844 10.406 22.2055 10.1458 22.0556C9.88553 21.9057 9.66923 21.69 9.51854 21.4302M16.1443 10.2874C16.1443 8.92342 15.6024 7.61531 14.6379 6.65084C13.6735 5.68637 12.3654 5.14453 11.0014 5.14453C9.63742 5.14453 8.32932 5.68637 7.36485 6.65084C6.40037 7.61531 5.85854 8.92342 5.85854 10.2874C5.85854 16.2874 3.28711 18.0017 3.28711 18.0017H18.7157C18.7157 18.0017 16.1443 16.2874 16.1443 10.2874Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M2.37187 10.7634C1.84224 10.7634 1.40759 10.333 1.45695 9.80569C1.57213 8.57522 1.91313 7.42855 2.47997 6.36567C3.03842 5.31851 3.74675 4.41138 4.60496 3.64427C4.99665 3.29415 5.59578 3.38883 5.90675 3.81228C6.21788 4.23595 6.12138 4.82744 5.73838 5.18745C5.11489 5.77352 4.596 6.45772 4.18172 7.24004C3.75916 8.038 3.4939 8.89366 3.38594 9.80702C3.32379 10.3328 2.90131 10.7634 2.37187 10.7634ZM19.6292 10.7634C19.0995 10.7634 18.6769 10.3324 18.6148 9.80638C18.507 8.89326 18.2417 8.03781 17.8188 7.24004C17.4041 6.45791 16.8854 5.77385 16.2627 5.18787C15.8798 4.8276 15.7835 4.23603 16.0947 3.81229C16.4057 3.38876 17.0049 3.29388 17.3968 3.6439C18.2554 4.41073 18.964 5.31799 19.5224 6.36567C20.0893 7.42914 20.4299 8.57601 20.5442 9.80628C20.5932 10.3334 20.1586 10.7634 19.6292 10.7634Z\"\r\n fill=\"#667085\"\r\n />\r\n </g>\r\n <path\r\n d=\"M17 1C19.7614 1 22 3.23858 22 6C22 8.76142 19.7614 11 17 11C14.2386 11 12 8.76142 12 6C12 3.23858 14.2386 1 17 1Z\"\r\n fill=\"#FF0000\"\r\n stroke=\"white\"\r\n stroke-width=\"2\"\r\n />\r\n <defs>\r\n <clipPath id=\"clip0_139_112685\">\r\n <rect width=\"20.5714\" height=\"20.5714\" fill=\"white\" transform=\"translate(0.714844 3.42969)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n <div class=\"dropdown\">\r\n <button class=\"btn btn-link p-0\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M11 12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M11 19C11 19.5523 11.4477 20 12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M11 5C11 5.55228 11.4477 6 12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li><a class=\"dropdown-item cursor-pointer\">Edit</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer\">Duplicate</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer text-danger\">Delete</a></li>\r\n </ul>\r\n </div>\r\n </div>\r\n </td> -->\r\n <td>\r\n <a\r\n [routerLink]=\"['/manage/planogram/manage-planogram']\"\r\n [queryParams]=\"{ planoId: plano._id, floorId: plano?.layoutDetails?.id }\"\r\n >\r\n <svg\r\n width=\"23\"\r\n height=\"24\"\r\n viewBox=\"0 0 23 24\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n *ngIf=\"getSubmit(plano)\"\r\n >\r\n <path\r\n d=\"M10.1395 6.85728H4.13946C3.6848 6.85728 3.24876 7.0379 2.92727 7.35939C2.60578 7.68088 2.42517 8.11691 2.42517 8.57157V20.5716C2.42517 21.0262 2.60578 21.4623 2.92727 21.7838C3.24876 22.1052 3.6848 22.2859 4.13946 22.2859H16.1395C16.5941 22.2859 17.0301 22.1052 17.3516 21.7838C17.6731 21.4623 17.8537 21.0262 17.8537 20.5716V14.5716M16.568 5.57157C16.909 5.23058 17.3715 5.03901 17.8537 5.03901C18.336 5.03901 18.7985 5.23058 19.1395 5.57157C19.4805 5.91256 19.672 6.37505 19.672 6.85728C19.672 7.33952 19.4805 7.80201 19.1395 8.143L10.9966 16.2859L7.56803 17.143L8.42517 13.7144L16.568 5.57157Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M17 1C19.7614 1 22 3.23858 22 6C22 8.76142 19.7614 11 17 11C14.2386 11 12 8.76142 12 6C12 3.23858 14.2386 1 17 1Z\"\r\n fill=\"#FF0000\"\r\n stroke=\"white\"\r\n stroke-width=\"2\"\r\n />\r\n </svg>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\"\r\n height=\"22\"\r\n viewBox=\"0 0 21 22\"\r\n fill=\"none\"\r\n *ngIf=\"!getSubmit(plano)\"\r\n >\r\n <g clip-path=\"url(#clip0_844_18318)\">\r\n <path\r\n d=\"M9.85686 4.14249H3.85686C3.40221 4.14249 2.96617 4.32311 2.64468 4.6446C2.32319 4.96609 2.14258 5.40212 2.14258 5.85678V17.8568C2.14258 18.3114 2.32319 18.7475 2.64468 19.069C2.96617 19.3905 3.40221 19.5711 3.85686 19.5711H15.8569C16.3115 19.5711 16.7476 19.3905 17.069 19.069C17.3905 18.7475 17.5712 18.3114 17.5712 17.8568V11.8568M16.2854 2.85678C16.6264 2.51579 17.0889 2.32422 17.5712 2.32422C18.0534 2.32422 18.5159 2.51579 18.8569 2.85678C19.1979 3.19777 19.3894 3.66026 19.3894 4.14249C19.3894 4.62473 19.1979 5.08722 18.8569 5.42821L10.714 13.5711L7.28544 14.4282L8.14258 10.9996L16.2854 2.85678Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_844_18318\">\r\n <rect width=\"20.5714\" height=\"20.5714\" fill=\"white\" transform=\"translate(0.427734 0.713867)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </a>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </section>\r\n\r\n <!-- Manage Planogram grid view -->\r\n <!-- <ng-template #gridView>\r\n <section id=\"grid-view\">\r\n <div class=\"row gx-6 gy-4\">\r\n <div class=\"col-md-4\" *ngFor=\"let fixture of fixtureTemplatesList\">\r\n <div class=\"card\">\r\n <div class=\"card-img\">\r\n <div class=\"card-action dropdown\">\r\n <button class=\"btn btn-light px-4 py-3\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n <i class=\"bi bi-three-dots-vertical\"></i>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li><a class=\"dropdown-item cursor-pointer\">Edit</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer\">Duplicate</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer text-danger\">Delete</a></li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <h3>{{ fixture.name }}</h3>\r\n <div class=\"badge\" [ngClass]=\"fixture.status\">{{ fixture.status | titlecase }}</div>\r\n </div>\r\n <div class=\"d-flex gap-2\">\r\n <div *ngFor=\"let subBrand of fixture.subBrand; let i = index\">\r\n <span *ngIf=\"i != 0\" class=\"me-2 card-tagline\">•</span>\r\n <div class=\"badge\">{{ subBrand }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template> -->\r\n\r\n <!-- Pagination -->\r\n <lib-pagination\r\n [itemsPerPage]=\"limit\"\r\n [currentPage]=\"offset\"\r\n [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\"\r\n [pageSize]=\"paginationSize()\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"\r\n *ngIf=\"!isPageLoading && planogramsList.length !== 0\"\r\n >\r\n </lib-pagination>\r\n </div>\r\n</div>\r\n", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=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}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=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}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#f2f4f7;background:#667085}.badge.yetToComplete{background:#f2f4f7;color:#667085}.badge.yetToAssign{background:#eaecf5;color:#363f72}.badge.taskAssigned{background:#e0eaff;color:#7a5af8}.badge.reviewPending{background:#fef0c7;color:#f79009}.badge.completed{background:#d1fadf;color:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 330px);height:100%;padding:16px 24px}.badgeStyle{color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px;background:#f2f4f7}.primaryBadgeStyle{color:var(--Gray-700, #009BF3);text-align:center;font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px;background:#eaf8ff}\n"], dependencies: [{ kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: PlanoFilterComponent, selector: "plano-filter", inputs: ["clientId", "data", "config"], outputs: ["applyFilters", "resetFilters", "filterChanged"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
|
|
30239
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PlanoVerificationTableComponent, selector: "lib-plano-verification-table", ngImport: i0, template: "<div class=\"row mx-0 my-5 gap-2\">\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'all' }\" (click)=\"filterTable('all')\">\r\n <h3>{{ pendingDetails?.allStores || 0 }}</h3>\r\n <p>Total stores</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'layout' }\" (click)=\"filterTable('layout')\">\r\n <h3>{{ pendingDetails?.layoutComplete ?? 0 }}</h3>\r\n <p>Layout verification completed</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'fixture' }\" (click)=\"filterTable('fixture')\">\r\n <h3>{{ pendingDetails?.fixturePending ?? 0 }}</h3>\r\n <p>Fixture verification pending</p>\r\n </div>\r\n <!-- [VM CARD REMOVED] VM verification card hidden \u2014 not needed for now.\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'vm' }\" (click)=\"filterTable('vm')\">\r\n <h3>{{ pendingDetails?.fixturePending ?? 0 }}</h3>\r\n <p>VM verification pending</p>\r\n </div>\r\n -->\r\n <!-- [ZONE-VERIFICATION] additive \u2014 5th stat card -->\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'zone' }\" (click)=\"filterTable('zone')\">\r\n <h3>{{ pendingDetails?.zonePending ?? 0 }}</h3>\r\n <p>Zone verification pending</p>\r\n </div>\r\n</div>\r\n\r\n<div class=\"content-wrapper\">\r\n <div [class.restrict-interaction]=\"isButtonLoading\">\r\n <!-- Manage Planogram view header -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-5\">\r\n <div>\r\n <h4>All Planograms</h4>\r\n <span>{{ totalItems }} - Total Records</span>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <div style=\"position: relative\">\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"searchTerm\"\r\n (change)=\"onSearch()\"\r\n style=\"padding-left: 3rem; padding-right: 3rem\"\r\n class=\"form-control\"\r\n name=\"search\"\r\n autocomplete=\"off\"\r\n placeholder=\"Search\"\r\n />\r\n\r\n <span class=\"search-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <line x1=\"13\" y1=\"13\" x2=\"16\" y2=\"16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n </svg>\r\n </span>\r\n\r\n <button *ngIf=\"searchTerm\" type=\"button\" aria-label=\"Clear\" (click)=\"searchTerm = ''; onSearch()\" class=\"clear-search\">\r\n <svg width=\"64px\" height=\"64px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path d=\"M9 9L15 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <path d=\"M15 9L9 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <circle\r\n cx=\"12\"\r\n cy=\"12\"\r\n r=\"9\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n ></circle>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- <button type=\"button\" (click)=\"openBulkUploadModal()\" class=\"btn btn-outline text-nowrap\">\r\n <svg class=\"me-2\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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=\"currentColor\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n Bulk Upload\r\n </button> -->\r\n\r\n <!-- <button type=\"button\" class=\"btn btn-outline d-line-flex align-items-center text-nowrap\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n Filter\r\n </button> -->\r\n\r\n <plano-filter [clientId]=\"clientId\" [data]=\"filterObject\" (applyFilters)=\"applyFilters($event)\"\r\n (resetFilters)=\"applyFilters($event)\" [config]=\"{ 'Merchandise compliance': false }\"></plano-filter>\r\n\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader\"\r\n [disabled]=\"!planogramsList.length\">\r\n \r\n <svg *ngIf=\"!isButtonLoading\" 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\" stroke-linejoin=\"round\"></path>\r\n </svg>\r\n \r\n <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n <span class=\"ms-2\"> Export</span>\r\n </button>\r\n\r\n <!-- <button type=\"button\" (click)=\"onClickCreatePlanogram()\" class=\"btn btn-primary d-inline-flex align-items-center\">\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=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\"\r\n stroke=\"white\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <span class=\"ms-2 text-white\">Create </span>\r\n </button> -->\r\n\r\n <!-- <lib-filters [dataObject]=\"filterObject\" (appliedFilters)=\"applyFilters($event)\"></lib-filters> -->\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"isPageLoading\">\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 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 <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\"\r\n *ngIf=\"!isPageLoading && planogramsList.length === 0\"\r\n >\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 manage planogram table</div>\r\n </div>\r\n\r\n <!-- Manage Planogram list view -->\r\n <section id=\"list-view\" *ngIf=\"!isPageLoading && planogramsList.length !== 0\">\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>\r\n <span (click)=\"onSortTable('storeName')\" class=\"cursor-pointer\">\r\n Store Name\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'storeName' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'storeName' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th>\r\n <span (click)=\"onSortTable('layoutName')\" class=\"cursor-pointer\">\r\n Layout Name\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'layoutName' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'layoutName' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th>\r\n Country\r\n </th>\r\n <th>\r\n City\r\n </th>\r\n <th>\r\n <span class=\"cursor-pointer d-flex align-items-center\">\r\n Plano Completion %\r\n <!-- <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'planoProgress' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'planoProgress' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i> -->\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n ngbTooltip=\"% of overall planogram completion\"\r\n class=\"ms-2\"\r\n >\r\n <g clip-path=\"url(#clip0_844_17538)\">\r\n <path\r\n d=\"M8.00065 10.6663V7.99967M8.00065 5.33301H8.00732M14.6673 7.99967C14.6673 11.6816 11.6826 14.6663 8.00065 14.6663C4.31875 14.6663 1.33398 11.6816 1.33398 7.99967C1.33398 4.31778 4.31875 1.33301 8.00065 1.33301C11.6826 1.33301 14.6673 4.31778 14.6673 7.99967Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_844_17538\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </th>\r\n <th>\r\n <span (click)=\"onSortTable('layoutCount')\" class=\"cursor-pointer\">\r\n Layout\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'layoutCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'layoutCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('fixtureCount')\" class=\"cursor-pointer\">\r\n No of Fixtures\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'fixtureCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('vmCount')\" class=\"cursor-pointer\">\r\n No of VMs\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'vmCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'vmCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <!-- [ZONE-VERIFICATION] additive \u2014 Zone status header -->\r\n <th class=\"text-center\">\r\n <span>Zone</span>\r\n </th>\r\n <th class=\"text-center\">\r\n <ng-template #tooltip>\r\n <div class=\"w-100\">\r\n <h6>Total store capacity</h6>\r\n <span> Combining product capacity of all fixtures </span>\r\n </div>\r\n </ng-template>\r\n <span (click)=\"onSortTable('fixtureCapacity')\" class=\"cursor-pointer d-flex align-items-center\">\r\n Store Capacity\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'fixtureCapacity' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureCapacity' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n [ngbTooltip]=\"tooltip\"\r\n class=\"ms-2\"\r\n >\r\n <g clip-path=\"url(#clip0_844_17538)\">\r\n <path\r\n d=\"M8.00065 10.6663V7.99967M8.00065 5.33301H8.00732M14.6673 7.99967C14.6673 11.6816 11.6826 14.6663 8.00065 14.6663C4.31875 14.6663 1.33398 11.6816 1.33398 7.99967C1.33398 4.31778 4.31875 1.33301 8.00065 1.33301C11.6826 1.33301 14.6673 4.31778 14.6673 7.99967Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_844_17538\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('lastUpdate')\" class=\"cursor-pointer\">\r\n Last update\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'lastUpdate' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'lastUpdate' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span class=\"cursor-pointer\">\r\n Planogram Status\r\n <!-- <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'planogramStatus' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'planogramStatus' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i> -->\r\n </span>\r\n </th>\r\n <th></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let plano of planogramsList\">\r\n <td>\r\n <div class=\"d-flex align-items-center\">\r\n <a (click)=\"redirectStore(plano.storeId)\" class=\"cursor-pointer text-decoration-underline\">\r\n {{ plano.storeName }}</a\r\n >\r\n </div>\r\n </td>\r\n <td>\r\n <a\r\n [routerLink]=\"['/manage/planogram/manage-planogram']\"\r\n [queryParams]=\"{ planoId: plano._id, floorId: plano?.layoutDetails?.[0]?.id }\"\r\n class=\"text-decoration-underline\"\r\n >\r\n {{\r\n plano.layoutName\r\n }}\r\n </a>\r\n </td>\r\n <td>\r\n {{plano?.country}}\r\n </td>\r\n <td>\r\n {{plano?.city}}\r\n </td>\r\n <td>\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-9\">\r\n <div class=\"progress\" style=\"height: 4px\">\r\n <div\r\n class=\"progress-bar\"\r\n [ngClass]=\"\r\n [25, 50].includes(getProgressValue(plano))\r\n ? 'bg-warning'\r\n : 'bg-success'\r\n \"\r\n role=\"progressbar\"\r\n [style]=\"getProgressValue(plano) ? 'width: ' + getProgressValue(plano) + '%' : 'width:25%'\"\r\n [attr.aria-valuenow]=\"getProgressValue(plano)\"\r\n aria-valuemin=\"0\"\r\n aria-valuemax=\"100\"\r\n ></div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">{{ getProgressValue(plano) }}%</div>\r\n </div>\r\n <!-- <div class=\"row align-items-center\">\r\n <div class=\"col-8 progress\" style=\"height: 4px; border-radius: 4px;\">\r\n <div\r\n class=\"progress-bar\"\r\n role=\"progressbar\"\r\n style=\"width: 25%\"\r\n aria-valuenow=\"25\"\r\n aria-valuemin=\"0\"\r\n aria-valuemax=\"100\"\r\n ></div>\r\n </div>\r\n <div class=\"col-4\">\r\n {{ plano.planoCompletion }}\r\n </div>\r\n </div> -->\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano?.layoutCount === 1 ? 1 : updateFloor(plano) }}\r\n </span>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 14 14\"\r\n fill=\"none\"\r\n ngbTooltip=\"Didn\u2019t respond within the due date\"\r\n *ngIf=\"showBreach(plano, 'layout')\"\r\n >\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33463 9.33398 9.33463C11.084 9.33463 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513Z\"\r\n fill=\"#FECDCA\"\r\n />\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33464 9.33398 9.33464C11.084 9.33464 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513ZM2.33398 8.7513V12.8346\"\r\n stroke=\"#D92D20\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <div\r\n class=\"indicator short\"\r\n [ngClass]=\"getTaskStatus(plano, 'layout') || 'taskAssigned'\"\r\n *ngIf=\"!showBreach(plano, 'layout')\"\r\n >\r\n <svg\r\n width=\"8\"\r\n height=\"7\"\r\n viewBox=\"0 0 8 7\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"{{ getTaskTooltip(plano, 'layout') || 'Task Assigned' }}\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M6.97284 0.310967L2.79617 4.3418L1.68784 3.15763C1.48367 2.96513 1.16284 2.95347 0.929505 3.1168C0.702005 3.28597 0.637838 3.58347 0.777838 3.82263L2.09034 5.95763C2.21867 6.15597 2.44034 6.27847 2.69117 6.27847C2.93034 6.27847 3.15784 6.15597 3.28617 5.95763C3.49617 5.68347 7.50367 0.905967 7.50367 0.905967C8.02867 0.3693 7.39284 -0.1032 6.97284 0.305134V0.310967Z\"\r\n fill=\"#667085\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano.fixtureCount }}\r\n </span>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 14 14\"\r\n fill=\"none\"\r\n ngbTooltip=\"Didn\u2019t respond within the due date\"\r\n *ngIf=\"showBreach(plano, 'fixture')\"\r\n >\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33463 9.33398 9.33463C11.084 9.33463 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513Z\"\r\n fill=\"#FECDCA\"\r\n />\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33464 9.33398 9.33464C11.084 9.33464 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513ZM2.33398 8.7513V12.8346\"\r\n stroke=\"#D92D20\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <div\r\n class=\"indicator short\"\r\n [ngClass]=\"getTaskStatus(plano, 'fixture') || 'taskAssigned'\"\r\n *ngIf=\"!showBreach(plano, 'fixture')\"\r\n >\r\n <svg\r\n width=\"8\"\r\n height=\"7\"\r\n viewBox=\"0 0 8 7\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"{{ getTaskTooltip(plano, 'fixture') || 'Task Assigned' }}\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M6.97284 0.310967L2.79617 4.3418L1.68784 3.15763C1.48367 2.96513 1.16284 2.95347 0.929505 3.1168C0.702005 3.28597 0.637838 3.58347 0.777838 3.82263L2.09034 5.95763C2.21867 6.15597 2.44034 6.27847 2.69117 6.27847C2.93034 6.27847 3.15784 6.15597 3.28617 5.95763C3.49617 5.68347 7.50367 0.905967 7.50367 0.905967C8.02867 0.3693 7.39284 -0.1032 6.97284 0.305134V0.310967Z\"\r\n fill=\"#667085\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano.vmCount }}\r\n </span>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 14 14\"\r\n fill=\"none\"\r\n ngbTooltip=\"Didn\u2019t respond within the due date\"\r\n *ngIf=\"showBreach(plano, 'fixture')\"\r\n >\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33463 9.33398 9.33463C11.084 9.33463 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513Z\"\r\n fill=\"#FECDCA\"\r\n />\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33464 9.33398 9.33464C11.084 9.33464 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513ZM2.33398 8.7513V12.8346\"\r\n stroke=\"#D92D20\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <div\r\n class=\"indicator short\"\r\n [ngClass]=\"getTaskStatus(plano, 'vm') || 'taskAssigned'\"\r\n *ngIf=\"!showBreach(plano, 'fixture')\"\r\n >\r\n <svg\r\n width=\"8\"\r\n height=\"7\"\r\n viewBox=\"0 0 8 7\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"{{ getTaskTooltip(plano, 'vm') || 'Task Assigned' }}\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M6.97284 0.310967L2.79617 4.3418L1.68784 3.15763C1.48367 2.96513 1.16284 2.95347 0.929505 3.1168C0.702005 3.28597 0.637838 3.58347 0.777838 3.82263L2.09034 5.95763C2.21867 6.15597 2.44034 6.27847 2.69117 6.27847C2.93034 6.27847 3.15784 6.15597 3.28617 5.95763C3.49617 5.68347 7.50367 0.905967 7.50367 0.905967C8.02867 0.3693 7.39284 -0.1032 6.97284 0.305134V0.310967Z\"\r\n fill=\"#667085\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </td>\r\n <!-- [ZONE-VERIFICATION] additive \u2014 Zone status cell -->\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 14 14\"\r\n fill=\"none\"\r\n ngbTooltip=\"Didn\u2019t respond within the due date\"\r\n *ngIf=\"getZoneStatus(plano) === 'flag'\"\r\n >\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33463 9.33398 9.33463C11.084 9.33463 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513Z\"\r\n fill=\"#FECDCA\"\r\n />\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33464 9.33398 9.33464C11.084 9.33464 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513ZM2.33398 8.7513V12.8346\"\r\n stroke=\"#D92D20\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <div\r\n class=\"indicator short\"\r\n [ngClass]=\"getZoneStatus(plano)\"\r\n *ngIf=\"getZoneStatus(plano) !== 'flag'\"\r\n >\r\n <svg\r\n width=\"8\"\r\n height=\"7\"\r\n viewBox=\"0 0 8 7\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"{{ getZoneTooltip(plano) }}\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M6.97284 0.310967L2.79617 4.3418L1.68784 3.15763C1.48367 2.96513 1.16284 2.95347 0.929505 3.1168C0.702005 3.28597 0.637838 3.58347 0.777838 3.82263L2.09034 5.95763C2.21867 6.15597 2.44034 6.27847 2.69117 6.27847C2.93034 6.27847 3.15784 6.15597 3.28617 5.95763C3.49617 5.68347 7.50367 0.905967 7.50367 0.905967C8.02867 0.3693 7.39284 -0.1032 6.97284 0.305134V0.310967Z\"\r\n fill=\"#667085\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano?.fixtureCapacity ?? 0 }}\r\n </span>\r\n </div>\r\n </td>\r\n <td class=\"text-center\">\r\n <span [ngbTooltip]=\"plano?.lastUpdate | date : 'medium'\">\r\n {{ plano?.lastUpdate | date }}\r\n </span>\r\n </td>\r\n <td class=\"text-center\">\r\n <div class=\"badge\" [ngClass]=\"getStatusBadge(plano)\">\r\n {{ getStatus(plano) }}\r\n </div>\r\n </td>\r\n <!-- <td>\r\n <div class=\"d-flex align-items-center gap-2 justify-content-center\">\r\n <svg width=\"21\" height=\"22\" viewBox=\"0 0 21 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_17_71425)\">\r\n <path\r\n d=\"M12.1971 18.7144C12.0464 18.9742 11.8302 19.1898 11.5699 19.3397C11.3097 19.4896 11.0146 19.5685 10.7143 19.5685C10.414 19.5685 10.1189 19.4896 9.85866 19.3397C9.59842 19.1898 9.38212 18.9742 9.23143 18.7144M15.8571 7.57157C15.8571 6.2076 15.3153 4.89949 14.3508 3.93502C13.3864 2.97055 12.0783 2.42871 10.7143 2.42871C9.35032 2.42871 8.04221 2.97055 7.07774 3.93502C6.11326 4.89949 5.57143 6.2076 5.57143 7.57157C5.57143 13.5716 3 15.2859 3 15.2859H18.4286C18.4286 15.2859 15.8571 13.5716 15.8571 7.57157Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M2.08574 8.04805C1.55611 8.04805 1.12146 7.61768 1.17082 7.09036C1.286 5.85989 1.627 4.71322 2.19383 3.65034C2.75229 2.60318 3.46062 1.69605 4.31882 0.928939C4.71052 0.578823 5.30965 0.673501 5.62062 1.09695C5.93175 1.52062 5.83525 2.1121 5.45225 2.47212C4.82875 3.05819 4.30987 3.74239 3.89559 4.52471C3.47303 5.32267 3.20776 6.17833 3.0998 7.09169C3.03766 7.61747 2.61518 8.04805 2.08574 8.04805ZM19.3431 8.04805C18.8134 8.04805 18.3908 7.6171 18.3287 7.09105C18.2209 6.17793 17.9556 5.32248 17.5326 4.52471C17.118 3.74258 16.5993 3.05852 15.9765 2.47254C15.5937 2.11226 15.4973 1.5207 15.8085 1.09696C16.1196 0.673433 16.7187 0.578551 17.1107 0.928571C17.9693 1.6954 18.6778 2.60266 19.2363 3.65034C19.8032 4.71381 20.1438 5.86068 20.2581 7.09095C20.3071 7.61809 19.8725 8.04805 19.3431 8.04805Z\"\r\n fill=\"#667085\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_17_71425\">\r\n <rect width=\"20.5714\" height=\"20.5714\" fill=\"white\" transform=\"translate(0.428711 0.714355)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n <svg width=\"23\" height=\"24\" viewBox=\"0 0 23 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_139_112685)\">\r\n <path\r\n d=\"M12.4843 21.4302C12.3336 21.69 12.1173 21.9057 11.857 22.0556C11.5968 22.2055 11.3017 22.2844 11.0014 22.2844C10.7011 22.2844 10.406 22.2055 10.1458 22.0556C9.88553 21.9057 9.66923 21.69 9.51854 21.4302M16.1443 10.2874C16.1443 8.92342 15.6024 7.61531 14.6379 6.65084C13.6735 5.68637 12.3654 5.14453 11.0014 5.14453C9.63742 5.14453 8.32932 5.68637 7.36485 6.65084C6.40037 7.61531 5.85854 8.92342 5.85854 10.2874C5.85854 16.2874 3.28711 18.0017 3.28711 18.0017H18.7157C18.7157 18.0017 16.1443 16.2874 16.1443 10.2874Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M2.37187 10.7634C1.84224 10.7634 1.40759 10.333 1.45695 9.80569C1.57213 8.57522 1.91313 7.42855 2.47997 6.36567C3.03842 5.31851 3.74675 4.41138 4.60496 3.64427C4.99665 3.29415 5.59578 3.38883 5.90675 3.81228C6.21788 4.23595 6.12138 4.82744 5.73838 5.18745C5.11489 5.77352 4.596 6.45772 4.18172 7.24004C3.75916 8.038 3.4939 8.89366 3.38594 9.80702C3.32379 10.3328 2.90131 10.7634 2.37187 10.7634ZM19.6292 10.7634C19.0995 10.7634 18.6769 10.3324 18.6148 9.80638C18.507 8.89326 18.2417 8.03781 17.8188 7.24004C17.4041 6.45791 16.8854 5.77385 16.2627 5.18787C15.8798 4.8276 15.7835 4.23603 16.0947 3.81229C16.4057 3.38876 17.0049 3.29388 17.3968 3.6439C18.2554 4.41073 18.964 5.31799 19.5224 6.36567C20.0893 7.42914 20.4299 8.57601 20.5442 9.80628C20.5932 10.3334 20.1586 10.7634 19.6292 10.7634Z\"\r\n fill=\"#667085\"\r\n />\r\n </g>\r\n <path\r\n d=\"M17 1C19.7614 1 22 3.23858 22 6C22 8.76142 19.7614 11 17 11C14.2386 11 12 8.76142 12 6C12 3.23858 14.2386 1 17 1Z\"\r\n fill=\"#FF0000\"\r\n stroke=\"white\"\r\n stroke-width=\"2\"\r\n />\r\n <defs>\r\n <clipPath id=\"clip0_139_112685\">\r\n <rect width=\"20.5714\" height=\"20.5714\" fill=\"white\" transform=\"translate(0.714844 3.42969)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n <div class=\"dropdown\">\r\n <button class=\"btn btn-link p-0\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M11 12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M11 19C11 19.5523 11.4477 20 12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M11 5C11 5.55228 11.4477 6 12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li><a class=\"dropdown-item cursor-pointer\">Edit</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer\">Duplicate</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer text-danger\">Delete</a></li>\r\n </ul>\r\n </div>\r\n </div>\r\n </td> -->\r\n <td>\r\n <a\r\n [routerLink]=\"['/manage/planogram/manage-planogram']\"\r\n [queryParams]=\"{ planoId: plano._id, floorId: plano?.layoutDetails?.id }\"\r\n >\r\n <svg\r\n width=\"23\"\r\n height=\"24\"\r\n viewBox=\"0 0 23 24\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n *ngIf=\"getSubmit(plano)\"\r\n >\r\n <path\r\n d=\"M10.1395 6.85728H4.13946C3.6848 6.85728 3.24876 7.0379 2.92727 7.35939C2.60578 7.68088 2.42517 8.11691 2.42517 8.57157V20.5716C2.42517 21.0262 2.60578 21.4623 2.92727 21.7838C3.24876 22.1052 3.6848 22.2859 4.13946 22.2859H16.1395C16.5941 22.2859 17.0301 22.1052 17.3516 21.7838C17.6731 21.4623 17.8537 21.0262 17.8537 20.5716V14.5716M16.568 5.57157C16.909 5.23058 17.3715 5.03901 17.8537 5.03901C18.336 5.03901 18.7985 5.23058 19.1395 5.57157C19.4805 5.91256 19.672 6.37505 19.672 6.85728C19.672 7.33952 19.4805 7.80201 19.1395 8.143L10.9966 16.2859L7.56803 17.143L8.42517 13.7144L16.568 5.57157Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M17 1C19.7614 1 22 3.23858 22 6C22 8.76142 19.7614 11 17 11C14.2386 11 12 8.76142 12 6C12 3.23858 14.2386 1 17 1Z\"\r\n fill=\"#FF0000\"\r\n stroke=\"white\"\r\n stroke-width=\"2\"\r\n />\r\n </svg>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\"\r\n height=\"22\"\r\n viewBox=\"0 0 21 22\"\r\n fill=\"none\"\r\n *ngIf=\"!getSubmit(plano)\"\r\n >\r\n <g clip-path=\"url(#clip0_844_18318)\">\r\n <path\r\n d=\"M9.85686 4.14249H3.85686C3.40221 4.14249 2.96617 4.32311 2.64468 4.6446C2.32319 4.96609 2.14258 5.40212 2.14258 5.85678V17.8568C2.14258 18.3114 2.32319 18.7475 2.64468 19.069C2.96617 19.3905 3.40221 19.5711 3.85686 19.5711H15.8569C16.3115 19.5711 16.7476 19.3905 17.069 19.069C17.3905 18.7475 17.5712 18.3114 17.5712 17.8568V11.8568M16.2854 2.85678C16.6264 2.51579 17.0889 2.32422 17.5712 2.32422C18.0534 2.32422 18.5159 2.51579 18.8569 2.85678C19.1979 3.19777 19.3894 3.66026 19.3894 4.14249C19.3894 4.62473 19.1979 5.08722 18.8569 5.42821L10.714 13.5711L7.28544 14.4282L8.14258 10.9996L16.2854 2.85678Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_844_18318\">\r\n <rect width=\"20.5714\" height=\"20.5714\" fill=\"white\" transform=\"translate(0.427734 0.713867)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </a>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </section>\r\n\r\n <!-- Manage Planogram grid view -->\r\n <!-- <ng-template #gridView>\r\n <section id=\"grid-view\">\r\n <div class=\"row gx-6 gy-4\">\r\n <div class=\"col-md-4\" *ngFor=\"let fixture of fixtureTemplatesList\">\r\n <div class=\"card\">\r\n <div class=\"card-img\">\r\n <div class=\"card-action dropdown\">\r\n <button class=\"btn btn-light px-4 py-3\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n <i class=\"bi bi-three-dots-vertical\"></i>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li><a class=\"dropdown-item cursor-pointer\">Edit</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer\">Duplicate</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer text-danger\">Delete</a></li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <h3>{{ fixture.name }}</h3>\r\n <div class=\"badge\" [ngClass]=\"fixture.status\">{{ fixture.status | titlecase }}</div>\r\n </div>\r\n <div class=\"d-flex gap-2\">\r\n <div *ngFor=\"let subBrand of fixture.subBrand; let i = index\">\r\n <span *ngIf=\"i != 0\" class=\"me-2 card-tagline\">•</span>\r\n <div class=\"badge\">{{ subBrand }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template> -->\r\n\r\n <!-- Pagination -->\r\n <lib-pagination\r\n [itemsPerPage]=\"limit\"\r\n [currentPage]=\"offset\"\r\n [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\"\r\n [pageSize]=\"paginationSize()\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"\r\n *ngIf=\"!isPageLoading && planogramsList.length !== 0\"\r\n >\r\n </lib-pagination>\r\n </div>\r\n</div>\r\n", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=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}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=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}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#f2f4f7;background:#667085}.badge.yetToComplete{background:#f2f4f7;color:#667085}.badge.yetToAssign{background:#eaecf5;color:#363f72}.badge.taskAssigned{background:#e0eaff;color:#7a5af8}.badge.reviewPending{background:#fef0c7;color:#f79009}.badge.completed{background:#d1fadf;color:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 330px);height:100%;padding:16px 24px}.badgeStyle{color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px;background:#f2f4f7}.primaryBadgeStyle{color:var(--Gray-700, #009BF3);text-align:center;font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px;background:#eaf8ff}\n"], dependencies: [{ kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: PlanoFilterComponent, selector: "plano-filter", inputs: ["clientId", "data", "config"], outputs: ["applyFilters", "resetFilters", "filterChanged"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
|
|
30225
30240
|
}
|
|
30226
30241
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PlanoVerificationTableComponent, decorators: [{
|
|
30227
30242
|
type: Component,
|
|
30228
|
-
args: [{ selector: "lib-plano-verification-table", template: "<div class=\"row mx-0 my-5 gap-2\">\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'all' }\" (click)=\"filterTable('all')\">\r\n <h3>{{ pendingDetails?.allStores || 0 }}</h3>\r\n <p>Total stores</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'layout' }\" (click)=\"filterTable('layout')\">\r\n <h3>{{ pendingDetails?.layoutComplete ?? 0 }}</h3>\r\n <p>Layout verification completed</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'fixture' }\" (click)=\"filterTable('fixture')\">\r\n <h3>{{ pendingDetails?.fixturePending ?? 0 }}</h3>\r\n <p>Fixture verification pending</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'vm' }\" (click)=\"filterTable('vm')\">\r\n <h3>{{ pendingDetails?.fixturePending ?? 0 }}</h3>\r\n <p>VM verification pending</p>\r\n </div>\r\n <!-- [ZONE-VERIFICATION] additive \u2014 5th stat card -->\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'zone' }\" (click)=\"filterTable('zone')\">\r\n <h3>{{ pendingDetails?.zonePending ?? 0 }}</h3>\r\n <p>Zone verification pending</p>\r\n </div>\r\n</div>\r\n\r\n<div class=\"content-wrapper\">\r\n <div [class.restrict-interaction]=\"isButtonLoading\">\r\n <!-- Manage Planogram view header -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-5\">\r\n <div>\r\n <h4>All Planograms</h4>\r\n <span>{{ totalItems }} - Total Records</span>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <div style=\"position: relative\">\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"searchTerm\"\r\n (change)=\"onSearch()\"\r\n style=\"padding-left: 3rem; padding-right: 3rem\"\r\n class=\"form-control\"\r\n name=\"search\"\r\n autocomplete=\"off\"\r\n placeholder=\"Search\"\r\n />\r\n\r\n <span class=\"search-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <line x1=\"13\" y1=\"13\" x2=\"16\" y2=\"16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n </svg>\r\n </span>\r\n\r\n <button *ngIf=\"searchTerm\" type=\"button\" aria-label=\"Clear\" (click)=\"searchTerm = ''; onSearch()\" class=\"clear-search\">\r\n <svg width=\"64px\" height=\"64px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path d=\"M9 9L15 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <path d=\"M15 9L9 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <circle\r\n cx=\"12\"\r\n cy=\"12\"\r\n r=\"9\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n ></circle>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- <button type=\"button\" (click)=\"openBulkUploadModal()\" class=\"btn btn-outline text-nowrap\">\r\n <svg class=\"me-2\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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=\"currentColor\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n Bulk Upload\r\n </button> -->\r\n\r\n <!-- <button type=\"button\" class=\"btn btn-outline d-line-flex align-items-center text-nowrap\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n Filter\r\n </button> -->\r\n\r\n <plano-filter [clientId]=\"clientId\" [data]=\"filterObject\" (applyFilters)=\"applyFilters($event)\"\r\n (resetFilters)=\"applyFilters($event)\" [config]=\"{ 'Merchandise compliance': false }\"></plano-filter>\r\n\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader\"\r\n [disabled]=\"!planogramsList.length\">\r\n \r\n <svg *ngIf=\"!isButtonLoading\" 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\" stroke-linejoin=\"round\"></path>\r\n </svg>\r\n \r\n <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n <span class=\"ms-2\"> Export</span>\r\n </button>\r\n\r\n <!-- <button type=\"button\" (click)=\"onClickCreatePlanogram()\" class=\"btn btn-primary d-inline-flex align-items-center\">\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=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\"\r\n stroke=\"white\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <span class=\"ms-2 text-white\">Create </span>\r\n </button> -->\r\n\r\n <!-- <lib-filters [dataObject]=\"filterObject\" (appliedFilters)=\"applyFilters($event)\"></lib-filters> -->\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"isPageLoading\">\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 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 <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\"\r\n *ngIf=\"!isPageLoading && planogramsList.length === 0\"\r\n >\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 manage planogram table</div>\r\n </div>\r\n\r\n <!-- Manage Planogram list view -->\r\n <section id=\"list-view\" *ngIf=\"!isPageLoading && planogramsList.length !== 0\">\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>\r\n <span (click)=\"onSortTable('storeName')\" class=\"cursor-pointer\">\r\n Store Name\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'storeName' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'storeName' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th>\r\n <span (click)=\"onSortTable('layoutName')\" class=\"cursor-pointer\">\r\n Layout Name\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'layoutName' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'layoutName' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th>\r\n Country\r\n </th>\r\n <th>\r\n City\r\n </th>\r\n <th>\r\n <span class=\"cursor-pointer d-flex align-items-center\">\r\n Plano Completion %\r\n <!-- <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'planoProgress' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'planoProgress' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i> -->\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n ngbTooltip=\"% of overall planogram completion\"\r\n class=\"ms-2\"\r\n >\r\n <g clip-path=\"url(#clip0_844_17538)\">\r\n <path\r\n d=\"M8.00065 10.6663V7.99967M8.00065 5.33301H8.00732M14.6673 7.99967C14.6673 11.6816 11.6826 14.6663 8.00065 14.6663C4.31875 14.6663 1.33398 11.6816 1.33398 7.99967C1.33398 4.31778 4.31875 1.33301 8.00065 1.33301C11.6826 1.33301 14.6673 4.31778 14.6673 7.99967Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_844_17538\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </th>\r\n <th>\r\n <span (click)=\"onSortTable('layoutCount')\" class=\"cursor-pointer\">\r\n Layout\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'layoutCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'layoutCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('fixtureCount')\" class=\"cursor-pointer\">\r\n No of Fixtures\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'fixtureCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('vmCount')\" class=\"cursor-pointer\">\r\n No of VMs\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'vmCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'vmCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <!-- [ZONE-VERIFICATION] additive \u2014 Zone status header -->\r\n <th class=\"text-center\">\r\n <span>Zone</span>\r\n </th>\r\n <th class=\"text-center\">\r\n <ng-template #tooltip>\r\n <div class=\"w-100\">\r\n <h6>Total store capacity</h6>\r\n <span> Combining product capacity of all fixtures </span>\r\n </div>\r\n </ng-template>\r\n <span (click)=\"onSortTable('fixtureCapacity')\" class=\"cursor-pointer d-flex align-items-center\">\r\n Store Capacity\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'fixtureCapacity' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureCapacity' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n [ngbTooltip]=\"tooltip\"\r\n class=\"ms-2\"\r\n >\r\n <g clip-path=\"url(#clip0_844_17538)\">\r\n <path\r\n d=\"M8.00065 10.6663V7.99967M8.00065 5.33301H8.00732M14.6673 7.99967C14.6673 11.6816 11.6826 14.6663 8.00065 14.6663C4.31875 14.6663 1.33398 11.6816 1.33398 7.99967C1.33398 4.31778 4.31875 1.33301 8.00065 1.33301C11.6826 1.33301 14.6673 4.31778 14.6673 7.99967Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_844_17538\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('lastUpdate')\" class=\"cursor-pointer\">\r\n Last update\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'lastUpdate' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'lastUpdate' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span class=\"cursor-pointer\">\r\n Planogram Status\r\n <!-- <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'planogramStatus' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'planogramStatus' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i> -->\r\n </span>\r\n </th>\r\n <th></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let plano of planogramsList\">\r\n <td>\r\n <div class=\"d-flex align-items-center\">\r\n <a (click)=\"redirectStore(plano.storeId)\" class=\"cursor-pointer text-decoration-underline\">\r\n {{ plano.storeName }}</a\r\n >\r\n </div>\r\n </td>\r\n <td>\r\n <a\r\n [routerLink]=\"['/manage/planogram/manage-planogram']\"\r\n [queryParams]=\"{ planoId: plano._id, floorId: plano?.layoutDetails?.[0]?.id }\"\r\n class=\"text-decoration-underline\"\r\n >\r\n {{\r\n plano.layoutName\r\n }}\r\n </a>\r\n </td>\r\n <td>\r\n {{plano?.country}}\r\n </td>\r\n <td>\r\n {{plano?.city}}\r\n </td>\r\n <td>\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-9\">\r\n <div class=\"progress\" style=\"height: 4px\">\r\n <div\r\n class=\"progress-bar\"\r\n [ngClass]=\"\r\n [25, 50].includes(getProgressValue(plano))\r\n ? 'bg-warning'\r\n : 'bg-success'\r\n \"\r\n role=\"progressbar\"\r\n [style]=\"getProgressValue(plano) ? 'width: ' + getProgressValue(plano) + '%' : 'width:25%'\"\r\n [attr.aria-valuenow]=\"getProgressValue(plano)\"\r\n aria-valuemin=\"0\"\r\n aria-valuemax=\"100\"\r\n ></div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">{{ getProgressValue(plano) }}%</div>\r\n </div>\r\n <!-- <div class=\"row align-items-center\">\r\n <div class=\"col-8 progress\" style=\"height: 4px; border-radius: 4px;\">\r\n <div\r\n class=\"progress-bar\"\r\n role=\"progressbar\"\r\n style=\"width: 25%\"\r\n aria-valuenow=\"25\"\r\n aria-valuemin=\"0\"\r\n aria-valuemax=\"100\"\r\n ></div>\r\n </div>\r\n <div class=\"col-4\">\r\n {{ plano.planoCompletion }}\r\n </div>\r\n </div> -->\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano?.layoutCount === 1 ? 1 : updateFloor(plano) }}\r\n </span>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 14 14\"\r\n fill=\"none\"\r\n ngbTooltip=\"Didn\u2019t respond within the due date\"\r\n *ngIf=\"showBreach(plano, 'layout')\"\r\n >\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33463 9.33398 9.33463C11.084 9.33463 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513Z\"\r\n fill=\"#FECDCA\"\r\n />\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33464 9.33398 9.33464C11.084 9.33464 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513ZM2.33398 8.7513V12.8346\"\r\n stroke=\"#D92D20\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <div\r\n class=\"indicator short\"\r\n [ngClass]=\"getTaskStatus(plano, 'layout') || 'taskAssigned'\"\r\n *ngIf=\"!showBreach(plano, 'layout')\"\r\n >\r\n <svg\r\n width=\"8\"\r\n height=\"7\"\r\n viewBox=\"0 0 8 7\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"{{ getTaskTooltip(plano, 'layout') || 'Task Assigned' }}\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M6.97284 0.310967L2.79617 4.3418L1.68784 3.15763C1.48367 2.96513 1.16284 2.95347 0.929505 3.1168C0.702005 3.28597 0.637838 3.58347 0.777838 3.82263L2.09034 5.95763C2.21867 6.15597 2.44034 6.27847 2.69117 6.27847C2.93034 6.27847 3.15784 6.15597 3.28617 5.95763C3.49617 5.68347 7.50367 0.905967 7.50367 0.905967C8.02867 0.3693 7.39284 -0.1032 6.97284 0.305134V0.310967Z\"\r\n fill=\"#667085\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano.fixtureCount }}\r\n </span>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 14 14\"\r\n fill=\"none\"\r\n ngbTooltip=\"Didn\u2019t respond within the due date\"\r\n *ngIf=\"showBreach(plano, 'fixture')\"\r\n >\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33463 9.33398 9.33463C11.084 9.33463 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513Z\"\r\n fill=\"#FECDCA\"\r\n />\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33464 9.33398 9.33464C11.084 9.33464 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513ZM2.33398 8.7513V12.8346\"\r\n stroke=\"#D92D20\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <div\r\n class=\"indicator short\"\r\n [ngClass]=\"getTaskStatus(plano, 'fixture') || 'taskAssigned'\"\r\n *ngIf=\"!showBreach(plano, 'fixture')\"\r\n >\r\n <svg\r\n width=\"8\"\r\n height=\"7\"\r\n viewBox=\"0 0 8 7\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"{{ getTaskTooltip(plano, 'fixture') || 'Task Assigned' }}\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M6.97284 0.310967L2.79617 4.3418L1.68784 3.15763C1.48367 2.96513 1.16284 2.95347 0.929505 3.1168C0.702005 3.28597 0.637838 3.58347 0.777838 3.82263L2.09034 5.95763C2.21867 6.15597 2.44034 6.27847 2.69117 6.27847C2.93034 6.27847 3.15784 6.15597 3.28617 5.95763C3.49617 5.68347 7.50367 0.905967 7.50367 0.905967C8.02867 0.3693 7.39284 -0.1032 6.97284 0.305134V0.310967Z\"\r\n fill=\"#667085\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano.vmCount }}\r\n </span>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 14 14\"\r\n fill=\"none\"\r\n ngbTooltip=\"Didn\u2019t respond within the due date\"\r\n *ngIf=\"showBreach(plano, 'fixture')\"\r\n >\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33463 9.33398 9.33463C11.084 9.33463 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513Z\"\r\n fill=\"#FECDCA\"\r\n />\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33464 9.33398 9.33464C11.084 9.33464 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513ZM2.33398 8.7513V12.8346\"\r\n stroke=\"#D92D20\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <div\r\n class=\"indicator short\"\r\n [ngClass]=\"getTaskStatus(plano, 'vm') || 'taskAssigned'\"\r\n *ngIf=\"!showBreach(plano, 'fixture')\"\r\n >\r\n <svg\r\n width=\"8\"\r\n height=\"7\"\r\n viewBox=\"0 0 8 7\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"{{ getTaskTooltip(plano, 'vm') || 'Task Assigned' }}\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M6.97284 0.310967L2.79617 4.3418L1.68784 3.15763C1.48367 2.96513 1.16284 2.95347 0.929505 3.1168C0.702005 3.28597 0.637838 3.58347 0.777838 3.82263L2.09034 5.95763C2.21867 6.15597 2.44034 6.27847 2.69117 6.27847C2.93034 6.27847 3.15784 6.15597 3.28617 5.95763C3.49617 5.68347 7.50367 0.905967 7.50367 0.905967C8.02867 0.3693 7.39284 -0.1032 6.97284 0.305134V0.310967Z\"\r\n fill=\"#667085\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </td>\r\n <!-- [ZONE-VERIFICATION] additive \u2014 Zone status cell -->\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 14 14\"\r\n fill=\"none\"\r\n ngbTooltip=\"Didn\u2019t respond within the due date\"\r\n *ngIf=\"getZoneStatus(plano) === 'flag'\"\r\n >\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33463 9.33398 9.33463C11.084 9.33463 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513Z\"\r\n fill=\"#FECDCA\"\r\n />\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33464 9.33398 9.33464C11.084 9.33464 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513ZM2.33398 8.7513V12.8346\"\r\n stroke=\"#D92D20\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <div\r\n class=\"indicator short\"\r\n [ngClass]=\"getZoneStatus(plano)\"\r\n *ngIf=\"getZoneStatus(plano) !== 'flag'\"\r\n >\r\n <svg\r\n width=\"8\"\r\n height=\"7\"\r\n viewBox=\"0 0 8 7\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"{{ getZoneTooltip(plano) }}\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M6.97284 0.310967L2.79617 4.3418L1.68784 3.15763C1.48367 2.96513 1.16284 2.95347 0.929505 3.1168C0.702005 3.28597 0.637838 3.58347 0.777838 3.82263L2.09034 5.95763C2.21867 6.15597 2.44034 6.27847 2.69117 6.27847C2.93034 6.27847 3.15784 6.15597 3.28617 5.95763C3.49617 5.68347 7.50367 0.905967 7.50367 0.905967C8.02867 0.3693 7.39284 -0.1032 6.97284 0.305134V0.310967Z\"\r\n fill=\"#667085\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano?.fixtureCapacity ?? 0 }}\r\n </span>\r\n </div>\r\n </td>\r\n <td class=\"text-center\">\r\n <span [ngbTooltip]=\"plano?.lastUpdate | date : 'medium'\">\r\n {{ plano?.lastUpdate | date }}\r\n </span>\r\n </td>\r\n <td class=\"text-center\">\r\n <div class=\"badge\" [ngClass]=\"getStatusBadge(plano)\">\r\n {{ getStatus(plano) }}\r\n </div>\r\n </td>\r\n <!-- <td>\r\n <div class=\"d-flex align-items-center gap-2 justify-content-center\">\r\n <svg width=\"21\" height=\"22\" viewBox=\"0 0 21 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_17_71425)\">\r\n <path\r\n d=\"M12.1971 18.7144C12.0464 18.9742 11.8302 19.1898 11.5699 19.3397C11.3097 19.4896 11.0146 19.5685 10.7143 19.5685C10.414 19.5685 10.1189 19.4896 9.85866 19.3397C9.59842 19.1898 9.38212 18.9742 9.23143 18.7144M15.8571 7.57157C15.8571 6.2076 15.3153 4.89949 14.3508 3.93502C13.3864 2.97055 12.0783 2.42871 10.7143 2.42871C9.35032 2.42871 8.04221 2.97055 7.07774 3.93502C6.11326 4.89949 5.57143 6.2076 5.57143 7.57157C5.57143 13.5716 3 15.2859 3 15.2859H18.4286C18.4286 15.2859 15.8571 13.5716 15.8571 7.57157Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M2.08574 8.04805C1.55611 8.04805 1.12146 7.61768 1.17082 7.09036C1.286 5.85989 1.627 4.71322 2.19383 3.65034C2.75229 2.60318 3.46062 1.69605 4.31882 0.928939C4.71052 0.578823 5.30965 0.673501 5.62062 1.09695C5.93175 1.52062 5.83525 2.1121 5.45225 2.47212C4.82875 3.05819 4.30987 3.74239 3.89559 4.52471C3.47303 5.32267 3.20776 6.17833 3.0998 7.09169C3.03766 7.61747 2.61518 8.04805 2.08574 8.04805ZM19.3431 8.04805C18.8134 8.04805 18.3908 7.6171 18.3287 7.09105C18.2209 6.17793 17.9556 5.32248 17.5326 4.52471C17.118 3.74258 16.5993 3.05852 15.9765 2.47254C15.5937 2.11226 15.4973 1.5207 15.8085 1.09696C16.1196 0.673433 16.7187 0.578551 17.1107 0.928571C17.9693 1.6954 18.6778 2.60266 19.2363 3.65034C19.8032 4.71381 20.1438 5.86068 20.2581 7.09095C20.3071 7.61809 19.8725 8.04805 19.3431 8.04805Z\"\r\n fill=\"#667085\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_17_71425\">\r\n <rect width=\"20.5714\" height=\"20.5714\" fill=\"white\" transform=\"translate(0.428711 0.714355)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n <svg width=\"23\" height=\"24\" viewBox=\"0 0 23 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_139_112685)\">\r\n <path\r\n d=\"M12.4843 21.4302C12.3336 21.69 12.1173 21.9057 11.857 22.0556C11.5968 22.2055 11.3017 22.2844 11.0014 22.2844C10.7011 22.2844 10.406 22.2055 10.1458 22.0556C9.88553 21.9057 9.66923 21.69 9.51854 21.4302M16.1443 10.2874C16.1443 8.92342 15.6024 7.61531 14.6379 6.65084C13.6735 5.68637 12.3654 5.14453 11.0014 5.14453C9.63742 5.14453 8.32932 5.68637 7.36485 6.65084C6.40037 7.61531 5.85854 8.92342 5.85854 10.2874C5.85854 16.2874 3.28711 18.0017 3.28711 18.0017H18.7157C18.7157 18.0017 16.1443 16.2874 16.1443 10.2874Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M2.37187 10.7634C1.84224 10.7634 1.40759 10.333 1.45695 9.80569C1.57213 8.57522 1.91313 7.42855 2.47997 6.36567C3.03842 5.31851 3.74675 4.41138 4.60496 3.64427C4.99665 3.29415 5.59578 3.38883 5.90675 3.81228C6.21788 4.23595 6.12138 4.82744 5.73838 5.18745C5.11489 5.77352 4.596 6.45772 4.18172 7.24004C3.75916 8.038 3.4939 8.89366 3.38594 9.80702C3.32379 10.3328 2.90131 10.7634 2.37187 10.7634ZM19.6292 10.7634C19.0995 10.7634 18.6769 10.3324 18.6148 9.80638C18.507 8.89326 18.2417 8.03781 17.8188 7.24004C17.4041 6.45791 16.8854 5.77385 16.2627 5.18787C15.8798 4.8276 15.7835 4.23603 16.0947 3.81229C16.4057 3.38876 17.0049 3.29388 17.3968 3.6439C18.2554 4.41073 18.964 5.31799 19.5224 6.36567C20.0893 7.42914 20.4299 8.57601 20.5442 9.80628C20.5932 10.3334 20.1586 10.7634 19.6292 10.7634Z\"\r\n fill=\"#667085\"\r\n />\r\n </g>\r\n <path\r\n d=\"M17 1C19.7614 1 22 3.23858 22 6C22 8.76142 19.7614 11 17 11C14.2386 11 12 8.76142 12 6C12 3.23858 14.2386 1 17 1Z\"\r\n fill=\"#FF0000\"\r\n stroke=\"white\"\r\n stroke-width=\"2\"\r\n />\r\n <defs>\r\n <clipPath id=\"clip0_139_112685\">\r\n <rect width=\"20.5714\" height=\"20.5714\" fill=\"white\" transform=\"translate(0.714844 3.42969)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n <div class=\"dropdown\">\r\n <button class=\"btn btn-link p-0\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M11 12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M11 19C11 19.5523 11.4477 20 12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M11 5C11 5.55228 11.4477 6 12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li><a class=\"dropdown-item cursor-pointer\">Edit</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer\">Duplicate</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer text-danger\">Delete</a></li>\r\n </ul>\r\n </div>\r\n </div>\r\n </td> -->\r\n <td>\r\n <a\r\n [routerLink]=\"['/manage/planogram/manage-planogram']\"\r\n [queryParams]=\"{ planoId: plano._id, floorId: plano?.layoutDetails?.id }\"\r\n >\r\n <svg\r\n width=\"23\"\r\n height=\"24\"\r\n viewBox=\"0 0 23 24\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n *ngIf=\"getSubmit(plano)\"\r\n >\r\n <path\r\n d=\"M10.1395 6.85728H4.13946C3.6848 6.85728 3.24876 7.0379 2.92727 7.35939C2.60578 7.68088 2.42517 8.11691 2.42517 8.57157V20.5716C2.42517 21.0262 2.60578 21.4623 2.92727 21.7838C3.24876 22.1052 3.6848 22.2859 4.13946 22.2859H16.1395C16.5941 22.2859 17.0301 22.1052 17.3516 21.7838C17.6731 21.4623 17.8537 21.0262 17.8537 20.5716V14.5716M16.568 5.57157C16.909 5.23058 17.3715 5.03901 17.8537 5.03901C18.336 5.03901 18.7985 5.23058 19.1395 5.57157C19.4805 5.91256 19.672 6.37505 19.672 6.85728C19.672 7.33952 19.4805 7.80201 19.1395 8.143L10.9966 16.2859L7.56803 17.143L8.42517 13.7144L16.568 5.57157Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M17 1C19.7614 1 22 3.23858 22 6C22 8.76142 19.7614 11 17 11C14.2386 11 12 8.76142 12 6C12 3.23858 14.2386 1 17 1Z\"\r\n fill=\"#FF0000\"\r\n stroke=\"white\"\r\n stroke-width=\"2\"\r\n />\r\n </svg>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\"\r\n height=\"22\"\r\n viewBox=\"0 0 21 22\"\r\n fill=\"none\"\r\n *ngIf=\"!getSubmit(plano)\"\r\n >\r\n <g clip-path=\"url(#clip0_844_18318)\">\r\n <path\r\n d=\"M9.85686 4.14249H3.85686C3.40221 4.14249 2.96617 4.32311 2.64468 4.6446C2.32319 4.96609 2.14258 5.40212 2.14258 5.85678V17.8568C2.14258 18.3114 2.32319 18.7475 2.64468 19.069C2.96617 19.3905 3.40221 19.5711 3.85686 19.5711H15.8569C16.3115 19.5711 16.7476 19.3905 17.069 19.069C17.3905 18.7475 17.5712 18.3114 17.5712 17.8568V11.8568M16.2854 2.85678C16.6264 2.51579 17.0889 2.32422 17.5712 2.32422C18.0534 2.32422 18.5159 2.51579 18.8569 2.85678C19.1979 3.19777 19.3894 3.66026 19.3894 4.14249C19.3894 4.62473 19.1979 5.08722 18.8569 5.42821L10.714 13.5711L7.28544 14.4282L8.14258 10.9996L16.2854 2.85678Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_844_18318\">\r\n <rect width=\"20.5714\" height=\"20.5714\" fill=\"white\" transform=\"translate(0.427734 0.713867)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </a>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </section>\r\n\r\n <!-- Manage Planogram grid view -->\r\n <!-- <ng-template #gridView>\r\n <section id=\"grid-view\">\r\n <div class=\"row gx-6 gy-4\">\r\n <div class=\"col-md-4\" *ngFor=\"let fixture of fixtureTemplatesList\">\r\n <div class=\"card\">\r\n <div class=\"card-img\">\r\n <div class=\"card-action dropdown\">\r\n <button class=\"btn btn-light px-4 py-3\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n <i class=\"bi bi-three-dots-vertical\"></i>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li><a class=\"dropdown-item cursor-pointer\">Edit</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer\">Duplicate</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer text-danger\">Delete</a></li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <h3>{{ fixture.name }}</h3>\r\n <div class=\"badge\" [ngClass]=\"fixture.status\">{{ fixture.status | titlecase }}</div>\r\n </div>\r\n <div class=\"d-flex gap-2\">\r\n <div *ngFor=\"let subBrand of fixture.subBrand; let i = index\">\r\n <span *ngIf=\"i != 0\" class=\"me-2 card-tagline\">•</span>\r\n <div class=\"badge\">{{ subBrand }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template> -->\r\n\r\n <!-- Pagination -->\r\n <lib-pagination\r\n [itemsPerPage]=\"limit\"\r\n [currentPage]=\"offset\"\r\n [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\"\r\n [pageSize]=\"paginationSize()\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"\r\n *ngIf=\"!isPageLoading && planogramsList.length !== 0\"\r\n >\r\n </lib-pagination>\r\n </div>\r\n</div>\r\n", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=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}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=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}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#f2f4f7;background:#667085}.badge.yetToComplete{background:#f2f4f7;color:#667085}.badge.yetToAssign{background:#eaecf5;color:#363f72}.badge.taskAssigned{background:#e0eaff;color:#7a5af8}.badge.reviewPending{background:#fef0c7;color:#f79009}.badge.completed{background:#d1fadf;color:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 330px);height:100%;padding:16px 24px}.badgeStyle{color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px;background:#f2f4f7}.primaryBadgeStyle{color:var(--Gray-700, #009BF3);text-align:center;font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px;background:#eaf8ff}\n"] }]
|
|
30243
|
+
args: [{ selector: "lib-plano-verification-table", template: "<div class=\"row mx-0 my-5 gap-2\">\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'all' }\" (click)=\"filterTable('all')\">\r\n <h3>{{ pendingDetails?.allStores || 0 }}</h3>\r\n <p>Total stores</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'layout' }\" (click)=\"filterTable('layout')\">\r\n <h3>{{ pendingDetails?.layoutComplete ?? 0 }}</h3>\r\n <p>Layout verification completed</p>\r\n </div>\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'fixture' }\" (click)=\"filterTable('fixture')\">\r\n <h3>{{ pendingDetails?.fixturePending ?? 0 }}</h3>\r\n <p>Fixture verification pending</p>\r\n </div>\r\n <!-- [VM CARD REMOVED] VM verification card hidden \u2014 not needed for now.\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'vm' }\" (click)=\"filterTable('vm')\">\r\n <h3>{{ pendingDetails?.fixturePending ?? 0 }}</h3>\r\n <p>VM verification pending</p>\r\n </div>\r\n -->\r\n <!-- [ZONE-VERIFICATION] additive \u2014 5th stat card -->\r\n <div class=\"col filter-tab\" [ngClass]=\"{ selected: selectedFilterTab === 'zone' }\" (click)=\"filterTable('zone')\">\r\n <h3>{{ pendingDetails?.zonePending ?? 0 }}</h3>\r\n <p>Zone verification pending</p>\r\n </div>\r\n</div>\r\n\r\n<div class=\"content-wrapper\">\r\n <div [class.restrict-interaction]=\"isButtonLoading\">\r\n <!-- Manage Planogram view header -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-5\">\r\n <div>\r\n <h4>All Planograms</h4>\r\n <span>{{ totalItems }} - Total Records</span>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <div style=\"position: relative\">\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"searchTerm\"\r\n (change)=\"onSearch()\"\r\n style=\"padding-left: 3rem; padding-right: 3rem\"\r\n class=\"form-control\"\r\n name=\"search\"\r\n autocomplete=\"off\"\r\n placeholder=\"Search\"\r\n />\r\n\r\n <span class=\"search-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <line x1=\"13\" y1=\"13\" x2=\"16\" y2=\"16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n </svg>\r\n </span>\r\n\r\n <button *ngIf=\"searchTerm\" type=\"button\" aria-label=\"Clear\" (click)=\"searchTerm = ''; onSearch()\" class=\"clear-search\">\r\n <svg width=\"64px\" height=\"64px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path d=\"M9 9L15 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <path d=\"M15 9L9 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <circle\r\n cx=\"12\"\r\n cy=\"12\"\r\n r=\"9\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n ></circle>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- <button type=\"button\" (click)=\"openBulkUploadModal()\" class=\"btn btn-outline text-nowrap\">\r\n <svg class=\"me-2\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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=\"currentColor\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n Bulk Upload\r\n </button> -->\r\n\r\n <!-- <button type=\"button\" class=\"btn btn-outline d-line-flex align-items-center text-nowrap\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n Filter\r\n </button> -->\r\n\r\n <plano-filter [clientId]=\"clientId\" [data]=\"filterObject\" (applyFilters)=\"applyFilters($event)\"\r\n (resetFilters)=\"applyFilters($event)\" [config]=\"{ 'Merchandise compliance': false }\"></plano-filter>\r\n\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader\"\r\n [disabled]=\"!planogramsList.length\">\r\n \r\n <svg *ngIf=\"!isButtonLoading\" 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\" stroke-linejoin=\"round\"></path>\r\n </svg>\r\n \r\n <svg *ngIf=\"isButtonLoading\" class=\"spinner\" viewBox=\"0 0 50 50\">\r\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"></circle>\r\n </svg>\r\n <span class=\"ms-2\"> Export</span>\r\n </button>\r\n\r\n <!-- <button type=\"button\" (click)=\"onClickCreatePlanogram()\" class=\"btn btn-primary d-inline-flex align-items-center\">\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=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\"\r\n stroke=\"white\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <span class=\"ms-2 text-white\">Create </span>\r\n </button> -->\r\n\r\n <!-- <lib-filters [dataObject]=\"filterObject\" (appliedFilters)=\"applyFilters($event)\"></lib-filters> -->\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"isPageLoading\">\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 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 <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\"\r\n *ngIf=\"!isPageLoading && planogramsList.length === 0\"\r\n >\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 manage planogram table</div>\r\n </div>\r\n\r\n <!-- Manage Planogram list view -->\r\n <section id=\"list-view\" *ngIf=\"!isPageLoading && planogramsList.length !== 0\">\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>\r\n <span (click)=\"onSortTable('storeName')\" class=\"cursor-pointer\">\r\n Store Name\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'storeName' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'storeName' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th>\r\n <span (click)=\"onSortTable('layoutName')\" class=\"cursor-pointer\">\r\n Layout Name\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'layoutName' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'layoutName' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th>\r\n Country\r\n </th>\r\n <th>\r\n City\r\n </th>\r\n <th>\r\n <span class=\"cursor-pointer d-flex align-items-center\">\r\n Plano Completion %\r\n <!-- <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'planoProgress' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'planoProgress' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i> -->\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n ngbTooltip=\"% of overall planogram completion\"\r\n class=\"ms-2\"\r\n >\r\n <g clip-path=\"url(#clip0_844_17538)\">\r\n <path\r\n d=\"M8.00065 10.6663V7.99967M8.00065 5.33301H8.00732M14.6673 7.99967C14.6673 11.6816 11.6826 14.6663 8.00065 14.6663C4.31875 14.6663 1.33398 11.6816 1.33398 7.99967C1.33398 4.31778 4.31875 1.33301 8.00065 1.33301C11.6826 1.33301 14.6673 4.31778 14.6673 7.99967Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_844_17538\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </th>\r\n <th>\r\n <span (click)=\"onSortTable('layoutCount')\" class=\"cursor-pointer\">\r\n Layout\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'layoutCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'layoutCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('fixtureCount')\" class=\"cursor-pointer\">\r\n No of Fixtures\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'fixtureCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('vmCount')\" class=\"cursor-pointer\">\r\n No of VMs\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'vmCount' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'vmCount' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <!-- [ZONE-VERIFICATION] additive \u2014 Zone status header -->\r\n <th class=\"text-center\">\r\n <span>Zone</span>\r\n </th>\r\n <th class=\"text-center\">\r\n <ng-template #tooltip>\r\n <div class=\"w-100\">\r\n <h6>Total store capacity</h6>\r\n <span> Combining product capacity of all fixtures </span>\r\n </div>\r\n </ng-template>\r\n <span (click)=\"onSortTable('fixtureCapacity')\" class=\"cursor-pointer d-flex align-items-center\">\r\n Store Capacity\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'fixtureCapacity' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'fixtureCapacity' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n [ngbTooltip]=\"tooltip\"\r\n class=\"ms-2\"\r\n >\r\n <g clip-path=\"url(#clip0_844_17538)\">\r\n <path\r\n d=\"M8.00065 10.6663V7.99967M8.00065 5.33301H8.00732M14.6673 7.99967C14.6673 11.6816 11.6826 14.6663 8.00065 14.6663C4.31875 14.6663 1.33398 11.6816 1.33398 7.99967C1.33398 4.31778 4.31875 1.33301 8.00065 1.33301C11.6826 1.33301 14.6673 4.31778 14.6673 7.99967Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_844_17538\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span (click)=\"onSortTable('lastUpdate')\" class=\"cursor-pointer\">\r\n Last update\r\n <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'lastUpdate' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'lastUpdate' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n </span>\r\n </th>\r\n <th class=\"text-center\">\r\n <span class=\"cursor-pointer\">\r\n Planogram Status\r\n <!-- <i\r\n class=\"fa ms-1 mt-1\"\r\n [ngStyle]=\"{ color: sortedColumn === 'planogramStatus' ? '#009BF3' : '' }\"\r\n [ngClass]=\"sortOrder === 1 && sortedColumn === 'planogramStatus' ? 'fa-arrow-up' : 'fa-arrow-down'\"\r\n aria-hidden=\"true\"\r\n ></i> -->\r\n </span>\r\n </th>\r\n <th></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let plano of planogramsList\">\r\n <td>\r\n <div class=\"d-flex align-items-center\">\r\n <a (click)=\"redirectStore(plano.storeId)\" class=\"cursor-pointer text-decoration-underline\">\r\n {{ plano.storeName }}</a\r\n >\r\n </div>\r\n </td>\r\n <td>\r\n <a\r\n [routerLink]=\"['/manage/planogram/manage-planogram']\"\r\n [queryParams]=\"{ planoId: plano._id, floorId: plano?.layoutDetails?.[0]?.id }\"\r\n class=\"text-decoration-underline\"\r\n >\r\n {{\r\n plano.layoutName\r\n }}\r\n </a>\r\n </td>\r\n <td>\r\n {{plano?.country}}\r\n </td>\r\n <td>\r\n {{plano?.city}}\r\n </td>\r\n <td>\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-9\">\r\n <div class=\"progress\" style=\"height: 4px\">\r\n <div\r\n class=\"progress-bar\"\r\n [ngClass]=\"\r\n [25, 50].includes(getProgressValue(plano))\r\n ? 'bg-warning'\r\n : 'bg-success'\r\n \"\r\n role=\"progressbar\"\r\n [style]=\"getProgressValue(plano) ? 'width: ' + getProgressValue(plano) + '%' : 'width:25%'\"\r\n [attr.aria-valuenow]=\"getProgressValue(plano)\"\r\n aria-valuemin=\"0\"\r\n aria-valuemax=\"100\"\r\n ></div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">{{ getProgressValue(plano) }}%</div>\r\n </div>\r\n <!-- <div class=\"row align-items-center\">\r\n <div class=\"col-8 progress\" style=\"height: 4px; border-radius: 4px;\">\r\n <div\r\n class=\"progress-bar\"\r\n role=\"progressbar\"\r\n style=\"width: 25%\"\r\n aria-valuenow=\"25\"\r\n aria-valuemin=\"0\"\r\n aria-valuemax=\"100\"\r\n ></div>\r\n </div>\r\n <div class=\"col-4\">\r\n {{ plano.planoCompletion }}\r\n </div>\r\n </div> -->\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano?.layoutCount === 1 ? 1 : updateFloor(plano) }}\r\n </span>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 14 14\"\r\n fill=\"none\"\r\n ngbTooltip=\"Didn\u2019t respond within the due date\"\r\n *ngIf=\"showBreach(plano, 'layout')\"\r\n >\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33463 9.33398 9.33463C11.084 9.33463 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513Z\"\r\n fill=\"#FECDCA\"\r\n />\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33464 9.33398 9.33464C11.084 9.33464 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513ZM2.33398 8.7513V12.8346\"\r\n stroke=\"#D92D20\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <div\r\n class=\"indicator short\"\r\n [ngClass]=\"getTaskStatus(plano, 'layout') || 'taskAssigned'\"\r\n *ngIf=\"!showBreach(plano, 'layout')\"\r\n >\r\n <svg\r\n width=\"8\"\r\n height=\"7\"\r\n viewBox=\"0 0 8 7\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"{{ getTaskTooltip(plano, 'layout') || 'Task Assigned' }}\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M6.97284 0.310967L2.79617 4.3418L1.68784 3.15763C1.48367 2.96513 1.16284 2.95347 0.929505 3.1168C0.702005 3.28597 0.637838 3.58347 0.777838 3.82263L2.09034 5.95763C2.21867 6.15597 2.44034 6.27847 2.69117 6.27847C2.93034 6.27847 3.15784 6.15597 3.28617 5.95763C3.49617 5.68347 7.50367 0.905967 7.50367 0.905967C8.02867 0.3693 7.39284 -0.1032 6.97284 0.305134V0.310967Z\"\r\n fill=\"#667085\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano.fixtureCount }}\r\n </span>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 14 14\"\r\n fill=\"none\"\r\n ngbTooltip=\"Didn\u2019t respond within the due date\"\r\n *ngIf=\"showBreach(plano, 'fixture')\"\r\n >\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33463 9.33398 9.33463C11.084 9.33463 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513Z\"\r\n fill=\"#FECDCA\"\r\n />\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33464 9.33398 9.33464C11.084 9.33464 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513ZM2.33398 8.7513V12.8346\"\r\n stroke=\"#D92D20\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <div\r\n class=\"indicator short\"\r\n [ngClass]=\"getTaskStatus(plano, 'fixture') || 'taskAssigned'\"\r\n *ngIf=\"!showBreach(plano, 'fixture')\"\r\n >\r\n <svg\r\n width=\"8\"\r\n height=\"7\"\r\n viewBox=\"0 0 8 7\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"{{ getTaskTooltip(plano, 'fixture') || 'Task Assigned' }}\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M6.97284 0.310967L2.79617 4.3418L1.68784 3.15763C1.48367 2.96513 1.16284 2.95347 0.929505 3.1168C0.702005 3.28597 0.637838 3.58347 0.777838 3.82263L2.09034 5.95763C2.21867 6.15597 2.44034 6.27847 2.69117 6.27847C2.93034 6.27847 3.15784 6.15597 3.28617 5.95763C3.49617 5.68347 7.50367 0.905967 7.50367 0.905967C8.02867 0.3693 7.39284 -0.1032 6.97284 0.305134V0.310967Z\"\r\n fill=\"#667085\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano.vmCount }}\r\n </span>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 14 14\"\r\n fill=\"none\"\r\n ngbTooltip=\"Didn\u2019t respond within the due date\"\r\n *ngIf=\"showBreach(plano, 'fixture')\"\r\n >\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33463 9.33398 9.33463C11.084 9.33463 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513Z\"\r\n fill=\"#FECDCA\"\r\n />\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33464 9.33398 9.33464C11.084 9.33464 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513ZM2.33398 8.7513V12.8346\"\r\n stroke=\"#D92D20\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <div\r\n class=\"indicator short\"\r\n [ngClass]=\"getTaskStatus(plano, 'vm') || 'taskAssigned'\"\r\n *ngIf=\"!showBreach(plano, 'fixture')\"\r\n >\r\n <svg\r\n width=\"8\"\r\n height=\"7\"\r\n viewBox=\"0 0 8 7\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"{{ getTaskTooltip(plano, 'vm') || 'Task Assigned' }}\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M6.97284 0.310967L2.79617 4.3418L1.68784 3.15763C1.48367 2.96513 1.16284 2.95347 0.929505 3.1168C0.702005 3.28597 0.637838 3.58347 0.777838 3.82263L2.09034 5.95763C2.21867 6.15597 2.44034 6.27847 2.69117 6.27847C2.93034 6.27847 3.15784 6.15597 3.28617 5.95763C3.49617 5.68347 7.50367 0.905967 7.50367 0.905967C8.02867 0.3693 7.39284 -0.1032 6.97284 0.305134V0.310967Z\"\r\n fill=\"#667085\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </td>\r\n <!-- [ZONE-VERIFICATION] additive \u2014 Zone status cell -->\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 14 14\"\r\n fill=\"none\"\r\n ngbTooltip=\"Didn\u2019t respond within the due date\"\r\n *ngIf=\"getZoneStatus(plano) === 'flag'\"\r\n >\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33463 9.33398 9.33463C11.084 9.33463 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513Z\"\r\n fill=\"#FECDCA\"\r\n />\r\n <path\r\n d=\"M2.33398 8.7513C2.33398 8.7513 2.91732 8.16797 4.66732 8.16797C6.41732 8.16797 7.58398 9.33464 9.33398 9.33464C11.084 9.33464 11.6673 8.7513 11.6673 8.7513V1.7513C11.6673 1.7513 11.084 2.33464 9.33398 2.33464C7.58398 2.33464 6.41732 1.16797 4.66732 1.16797C2.91732 1.16797 2.33398 1.7513 2.33398 1.7513V8.7513ZM2.33398 8.7513V12.8346\"\r\n stroke=\"#D92D20\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <div\r\n class=\"indicator short\"\r\n [ngClass]=\"getZoneStatus(plano)\"\r\n *ngIf=\"getZoneStatus(plano) !== 'flag'\"\r\n >\r\n <svg\r\n width=\"8\"\r\n height=\"7\"\r\n viewBox=\"0 0 8 7\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n ngbTooltip=\"{{ getZoneTooltip(plano) }}\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M6.97284 0.310967L2.79617 4.3418L1.68784 3.15763C1.48367 2.96513 1.16284 2.95347 0.929505 3.1168C0.702005 3.28597 0.637838 3.58347 0.777838 3.82263L2.09034 5.95763C2.21867 6.15597 2.44034 6.27847 2.69117 6.27847C2.93034 6.27847 3.15784 6.15597 3.28617 5.95763C3.49617 5.68347 7.50367 0.905967 7.50367 0.905967C8.02867 0.3693 7.39284 -0.1032 6.97284 0.305134V0.310967Z\"\r\n fill=\"#667085\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <span>\r\n {{ plano?.fixtureCapacity ?? 0 }}\r\n </span>\r\n </div>\r\n </td>\r\n <td class=\"text-center\">\r\n <span [ngbTooltip]=\"plano?.lastUpdate | date : 'medium'\">\r\n {{ plano?.lastUpdate | date }}\r\n </span>\r\n </td>\r\n <td class=\"text-center\">\r\n <div class=\"badge\" [ngClass]=\"getStatusBadge(plano)\">\r\n {{ getStatus(plano) }}\r\n </div>\r\n </td>\r\n <!-- <td>\r\n <div class=\"d-flex align-items-center gap-2 justify-content-center\">\r\n <svg width=\"21\" height=\"22\" viewBox=\"0 0 21 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_17_71425)\">\r\n <path\r\n d=\"M12.1971 18.7144C12.0464 18.9742 11.8302 19.1898 11.5699 19.3397C11.3097 19.4896 11.0146 19.5685 10.7143 19.5685C10.414 19.5685 10.1189 19.4896 9.85866 19.3397C9.59842 19.1898 9.38212 18.9742 9.23143 18.7144M15.8571 7.57157C15.8571 6.2076 15.3153 4.89949 14.3508 3.93502C13.3864 2.97055 12.0783 2.42871 10.7143 2.42871C9.35032 2.42871 8.04221 2.97055 7.07774 3.93502C6.11326 4.89949 5.57143 6.2076 5.57143 7.57157C5.57143 13.5716 3 15.2859 3 15.2859H18.4286C18.4286 15.2859 15.8571 13.5716 15.8571 7.57157Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M2.08574 8.04805C1.55611 8.04805 1.12146 7.61768 1.17082 7.09036C1.286 5.85989 1.627 4.71322 2.19383 3.65034C2.75229 2.60318 3.46062 1.69605 4.31882 0.928939C4.71052 0.578823 5.30965 0.673501 5.62062 1.09695C5.93175 1.52062 5.83525 2.1121 5.45225 2.47212C4.82875 3.05819 4.30987 3.74239 3.89559 4.52471C3.47303 5.32267 3.20776 6.17833 3.0998 7.09169C3.03766 7.61747 2.61518 8.04805 2.08574 8.04805ZM19.3431 8.04805C18.8134 8.04805 18.3908 7.6171 18.3287 7.09105C18.2209 6.17793 17.9556 5.32248 17.5326 4.52471C17.118 3.74258 16.5993 3.05852 15.9765 2.47254C15.5937 2.11226 15.4973 1.5207 15.8085 1.09696C16.1196 0.673433 16.7187 0.578551 17.1107 0.928571C17.9693 1.6954 18.6778 2.60266 19.2363 3.65034C19.8032 4.71381 20.1438 5.86068 20.2581 7.09095C20.3071 7.61809 19.8725 8.04805 19.3431 8.04805Z\"\r\n fill=\"#667085\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_17_71425\">\r\n <rect width=\"20.5714\" height=\"20.5714\" fill=\"white\" transform=\"translate(0.428711 0.714355)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n <svg width=\"23\" height=\"24\" viewBox=\"0 0 23 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_139_112685)\">\r\n <path\r\n d=\"M12.4843 21.4302C12.3336 21.69 12.1173 21.9057 11.857 22.0556C11.5968 22.2055 11.3017 22.2844 11.0014 22.2844C10.7011 22.2844 10.406 22.2055 10.1458 22.0556C9.88553 21.9057 9.66923 21.69 9.51854 21.4302M16.1443 10.2874C16.1443 8.92342 15.6024 7.61531 14.6379 6.65084C13.6735 5.68637 12.3654 5.14453 11.0014 5.14453C9.63742 5.14453 8.32932 5.68637 7.36485 6.65084C6.40037 7.61531 5.85854 8.92342 5.85854 10.2874C5.85854 16.2874 3.28711 18.0017 3.28711 18.0017H18.7157C18.7157 18.0017 16.1443 16.2874 16.1443 10.2874Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M2.37187 10.7634C1.84224 10.7634 1.40759 10.333 1.45695 9.80569C1.57213 8.57522 1.91313 7.42855 2.47997 6.36567C3.03842 5.31851 3.74675 4.41138 4.60496 3.64427C4.99665 3.29415 5.59578 3.38883 5.90675 3.81228C6.21788 4.23595 6.12138 4.82744 5.73838 5.18745C5.11489 5.77352 4.596 6.45772 4.18172 7.24004C3.75916 8.038 3.4939 8.89366 3.38594 9.80702C3.32379 10.3328 2.90131 10.7634 2.37187 10.7634ZM19.6292 10.7634C19.0995 10.7634 18.6769 10.3324 18.6148 9.80638C18.507 8.89326 18.2417 8.03781 17.8188 7.24004C17.4041 6.45791 16.8854 5.77385 16.2627 5.18787C15.8798 4.8276 15.7835 4.23603 16.0947 3.81229C16.4057 3.38876 17.0049 3.29388 17.3968 3.6439C18.2554 4.41073 18.964 5.31799 19.5224 6.36567C20.0893 7.42914 20.4299 8.57601 20.5442 9.80628C20.5932 10.3334 20.1586 10.7634 19.6292 10.7634Z\"\r\n fill=\"#667085\"\r\n />\r\n </g>\r\n <path\r\n d=\"M17 1C19.7614 1 22 3.23858 22 6C22 8.76142 19.7614 11 17 11C14.2386 11 12 8.76142 12 6C12 3.23858 14.2386 1 17 1Z\"\r\n fill=\"#FF0000\"\r\n stroke=\"white\"\r\n stroke-width=\"2\"\r\n />\r\n <defs>\r\n <clipPath id=\"clip0_139_112685\">\r\n <rect width=\"20.5714\" height=\"20.5714\" fill=\"white\" transform=\"translate(0.714844 3.42969)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n <div class=\"dropdown\">\r\n <button class=\"btn btn-link p-0\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M11 12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M11 19C11 19.5523 11.4477 20 12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M11 5C11 5.55228 11.4477 6 12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li><a class=\"dropdown-item cursor-pointer\">Edit</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer\">Duplicate</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer text-danger\">Delete</a></li>\r\n </ul>\r\n </div>\r\n </div>\r\n </td> -->\r\n <td>\r\n <a\r\n [routerLink]=\"['/manage/planogram/manage-planogram']\"\r\n [queryParams]=\"{ planoId: plano._id, floorId: plano?.layoutDetails?.id }\"\r\n >\r\n <svg\r\n width=\"23\"\r\n height=\"24\"\r\n viewBox=\"0 0 23 24\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n *ngIf=\"getSubmit(plano)\"\r\n >\r\n <path\r\n d=\"M10.1395 6.85728H4.13946C3.6848 6.85728 3.24876 7.0379 2.92727 7.35939C2.60578 7.68088 2.42517 8.11691 2.42517 8.57157V20.5716C2.42517 21.0262 2.60578 21.4623 2.92727 21.7838C3.24876 22.1052 3.6848 22.2859 4.13946 22.2859H16.1395C16.5941 22.2859 17.0301 22.1052 17.3516 21.7838C17.6731 21.4623 17.8537 21.0262 17.8537 20.5716V14.5716M16.568 5.57157C16.909 5.23058 17.3715 5.03901 17.8537 5.03901C18.336 5.03901 18.7985 5.23058 19.1395 5.57157C19.4805 5.91256 19.672 6.37505 19.672 6.85728C19.672 7.33952 19.4805 7.80201 19.1395 8.143L10.9966 16.2859L7.56803 17.143L8.42517 13.7144L16.568 5.57157Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M17 1C19.7614 1 22 3.23858 22 6C22 8.76142 19.7614 11 17 11C14.2386 11 12 8.76142 12 6C12 3.23858 14.2386 1 17 1Z\"\r\n fill=\"#FF0000\"\r\n stroke=\"white\"\r\n stroke-width=\"2\"\r\n />\r\n </svg>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\"\r\n height=\"22\"\r\n viewBox=\"0 0 21 22\"\r\n fill=\"none\"\r\n *ngIf=\"!getSubmit(plano)\"\r\n >\r\n <g clip-path=\"url(#clip0_844_18318)\">\r\n <path\r\n d=\"M9.85686 4.14249H3.85686C3.40221 4.14249 2.96617 4.32311 2.64468 4.6446C2.32319 4.96609 2.14258 5.40212 2.14258 5.85678V17.8568C2.14258 18.3114 2.32319 18.7475 2.64468 19.069C2.96617 19.3905 3.40221 19.5711 3.85686 19.5711H15.8569C16.3115 19.5711 16.7476 19.3905 17.069 19.069C17.3905 18.7475 17.5712 18.3114 17.5712 17.8568V11.8568M16.2854 2.85678C16.6264 2.51579 17.0889 2.32422 17.5712 2.32422C18.0534 2.32422 18.5159 2.51579 18.8569 2.85678C19.1979 3.19777 19.3894 3.66026 19.3894 4.14249C19.3894 4.62473 19.1979 5.08722 18.8569 5.42821L10.714 13.5711L7.28544 14.4282L8.14258 10.9996L16.2854 2.85678Z\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_844_18318\">\r\n <rect width=\"20.5714\" height=\"20.5714\" fill=\"white\" transform=\"translate(0.427734 0.713867)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </a>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </section>\r\n\r\n <!-- Manage Planogram grid view -->\r\n <!-- <ng-template #gridView>\r\n <section id=\"grid-view\">\r\n <div class=\"row gx-6 gy-4\">\r\n <div class=\"col-md-4\" *ngFor=\"let fixture of fixtureTemplatesList\">\r\n <div class=\"card\">\r\n <div class=\"card-img\">\r\n <div class=\"card-action dropdown\">\r\n <button class=\"btn btn-light px-4 py-3\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n <i class=\"bi bi-three-dots-vertical\"></i>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li><a class=\"dropdown-item cursor-pointer\">Edit</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer\">Duplicate</a></li>\r\n <li><a class=\"dropdown-item cursor-pointer text-danger\">Delete</a></li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <h3>{{ fixture.name }}</h3>\r\n <div class=\"badge\" [ngClass]=\"fixture.status\">{{ fixture.status | titlecase }}</div>\r\n </div>\r\n <div class=\"d-flex gap-2\">\r\n <div *ngFor=\"let subBrand of fixture.subBrand; let i = index\">\r\n <span *ngIf=\"i != 0\" class=\"me-2 card-tagline\">•</span>\r\n <div class=\"badge\">{{ subBrand }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template> -->\r\n\r\n <!-- Pagination -->\r\n <lib-pagination\r\n [itemsPerPage]=\"limit\"\r\n [currentPage]=\"offset\"\r\n [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\"\r\n [pageSize]=\"paginationSize()\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"\r\n *ngIf=\"!isPageLoading && planogramsList.length !== 0\"\r\n >\r\n </lib-pagination>\r\n </div>\r\n</div>\r\n", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;max-width:345px;min-width:234px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .shelfContainer .block{border:1px solid #98a2b3;border-top:none}.wall-viewport .body-block .shelfContainer:first-child .block{border-top:1px solid #98a2b3}.wall-viewport .body-block .block{padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .vmonly-placeholder{background-image:repeating-linear-gradient(45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px),repeating-linear-gradient(-45deg,rgba(152,162,179,.2901960784) 0,rgba(152,162,179,.2901960784) .7px,transparent .7px,transparent 8px)}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=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}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox input[type=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}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.draft{background:#f2f4f7;color:#667085}.indicator.draft path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.allocationPending{background:#fef0c7;color:#f79009}.indicator.allocationPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.restrict-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.btn .spinner{height:22px;animation:spin .9s linear infinite}.btn .spinner .path{stroke-width:4px;stroke:#071437;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:60}@keyframes spin{to{transform:rotate(360deg)}}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#f2f4f7;background:#667085}.badge.yetToComplete{background:#f2f4f7;color:#667085}.badge.yetToAssign{background:#eaecf5;color:#363f72}.badge.taskAssigned{background:#e0eaff;color:#7a5af8}.badge.reviewPending{background:#fef0c7;color:#f79009}.badge.completed{background:#d1fadf;color:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 330px);height:100%;padding:16px 24px}.badgeStyle{color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px;background:#f2f4f7}.primaryBadgeStyle{color:var(--Gray-700, #009BF3);text-align:center;font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px;background:#eaf8ff}\n"] }]
|
|
30229
30244
|
}], ctorParameters: () => [{ type: i1$1.NgbModal }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: StoreBuilderService }, { type: i2$1.GlobalStateService }, { type: i2$1.PageInfoService }] });
|
|
30230
30245
|
|
|
30231
30246
|
class ManagePlanoComponent {
|
|
@@ -38172,11 +38187,11 @@ class ToolPageHeaderComponent {
|
|
|
38172
38187
|
description = "";
|
|
38173
38188
|
backLink = "/manage/planogram/plano-tools";
|
|
38174
38189
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
38175
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ToolPageHeaderComponent, selector: "lib-tool-page-header", inputs: { title: "title", description: "description", backLink: "backLink" }, ngImport: i0, template: "<div class=\"tool-page-header d-flex align-items-start gap-3 mb-3\">\
|
|
38190
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ToolPageHeaderComponent, selector: "lib-tool-page-header", inputs: { title: "title", description: "description", backLink: "backLink" }, ngImport: i0, template: "<div class=\"tool-page-header d-flex align-items-start gap-3 mb-3\">\n <a\n class=\"back-btn\"\n [routerLink]=\"backLink\"\n aria-label=\"Back to Plano Tools\"\n title=\"Back to Plano Tools\"\n >\n <i class=\"bi bi-arrow-left\"></i>\n </a>\n <div class=\"flex-grow-1\">\n <h4 class=\"title mb-1\">{{ title }}</h4>\n <p *ngIf=\"description\" class=\"text-muted small mb-0\">{{ description }}</p>\n </div>\n</div>\n", styles: [".tool-page-header{padding-bottom:.75rem;border-bottom:1px solid #e5e7eb}.tool-page-header .back-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:6px;color:#475569;background:#f1f5f9;text-decoration:none;flex-shrink:0;transition:background .15s,color .15s}.tool-page-header .back-btn:hover{background:#e2e8f0;color:#0f172a}.tool-page-header .back-btn i{font-size:1rem}.tool-page-header .title{font-weight:600;margin:0;color:#0f172a}\n"], dependencies: [{ kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
38176
38191
|
}
|
|
38177
38192
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolPageHeaderComponent, decorators: [{
|
|
38178
38193
|
type: Component,
|
|
38179
|
-
args: [{ selector: "lib-tool-page-header", template: "<div class=\"tool-page-header d-flex align-items-start gap-3 mb-3\">\
|
|
38194
|
+
args: [{ selector: "lib-tool-page-header", template: "<div class=\"tool-page-header d-flex align-items-start gap-3 mb-3\">\n <a\n class=\"back-btn\"\n [routerLink]=\"backLink\"\n aria-label=\"Back to Plano Tools\"\n title=\"Back to Plano Tools\"\n >\n <i class=\"bi bi-arrow-left\"></i>\n </a>\n <div class=\"flex-grow-1\">\n <h4 class=\"title mb-1\">{{ title }}</h4>\n <p *ngIf=\"description\" class=\"text-muted small mb-0\">{{ description }}</p>\n </div>\n</div>\n", styles: [".tool-page-header{padding-bottom:.75rem;border-bottom:1px solid #e5e7eb}.tool-page-header .back-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:6px;color:#475569;background:#f1f5f9;text-decoration:none;flex-shrink:0;transition:background .15s,color .15s}.tool-page-header .back-btn:hover{background:#e2e8f0;color:#0f172a}.tool-page-header .back-btn i{font-size:1rem}.tool-page-header .title{font-weight:600;margin:0;color:#0f172a}\n"] }]
|
|
38180
38195
|
}], propDecorators: { title: [{
|
|
38181
38196
|
type: Input
|
|
38182
38197
|
}], description: [{
|
|
@@ -40096,11 +40111,11 @@ class ToolsParentComponent {
|
|
|
40096
40111
|
this.destroy$.complete();
|
|
40097
40112
|
}
|
|
40098
40113
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolsParentComponent, deps: [{ token: i1$1.NgbModal }, { token: i2.Router }, { token: i2$1.GlobalStateService }, { token: i2$1.PageInfoService }], target: i0.ɵɵFactoryTarget.Component });
|
|
40099
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ToolsParentComponent, selector: "lib-tools-parent", ngImport: i0, template: "<div class=\"plano-tools-hub\">\
|
|
40114
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ToolsParentComponent, selector: "lib-tools-parent", ngImport: i0, template: "<div class=\"plano-tools-hub\">\n <div class=\"hub-header mb-4\">\n <h4 class=\"mb-1\">Plano Tools</h4>\n <p class=\"text-muted small mb-0\">\n Utilities for managing planograms, layouts, exports and templates.\n </p>\n </div>\n\n <div class=\"tool-section mb-4\">\n <h6 class=\"section-title\">Export & Inspect</h6>\n <div class=\"card-grid\">\n <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/migrate\">\n <div class=\"icon\"><i class=\"bi bi-images\"></i></div>\n <div class=\"title\">Download Layout Images</div>\n <div class=\"desc\">Export layout images store by store.</div>\n </a>\n <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/cad-render\">\n <div class=\"icon\"><i class=\"bi bi-bounding-box\"></i></div>\n <div class=\"title\">Check CAD Output</div>\n <div class=\"desc\">Paste CAD data and preview the parsed layout.</div>\n </a>\n <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/cad-files\">\n <div class=\"icon\"><i class=\"bi bi-folder2-open\"></i></div>\n <div class=\"title\">CAD Files</div>\n <div class=\"desc\">List uploaded CAD & Kissflow files for a store.</div>\n </a>\n <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/data-export\">\n <div class=\"icon\"><i class=\"bi bi-database-down\"></i></div>\n <div class=\"title\">Data Export</div>\n <div class=\"desc\">Query planogram fixtures and export as Excel.</div>\n </a>\n <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/store-exports\">\n <div class=\"icon\"><i class=\"bi bi-file-earmark-spreadsheet\"></i></div>\n <div class=\"title\">MBQ & Order</div>\n <div class=\"desc\">Generate per-store fixture export bundles.</div>\n </a>\n </div>\n </div>\n\n <div class=\"tool-section mb-4\">\n <h6 class=\"section-title\">Edit & Modify</h6>\n <div class=\"card-grid\">\n <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/allow-edit\">\n <div class=\"icon\"><i class=\"bi bi-pencil-square\"></i></div>\n <div class=\"title\">Allow Edit</div>\n <div class=\"desc\">Re-enable editing on a published task without losing responses.</div>\n </a>\n <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/modify-fixture-numbers\">\n <div class=\"icon\"><i class=\"bi bi-input-cursor-text\"></i></div>\n <div class=\"title\">Modify Fixture Numbers</div>\n <div class=\"desc\">Renumber fixtures in a planogram.</div>\n </a>\n <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/layout-touchup\">\n <div class=\"icon\"><i class=\"bi bi-arrows-move\"></i></div>\n <div class=\"title\">Layout Touchup</div>\n <div class=\"desc\">Reposition or resize layout elements without invalidating responses.</div>\n </a>\n <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/swap-template\">\n <div class=\"icon\"><i class=\"bi bi-arrow-left-right\"></i></div>\n <div class=\"title\">Template Swap</div>\n <div class=\"desc\">Replace one fixture template with another.</div>\n </a>\n <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/move-bucket\">\n <div class=\"icon\"><i class=\"bi bi-arrow-down-up\"></i></div>\n <div class=\"title\">Move Store Bucket</div>\n <div class=\"desc\">Move a floor between Onboarding and ManagePlano.</div>\n </a>\n </div>\n </div>\n\n <div class=\"tool-section mb-4\">\n <h6 class=\"section-title text-danger\">Destructive</h6>\n <div class=\"card-grid\">\n <a class=\"tool-card tool-card-danger\" routerLink=\"/manage/planogram/plano-tools/delete-task\">\n <div class=\"icon\"><i class=\"bi bi-trash\"></i></div>\n <div class=\"title\">Delete Task</div>\n <div class=\"desc\">Remove a task and its responses.</div>\n </a>\n <a class=\"tool-card tool-card-danger\" routerLink=\"/manage/planogram/plano-tools/delete-floor\">\n <div class=\"icon\"><i class=\"bi bi-trash3\"></i></div>\n <div class=\"title\">Delete Floor</div>\n <div class=\"desc\">Remove a floor and all rows referencing it.</div>\n </a>\n </div>\n </div>\n\n <div class=\"tool-section\">\n <h6 class=\"section-title\">Create</h6>\n <div class=\"card-grid\">\n <button type=\"button\" class=\"tool-card tool-card-primary\" (click)=\"onClickCreateFixtureTemplate()\">\n <div class=\"icon\"><i class=\"bi bi-plus-lg text-white\" ></i></div>\n <div class=\"title\">Create Template</div>\n <div class=\"desc\">Start a new fixture template from scratch.</div>\n </button>\n </div>\n </div>\n</div>\n", styles: [".plano-tools-hub{padding:.25rem}.hub-header h4{font-weight:600;color:#0f172a}.section-title{font-weight:600;color:#475569;text-transform:uppercase;letter-spacing:.04em;font-size:.75rem;margin-bottom:.75rem}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}.tool-card{display:block;width:100%;text-align:left;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:1rem 1.1rem;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s;cursor:pointer}.tool-card:hover{border-color:#94a3b8;box-shadow:0 4px 12px #0f172a0f;transform:translateY(-1px)}.tool-card .icon{width:36px;height:36px;border-radius:8px;background:#eff6ff;color:#2563eb;display:flex;align-items:center;justify-content:center;font-size:1.1rem;margin-bottom:.6rem}.tool-card .title{font-weight:600;color:#0f172a;margin-bottom:.25rem}.tool-card .desc{font-size:.825rem;color:#64748b;line-height:1.35}.tool-card.tool-card-danger .icon{background:#fef2f2;color:#dc2626}.tool-card.tool-card-danger:hover{border-color:#fca5a5}.tool-card.tool-card-primary{border-color:#16a34a;background:#f0fdf4}.tool-card.tool-card-primary .icon{background:#16a34a;color:#fff;font-size:1.5rem;line-height:1;font-weight:700}.tool-card.tool-card-primary .title{color:#14532d}.tool-card.tool-card-primary:hover{border-color:#15803d;box-shadow:0 4px 14px #16a34a2e}\n"], dependencies: [{ kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
|
|
40100
40115
|
}
|
|
40101
40116
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolsParentComponent, decorators: [{
|
|
40102
40117
|
type: Component,
|
|
40103
|
-
args: [{ selector: "lib-tools-parent", template: "<div class=\"plano-tools-hub\">\
|
|
40118
|
+
args: [{ selector: "lib-tools-parent", template: "<div class=\"plano-tools-hub\">\n <div class=\"hub-header mb-4\">\n <h4 class=\"mb-1\">Plano Tools</h4>\n <p class=\"text-muted small mb-0\">\n Utilities for managing planograms, layouts, exports and templates.\n </p>\n </div>\n\n <div class=\"tool-section mb-4\">\n <h6 class=\"section-title\">Export & Inspect</h6>\n <div class=\"card-grid\">\n <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/migrate\">\n <div class=\"icon\"><i class=\"bi bi-images\"></i></div>\n <div class=\"title\">Download Layout Images</div>\n <div class=\"desc\">Export layout images store by store.</div>\n </a>\n <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/cad-render\">\n <div class=\"icon\"><i class=\"bi bi-bounding-box\"></i></div>\n <div class=\"title\">Check CAD Output</div>\n <div class=\"desc\">Paste CAD data and preview the parsed layout.</div>\n </a>\n <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/cad-files\">\n <div class=\"icon\"><i class=\"bi bi-folder2-open\"></i></div>\n <div class=\"title\">CAD Files</div>\n <div class=\"desc\">List uploaded CAD & Kissflow files for a store.</div>\n </a>\n <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/data-export\">\n <div class=\"icon\"><i class=\"bi bi-database-down\"></i></div>\n <div class=\"title\">Data Export</div>\n <div class=\"desc\">Query planogram fixtures and export as Excel.</div>\n </a>\n <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/store-exports\">\n <div class=\"icon\"><i class=\"bi bi-file-earmark-spreadsheet\"></i></div>\n <div class=\"title\">MBQ & Order</div>\n <div class=\"desc\">Generate per-store fixture export bundles.</div>\n </a>\n </div>\n </div>\n\n <div class=\"tool-section mb-4\">\n <h6 class=\"section-title\">Edit & Modify</h6>\n <div class=\"card-grid\">\n <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/allow-edit\">\n <div class=\"icon\"><i class=\"bi bi-pencil-square\"></i></div>\n <div class=\"title\">Allow Edit</div>\n <div class=\"desc\">Re-enable editing on a published task without losing responses.</div>\n </a>\n <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/modify-fixture-numbers\">\n <div class=\"icon\"><i class=\"bi bi-input-cursor-text\"></i></div>\n <div class=\"title\">Modify Fixture Numbers</div>\n <div class=\"desc\">Renumber fixtures in a planogram.</div>\n </a>\n <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/layout-touchup\">\n <div class=\"icon\"><i class=\"bi bi-arrows-move\"></i></div>\n <div class=\"title\">Layout Touchup</div>\n <div class=\"desc\">Reposition or resize layout elements without invalidating responses.</div>\n </a>\n <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/swap-template\">\n <div class=\"icon\"><i class=\"bi bi-arrow-left-right\"></i></div>\n <div class=\"title\">Template Swap</div>\n <div class=\"desc\">Replace one fixture template with another.</div>\n </a>\n <a class=\"tool-card\" routerLink=\"/manage/planogram/plano-tools/move-bucket\">\n <div class=\"icon\"><i class=\"bi bi-arrow-down-up\"></i></div>\n <div class=\"title\">Move Store Bucket</div>\n <div class=\"desc\">Move a floor between Onboarding and ManagePlano.</div>\n </a>\n </div>\n </div>\n\n <div class=\"tool-section mb-4\">\n <h6 class=\"section-title text-danger\">Destructive</h6>\n <div class=\"card-grid\">\n <a class=\"tool-card tool-card-danger\" routerLink=\"/manage/planogram/plano-tools/delete-task\">\n <div class=\"icon\"><i class=\"bi bi-trash\"></i></div>\n <div class=\"title\">Delete Task</div>\n <div class=\"desc\">Remove a task and its responses.</div>\n </a>\n <a class=\"tool-card tool-card-danger\" routerLink=\"/manage/planogram/plano-tools/delete-floor\">\n <div class=\"icon\"><i class=\"bi bi-trash3\"></i></div>\n <div class=\"title\">Delete Floor</div>\n <div class=\"desc\">Remove a floor and all rows referencing it.</div>\n </a>\n </div>\n </div>\n\n <div class=\"tool-section\">\n <h6 class=\"section-title\">Create</h6>\n <div class=\"card-grid\">\n <button type=\"button\" class=\"tool-card tool-card-primary\" (click)=\"onClickCreateFixtureTemplate()\">\n <div class=\"icon\"><i class=\"bi bi-plus-lg text-white\" ></i></div>\n <div class=\"title\">Create Template</div>\n <div class=\"desc\">Start a new fixture template from scratch.</div>\n </button>\n </div>\n </div>\n</div>\n", styles: [".plano-tools-hub{padding:.25rem}.hub-header h4{font-weight:600;color:#0f172a}.section-title{font-weight:600;color:#475569;text-transform:uppercase;letter-spacing:.04em;font-size:.75rem;margin-bottom:.75rem}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}.tool-card{display:block;width:100%;text-align:left;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:1rem 1.1rem;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s;cursor:pointer}.tool-card:hover{border-color:#94a3b8;box-shadow:0 4px 12px #0f172a0f;transform:translateY(-1px)}.tool-card .icon{width:36px;height:36px;border-radius:8px;background:#eff6ff;color:#2563eb;display:flex;align-items:center;justify-content:center;font-size:1.1rem;margin-bottom:.6rem}.tool-card .title{font-weight:600;color:#0f172a;margin-bottom:.25rem}.tool-card .desc{font-size:.825rem;color:#64748b;line-height:1.35}.tool-card.tool-card-danger .icon{background:#fef2f2;color:#dc2626}.tool-card.tool-card-danger:hover{border-color:#fca5a5}.tool-card.tool-card-primary{border-color:#16a34a;background:#f0fdf4}.tool-card.tool-card-primary .icon{background:#16a34a;color:#fff;font-size:1.5rem;line-height:1;font-weight:700}.tool-card.tool-card-primary .title{color:#14532d}.tool-card.tool-card-primary:hover{border-color:#15803d;box-shadow:0 4px 14px #16a34a2e}\n"] }]
|
|
40104
40119
|
}], ctorParameters: () => [{ type: i1$1.NgbModal }, { type: i2.Router }, { type: i2$1.GlobalStateService }, { type: i2$1.PageInfoService }] });
|
|
40105
40120
|
|
|
40106
40121
|
class MisplacedProductFixtureComponent {
|
|
@@ -67633,11 +67648,11 @@ class DeleteFloorComponent {
|
|
|
67633
67648
|
this.destroy$.complete();
|
|
67634
67649
|
}
|
|
67635
67650
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DeleteFloorComponent, deps: [{ token: StoreBuilderService }, { token: i2$1.GlobalStateService }, { token: i1$1.NgbModal }], target: i0.ɵɵFactoryTarget.Component });
|
|
67636
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DeleteFloorComponent, selector: "lib-delete-floor", ngImport: i0, template: "<section class=\"delete-floor p-3\">\
|
|
67651
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DeleteFloorComponent, selector: "lib-delete-floor", ngImport: i0, template: "<section class=\"delete-floor p-3\">\n <lib-tool-page-header\n title=\"Delete Floor\"\n description=\"Removes a floor and every row that references it \u2014 fixtures, shelves, task compliance, processed tasks, comments, and revisions. If this is the only floor, the entire planogram is removed. The store entry is never touched.\"\n ></lib-tool-page-header>\n <div class=\"card p-4\" style=\"max-width: 720px;\">\n\n <!-- Store -->\n <div class=\"mb-3\">\n <lib-reactive-select\n label=\"Store\"\n [idField]=\"'storeId'\"\n [nameField]=\"'storeName'\"\n [data]=\"storeOptions\"\n [search]=\"true\"\n [ngModel]=\"selectedStoreId\"\n (ngModelChange)=\"onStoreSelected($event)\">\n </lib-reactive-select>\n <div class=\"text-muted small mt-1\" *ngIf=\"isLoadingStores\">Loading stores...</div>\n </div>\n\n <!-- Floor -->\n <div class=\"mb-3\" *ngIf=\"selectedStoreId\">\n <ng-container *ngIf=\"isLoadingFloors; else floorPicker\">\n <div class=\"text-muted small\">Loading floors...</div>\n </ng-container>\n <ng-template #floorPicker>\n <ng-container *ngIf=\"floors.length > 0; else noFloors\">\n <lib-reactive-select\n label=\"Floor\"\n [idField]=\"'_id'\"\n [nameField]=\"'displayName'\"\n [data]=\"floors\"\n [search]=\"true\"\n [ngModel]=\"selectedFloorId\"\n (ngModelChange)=\"onFloorSelected($event)\">\n </lib-reactive-select>\n </ng-container>\n <ng-template #noFloors>\n <div class=\"text-muted small\">No floors found for this store.</div>\n </ng-template>\n </ng-template>\n </div>\n\n <!-- Status + cascade preview -->\n <ng-container *ngIf=\"selectedFloorId\">\n <ng-container *ngIf=\"isLoadingImpact; else impactBlock\">\n <div class=\"text-muted small\">Loading floor details...</div>\n </ng-container>\n <ng-template #impactBlock>\n <ng-container *ngIf=\"impact\">\n <div class=\"mb-3 p-3 rounded info-block\">\n <div class=\"row gx-3 gy-2 small\">\n <div class=\"col-6\">\n <span class=\"text-muted d-block\">Floor status</span>\n <span class=\"fw-semibold\">{{ formatStatus(impact.floor.status) }}</span>\n </div>\n <div class=\"col-6\">\n <span class=\"text-muted d-block\">Planogram status</span>\n <span class=\"fw-semibold\">{{ formatStatus(impact.planogram.status) }}</span>\n </div>\n <div class=\"col-6\">\n <span class=\"text-muted d-block\">Plano approved</span>\n <span class=\"fw-semibold\">{{ formatBool(impact.floor.isPlanoApproved) }}</span>\n </div>\n <div class=\"col-6\">\n <span class=\"text-muted d-block\">Verification done</span>\n <span class=\"fw-semibold\">{{ formatBool(impact.floor.verificationStatus) }}</span>\n </div>\n <div class=\"col-6\">\n <span class=\"text-muted d-block\">Merch rollout done</span>\n <span class=\"fw-semibold\">{{ formatBool(impact.floor.merchRolloutStatus) }}</span>\n </div>\n <div class=\"col-6\">\n <span class=\"text-muted d-block\">VM rollout done</span>\n <span class=\"fw-semibold\">{{ formatBool(impact.floor.vmRolloutStatus) }}</span>\n </div>\n <div class=\"col-12\">\n <span class=\"text-muted d-block\">Total floors in this planogram</span>\n <span class=\"fw-semibold\">{{ impact.totalFloors }}</span>\n </div>\n </div>\n </div>\n\n <div class=\"mb-3 p-3 rounded cascade-block\">\n <div class=\"fw-semibold mb-2\">Will delete</div>\n <ul class=\"small mb-0 ps-3\">\n <li>1 floor (storelayouts)</li>\n <li>{{ impact.cascade.storefixtures }} fixture(s) (storefixtures)</li>\n <li>{{ impact.cascade.fixtureshelves }} shelf row(s) (fixtureshelves)</li>\n <li>{{ impact.cascade.planotaskcompliances }} task compliance row(s) (planotaskcompliances)</li>\n <li>{{ impact.cascade.processedtasks }} processed task(s) (processedtasks)</li>\n <li>{{ impact.cascade.planoglobalcomments }} global comment(s) (planoglobalcomments)</li>\n <li>{{ impact.cascade.planorevisions }} revision(s) (planorevisions)</li>\n </ul>\n <div class=\"text-muted small mt-2\">Total downstream rows: {{ totalCascadeRows }}</div>\n </div>\n\n <div class=\"alert alert-warning small\" *ngIf=\"impact.isLastFloor\">\n <strong>This is the only floor in this planogram.</strong>\n Deleting it will also remove the planogram entry \u2014 the plano will\n disappear completely. The store record itself will NOT be deleted.\n </div>\n </ng-container>\n </ng-template>\n </ng-container>\n\n <!-- Submit -->\n <button class=\"btn btn-danger\" (click)=\"onSubmit()\" [disabled]=\"!canSubmit\">\n {{ isSubmitting ? 'Deleting...' : 'Delete Floor' }}\n </button>\n\n <div class=\"mt-3 alert\" *ngIf=\"message\"\n [class.alert-success]=\"messageType === 'success'\"\n [class.alert-danger]=\"messageType === 'error'\"\n style=\"white-space: pre-line;\">\n {{ message }}\n </div>\n </div>\n</section>\n", styles: [".delete-floor .info-block{background-color:#f9fafb;border:1px solid #e4e7ec}.delete-floor .cascade-block{background-color:#fff7ed;border:1px solid #fed7aa}\n"], dependencies: [{ kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel", "disabled"], outputs: ["actionClick"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ToolPageHeaderComponent, selector: "lib-tool-page-header", inputs: ["title", "description", "backLink"] }] });
|
|
67637
67652
|
}
|
|
67638
67653
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DeleteFloorComponent, decorators: [{
|
|
67639
67654
|
type: Component,
|
|
67640
|
-
args: [{ selector: "lib-delete-floor", template: "<section class=\"delete-floor p-3\">\
|
|
67655
|
+
args: [{ selector: "lib-delete-floor", template: "<section class=\"delete-floor p-3\">\n <lib-tool-page-header\n title=\"Delete Floor\"\n description=\"Removes a floor and every row that references it \u2014 fixtures, shelves, task compliance, processed tasks, comments, and revisions. If this is the only floor, the entire planogram is removed. The store entry is never touched.\"\n ></lib-tool-page-header>\n <div class=\"card p-4\" style=\"max-width: 720px;\">\n\n <!-- Store -->\n <div class=\"mb-3\">\n <lib-reactive-select\n label=\"Store\"\n [idField]=\"'storeId'\"\n [nameField]=\"'storeName'\"\n [data]=\"storeOptions\"\n [search]=\"true\"\n [ngModel]=\"selectedStoreId\"\n (ngModelChange)=\"onStoreSelected($event)\">\n </lib-reactive-select>\n <div class=\"text-muted small mt-1\" *ngIf=\"isLoadingStores\">Loading stores...</div>\n </div>\n\n <!-- Floor -->\n <div class=\"mb-3\" *ngIf=\"selectedStoreId\">\n <ng-container *ngIf=\"isLoadingFloors; else floorPicker\">\n <div class=\"text-muted small\">Loading floors...</div>\n </ng-container>\n <ng-template #floorPicker>\n <ng-container *ngIf=\"floors.length > 0; else noFloors\">\n <lib-reactive-select\n label=\"Floor\"\n [idField]=\"'_id'\"\n [nameField]=\"'displayName'\"\n [data]=\"floors\"\n [search]=\"true\"\n [ngModel]=\"selectedFloorId\"\n (ngModelChange)=\"onFloorSelected($event)\">\n </lib-reactive-select>\n </ng-container>\n <ng-template #noFloors>\n <div class=\"text-muted small\">No floors found for this store.</div>\n </ng-template>\n </ng-template>\n </div>\n\n <!-- Status + cascade preview -->\n <ng-container *ngIf=\"selectedFloorId\">\n <ng-container *ngIf=\"isLoadingImpact; else impactBlock\">\n <div class=\"text-muted small\">Loading floor details...</div>\n </ng-container>\n <ng-template #impactBlock>\n <ng-container *ngIf=\"impact\">\n <div class=\"mb-3 p-3 rounded info-block\">\n <div class=\"row gx-3 gy-2 small\">\n <div class=\"col-6\">\n <span class=\"text-muted d-block\">Floor status</span>\n <span class=\"fw-semibold\">{{ formatStatus(impact.floor.status) }}</span>\n </div>\n <div class=\"col-6\">\n <span class=\"text-muted d-block\">Planogram status</span>\n <span class=\"fw-semibold\">{{ formatStatus(impact.planogram.status) }}</span>\n </div>\n <div class=\"col-6\">\n <span class=\"text-muted d-block\">Plano approved</span>\n <span class=\"fw-semibold\">{{ formatBool(impact.floor.isPlanoApproved) }}</span>\n </div>\n <div class=\"col-6\">\n <span class=\"text-muted d-block\">Verification done</span>\n <span class=\"fw-semibold\">{{ formatBool(impact.floor.verificationStatus) }}</span>\n </div>\n <div class=\"col-6\">\n <span class=\"text-muted d-block\">Merch rollout done</span>\n <span class=\"fw-semibold\">{{ formatBool(impact.floor.merchRolloutStatus) }}</span>\n </div>\n <div class=\"col-6\">\n <span class=\"text-muted d-block\">VM rollout done</span>\n <span class=\"fw-semibold\">{{ formatBool(impact.floor.vmRolloutStatus) }}</span>\n </div>\n <div class=\"col-12\">\n <span class=\"text-muted d-block\">Total floors in this planogram</span>\n <span class=\"fw-semibold\">{{ impact.totalFloors }}</span>\n </div>\n </div>\n </div>\n\n <div class=\"mb-3 p-3 rounded cascade-block\">\n <div class=\"fw-semibold mb-2\">Will delete</div>\n <ul class=\"small mb-0 ps-3\">\n <li>1 floor (storelayouts)</li>\n <li>{{ impact.cascade.storefixtures }} fixture(s) (storefixtures)</li>\n <li>{{ impact.cascade.fixtureshelves }} shelf row(s) (fixtureshelves)</li>\n <li>{{ impact.cascade.planotaskcompliances }} task compliance row(s) (planotaskcompliances)</li>\n <li>{{ impact.cascade.processedtasks }} processed task(s) (processedtasks)</li>\n <li>{{ impact.cascade.planoglobalcomments }} global comment(s) (planoglobalcomments)</li>\n <li>{{ impact.cascade.planorevisions }} revision(s) (planorevisions)</li>\n </ul>\n <div class=\"text-muted small mt-2\">Total downstream rows: {{ totalCascadeRows }}</div>\n </div>\n\n <div class=\"alert alert-warning small\" *ngIf=\"impact.isLastFloor\">\n <strong>This is the only floor in this planogram.</strong>\n Deleting it will also remove the planogram entry \u2014 the plano will\n disappear completely. The store record itself will NOT be deleted.\n </div>\n </ng-container>\n </ng-template>\n </ng-container>\n\n <!-- Submit -->\n <button class=\"btn btn-danger\" (click)=\"onSubmit()\" [disabled]=\"!canSubmit\">\n {{ isSubmitting ? 'Deleting...' : 'Delete Floor' }}\n </button>\n\n <div class=\"mt-3 alert\" *ngIf=\"message\"\n [class.alert-success]=\"messageType === 'success'\"\n [class.alert-danger]=\"messageType === 'error'\"\n style=\"white-space: pre-line;\">\n {{ message }}\n </div>\n </div>\n</section>\n", styles: [".delete-floor .info-block{background-color:#f9fafb;border:1px solid #e4e7ec}.delete-floor .cascade-block{background-color:#fff7ed;border:1px solid #fed7aa}\n"] }]
|
|
67641
67656
|
}], ctorParameters: () => [{ type: StoreBuilderService }, { type: i2$1.GlobalStateService }, { type: i1$1.NgbModal }] });
|
|
67642
67657
|
|
|
67643
67658
|
class UpdateFixtureTypeComponent {
|
|
@@ -69260,11 +69275,11 @@ class LayoutTouchupComponent {
|
|
|
69260
69275
|
});
|
|
69261
69276
|
}
|
|
69262
69277
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LayoutTouchupComponent, deps: [{ token: StoreBuilderService }, { token: i2$1.GlobalStateService }, { token: i4.ToastService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
69263
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LayoutTouchupComponent, selector: "lib-layout-touchup", ngImport: i0, template: "<div class=\"touchup-selector\">\
|
|
69278
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LayoutTouchupComponent, selector: "lib-layout-touchup", ngImport: i0, template: "<div class=\"touchup-selector\">\n <lib-tool-page-header\n title=\"Layout Touchup\"\n description=\"Reposition or resize existing walls, fixtures, entrances and other elements, or tweak individual fixture details \u2014 without invalidating any verification responses.\"\n ></lib-tool-page-header>\n\n <div class=\"row g-3\">\n <div class=\"col-md-6\">\n <lib-reactive-select\n label=\"Store\"\n [idField]=\"'id'\"\n [nameField]=\"'label'\"\n [data]=\"storeOptions\"\n [search]=\"true\"\n [ngModel]=\"selectedStore?.id\"\n (ngModelChange)=\"onStoreChange($event)\">\n </lib-reactive-select>\n <div class=\"text-muted small mt-1\" *ngIf=\"isLoadingStores\">Loading stores...</div>\n <div class=\"text-muted small mt-1\" *ngIf=\"!isLoadingStores\">\n Active stores with a planogram only.\n </div>\n </div>\n\n <div class=\"col-md-6\" *ngIf=\"selectedStore\">\n <ng-container *ngIf=\"isLoadingFloor; else floorPicker\">\n <div class=\"text-muted small\">Loading floors...</div>\n </ng-container>\n <ng-template #floorPicker>\n <lib-reactive-select\n label=\"Floor\"\n [idField]=\"'id'\"\n [nameField]=\"'label'\"\n [data]=\"floorOptions\"\n [search]=\"false\"\n [ngModel]=\"selectedFloorId\"\n (ngModelChange)=\"selectedFloorId = $event\">\n </lib-reactive-select>\n </ng-template>\n </div>\n </div>\n\n <div class=\"mt-4 d-flex justify-content-end\">\n <button\n type=\"button\"\n class=\"btn btn-primary\"\n [disabled]=\"!selectedFloorId || isLoadingFloor\"\n (click)=\"openEditor()\">\n Open Editor\n </button>\n </div>\n</div>\n", styles: [".touchup-selector{max-width:960px}.touchup-selector h4{font-size:18px;font-weight:600;color:#101828}\n"], dependencies: [{ kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "subTextField", "searchField", "label", "data", "action", "search", "prefix", "actionLabel", "disabled"], outputs: ["actionClick"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ToolPageHeaderComponent, selector: "lib-tool-page-header", inputs: ["title", "description", "backLink"] }] });
|
|
69264
69279
|
}
|
|
69265
69280
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LayoutTouchupComponent, decorators: [{
|
|
69266
69281
|
type: Component,
|
|
69267
|
-
args: [{ selector: "lib-layout-touchup", template: "<div class=\"touchup-selector\">\
|
|
69282
|
+
args: [{ selector: "lib-layout-touchup", template: "<div class=\"touchup-selector\">\n <lib-tool-page-header\n title=\"Layout Touchup\"\n description=\"Reposition or resize existing walls, fixtures, entrances and other elements, or tweak individual fixture details \u2014 without invalidating any verification responses.\"\n ></lib-tool-page-header>\n\n <div class=\"row g-3\">\n <div class=\"col-md-6\">\n <lib-reactive-select\n label=\"Store\"\n [idField]=\"'id'\"\n [nameField]=\"'label'\"\n [data]=\"storeOptions\"\n [search]=\"true\"\n [ngModel]=\"selectedStore?.id\"\n (ngModelChange)=\"onStoreChange($event)\">\n </lib-reactive-select>\n <div class=\"text-muted small mt-1\" *ngIf=\"isLoadingStores\">Loading stores...</div>\n <div class=\"text-muted small mt-1\" *ngIf=\"!isLoadingStores\">\n Active stores with a planogram only.\n </div>\n </div>\n\n <div class=\"col-md-6\" *ngIf=\"selectedStore\">\n <ng-container *ngIf=\"isLoadingFloor; else floorPicker\">\n <div class=\"text-muted small\">Loading floors...</div>\n </ng-container>\n <ng-template #floorPicker>\n <lib-reactive-select\n label=\"Floor\"\n [idField]=\"'id'\"\n [nameField]=\"'label'\"\n [data]=\"floorOptions\"\n [search]=\"false\"\n [ngModel]=\"selectedFloorId\"\n (ngModelChange)=\"selectedFloorId = $event\">\n </lib-reactive-select>\n </ng-template>\n </div>\n </div>\n\n <div class=\"mt-4 d-flex justify-content-end\">\n <button\n type=\"button\"\n class=\"btn btn-primary\"\n [disabled]=\"!selectedFloorId || isLoadingFloor\"\n (click)=\"openEditor()\">\n Open Editor\n </button>\n </div>\n</div>\n", styles: [".touchup-selector{max-width:960px}.touchup-selector h4{font-size:18px;font-weight:600;color:#101828}\n"] }]
|
|
69268
69283
|
}], ctorParameters: () => [{ type: StoreBuilderService }, { type: i2$1.GlobalStateService }, { type: i4.ToastService }, { type: i2.Router }] });
|
|
69269
69284
|
|
|
69270
69285
|
/**
|