tango-app-ui-store-builder 1.0.98 → 1.2.0

package/fesm2022/tango-app-ui-store-builder.mjs

@@ -13086,10 +13086,22 @@ class ManageStorePlanoComponent {
             else {
                 this.floorData = null;
                 this.createForm();
+                // Keep the form disabled during the floor-switch loading window so the
+                // template's edit-mode buttons (Save / Cancel / Add Entrance) don't flash.
+                this.layoutForm.disable({ emitEvent: false });
                 this.removeHighlight();
                 this.isLeftPanelCollapsed = true;
                 this.isRightPanelCollapsed = true;
+                // Reset per-floor selection state so stale references from the previous
+                // floor don't bleed into the new floor's render and feedback panels.
+                this.selectedFixture = null;
+                this.selectedFixtureFeedback = null;
+                this.selectedZoneFeedback = null;
+                this.allFixtureInstances = [];
+                this.allFixtures = [];
+                this.wallCount = this.clCount = 0;
                 this.floorData = clickedFloor;
+                this.extractAllFixtures(this.floorData);
                 try {
                     await Promise.all([
                         this.taskDetails(this.floorData.planoId, this.floorData._id),
@@ -27742,12 +27754,26 @@ class PlanoVerificationTableComponent {
                 { name: "Published", value: "publish", checked: false },
             ],
         },
+        // [ZONE-VERIFICATION] additive — independent zone filter
+        {
+            title: "Zone",
+            type: "multi",
+            isOpened: false,
+            options: [
+                { name: "Task Assigned", value: "taskAssigned", checked: false },
+                { name: "Review Pending", value: "reviewPending", checked: false },
+                { name: "Yet To Assign", value: "yetToAssign", checked: false },
+                { name: "Completed", value: "completed", checked: false },
+                { name: "Flag", value: "flag", checked: false },
+            ],
+        },
     ];
     appliedFilters = {
         country: [],
         city: [],
         layout: [],
         fixture: [],
+        zone: [],
         taskPending: "all",
         status: [],
     };
@@ -28050,6 +28076,38 @@ class PlanoVerificationTableComponent {
         if (status === "complete")
             return "Completed";
     }
+    // [ZONE-VERIFICATION] additive sibling helpers — do not touch getTaskStatus/getTaskTooltip
+    getZoneStatus(data) {
+        const zoneTaskList = data?.zoneTask?.[0]?.taskStatus ?? [];
+        const zoneTaskStatus = zoneTaskList.find((ele) => ele.type === "zoneVerification");
+        const zoneStatus = data?.zoneDetails?.zoneStatus;
+        if (!zoneTaskStatus)
+            return "yetToAssign";
+        if (zoneTaskStatus.status !== "submit") {
+            return zoneTaskStatus.breach ? "flag" : "taskAssigned";
+        }
+        // Trust the rollup: if every floor's zone task has approvalStatus === true
+        // (set by updateZoneVerificationStatus when all non-CL siblings are actioned),
+        // the plano is fully approved — even if orphan compliance docs exist.
+        const allApproved = zoneTaskList.length > 0 &&
+            zoneTaskList.every((t) => t.approvalStatus === true);
+        if (allApproved)
+            return "completed";
+        if (zoneStatus === "complete")
+            return "completed";
+        return "reviewPending";
+    }
+    getZoneTooltip(data) {
+        const status = this.getZoneStatus(data);
+        const map = {
+            yetToAssign: "Yet to Assign",
+            taskAssigned: "Task Assigned",
+            reviewPending: "Review Pending",
+            completed: "Completed",
+            flag: "Flagged",
+        };
+        return map[status] ?? "";
+    }
     getProgressValue(data) {
         const statusMap = {
             layout: data.taskDetails?.layoutStatus,
@@ -28210,11 +28268,11 @@ class PlanoVerificationTableComponent {
         });
     }
     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 });
-    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</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              <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              <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\">&#8226;</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" }] });
+    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\">&#8226;</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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PlanoVerificationTableComponent, decorators: [{
             type: Component,
-            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</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              <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              <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\">&#8226;</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"] }]
+            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\">&#8226;</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"] }]
         }], ctorParameters: () => [{ type: i1$1.NgbModal }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: StoreBuilderService }, { type: i2$1.GlobalStateService }, { type: i2$1.PageInfoService }] });
 
 class ManagePlanoComponent {