@tuki-io/tuki-widgets 0.0.63 → 0.0.64

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

@@ -0,0 +1,1438 @@
+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() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        if (this.type === 'user') {
+            this.stats = {
+                id: (_a = this.readinessStats) === null || _a === void 0 ? void 0 : _a.id,
+                customerId: (_b = this.readinessStats) === null || _b === void 0 ? void 0 : _b.customerId,
+                total: (_c = this.readinessStats) === null || _c === void 0 ? void 0 : _c['totalUsers'],
+                totalReady: (_d = this.readinessStats) === null || _d === void 0 ? void 0 : _d['totalReadyUsers'],
+                totalUpgraded: (_e = this.readinessStats) === null || _e === void 0 ? void 0 : _e['totalUpgradedUsers'],
+            };
+        }
+        else {
+            this.stats = {
+                id: (_f = this.readinessStats) === null || _f === void 0 ? void 0 : _f.id,
+                customerId: (_g = this.readinessStats) === null || _g === void 0 ? void 0 : _g.customerId,
+                total: (_h = this.readinessStats) === null || _h === void 0 ? void 0 : _h['totalSites'],
+                totalReady: (_j = this.readinessStats) === null || _j === void 0 ? void 0 : _j['totalReadySites'],
+                totalUpgraded: (_k = this.readinessStats) === null || _k === void 0 ? void 0 : _k['totalUpgradedSites'],
+            };
+        }
+    }
+    get readyPercentage() {
+        var _a, _b;
+        return (((_a = this.stats) === null || _a === void 0 ? void 0 : _a.totalReady) / ((_b = this.stats) === null || _b === void 0 ? void 0 : _b.total) * 100) >> 0;
+    }
+    get upgradedPercentage() {
+        var _a, _b;
+        return (((_a = this.stats) === null || _a === void 0 ? void 0 : _a.totalUpgraded) / ((_b = this.stats) === null || _b === void 0 ? void 0 : _b.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 === null || status === void 0 ? void 0 : 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() {
+        var _a, _b;
+        const numSelected = this.selection.selected.length;
+        const numRows = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.data.length) !== null && _b !== void 0 ? _b : 0;
+        return numSelected === numRows;
+    }
+    /** Selects all rows if they are not all selected; otherwise clear selection. */
+    masterToggle() {
+        var _a;
+        this.isAllSelected() ?
+            this.selection.clear() :
+            (_a = this.data) === null || _a === void 0 ? void 0 : _a.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() {
+        var _a, _b;
+        return ((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.filteredData) === null || _b === void 0 ? void 0 : _b.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() {
+        var _a, _b;
+        return ((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.filteredData) === null || _b === void 0 ? void 0 : _b.length) || 0;
+    }
+    /** Whether the number of selected elements matches the total number of rows. */
+    isAllSelected() {
+        var _a;
+        const numSelected = this.selection.selected.length;
+        const numRows = ((_a = this.data) === null || _a === void 0 ? void 0 : _a.data.length) || 0;
+        return numSelected === numRows;
+    }
+    /** Selects all rows if they are not all selected; otherwise clear selection. */
+    masterToggle() {
+        var _a;
+        this.isAllSelected() ?
+            this.selection.clear() :
+            (_a = this.data) === null || _a === void 0 ? void 0 : _a.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