@tuki-io/tuki-widgets 0.0.134 → 0.0.136

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

@@ -0,0 +1,2204 @@
+import * as i0 from '@angular/core';
+import { Injectable, inject, Component, Input, EventEmitter, Output, NgModule, ViewEncapsulation } from '@angular/core';
+import { SelectionModel } from '@angular/cdk/collections';
+import * as i2$1 from '@angular/material/table';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { catchError, of, Subject, Subscription, takeUntil, map, forkJoin } from 'rxjs';
+import * as i1 from '@angular/common/http';
+import { HttpHeaders, HttpClientModule } from '@angular/common/http';
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3$1 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i4$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 i6 from '@angular/material/core';
+import { MatOptionModule } from '@angular/material/core';
+import * as i7 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i8 from '@angular/material/paginator';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import * as i2$2 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i1$2 from 'ng-apexcharts';
+import { NgApexchartsModule } from 'ng-apexcharts';
+import { map as map$1, catchError as catchError$1 } from 'rxjs/operators';
+import * as i6$1 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+
+const API$1 = {
+    OVERVIEW: {
+        GET_UPGRADE_PRECONDITIONS: '/api/webex-upgrade/customers/:customerId/preconditions/fetch',
+        GET_SITE_INFRASTRUCTURE: '/api/webex-upgrade/customers/:customerId/infra/fetch',
+        GET_USERS_UPGRADE_SUMMARY: '/api/webex-upgrade/customers/:customerId/users/upgrade/fetch',
+        GET_SITES_UPGRADE_SUMMARY: '/api/webex-upgrade/customers/:customerId/sites/upgrade/fetch',
+        GET_USERS_UPGRADE_READINESS: '/api/webex-upgrade/customers/:customerId/users/readiness/fetch',
+        GET_SITES_UPGRADE_READINESS: '/api/webex-upgrade/customers/:customerId/sites/readiness/fetch'
+    },
+    USER_UPGRADE: {
+        GET_USERS_UPGRADE_DATA: '/api/webex-upgrade/customers/:customerId/user-upgrade',
+        GET_USERS_UPGRADE_STATUS_COUNTS: '/api/webex-upgrade/customers/:customerId/user-upgrades/status-counts',
+        UPGRADE_USER: '/api/migration/webex/sites/:siteId/users/:userId',
+        SINGLE_COLLECT: '/api/migration/webex/singlecollect/features/:featureName',
+        SINGLE_MIGRATION: '/api/migration/webex/singlemigration/features/:featureName',
+        UPGRADE_STATUS: '/api/webex-upgrade/customers/:customerId/users/upgrade-status'
+    },
+    SITE_UPGRADE: {
+        GET_SITES_UPGRADE_DATA: '/api/webex-upgrade/customers/:customerId/site-upgrades',
+        GET_SITES_UPGRADE_STATUS_COUNTS: '/api/webex-upgrade/customers/:customerId/site-upgrades/status-counts',
+        WEBEX_CACHE_COLLECTION: '/api/migration/:migrationType/sites/:siteId/collectbuildwebexcache',
+        UPGRADE_SITE: '/api/migration/webex/sites/:siteId',
+        WEBEX_BATCH_STATUS: "/api/migration/webex/customer/:customerId/batchesstatus",
+        MIGRATE_SITE: "/api/migration/webex/sites/:siteId/migrate",
+        BATCH_STATUS: "/api/e2emigration/batches-status/:customerId",
+        GET_BATCH_SITES: "/api/e2emigration/batch/:customerId/Sites",
+        WEBEX_CACHE_COLLECTION_SITE_LIST: "/api/migration/webex/customers/:customerId/sitelistforcollectbuildwebexcache",
+        WEBEX_CACHE_COLLECTION_CUCM_LIST: "/api/migration/webex/customers/:customerId/cucmlistforcollectbuildwebexcache",
+        MIGRATION_STATUS: "/api/migration/state/webex/customers/:customerId/migrationstatus"
+    }
+};
+
+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.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.HttpClient }]; } });
+
+class UserUpgradeService {
+    constructor() {
+        this.apiService = inject(APIService);
+    }
+    // TODO: Impl the user upgrade logic here
+    bulkUpgrade(users) {
+        const body = this.generateUserUpgradeBody(users);
+        console.log('bulkUpgrade', users);
+        console.log(body);
+        // This is not done yet...
+        return this.apiService.post(API$1.USER_UPGRADE.SINGLE_MIGRATION.replace(':featureName', "PERSON"), body, {}).pipe(catchError((err) => of(err)));
+    }
+    collectUsers(users) {
+        const body = this.generateUserUpgradeBody(users);
+        console.log('collectUsers', body);
+        // This is not done yet...
+        return this.apiService.post(API$1.USER_UPGRADE.SINGLE_COLLECT.replace(':featureName', 'PERSON'), body, {}).pipe(catchError((err) => of(err)));
+    }
+    getUsersUpgradeStatuses(users) {
+        const body = this.generateUserUpgradeStatusBody(users);
+        console.log('getUsersUpgradeStatuses', body);
+        // This is not done yet...
+        return this.apiService.post(API$1.USER_UPGRADE.UPGRADE_STATUS.replace(':customerId', this.customerId), body, {}).pipe(catchError((err) => of(err)));
+    }
+    generateUserUpgradeBody(users) {
+        const entities = users.map(record => ({ cucmId: record.cucmId, entityId: record.userId }));
+        const customerId = users[0].customerId;
+        return {
+            customerId,
+            entities: {
+                PERSON: entities
+            }
+        };
+    }
+    generateUserUpgradeStatusBody(users) {
+        const body = {};
+        body[String(users[0].cucmId)] = users.map(user => String(user.userId));
+        return body;
+    }
+    getUserUpgradeStatusCounts() {
+        return this.apiService.fetch(API$1.USER_UPGRADE.GET_USERS_UPGRADE_STATUS_COUNTS.replace(':customerId', this.customerId));
+    }
+    getUserUpgradeRecords(pageSize, pageIndex, params) {
+        return this.apiService.fetchPagination(API$1.USER_UPGRADE.GET_USERS_UPGRADE_DATA.replace(':customerId', this.customerId), pageSize, pageIndex, params);
+    }
+    mapDevicesWithExtensions(devices, deviceDetails) {
+        if (!devices?.length) {
+            return [];
+        }
+        return devices.map(deviceName => {
+            const found = deviceDetails.find(d => d.name === deviceName);
+            return {
+                deviceName,
+                extensions: found?.extensions ?? []
+            };
+        });
+    }
+}
+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'
+                }]
+        }] });
+class User2UpgradeStatusDTO {
+}
+// map UI keys -> server keys
+const FILTER_KEY_MAP = {
+    'Site': 'siteName',
+    'User Upgrade Status': 'upgradeStatus',
+    'User': 'userId',
+};
+
+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',
+};
+var UPGRADE_STATUS;
+(function (UPGRADE_STATUS) {
+    UPGRADE_STATUS["NOT_READY"] = "not_ready";
+    UPGRADE_STATUS["READY"] = "ready";
+    UPGRADE_STATUS["COMPLETED"] = "completed";
+    UPGRADE_STATUS["IN_PROGRESS"] = "in progress";
+    UPGRADE_STATUS["FAILED"] = "failed";
+})(UPGRADE_STATUS || (UPGRADE_STATUS = {}));
+
+const API = {
+    USER_TOKEN: '/api/provision/:siteId/users/:userId/token',
+    UPDATE_USER_FIELDS: '/api/provision/:siteId/userFields/:token',
+    PERSIST_USER_CACHE: '/api/provision/:siteId/saveUser/:token',
+    USER_BY_ID: '/api/provision/:siteId/users/:userId',
+    QUICK_USERS_SEARCH: "/api/search/quickusers",
+    LOCATION: "/api/provision/options/:siteId/locations",
+    USER_LOCALES: "/api/provision/options/:siteId/userlocales",
+    USER_PROFILES: "/api/provision/options/:siteId/userprofiles",
+    RECORDING_PROFILE: "/api/provision/options/:siteId/recordingprofiles",
+    AVAILABLE_DN_IN_RANGES: "/api/sites/:siteId/available-dn-in-ranges",
+    DELETE_LINE: "/api/provision/:siteId/deleteLine/:pkid/:token",
+    DISASSOCIATE_LINE: "/api/provision/:siteId/:deviceName/deleteLineAssociation/:linePkid/:token",
+    CHECK_DELETE_LINE: "/api/provision/:siteId/checklinedeletion",
+    ASSOCIATE_LINE: "/api/provision/:siteId/:deviceName/createLineAssociation/:token",
+    CHECK_DESTINATION_NUMBER: "/api/provision/:siteId/check-dn",
+    UPDATE_LINE_FIELDS: "/api/provision/:siteId/lineFields/:pkid/:token",
+    UPDATE_DEVICE_FIELDS: "/api/provision/:siteId/deviceFields/:deviceName/:token",
+    SOFTKEY_TEMPLATES: "/api/provision/options/:siteId/softkeytemplates",
+    SITE_SETTINGS: "/api/sites/:siteId/settings",
+    LINE_SLOTS: "/api/provision/:siteId/buttontemplate",
+    LEAN_USER_CONVERSATION_START: "/api/provision/:siteId/leanUsers/:userId/leanUserDetailsToken",
+    LEAN_USER_DEVICES_CONVERSATION_START: "/api/provision/:siteId/leanUsers/:userId/leanUserDevicesToken",
+    LEAN_USER_LINES_CONVERSATION_START: "/api/provision/:siteId/leanUsers/:userId/:leanUserDevicesToken/leanUserLinesToken",
+    LEAN_USER_SNR_CONVERSATION_START: "/api/provision/:siteId/leanUsers/:userId/leanUserSNRToken",
+    DEVICE_LINE_MONITOR_CSS: "/api/provision/options/:siteId/callingSearchSpace"
+};
+const REGEX_PATTERN = {
+    EMAIL: '^(([^<>()\\[\\]\\\\.,;:\\s@"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@"]+)*)|(".+"))' +
+        '@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,62}[a-zA-Z0-9])' +
+        '?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,62}[a-zA-Z0-9])?)*$'
+};
+const PAGINATION_DEFAULTS = {
+    SIZE: 10,
+    INDEX: 0
+};
+const PAGINATION_SIZE_OPTIONS = [
+    10,
+    50,
+    100,
+    500
+];
+const CUCS_TO_IGNORE = [
+    189,
+    194,
+    191,
+    190
+];
+const CUCMS_TO_IGNORE = [
+    249,
+    255,
+    251,
+    250
+];
+const RECORDING_MEDIA_SOURCE = [
+    "Gateway Preferred",
+    "Phone Preferred"
+];
+const STATIC_OPTIONS = {
+    CALL_PICKUP_GROUP_AUDIO_SETTING_PHONE_ACTIVE: ['Use System Default', 'Disable', 'Beep Only'],
+    CALL_PICKUP_GROUP_AUDIO_SETTING_PHONE_IDLE: ['Use System Default', 'Disable', 'Ring Once'],
+    CONF_ACCESS_MODE: ['Fixed', 'Variable'],
+    DEFAULT_ON_OFF: ['Default', 'On', 'Off'],
+    DEFAULT_EN_DIS: ['Default', 'Enabled', 'Disabled'],
+    DND: ['Use Common Phone Profile Setting', 'Call Reject', 'Ringer Off'],
+    DND_INCOMING_CALL_ALLERT: ['Disable', 'Flash Only', 'Beep Only'],
+    LATENT_CAPABILITY: ['Gateway Controlled', 'Modem Relay', 'Modem Passthrough', 'Modem Relay and Passthrough', 'None'],
+    LINE_MODE: ['Session Line mode', 'Enhanced Line mode'],
+    ACTIONABLE_ALERT: ['Disabled', 'Show for all Incoming Call', 'Show for Invisible Incoming Call'],
+    MLPP_PREEMPTION: ['Default', 'Forceful', 'Disabled'],
+    PACKET_CAPTURE_MODE: ['None', 'Batch Processing Mode'],
+    RING_VOLUME: ['0-Silent', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15'],
+    PORT_DIRECTION: ['Bothways', 'Inbound', 'Outbound'],
+    RING_SETTING_IDLE: ['Use System Default', 'Disable', 'Flash Only', 'Ring Once', 'Ring'],
+    RING_SETTING_ACTIVE: ['Use System Default', 'Disable', 'Flash Only', 'Ring Once', 'Ring', 'Beep Only'],
+    SERVICE_PROVISIONING: ['Default', 'Internal', 'External URL', 'Both'],
+    SETTINGS_ACCES: ['Enabled', 'Disabled', 'Restricted'],
+    VISUAL_MWI: ['Use System Policy', 'Light and Prompt', 'Prompt Only', 'Light Only', 'None'],
+    WEEKDAYS: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    BUILD_BRIDGE: ['None', 'On', 'Off', 'Default'],
+    TRANSFER_TYPES: ['Release to Switch', 'Supervise Transfer'],
+    EXTENSION_IS_BUSY_TYPES: ['Send Callers to Voicemail', 'Put Callers on Hold Without Asking', 'Ask Callers to Hold'],
+    CALL_ACTIONS: ['Hang Up', 'Restart Greeting', 'Route From Next Call Routing Rule', 'Take Message'],
+    AUTHENTICATION_802: ['User controlled', 'Disabled', 'Enabled'],
+    CERTIFICATE_OPERATION: ['No Pending Operation', 'Install/Upgrade', 'Delete', 'Troubleshoot'],
+    AUTHENTICATION_MODE: ['By Authentication String', 'By Null String', 'By Existing Certificate (precedence to LSC)', 'By Existing Certificate (precedence to MIC)'],
+    KEY_ORDER: ['RSA Only', 'EC Only', 'EC Preferred, RSA Backup'],
+    RSA_KEY_SIZE: ['512', '1024', '2048'],
+    RSA_KEY_SIZE_SPECIFIC_DEVICE: ['512', '1024', '2048', '3072', '4096']
+};
+const TOGGLE_TYPES = {
+    TABS: 'TABS',
+    ASSOCIATED_LINE_ONLY: 'ASSOCIATED_LINE_ONLY'
+};
+
+class SummaryCardComponent {
+    constructor() {
+        this.value = 41;
+        this.status = 'Ready';
+    }
+    getStatusClass(status) {
+        switch (status?.toLowerCase()) {
+            case 'ready':
+                return 'ready';
+            case 'not ready':
+                return 'not-ready';
+            case 'failed':
+                return 'failed';
+            case 'completed':
+                return 'completed';
+            default:
+                return 'not-ready';
+        }
+    }
+}
+SummaryCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SummaryCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SummaryCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SummaryCardComponent, selector: "tk-summary-card", inputs: { value: "value", status: "status", description: "description" }, ngImport: i0, template: "<article class=\"summary-card\">\r\n    <header class=\"summary-card__header\">\r\n        <h2>{{ value }}</h2>\r\n    </header>\r\n    <div class=\"summary__card-description\">\r\n        <span>{{ description }}</span>\r\n        <div class=\"summary__card-status-wrapper\">\r\n            <span class=\"summary__card-status-indicator\" [ngClass]=\"getStatusClass(status)\"></span>\r\n          <span [ngClass]=\"{'status-ready': status === 'ready'}\">{{ status }}</span>\r\n        </div>\r\n    </div>\r\n</article>\r\n", 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;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%,20%);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}.indicator-status-ready{color:#1170cf!important}.summary__card-description{font-size:14px;color:#333;display:flex;align-items:center;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1$1.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 [ngClass]=\"{'status-ready': status === 'ready'}\">{{ status }}</span>\r\n        </div>\r\n    </div>\r\n</article>\r\n", 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;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%,20%);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}.indicator-status-ready{color:#1170cf!important}.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 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 custom-mat-form-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 custom-mat-form-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>\r\n", 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 ::ng-deep .custom-mat-form-field{width:265px}:host ::ng-deep .custom-mat-form-field .mat-form-field-wrapper{height:24px;padding-bottom:0}:host ::ng-deep .custom-mat-form-field .mat-form-field-flex{height:34px;align-items:center;padding:0 12px}:host ::ng-deep .custom-mat-form-field .mat-form-field-infix{padding:0;border:none;min-height:auto;display:flex;align-items:center;height:28px;margin:4px 0 0;font-size:14px}:host ::ng-deep .custom-mat-form-field .mat-form-field-outline{color:#737480}:host ::ng-deep .custom-mat-form-field .mat-form-field-outline-start,:host ::ng-deep .custom-mat-form-field .mat-form-field-outline-gap,:host ::ng-deep .custom-mat-form-field .mat-form-field-outline-end{border-color:#737480;border-width:1px}:host ::ng-deep .custom-mat-form-field .mat-form-field-outline-start{border-radius:6px 0 0 6px;min-width:6px}:host ::ng-deep .custom-mat-form-field .mat-form-field-outline-end{border-radius:0 6px 6px 0}:host ::ng-deep .custom-mat-form-field .mat-form-field-outline-gap{border-radius:0}:host ::ng-deep .custom-mat-form-field .mat-form-field-outline-thick .mat-form-field-outline-start,:host ::ng-deep .custom-mat-form-field .mat-form-field-outline-thick .mat-form-field-outline-gap,:host ::ng-deep .custom-mat-form-field .mat-form-field-outline-thick .mat-form-field-outline-end{border-color:#737480;border-width:2px}:host ::ng-deep .custom-mat-form-field .mat-form-field-subscript-wrapper{display:none}:host ::ng-deep .custom-mat-form-field .mat-form-field-label{color:#555;font-size:14px}:host ::ng-deep .custom-mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,:host ::ng-deep .custom-mat-form-field.mat-form-field-can-float .mat-form-field-label.mat-form-field-empty.mat-form-field-label{transform:translateY(-50%)}:host ::ng-deep .custom-mat-form-field .mat-select-value{max-width:calc(100% - 20px)}:host ::ng-deep .custom-mat-form-field .mat-select-arrow-wrapper{transform:none;display:flex;align-items:center;position:absolute;right:-10px;top:5px}:host ::ng-deep .custom-mat-form-field input.mat-input-element{height:24px;line-height:24px;margin:3px 0 0}:host ::ng-deep .custom-mat-form-field.mat-form-field-disabled .mat-form-field-outline-start,:host ::ng-deep .custom-mat-form-field.mat-form-field-disabled .mat-form-field-outline-gap,:host ::ng-deep .custom-mat-form-field.mat-form-field-disabled .mat-form-field-outline-end{border-color:#ccc}:host ::ng-deep .custom-mat-form-field.mat-form-field-invalid .mat-form-field-outline-start,:host ::ng-deep .custom-mat-form-field.mat-form-field-invalid .mat-form-field-outline-gap,:host ::ng-deep .custom-mat-form-field.mat-form-field-invalid .mat-form-field-outline-end{border-color:#e70707}:host ::ng-deep .custom-mat-form-field .mat-select-arrow{width:16px;height:16px;border:none;margin:-6px 4px 0 0;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:center;background-size:contain}:host ::ng-deep .custom-mat-form-field.use-css-arrow .mat-select-arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #737480;margin:-6px 4px 0 0;background:none}:host ::ng-deep .custom-mat-form-field .mat-form-field-label-wrapper{top:2px;padding-top:0;height:28px;display:flex;overflow:visible!important;align-items:center}:host ::ng-deep .custom-mat-form-field .mat-form-field-label{color:#555;position:relative;top:auto;transform:none;padding:0 4px;background:white}:host ::ng-deep .custom-mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label{position:absolute;top:-5px;width:-moz-fit-content;width:fit-content;font-size:12px;color:#555;background:white;padding:0 4px}:host ::ng-deep .custom-mat-form-field.mat-form-field-can-float .mat-form-field-label.mat-form-field-empty.mat-form-field-label{position:relative;top:auto;left:auto;transform:none;font-size:14px;background:transparent}:host ::ng-deep .custom-mat-form-field .mat-select-placeholder{color:#555;line-height:34px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.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 custom-mat-form-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 custom-mat-form-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>\r\n", 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 ::ng-deep .custom-mat-form-field{width:265px}:host ::ng-deep .custom-mat-form-field .mat-form-field-wrapper{height:24px;padding-bottom:0}:host ::ng-deep .custom-mat-form-field .mat-form-field-flex{height:34px;align-items:center;padding:0 12px}:host ::ng-deep .custom-mat-form-field .mat-form-field-infix{padding:0;border:none;min-height:auto;display:flex;align-items:center;height:28px;margin:4px 0 0;font-size:14px}:host ::ng-deep .custom-mat-form-field .mat-form-field-outline{color:#737480}:host ::ng-deep .custom-mat-form-field .mat-form-field-outline-start,:host ::ng-deep .custom-mat-form-field .mat-form-field-outline-gap,:host ::ng-deep .custom-mat-form-field .mat-form-field-outline-end{border-color:#737480;border-width:1px}:host ::ng-deep .custom-mat-form-field .mat-form-field-outline-start{border-radius:6px 0 0 6px;min-width:6px}:host ::ng-deep .custom-mat-form-field .mat-form-field-outline-end{border-radius:0 6px 6px 0}:host ::ng-deep .custom-mat-form-field .mat-form-field-outline-gap{border-radius:0}:host ::ng-deep .custom-mat-form-field .mat-form-field-outline-thick .mat-form-field-outline-start,:host ::ng-deep .custom-mat-form-field .mat-form-field-outline-thick .mat-form-field-outline-gap,:host ::ng-deep .custom-mat-form-field .mat-form-field-outline-thick .mat-form-field-outline-end{border-color:#737480;border-width:2px}:host ::ng-deep .custom-mat-form-field .mat-form-field-subscript-wrapper{display:none}:host ::ng-deep .custom-mat-form-field .mat-form-field-label{color:#555;font-size:14px}:host ::ng-deep .custom-mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,:host ::ng-deep .custom-mat-form-field.mat-form-field-can-float .mat-form-field-label.mat-form-field-empty.mat-form-field-label{transform:translateY(-50%)}:host ::ng-deep .custom-mat-form-field .mat-select-value{max-width:calc(100% - 20px)}:host ::ng-deep .custom-mat-form-field .mat-select-arrow-wrapper{transform:none;display:flex;align-items:center;position:absolute;right:-10px;top:5px}:host ::ng-deep .custom-mat-form-field input.mat-input-element{height:24px;line-height:24px;margin:3px 0 0}:host ::ng-deep .custom-mat-form-field.mat-form-field-disabled .mat-form-field-outline-start,:host ::ng-deep .custom-mat-form-field.mat-form-field-disabled .mat-form-field-outline-gap,:host ::ng-deep .custom-mat-form-field.mat-form-field-disabled .mat-form-field-outline-end{border-color:#ccc}:host ::ng-deep .custom-mat-form-field.mat-form-field-invalid .mat-form-field-outline-start,:host ::ng-deep .custom-mat-form-field.mat-form-field-invalid .mat-form-field-outline-gap,:host ::ng-deep .custom-mat-form-field.mat-form-field-invalid .mat-form-field-outline-end{border-color:#e70707}:host ::ng-deep .custom-mat-form-field .mat-select-arrow{width:16px;height:16px;border:none;margin:-6px 4px 0 0;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:center;background-size:contain}:host ::ng-deep .custom-mat-form-field.use-css-arrow .mat-select-arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #737480;margin:-6px 4px 0 0;background:none}:host ::ng-deep .custom-mat-form-field .mat-form-field-label-wrapper{top:2px;padding-top:0;height:28px;display:flex;overflow:visible!important;align-items:center}:host ::ng-deep .custom-mat-form-field .mat-form-field-label{color:#555;position:relative;top:auto;transform:none;padding:0 4px;background:white}:host ::ng-deep .custom-mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label{position:absolute;top:-5px;width:-moz-fit-content;width:fit-content;font-size:12px;color:#555;background:white;padding:0 4px}:host ::ng-deep .custom-mat-form-field.mat-form-field-can-float .mat-form-field-label.mat-form-field-empty.mat-form-field-label{position:relative;top:auto;left:auto;transform:none;font-size:14px;background:transparent}:host ::ng-deep .custom-mat-form-field .mat-select-placeholder{color:#555;line-height:34px}\n"] }]
+        }], propDecorators: { filters: [{
+                type: Input
+            }], filter: [{
+                type: Output
+            }] } });
+
+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.dataPending = false;
+        this.displayedColumns = ['select', 'user', 'site', 'device', 'dialPlanStatus', 'dependencies', 'userUpgradeStatus', 'userUpgradeLoader'];
+        this.selection = new SelectionModel(true, []);
+        this.filters = [];
+        this.pagination = new PaginationDataDto();
+        this.users = [];
+        this.subscriptions = new Subscription();
+        this.statusCounts = {};
+        this.activeFilters = {};
+        this.pageSizeOptions = PAGINATION_SIZE_OPTIONS;
+    }
+    ngOnInit() {
+        this.dataPending = true;
+        this.apiService.token = this.token;
+        this.userUpgradeService.customerId = this.customerId;
+        const subsc1 = this.userUpgradeService.getUserUpgradeRecords(this.pagination.pageSize, this.pagination.pageIndex, this.activeFilters)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((results) => {
+            const records = results.content;
+            records.forEach(record => {
+                record.devicesWithExtensions = this.userUpgradeService.mapDevicesWithExtensions(record.devices, record.deviceDetails);
+            });
+            this.data = new MatTableDataSource(records);
+            this.pagination.total = results.totalElements;
+            this.dataPending = false;
+            this.setupCustomFilter();
+            this.initializeFilters(records);
+        });
+        this.subscriptions.add(subsc1);
+        const subsc2 = 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;
+        });
+        this.subscriptions.add(subsc2);
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.dataPending = false;
+        if (this.subscriptions) {
+            this.subscriptions.unsubscribe();
+        }
+    }
+    onMultipleDevices(user) {
+        user.showDevices = !user.showDevices;
+    }
+    pageEvent(event) {
+        this.pagination.pageIndex = event.pageIndex;
+        this.pagination.pageSize = event.pageSize;
+        this.getData();
+    }
+    getSiteUpgradeStatusClass(status) {
+        switch (status.toLowerCase()) {
+            case 'ready':
+                return 'status-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';
+        }
+    }
+    changePerPageNumber(pageSizeEvent) {
+        this.pagination.pageSize = pageSizeEvent.value;
+        this.pagination.pageIndex = 0;
+        this.getData();
+    }
+    getData(params) {
+        this.dataPending = true;
+        const subsc1 = this.userUpgradeService.getUserUpgradeRecords(this.pagination.pageSize, this.pagination.pageIndex, params || {})
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((result) => {
+            const records = result.content;
+            records.forEach(record => {
+                record.devicesWithExtensions = this.userUpgradeService.mapDevicesWithExtensions(record.devices, record.deviceDetails);
+            });
+            this.data = new MatTableDataSource(records);
+            this.pagination.total = result.totalElements;
+            this.dataPending = false;
+        });
+        this.subscriptions.add(subsc1);
+    }
+    initializeFilters(records) {
+        if (!records?.length) {
+            this.filters = [];
+            return;
+        }
+        // Extract unique sites (skip empty/null)
+        const uniqueSites = [
+            ...new Set(records
+                .map(record => record.siteName?.trim())
+                .filter((site) => !!site))
+        ];
+        const siteOptions = uniqueSites.map(site => ({
+            label: site,
+            value: site.toLowerCase().replace(/\s+/g, '-')
+        }));
+        // Extract unique statuses (skip empty/null)
+        const uniqueStatuses = [
+            ...new Set(records
+                .map(record => record.upgradeStatus?.trim())
+                .filter((status) => !!status))
+        ];
+        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: []
+            }
+        ];
+        if (siteOptions.length) {
+            this.filters.push({
+                id: 'sites',
+                type: 'select',
+                columnKey: 'Site',
+                placeholder: 'Sites',
+                options: siteOptions
+            });
+        }
+        if (statusOptions.length) {
+            this.filters.push({
+                id: 'status',
+                type: 'select',
+                columnKey: 'User Upgrade Status',
+                placeholder: 'Upgrade Status',
+                options: statusOptions
+            });
+        }
+    }
+    /** Whether the number of selected elements matches the total number of rows. */
+    isAllSelected() {
+        const numSelected = this.selection.selected.length;
+        const numRows = this.data?.data.length ?? 0;
+        return numSelected === numRows;
+    }
+    /** Selects all rows if they are not all selected; otherwise clear selection. */
+    masterToggle() {
+        // this.isAllSelected() ?
+        //   this.selection.clear() :
+        //   this.data?.data.forEach(row => this.selection.select(row));
+        if (this.isAllSelected()) {
+            this.selection.clear();
+        }
+        else {
+            this.data?.data.forEach(row => {
+                if (row.upgradeStatus === 'READY') {
+                    this.selection.select(row);
+                }
+            });
+        }
+    }
+    upgradeUser(user) {
+        if (user?.upgradeStatus === 'READY')
+            user.pending = true;
+        this.userUpgradeService.collectUsers([user])
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            this.userUpgradeService.bulkUpgrade([user])
+                .pipe(takeUntil(this.destroy$))
+                .subscribe(() => {
+                this.updateUsersStatusAfterUpgrade([user]);
+            });
+        });
+    }
+    updateUsersStatusAfterUpgrade(users) {
+        this.userUpgradeService.getUsersUpgradeStatuses(users)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((upgradedStatuses) => {
+            upgradedStatuses.forEach(statusItem => {
+                const ind = this.getUserIndex(statusItem.userId);
+                if (ind > -1) {
+                    this.data.data[ind].upgradeStatus = statusItem.upgradeStatus;
+                    this.data.data[ind].pending = false;
+                }
+            });
+            this.dataPending = false;
+        });
+    }
+    getUserIndex(userId) {
+        return this.data.data.findIndex((record) => record.userId === userId);
+    }
+    upgradeSelectedUsers() {
+        if (this.selection.selected && this.selection.selected.length) {
+            this.dataPending = true;
+            this.userUpgradeService.collectUsers(this.selection.selected)
+                .pipe(takeUntil(this.destroy$))
+                .subscribe(() => {
+                this.userUpgradeService.bulkUpgrade(this.selection.selected)
+                    .pipe(takeUntil(this.destroy$))
+                    .subscribe(() => {
+                    this.updateUsersStatusAfterUpgrade(this.selection.selected);
+                });
+            });
+        }
+        this.userUpgradeService.bulkUpgrade(this.selection.selected);
+    }
+    getFilterValue(input) {
+        if (input && input.value !== undefined)
+            return input.value; // e.g. {value,label}
+        if (input && input.target)
+            return input.target.value; // DOM event
+        return input; // plain value
+    }
+    isEmptyFilter(v) {
+        if (v === undefined || v === null)
+            return true;
+        if (typeof v === 'string') {
+            const s = v.trim().toLowerCase();
+            return s === '' || s === 'all';
+        }
+        return false;
+    }
+    onFilter(filterEvent) {
+        const rawKey = filterEvent.key;
+        const serverKey = FILTER_KEY_MAP[rawKey];
+        const value = this.getFilterValue(filterEvent.value);
+        const next = { ...this.activeFilters };
+        if (this.isEmptyFilter(value)) {
+            delete next[serverKey];
+        }
+        else {
+            // normalize to string for API (trim)
+            next[serverKey] = typeof value === 'string' ? value.trim() : String(value);
+        }
+        this.activeFilters = next;
+        this.pagination.pageIndex = 0;
+        // quick fix for demo
+        if (this.activeFilters['upgradeStatus']) {
+            this.activeFilters['upgradeStatus'] = this.activeFilters['upgradeStatus']?.toUpperCase();
+        }
+        this.getData(this.activeFilters);
+    }
+    /*onFilter(filterEvent: { key: string, value: any }) {
+      const {key, value} = filterEvent;
+  
+      let filterValue: any;
+      if (value && value.value !== undefined) {
+        filterValue = value.value;
+      } else if (value && value.target) {
+        filterValue = value.target.value;
+      } else {
+        filterValue = value;
+      }
+  
+      // Handle "All" option or empty values - remove the filter
+      if (filterValue === 'all' || !filterValue || filterValue === '') {
+        delete this.activeFilters[key];
+      } else {
+        this.activeFilters[key] = filterValue;
+      }
+  
+      this.applyFilters();
+    }*/
+    setupCustomFilter() {
+        this.data.filterPredicate = (data, filter) => {
+            const filters = JSON.parse(filter || '{}');
+            for (const [key, value] of Object.entries(filters)) {
+                if (!value)
+                    continue;
+                switch (key) {
+                    case 'User':
+                        const searchTerm = value.toLowerCase();
+                        if (!data.userName.toLowerCase().includes(searchTerm)) {
+                            return false;
+                        }
+                        break;
+                    case 'Site':
+                        if (data.siteName !== this.getSiteNameFromValue(value)) {
+                            return false;
+                        }
+                        break;
+                    case 'User Upgrade Status':
+                        if (!this.matchesUpgradeStatus(data.upgradeStatus, value)) {
+                            return false;
+                        }
+                        break;
+                }
+            }
+            return true;
+        };
+    }
+    applyFilters() {
+        this.data.filter = JSON.stringify(this.activeFilters);
+    }
+    get filteredDataCount() {
+        return this.data?.filteredData?.length || 0;
+    }
+    getSiteNameFromValue(value) {
+        // Since we're now using actual site names, just convert back from slug format
+        return value.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
+    }
+    matchesUpgradeStatus(status, filterValue) {
+        // Handle direct status matching for cleaner implementation
+        return status.toLowerCase().replace(/\s+/g, '-') === filterValue.toLowerCase();
+    }
+    getStatusClass(status) {
+        switch (status.toLowerCase()) {
+            case 'ready':
+                return 'ready';
+            case 'not ready':
+                return 'not-ready';
+            case 'partial ready':
+                return 'partial-ready';
+            case 'completed':
+                return 'completed';
+            case 'failed':
+                return 'failed';
+            default:
+                return 'not-ready';
+        }
+    }
+}
+UserUpgradeDataTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserUpgradeDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+UserUpgradeDataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserUpgradeDataTableComponent, selector: "tk-user-upgrade-data-table", inputs: { token: "token", customerId: "customerId" }, ngImport: i0, template: "<div *ngIf=\"dataPending\" class=\"overlay\">\r\n  <mat-progress-spinner\r\n    class=\"page-spinner\"\r\n    mode=\"indeterminate\"\r\n    [diameter]=\"70\"\r\n    strokeWidth=\"3\"\r\n    ></mat-progress-spinner>\r\n</div>\r\n\r\n<div id=\"userUpgradeDataTable\" 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' || row.pending\"\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=\"status-indicator\" [ngClass]=\"getSiteUpgradeStatusClass(element.upgradeStatus)\"></span>\r\n                    <span>{{element.siteName}}</span>\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 class=\"device-td\" mat-header-cell *matHeaderCellDef>Device</th>\r\n            <td mat-cell *matCellDef=\"let element\" class=\"multi-dev-box\">\r\n              <div *ngIf=\"element.showDevices\" class=\"device-list show-dev-list\">\r\n                <div *ngFor=\"let device of element.devicesWithExtensions; let last = last\"\r\n                     class=\"device-item\"\r\n                     [class.no-border]=\"last\">\r\n                  <span class=\"device-indicator\" [ngClass]=\"{'device-indicator-ready': element.deviceStatus === 'READY'}\"></span>\r\n                  <span class=\"device-name\">{{ device.deviceName || device }}</span>\r\n                  <span class=\"device-model\">\r\n                    {{ device.extensions?.length ? 'Ext: ' + device.extensions.join(\", \") : 'No Extension' }}\r\n                  </span>\r\n                </div>\r\n              </div>\r\n                <div class=\"device-info\">\r\n                    <div class=\"multiple-dev-link\" *ngIf=\"element.devicesWithExtensions?.length > 1; else oneDevice\">\r\n                        <div class=\"device-name-wrapper clickable\"\r\n                             (mouseenter)=\"onMultipleDevices(element)\"\r\n                             (mouseleave)=\"onMultipleDevices(element)\">\r\n\r\n                            <span class=\"device-name\">Multiple devices ></span>\r\n                        </div>\r\n                    </div>\r\n                  <ng-template #oneDevice>\r\n                    <div class=\"device-name-wrapper\">\r\n                      <span class=\"device-indicator\"></span>\r\n                      <span class=\"device-name\">{{element.devicesWithExtensions[0].deviceName}}</span>\r\n                    </div>\r\n                    <div class=\"device-model one-dev-extensions\">\r\n                      {{ element.devicesWithExtensions[0].extensions?.length ?\r\n                      'Ext: ' + element.devicesWithExtensions[0].extensions?.join(\", \") : 'No Extension' }}\r\n                    </div>\r\n                  </ng-template>\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 [ngClass]=\"{'status-ready': element.dialPlanStatus === 'READY'}\">{{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\r\n            </td>\r\n        </ng-container>\r\n\r\n      <ng-container matColumnDef=\"userUpgradeLoader\">\r\n        <th mat-header-cell *matHeaderCellDef></th>\r\n        <td class=\"mat-progress-spinner-td\" mat-cell *matCellDef=\"let element\">\r\n\r\n          <mat-progress-spinner\r\n            *ngIf=\"element.pending\"\r\n            class=\"field-spinner\"\r\n            [diameter]=\"20\"\r\n            mode=\"indeterminate\">\r\n          </mat-progress-spinner>\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>\r\n\r\n<div class=\"app-pagination\">\r\n  <mat-paginator\r\n    [length]=\"pagination.total\"\r\n    [pageSize]=\"pagination.pageSize\"\r\n    [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n    [pageIndex]=\"pagination.pageIndex\"\r\n    (page)=\"pageEvent($event)\"\r\n    showFirstLastButtons>\r\n  </mat-paginator>\r\n\r\n  <!--<div class=\"page-indexes-box\">\r\n    <mat-paginator\r\n      [id]=\"'commonPagination'\"\r\n      [hidePageSize]=\"true\"\r\n      [length]=\"pagination.total\"\r\n      [pageIndex]=\"pagination.pageIndex\"\r\n      [pageSize]=\"pagination.pageSize\"\r\n      [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n      (page)=\"pageEvent($event)\">\r\n    </mat-paginator>\r\n  </div>\r\n\r\n  <div class=\"per-page-block\">\r\n    <div class=\"item_per_page\">Items per page:</div>\r\n    <div class=\"select-box select-page-size\">\r\n      <mat-select (selectionChange)=\"changePerPageNumber($event)\" #page\r\n                  [id]=\"'commonPaginationSelect'\">\r\n        <mat-option *ngFor=\"let option of pageSizeOptions; let i = index;\" [id]=\"'paginationSelectOpt_' + i\" [value]=\"option\">{{option}}</mat-option>\r\n      </mat-select>\r\n    </div>\r\n\r\n  </div>-->\r\n</div>\r\n", 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;500;600;700&display=swap\";.app-pagination{display:flex;flex-direction:column;align-items:stretch}.app-pagination .page-indexes-box,.app-pagination .per-page-block{justify-self:center}.app-pagination mat-select{width:100px}.overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff6;z-index:200}.mat-progress-spinner{position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-25px;width:50px;height:40px;text-align:center;font-size:10px}.mat-progress-spinner-td{position:relative}#userUpgradeDataTable .flex-container{padding:0!important}.multiple-dev-link{margin:0 0 0 13px}:host ::ng-deep .mat-cell{border-bottom:1px solid #d6d6d6;font-family:Inter,sans-serif!important}:host ::ng-deep .mat-header-cell{border-bottom:1px solid #afafaf;font-family:Inter,sans-serif!important}:host ::ng-deep .progress-spinner-td{position:relative}:host ::ng-deep #userUpgradeDataTable .mat-progress-spinner-td .mat-progress-spinner{top:28%;left:0;margin:0}.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;align-items:stretch}.user-upgrade-table{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:#737480}.user-upgrade-table .device-info .device-name-wrapper{display:flex;align-items:center;gap:5px}.user-upgrade-table .device-info .device-name-wrapper .device-name{font-weight:500;color:#212121}.user-upgrade-table .device-model{font-size:12px;color:#757575;display:block}.user-upgrade-table .one-dev-extensions{margin:0 0 0 13px}.user-upgrade-table .device-indicator{width:8px;height:8px;border-radius:50%;background-color:#f8cd00}.user-upgrade-table .device-indicator-ready{background-color:#1d805f}.user-upgrade-table .device-td{padding:0 0 0 13px}.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:#1170cf}.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-radius:20px!important;font-size:14px!important;font-style:normal!important;font-weight:400!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important;border:2px solid black;border-radius:.5rem;color:#000}.user-upgrade-table .upgrade-button:hover{background-color:#000000ce!important;color:#fff!important}.user-upgrade-table .custom-checkbox .mdc-checkbox{padding:8px}.mat-checkbox-disabled{opacity:.5}.multi-dev-box{position:relative}.device-list{position:absolute;top:65%;left:0;min-width:200px;background:white;box-shadow:0 2px 8px #0000001a;padding:8px 0;margin-top:4px;border-radius:2px;opacity:0;transform:translateY(-10px);visibility:hidden;transition:all .3s ease;z-index:1000}.device-list.show-dev-list{opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto}.clickable{cursor:pointer}.device-item{padding:12px 16px;border-bottom:1px solid #f5f5f5;cursor:pointer;transition:background-color .2s ease}.device-item:hover{background-color:#f9f9f9}.device-item.no-border{border-bottom:none}.device-item .device-name{font-size:14px;color:#333}.table-action-panel{width:100%;display:flex;justify-content:flex-start;gap:1rem}:host ::ng-deep .action-wrapper{display:flex;flex:1;align-items:center;justify-content:space-between;gap:1rem;color:#555}:host ::ng-deep .action-wrapper .mat-button .mat-button-wrapper{margin:0}.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-accent:not(.mat-checkbox-disabled).mat-checkbox-checked .mat-checkbox-background{background-color:#1170cf!important;border-color:#00000080!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled):hover:not(.mat-checkbox-checked) .mat-checkbox-background{background-color:#0000004d!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background{background-color:#1170cf!important;border-color:#00000080!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-mixedmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox .mat-checkbox-background{border-color:#00000080!important;transition:background-color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-ripple .mat-ripple-element{background-color:#1170cf40}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).cdk-focused .mat-checkbox-ripple .mat-ripple-element{background-color:#1170cf59}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background{border-color:#00000080!important;transition:background-color .2s,border-color .2s,box-shadow .2s;background-color:#1170cf!important}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}.user-upgrade-table .mat-checkbox.mat-accent .mat-ripple-element{background-color:#08599c1a!important}.user-upgrade-table .mat-checkbox.mat-accent:focus .mat-checkbox-background{background-color:#08599c1a!important}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-frame{border-color:#00000080!important}.user-upgrade-table .mat-checkbox-checkmark{color:#fff!important;transform:scale(.75)}.user-upgrade-table .mat-checkbox-checkmark-path{stroke:#fff!important}.user-upgrade-table .mat-checkbox-mixedmark{border-color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i2$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4$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: SummaryCardComponent, selector: "tk-summary-card", inputs: ["value", "status", "description"] }, { kind: "component", type: TableFiltersComponent, selector: "tk-table-filters", inputs: ["filters"], outputs: ["filter"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i8.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }] });
+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 *ngIf=\"dataPending\" class=\"overlay\">\r\n  <mat-progress-spinner\r\n    class=\"page-spinner\"\r\n    mode=\"indeterminate\"\r\n    [diameter]=\"70\"\r\n    strokeWidth=\"3\"\r\n    ></mat-progress-spinner>\r\n</div>\r\n\r\n<div id=\"userUpgradeDataTable\" 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' || row.pending\"\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=\"status-indicator\" [ngClass]=\"getSiteUpgradeStatusClass(element.upgradeStatus)\"></span>\r\n                    <span>{{element.siteName}}</span>\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 class=\"device-td\" mat-header-cell *matHeaderCellDef>Device</th>\r\n            <td mat-cell *matCellDef=\"let element\" class=\"multi-dev-box\">\r\n              <div *ngIf=\"element.showDevices\" class=\"device-list show-dev-list\">\r\n                <div *ngFor=\"let device of element.devicesWithExtensions; let last = last\"\r\n                     class=\"device-item\"\r\n                     [class.no-border]=\"last\">\r\n                  <span class=\"device-indicator\" [ngClass]=\"{'device-indicator-ready': element.deviceStatus === 'READY'}\"></span>\r\n                  <span class=\"device-name\">{{ device.deviceName || device }}</span>\r\n                  <span class=\"device-model\">\r\n                    {{ device.extensions?.length ? 'Ext: ' + device.extensions.join(\", \") : 'No Extension' }}\r\n                  </span>\r\n                </div>\r\n              </div>\r\n                <div class=\"device-info\">\r\n                    <div class=\"multiple-dev-link\" *ngIf=\"element.devicesWithExtensions?.length > 1; else oneDevice\">\r\n                        <div class=\"device-name-wrapper clickable\"\r\n                             (mouseenter)=\"onMultipleDevices(element)\"\r\n                             (mouseleave)=\"onMultipleDevices(element)\">\r\n\r\n                            <span class=\"device-name\">Multiple devices ></span>\r\n                        </div>\r\n                    </div>\r\n                  <ng-template #oneDevice>\r\n                    <div class=\"device-name-wrapper\">\r\n                      <span class=\"device-indicator\"></span>\r\n                      <span class=\"device-name\">{{element.devicesWithExtensions[0].deviceName}}</span>\r\n                    </div>\r\n                    <div class=\"device-model one-dev-extensions\">\r\n                      {{ element.devicesWithExtensions[0].extensions?.length ?\r\n                      'Ext: ' + element.devicesWithExtensions[0].extensions?.join(\", \") : 'No Extension' }}\r\n                    </div>\r\n                  </ng-template>\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 [ngClass]=\"{'status-ready': element.dialPlanStatus === 'READY'}\">{{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\r\n            </td>\r\n        </ng-container>\r\n\r\n      <ng-container matColumnDef=\"userUpgradeLoader\">\r\n        <th mat-header-cell *matHeaderCellDef></th>\r\n        <td class=\"mat-progress-spinner-td\" mat-cell *matCellDef=\"let element\">\r\n\r\n          <mat-progress-spinner\r\n            *ngIf=\"element.pending\"\r\n            class=\"field-spinner\"\r\n            [diameter]=\"20\"\r\n            mode=\"indeterminate\">\r\n          </mat-progress-spinner>\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>\r\n\r\n<div class=\"app-pagination\">\r\n  <mat-paginator\r\n    [length]=\"pagination.total\"\r\n    [pageSize]=\"pagination.pageSize\"\r\n    [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n    [pageIndex]=\"pagination.pageIndex\"\r\n    (page)=\"pageEvent($event)\"\r\n    showFirstLastButtons>\r\n  </mat-paginator>\r\n\r\n  <!--<div class=\"page-indexes-box\">\r\n    <mat-paginator\r\n      [id]=\"'commonPagination'\"\r\n      [hidePageSize]=\"true\"\r\n      [length]=\"pagination.total\"\r\n      [pageIndex]=\"pagination.pageIndex\"\r\n      [pageSize]=\"pagination.pageSize\"\r\n      [pageSizeOptions]=\"pagination.pageSizeOptions\"\r\n      (page)=\"pageEvent($event)\">\r\n    </mat-paginator>\r\n  </div>\r\n\r\n  <div class=\"per-page-block\">\r\n    <div class=\"item_per_page\">Items per page:</div>\r\n    <div class=\"select-box select-page-size\">\r\n      <mat-select (selectionChange)=\"changePerPageNumber($event)\" #page\r\n                  [id]=\"'commonPaginationSelect'\">\r\n        <mat-option *ngFor=\"let option of pageSizeOptions; let i = index;\" [id]=\"'paginationSelectOpt_' + i\" [value]=\"option\">{{option}}</mat-option>\r\n      </mat-select>\r\n    </div>\r\n\r\n  </div>-->\r\n</div>\r\n", 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;500;600;700&display=swap\";.app-pagination{display:flex;flex-direction:column;align-items:stretch}.app-pagination .page-indexes-box,.app-pagination .per-page-block{justify-self:center}.app-pagination mat-select{width:100px}.overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff6;z-index:200}.mat-progress-spinner{position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-25px;width:50px;height:40px;text-align:center;font-size:10px}.mat-progress-spinner-td{position:relative}#userUpgradeDataTable .flex-container{padding:0!important}.multiple-dev-link{margin:0 0 0 13px}:host ::ng-deep .mat-cell{border-bottom:1px solid #d6d6d6;font-family:Inter,sans-serif!important}:host ::ng-deep .mat-header-cell{border-bottom:1px solid #afafaf;font-family:Inter,sans-serif!important}:host ::ng-deep .progress-spinner-td{position:relative}:host ::ng-deep #userUpgradeDataTable .mat-progress-spinner-td .mat-progress-spinner{top:28%;left:0;margin:0}.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;align-items:stretch}.user-upgrade-table{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:#737480}.user-upgrade-table .device-info .device-name-wrapper{display:flex;align-items:center;gap:5px}.user-upgrade-table .device-info .device-name-wrapper .device-name{font-weight:500;color:#212121}.user-upgrade-table .device-model{font-size:12px;color:#757575;display:block}.user-upgrade-table .one-dev-extensions{margin:0 0 0 13px}.user-upgrade-table .device-indicator{width:8px;height:8px;border-radius:50%;background-color:#f8cd00}.user-upgrade-table .device-indicator-ready{background-color:#1d805f}.user-upgrade-table .device-td{padding:0 0 0 13px}.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:#1170cf}.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-radius:20px!important;font-size:14px!important;font-style:normal!important;font-weight:400!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important;border:2px solid black;border-radius:.5rem;color:#000}.user-upgrade-table .upgrade-button:hover{background-color:#000000ce!important;color:#fff!important}.user-upgrade-table .custom-checkbox .mdc-checkbox{padding:8px}.mat-checkbox-disabled{opacity:.5}.multi-dev-box{position:relative}.device-list{position:absolute;top:65%;left:0;min-width:200px;background:white;box-shadow:0 2px 8px #0000001a;padding:8px 0;margin-top:4px;border-radius:2px;opacity:0;transform:translateY(-10px);visibility:hidden;transition:all .3s ease;z-index:1000}.device-list.show-dev-list{opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto}.clickable{cursor:pointer}.device-item{padding:12px 16px;border-bottom:1px solid #f5f5f5;cursor:pointer;transition:background-color .2s ease}.device-item:hover{background-color:#f9f9f9}.device-item.no-border{border-bottom:none}.device-item .device-name{font-size:14px;color:#333}.table-action-panel{width:100%;display:flex;justify-content:flex-start;gap:1rem}:host ::ng-deep .action-wrapper{display:flex;flex:1;align-items:center;justify-content:space-between;gap:1rem;color:#555}:host ::ng-deep .action-wrapper .mat-button .mat-button-wrapper{margin:0}.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-accent:not(.mat-checkbox-disabled).mat-checkbox-checked .mat-checkbox-background{background-color:#1170cf!important;border-color:#00000080!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled):hover:not(.mat-checkbox-checked) .mat-checkbox-background{background-color:#0000004d!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background{background-color:#1170cf!important;border-color:#00000080!important}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-mixedmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox .mat-checkbox-background{border-color:#00000080!important;transition:background-color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).mat-checkbox .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-ripple .mat-ripple-element{background-color:#1170cf40}:host ::ng-deep .user-upgrade-table .mat-accent:not(.mat-checkbox-disabled).cdk-focused .mat-checkbox-ripple .mat-ripple-element{background-color:#1170cf59}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background{border-color:#00000080!important;transition:background-color .2s,border-color .2s,box-shadow .2s;background-color:#1170cf!important}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background .mat-checkbox-checkmark{transform:scale(.75)}.user-upgrade-table .mat-checkbox.mat-accent .mat-ripple-element{background-color:#08599c1a!important}.user-upgrade-table .mat-checkbox.mat-accent:focus .mat-checkbox-background{background-color:#08599c1a!important}.user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-frame{border-color:#00000080!important}.user-upgrade-table .mat-checkbox-checkmark{color:#fff!important;transform:scale(.75)}.user-upgrade-table .mat-checkbox-checkmark-path{stroke:#fff!important}.user-upgrade-table .mat-checkbox-mixedmark{border-color:#fff!important}\n"] }]
+        }], propDecorators: { token: [{
+                type: Input
+            }], customerId: [{
+                type: Input
+            }] } });
+class PaginationDataDto {
+    constructor(data) {
+        this.pageSizeOptions = data?.pageSizeOptions || PAGINATION_DATA_DEFAULTS.OPTIONS;
+        this.pageSize = data?.pageSize || PAGINATION_DATA_DEFAULTS.SIZE;
+        this.pageIndex = data?.pageIndex || PAGINATION_DATA_DEFAULTS.PAGE_INDEX;
+        this.total = data?.total || 0;
+    }
+}
+const PAGINATION_DATA_DEFAULTS = {
+    OPTIONS: [10, 20, 50, 100],
+    SIZE: 10,
+    PAGE_INDEX: 0
+};
+
+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>\r\n", 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 hsla(0,0%,0%,.2);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>\r\n", 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 hsla(0,0%,0%,.2);min-width:300px;max-width:100%;height:100%;display:flex;flex-direction:column;box-sizing:border-box;gap:2.5rem}.card__header{position:relative;display:flex;align-items:center;justify-content:space-between}.card__header h2{font-size:16px;margin:0}.card__header .card__menu-button{position:relative;display:flex;align-items:center}.card__content{display:flex;flex-direction:column;gap:2.5rem;flex-grow:1}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }] } });
+
+class MaterialModule {
+}
+MaterialModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MaterialModule, imports: [MatProgressBarModule,
+        MatTooltipModule,
+        MatTableModule,
+        MatCheckboxModule,
+        MatButtonModule,
+        MatIconModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatSelectModule], exports: [MatProgressBarModule,
+        MatTooltipModule,
+        MatTableModule,
+        MatCheckboxModule,
+        MatButtonModule,
+        MatIconModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatSelectModule] });
+MaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MaterialModule, imports: [MatProgressBarModule,
+        MatTooltipModule,
+        MatTableModule,
+        MatCheckboxModule,
+        MatButtonModule,
+        MatIconModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatSelectModule, MatProgressBarModule,
+        MatTooltipModule,
+        MatTableModule,
+        MatCheckboxModule,
+        MatButtonModule,
+        MatIconModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatSelectModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MaterialModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        MatProgressBarModule,
+                        MatTooltipModule,
+                        MatTableModule,
+                        MatCheckboxModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatSelectModule
+                    ],
+                    exports: [
+                        MatProgressBarModule,
+                        MatTooltipModule,
+                        MatTableModule,
+                        MatCheckboxModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatSelectModule
+                    ]
+                }]
+        }] });
+
+class StatCardComponent {
+    ngOnInit() {
+        if (this.type === 'user') {
+            this.stats = {
+                id: this.readinessStats?.id,
+                customerId: this.readinessStats?.customerId,
+                total: this.readinessStats?.['totalUsers'],
+                totalReady: this.readinessStats?.['totalReadyUsers'],
+                totalUpgraded: this.readinessStats?.['totalUpgradedUsers'],
+            };
+        }
+        else {
+            this.stats = {
+                id: this.readinessStats?.id,
+                customerId: this.readinessStats?.customerId,
+                total: this.readinessStats?.['totalSites'],
+                totalReady: this.readinessStats?.['totalReadySites'],
+                totalUpgraded: this.readinessStats?.['totalUpgradedSites'],
+            };
+        }
+    }
+    get readyPercentage() {
+        return (this.stats?.totalReady / this.stats?.total * 100) >> 0;
+    }
+    get upgradedPercentage() {
+        return (this.stats?.totalUpgraded / this.stats?.total * 100) >> 0;
+    }
+}
+StatCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StatCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+StatCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: StatCardComponent, selector: "tk-stat-card", inputs: { title: "title", type: "type", readinessStats: "readinessStats", upgradeStatus: "upgradeStatus" }, ngImport: i0, template: "<tk-card [title]=\"title\">\r\n  <ng-container ngProjectAs=\"card-content\">\r\n    <div class=\"card__content-info\">\r\n      <div class=\"card__content-wrapper\">\r\n        <img width=\"42\" [src]=\"'assets/icons/' + type + '.png'\" alt=\"\" />\r\n        <div class=\"card__content-text\">\r\n          <div class=\"card__content-label\">\r\n            {{ upgradeStatus === 'ready' ? stats?.totalReady : stats?.totalUpgraded }}\r\n            {{ type === 'user' ? 'Users' : 'Sites' }}</div>\r\n          <div class=\"card__content-description\">{{ upgradeStatus === 'ready' ? 'Ready to Upgrade' : 'Already Upgraded' }}</div>\r\n        </div>\r\n      </div>\r\n    </div>\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:#0a78cc}.already{background-color:#16a693}\n"], dependencies: [{ kind: "directive", type: i1$1.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>\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:#0a78cc}.already{background-color:#16a693}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], readinessStats: [{
+                type: Input
+            }], upgradeStatus: [{
+                type: Input
+            }] } });
+
+class StatusListCardComponent {
+    constructor() {
+        this.displayLink = false;
+        this.displayStatsDialog = false;
+    }
+    onMouseOverItemText(event, label) {
+        this.hoveredItemLabel = label;
+        this.displayLink = true;
+    }
+    onMouseLeaveItemText(event, label) {
+        this.hoveredItemLabel = label;
+        this.displayLink = false;
+    }
+    onMouseOverItemStats(event, label) {
+        event.stopPropagation();
+        this.hoveredItemLabel = label;
+        this.displayStatsDialog = true;
+    }
+    onMouseLeaveItemStats(event, label) {
+        this.hoveredItemLabel = label;
+        this.displayStatsDialog = false;
+    }
+    trackByFn(index) {
+        return index;
+    }
+}
+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; trackBy: trackByFn\">\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 \r\n                    class=\"card__item-info\"\r\n                    (mouseover)=\"onMouseOverItemText($event, item.label)\"\r\n                    (mouseleave)=\"onMouseLeaveItemText($event, item.label)\">\r\n                    <div \r\n                        class=\"card__item-text-wrapper\">\r\n                        <div class=\"card__item-text\"\r\n                            [matTooltip]=\"item.tooltip\"\r\n                            [matTooltipPosition]=\"'above'\">\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\r\n                            class=\"card__item-link-wrapper\"\r\n                            *ngIf=\"item.link.href && hoveredItemLabel === item.label && displayLink\"\r\n                            [matTooltip]=\"item.link.tooltip\"\r\n                            [matTooltipPosition]=\"'right'\">\r\n                            <mat-icon>open_in_new</mat-icon>\r\n                        </div>\r\n                    </div>\r\n                    <div\r\n                        *ngIf=\"title.includes('Site')\"\r\n                        class=\"card__item-stats\"\r\n                        (mouseover)=\"onMouseOverItemStats($event, item.label)\"\r\n                        (mouseleave)=\"onMouseLeaveItemStats($event, item.label)\">\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\r\n                        <div class=\"card__item-stats-dialog\" [class.fade-in]=\"hoveredItemLabel === item.label && displayStatsDialog\">\r\n                            <div class=\"card__item-stats-dialog-item\">\r\n                                <span class=\"name\">Atlanta</span>\r\n                                <div class=\"status\">\r\n                                    <span class=\"indicator\"></span>\r\n                                    <span class=\"status-text\">Ready</span>\r\n                                </div>\r\n                            </div>\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:.5rem}.card__list-item{display:flex;align-items:center;gap:1rem;transition:background-color .3s ease-in-out;padding:.75rem;border-radius:1rem}.card__list-item:hover{background-color:#f9f9f9}.card__item-info{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%}.card__item-text-wrapper{display:flex;align-items:center;justify-content:center;gap:1rem;cursor:help}.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}::ng-deep .mat-tooltip{background:linear-gradient(90deg,rgb(0,0,0) 0%,rgb(73,73,73) 100%)!important;color:#fff!important;font-size:14px!important;border-radius:1rem!important;padding:.75rem!important;line-height:1.25rem}.card__item-link-wrapper{display:flex;align-items:center;justify-content:center;padding:.4rem;border-radius:.45rem;background-color:#eefaff;background:linear-gradient(90deg,#41a5cc,#95ea8b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;cursor:pointer;transition:all .3s ease-in-out}.card__item-link-wrapper:hover{background:linear-gradient(90deg,#41a5cc,#95ea8b);color:#fff;-webkit-background-clip:unset;-webkit-text-fill-color:unset;background-clip:unset;transform:scale(.95)}.card__item-stats{right:0;position:absolute;text-align:right;cursor:pointer}.card__item-stats .card__item-numbers{font-size:28px}.card__item-stats .card__item-numbers-description{font-size:14px}.card__item-stats-dialog{pointer-events:none;z-index:9999;display:flex;flex-direction:column;gap:.5rem;position:absolute;top:50%;background-color:#fff;padding:1rem;border-radius:.5rem;box-shadow:0 4px 6px #0000001a;min-width:200px;max-width:300px;border:1px solid #ddd;opacity:0;transform:translate(-100%) translateY(-50%) scale(.95);transition:opacity .3s ease-in-out}.card__item-stats-dialog-item{display:flex;justify-content:space-between;align-items:center;gap:2.5rem}.card__item-stats-dialog-item span{font-size:18px;color:#555}.card__item-stats-dialog-item .status{display:flex;align-items:center;gap:8px}.card__item-stats-dialog-item .status-text{font-weight:600;color:#777;font-size:14px}.card__item-stats-dialog-item .indicator{display:inline-block;width:8px;height:8px;border-radius:50%;background-color:#1170cf}.fade-in{animation:fadeIn .3s forwards}@keyframes fadeIn{to{opacity:1;transform:translate(calc(-100% - 1.5rem)) translateY(-50%) scale(1)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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; trackBy: trackByFn\">\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 \r\n                    class=\"card__item-info\"\r\n                    (mouseover)=\"onMouseOverItemText($event, item.label)\"\r\n                    (mouseleave)=\"onMouseLeaveItemText($event, item.label)\">\r\n                    <div \r\n                        class=\"card__item-text-wrapper\">\r\n                        <div class=\"card__item-text\"\r\n                            [matTooltip]=\"item.tooltip\"\r\n                            [matTooltipPosition]=\"'above'\">\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\r\n                            class=\"card__item-link-wrapper\"\r\n                            *ngIf=\"item.link.href && hoveredItemLabel === item.label && displayLink\"\r\n                            [matTooltip]=\"item.link.tooltip\"\r\n                            [matTooltipPosition]=\"'right'\">\r\n                            <mat-icon>open_in_new</mat-icon>\r\n                        </div>\r\n                    </div>\r\n                    <div\r\n                        *ngIf=\"title.includes('Site')\"\r\n                        class=\"card__item-stats\"\r\n                        (mouseover)=\"onMouseOverItemStats($event, item.label)\"\r\n                        (mouseleave)=\"onMouseLeaveItemStats($event, item.label)\">\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\r\n                        <div class=\"card__item-stats-dialog\" [class.fade-in]=\"hoveredItemLabel === item.label && displayStatsDialog\">\r\n                            <div class=\"card__item-stats-dialog-item\">\r\n                                <span class=\"name\">Atlanta</span>\r\n                                <div class=\"status\">\r\n                                    <span class=\"indicator\"></span>\r\n                                    <span class=\"status-text\">Ready</span>\r\n                                </div>\r\n                            </div>\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:.5rem}.card__list-item{display:flex;align-items:center;gap:1rem;transition:background-color .3s ease-in-out;padding:.75rem;border-radius:1rem}.card__list-item:hover{background-color:#f9f9f9}.card__item-info{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%}.card__item-text-wrapper{display:flex;align-items:center;justify-content:center;gap:1rem;cursor:help}.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}::ng-deep .mat-tooltip{background:linear-gradient(90deg,rgb(0,0,0) 0%,rgb(73,73,73) 100%)!important;color:#fff!important;font-size:14px!important;border-radius:1rem!important;padding:.75rem!important;line-height:1.25rem}.card__item-link-wrapper{display:flex;align-items:center;justify-content:center;padding:.4rem;border-radius:.45rem;background-color:#eefaff;background:linear-gradient(90deg,#41a5cc,#95ea8b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;cursor:pointer;transition:all .3s ease-in-out}.card__item-link-wrapper:hover{background:linear-gradient(90deg,#41a5cc,#95ea8b);color:#fff;-webkit-background-clip:unset;-webkit-text-fill-color:unset;background-clip:unset;transform:scale(.95)}.card__item-stats{right:0;position:absolute;text-align:right;cursor:pointer}.card__item-stats .card__item-numbers{font-size:28px}.card__item-stats .card__item-numbers-description{font-size:14px}.card__item-stats-dialog{pointer-events:none;z-index:9999;display:flex;flex-direction:column;gap:.5rem;position:absolute;top:50%;background-color:#fff;padding:1rem;border-radius:.5rem;box-shadow:0 4px 6px #0000001a;min-width:200px;max-width:300px;border:1px solid #ddd;opacity:0;transform:translate(-100%) translateY(-50%) scale(.95);transition:opacity .3s ease-in-out}.card__item-stats-dialog-item{display:flex;justify-content:space-between;align-items:center;gap:2.5rem}.card__item-stats-dialog-item span{font-size:18px;color:#555}.card__item-stats-dialog-item .status{display:flex;align-items:center;gap:8px}.card__item-stats-dialog-item .status-text{font-weight:600;color:#777;font-size:14px}.card__item-stats-dialog-item .indicator{display:inline-block;width:8px;height:8px;border-radius:50%;background-color:#1170cf}.fade-in{animation:fadeIn .3s forwards}@keyframes fadeIn{to{opacity:1;transform:translate(calc(-100% - 1.5rem)) translateY(-50%) scale(1)}}\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", "#16A693"],
+            legend: {
+                position: "right",
+                offsetY: 0,
+                fontSize: "14px",
+                // markers: {
+                //     size: 16,
+                //     strokeWidth: 0,
+                //     shape: 'circle'
+                // },
+                itemMargin: {
+                    horizontal: 20,
+                    vertical: 2
+                },
+                formatter: (seriesName, opts) => {
+                    const percentage = this.roundPercentage((opts.w.globals.series[opts.seriesIndex] / (opts.w.globals.series[0] + opts.w.globals.series[1])) * 100);
+                    return seriesName + " " + percentage + "%";
+                }
+            },
+            plotOptions: {
+                pie: {
+                    donut: {
+                        size: "75%"
+                    }
+                }
+            },
+            dataLabels: {
+                enabled: false
+            }
+        };
+    }
+    roundPercentage(value) {
+        return Number((Math.round(value * 100) / 100).toFixed(1));
+    }
+}
+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$2.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 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: [MaterialModule,
+        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, MaterialModule] });
+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: [
+                        MaterialModule,
+                        CardComponent,
+                        StatCardComponent,
+                        StatusListCardComponent,
+                        ChartCardComponent,
+                        SummaryCardComponent,
+                        TableFiltersComponent
+                    ]
+                }]
+        }] });
+
+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,
+        MatSelectModule,
+        MatProgressSpinnerModule,
+        MatOptionModule,
+        MatPaginatorModule,
+        MatSelectModule], exports: [UserUpgradeDataTableComponent] });
+UserUpgradeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserUpgradeModule, imports: [CommonModule,
+        SharedModule,
+        MatTableModule,
+        MatButtonModule,
+        MatCheckboxModule,
+        MatSelectModule,
+        MatProgressSpinnerModule,
+        MatOptionModule,
+        MatPaginatorModule,
+        MatSelectModule] });
+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,
+                        MatSelectModule,
+                        MatProgressSpinnerModule,
+                        MatOptionModule,
+                        MatPaginatorModule,
+                        MatSelectModule
+                    ],
+                    exports: [
+                        UserUpgradeDataTableComponent
+                    ]
+                }]
+        }] });
+
+class SiteUpgradeService {
+    constructor() {
+        this.siteUpdateStatusEvent = new Subject();
+        this.apiService = inject(APIService);
+    }
+    getSiteUpgradeStatusCounts() {
+        return this.apiService.fetch(API$1.SITE_UPGRADE.GET_SITES_UPGRADE_STATUS_COUNTS.replace(':customerId', this.customerId));
+    }
+    getSiteUpgradeRecords() {
+        return this.apiService.fetch(API$1.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
+            }));
+        }));
+    }
+    getBatchSites() {
+        return this.apiService.fetch(API$1.SITE_UPGRADE.GET_BATCH_SITES.replace(':customerId', this.customerId));
+    }
+    collectSiteCache(siteId, migrationType = 'webex') {
+        return this.apiService.post(API$1.SITE_UPGRADE.WEBEX_CACHE_COLLECTION
+            .replace(':siteId', String(siteId))
+            .replace(':migrationType', migrationType), {});
+    }
+    migrateSite(siteId, batchId) {
+        return this.apiService.post(API$1.SITE_UPGRADE.MIGRATE_SITE.replace(':siteId', String(siteId)), {}, { batchId: batchId || '' });
+    }
+    getBatchesStatuses(batchIds) {
+        return this.apiService.post(API$1.SITE_UPGRADE.WEBEX_BATCH_STATUS
+            .replace(':customerId', this.customerId), batchIds, false)
+            .pipe(map((result) => {
+            this.siteUpdateStatusEvent.next(result);
+            return result;
+        }));
+    }
+    getSiteListForCollectAndBuildWebexCache() {
+        return this.apiService.fetch(API$1.SITE_UPGRADE.WEBEX_CACHE_COLLECTION_SITE_LIST.replace(':customerId', this.customerId))
+            .pipe(map((siteSet) => this.siteSetForCollectAndBuildWebexCache = siteSet));
+    }
+    getCUCMListCurrentlyInCollectAndBuildWebexCache() {
+        return this.apiService.fetch(API$1.SITE_UPGRADE.WEBEX_CACHE_COLLECTION_CUCM_LIST.replace(':customerId', this.customerId))
+            .pipe(map((cucmSet) => this.cucmSetInCollectAndBuildWebexCache = cucmSet));
+    }
+    getMigrationBatchesStatuses() {
+        return this.apiService.fetch(API$1.SITE_UPGRADE.BATCH_STATUS.replace(':customerId', this.customerId));
+        /*.pipe(map((result: BatchStatusDTO[]) => {
+          this.siteUpdateStatusEvent.next(result);
+          return result;
+        }))*/
+    }
+    getMigratedSiteStatus(pageSize, page) {
+        return this.apiService.fetchPagination(API$1.SITE_UPGRADE.MIGRATION_STATUS.replace(':customerId', this.customerId), pageSize, page, {}, false);
+    }
+    // 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'
+                }]
+        }] });
+const STATUSES = {
+    COMPLETED: 'Completed',
+    NEW: 'New',
+    IN_PROGRESS: 'In Progress',
+    FAILED_IN_ERROR: 'Failed-in error',
+    FAILED: 'Failed',
+    FAILED_WITH_RETRY: 'Failed with Retry',
+    COLLECTING: 'Collecting',
+    FAILED_COLLECTING: 'Failed on collecting',
+    WAITING_FOR_REVIEW: 'Waiting for review'
+};
+
+class ProgressBarComponent {
+    constructor() {
+        this.isAvailable = false;
+        this._progress = 0;
+        this.color = 'grey';
+    }
+    set progress(value) {
+        this._progress = Math.max(0, Math.min(100, Number(value) || 0));
+        this.setColor(this._progress);
+    }
+    get progress() { return this._progress; }
+    setColor(p) {
+        if (p <= 20)
+            this.color = 'red';
+        else if (p <= 40)
+            this.color = 'yellow';
+        else if (p <= 60)
+            this.color = 'darkblue';
+        else if (p <= 80)
+            this.color = 'lightblue';
+        else
+            this.color = 'green';
+    }
+}
+ProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ProgressBarComponent, selector: "app-progress-bar", inputs: { isAvailable: "isAvailable", progress: "progress" }, ngImport: i0, template: "<!--<div *ngIf=\"isAvailable\" class=\"progress-bar-container\">\n  <div class=\"progress-bar {{color}}\" [ngStyle]=\"{'width': progress + '%'}\"></div>\n</div>-->\n<div *ngIf=\"isAvailable\" class=\"progress-bar-container\">\n  <div class=\"progress-bar\" [ngClass]=\"color\" [style.width.%]=\"progress\"></div>\n</div>\n", styles: [".progress-bar-container{background-color:#e5e5e5;border-radius:20px;width:100%}.progress-bar{height:7px;width:0;border-radius:15px;text-align:center}.progress-percent{font-weight:600}.progress-bar.green{background-color:#94d326}.progress-bar.red{background-color:#ed4364}.progress-bar.yellow{background-color:#fed200}.progress-bar{height:8px;border-radius:4px;transition:width .25s ease,background-color .25s ease}.progress-bar.red{background-color:#e53935}.progress-bar.yellow{background-color:#fbc02d}.progress-bar.darkblue{background-color:#1e3a8a}.progress-bar.lightblue{background-color:#60a5fa}.progress-bar.green{background-color:#22c55e}.progress-bar.grey{background-color:#9ca3af}.progress-bar.darkblue{background-color:#2c355d}.progress-bar.lightblue{background-color:#2299d9}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-progress-bar', template: "<!--<div *ngIf=\"isAvailable\" class=\"progress-bar-container\">\n  <div class=\"progress-bar {{color}}\" [ngStyle]=\"{'width': progress + '%'}\"></div>\n</div>-->\n<div *ngIf=\"isAvailable\" class=\"progress-bar-container\">\n  <div class=\"progress-bar\" [ngClass]=\"color\" [style.width.%]=\"progress\"></div>\n</div>\n", styles: [".progress-bar-container{background-color:#e5e5e5;border-radius:20px;width:100%}.progress-bar{height:7px;width:0;border-radius:15px;text-align:center}.progress-percent{font-weight:600}.progress-bar.green{background-color:#94d326}.progress-bar.red{background-color:#ed4364}.progress-bar.yellow{background-color:#fed200}.progress-bar{height:8px;border-radius:4px;transition:width .25s ease,background-color .25s ease}.progress-bar.red{background-color:#e53935}.progress-bar.yellow{background-color:#fbc02d}.progress-bar.darkblue{background-color:#1e3a8a}.progress-bar.lightblue{background-color:#60a5fa}.progress-bar.green{background-color:#22c55e}.progress-bar.grey{background-color:#9ca3af}.progress-bar.darkblue{background-color:#2c355d}.progress-bar.lightblue{background-color:#2299d9}\n"] }]
+        }], propDecorators: { isAvailable: [{
+                type: Input
+            }], progress: [{
+                type: Input
+            }] } });
+
+const MAX_INTEGER = 2147483647;
+class SiteUpgradeDataTableComponent {
+    constructor() {
+        this.siteUpgradeService = inject(SiteUpgradeService);
+        this.apiService = inject(APIService);
+        this.destroy$ = new Subject();
+        this.STATUS_ENTRIES = STATUS_ENTRIES;
+        this.dataPending = false;
+        this.displayedColumns = ['site', 'ready users', 'upgraded users', 'location mapping', 'pstn trunk', 'site upgrade status', 'progressBar', 'actions', 'userUpgradeLoader'];
+        this.selection = new SelectionModel(true, []);
+        this.filters = [];
+        this.activeFilters = {};
+        this.subscriptions = new Subscription();
+        this.statusCounts = {};
+    }
+    ngOnInit() {
+        this.dataPending = true;
+        this.apiService.token = this.token;
+        this.siteUpgradeService.customerId = this.customerId;
+        const subsc1 = forkJoin([
+            this.siteUpgradeService.getSiteUpgradeRecords(),
+            this.siteUpgradeService.getMigratedSiteStatus(MAX_INTEGER, 0),
+            this.siteUpgradeService.getSiteListForCollectAndBuildWebexCache(),
+            this.siteUpgradeService.getCUCMListCurrentlyInCollectAndBuildWebexCache(),
+            this.siteUpgradeService.getBatchSites()
+        ]).pipe(takeUntil(this.destroy$))
+            .subscribe((results) => {
+            const records = results[0].map(site => ({
+                ...site,
+                siteId: Number(site.siteId)
+            }));
+            this.data = new MatTableDataSource(records);
+            this.dataPending = false;
+            this.setupCustomFilter();
+            this.initializeFilters(records);
+            this.setMigratedStatus(results[1]);
+            if (this.data?.data.length && results[2]?.length) {
+                this.initCollectProgress(results[2]);
+            }
+            if (this.data?.data.length && results[4]?.length) {
+                this.setBatchIdToSites(results[4]);
+            }
+        });
+        this.subscriptions.add(subsc1);
+        const subsc2 = 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;
+        });
+        this.subscriptions.add(subsc2);
+        const subsc3 = this.siteUpgradeService.siteUpdateStatusEvent
+            .subscribe((updatedStatuses) => {
+            this.handleCheckBatchStatusResponse(updatedStatuses);
+        });
+        this.subscriptions.add(subsc3);
+    }
+    onSiteMigration(site) {
+        site.pending = true;
+        site.isProgressBarAvailable = true;
+        site.isMigrationInProgress = true;
+        const subsc = this.siteUpgradeService.migrateSite(String(site.siteId), String(site.batchId))
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((migrationFormId) => {
+            site.migrationFormId = migrationFormId;
+            site.progress = 1;
+            this.runMigrationProgress(site);
+        });
+        this.subscriptions.add(subsc);
+    }
+    runMigrationProgress(site) {
+        this.updateMigrationProgress(site);
+        site.interval = setInterval(() => {
+            this.updateMigrationProgress(site);
+        }, 10000);
+    }
+    updateMigrationProgress(site) {
+        if (!site || !site.isMigrationInProgress) {
+            return;
+        }
+        this.siteUpgradeService.getMigrationBatchesStatuses()
+            .subscribe((statuses) => {
+            if (statuses?.length) {
+                statuses.forEach((statusItem) => {
+                    const ind = this.getSiteIndex(statusItem.id);
+                    if (ind > -1) {
+                        this.data.data[ind].progress = statusItem.progress;
+                        this.data.data[ind].status = statusItem.status;
+                        if (statusItem.status !== 'In Progress') {
+                            this.data.data[ind].pending = false;
+                            this.data.data[ind].isMigrationInProgress = false;
+                            this.data.data[ind].isProgressBarAvailable = false;
+                        }
+                    }
+                });
+                if (statuses.filter(statusItem => statusItem.status === 'In Progress').length < 1) {
+                    this.data.data.forEach(site => {
+                        site.pending = false;
+                        site.isMigrationInProgress = false;
+                        site.isProgressBarAvailable = false;
+                    });
+                }
+            }
+        }, () => {
+            this.resetMigrationProgress(site, 'FAILED');
+        });
+    }
+    resetMigrationProgress(site, status) {
+        site.isMigrationInProgress = false;
+        site.pending = false;
+        site.isProgressBarAvailable = false;
+        if (site.interval) {
+            clearInterval(site.interval);
+        }
+        if (status) {
+            site.status = status;
+        }
+    }
+    onCollect(site) {
+        site.pending = true;
+        site.status = STATUSES.COLLECTING;
+        // const ind =
+        const subscription = this.siteUpgradeService.collectSiteCache(Number(site.siteId), 'webex')
+            .subscribe({
+            error: () => site.pending = false
+        });
+        this.subscriptions.add(subscription);
+        /*setTimeout(() => {
+          this.runBatchCheckStatus();
+        }, 700);*/
+        setTimeout(() => {
+            this.initCollectInterval(site);
+        }, 700);
+    }
+    initCollectInterval(site) {
+        if (!site.interval && !site.initPending) {
+            site.initPending = true;
+            this.getCUCMListAlreadyInCollectWebexCache(site);
+            this.getSiteListForCollectAndBuildWebexCache(site);
+            site.interval = setInterval(() => {
+                this.getCUCMListAlreadyInCollectWebexCache(site);
+                this.getSiteListForCollectAndBuildWebexCache(site);
+            }, 10000);
+        }
+    }
+    getSiteListForCollectAndBuildWebexCache(site) {
+        this.siteUpgradeService.getSiteListForCollectAndBuildWebexCache()
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((siteSet) => {
+            if (!siteSet || !siteSet.length) {
+                site.pending = false;
+                this.removeInterval(site);
+                site.isCollected = true;
+            }
+        }, () => {
+            site.pending = false;
+            this.removeInterval(site);
+        });
+    }
+    removeInterval(site) {
+        if (site.interval) {
+            clearInterval(site.interval);
+        }
+    }
+    handleBatchCUCMAlreadyInCollectCache() {
+        this.data.data.forEach(site => {
+            site.isCUCMInCollectCache =
+                this.siteUpgradeService?.cucmSetInCollectAndBuildWebexCache?.includes(Number(site.sourceId));
+        });
+    }
+    getCUCMListAlreadyInCollectWebexCache(site) {
+        this.siteUpgradeService.getCUCMListCurrentlyInCollectAndBuildWebexCache()
+            .pipe(takeUntil(this.destroy$))
+            .pipe(map$1((cucmList) => {
+            this.handleBatchCUCMAlreadyInCollectCache();
+            if (!cucmList || !cucmList.length) {
+                site.pending = false;
+                this.removeInterval(site);
+                site.isCollected = true;
+            }
+            return cucmList;
+        })).subscribe({
+            error: () => {
+                site.pending = false;
+                site.initPending = true;
+                this.removeInterval(site);
+            }
+        });
+    }
+    checkBatchStatus(batchIds) {
+        const subsc = this.siteUpgradeService.getBatchesStatuses(batchIds)
+            .pipe(takeUntil(this.destroy$), catchError$1(() => {
+            clearInterval(this.collectingBatchInterval);
+            return of([]);
+        })).subscribe((updatedStatuses) => {
+            this.handleCheckBatchStatusResponse(updatedStatuses);
+        });
+        this.subscriptions.add(subsc);
+    }
+    handleCheckBatchStatusResponse(updatedStatuses) {
+        if (updatedStatuses && updatedStatuses.length && this.data?.data?.length) {
+            updatedStatuses.forEach(updatedStatus => {
+                const ind = this.data?.data.findIndex(batch => batch.siteId === updatedStatus.id);
+                if (ind > -1 && this.data?.data[ind] && updatedStatus.status) {
+                    this.data.data[ind].upgradeStatus = updatedStatus.status;
+                }
+            });
+        }
+        else {
+            if (this.collectingBatchInterval) {
+                clearInterval(this.collectingBatchInterval);
+            }
+        }
+    }
+    getSiteIndex(batchId) {
+        if (this.data.data.length) {
+            return this.data.data.findIndex(siteItem => siteItem.batchId === batchId);
+        }
+        return -1;
+    }
+    initializeFilters(records) {
+        if (!records?.length) {
+            this.filters = [];
+            return;
+        }
+        // Extract unique sites (skip empty/null)
+        const uniqueSites = [
+            ...new Set(records
+                .map(record => record.siteName?.trim())
+                .filter((site) => !!site))
+        ];
+        const siteOptions = uniqueSites.map(site => ({
+            label: site,
+            value: site.toLowerCase().replace(/\s+/g, '-')
+        }));
+        // Extract unique statuses (skip empty/null)
+        const uniqueStatuses = [
+            ...new Set(records
+                .map(record => record.upgradeStatus?.trim())
+                .filter((status) => !!status))
+        ];
+        const statusOptions = uniqueStatuses.map(status => ({
+            label: STATUS_ENTRIES[status],
+            value: status.toLowerCase().replace(/\s+/g, '-')
+        }));
+        this.filters = [];
+        if (siteOptions.length) {
+            this.filters.push({
+                id: 'sites',
+                type: 'select',
+                columnKey: 'Site',
+                placeholder: 'Sites',
+                options: siteOptions
+            });
+        }
+        if (statusOptions.length) {
+            this.filters.push({
+                id: 'status',
+                type: 'select',
+                columnKey: 'Site Upgrade Status',
+                placeholder: 'Upgrade Status',
+                options: statusOptions
+            });
+        }
+    }
+    onFilter(filterEvent) {
+        const { key, value } = filterEvent;
+        let filterValue;
+        if (value && value.value !== undefined) {
+            filterValue = value.value;
+        }
+        else if (value && value.target) {
+            filterValue = value.target.value;
+        }
+        else {
+            filterValue = value;
+        }
+        // Handle "All" option or empty values - remove the filter
+        if (filterValue === 'all' || !filterValue || filterValue === '') {
+            delete this.activeFilters[key];
+        }
+        else {
+            this.activeFilters[key] = filterValue;
+        }
+        this.applyFilters();
+    }
+    setupCustomFilter() {
+        this.data.filterPredicate = (data, filter) => {
+            const filters = JSON.parse(filter || '{}');
+            for (const [key, value] of Object.entries(filters)) {
+                if (!value)
+                    continue;
+                switch (key) {
+                    case 'Site':
+                        if (data.siteName !== this.getSiteNameFromValue(value)) {
+                            return false;
+                        }
+                        break;
+                    case 'Site Upgrade Status':
+                        if (!this.matchesUpgradeStatus(data.upgradeStatus, value)) {
+                            return false;
+                        }
+                        break;
+                }
+            }
+            return true;
+        };
+    }
+    applyFilters() {
+        this.data.filter = JSON.stringify(this.activeFilters);
+    }
+    getSiteNameFromValue(value) {
+        // Since we're now using actual site names, just convert back from slug format
+        return value.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
+    }
+    matchesUpgradeStatus(status, filterValue) {
+        // Handle direct status matching for cleaner implementation
+        return status.toLowerCase().replace(/\s+/g, '-') === filterValue.toLowerCase();
+    }
+    get filteredDataCount() {
+        return this.data?.filteredData?.length || 0;
+    }
+    /** Whether the number of selected elements matches the total number of rows. */
+    isAllSelected() {
+        const numSelected = this.selection.selected.length;
+        const numRows = this.data?.data.length || 0;
+        return numSelected === numRows;
+    }
+    /** Selects all rows if they are not all selected; otherwise clear selection. */
+    masterToggle() {
+        this.isAllSelected() ?
+            this.selection.clear() :
+            this.data?.data.forEach(row => this.selection.select(row));
+    }
+    getLocationMappingClass(locationMapping) {
+        return locationMapping ? 'success' : 'error';
+    }
+    getSiteUpgradeStatusClass(status) {
+        switch (status.toLowerCase()) {
+            case 'ready':
+                return 'status-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);
+    }
+    setMigratedStatus(webexMigratedSites) {
+        if (webexMigratedSites && webexMigratedSites.length && this.data?.data?.length) {
+            const statusObj = this.getSiteStatusMappingObj(webexMigratedSites);
+            this.data.data.forEach(site => site.migrationFormStatus = statusObj[site.siteId] || '');
+        }
+    }
+    getSiteStatusMappingObj(webexMigratedSites) {
+        const statusObj = {};
+        webexMigratedSites.forEach(item => {
+            if (item.site?.id) {
+                statusObj[String(item.site.id)] = item.migrationFormStatus;
+            }
+        });
+        return statusObj;
+    }
+    setBatchIdToSites(batches) {
+        if (this.data?.data?.length) {
+            this.data.data.forEach(site => {
+                site.batchId = this.getBatchId(batches, site.siteId);
+            });
+        }
+    }
+    getBatchId(batches, siteId) {
+        const ind = batches.findIndex(batch => batch.siteId === siteId);
+        return ind > -1 ? batches[ind].id : null;
+    }
+    initCollectProgress(sitesInProgress) {
+        this.data?.data.forEach(site => {
+            if (sitesInProgress.includes(site.siteId)) {
+                site.pending = true;
+                this.initCollectInterval(site);
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.dataPending = false;
+        if (this.collectingBatchInterval) {
+            clearInterval(this.collectingBatchInterval);
+        }
+        if (this.subscriptions) {
+            this.subscriptions.unsubscribe();
+        }
+    }
+}
+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", customerId: "customerId" }, ngImport: i0, template: "<div *ngIf=\"dataPending\" class=\"overlay\">\r\n  <mat-progress-spinner\r\n    class=\"page-spinner\"\r\n    mode=\"indeterminate\"\r\n    [diameter]=\"70\"\r\n    strokeWidth=\"3\"></mat-progress-spinner>\r\n</div>\r\n\r\n<div id=\"siteUpgradeTable\" 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']\"\r\n                     [status]=\"'Not Ready'\"></tk-summary-card>\r\n    <tk-summary-card [description]=\"'Sites failed to upgrade'\" [value]=\"statusCounts['Failed']\"\r\n                     [status]=\"'Failed'\"></tk-summary-card>\r\n    <tk-summary-card [description]=\"'Successfully upgraded'\" [value]=\"statusCounts['Completed']\"\r\n                     [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          {{ 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=\"element.upgradeStatus === 'READY'; else statusBlock\">\r\n            <button mat-button color=\"primary\" class=\"upgrade-button\" (click)=\"onSiteMigration(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    <ng-container matColumnDef=\"progressBar\">\r\n      <th class=\"header\" mat-header-cell *matHeaderCellDef></th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"app-progress-bar-container\">\r\n          <app-progress-bar\r\n            [isAvailable]=\"element.isProgressBarAvailable\"\r\n            [progress]=\"element.progress\"\r\n            #progressBars>\r\n          </app-progress-bar>\r\n        </div>\r\n        <span *ngIf=\"element.isProgressBarAvailable\" class=\"progress-percents\">\r\n            {{ element.progress }} %\r\n          </span>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <!-- Action Column -->\r\n    <ng-container matColumnDef=\"actions\">\r\n      <th mat-header-cell *matHeaderCellDef>Actions</th>\r\n      <td mat-cell *matCellDef=\"let element\" class=\"progress-spinner-td\">\r\n        <div class=\"flex-container\">\r\n          <button mat-icon-button [matMenuTriggerFor]=\"defaultBatchMenu\">\r\n            <span style=\"font-size: 17px;\">\u22EE</span>\r\n          </button>\r\n        </div>\r\n\r\n        <mat-menu\r\n          #defaultBatchMenu=\"matMenu\"\r\n          xPosition=\"after\"\r\n          class=\"webex-action-menu\">\r\n\r\n          <div class=\"webex-action-menu-row\"\r\n               [ngClass]=\"{ 'webex-action-menu-row-disabled': element.pending || element.migrationFormStatus === 'NOT_PREPARED' }\"\r\n               (click)=\"element.pending || element.migrationFormStatus === 'NOT_PREPARED' ? $event.stopPropagation() : onCollect(element)\">\r\n                    <span\r\n                      class=\"webex-details-icon webex-icon\"\r\n                      [ngClass]=\"{ 'migration-action-disabled': element.pending || element.migrationFormStatus === 'NOT_PREPARED'}\">\r\n                    </span>\r\n            <span class=\"webex-action-menu-title\">Collect</span>\r\n          </div>\r\n        </mat-menu>\r\n\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"userUpgradeLoader\">\r\n      <th mat-header-cell *matHeaderCellDef></th>\r\n      <td class=\"mat-progress-spinner-td\" mat-cell *matCellDef=\"let element\">\r\n\r\n        <mat-progress-spinner\r\n          *ngIf=\"element.pending\"\r\n          class=\"field-spinner\"\r\n          [diameter]=\"20\"\r\n          mode=\"indeterminate\">\r\n        </mat-progress-spinner>\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>\r\n", 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;500;600;700&display=swap\";.webex-action-menu{box-shadow:0 4px 40px #0000001a!important;border-radius:0!important;width:258px;box-sizing:content-box;cursor:pointer}.webex-action-menu-row-disabled{cursor:default!important;opacity:.4}.webex-action-menu-row-disabled .webex-action-menu-title{color:#bababa!important;line-height:23px}.app-progress-bar-container{margin:7px 20px 0 0}.progress-bar-container{min-width:40px}.webex-action-menu-row:hover{background:#f5f5f5}.webex-icon{display:inline-block;height:25px;width:25px;margin:0 7px 0 0}.webex-details-icon{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M16.2115 19.5H17.0961V16H16.2115V19.5ZM16.6538 15.0865C16.7743 15.0929 16.8782 15.0509 16.9653 14.9606C17.0525 14.8702 17.0961 14.7647 17.0961 14.6442C17.0961 14.5237 17.0509 14.4199 16.9605 14.3327C16.8701 14.2455 16.7679 14.2019 16.6538 14.2019C16.5333 14.2019 16.4294 14.2455 16.3422 14.3327C16.2551 14.4199 16.2115 14.5237 16.2115 14.6442C16.2115 14.7583 16.2551 14.8606 16.3422 14.951C16.4294 15.0413 16.5333 15.0865 16.6538 15.0865ZM4.99997 3.99998V10.1827V10.1538V20V3.99998ZM7.25 13.75H10.7231C10.8679 13.4692 11.0307 13.2038 11.2115 12.9538C11.3923 12.7038 11.591 12.4692 11.8077 12.25H7.25V13.75ZM7.25 17.75H10.0173C9.98009 17.5 9.9615 17.2516 9.9615 17.0048C9.9615 16.758 9.97688 16.5064 10.0076 16.25H7.25V17.75ZM5.3077 21.5C4.80257 21.5 4.375 21.325 4.025 20.975C3.675 20.625 3.5 20.1974 3.5 19.6923V4.3077C3.5 3.80257 3.675 3.375 4.025 3.025C4.375 2.675 4.80257 2.5 5.3077 2.5H13.25L18.5 7.74995V10.425C18.2538 10.3506 18.0073 10.2933 17.7605 10.2529C17.5137 10.2125 17.2602 10.1891 17 10.1827V8.49995H12.5V3.99998H5.3077C5.23077 3.99998 5.16024 4.03203 5.09612 4.09613C5.03202 4.16024 4.99997 4.23077 4.99997 4.3077V19.6923C4.99997 19.7692 5.03202 19.8397 5.09612 19.9038C5.16024 19.9679 5.23077 20 5.3077 20H10.7615C10.9064 20.2871 11.0692 20.5557 11.25 20.8057C11.4307 21.0557 11.6327 21.2871 11.8557 21.5H5.3077ZM16.6538 12.3462C17.9025 12.3462 18.9647 12.784 19.8403 13.6596C20.7159 14.5352 21.1538 15.5974 21.1538 16.8461C21.1538 18.0948 20.7159 19.157 19.8403 20.0326C18.9647 20.9083 17.9025 21.3461 16.6538 21.3461C15.4051 21.3461 14.3429 20.9083 13.4673 20.0326C12.5916 19.157 12.1538 18.0948 12.1538 16.8461C12.1538 15.5974 12.5916 14.5352 13.4673 13.6596C14.3429 12.784 15.4051 12.3462 16.6538 12.3462Z%22 fill%3D%22%232C355D%22%2F%3E%3C%2Fsvg%3E\")}.webex-action-menu-row{padding:5px 15px;display:flex;justify-content:flex-start}.webex-action-menu-row .webex-action-menu-title{line-height:23px}.mat-menu-content:not(:empty){padding-top:0!important}.mat-menu-panel{min-height:auto!important}#siteUpgradeTable{font-family:Inter,sans-serif!important}.wrapper{display:flex;flex-direction:column;gap:1rem}.overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff6;z-index:200}.mat-progress-spinner{position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-25px;width:50px;height:40px;text-align:center;font-size:10px}.mat-progress-spinner-td{position:relative}.mat-progress-spinner-td .mat-progress-spinner{top:28%;left:0;margin:0;position:absolute}.progress-percents{font-weight:500;font-size:12px}:host ::ng-deep .mat-progress-spinner-td{position:relative}:host ::ng-deep #siteUpgradeTable .mat-progress-spinner-td .mat-progress-spinner{top:28%;left:0;margin:0}.site-upgrade-status-wrapper{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;align-items:stretch}.site-upgrade-table{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;font-family:Inter,sans-serif!important}.site-upgrade-table .mat-header-cell{border-bottom:1px solid #afafaf;font-family:Inter,sans-serif!important}.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 .indicator-status-ready{color:#1170cf!important}.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:#1170cf}.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 .flex-container{display:flex}.site-upgrade-table .upgrade-button{border:1px solid rgb(0,0,0)!important;color:#fff!important;background:rgb(0,0,0)!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}.site-upgrade-table .upgrade-button:hover{background-color:#000000b0!important}.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,.site-upgrade-table .collect-icon-cell{display:flex;align-items:center}.site-upgrade-table .icon-play{width:24px;height:24px;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2218%22 height%3D%2219%22 viewBox%3D%220 0 18 19%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M8.09567 11.7427L11.3625 9.64421C11.523 9.54226 11.6033 9.40067 11.6033 9.21945C11.6033 9.03821 11.523 8.89615 11.3625 8.79326L8.09567 6.69472C7.92739 6.57933 7.75479 6.5701 7.57787 6.66701C7.40096 6.76391 7.3125 6.91497 7.3125 7.12019V11.3173C7.3125 11.5225 7.40096 11.6736 7.57787 11.7705C7.75479 11.8674 7.92739 11.8581 8.09567 11.7427ZM9.00124 16.3437C8.01579 16.3437 7.08951 16.1567 6.22241 15.7827C5.3553 15.4087 4.60104 14.9012 3.95963 14.26C3.3182 13.6189 2.81041 12.865 2.43624 11.9982C2.06208 11.1315 1.875 10.2054 1.875 9.21999C1.875 8.23454 2.062 7.30826 2.436 6.44116C2.81 5.57405 3.31756 4.81979 3.95869 4.17838C4.59983 3.53695 5.35376 3.02916 6.22048 2.65499C7.08719 2.28083 8.01328 2.09375 8.99873 2.09375C9.98418 2.09375 10.9105 2.28075 11.7776 2.65475C12.6447 3.02875 13.3989 3.53631 14.0403 4.17744C14.6818 4.81858 15.1896 5.57251 15.5637 6.43923C15.9379 7.30594 16.125 8.23203 16.125 9.21748C16.125 10.2029 15.938 11.1292 15.564 11.9963C15.19 12.8634 14.6824 13.6177 14.0413 14.2591C13.4001 14.9005 12.6462 15.4083 11.7795 15.7825C10.9128 16.1566 9.98669 16.3437 9.00124 16.3437ZM8.99998 15.2187C10.675 15.2187 12.0937 14.6375 13.2562 13.475C14.4187 12.3125 15 10.8937 15 9.21873C15 7.54373 14.4187 6.12498 13.2562 4.96248C12.0937 3.79998 10.675 3.21873 8.99998 3.21873C7.32498 3.21873 5.90623 3.79998 4.74373 4.96248C3.58123 6.12498 2.99998 7.54373 2.99998 9.21873C2.99998 10.8937 3.58123 12.3125 4.74373 13.475C5.90623 14.6375 7.32498 15.2187 8.99998 15.2187Z%22 fill%3D%22%232C355D%22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat;background-position:center;background-size:contain}.site-upgrade-table .collect-icon-cell{cursor:pointer}:host ::ng-deep .action-wrapper{display:flex;align-items:center;flex:1;justify-content:space-between;gap:1rem;color:#555}.table-action-panel{width:100%;display:flex;justify-content:flex-start;align-items:center;gap:1rem}.pay-button-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:1px solid #2c355d;background-color:#fff;cursor:pointer;transition:all .3s ease;position:relative}.pay-button-icon:after{content:\"\";width:0;height:0;border-left:6px solid #2c355d;border-top:4px solid transparent;border-bottom:4px solid transparent;margin-left:2px}.pay-button-icon:hover{border-color:#2c355d;background-color:#f8fafc;transform:scale(1.05)}.pay-button-icon:hover:after{border-left-color:#2c355d}.pay-button-icon:active{transform:scale(.95);background-color:#e2e8f0}.pay-button-icon:disabled,.pay-button-icon.disabled{opacity:.5;cursor:not-allowed}.pay-button-icon:disabled:hover,.pay-button-icon.disabled:hover{transform:none;border-color:#d1d5db;background-color:#fff}.pay-button-icon:disabled:hover:after,.pay-button-icon.disabled:hover:after{border-left-color:#2c355d}.pay-button-icon.small{width:32px;height:32px;border-width:1.5px}.pay-button-icon.small:after{border-left-width:6px;border-top-width:5px;border-bottom-width:5px;margin-left:1px}.pay-button-icon.large{width:48px;height:48px;border-width:2.5px}.pay-button-icon.large:after{border-left-width:10px;border-top-width:7px;border-bottom-width:7px;margin-left:3px}.pay-button-icon.xl{width:56px;height:56px;border-width:3px}.pay-button-icon.xl:after{border-left-width:12px;border-top-width:8px;border-bottom-width:8px;margin-left:3px}.pay-button-icon.loading:after{display:none}.pay-button-icon.loading:before{content:\"\";width:16px;height:16px;border:2px solid #2c355d;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.pay-button{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:none;border:none;cursor:pointer;font-size:14px;font-weight:500;color:#2c355d;transition:color .3s ease}.pay-button .pay-button-icon{margin:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i2$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4$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: SummaryCardComponent, selector: "tk-summary-card", inputs: ["value", "status", "description"] }, { kind: "component", type: TableFiltersComponent, selector: "tk-table-filters", inputs: ["filters"], outputs: ["filter"] }, { kind: "component", type: i6$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: ProgressBarComponent, selector: "app-progress-bar", inputs: ["isAvailable", "progress"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SiteUpgradeDataTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tk-site-upgrade-data-table', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"dataPending\" class=\"overlay\">\r\n  <mat-progress-spinner\r\n    class=\"page-spinner\"\r\n    mode=\"indeterminate\"\r\n    [diameter]=\"70\"\r\n    strokeWidth=\"3\"></mat-progress-spinner>\r\n</div>\r\n\r\n<div id=\"siteUpgradeTable\" 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']\"\r\n                     [status]=\"'Not Ready'\"></tk-summary-card>\r\n    <tk-summary-card [description]=\"'Sites failed to upgrade'\" [value]=\"statusCounts['Failed']\"\r\n                     [status]=\"'Failed'\"></tk-summary-card>\r\n    <tk-summary-card [description]=\"'Successfully upgraded'\" [value]=\"statusCounts['Completed']\"\r\n                     [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          {{ 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=\"element.upgradeStatus === 'READY'; else statusBlock\">\r\n            <button mat-button color=\"primary\" class=\"upgrade-button\" (click)=\"onSiteMigration(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    <ng-container matColumnDef=\"progressBar\">\r\n      <th class=\"header\" mat-header-cell *matHeaderCellDef></th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        <div class=\"app-progress-bar-container\">\r\n          <app-progress-bar\r\n            [isAvailable]=\"element.isProgressBarAvailable\"\r\n            [progress]=\"element.progress\"\r\n            #progressBars>\r\n          </app-progress-bar>\r\n        </div>\r\n        <span *ngIf=\"element.isProgressBarAvailable\" class=\"progress-percents\">\r\n            {{ element.progress }} %\r\n          </span>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <!-- Action Column -->\r\n    <ng-container matColumnDef=\"actions\">\r\n      <th mat-header-cell *matHeaderCellDef>Actions</th>\r\n      <td mat-cell *matCellDef=\"let element\" class=\"progress-spinner-td\">\r\n        <div class=\"flex-container\">\r\n          <button mat-icon-button [matMenuTriggerFor]=\"defaultBatchMenu\">\r\n            <span style=\"font-size: 17px;\">\u22EE</span>\r\n          </button>\r\n        </div>\r\n\r\n        <mat-menu\r\n          #defaultBatchMenu=\"matMenu\"\r\n          xPosition=\"after\"\r\n          class=\"webex-action-menu\">\r\n\r\n          <div class=\"webex-action-menu-row\"\r\n               [ngClass]=\"{ 'webex-action-menu-row-disabled': element.pending || element.migrationFormStatus === 'NOT_PREPARED' }\"\r\n               (click)=\"element.pending || element.migrationFormStatus === 'NOT_PREPARED' ? $event.stopPropagation() : onCollect(element)\">\r\n                    <span\r\n                      class=\"webex-details-icon webex-icon\"\r\n                      [ngClass]=\"{ 'migration-action-disabled': element.pending || element.migrationFormStatus === 'NOT_PREPARED'}\">\r\n                    </span>\r\n            <span class=\"webex-action-menu-title\">Collect</span>\r\n          </div>\r\n        </mat-menu>\r\n\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"userUpgradeLoader\">\r\n      <th mat-header-cell *matHeaderCellDef></th>\r\n      <td class=\"mat-progress-spinner-td\" mat-cell *matCellDef=\"let element\">\r\n\r\n        <mat-progress-spinner\r\n          *ngIf=\"element.pending\"\r\n          class=\"field-spinner\"\r\n          [diameter]=\"20\"\r\n          mode=\"indeterminate\">\r\n        </mat-progress-spinner>\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>\r\n", 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;500;600;700&display=swap\";.webex-action-menu{box-shadow:0 4px 40px #0000001a!important;border-radius:0!important;width:258px;box-sizing:content-box;cursor:pointer}.webex-action-menu-row-disabled{cursor:default!important;opacity:.4}.webex-action-menu-row-disabled .webex-action-menu-title{color:#bababa!important;line-height:23px}.app-progress-bar-container{margin:7px 20px 0 0}.progress-bar-container{min-width:40px}.webex-action-menu-row:hover{background:#f5f5f5}.webex-icon{display:inline-block;height:25px;width:25px;margin:0 7px 0 0}.webex-details-icon{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M16.2115 19.5H17.0961V16H16.2115V19.5ZM16.6538 15.0865C16.7743 15.0929 16.8782 15.0509 16.9653 14.9606C17.0525 14.8702 17.0961 14.7647 17.0961 14.6442C17.0961 14.5237 17.0509 14.4199 16.9605 14.3327C16.8701 14.2455 16.7679 14.2019 16.6538 14.2019C16.5333 14.2019 16.4294 14.2455 16.3422 14.3327C16.2551 14.4199 16.2115 14.5237 16.2115 14.6442C16.2115 14.7583 16.2551 14.8606 16.3422 14.951C16.4294 15.0413 16.5333 15.0865 16.6538 15.0865ZM4.99997 3.99998V10.1827V10.1538V20V3.99998ZM7.25 13.75H10.7231C10.8679 13.4692 11.0307 13.2038 11.2115 12.9538C11.3923 12.7038 11.591 12.4692 11.8077 12.25H7.25V13.75ZM7.25 17.75H10.0173C9.98009 17.5 9.9615 17.2516 9.9615 17.0048C9.9615 16.758 9.97688 16.5064 10.0076 16.25H7.25V17.75ZM5.3077 21.5C4.80257 21.5 4.375 21.325 4.025 20.975C3.675 20.625 3.5 20.1974 3.5 19.6923V4.3077C3.5 3.80257 3.675 3.375 4.025 3.025C4.375 2.675 4.80257 2.5 5.3077 2.5H13.25L18.5 7.74995V10.425C18.2538 10.3506 18.0073 10.2933 17.7605 10.2529C17.5137 10.2125 17.2602 10.1891 17 10.1827V8.49995H12.5V3.99998H5.3077C5.23077 3.99998 5.16024 4.03203 5.09612 4.09613C5.03202 4.16024 4.99997 4.23077 4.99997 4.3077V19.6923C4.99997 19.7692 5.03202 19.8397 5.09612 19.9038C5.16024 19.9679 5.23077 20 5.3077 20H10.7615C10.9064 20.2871 11.0692 20.5557 11.25 20.8057C11.4307 21.0557 11.6327 21.2871 11.8557 21.5H5.3077ZM16.6538 12.3462C17.9025 12.3462 18.9647 12.784 19.8403 13.6596C20.7159 14.5352 21.1538 15.5974 21.1538 16.8461C21.1538 18.0948 20.7159 19.157 19.8403 20.0326C18.9647 20.9083 17.9025 21.3461 16.6538 21.3461C15.4051 21.3461 14.3429 20.9083 13.4673 20.0326C12.5916 19.157 12.1538 18.0948 12.1538 16.8461C12.1538 15.5974 12.5916 14.5352 13.4673 13.6596C14.3429 12.784 15.4051 12.3462 16.6538 12.3462Z%22 fill%3D%22%232C355D%22%2F%3E%3C%2Fsvg%3E\")}.webex-action-menu-row{padding:5px 15px;display:flex;justify-content:flex-start}.webex-action-menu-row .webex-action-menu-title{line-height:23px}.mat-menu-content:not(:empty){padding-top:0!important}.mat-menu-panel{min-height:auto!important}#siteUpgradeTable{font-family:Inter,sans-serif!important}.wrapper{display:flex;flex-direction:column;gap:1rem}.overlay{position:fixed;width:100%;height:100%;inset:0;background-color:#fff6;z-index:200}.mat-progress-spinner{position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-25px;width:50px;height:40px;text-align:center;font-size:10px}.mat-progress-spinner-td{position:relative}.mat-progress-spinner-td .mat-progress-spinner{top:28%;left:0;margin:0;position:absolute}.progress-percents{font-weight:500;font-size:12px}:host ::ng-deep .mat-progress-spinner-td{position:relative}:host ::ng-deep #siteUpgradeTable .mat-progress-spinner-td .mat-progress-spinner{top:28%;left:0;margin:0}.site-upgrade-status-wrapper{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;align-items:stretch}.site-upgrade-table{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;font-family:Inter,sans-serif!important}.site-upgrade-table .mat-header-cell{border-bottom:1px solid #afafaf;font-family:Inter,sans-serif!important}.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 .indicator-status-ready{color:#1170cf!important}.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:#1170cf}.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 .flex-container{display:flex}.site-upgrade-table .upgrade-button{border:1px solid rgb(0,0,0)!important;color:#fff!important;background:rgb(0,0,0)!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}.site-upgrade-table .upgrade-button:hover{background-color:#000000b0!important}.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,.site-upgrade-table .collect-icon-cell{display:flex;align-items:center}.site-upgrade-table .icon-play{width:24px;height:24px;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2218%22 height%3D%2219%22 viewBox%3D%220 0 18 19%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M8.09567 11.7427L11.3625 9.64421C11.523 9.54226 11.6033 9.40067 11.6033 9.21945C11.6033 9.03821 11.523 8.89615 11.3625 8.79326L8.09567 6.69472C7.92739 6.57933 7.75479 6.5701 7.57787 6.66701C7.40096 6.76391 7.3125 6.91497 7.3125 7.12019V11.3173C7.3125 11.5225 7.40096 11.6736 7.57787 11.7705C7.75479 11.8674 7.92739 11.8581 8.09567 11.7427ZM9.00124 16.3437C8.01579 16.3437 7.08951 16.1567 6.22241 15.7827C5.3553 15.4087 4.60104 14.9012 3.95963 14.26C3.3182 13.6189 2.81041 12.865 2.43624 11.9982C2.06208 11.1315 1.875 10.2054 1.875 9.21999C1.875 8.23454 2.062 7.30826 2.436 6.44116C2.81 5.57405 3.31756 4.81979 3.95869 4.17838C4.59983 3.53695 5.35376 3.02916 6.22048 2.65499C7.08719 2.28083 8.01328 2.09375 8.99873 2.09375C9.98418 2.09375 10.9105 2.28075 11.7776 2.65475C12.6447 3.02875 13.3989 3.53631 14.0403 4.17744C14.6818 4.81858 15.1896 5.57251 15.5637 6.43923C15.9379 7.30594 16.125 8.23203 16.125 9.21748C16.125 10.2029 15.938 11.1292 15.564 11.9963C15.19 12.8634 14.6824 13.6177 14.0413 14.2591C13.4001 14.9005 12.6462 15.4083 11.7795 15.7825C10.9128 16.1566 9.98669 16.3437 9.00124 16.3437ZM8.99998 15.2187C10.675 15.2187 12.0937 14.6375 13.2562 13.475C14.4187 12.3125 15 10.8937 15 9.21873C15 7.54373 14.4187 6.12498 13.2562 4.96248C12.0937 3.79998 10.675 3.21873 8.99998 3.21873C7.32498 3.21873 5.90623 3.79998 4.74373 4.96248C3.58123 6.12498 2.99998 7.54373 2.99998 9.21873C2.99998 10.8937 3.58123 12.3125 4.74373 13.475C5.90623 14.6375 7.32498 15.2187 8.99998 15.2187Z%22 fill%3D%22%232C355D%22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat;background-position:center;background-size:contain}.site-upgrade-table .collect-icon-cell{cursor:pointer}:host ::ng-deep .action-wrapper{display:flex;align-items:center;flex:1;justify-content:space-between;gap:1rem;color:#555}.table-action-panel{width:100%;display:flex;justify-content:flex-start;align-items:center;gap:1rem}.pay-button-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:1px solid #2c355d;background-color:#fff;cursor:pointer;transition:all .3s ease;position:relative}.pay-button-icon:after{content:\"\";width:0;height:0;border-left:6px solid #2c355d;border-top:4px solid transparent;border-bottom:4px solid transparent;margin-left:2px}.pay-button-icon:hover{border-color:#2c355d;background-color:#f8fafc;transform:scale(1.05)}.pay-button-icon:hover:after{border-left-color:#2c355d}.pay-button-icon:active{transform:scale(.95);background-color:#e2e8f0}.pay-button-icon:disabled,.pay-button-icon.disabled{opacity:.5;cursor:not-allowed}.pay-button-icon:disabled:hover,.pay-button-icon.disabled:hover{transform:none;border-color:#d1d5db;background-color:#fff}.pay-button-icon:disabled:hover:after,.pay-button-icon.disabled:hover:after{border-left-color:#2c355d}.pay-button-icon.small{width:32px;height:32px;border-width:1.5px}.pay-button-icon.small:after{border-left-width:6px;border-top-width:5px;border-bottom-width:5px;margin-left:1px}.pay-button-icon.large{width:48px;height:48px;border-width:2.5px}.pay-button-icon.large:after{border-left-width:10px;border-top-width:7px;border-bottom-width:7px;margin-left:3px}.pay-button-icon.xl{width:56px;height:56px;border-width:3px}.pay-button-icon.xl:after{border-left-width:12px;border-top-width:8px;border-bottom-width:8px;margin-left:3px}.pay-button-icon.loading:after{display:none}.pay-button-icon.loading:before{content:\"\";width:16px;height:16px;border:2px solid #2c355d;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.pay-button{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:none;border:none;cursor:pointer;font-size:14px;font-weight:500;color:#2c355d;transition:color .3s ease}.pay-button .pay-button-icon{margin:0}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { token: [{
+                type: Input
+            }], customerId: [{
+                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,
+        ProgressBarComponent], imports: [CommonModule,
+        SharedModule,
+        MatTableModule,
+        MatIconModule,
+        MatMenuModule,
+        MatButtonModule,
+        MatProgressSpinnerModule], exports: [SiteUpgradeDataTableComponent,
+        ProgressBarComponent] });
+SiteUpgradeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SiteUpgradeModule, imports: [CommonModule,
+        SharedModule,
+        MatTableModule,
+        MatIconModule,
+        MatMenuModule,
+        MatButtonModule,
+        MatProgressSpinnerModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SiteUpgradeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SiteUpgradeDataTableComponent,
+                        ProgressBarComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        SharedModule,
+                        MatTableModule,
+                        MatIconModule,
+                        MatMenuModule,
+                        MatButtonModule,
+                        MatProgressSpinnerModule
+                    ],
+                    exports: [
+                        SiteUpgradeDataTableComponent,
+                        ProgressBarComponent
+                    ]
+                }]
+        }] });
+
+class UpgradeOverviewService {
+    constructor(apiService) {
+        this.apiService = apiService;
+    }
+    getUpgradePreconditions() {
+        return this.apiService.fetch(API$1.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$1.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$1.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$1.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$1.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$1.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.upgradeOverviewService.customerId = this.customerId;
+        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", customerId: "customerId" }, 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$1.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
+            }], customerId: [{
+                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.upgradeOverviewService.customerId = this.customerId;
+        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", customerId: "customerId" }, 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$1.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
+            }], customerId: [{
+                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.upgradeOverviewService.customerId = this.customerId;
+        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", customerId: "customerId" }, 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$1.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
+            }], customerId: [{
+                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.upgradeOverviewService.customerId = this.customerId;
+        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", customerId: "customerId" }, 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$1.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
+            }], customerId: [{
+                type: Input
+            }] } });
+
+class PreconditionsStatusListCardComponent {
+    constructor() {
+        this.apiService = inject(APIService);
+        this.destroy$ = new Subject();
+        this.upgradeOverviewService = inject(UpgradeOverviewService);
+        this.title = 'Mandatory Preconditions for Upgrade';
+    }
+    ngOnInit() {
+        this.apiService.token = this.token;
+        this.upgradeOverviewService.customerId = this.customerId;
+        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',
+                tooltip: 'Your tenant must be connected to Webex Control Hub to enable and manage the upgrade process.',
+                link: {
+                    href: 'https://dev.tuki.io/',
+                    tooltip: 'Click below to open the integration setup wizard in Tuki. If the tenant is not yet connected, you will be redirected to create the integration in Control Hub.'
+                }
+            },
+            {
+                label: 'SIP Trunk (Local Gateway)',
+                description: 'CUCM trunk connectivity estabilished',
+                status: true,
+                tooltip: 'CUCM must have an active SIP trunk to the Local Gateway for tenant-wide external calling.',
+                link: {
+                    href: 'https://dev.tuki.io/',
+                    tooltip: 'Confirm that the trunk is configured and connected in CUCM.'
+                }
+            },
+            {
+                label: `${this.preconditions.numberOfAvailableLicences} Available User Licences`,
+                description: 'Webex calling licences provisioned and assgined',
+                status: this.preconditions.numberOfAvailableLicences > 0,
+                tooltip: 'Webex Calling licenses are required for users who are being upgraded.',
+                link: {
+                    href: '',
+                    tooltip: ''
+                }
+            }
+        ];
+    }
+}
+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", customerId: "customerId" }, 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
+            }], customerId: [{
+                type: Input
+            }] } });
+
+class SiteInfrastructureStatusListCardComponent {
+    constructor() {
+        this.title = 'Site Preconditions';
+        this.apiService = inject(APIService);
+        this.upgradeOverviewService = inject(UpgradeOverviewService);
+        this.destroy$ = new Subject();
+    }
+    ngOnInit() {
+        this.apiService.token = this.token;
+        this.upgradeOverviewService.customerId = this.customerId;
+        this.upgradeOverviewService.getSiteInfrastructureSummary()
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((siteInfrastructure) => {
+            this.items = [
+                {
+                    label: 'PSTN Trunk',
+                    description: 'Public network connectivity',
+                    status: siteInfrastructure.totalPSTNs === siteInfrastructure.totalSites,
+                    totalSites: siteInfrastructure.totalSites,
+                    value: siteInfrastructure.totalPSTNs,
+                    tooltip: 'Public network connectivity is required for external calling.',
+                    link: {
+                        href: 'https://dev.tuki.io/',
+                        tooltip: 'Ensure that the site has a configured PSTN trunk in Control Hub and verify that the connection is established and active. If setup is incomplete, contact your administrator or PSTN provider.'
+                    }
+                },
+                {
+                    label: 'Location Mapping',
+                    description: 'Sites defined in Control Hub with proper configuration',
+                    status: siteInfrastructure.totalLocations === siteInfrastructure.totalSites,
+                    totalSites: siteInfrastructure.totalSites,
+                    value: siteInfrastructure.totalLocations,
+                    tooltip: 'Each site must be mapped to a Control Hub location.',
+                    link: {
+                        href: 'https://dev.tuki.io/',
+                        tooltip: 'Click below to open the Tuki mapping tool and complete the site-to-location mapping.'
+                    }
+                },
+                {
+                    label: 'Ready users',
+                    description: 'All users in the site are ready or already upgraded',
+                    status: false,
+                    totalSites: 12,
+                    value: siteInfrastructure.totalLocations,
+                    tooltip: 'All users in the site must be ready or already upgraded to ensure a successful migration.',
+                    link: {
+                        href: '',
+                        tooltip: ''
+                    }
+                }
+            ];
+        });
+    }
+    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", customerId: "customerId" }, 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
+            }], customerId: [{
+                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.upgradeOverviewService.customerId = this.customerId;
+        this.totalUpgraded = 0;
+        this.totalNotUpgraded = 0;
+        this.loading = true;
+        this.title = `${this.type} - Upgraded vs. Not Upgraded`;
+        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", customerId: "customerId" }, 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$1.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
+            }], customerId: [{
+                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
+// export * from './shared/shared.module';
+// Widget Modules
+// Types
+// export * from './shared/types/data-table';
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AlreadyUpgradedSitesCardComponent, AlreadyUpgradedUsersCardComponent, PreconditionsStatusListCardComponent, ProgressBarComponent, ReadyToUpgradeSitesCardComponent, ReadyToUpgradeUsersCardComponent, SiteInfrastructureStatusListCardComponent, SiteUpgradeDataTableComponent, SiteUpgradeModule, UpgradeOverviewModule, UpgradeStateComparisonChartCardComponent, UserUpgradeDataTableComponent, UserUpgradeModule };
+//# sourceMappingURL=tuki-io-tuki-widgets-di2mt.mjs.map