@tuki-io/tuki-widgets 0.0.64 → 0.0.65

package/fesm2020/tuki-io-tuki-widgets-di2mt.mjs

@@ -1,1429 +0,0 @@
-import * as i0 from '@angular/core';
-import { Component, Input, NgModule, EventEmitter, Output, Injectable, inject } from '@angular/core';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import * as i4$1 from '@angular/material/table';
-import { MatTableModule, MatTableDataSource } from '@angular/material/table';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i6$1 from '@angular/material/checkbox';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i5$1 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i2 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i3 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i4 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import * as i5 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
-import * as i1$1 from 'ng-apexcharts';
-import { NgApexchartsModule } from 'ng-apexcharts';
-import * as i6 from '@angular/material/core';
-import * as i1$2 from '@angular/common/http';
-import { HttpClientModule, HttpHeaders } from '@angular/common/http';
-import { SelectionModel } from '@angular/cdk/collections';
-import { catchError, of, map, Subject, takeUntil } from 'rxjs';
-
-class CardComponent {
-}
-CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CardComponent, selector: "tk-card", inputs: { title: "title" }, ngImport: i0, template: "<article class=\"card\">\r\n    <header class=\"card__header\">\r\n        <h2>{{ title }}</h2>\r\n        <div class=\"card__menu-button\">\r\n            <img width=\"18\" src=\"/assets/icons/menu_icon.png\" alt=\"Menu Icon\">\r\n        </div>\r\n    </header>\r\n    <div class=\"card__content\">\r\n        <ng-content select=\"card-content\"></ng-content>\r\n    </div>\r\n</article>", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";:host{display:block;height:100%;box-sizing:border-box}.card{font-family:Inter,Inter,sans-serif;background-color:#fff;border-radius:1rem;padding:2rem;border:1px solid hsl(0,0%,50%);min-width:300px;max-width:100%;height:100%;display:flex;flex-direction:column;box-sizing:border-box;gap:2.5rem}.card__header{position:relative;display:flex;align-items:center;justify-content:space-between}.card__header h2{font-size:16px;margin:0}.card__header .card__menu-button{position:relative;display:flex;align-items:center}.card__content{display:flex;flex-direction:column;gap:2.5rem;flex-grow:1}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tk-card', template: "<article class=\"card\">\r\n    <header class=\"card__header\">\r\n        <h2>{{ title }}</h2>\r\n        <div class=\"card__menu-button\">\r\n            <img width=\"18\" src=\"/assets/icons/menu_icon.png\" alt=\"Menu Icon\">\r\n        </div>\r\n    </header>\r\n    <div class=\"card__content\">\r\n        <ng-content select=\"card-content\"></ng-content>\r\n    </div>\r\n</article>", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";:host{display:block;height:100%;box-sizing:border-box}.card{font-family:Inter,Inter,sans-serif;background-color:#fff;border-radius:1rem;padding:2rem;border:1px solid hsl(0,0%,50%);min-width:300px;max-width:100%;height:100%;display:flex;flex-direction:column;box-sizing:border-box;gap:2.5rem}.card__header{position:relative;display:flex;align-items:center;justify-content:space-between}.card__header h2{font-size:16px;margin:0}.card__header .card__menu-button{position:relative;display:flex;align-items:center}.card__content{display:flex;flex-direction:column;gap:2.5rem;flex-grow:1}\n"] }]
-        }], propDecorators: { title: [{
-                type: Input
-            }] } });
-
-class MaterialModule {
-}
-MaterialModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MaterialModule, imports: [MatProgressBarModule,
-        MatTooltipModule,
-        MatTableModule,
-        MatCheckboxModule,
-        MatButtonModule,
-        MatIconModule,
-        MatFormFieldModule,
-        MatInputModule,
-        MatSelectModule], exports: [MatProgressBarModule,
-        MatTooltipModule,
-        MatTableModule,
-        MatCheckboxModule,
-        MatButtonModule,
-        MatIconModule,
-        MatFormFieldModule,
-        MatInputModule,
-        MatSelectModule] });
-MaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MaterialModule, imports: [MatProgressBarModule,
-        MatTooltipModule,
-        MatTableModule,
-        MatCheckboxModule,
-        MatButtonModule,
-        MatIconModule,
-        MatFormFieldModule,
-        MatInputModule,
-        MatSelectModule, MatProgressBarModule,
-        MatTooltipModule,
-        MatTableModule,
-        MatCheckboxModule,
-        MatButtonModule,
-        MatIconModule,
-        MatFormFieldModule,
-        MatInputModule,
-        MatSelectModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MaterialModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        MatProgressBarModule,
-                        MatTooltipModule,
-                        MatTableModule,
-                        MatCheckboxModule,
-                        MatButtonModule,
-                        MatIconModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        MatSelectModule
-                    ],
-                    exports: [
-                        MatProgressBarModule,
-                        MatTooltipModule,
-                        MatTableModule,
-                        MatCheckboxModule,
-                        MatButtonModule,
-                        MatIconModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        MatSelectModule
-                    ]
-                }]
-        }] });
-
-class StatCardComponent {
-    ngOnInit() {
-        if (this.type === 'user') {
-            this.stats = {
-                id: this.readinessStats?.id,
-                customerId: this.readinessStats?.customerId,
-                total: this.readinessStats?.['totalUsers'],
-                totalReady: this.readinessStats?.['totalReadyUsers'],
-                totalUpgraded: this.readinessStats?.['totalUpgradedUsers'],
-            };
-        }
-        else {
-            this.stats = {
-                id: this.readinessStats?.id,
-                customerId: this.readinessStats?.customerId,
-                total: this.readinessStats?.['totalSites'],
-                totalReady: this.readinessStats?.['totalReadySites'],
-                totalUpgraded: this.readinessStats?.['totalUpgradedSites'],
-            };
-        }
-    }
-    get readyPercentage() {
-        return (this.stats?.totalReady / this.stats?.total * 100) >> 0;
-    }
-    get upgradedPercentage() {
-        return (this.stats?.totalUpgraded / this.stats?.total * 100) >> 0;
-    }
-}
-StatCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StatCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StatCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: StatCardComponent, selector: "tk-stat-card", inputs: { title: "title", type: "type", readinessStats: "readinessStats", upgradeStatus: "upgradeStatus" }, ngImport: i0, template: "<tk-card [title]=\"title\">\r\n  <ng-container ngProjectAs=\"card-content\">\r\n    <div class=\"card__content-info\">\r\n      <div class=\"card__content-wrapper\">\r\n        <img width=\"42\" [src]=\"'/assets/icons/' + type + '.png'\" alt=\"\" />\r\n        <div class=\"card__content-text\">\r\n          <div class=\"card__content-label\">\r\n            {{ upgradeStatus === 'ready' ? stats?.totalReady : stats?.totalUpgraded }} \r\n            {{ type === 'user' ? 'Users' : 'Sites' }}</div>\r\n          <div class=\"card__content-description\">{{ upgradeStatus === 'ready' ? 'Ready to Upgrade' : 'Already Upgraded' }}</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"card__content-wrapper\">\r\n        <img\r\n          *ngIf=\"upgradeStatus === 'ready'\"\r\n          height=\"48\"\r\n          src=\"/assets/icons/ready_to_upgrade.png\"\r\n          alt=\"\"\r\n        />\r\n        <img\r\n          *ngIf=\"upgradeStatus === 'already'\"\r\n          height=\"48\"\r\n          src=\"/assets/icons/already_upgraded.png\"\r\n          alt=\"\"\r\n        />\r\n      </div>\r\n    </div>\r\n    <div class=\"card__content-progress-wrapper\">\r\n      <div class=\"card__content-progress\">\r\n        <div class=\"card__content-progress-label\">\r\n          <span>{{ readyPercentage }}%</span>\r\n          <span>From all {{ stats?.total }} {{ type === 'user' ? 'users' : 'sites' }}</span>\r\n        </div>\r\n        <div class=\"card__content-progress-bar\">\r\n          <div\r\n            class=\"card__content-progress-bar-fill ready\"\r\n            [class.already]=\"upgradeStatus === 'already'\"\r\n            [style.width.%]=\"readyPercentage\"\r\n          ></div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"upgradeStatus === 'already'\" class=\"card__content-progress\">\r\n        <div class=\"card__content-progress-label\">\r\n          <span>{{ upgradedPercentage }}%</span>\r\n          <span>From all {{ stats?.totalReady }} ready {{ type === 'user' ? 'users' : 'sites' }}</span>\r\n        </div>\r\n        <div class=\"card__content-progress-bar\">\r\n          <div\r\n            class=\"card__content-progress-bar-fill ready\"\r\n            [class.already]=\"upgradeStatus === 'already'\"\r\n            [style.width.%]=\"upgradedPercentage\"\r\n          ></div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n</tk-card>\r\n", styles: [":host{display:block;height:100%;box-sizing:border-box}.card__content-info{display:flex;align-items:center;justify-content:space-between}.card__content-text{display:flex;flex-direction:column;gap:.25rem}.card__content-text .card__content-label{font-size:20px}.card__content-text .card__content-description{font-size:12px}.card__content-wrapper{display:flex;align-items:center;justify-content:center;gap:1rem}.card__content-wrapper:first-child{display:flex;gap:.5rem}.card__content-progress-wrapper{display:flex;flex-direction:column;gap:1rem}.card__content-progress{display:flex;flex-direction:column;gap:.25rem;font-size:14px}.card__content-progress .card__content-progress-label{display:flex;align-items:center;justify-content:space-between;padding:.05rem}.card__content-progress .card__content-progress-bar{background-color:#ededed;border-radius:10rem}.card__content-progress .card__content-progress-bar .card__content-progress-bar-fill{height:10px;border-radius:inherit}.ready{background-color:#1170cf}.already{background-color:#1d805f}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CardComponent, selector: "tk-card", inputs: ["title"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StatCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tk-stat-card', template: "<tk-card [title]=\"title\">\r\n  <ng-container ngProjectAs=\"card-content\">\r\n    <div class=\"card__content-info\">\r\n      <div class=\"card__content-wrapper\">\r\n        <img width=\"42\" [src]=\"'/assets/icons/' + type + '.png'\" alt=\"\" />\r\n        <div class=\"card__content-text\">\r\n          <div class=\"card__content-label\">\r\n            {{ upgradeStatus === 'ready' ? stats?.totalReady : stats?.totalUpgraded }} \r\n            {{ type === 'user' ? 'Users' : 'Sites' }}</div>\r\n          <div class=\"card__content-description\">{{ upgradeStatus === 'ready' ? 'Ready to Upgrade' : 'Already Upgraded' }}</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"card__content-wrapper\">\r\n        <img\r\n          *ngIf=\"upgradeStatus === 'ready'\"\r\n          height=\"48\"\r\n          src=\"/assets/icons/ready_to_upgrade.png\"\r\n          alt=\"\"\r\n        />\r\n        <img\r\n          *ngIf=\"upgradeStatus === 'already'\"\r\n          height=\"48\"\r\n          src=\"/assets/icons/already_upgraded.png\"\r\n          alt=\"\"\r\n        />\r\n      </div>\r\n    </div>\r\n    <div class=\"card__content-progress-wrapper\">\r\n      <div class=\"card__content-progress\">\r\n        <div class=\"card__content-progress-label\">\r\n          <span>{{ readyPercentage }}%</span>\r\n          <span>From all {{ stats?.total }} {{ type === 'user' ? 'users' : 'sites' }}</span>\r\n        </div>\r\n        <div class=\"card__content-progress-bar\">\r\n          <div\r\n            class=\"card__content-progress-bar-fill ready\"\r\n            [class.already]=\"upgradeStatus === 'already'\"\r\n            [style.width.%]=\"readyPercentage\"\r\n          ></div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"upgradeStatus === 'already'\" class=\"card__content-progress\">\r\n        <div class=\"card__content-progress-label\">\r\n          <span>{{ upgradedPercentage }}%</span>\r\n          <span>From all {{ stats?.totalReady }} ready {{ type === 'user' ? 'users' : 'sites' }}</span>\r\n        </div>\r\n        <div class=\"card__content-progress-bar\">\r\n          <div\r\n            class=\"card__content-progress-bar-fill ready\"\r\n            [class.already]=\"upgradeStatus === 'already'\"\r\n            [style.width.%]=\"upgradedPercentage\"\r\n          ></div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n</tk-card>\r\n", styles: [":host{display:block;height:100%;box-sizing:border-box}.card__content-info{display:flex;align-items:center;justify-content:space-between}.card__content-text{display:flex;flex-direction:column;gap:.25rem}.card__content-text .card__content-label{font-size:20px}.card__content-text .card__content-description{font-size:12px}.card__content-wrapper{display:flex;align-items:center;justify-content:center;gap:1rem}.card__content-wrapper:first-child{display:flex;gap:.5rem}.card__content-progress-wrapper{display:flex;flex-direction:column;gap:1rem}.card__content-progress{display:flex;flex-direction:column;gap:.25rem;font-size:14px}.card__content-progress .card__content-progress-label{display:flex;align-items:center;justify-content:space-between;padding:.05rem}.card__content-progress .card__content-progress-bar{background-color:#ededed;border-radius:10rem}.card__content-progress .card__content-progress-bar .card__content-progress-bar-fill{height:10px;border-radius:inherit}.ready{background-color:#1170cf}.already{background-color:#1d805f}\n"] }]
-        }], propDecorators: { title: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], readinessStats: [{
-                type: Input
-            }], upgradeStatus: [{
-                type: Input
-            }] } });
-
-class StatusListCardComponent {
-}
-StatusListCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StatusListCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StatusListCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: StatusListCardComponent, selector: "tk-status-list-card", inputs: { title: "title", items: "items" }, ngImport: i0, template: "<tk-card [title]=\"title\">\r\n    <ng-container ngProjectAs=\"card-content\">\r\n        <div class=\"card__list-wrapper\">\r\n            <div class=\"card__list-item\" *ngFor=\"let item of items\">\r\n                <img *ngIf=\"item.status\" src=\"{{ 'assets/icons/check_icon.png' }}\" alt=\"\">\r\n                <img *ngIf=\"!item.status\" src=\"{{ 'assets/icons/warning_icon.png' }}\" alt=\"\">\r\n                <div class=\"card__item-info\">\r\n                    <div class=\"card__item-text\">\r\n                        <div class=\"card__item-label\">\r\n                            {{ item.label }}\r\n                        </div>\r\n                        <div class=\"card__item-description\">\r\n                            {{ item.description }}\r\n                        </div>\r\n                    </div>\r\n                    <div *ngIf=\"title.includes('Site')\" class=\"card__item-stats\">\r\n                        <div class=\"card__item-numbers\">\r\n                            {{ item.value }}/{{ item.totalSites }}\r\n                        </div>\r\n                        <div class=\"card__item-numbers-description\">\r\n                            Ready/All\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n</tk-card>", styles: [":host{color:#333;display:block;height:100%;box-sizing:border-box}.card__list-wrapper{display:flex;flex-direction:column;gap:1rem}.card__list-item{display:flex;align-items:center;gap:1rem}.card__item-info{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%}.card__item-text{display:flex;flex-direction:column;gap:.05rem}.card__item-text .card__item-label{font-size:18px}.card__item-text .card__item-description{font-size:14px}.card__item-stats{right:0;position:absolute;text-align:right}.card__item-stats .card__item-numbers{font-size:28px}.card__item-stats .card__item-numbers-description{font-size:14px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CardComponent, selector: "tk-card", inputs: ["title"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StatusListCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "tk-status-list-card", template: "<tk-card [title]=\"title\">\r\n    <ng-container ngProjectAs=\"card-content\">\r\n        <div class=\"card__list-wrapper\">\r\n            <div class=\"card__list-item\" *ngFor=\"let item of items\">\r\n                <img *ngIf=\"item.status\" src=\"{{ 'assets/icons/check_icon.png' }}\" alt=\"\">\r\n                <img *ngIf=\"!item.status\" src=\"{{ 'assets/icons/warning_icon.png' }}\" alt=\"\">\r\n                <div class=\"card__item-info\">\r\n                    <div class=\"card__item-text\">\r\n                        <div class=\"card__item-label\">\r\n                            {{ item.label }}\r\n                        </div>\r\n                        <div class=\"card__item-description\">\r\n                            {{ item.description }}\r\n                        </div>\r\n                    </div>\r\n                    <div *ngIf=\"title.includes('Site')\" class=\"card__item-stats\">\r\n                        <div class=\"card__item-numbers\">\r\n                            {{ item.value }}/{{ item.totalSites }}\r\n                        </div>\r\n                        <div class=\"card__item-numbers-description\">\r\n                            Ready/All\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n</tk-card>", styles: [":host{color:#333;display:block;height:100%;box-sizing:border-box}.card__list-wrapper{display:flex;flex-direction:column;gap:1rem}.card__list-item{display:flex;align-items:center;gap:1rem}.card__item-info{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%}.card__item-text{display:flex;flex-direction:column;gap:.05rem}.card__item-text .card__item-label{font-size:18px}.card__item-text .card__item-description{font-size:14px}.card__item-stats{right:0;position:absolute;text-align:right}.card__item-stats .card__item-numbers{font-size:28px}.card__item-stats .card__item-numbers-description{font-size:14px}\n"] }]
-        }], propDecorators: { title: [{
-                type: Input
-            }], items: [{
-                type: Input
-            }] } });
-
-class ChartCardComponent {
-    ngOnInit() {
-        this.initChartOptions();
-    }
-    initChartOptions() {
-        if (this.totalUpgraded === 0)
-            this.totalNotUpgraded = 100;
-        this.chartOptions = {
-            series: [this.totalUpgraded, this.totalNotUpgraded],
-            chart: {
-                type: "donut",
-                height: 250
-            },
-            labels: ["MT", "DI"],
-            colors: ["#808080", "#2E8B57"],
-            legend: {
-                position: "right",
-                offsetY: 0,
-                fontSize: "14px",
-                markers: {
-                    width: 16,
-                    height: 16,
-                    radius: 2
-                },
-                itemMargin: {
-                    horizontal: 20,
-                    vertical: 2
-                },
-                formatter: function (seriesName, opts) {
-                    return seriesName + " " + ((opts.w.globals.series[opts.seriesIndex] / (opts.w.globals.series[0] + opts.w.globals.series[1]) * 100) >> 0) + "%";
-                }
-            },
-            plotOptions: {
-                pie: {
-                    donut: {
-                        size: "75%"
-                    }
-                }
-            },
-            dataLabels: {
-                enabled: false
-            }
-        };
-    }
-}
-ChartCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ChartCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChartCardComponent, selector: "tk-chart-card", inputs: { title: "title", totalUpgraded: "totalUpgraded", totalNotUpgraded: "totalNotUpgraded" }, ngImport: i0, template: "<tk-card [title]=\"title\">\r\n    <ng-container ngProjectAs=\"card-content\">\r\n        <div class=\"chart-container\">\r\n            <apx-chart\r\n                [series]=\"chartOptions.series\"\r\n                [chart]=\"chartOptions.chart\"\r\n                [labels]=\"chartOptions.labels\"\r\n                [colors]=\"chartOptions.colors\"\r\n                [legend]=\"chartOptions.legend\"\r\n                [plotOptions]=\"chartOptions.plotOptions\"\r\n                [dataLabels]=\"chartOptions.dataLabels\">\r\n            </apx-chart>\r\n        </div>\r\n    </ng-container>\r\n</tk-card>", styles: [":host{width:100%;display:block;height:100%;box-sizing:border-box}.chart-container{width:100%;height:220px;display:flex;justify-content:flex-start;align-items:center;padding:0}.chart-container apx-chart{width:100%;max-width:400px}:host ::ng-deep .apexcharts-legend{display:flex!important;flex-direction:column!important;justify-content:center!important}:host ::ng-deep .apexcharts-legend .apexcharts-legend-marker{border-radius:2px!important}:host ::ng-deep .apexcharts-legend .apexcharts-legend-text{font-weight:500!important;color:#333!important}\n"], dependencies: [{ kind: "component", type: i1$1.ChartComponent, selector: "apx-chart", inputs: ["chart", "annotations", "colors", "dataLabels", "series", "stroke", "labels", "legend", "markers", "noData", "fill", "tooltip", "plotOptions", "responsive", "xaxis", "yaxis", "forecastDataPoints", "grid", "states", "title", "subtitle", "theme", "autoUpdateSeries"] }, { kind: "component", type: CardComponent, selector: "tk-card", inputs: ["title"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tk-chart-card', template: "<tk-card [title]=\"title\">\r\n    <ng-container ngProjectAs=\"card-content\">\r\n        <div class=\"chart-container\">\r\n            <apx-chart\r\n                [series]=\"chartOptions.series\"\r\n                [chart]=\"chartOptions.chart\"\r\n                [labels]=\"chartOptions.labels\"\r\n                [colors]=\"chartOptions.colors\"\r\n                [legend]=\"chartOptions.legend\"\r\n                [plotOptions]=\"chartOptions.plotOptions\"\r\n                [dataLabels]=\"chartOptions.dataLabels\">\r\n            </apx-chart>\r\n        </div>\r\n    </ng-container>\r\n</tk-card>", styles: [":host{width:100%;display:block;height:100%;box-sizing:border-box}.chart-container{width:100%;height:220px;display:flex;justify-content:flex-start;align-items:center;padding:0}.chart-container apx-chart{width:100%;max-width:400px}:host ::ng-deep .apexcharts-legend{display:flex!important;flex-direction:column!important;justify-content:center!important}:host ::ng-deep .apexcharts-legend .apexcharts-legend-marker{border-radius:2px!important}:host ::ng-deep .apexcharts-legend .apexcharts-legend-text{font-weight:500!important;color:#333!important}\n"] }]
-        }], propDecorators: { title: [{
-                type: Input
-            }], totalUpgraded: [{
-                type: Input
-            }], totalNotUpgraded: [{
-                type: Input
-            }] } });
-
-class TableFiltersComponent {
-    constructor() {
-        this.filter = new EventEmitter();
-    }
-    ngOnInit() {
-        if (this.filters) {
-            this.filters.forEach(filter => {
-                if (filter.type === 'select' && !filter.options.some(opt => opt.value === 'all')) {
-                    filter.options.unshift({ label: 'All', value: 'all' });
-                }
-            });
-        }
-    }
-    onFilter(key, value) {
-        const val = { key, value };
-        this.filter.emit(val);
-    }
-}
-TableFiltersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TableFiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TableFiltersComponent, selector: "tk-table-filters", inputs: { filters: "filters" }, outputs: { filter: "filter" }, ngImport: i0, template: "<div class=\"filters-wrapper\">\r\n    <ng-container *ngFor=\"let filter of filters\">\r\n        <div class=\"filter\">\r\n            <ng-container [ngSwitch]=\"filter.type\">\r\n                <!-- Search Input with Material Design -->\r\n                <mat-form-field *ngSwitchCase=\"'search'\" appearance=\"outline\" class=\"search-field\">\r\n                    <mat-label>{{ filter.placeholder }}</mat-label>\r\n                    <input matInput \r\n                           [placeholder]=\"filter.placeholder\"\r\n                           (input)=\"onFilter(filter.columnKey, $event)\">\r\n                    <mat-icon matPrefix class=\"search-icon\">\r\n                        <img src=\"/assets/icons/search_icon.png\" alt=\"Search\" />\r\n                    </mat-icon>\r\n                </mat-form-field>\r\n\r\n                <!-- Select Dropdown with Material Design -->\r\n                <mat-form-field *ngSwitchCase=\"'select'\" appearance=\"outline\" class=\"select-field\">\r\n                    <mat-label>{{ filter.placeholder }}</mat-label>\r\n                    <mat-select (selectionChange)=\"onFilter(filter.columnKey, $event)\">\r\n                        <mat-option *ngFor=\"let option of filter.options\" [value]=\"option.value\">\r\n                            {{ option.label }}\r\n                        </mat-option>\r\n                    </mat-select>\r\n                </mat-form-field>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n</div>", styles: [":host .filters-wrapper{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;padding:0}:host .filters-wrapper .filter .search-field,:host .filters-wrapper .filter .select-field{width:100%}:host .filters-wrapper .filter .search-field .search-icon,:host .filters-wrapper .filter .select-field .search-icon{display:flex;align-items:center;justify-content:center;margin-right:.25rem;padding:0}:host .filters-wrapper .filter .search-field .search-icon img,:host .filters-wrapper .filter .select-field .search-icon img{width:24px;height:24px;object-fit:contain;opacity:.6;vertical-align:middle}:host .filters-wrapper .filter ::ng-deep .mat-form-field-appearance-outline .mat-form-field-wrapper{margin:0!important;padding:0!important}:host .filters-wrapper .filter ::ng-deep .mat-form-field-infix{padding:.5rem 1rem!important}:host .filters-wrapper .filter ::ng-deep .mat-form-field-label-wrapper{top:-1.1rem!important}:host .filters-wrapper .filter ::ng-deep .mat-form-field-infix .mat-input-element{transform:translate(-16px) translateY(-4px)!important}:host .filters-wrapper .filter ::ng-deep .mat-select-value{transform:translateY(-4px)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableFiltersComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tk-table-filters', template: "<div class=\"filters-wrapper\">\r\n    <ng-container *ngFor=\"let filter of filters\">\r\n        <div class=\"filter\">\r\n            <ng-container [ngSwitch]=\"filter.type\">\r\n                <!-- Search Input with Material Design -->\r\n                <mat-form-field *ngSwitchCase=\"'search'\" appearance=\"outline\" class=\"search-field\">\r\n                    <mat-label>{{ filter.placeholder }}</mat-label>\r\n                    <input matInput \r\n                           [placeholder]=\"filter.placeholder\"\r\n                           (input)=\"onFilter(filter.columnKey, $event)\">\r\n                    <mat-icon matPrefix class=\"search-icon\">\r\n                        <img src=\"/assets/icons/search_icon.png\" alt=\"Search\" />\r\n                    </mat-icon>\r\n                </mat-form-field>\r\n\r\n                <!-- Select Dropdown with Material Design -->\r\n                <mat-form-field *ngSwitchCase=\"'select'\" appearance=\"outline\" class=\"select-field\">\r\n                    <mat-label>{{ filter.placeholder }}</mat-label>\r\n                    <mat-select (selectionChange)=\"onFilter(filter.columnKey, $event)\">\r\n                        <mat-option *ngFor=\"let option of filter.options\" [value]=\"option.value\">\r\n                            {{ option.label }}\r\n                        </mat-option>\r\n                    </mat-select>\r\n                </mat-form-field>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n</div>", styles: [":host .filters-wrapper{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;padding:0}:host .filters-wrapper .filter .search-field,:host .filters-wrapper .filter .select-field{width:100%}:host .filters-wrapper .filter .search-field .search-icon,:host .filters-wrapper .filter .select-field .search-icon{display:flex;align-items:center;justify-content:center;margin-right:.25rem;padding:0}:host .filters-wrapper .filter .search-field .search-icon img,:host .filters-wrapper .filter .select-field .search-icon img{width:24px;height:24px;object-fit:contain;opacity:.6;vertical-align:middle}:host .filters-wrapper .filter ::ng-deep .mat-form-field-appearance-outline .mat-form-field-wrapper{margin:0!important;padding:0!important}:host .filters-wrapper .filter ::ng-deep .mat-form-field-infix{padding:.5rem 1rem!important}:host .filters-wrapper .filter ::ng-deep .mat-form-field-label-wrapper{top:-1.1rem!important}:host .filters-wrapper .filter ::ng-deep .mat-form-field-infix .mat-input-element{transform:translate(-16px) translateY(-4px)!important}:host .filters-wrapper .filter ::ng-deep .mat-select-value{transform:translateY(-4px)!important}\n"] }]
-        }], propDecorators: { filters: [{
-                type: Input
-            }], filter: [{
-                type: Output
-            }] } });
-
-class SummaryCardComponent {
-    constructor() {
-        this.value = 41;
-        this.status = 'Ready';
-    }
-    getStatusClass(status) {
-        switch (status?.toLowerCase()) {
-            case 'ready':
-                return 'ready';
-            case 'not ready':
-                return 'not-ready';
-            case 'failed':
-                return 'failed';
-            case 'completed':
-                return 'completed';
-            default:
-                return 'not-ready';
-        }
-    }
-}
-SummaryCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SummaryCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SummaryCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SummaryCardComponent, selector: "tk-summary-card", inputs: { value: "value", status: "status", description: "description" }, ngImport: i0, template: "<article class=\"summary-card\">\r\n    <header class=\"summary-card__header\">\r\n        <h2>{{ value }}</h2>\r\n    </header>\r\n    <div class=\"summary__card-description\">\r\n        <span>{{ description }}</span>\r\n        <div class=\"summary__card-status-wrapper\">\r\n            <span class=\"summary__card-status-indicator\" [ngClass]=\"getStatusClass(status)\"></span>\r\n            <span>{{ status }}</span>\r\n        </div>\r\n    </div>\r\n</article>", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";:host{display:block;height:100%;box-sizing:border-box;flex:1}.summary-card{font-family:Inter,Inter,sans-serif;background-color:#fff;border-radius:1rem;padding:1rem;border:1px solid hsl(0,0%,50%);max-width:100%;height:100%;display:flex;box-sizing:border-box;flex-direction:column;gap:.25rem}.summary-card__header{position:relative;display:flex;align-items:center;justify-content:space-between}.summary-card__header h2{font-size:28px;font-weight:500;margin:0}.summary__card-status-wrapper{display:flex;align-items:center;font-size:14px;gap:.5rem}.summary__card-status-wrapper .summary__card-status-indicator{width:8px;height:8px;border-radius:50%}.summary__card-status-wrapper .summary__card-status-indicator.ready{background-color:#1c3893}.summary__card-status-wrapper .summary__card-status-indicator.partial-ready{background-color:#f8cd00}.summary__card-status-wrapper .summary__card-status-indicator.not-ready{background-color:#9e9e9e}.summary__card-status-wrapper .summary__card-status-indicator.completed{background-color:#1d805f}.summary__card-status-wrapper .summary__card-status-indicator.failed{background-color:#f23933}.summary__card-description{font-size:14px;color:#333;display:flex;align-items:center;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SummaryCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tk-summary-card', template: "<article class=\"summary-card\">\r\n    <header class=\"summary-card__header\">\r\n        <h2>{{ value }}</h2>\r\n    </header>\r\n    <div class=\"summary__card-description\">\r\n        <span>{{ description }}</span>\r\n        <div class=\"summary__card-status-wrapper\">\r\n            <span class=\"summary__card-status-indicator\" [ngClass]=\"getStatusClass(status)\"></span>\r\n            <span>{{ status }}</span>\r\n        </div>\r\n    </div>\r\n</article>", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";:host{display:block;height:100%;box-sizing:border-box;flex:1}.summary-card{font-family:Inter,Inter,sans-serif;background-color:#fff;border-radius:1rem;padding:1rem;border:1px solid hsl(0,0%,50%);max-width:100%;height:100%;display:flex;box-sizing:border-box;flex-direction:column;gap:.25rem}.summary-card__header{position:relative;display:flex;align-items:center;justify-content:space-between}.summary-card__header h2{font-size:28px;font-weight:500;margin:0}.summary__card-status-wrapper{display:flex;align-items:center;font-size:14px;gap:.5rem}.summary__card-status-wrapper .summary__card-status-indicator{width:8px;height:8px;border-radius:50%}.summary__card-status-wrapper .summary__card-status-indicator.ready{background-color:#1c3893}.summary__card-status-wrapper .summary__card-status-indicator.partial-ready{background-color:#f8cd00}.summary__card-status-wrapper .summary__card-status-indicator.not-ready{background-color:#9e9e9e}.summary__card-status-wrapper .summary__card-status-indicator.completed{background-color:#1d805f}.summary__card-status-wrapper .summary__card-status-indicator.failed{background-color:#f23933}.summary__card-description{font-size:14px;color:#333;display:flex;align-items:center;justify-content:space-between}\n"] }]
-        }], propDecorators: { value: [{
-                type: Input
-            }], status: [{
-                type: Input
-            }], description: [{
-                type: Input
-            }] } });
-
-class SharedModule {
-}
-SharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, declarations: [CardComponent,
-        StatCardComponent,
-        StatusListCardComponent,
-        ChartCardComponent,
-        SummaryCardComponent,
-        TableFiltersComponent], imports: [CommonModule,
-        MaterialModule,
-        NgApexchartsModule,
-        HttpClientModule], exports: [CardComponent,
-        StatCardComponent,
-        StatusListCardComponent,
-        ChartCardComponent,
-        SummaryCardComponent,
-        TableFiltersComponent] });
-SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, imports: [CommonModule,
-        MaterialModule,
-        NgApexchartsModule,
-        HttpClientModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        CardComponent,
-                        StatCardComponent,
-                        StatusListCardComponent,
-                        ChartCardComponent,
-                        SummaryCardComponent,
-                        TableFiltersComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        MaterialModule,
-                        NgApexchartsModule,
-                        HttpClientModule
-                    ],
-                    exports: [
-                        CardComponent,
-                        StatCardComponent,
-                        StatusListCardComponent,
-                        ChartCardComponent,
-                        SummaryCardComponent,
-                        TableFiltersComponent
-                    ]
-                }]
-        }] });
-
-const API = {
-    OVERVIEW: {
-        GET_UPGRADE_PRECONDITIONS: '/api/webex-upgrade/customers/1477/preconditions/fetch',
-        GET_SITE_INFRASTRUCTURE: '/api/webex-upgrade/customers/1477/infra/fetch',
-        GET_USERS_UPGRADE_SUMMARY: '/api/webex-upgrade/customers/1477/users/upgrade/fetch',
-        GET_SITES_UPGRADE_SUMMARY: '/api/webex-upgrade/customers/1477/sites/upgrade/fetch',
-        GET_USERS_UPGRADE_READINESS: '/api/webex-upgrade/customers/1477/users/readiness/fetch',
-        GET_SITES_UPGRADE_READINESS: '/api/webex-upgrade/customers/1477/sites/readiness/fetch'
-    },
-    USER_UPGRADE: {
-        GET_USERS_UPGRADE_DATA: '/api/webex-upgrade/customers/1477/user-upgrade',
-        GET_USERS_UPGRADE_STATUS_COUNTS: '/api/webex-upgrade/customers/1477/user-upgrades/status-counts',
-        UPGRADE_USER: '/api/migration/webex/sites/:siteId/users/:userId'
-    },
-    SITE_UPGRADE: {
-        GET_SITES_UPGRADE_DATA: '/api/webex-upgrade/customers/1477/site-upgrades',
-        GET_SITES_UPGRADE_STATUS_COUNTS: '/api/webex-upgrade/customers/1477/site-upgrades/status-counts',
-        UPGRADE_SITE: '/api/migration/webex/sites/:siteId'
-    }
-};
-
-class APIService {
-    constructor(httpClient) {
-        this.httpClient = httpClient;
-        this.apiUrl = window.location.protocol + '//' + window.location.hostname + '/dcp';
-        this.token = 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZG1pbkBjb3JyZW5ldC5jb20iLCJyb2xlcyI6IlNVUEVSX1VTRVIiLCJpYXQiOjE3NTUwODUyMzgsImV4cCI6MTc1NTEwMzIzOH0.X1CKx-OBZvSs7Bzr_4SWW2ulBgHNkYZrmVuv6V7FZyo';
-        // this.apiUrl = window.location.protocol + '//' + window.location.host + '/dcp';
-        this.apiUrl = 'https://dev.tuki.io/webex';
-        // this.apiUrl = 'http://localhost:8088/dcp';
-    }
-    fetch(url, params, cache) {
-        const headers = this.getHeaders(cache);
-        params = params || {};
-        return this.httpClient.get(this.apiUrl + url, { params: this.prepareEncodedParams(params), headers });
-    }
-    post(url, body, params = {}) {
-        body = body || null;
-        const headers = this.getHeaders();
-        return this.httpClient.post(this.apiUrl + url, body, { params: this.prepareEncodedParams(params), headers });
-    }
-    // use when response extended data is necessary:
-    postExtended(url, body = null, params = {}, headers = {}) {
-        headers = headers || this.getHeaders();
-        return this.httpClient.post(this.apiUrl + url, body, {
-            headers,
-            observe: 'response',
-            params: this.prepareEncodedParams(params)
-        });
-    }
-    put(url, body = null, params = {}) {
-        const headers = this.getHeaders();
-        return this.httpClient.put(this.apiUrl + url, body, { headers, params: this.prepareEncodedParams(params) });
-    }
-    delete(url, params = {}) {
-        const headers = this.getHeaders();
-        return this.httpClient.delete(this.apiUrl + url, { headers, params: this.prepareEncodedParams(params) });
-    }
-    fetchPagination(url, pageSize, pageNumber, additionalParams = {}, cache) {
-        const copyAdditionalParams = JSON.parse(JSON.stringify(additionalParams));
-        const params = Object.assign(copyAdditionalParams, { size: pageSize.toString(), page: pageNumber.toString() });
-        return this.fetch(url, params, cache);
-    }
-    prepareEncodedParams(params) {
-        const result = {};
-        if (!params) {
-            return {};
-        }
-        for (const key of Object.keys(params)) {
-            if (params[key]) {
-                const stringParam = params[key].toString();
-                result[key] = stringParam.includes('+') ? encodeURIComponent(stringParam) : stringParam;
-            }
-        }
-        return result;
-    }
-    getHeaders(cache) {
-        let headers = new HttpHeaders();
-        if (cache) {
-            headers = headers.append('_Cache', 'true ');
-        }
-        const token = this.token || this.getParameterByName('token');
-        headers = headers.append('Authorization', 'Bearer ' + token);
-        return headers;
-    }
-    getParameterByName(name, url = window.location.href) {
-        name = name.replace(/[\[\]]/g, '\\$&');
-        var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'), results = regex.exec(url);
-        if (!results)
-            return null;
-        if (!results[2])
-            return '';
-        return decodeURIComponent(results[2].replace(/\+/g, ' '));
-    }
-}
-APIService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: APIService, deps: [{ token: i1$2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-APIService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: APIService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: APIService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return [{ type: i1$2.HttpClient }]; } });
-
-class UserUpgradeService {
-    constructor() {
-        this.apiService = inject(APIService);
-    }
-    // TODO: Impl the user upgrade logic here
-    bulkUpgrade(users) {
-        const entities = users.map(record => ({ cucmId: record.cucmId, entityId: record.userId }));
-        const customerId = users[0].customerId;
-        const siteId = users[0].siteId;
-        const body = {
-            customerId,
-            siteId,
-            entities: {
-                'PERSON': entities
-            }
-        };
-        console.log(body);
-        // This is not done yet...
-        return this.apiService.post(API.USER_UPGRADE.UPGRADE_USER.replace(':siteId', siteId).replace(':userId', users[0].userId), body, {}).pipe(catchError((err) => of(err)));
-    }
-    getUserUpgradeStatusCounts() {
-        return this.apiService.fetch(API.USER_UPGRADE.GET_USERS_UPGRADE_STATUS_COUNTS.replace(':customerId', this.customerId));
-    }
-    getUserUpgradeRecords() {
-        return this.apiService.fetch(API.USER_UPGRADE.GET_USERS_UPGRADE_DATA.replace(':customerId', this.customerId)).pipe(map((resp) => {
-            return resp.content;
-            // This was added because of mapping issues with BE resp;
-            // return resp.content.map((record: UserUpgradeRecord) => ({
-            //     userId: record.userId,
-            //     userName: record.userName,
-            //     customerId: record.customerId,
-            //     siteId: record.siteId,
-            //     siteName: record.siteName,
-            //     devices: record.devices,
-            //     cucmId: record.cucmId,
-            //     primaryExtension: record.primaryExtension,
-            //     deviceStatus: record.deviceStatus,
-            //     dialPlanStatus: record.dialPlanStatus,
-            //     dependenciesStatus: record.dependenciesStatus,
-            //     upgradeStatus: record.upgradeStatus
-            // } as UserUpgradeRecord));
-        }));
-    }
-}
-UserUpgradeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserUpgradeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-UserUpgradeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserUpgradeService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserUpgradeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
-const STATUS_ENTRIES = {
-    READY: 'Ready',
-    NOT_READY: 'Not Ready',
-    PARTIAL_READY: 'Partial Ready',
-    FAILED: 'Failed',
-    COMPLETED: 'Completed'
-};
-const DEPENDENCIES_STATUS = {
-    DEPENDENCIES_FOUND: 'Dependencies found',
-    NO_DEPENDENCIES: 'No dependencies',
-};
-
-class UserUpgradeDataTableComponent {
-    constructor() {
-        this.destroy$ = new Subject();
-        this.userUpgradeService = inject(UserUpgradeService);
-        this.apiService = inject(APIService);
-        this.STATUS_ENTRIES = STATUS_ENTRIES;
-        this.DEPENDENCIES_STATUS = DEPENDENCIES_STATUS;
-        this.displayedColumns = ['select', 'user', 'site', 'device', 'dialPlanStatus', 'dependencies', 'userUpgradeStatus'];
-        this.selection = new SelectionModel(true, []);
-        this.filters = [];
-        this.statusCounts = {};
-        this.activeFilters = {};
-    }
-    ngOnInit() {
-        this.apiService.token = this.token;
-        this.userUpgradeService.getUserUpgradeRecords()
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((records) => {
-            this.data = new MatTableDataSource(records);
-            this.setupCustomFilter();
-            this.initializeFilters(records);
-        });
-        this.userUpgradeService.getUserUpgradeStatusCounts()
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((statusCounts) => {
-            this.statusCounts['Ready'] = statusCounts['READY'] || 0;
-            this.statusCounts['Not Ready'] = statusCounts['NOT_READY'] || 0;
-            this.statusCounts['Completed'] = statusCounts['COMPLETED'] || 0;
-            this.statusCounts['Failed'] = statusCounts['FAILED'] || 0;
-        });
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-    initializeFilters(records) {
-        // Extract unique sites from actual data
-        const uniqueSites = [...new Set(records.map(record => record.siteName))];
-        const siteOptions = uniqueSites.map(site => ({
-            label: site,
-            value: site.toLowerCase().replace(/\s+/g, '-')
-        }));
-        // Extract unique statuses from actual data
-        const uniqueStatuses = [...new Set(records.map(record => record.upgradeStatus))];
-        const statusOptions = uniqueStatuses.map(status => ({
-            label: STATUS_ENTRIES[status],
-            value: status.toLowerCase().replace(/\s+/g, '-')
-        }));
-        this.filters = [
-            {
-                id: 'userName',
-                type: 'search',
-                columnKey: 'User',
-                placeholder: 'Search users...',
-                options: []
-            },
-            {
-                id: 'sites',
-                type: 'select',
-                columnKey: 'Site',
-                placeholder: 'Sites',
-                options: siteOptions
-            },
-            {
-                id: 'status',
-                type: 'select',
-                columnKey: 'User Upgrade Status',
-                placeholder: 'Upgrade Status',
-                options: statusOptions
-            }
-        ];
-    }
-    /** Whether the number of selected elements matches the total number of rows. */
-    isAllSelected() {
-        const numSelected = this.selection.selected.length;
-        const numRows = this.data?.data.length ?? 0;
-        return numSelected === numRows;
-    }
-    /** Selects all rows if they are not all selected; otherwise clear selection. */
-    masterToggle() {
-        this.isAllSelected() ?
-            this.selection.clear() :
-            this.data?.data.forEach(row => this.selection.select(row));
-    }
-    upgradeUser(user) {
-        this.userUpgradeService.bulkUpgrade([user]);
-    }
-    upgradeSelectedUsers() {
-        this.userUpgradeService.bulkUpgrade(this.selection.selected);
-    }
-    onFilter(filterEvent) {
-        const { key, value } = filterEvent;
-        let filterValue;
-        if (value && value.value !== undefined) {
-            filterValue = value.value;
-        }
-        else if (value && value.target) {
-            filterValue = value.target.value;
-        }
-        else {
-            filterValue = value;
-        }
-        // Handle "All" option or empty values - remove the filter
-        if (filterValue === 'all' || !filterValue || filterValue === '') {
-            delete this.activeFilters[key];
-        }
-        else {
-            this.activeFilters[key] = filterValue;
-        }
-        this.applyFilters();
-    }
-    setupCustomFilter() {
-        this.data.filterPredicate = (data, filter) => {
-            const filters = JSON.parse(filter || '{}');
-            for (const [key, value] of Object.entries(filters)) {
-                if (!value)
-                    continue;
-                switch (key) {
-                    case 'User':
-                        const searchTerm = value.toLowerCase();
-                        if (!data.userName.toLowerCase().includes(searchTerm)) {
-                            return false;
-                        }
-                        break;
-                    case 'Site':
-                        if (data.siteName !== this.getSiteNameFromValue(value)) {
-                            return false;
-                        }
-                        break;
-                    case 'User Upgrade Status':
-                        if (!this.matchesUpgradeStatus(data.upgradeStatus, value)) {
-                            return false;
-                        }
-                        break;
-                }
-            }
-            return true;
-        };
-    }
-    applyFilters() {
-        this.data.filter = JSON.stringify(this.activeFilters);
-    }
-    get filteredDataCount() {
-        return this.data?.filteredData?.length || 0;
-    }
-    getSiteNameFromValue(value) {
-        // Since we're now using actual site names, just convert back from slug format
-        return value.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
-    }
-    matchesUpgradeStatus(status, filterValue) {
-        // Handle direct status matching for cleaner implementation
-        return status.toLowerCase().replace(/\s+/g, '-') === filterValue.toLowerCase();
-    }
-    getStatusClass(status) {
-        switch (status.toLowerCase()) {
-            case 'ready':
-                return 'ready';
-            case 'not ready':
-                return 'not-ready';
-            case 'partial ready':
-                return 'partial-ready';
-            case 'completed':
-                return 'completed';
-            case 'failed':
-                return 'failed';
-            default:
-                return 'not-ready';
-        }
-    }
-}
-UserUpgradeDataTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserUpgradeDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-UserUpgradeDataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserUpgradeDataTableComponent, selector: "tk-user-upgrade-data-table", inputs: { token: "token" }, ngImport: i0, template: "<div class=\"wrapper\">\r\n    <div class=\"user-upgrade-status-wrapper\">\r\n        <tk-summary-card [description]=\"'Users are ready to upgrade'\" [value]=\"statusCounts['Ready']\"></tk-summary-card>\r\n        <tk-summary-card [description]=\"'Users are not ready'\" [value]=\"statusCounts['Not Ready']\" [status]=\"'Not Ready'\"></tk-summary-card>\r\n        <tk-summary-card [description]=\"'Users failed to upgrade'\" [value]=\"statusCounts['Failed']\" [status]=\"'Failed'\"></tk-summary-card>\r\n        <tk-summary-card [description]=\"'Successfully upgraded'\" [value]=\"statusCounts['Completed']\" [status]=\"'Completed'\"></tk-summary-card>\r\n    </div>\r\n    <div class=\"table-action-panel\">\r\n        <tk-table-filters *ngIf=\"filters.length > 0\" [filters]=\"filters\" (filter)=\"onFilter($event)\"></tk-table-filters>\r\n        <div class=\"action-wrapper\">\r\n            <span>{{filteredDataCount}} Users</span>\r\n            <button \r\n                mat-button \r\n                class=\"upgrade-bulk-button\" \r\n                color=\"primary\" \r\n                [disabled]=\"selection.selected.length === 0\" \r\n                (click)=\"upgradeSelectedUsers()\">\r\n                Upgrade {{ selection.selected.length === 0 ? '' : '(' + selection.selected.length + ')' }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n    <table mat-table [dataSource]=\"data\" class=\"user-upgrade-table\">\r\n\r\n        <!-- Checkbox Column -->\r\n        <ng-container matColumnDef=\"select\">\r\n            <th mat-header-cell *matHeaderCellDef>\r\n                <mat-checkbox \r\n                    (change)=\"$event ? masterToggle() : null\"\r\n                    [checked]=\"selection.hasValue() && isAllSelected()\"\r\n                    [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n                    class=\"custom-checkbox\">\r\n                </mat-checkbox>\r\n            </th>\r\n            <td mat-cell *matCellDef=\"let row\">\r\n                <mat-checkbox \r\n                    (click)=\"$event.stopPropagation()\"\r\n                    (change)=\"$event ? selection.toggle(row) : null\"\r\n                    [checked]=\"selection.isSelected(row)\"\r\n                    [disabled]=\"STATUS_ENTRIES[row.upgradeStatus] !== 'Ready'\"\r\n                    class=\"custom-checkbox\">\r\n                </mat-checkbox>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- User Column -->\r\n        <ng-container matColumnDef=\"user\">\r\n            <th mat-header-cell *matHeaderCellDef>User</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <div class=\"user-info\">\r\n                    <div class=\"user-name\">{{element.userName}}</div>\r\n                    <div class=\"user-email\">{{element.userName}}</div>\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- Site Column -->\r\n        <ng-container matColumnDef=\"site\">\r\n            <th mat-header-cell *matHeaderCellDef>Site</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <div class=\"site-info\">\r\n                    <span class=\"site-indicator\"></span>\r\n                    {{element.siteName}}\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- Device Column -->\r\n        <ng-container matColumnDef=\"device\">\r\n            <th mat-header-cell *matHeaderCellDef>Device</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <div class=\"device-info\">\r\n                    <div *ngIf=\"element.devices.length > 1\">\r\n                        <div class=\"device-name-wrapper\">\r\n                            <span class=\"device-indicator\"></span>\r\n                            <span class=\"device-name\">Multiple devices</span>\r\n                        </div>\r\n                    </div>\r\n                    <div *ngIf=\"element.devices.length === 1\">\r\n                        <div class=\"device-name-wrapper\">\r\n                            <span class=\"device-indicator\"></span>\r\n                            <span class=\"device-name\">{{element.devices[0]}}</span>\r\n                        </div>\r\n                        <span class=\"device-model\">{{ element.primaryExtension || 'No Extension' }}</span>\r\n                    </div>\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- Dial Plan Status Column -->\r\n        <ng-container matColumnDef=\"dialPlanStatus\">\r\n            <th mat-header-cell *matHeaderCellDef>Dial Plan Status</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <div class=\"status-info\">\r\n                    <span class=\"status-indicator\" [ngClass]=\"getStatusClass(element.dialPlanStatus)\"></span>\r\n                    <span>{{STATUS_ENTRIES[element.dialPlanStatus]}}</span>\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- Dependencies Column -->\r\n        <ng-container matColumnDef=\"dependencies\">\r\n            <th mat-header-cell *matHeaderCellDef>Dependencies</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <span *ngIf=\"DEPENDENCIES_STATUS[element.dependenciesStatus] === 'Dependencies found'\" class=\"dependencies-text\">{{DEPENDENCIES_STATUS[element.dependenciesStatus]}}</span>\r\n                <span *ngIf=\"DEPENDENCIES_STATUS[element.dependenciesStatus] === 'No dependencies'\">\u2014</span>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- User Upgrade Status Column -->\r\n        <ng-container matColumnDef=\"userUpgradeStatus\">\r\n            <th mat-header-cell *matHeaderCellDef>User Upgrade Status</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <div class=\"upgrade-status-cell\">\r\n                    <ng-container *ngIf=\"STATUS_ENTRIES[element.upgradeStatus] === 'Ready'; else statusBlock\">\r\n                        <button mat-button color=\"primary\" class=\"upgrade-button\" (click)=\"upgradeUser(element)\">Upgrade</button>\r\n                    </ng-container>\r\n                    <ng-template #statusBlock>\r\n                        <div class=\"status-info\">\r\n                            <span class=\"status-indicator\" [ngClass]=\"getStatusClass(element.upgradeStatus)\"></span>\r\n                            <span>{{STATUS_ENTRIES[element.upgradeStatus]}}</span>\r\n                        </div>\r\n                    </ng-template>\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" \r\n            [class.selected-row]=\"selection.isSelected(row)\"></tr>\r\n    </table>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";.wrapper{display:flex;flex-direction:column;gap:1rem}.user-upgrade-status-wrapper{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}.user-upgrade-table{font-family:Inter,Inter,sans-serif;width:100%;background:white;border-radius:8px;overflow:hidden;font-size:14px}.user-upgrade-table .mat-header-row{font-size:12px;height:35px}.user-upgrade-table .mat-cell{border-bottom:1px solid #d6d6d6}.user-upgrade-table .mat-header-cell{border-bottom:1px solid #afafaf}.user-upgrade-table .mat-row{transition:background-color .2s ease}.user-upgrade-table .mat-row:hover{background-color:#f8f9fa}.user-upgrade-table .mat-row.selected-row{background-color:#08599c1a}.user-upgrade-table .user-info .user-name{font-weight:500;color:#212121}.user-upgrade-table .user-info .user-email{font-size:12px;color:#757575}.user-upgrade-table .site-info{display:flex;align-items:center;gap:8px}.user-upgrade-table .site-info .site-indicator{width:8px;height:8px;border-radius:50%;background-color:#1170cf}.user-upgrade-table .device-info{display:flex;align-items:center;gap:12px}.user-upgrade-table .device-info .device-name-wrapper{display:flex;align-items:center;gap:8px}.user-upgrade-table .device-info .device-name-wrapper .device-name{font-weight:500;color:#212121}.user-upgrade-table .device-info .device-name-wrapper .device-indicator{width:8px;height:8px;border-radius:50%;background-color:#f8cd00}.user-upgrade-table .device-info .device-model{font-size:12px;color:#757575}.user-upgrade-table .status-info{display:flex;align-items:center;gap:8px}.user-upgrade-table .status-info .status-indicator{width:8px;height:8px;border-radius:50%}.user-upgrade-table .status-info .status-indicator.ready{background-color:#1d805f}.user-upgrade-table .status-info .status-indicator.partial-ready{background-color:#f8cd00}.user-upgrade-table .status-info .status-indicator.not-ready{background-color:#9e9e9e}.user-upgrade-table .status-info .status-indicator.completed{background-color:#1d805f}.user-upgrade-table .status-info .status-indicator.failed{background-color:#f23933}.user-upgrade-table .dependencies-text{font-size:12px;background-color:#ffe9e9;padding:.25rem .5rem;border-radius:3px;color:#000}.user-upgrade-table .upgrade-status-cell{display:flex;align-items:center;justify-content:flex-start}.user-upgrade-table .upgrade-button{border:1px solid #08599c!important;color:#08599c!important;background:white!important;border-radius:20px!important;font-size:14px!important;font-style:normal!important;font-weight:500!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important}.user-upgrade-table .upgrade-button:hover{background-color:#e3f2fd!important}.user-upgrade-table .custom-checkbox .mdc-checkbox{padding:8px}.table-action-panel{width:100%;display:flex;justify-content:flex-start;gap:1rem}.action-wrapper{display:flex;flex:1;align-items:center;justify-content:space-between;gap:1rem}.upgrade-bulk-button{border:1px solid #000!important;color:#fff!important;background:#000!important;border-radius:20px!important;padding:0 1rem!important;font-size:14px!important;font-style:normal!important;font-weight:400!important;height:36px!important;display:flex!important;align-items:center!important;justify-content:center!important}.upgrade-bulk-button:hover{background-color:#212121!important}.upgrade-bulk-button:disabled{background-color:#888!important;color:#fff!important;cursor:not-allowed!important;border-color:#888!important;opacity:.25!important}:host ::ng-deep .user-upgrade-table .mat-checkbox-checked.mat-accent .mat-checkbox-background{background-color:#08599c!important;border-color:#08599c!important}:host ::ng-deep .user-upgrade-table .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background{background-color:#08599c!important;border-color:#08599c!important}:host ::ng-deep .user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background{border-color:#08599c99!important}:host ::ng-deep .user-upgrade-table .mat-checkbox.mat-accent .mat-ripple-element{background-color:#08599c1a!important}:host ::ng-deep .user-upgrade-table .mat-checkbox.mat-accent:focus .mat-checkbox-background{background-color:#08599c1a!important}:host ::ng-deep .user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-frame{border-color:#08599c99!important}:host ::ng-deep .user-upgrade-table .mat-checkbox-checkmark{color:#fff!important}:host ::ng-deep .user-upgrade-table .mat-checkbox-checkmark-path{stroke:#fff!important}:host ::ng-deep .user-upgrade-table .mat-checkbox-mixedmark{border-color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SummaryCardComponent, selector: "tk-summary-card", inputs: ["value", "status", "description"] }, { kind: "component", type: TableFiltersComponent, selector: "tk-table-filters", inputs: ["filters"], outputs: ["filter"] }, { kind: "component", type: i4$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i4$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i5$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserUpgradeDataTableComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tk-user-upgrade-data-table', template: "<div class=\"wrapper\">\r\n    <div class=\"user-upgrade-status-wrapper\">\r\n        <tk-summary-card [description]=\"'Users are ready to upgrade'\" [value]=\"statusCounts['Ready']\"></tk-summary-card>\r\n        <tk-summary-card [description]=\"'Users are not ready'\" [value]=\"statusCounts['Not Ready']\" [status]=\"'Not Ready'\"></tk-summary-card>\r\n        <tk-summary-card [description]=\"'Users failed to upgrade'\" [value]=\"statusCounts['Failed']\" [status]=\"'Failed'\"></tk-summary-card>\r\n        <tk-summary-card [description]=\"'Successfully upgraded'\" [value]=\"statusCounts['Completed']\" [status]=\"'Completed'\"></tk-summary-card>\r\n    </div>\r\n    <div class=\"table-action-panel\">\r\n        <tk-table-filters *ngIf=\"filters.length > 0\" [filters]=\"filters\" (filter)=\"onFilter($event)\"></tk-table-filters>\r\n        <div class=\"action-wrapper\">\r\n            <span>{{filteredDataCount}} Users</span>\r\n            <button \r\n                mat-button \r\n                class=\"upgrade-bulk-button\" \r\n                color=\"primary\" \r\n                [disabled]=\"selection.selected.length === 0\" \r\n                (click)=\"upgradeSelectedUsers()\">\r\n                Upgrade {{ selection.selected.length === 0 ? '' : '(' + selection.selected.length + ')' }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n    <table mat-table [dataSource]=\"data\" class=\"user-upgrade-table\">\r\n\r\n        <!-- Checkbox Column -->\r\n        <ng-container matColumnDef=\"select\">\r\n            <th mat-header-cell *matHeaderCellDef>\r\n                <mat-checkbox \r\n                    (change)=\"$event ? masterToggle() : null\"\r\n                    [checked]=\"selection.hasValue() && isAllSelected()\"\r\n                    [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n                    class=\"custom-checkbox\">\r\n                </mat-checkbox>\r\n            </th>\r\n            <td mat-cell *matCellDef=\"let row\">\r\n                <mat-checkbox \r\n                    (click)=\"$event.stopPropagation()\"\r\n                    (change)=\"$event ? selection.toggle(row) : null\"\r\n                    [checked]=\"selection.isSelected(row)\"\r\n                    [disabled]=\"STATUS_ENTRIES[row.upgradeStatus] !== 'Ready'\"\r\n                    class=\"custom-checkbox\">\r\n                </mat-checkbox>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- User Column -->\r\n        <ng-container matColumnDef=\"user\">\r\n            <th mat-header-cell *matHeaderCellDef>User</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <div class=\"user-info\">\r\n                    <div class=\"user-name\">{{element.userName}}</div>\r\n                    <div class=\"user-email\">{{element.userName}}</div>\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- Site Column -->\r\n        <ng-container matColumnDef=\"site\">\r\n            <th mat-header-cell *matHeaderCellDef>Site</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <div class=\"site-info\">\r\n                    <span class=\"site-indicator\"></span>\r\n                    {{element.siteName}}\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- Device Column -->\r\n        <ng-container matColumnDef=\"device\">\r\n            <th mat-header-cell *matHeaderCellDef>Device</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <div class=\"device-info\">\r\n                    <div *ngIf=\"element.devices.length > 1\">\r\n                        <div class=\"device-name-wrapper\">\r\n                            <span class=\"device-indicator\"></span>\r\n                            <span class=\"device-name\">Multiple devices</span>\r\n                        </div>\r\n                    </div>\r\n                    <div *ngIf=\"element.devices.length === 1\">\r\n                        <div class=\"device-name-wrapper\">\r\n                            <span class=\"device-indicator\"></span>\r\n                            <span class=\"device-name\">{{element.devices[0]}}</span>\r\n                        </div>\r\n                        <span class=\"device-model\">{{ element.primaryExtension || 'No Extension' }}</span>\r\n                    </div>\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- Dial Plan Status Column -->\r\n        <ng-container matColumnDef=\"dialPlanStatus\">\r\n            <th mat-header-cell *matHeaderCellDef>Dial Plan Status</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <div class=\"status-info\">\r\n                    <span class=\"status-indicator\" [ngClass]=\"getStatusClass(element.dialPlanStatus)\"></span>\r\n                    <span>{{STATUS_ENTRIES[element.dialPlanStatus]}}</span>\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- Dependencies Column -->\r\n        <ng-container matColumnDef=\"dependencies\">\r\n            <th mat-header-cell *matHeaderCellDef>Dependencies</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <span *ngIf=\"DEPENDENCIES_STATUS[element.dependenciesStatus] === 'Dependencies found'\" class=\"dependencies-text\">{{DEPENDENCIES_STATUS[element.dependenciesStatus]}}</span>\r\n                <span *ngIf=\"DEPENDENCIES_STATUS[element.dependenciesStatus] === 'No dependencies'\">\u2014</span>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <!-- User Upgrade Status Column -->\r\n        <ng-container matColumnDef=\"userUpgradeStatus\">\r\n            <th mat-header-cell *matHeaderCellDef>User Upgrade Status</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <div class=\"upgrade-status-cell\">\r\n                    <ng-container *ngIf=\"STATUS_ENTRIES[element.upgradeStatus] === 'Ready'; else statusBlock\">\r\n                        <button mat-button color=\"primary\" class=\"upgrade-button\" (click)=\"upgradeUser(element)\">Upgrade</button>\r\n                    </ng-container>\r\n                    <ng-template #statusBlock>\r\n                        <div class=\"status-info\">\r\n                            <span class=\"status-indicator\" [ngClass]=\"getStatusClass(element.upgradeStatus)\"></span>\r\n                            <span>{{STATUS_ENTRIES[element.upgradeStatus]}}</span>\r\n                        </div>\r\n                    </ng-template>\r\n                </div>\r\n            </td>\r\n        </ng-container>\r\n\r\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" \r\n            [class.selected-row]=\"selection.isSelected(row)\"></tr>\r\n    </table>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";.wrapper{display:flex;flex-direction:column;gap:1rem}.user-upgrade-status-wrapper{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}.user-upgrade-table{font-family:Inter,Inter,sans-serif;width:100%;background:white;border-radius:8px;overflow:hidden;font-size:14px}.user-upgrade-table .mat-header-row{font-size:12px;height:35px}.user-upgrade-table .mat-cell{border-bottom:1px solid #d6d6d6}.user-upgrade-table .mat-header-cell{border-bottom:1px solid #afafaf}.user-upgrade-table .mat-row{transition:background-color .2s ease}.user-upgrade-table .mat-row:hover{background-color:#f8f9fa}.user-upgrade-table .mat-row.selected-row{background-color:#08599c1a}.user-upgrade-table .user-info .user-name{font-weight:500;color:#212121}.user-upgrade-table .user-info .user-email{font-size:12px;color:#757575}.user-upgrade-table .site-info{display:flex;align-items:center;gap:8px}.user-upgrade-table .site-info .site-indicator{width:8px;height:8px;border-radius:50%;background-color:#1170cf}.user-upgrade-table .device-info{display:flex;align-items:center;gap:12px}.user-upgrade-table .device-info .device-name-wrapper{display:flex;align-items:center;gap:8px}.user-upgrade-table .device-info .device-name-wrapper .device-name{font-weight:500;color:#212121}.user-upgrade-table .device-info .device-name-wrapper .device-indicator{width:8px;height:8px;border-radius:50%;background-color:#f8cd00}.user-upgrade-table .device-info .device-model{font-size:12px;color:#757575}.user-upgrade-table .status-info{display:flex;align-items:center;gap:8px}.user-upgrade-table .status-info .status-indicator{width:8px;height:8px;border-radius:50%}.user-upgrade-table .status-info .status-indicator.ready{background-color:#1d805f}.user-upgrade-table .status-info .status-indicator.partial-ready{background-color:#f8cd00}.user-upgrade-table .status-info .status-indicator.not-ready{background-color:#9e9e9e}.user-upgrade-table .status-info .status-indicator.completed{background-color:#1d805f}.user-upgrade-table .status-info .status-indicator.failed{background-color:#f23933}.user-upgrade-table .dependencies-text{font-size:12px;background-color:#ffe9e9;padding:.25rem .5rem;border-radius:3px;color:#000}.user-upgrade-table .upgrade-status-cell{display:flex;align-items:center;justify-content:flex-start}.user-upgrade-table .upgrade-button{border:1px solid #08599c!important;color:#08599c!important;background:white!important;border-radius:20px!important;font-size:14px!important;font-style:normal!important;font-weight:500!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important}.user-upgrade-table .upgrade-button:hover{background-color:#e3f2fd!important}.user-upgrade-table .custom-checkbox .mdc-checkbox{padding:8px}.table-action-panel{width:100%;display:flex;justify-content:flex-start;gap:1rem}.action-wrapper{display:flex;flex:1;align-items:center;justify-content:space-between;gap:1rem}.upgrade-bulk-button{border:1px solid #000!important;color:#fff!important;background:#000!important;border-radius:20px!important;padding:0 1rem!important;font-size:14px!important;font-style:normal!important;font-weight:400!important;height:36px!important;display:flex!important;align-items:center!important;justify-content:center!important}.upgrade-bulk-button:hover{background-color:#212121!important}.upgrade-bulk-button:disabled{background-color:#888!important;color:#fff!important;cursor:not-allowed!important;border-color:#888!important;opacity:.25!important}:host ::ng-deep .user-upgrade-table .mat-checkbox-checked.mat-accent .mat-checkbox-background{background-color:#08599c!important;border-color:#08599c!important}:host ::ng-deep .user-upgrade-table .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background{background-color:#08599c!important;border-color:#08599c!important}:host ::ng-deep .user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background{border-color:#08599c99!important}:host ::ng-deep .user-upgrade-table .mat-checkbox.mat-accent .mat-ripple-element{background-color:#08599c1a!important}:host ::ng-deep .user-upgrade-table .mat-checkbox.mat-accent:focus .mat-checkbox-background{background-color:#08599c1a!important}:host ::ng-deep .user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-frame{border-color:#08599c99!important}:host ::ng-deep .user-upgrade-table .mat-checkbox-checkmark{color:#fff!important}:host ::ng-deep .user-upgrade-table .mat-checkbox-checkmark-path{stroke:#fff!important}:host ::ng-deep .user-upgrade-table .mat-checkbox-mixedmark{border-color:#fff!important}\n"] }]
-        }], propDecorators: { token: [{
-                type: Input
-            }] } });
-
-class UserUpgradeModule {
-}
-UserUpgradeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserUpgradeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-UserUpgradeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: UserUpgradeModule, declarations: [UserUpgradeDataTableComponent], imports: [CommonModule,
-        SharedModule,
-        MatTableModule,
-        MatButtonModule,
-        MatCheckboxModule], exports: [UserUpgradeDataTableComponent] });
-UserUpgradeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserUpgradeModule, imports: [CommonModule,
-        SharedModule,
-        MatTableModule,
-        MatButtonModule,
-        MatCheckboxModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserUpgradeModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        UserUpgradeDataTableComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        SharedModule,
-                        MatTableModule,
-                        MatButtonModule,
-                        MatCheckboxModule
-                    ],
-                    exports: [
-                        UserUpgradeDataTableComponent
-                    ]
-                }]
-        }] });
-
-class SiteUpgradeService {
-    constructor() {
-        this.apiService = inject(APIService);
-    }
-    getSiteUpgradeStatusCounts() {
-        return this.apiService.fetch(API.SITE_UPGRADE.GET_SITES_UPGRADE_STATUS_COUNTS.replace(':customerId', this.customerId));
-    }
-    getSiteUpgradeRecords() {
-        return this.apiService.fetch(API.SITE_UPGRADE.GET_SITES_UPGRADE_DATA.replace(':customerId', this.customerId)).pipe(map((resp) => {
-            return resp.content.map((record) => ({
-                siteId: record.siteId,
-                siteName: record.siteName,
-                totalUsers: record.totalUsers,
-                totalReadyUsers: record.readyUsers,
-                totalNotReadyUsers: record.notReadyUsers,
-                totalUpgradedUsers: record.totalUpgradedUsers,
-                totalFailedUsers: record.totalFailedToUpgradeUsers,
-                locationMapping: record.locationMappingStatus,
-                PSTNTrunk: record.pstnTrunkStatus,
-                upgradeStatus: record.siteUpgradeStatus
-            }));
-        }));
-    }
-    // TODO: Impl the site upgrade logic here
-    upgradeSite(site) {
-        const customerId = site.customerId;
-        const siteId = site.siteId;
-    }
-}
-SiteUpgradeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SiteUpgradeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SiteUpgradeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SiteUpgradeService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SiteUpgradeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
-class SiteUpgradeDataTableComponent {
-    constructor() {
-        this.siteUpgradeService = inject(SiteUpgradeService);
-        this.apiService = inject(APIService);
-        this.destroy$ = new Subject();
-        this.STATUS_ENTRIES = STATUS_ENTRIES;
-        this.displayedColumns = ['site', 'ready users', 'upgraded users', 'location mapping', 'pstn trunk', 'site upgrade status'];
-        this.selection = new SelectionModel(true, []);
-        this.filters = [];
-        this.activeFilters = {};
-        this.statusCounts = {};
-    }
-    ngOnInit() {
-        this.apiService.token = this.token;
-        this.siteUpgradeService.getSiteUpgradeRecords()
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((records) => {
-            this.data = new MatTableDataSource(records);
-            this.setupCustomFilter();
-            this.initializeFilters(records);
-        });
-        this.siteUpgradeService.getSiteUpgradeStatusCounts()
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((statusCounts) => {
-            this.statusCounts['Ready'] = statusCounts['READY'] || 0;
-            this.statusCounts['Not Ready'] = statusCounts['NOT_READY'] || 0;
-            this.statusCounts['Completed'] = statusCounts['COMPLETED'] || 0;
-            this.statusCounts['Failed'] = statusCounts['FAILED'] || 0;
-        });
-    }
-    initializeFilters(records) {
-        // Extract unique sites from actual data
-        const uniqueSites = [...new Set(records.map(record => record.siteName))];
-        const siteOptions = uniqueSites.map(site => ({
-            label: site,
-            value: site.toLowerCase().replace(/\s+/g, '-')
-        }));
-        // Extract unique statuses from actual data
-        const uniqueStatuses = [...new Set(records.map(record => record.upgradeStatus))];
-        const statusOptions = uniqueStatuses.map(status => ({
-            label: STATUS_ENTRIES[status],
-            value: status.toLowerCase().replace(/\s+/g, '-')
-        }));
-        this.filters = [
-            {
-                id: 'sites',
-                type: 'select',
-                columnKey: 'Site',
-                placeholder: 'Sites',
-                options: siteOptions
-            },
-            {
-                id: 'status',
-                type: 'select',
-                columnKey: 'Site Upgrade Status',
-                placeholder: 'Upgrade Status',
-                options: statusOptions
-            }
-        ];
-    }
-    onFilter(filterEvent) {
-        const { key, value } = filterEvent;
-        let filterValue;
-        if (value && value.value !== undefined) {
-            filterValue = value.value;
-        }
-        else if (value && value.target) {
-            filterValue = value.target.value;
-        }
-        else {
-            filterValue = value;
-        }
-        // Handle "All" option or empty values - remove the filter
-        if (filterValue === 'all' || !filterValue || filterValue === '') {
-            delete this.activeFilters[key];
-        }
-        else {
-            this.activeFilters[key] = filterValue;
-        }
-        this.applyFilters();
-    }
-    setupCustomFilter() {
-        this.data.filterPredicate = (data, filter) => {
-            const filters = JSON.parse(filter || '{}');
-            for (const [key, value] of Object.entries(filters)) {
-                if (!value)
-                    continue;
-                switch (key) {
-                    case 'Site':
-                        if (data.siteName !== this.getSiteNameFromValue(value)) {
-                            return false;
-                        }
-                        break;
-                    case 'Site Upgrade Status':
-                        if (!this.matchesUpgradeStatus(data.upgradeStatus, value)) {
-                            return false;
-                        }
-                        break;
-                }
-            }
-            return true;
-        };
-    }
-    applyFilters() {
-        this.data.filter = JSON.stringify(this.activeFilters);
-    }
-    getSiteNameFromValue(value) {
-        // Since we're now using actual site names, just convert back from slug format
-        return value.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
-    }
-    matchesUpgradeStatus(status, filterValue) {
-        // Handle direct status matching for cleaner implementation
-        return status.toLowerCase().replace(/\s+/g, '-') === filterValue.toLowerCase();
-    }
-    get filteredDataCount() {
-        return this.data?.filteredData?.length || 0;
-    }
-    /** Whether the number of selected elements matches the total number of rows. */
-    isAllSelected() {
-        const numSelected = this.selection.selected.length;
-        const numRows = this.data?.data.length || 0;
-        return numSelected === numRows;
-    }
-    /** Selects all rows if they are not all selected; otherwise clear selection. */
-    masterToggle() {
-        this.isAllSelected() ?
-            this.selection.clear() :
-            this.data?.data.forEach(row => this.selection.select(row));
-    }
-    getLocationMappingClass(locationMapping) {
-        return locationMapping ? 'success' : 'error';
-    }
-    getSiteUpgradeStatusClass(status) {
-        switch (status.toLowerCase()) {
-            case 'ready':
-                return 'ready';
-            case 'partial ready':
-                return 'partial-ready';
-            case 'completed':
-                return 'completed';
-            case 'failed':
-                return 'failed';
-            case 'not ready':
-                return 'not-ready';
-            default:
-                return 'not-ready';
-        }
-    }
-    upgradeSite(site) {
-        this.siteUpgradeService.upgradeSite(site);
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-}
-SiteUpgradeDataTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SiteUpgradeDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SiteUpgradeDataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SiteUpgradeDataTableComponent, selector: "tk-site-upgrade-data-table", inputs: { token: "token" }, ngImport: i0, template: "<div class=\"wrapper\">\r\n    <div class=\"site-upgrade-status-wrapper\">\r\n        <tk-summary-card [description]=\"'Sites are ready to upgrade'\" [value]=\"statusCounts['Ready']\"></tk-summary-card>\r\n        <tk-summary-card [description]=\"'Sites are not ready'\" [value]=\"statusCounts['Not Ready']\" [status]=\"'Not Ready'\"></tk-summary-card>\r\n        <tk-summary-card [description]=\"'Sites failed to upgrade'\" [value]=\"statusCounts['Failed']\" [status]=\"'Failed'\"></tk-summary-card>\r\n        <tk-summary-card [description]=\"'Successfully upgraded'\" [value]=\"statusCounts['Completed']\" [status]=\"'Completed'\"></tk-summary-card>\r\n    </div>\r\n    <div class=\"table-action-panel\">\r\n        <tk-table-filters *ngIf=\"filters.length > 0\" [filters]=\"filters\" (filter)=\"onFilter($event)\"></tk-table-filters>\r\n        <div class=\"action-wrapper\">\r\n            <span>{{filteredDataCount}} Sites</span>\r\n        </div>\r\n    </div>\r\n    <table mat-table [dataSource]=\"data\" class=\"site-upgrade-table\">\r\n\r\n    <!-- Site Column -->\r\n    <ng-container matColumnDef=\"site\">\r\n        <th mat-header-cell *matHeaderCellDef>Site</th>\r\n        <td mat-cell *matCellDef=\"let element\">\r\n            <div class=\"site-info\">\r\n                <span class=\"site-indicator\"></span>\r\n                {{element.siteName}}\r\n            </div>\r\n        </td>\r\n    </ng-container>\r\n\r\n    <!-- Ready Users Column -->\r\n    <ng-container matColumnDef=\"ready users\">\r\n        <th mat-header-cell *matHeaderCellDef>Ready Users</th>\r\n        <td mat-cell *matCellDef=\"let element\">\r\n            <div class=\"user-count-info\">\r\n                <div class=\"user-count\">{{element.totalReadyUsers}}/{{element.totalUsers}}</div>\r\n                <div class=\"user-label\">Ready/Total</div>\r\n            </div>\r\n        </td>\r\n    </ng-container>\r\n\r\n    <!-- Upgraded Users Column --> \r\n    <ng-container matColumnDef=\"upgraded users\">\r\n        <th mat-header-cell *matHeaderCellDef>Upgraded Users</th>\r\n        <td mat-cell *matCellDef=\"let element\">\r\n            <div class=\"user-count-info\">\r\n                <div class=\"user-count\">{{element.totalUpgradedUsers}}/{{element.totalUsers}}</div>\r\n                <div class=\"user-label\">Upgraded/Total</div>\r\n            </div>\r\n        </td>\r\n    </ng-container>\r\n\r\n    <!-- Location Mapping Column -->\r\n    <ng-container matColumnDef=\"location mapping\">\r\n        <th mat-header-cell *matHeaderCellDef>Location Mapping</th>\r\n        <td mat-cell *matCellDef=\"let element\">\r\n            <div class=\"status-icon-cell\">\r\n                <img *ngIf=\"element.locationMapping\" src=\"/assets/icons/check2_icon.png\" alt=\"Location Mapping Enabled\"/>\r\n                <img *ngIf=\"!element.locationMapping\" src=\"/assets/icons/issue_icon.png\" alt=\"Location Mapping Disabled\"/>\r\n            </div>\r\n        </td>\r\n    </ng-container>\r\n\r\n    <!-- PSTN Trunk Column -->\r\n    <ng-container matColumnDef=\"pstn trunk\">\r\n        <th mat-header-cell *matHeaderCellDef>PSTN Trunk</th>\r\n        <td mat-cell *matCellDef=\"let element\">\r\n            <div class=\"status-icon-cell\">\r\n                <img *ngIf=\"element.PSTNTrunk\" src=\"/assets/icons/check2_icon.png\" alt=\"PSTN Trunk Enabled\"/>\r\n                <img *ngIf=\"!element.PSTNTrunk\" src=\"/assets/icons/issue_icon.png\" alt=\"PSTN Trunk Disabled\"/>\r\n            </div>\r\n        </td>\r\n    </ng-container>\r\n\r\n    <!-- Site Upgrade Status Column -->\r\n    <ng-container matColumnDef=\"site upgrade status\">\r\n        <th mat-header-cell *matHeaderCellDef>Site Upgrade Status</th>\r\n        <td mat-cell *matCellDef=\"let element\">\r\n            <div class=\"upgrade-status-cell\">\r\n                <ng-container *ngIf=\"STATUS_ENTRIES[element.upgradeStatus] === 'Ready'; else statusBlock\">\r\n                    <button mat-button color=\"primary\" class=\"upgrade-button\" (click)=\"upgradeSite(element)\">Upgrade</button>\r\n                </ng-container>\r\n                <ng-template #statusBlock>\r\n                    <div class=\"status-info\">\r\n                        <span class=\"status-indicator\" [ngClass]=\"getSiteUpgradeStatusClass(element.upgradeStatus)\"></span>\r\n                        <span>{{ STATUS_ENTRIES[element.upgradeStatus] }}</span>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n</table>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";.wrapper{display:flex;flex-direction:column;gap:1rem}.site-upgrade-status-wrapper{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}.site-upgrade-table{font-family:Inter,Inter,sans-serif;width:100%;background:white;border-radius:8px;overflow:hidden;font-size:14px}.site-upgrade-table .mat-header-row{font-size:12px;height:35px}.site-upgrade-table .mat-cell{border-bottom:1px solid #d6d6d6}.site-upgrade-table .mat-header-cell{border-bottom:1px solid #afafaf}.site-upgrade-table .site-info{display:flex;align-items:center;gap:8px}.site-upgrade-table .site-info .site-indicator{width:8px;height:8px;border-radius:50%;background-color:#1170cf}.site-upgrade-table .device-info{display:flex;align-items:center;gap:12px}.site-upgrade-table .device-info .device-name-wrapper{display:flex;align-items:center;gap:4px}.site-upgrade-table .device-info .device-name-wrapper .device-name{font-weight:500;color:#212121}.site-upgrade-table .device-info .device-name-wrapper .device-indicator{width:8px;height:8px;border-radius:50%;background-color:#f8cd00}.site-upgrade-table .device-info .device-model{font-size:12px;color:#757575}.site-upgrade-table .status-info{display:flex;align-items:center;gap:8px}.site-upgrade-table .status-info .status-indicator{width:8px;height:8px;border-radius:50%}.site-upgrade-table .status-info .status-indicator.ready{background-color:#1d805f}.site-upgrade-table .status-info .status-indicator.partial-ready{background-color:#f8cd00}.site-upgrade-table .status-info .status-indicator.not-ready{background-color:#9e9e9e}.site-upgrade-table .status-info .status-indicator.completed{background-color:#1d805f}.site-upgrade-table .status-info .status-indicator.failed{background-color:#f23933}.site-upgrade-table .dependencies-text{font-size:12px;background-color:#ffe9e9;padding:.25rem .5rem;border-radius:3px;color:#000}.site-upgrade-table .upgrade-status-cell{display:flex;align-items:center;justify-content:flex-start}.site-upgrade-table .upgrade-button{border:1px solid #08599c;color:#08599c;background:white;border-radius:20px;font-size:14px;font-style:normal;font-weight:500;height:32px;display:flex;align-items:center;justify-content:center}.site-upgrade-table .upgrade-button:hover{background-color:#e3f2fd}.site-upgrade-table .user-count-info .user-count{font-weight:500;color:#212121}.site-upgrade-table .user-count-info .user-label{font-size:12px;color:#757575}.site-upgrade-table .status-icon-cell{display:flex;align-items:center}.action-wrapper{display:flex;align-items:center;flex:1;justify-content:space-between;gap:1rem}.table-action-panel{width:100%;display:flex;justify-content:flex-start;align-items:center;gap:1rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SummaryCardComponent, selector: "tk-summary-card", inputs: ["value", "status", "description"] }, { kind: "component", type: TableFiltersComponent, selector: "tk-table-filters", inputs: ["filters"], outputs: ["filter"] }, { kind: "component", type: i4$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i4$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i5$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SiteUpgradeDataTableComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tk-site-upgrade-data-table', template: "<div class=\"wrapper\">\r\n    <div class=\"site-upgrade-status-wrapper\">\r\n        <tk-summary-card [description]=\"'Sites are ready to upgrade'\" [value]=\"statusCounts['Ready']\"></tk-summary-card>\r\n        <tk-summary-card [description]=\"'Sites are not ready'\" [value]=\"statusCounts['Not Ready']\" [status]=\"'Not Ready'\"></tk-summary-card>\r\n        <tk-summary-card [description]=\"'Sites failed to upgrade'\" [value]=\"statusCounts['Failed']\" [status]=\"'Failed'\"></tk-summary-card>\r\n        <tk-summary-card [description]=\"'Successfully upgraded'\" [value]=\"statusCounts['Completed']\" [status]=\"'Completed'\"></tk-summary-card>\r\n    </div>\r\n    <div class=\"table-action-panel\">\r\n        <tk-table-filters *ngIf=\"filters.length > 0\" [filters]=\"filters\" (filter)=\"onFilter($event)\"></tk-table-filters>\r\n        <div class=\"action-wrapper\">\r\n            <span>{{filteredDataCount}} Sites</span>\r\n        </div>\r\n    </div>\r\n    <table mat-table [dataSource]=\"data\" class=\"site-upgrade-table\">\r\n\r\n    <!-- Site Column -->\r\n    <ng-container matColumnDef=\"site\">\r\n        <th mat-header-cell *matHeaderCellDef>Site</th>\r\n        <td mat-cell *matCellDef=\"let element\">\r\n            <div class=\"site-info\">\r\n                <span class=\"site-indicator\"></span>\r\n                {{element.siteName}}\r\n            </div>\r\n        </td>\r\n    </ng-container>\r\n\r\n    <!-- Ready Users Column -->\r\n    <ng-container matColumnDef=\"ready users\">\r\n        <th mat-header-cell *matHeaderCellDef>Ready Users</th>\r\n        <td mat-cell *matCellDef=\"let element\">\r\n            <div class=\"user-count-info\">\r\n                <div class=\"user-count\">{{element.totalReadyUsers}}/{{element.totalUsers}}</div>\r\n                <div class=\"user-label\">Ready/Total</div>\r\n            </div>\r\n        </td>\r\n    </ng-container>\r\n\r\n    <!-- Upgraded Users Column --> \r\n    <ng-container matColumnDef=\"upgraded users\">\r\n        <th mat-header-cell *matHeaderCellDef>Upgraded Users</th>\r\n        <td mat-cell *matCellDef=\"let element\">\r\n            <div class=\"user-count-info\">\r\n                <div class=\"user-count\">{{element.totalUpgradedUsers}}/{{element.totalUsers}}</div>\r\n                <div class=\"user-label\">Upgraded/Total</div>\r\n            </div>\r\n        </td>\r\n    </ng-container>\r\n\r\n    <!-- Location Mapping Column -->\r\n    <ng-container matColumnDef=\"location mapping\">\r\n        <th mat-header-cell *matHeaderCellDef>Location Mapping</th>\r\n        <td mat-cell *matCellDef=\"let element\">\r\n            <div class=\"status-icon-cell\">\r\n                <img *ngIf=\"element.locationMapping\" src=\"/assets/icons/check2_icon.png\" alt=\"Location Mapping Enabled\"/>\r\n                <img *ngIf=\"!element.locationMapping\" src=\"/assets/icons/issue_icon.png\" alt=\"Location Mapping Disabled\"/>\r\n            </div>\r\n        </td>\r\n    </ng-container>\r\n\r\n    <!-- PSTN Trunk Column -->\r\n    <ng-container matColumnDef=\"pstn trunk\">\r\n        <th mat-header-cell *matHeaderCellDef>PSTN Trunk</th>\r\n        <td mat-cell *matCellDef=\"let element\">\r\n            <div class=\"status-icon-cell\">\r\n                <img *ngIf=\"element.PSTNTrunk\" src=\"/assets/icons/check2_icon.png\" alt=\"PSTN Trunk Enabled\"/>\r\n                <img *ngIf=\"!element.PSTNTrunk\" src=\"/assets/icons/issue_icon.png\" alt=\"PSTN Trunk Disabled\"/>\r\n            </div>\r\n        </td>\r\n    </ng-container>\r\n\r\n    <!-- Site Upgrade Status Column -->\r\n    <ng-container matColumnDef=\"site upgrade status\">\r\n        <th mat-header-cell *matHeaderCellDef>Site Upgrade Status</th>\r\n        <td mat-cell *matCellDef=\"let element\">\r\n            <div class=\"upgrade-status-cell\">\r\n                <ng-container *ngIf=\"STATUS_ENTRIES[element.upgradeStatus] === 'Ready'; else statusBlock\">\r\n                    <button mat-button color=\"primary\" class=\"upgrade-button\" (click)=\"upgradeSite(element)\">Upgrade</button>\r\n                </ng-container>\r\n                <ng-template #statusBlock>\r\n                    <div class=\"status-info\">\r\n                        <span class=\"status-indicator\" [ngClass]=\"getSiteUpgradeStatusClass(element.upgradeStatus)\"></span>\r\n                        <span>{{ STATUS_ENTRIES[element.upgradeStatus] }}</span>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n</table>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";.wrapper{display:flex;flex-direction:column;gap:1rem}.site-upgrade-status-wrapper{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}.site-upgrade-table{font-family:Inter,Inter,sans-serif;width:100%;background:white;border-radius:8px;overflow:hidden;font-size:14px}.site-upgrade-table .mat-header-row{font-size:12px;height:35px}.site-upgrade-table .mat-cell{border-bottom:1px solid #d6d6d6}.site-upgrade-table .mat-header-cell{border-bottom:1px solid #afafaf}.site-upgrade-table .site-info{display:flex;align-items:center;gap:8px}.site-upgrade-table .site-info .site-indicator{width:8px;height:8px;border-radius:50%;background-color:#1170cf}.site-upgrade-table .device-info{display:flex;align-items:center;gap:12px}.site-upgrade-table .device-info .device-name-wrapper{display:flex;align-items:center;gap:4px}.site-upgrade-table .device-info .device-name-wrapper .device-name{font-weight:500;color:#212121}.site-upgrade-table .device-info .device-name-wrapper .device-indicator{width:8px;height:8px;border-radius:50%;background-color:#f8cd00}.site-upgrade-table .device-info .device-model{font-size:12px;color:#757575}.site-upgrade-table .status-info{display:flex;align-items:center;gap:8px}.site-upgrade-table .status-info .status-indicator{width:8px;height:8px;border-radius:50%}.site-upgrade-table .status-info .status-indicator.ready{background-color:#1d805f}.site-upgrade-table .status-info .status-indicator.partial-ready{background-color:#f8cd00}.site-upgrade-table .status-info .status-indicator.not-ready{background-color:#9e9e9e}.site-upgrade-table .status-info .status-indicator.completed{background-color:#1d805f}.site-upgrade-table .status-info .status-indicator.failed{background-color:#f23933}.site-upgrade-table .dependencies-text{font-size:12px;background-color:#ffe9e9;padding:.25rem .5rem;border-radius:3px;color:#000}.site-upgrade-table .upgrade-status-cell{display:flex;align-items:center;justify-content:flex-start}.site-upgrade-table .upgrade-button{border:1px solid #08599c;color:#08599c;background:white;border-radius:20px;font-size:14px;font-style:normal;font-weight:500;height:32px;display:flex;align-items:center;justify-content:center}.site-upgrade-table .upgrade-button:hover{background-color:#e3f2fd}.site-upgrade-table .user-count-info .user-count{font-weight:500;color:#212121}.site-upgrade-table .user-count-info .user-label{font-size:12px;color:#757575}.site-upgrade-table .status-icon-cell{display:flex;align-items:center}.action-wrapper{display:flex;align-items:center;flex:1;justify-content:space-between;gap:1rem}.table-action-panel{width:100%;display:flex;justify-content:flex-start;align-items:center;gap:1rem}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { token: [{
-                type: Input
-            }] } });
-
-class SiteUpgradeModule {
-}
-SiteUpgradeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SiteUpgradeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SiteUpgradeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SiteUpgradeModule, declarations: [SiteUpgradeDataTableComponent], imports: [CommonModule,
-        SharedModule,
-        MatTableModule,
-        MatIconModule,
-        MatButtonModule], exports: [SiteUpgradeDataTableComponent] });
-SiteUpgradeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SiteUpgradeModule, imports: [CommonModule,
-        SharedModule,
-        MatTableModule,
-        MatIconModule,
-        MatButtonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SiteUpgradeModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        SiteUpgradeDataTableComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        SharedModule,
-                        MatTableModule,
-                        MatIconModule,
-                        MatButtonModule
-                    ],
-                    exports: [
-                        SiteUpgradeDataTableComponent
-                    ]
-                }]
-        }] });
-
-class UpgradeOverviewService {
-    constructor(apiService) {
-        this.apiService = apiService;
-    }
-    getUpgradePreconditions() {
-        return this.apiService.fetch(API.OVERVIEW.GET_UPGRADE_PRECONDITIONS.replace(':customerId', this.customerId)).pipe(map((resp) => {
-            return {
-                id: resp.id,
-                customerId: resp.customerId,
-                controlHubIntegration: resp.controlHubIntegration,
-                numberOfAvailableLicences: resp.availableLicences
-            };
-        }));
-    }
-    getSiteInfrastructureSummary() {
-        return this.apiService.fetch(API.OVERVIEW.GET_SITE_INFRASTRUCTURE.replace(':customerId', this.customerId)).pipe(map((resp) => {
-            return {
-                id: resp.id,
-                customerId: resp.customerId,
-                totalSites: resp.totalSites,
-                totalLocations: resp.totalLocations,
-                totalPSTNs: resp.totalPSTNS
-            };
-        }));
-    }
-    getUsersUpgradeSummary() {
-        return this.apiService.fetch(API.OVERVIEW.GET_USERS_UPGRADE_SUMMARY.replace(':customerId', this.customerId)).pipe(map((resp) => {
-            return {
-                id: resp.id,
-                customerId: resp.customerId,
-                totalUsers: resp.totalUsers,
-                totalReadyUsers: resp.totalUsersReady,
-                totalUpgradedUsers: resp.totalUsersUpgraded
-            };
-        }));
-    }
-    getSitesUpgradeSummary() {
-        return this.apiService.fetch(API.OVERVIEW.GET_SITES_UPGRADE_SUMMARY.replace(':customerId', this.customerId)).pipe(map((resp) => {
-            return {
-                id: resp.id,
-                customerId: resp.customerId,
-                totalSites: resp.totalSites,
-                totalReadySites: resp.totalSitesReady,
-                totalUpgradedSites: resp.totalSitesUpgraded
-            };
-        }));
-    }
-    getUsersUpgradeReadiness() {
-        return this.apiService.fetch(API.OVERVIEW.GET_USERS_UPGRADE_READINESS.replace(':customerId', this.customerId)).pipe(map((resp) => {
-            return {
-                id: resp.id,
-                customerId: resp.customerId,
-                totalUsers: resp.totalUsers,
-                totalReadyUsers: resp.totalUsersReady
-            };
-        }));
-    }
-    getSitesUpgradeReadiness() {
-        return this.apiService.fetch(API.OVERVIEW.GET_SITES_UPGRADE_READINESS.replace(':customerId', this.customerId)).pipe(map((resp) => {
-            return {
-                id: resp.id,
-                customerId: resp.customerId,
-                totalSites: resp.totalSites,
-                totalReadySites: resp.totalSitesReady
-            };
-        }));
-    }
-}
-UpgradeOverviewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UpgradeOverviewService, deps: [{ token: APIService }], target: i0.ɵɵFactoryTarget.Injectable });
-UpgradeOverviewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UpgradeOverviewService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UpgradeOverviewService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return [{ type: APIService }]; } });
-
-class ReadyToUpgradeUsersCardComponent {
-    constructor() {
-        this.apiService = inject(APIService);
-        this.upgradeOverviewService = inject(UpgradeOverviewService);
-        this.destroy$ = new Subject();
-        this.title = 'Ready Users';
-        this.type = 'user';
-        this.upgradeStatus = 'ready';
-        this.loading = false;
-    }
-    ngOnInit() {
-        this.apiService.token = this.token;
-        this.loading = true;
-        this.upgradeOverviewService.getUsersUpgradeReadiness()
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((stats) => {
-            this.readinessStats = stats;
-            this.loading = false;
-        });
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-}
-ReadyToUpgradeUsersCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ReadyToUpgradeUsersCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ReadyToUpgradeUsersCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ReadyToUpgradeUsersCardComponent, selector: "tk-ready-to-upgrade-users-card", inputs: { token: "token" }, ngImport: i0, template: "  <tk-stat-card\r\n    *ngIf=\"!loading\"\r\n    [title]=\"title\"\r\n    [type]=\"type\"\r\n    [readinessStats]=\"readinessStats\"\r\n    [upgradeStatus]=\"upgradeStatus\">\r\n  </tk-stat-card>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: StatCardComponent, selector: "tk-stat-card", inputs: ["title", "type", "readinessStats", "upgradeStatus"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ReadyToUpgradeUsersCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tk-ready-to-upgrade-users-card', template: "  <tk-stat-card\r\n    *ngIf=\"!loading\"\r\n    [title]=\"title\"\r\n    [type]=\"type\"\r\n    [readinessStats]=\"readinessStats\"\r\n    [upgradeStatus]=\"upgradeStatus\">\r\n  </tk-stat-card>" }]
-        }], propDecorators: { token: [{
-                type: Input
-            }] } });
-
-class ReadyToUpgradeSitesCardComponent {
-    constructor() {
-        this.apiService = inject(APIService);
-        this.upgradeOverviewService = inject(UpgradeOverviewService);
-        this.destroy$ = new Subject();
-        this.title = 'Ready Sites';
-        this.type = 'site';
-        this.upgradeStatus = 'ready';
-        this.loading = false;
-    }
-    ngOnInit() {
-        this.apiService.token = this.token;
-        this.loading = true;
-        this.upgradeOverviewService.getSitesUpgradeReadiness()
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((stats) => {
-            this.readinessStats = stats;
-            this.loading = false;
-        });
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-}
-ReadyToUpgradeSitesCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ReadyToUpgradeSitesCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ReadyToUpgradeSitesCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ReadyToUpgradeSitesCardComponent, selector: "tk-ready-to-upgrade-sites-card", inputs: { token: "token" }, ngImport: i0, template: "  <tk-stat-card\r\n    *ngIf=\"!loading\"\r\n    [title]=\"title\"\r\n    [type]=\"type\"\r\n    [readinessStats]=\"readinessStats\"\r\n    [upgradeStatus]=\"upgradeStatus\">\r\n  </tk-stat-card>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: StatCardComponent, selector: "tk-stat-card", inputs: ["title", "type", "readinessStats", "upgradeStatus"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ReadyToUpgradeSitesCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tk-ready-to-upgrade-sites-card', template: "  <tk-stat-card\r\n    *ngIf=\"!loading\"\r\n    [title]=\"title\"\r\n    [type]=\"type\"\r\n    [readinessStats]=\"readinessStats\"\r\n    [upgradeStatus]=\"upgradeStatus\">\r\n  </tk-stat-card>" }]
-        }], propDecorators: { token: [{
-                type: Input
-            }] } });
-
-class AlreadyUpgradedUsersCardComponent {
-    constructor() {
-        this.apiService = inject(APIService);
-        this.upgradeOverviewService = inject(UpgradeOverviewService);
-        this.destroy$ = new Subject();
-        this.title = 'Upgraded Users';
-        this.type = 'user';
-        this.upgradeStatus = 'already';
-        this.loading = false;
-    }
-    ngOnInit() {
-        this.apiService.token = this.token;
-        this.loading = true;
-        this.upgradeOverviewService.getUsersUpgradeSummary()
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((stats) => {
-            this.readinessStats = stats;
-            this.loading = false;
-        });
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-}
-AlreadyUpgradedUsersCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AlreadyUpgradedUsersCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AlreadyUpgradedUsersCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AlreadyUpgradedUsersCardComponent, selector: "tk-already-upgraded-users-card", inputs: { token: "token" }, ngImport: i0, template: `
-        <tk-stat-card
-            *ngIf="!loading"
-            [title]="title"
-            [type]="type"
-            [readinessStats]="readinessStats"
-            [upgradeStatus]="upgradeStatus"
-        ></tk-stat-card>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: StatCardComponent, selector: "tk-stat-card", inputs: ["title", "type", "readinessStats", "upgradeStatus"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AlreadyUpgradedUsersCardComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'tk-already-upgraded-users-card',
-                    template: `
-        <tk-stat-card
-            *ngIf="!loading"
-            [title]="title"
-            [type]="type"
-            [readinessStats]="readinessStats"
-            [upgradeStatus]="upgradeStatus"
-        ></tk-stat-card>
-    `
-                }]
-        }], propDecorators: { token: [{
-                type: Input
-            }] } });
-
-class AlreadyUpgradedSitesCardComponent {
-    constructor() {
-        this.apiService = inject(APIService);
-        this.upgradeOverviewService = inject(UpgradeOverviewService);
-        this.destroy$ = new Subject();
-        this.title = 'Upgraded Sites';
-        this.type = 'site';
-        this.upgradeStatus = 'already';
-        this.loading = false;
-    }
-    ngOnInit() {
-        this.apiService.token = this.token;
-        this.loading = true;
-        this.upgradeOverviewService.getSitesUpgradeSummary()
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((stats) => {
-            this.readinessStats = stats;
-            this.loading = false;
-        });
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-}
-AlreadyUpgradedSitesCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AlreadyUpgradedSitesCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AlreadyUpgradedSitesCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AlreadyUpgradedSitesCardComponent, selector: "tk-already-upgraded-sites-card", inputs: { token: "token" }, ngImport: i0, template: `
-        <tk-stat-card
-            *ngIf="!loading"
-            [title]="title"
-            [type]="type"
-            [readinessStats]="readinessStats"
-            [upgradeStatus]="upgradeStatus"
-        ></tk-stat-card>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: StatCardComponent, selector: "tk-stat-card", inputs: ["title", "type", "readinessStats", "upgradeStatus"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AlreadyUpgradedSitesCardComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'tk-already-upgraded-sites-card',
-                    template: `
-        <tk-stat-card
-            *ngIf="!loading"
-            [title]="title"
-            [type]="type"
-            [readinessStats]="readinessStats"
-            [upgradeStatus]="upgradeStatus"
-        ></tk-stat-card>
-    `
-                }]
-        }], propDecorators: { token: [{
-                type: Input
-            }] } });
-
-class PreconditionsStatusListCardComponent {
-    constructor() {
-        this.apiService = inject(APIService);
-        this.destroy$ = new Subject();
-        this.upgradeOverviewService = inject(UpgradeOverviewService);
-        this.title = 'Preconditions';
-    }
-    ngOnInit() {
-        this.apiService.token = this.token;
-        this.upgradeOverviewService.getUpgradePreconditions()
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((resp) => {
-            this.preconditions = resp;
-            this.init();
-        });
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-    init() {
-        this.items = [
-            {
-                label: 'Control Hub Integration',
-                description: 'Control Hub Connectivity',
-                status: this.preconditions.controlHubIntegration === 'CONNECTED'
-            },
-            {
-                label: 'SIP Trunk (Local Gateway)',
-                description: 'CUCM trunk connectivity estabilished',
-                status: false
-            },
-            {
-                label: `${this.preconditions.numberOfAvailableLicences} Available User Licences`,
-                description: 'Webex calling licences provisioned and assgined',
-                status: this.preconditions.numberOfAvailableLicences > 0
-            }
-        ];
-    }
-}
-PreconditionsStatusListCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PreconditionsStatusListCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PreconditionsStatusListCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PreconditionsStatusListCardComponent, selector: "tk-preconditions-status-list-card", inputs: { token: "token" }, ngImport: i0, template: `
-        <tk-status-list-card 
-            [title]="title"
-            [items]="items"
-        ></tk-status-list-card>
-    `, isInline: true, styles: [":host{width:100%}\n"], dependencies: [{ kind: "component", type: StatusListCardComponent, selector: "tk-status-list-card", inputs: ["title", "items"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PreconditionsStatusListCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tk-preconditions-status-list-card', template: `
-        <tk-status-list-card 
-            [title]="title"
-            [items]="items"
-        ></tk-status-list-card>
-    `, styles: [":host{width:100%}\n"] }]
-        }], propDecorators: { token: [{
-                type: Input
-            }] } });
-
-class SiteInfrastructureStatusListCardComponent {
-    constructor() {
-        this.title = 'Site Infrastructure';
-        this.apiService = inject(APIService);
-        this.upgradeOverviewService = inject(UpgradeOverviewService);
-        this.destroy$ = new Subject();
-    }
-    ngOnInit() {
-        this.apiService.token = this.token;
-        this.upgradeOverviewService.getSiteInfrastructureSummary()
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((siteInfrastructure) => {
-            this.items = [
-                {
-                    label: 'PSTN Trunk',
-                    description: 'Public network connectivity',
-                    status: false,
-                    totalSites: siteInfrastructure.totalSites,
-                    value: siteInfrastructure.totalPSTNs
-                },
-                {
-                    label: 'Location Mapping',
-                    description: 'Sites defined in Control Hub with proper configuration',
-                    status: false,
-                    totalSites: siteInfrastructure.totalSites,
-                    value: siteInfrastructure.totalLocations
-                }
-            ];
-        });
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-}
-SiteInfrastructureStatusListCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SiteInfrastructureStatusListCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SiteInfrastructureStatusListCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SiteInfrastructureStatusListCardComponent, selector: "tk-site-infrastructure-status-list-card", inputs: { token: "token" }, ngImport: i0, template: `
-        <tk-status-list-card 
-            [title]="title"
-            [items]="items"
-        ></tk-status-list-card>
-    `, isInline: true, styles: [":host{width:100%}\n"], dependencies: [{ kind: "component", type: StatusListCardComponent, selector: "tk-status-list-card", inputs: ["title", "items"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SiteInfrastructureStatusListCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tk-site-infrastructure-status-list-card', template: `
-        <tk-status-list-card 
-            [title]="title"
-            [items]="items"
-        ></tk-status-list-card>
-    `, styles: [":host{width:100%}\n"] }]
-        }], propDecorators: { token: [{
-                type: Input
-            }] } });
-
-class UpgradeStateComparisonChartCardComponent {
-    constructor() {
-        this.apiService = inject(APIService);
-        this.upgradeOverviewService = inject(UpgradeOverviewService);
-        this.destroy$ = new Subject();
-        this.type = 'Users';
-        this.loading = false;
-    }
-    ngOnInit() {
-        this.apiService.token = this.token;
-        this.totalUpgraded = 0;
-        this.totalNotUpgraded = 0;
-        this.loading = true;
-        this.title = `Upgraded vs. Not Upgraded ${this.type}`;
-        if (this.type === 'Sites') {
-            this.upgradeOverviewService.getSitesUpgradeSummary()
-                .pipe(takeUntil(this.destroy$))
-                .subscribe((stats) => {
-                this.totalUpgraded = parseInt(stats.totalUpgradedSites);
-                this.totalNotUpgraded = parseInt(stats.totalReadySites);
-                this.loading = false;
-            });
-        }
-        else {
-            this.upgradeOverviewService.getUsersUpgradeSummary()
-                .pipe(takeUntil(this.destroy$))
-                .subscribe((stats) => {
-                this.totalUpgraded = parseInt(stats.totalUpgradedUsers);
-                this.totalNotUpgraded = parseInt(stats.totalReadyUsers);
-                this.loading = false;
-            });
-        }
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-}
-UpgradeStateComparisonChartCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UpgradeStateComparisonChartCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-UpgradeStateComparisonChartCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UpgradeStateComparisonChartCardComponent, selector: "tk-upgrade-state-comparison-chart-card", inputs: { type: "type", token: "token" }, ngImport: i0, template: `
-        <tk-chart-card
-            *ngIf="!loading"
-            [title]="title"
-            [totalUpgraded]="totalUpgraded"
-            [totalNotUpgraded]="totalNotUpgraded"
-        ></tk-chart-card>
-    `, isInline: true, styles: [":host{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ChartCardComponent, selector: "tk-chart-card", inputs: ["title", "totalUpgraded", "totalNotUpgraded"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UpgradeStateComparisonChartCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "tk-upgrade-state-comparison-chart-card", template: `
-        <tk-chart-card
-            *ngIf="!loading"
-            [title]="title"
-            [totalUpgraded]="totalUpgraded"
-            [totalNotUpgraded]="totalNotUpgraded"
-        ></tk-chart-card>
-    `, styles: [":host{width:100%}\n"] }]
-        }], propDecorators: { type: [{
-                type: Input
-            }], token: [{
-                type: Input
-            }] } });
-
-class UpgradeOverviewModule {
-}
-UpgradeOverviewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UpgradeOverviewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-UpgradeOverviewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: UpgradeOverviewModule, declarations: [ReadyToUpgradeUsersCardComponent,
-        ReadyToUpgradeSitesCardComponent,
-        AlreadyUpgradedUsersCardComponent,
-        AlreadyUpgradedSitesCardComponent,
-        PreconditionsStatusListCardComponent,
-        SiteInfrastructureStatusListCardComponent,
-        UpgradeStateComparisonChartCardComponent], imports: [CommonModule,
-        SharedModule], exports: [ReadyToUpgradeUsersCardComponent,
-        ReadyToUpgradeSitesCardComponent,
-        AlreadyUpgradedUsersCardComponent,
-        AlreadyUpgradedSitesCardComponent,
-        PreconditionsStatusListCardComponent,
-        SiteInfrastructureStatusListCardComponent,
-        UpgradeStateComparisonChartCardComponent] });
-UpgradeOverviewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UpgradeOverviewModule, imports: [CommonModule,
-        SharedModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UpgradeOverviewModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        ReadyToUpgradeUsersCardComponent,
-                        ReadyToUpgradeSitesCardComponent,
-                        AlreadyUpgradedUsersCardComponent,
-                        AlreadyUpgradedSitesCardComponent,
-                        PreconditionsStatusListCardComponent,
-                        SiteInfrastructureStatusListCardComponent,
-                        UpgradeStateComparisonChartCardComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        SharedModule
-                    ],
-                    exports: [
-                        ReadyToUpgradeUsersCardComponent,
-                        ReadyToUpgradeSitesCardComponent,
-                        AlreadyUpgradedUsersCardComponent,
-                        AlreadyUpgradedSitesCardComponent,
-                        PreconditionsStatusListCardComponent,
-                        SiteInfrastructureStatusListCardComponent,
-                        UpgradeStateComparisonChartCardComponent
-                    ],
-                    providers: []
-                }]
-        }] });
-
-/*
- * Public API Surface of @tuki-io/tuki-widgets
- */
-// Shared Components
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { AlreadyUpgradedSitesCardComponent, AlreadyUpgradedUsersCardComponent, CardComponent, ChartCardComponent, PreconditionsStatusListCardComponent, ReadyToUpgradeSitesCardComponent, ReadyToUpgradeUsersCardComponent, SharedModule, SiteInfrastructureStatusListCardComponent, SiteUpgradeDataTableComponent, SiteUpgradeModule, StatCardComponent, StatusListCardComponent, SummaryCardComponent, TableFiltersComponent, UpgradeOverviewModule, UpgradeStateComparisonChartCardComponent, UserUpgradeDataTableComponent, UserUpgradeModule };
-//# sourceMappingURL=tuki-io-tuki-widgets-di2mt.mjs.map