@tuki-io/tuki-widgets 0.0.134 → 0.0.136

package/projects/tuki/widgets/di2mt/shared/constants/app.constants.ts

@@ -1,96 +0,0 @@
-export 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"
-};
-export 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])?)*$'
-};
-
-export const PAGINATION_DEFAULTS = {
-  SIZE: 10,
-  INDEX: 0
-}
-export const PAGINATION_SIZE_OPTIONS = [
-  10,
-  50,
-  100,
-  500
-];
-export const CUCS_TO_IGNORE = [
-  189,
-  194,
-  191,
-  190
-];
-export const CUCMS_TO_IGNORE = [
-  249,
-  255,
-  251,
-  250
-];
-export const RECORDING_MEDIA_SOURCE = [
-  "Gateway Preferred",
-  "Phone Preferred"
-];
-export 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']
-};
-
-export const TOGGLE_TYPES = {
-  TABS: 'TABS',
-  ASSOCIATED_LINE_ONLY: 'ASSOCIATED_LINE_ONLY'
-}

package/projects/tuki/widgets/di2mt/shared/material.module.ts

@@ -1,36 +0,0 @@
-import { NgModule } from "@angular/core";
-import { MatProgressBarModule } from "@angular/material/progress-bar"
-import { MatTableModule } from "@angular/material/table";
-import { MatTooltipModule } from "@angular/material/tooltip";
-import { MatCheckboxModule } from "@angular/material/checkbox";
-import { MatButtonModule } from "@angular/material/button";
-import { MatIconModule } from "@angular/material/icon";
-import { MatFormFieldModule } from "@angular/material/form-field";
-import { MatInputModule } from "@angular/material/input";
-import { MatSelectModule } from "@angular/material/select";
-
-@NgModule({
-    imports: [
-        MatProgressBarModule,
-        MatTooltipModule,
-        MatTableModule,
-        MatCheckboxModule,
-        MatButtonModule,
-        MatIconModule,
-        MatFormFieldModule,
-        MatInputModule,
-        MatSelectModule
-    ],
-    exports: [
-        MatProgressBarModule,
-        MatTooltipModule,
-        MatTableModule,
-        MatCheckboxModule,
-        MatButtonModule,
-        MatIconModule,
-        MatFormFieldModule,
-        MatInputModule,
-        MatSelectModule
-    ]
-})
-export class MaterialModule { }

package/projects/tuki/widgets/di2mt/shared/services/api.service.ts

@@ -1,91 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { Observable } from 'rxjs';
-
-@Injectable({
-    providedIn: 'root'
-})
-export class APIService {
-  public token: any;
-  apiUrl = window.location.protocol + '//' + window.location.hostname + '/dcp';
-  constructor(
-    private httpClient: HttpClient
-  ) {
-    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: string, params?: any, cache?: boolean): Observable<any> {
-    const headers = this.getHeaders(cache);
-    params = params || {};
-    return this.httpClient.get(this.apiUrl + url, {params: this.prepareEncodedParams(params), headers});
-  }
-
-  post(url: string, body: any, params = {}): Observable<any> {
-    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: string, 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: string, body = null, params = {}) {
-    const headers = this.getHeaders();
-    return this.httpClient.put(this.apiUrl + url, body, {headers, params: this.prepareEncodedParams(params)});
-  }
-
-  delete(url: string, params = {}) {
-    const headers = this.getHeaders();
-    return this.httpClient.delete(this.apiUrl + url, {headers, params: this.prepareEncodedParams(params)});
-  }
-
-  fetchPagination(url: string, pageSize: number, pageNumber: number, additionalParams = {}, cache?: boolean): Observable<any> {
-    const copyAdditionalParams = JSON.parse(JSON.stringify(additionalParams));
-    const params = Object.assign(copyAdditionalParams, {size: pageSize.toString(), page: pageNumber.toString()});
-    return this.fetch(url, params, cache) as Observable<any>;
-  }
-
-  private prepareEncodedParams(params: any) {
-    const result: any = {};
-
-    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;
-  }
-
-  private getHeaders(cache?: boolean): HttpHeaders {
-    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;
-  }
-
-  private getParameterByName(name: any, 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, ' '));
-  }
-}

package/projects/tuki/widgets/di2mt/shared/shared.module.ts

@@ -1,39 +0,0 @@
-import { NgModule } from "@angular/core";
-import { CardComponent } from "./components/card/card.component";
-import { CommonModule } from "@angular/common";
-import { MaterialModule } from "./material.module";
-import { StatCardComponent } from "./components/stat-card/stat-card.component";
-import { StatusListCardComponent } from "./components/status-list-card/status-list-card.component";
-import { ChartCardComponent } from "./components/chart-card/chart-card.component";
-import { NgApexchartsModule } from "ng-apexcharts"
-import { MatTableModule } from "@angular/material/table";
-import { TableFiltersComponent } from "./components/table-filters/table-filters.component";
-import { HttpClientModule } from "@angular/common/http";
-import { SummaryCardComponent } from "./components/summary-card/summary-card.component";
-
-@NgModule({
-    declarations: [
-        CardComponent,
-        StatCardComponent,
-        StatusListCardComponent,
-        ChartCardComponent,
-        SummaryCardComponent,
-        TableFiltersComponent
-    ],
-    imports: [
-        CommonModule,
-        MaterialModule,
-        NgApexchartsModule,
-        HttpClientModule
-    ],
-    exports: [
-        MaterialModule,
-        CardComponent,
-        StatCardComponent,
-        StatusListCardComponent,
-        ChartCardComponent,
-        SummaryCardComponent,
-        TableFiltersComponent
-    ]
-})
-export class SharedModule {}

package/projects/tuki/widgets/di2mt/shared/types/constants.ts

@@ -1,22 +0,0 @@
-export type Status = 'Ready' | 'Not Ready' | 'Partial Ready' | 'Failed' | 'Completed';
-export type UpgradeStatus = 'READY' | 'NOT_READY' | 'PARTIAL_READY' | 'FAILED' | 'COMPLETED';
-
-export const STATUS_ENTRIES: { [key: string]: Status } = {
-    READY: 'Ready',
-    NOT_READY: 'Not Ready',
-    PARTIAL_READY: 'Partial Ready',
-    FAILED: 'Failed',
-    COMPLETED: 'Completed'
-};
-
-export const DEPENDENCIES_STATUS: { [key: string]: string } = {
-    DEPENDENCIES_FOUND: 'Dependencies found',
-    NO_DEPENDENCIES: 'No dependencies',
-};
-export enum UPGRADE_STATUS {
-  NOT_READY = 'not_ready',
-  READY = 'ready',
-  COMPLETED = 'completed',
-  IN_PROGRESS = 'in progress',
-  FAILED = 'failed'
-}

package/projects/tuki/widgets/di2mt/shared/types/data-table.ts

@@ -1,5 +0,0 @@
-export type TableColumn = {
-    key: string,
-    label: string,
-    sortable: boolean
-};

package/projects/tuki/widgets/di2mt/shared/types/table/filter.ts

@@ -1,14 +0,0 @@
-export type FilterKind = 'search' | 'select';
-
-export type TableFilter = {
-    id: string,
-    columnKey: string,
-    type: FilterKind,
-    placeholder: string,
-    icon?: {
-        name?: string,
-        src?: string
-    },
-    options: { label: string, value: string }[],
-    defaultValue?: string
-}

package/projects/tuki/widgets/di2mt/styles/tuki-widgets-theme.scss

@@ -1,13 +0,0 @@
-/* Minimal Material Design styles for Tuki Widgets */
-
-/* Import only the core Material styles needed for our components */
-@import '~@angular/material/prebuilt-themes/indigo-pink.css';
-
-/* Override with Tuki brand colors */
-:root {
-  --tuki-primary-color: #08599C;
-  --tuki-accent-color: #1170CF;
-  --tuki-warn-color: #F23933;
-  --tuki-success-color: #1D805F;
-  --tuki-warning-color: #F8CD00;
-}

package/projects/tuki/widgets/di2mt/styles/variables.scss

@@ -1,94 +0,0 @@
-//@import url( 'https://fonts.googleapis.com/css?family=Roboto:400,700|Material+Icons');
-//@import url('https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,800,700,900');
-@import url('https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900');
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap');
-
-@import '../../../../../node_modules/@angular/material/theming';
-
-$fa-font-path : '../../node_modules/font-awesome/fonts';
-
-//$common-font: Raleway, 'Raleway', sans-serif;
-//$special-font: Raleway, 'Roboto', sans-serif;
-//$content-font: 'Roboto', sans-serif;
-//$buttons-font: Raleway, 'Raleway', sans-serif;
-//$input-font: 'Roboto', sans-serif;
-$menu-font: Poppins, 'Poppins', sans-serif;
-$main-font: Inter, 'Inter', sans-serif;
-//$sub-menu-font: Inter, 'Inter', sans-serif;
-$font-size: 14px;
-$txt-color: rgba(0, 0, 0, 0.87);
-$table-title-color: rgba(0,0,0,.54);;
-$txt-grey-color: #454e5e;
-$header-gradient: linear-gradient(90deg,#0d56aa,#0d56ab);
-$poppins-font: Poppins, 'Poppins', sans-serif;
-
-$icon-color: #8E9FB7;
-$active-color: #0D56AA;
-$icon-box-color: #0773BC;
-$mark-color: #009FDB;
-$hover-color: #0985A0;
-$error-color: #C73636;
-$main-txt-color: #333;
-
-$table-border-color: rgba(0, 0, 0, 0.12);
-$input-border-color: rgba(0, 0, 0, 0.30);
-$bg-color: #F7F9FB;
-
-$error-bg-color: #f2dede;
-$error-border-color: #ebccd1;
-$error-txt-color: #bc1e1b;
-$qob-error-color: #E70707;
-
-$warning-bg-color: #fcf8e3;
-$warning-border-color: #e5e1cd;
-$warning-txt-color: #8a6d3b;
-
-$success-bg-color: #e3f4dc;
-$success-border-color: #b3d692;
-$success-txt-color: #3c763d;
-
-$read-only-txt-color: rgba(0, 0, 0, 0.38);
-$my-menu-txt-color: #555555;
-
-$page-background-color: #F3F6F6;
-$disabled-button-text-color: #BABCC5;
-$dark-elements-color: #2C355D;
-$dark-disabled-btn-color: #DFE3E7;
-$disabled-color: #DFE3E7;
-$link-color: #0985A0;
-$title-color: #0985A0;
-$active-link-color: #0985A0;
-$text-color: #646464;
-$light-border-color: #DEE5EA;
-$icon-background: #D2E5E5;
-
-// QOB style
-$navy: #2399DA;
-$dark-blue: #2C355D;
-$qob-danger-color: #E70707;
-$qob-disabled-color: #D4D4D4;
-
-// WEBEX STYLE
-
-$webex-body-bg: #f7f7f7;
-
-
-$webex-icon-bg: #d0d0d0;
-$webex-icon-color: #2a2a2a;
-$webex-text-color: #252525;
-
-$webex-tr-hover-bg: #ededed;
-$webex-tr-border: #dedede;
-
-$webex-table-th-bg: #f7f7f7;
-$webex-table-th-txt: #636363;
-$webex-table-th-size: 12px;
-
-$webex-table-td-bg: #fff;
-$webex-table-td-txt: #636363;
-$webex-table-td-size: 14px;
-
-$webex-pagination-txt: #636363;
-$webex-pagination-hover-bg: #ededed;
-
-$black-alpha-50: rgba(0, 0, 0, 0.5);

package/projects/tuki/widgets/di2mt/widgets/site-upgrade/progress-bar/progress-bar.component.html

@@ -1,6 +0,0 @@
-<!--<div *ngIf="isAvailable" class="progress-bar-container">
-  <div class="progress-bar {{color}}" [ngStyle]="{'width': progress + '%'}"></div>
-</div>-->
-<div *ngIf="isAvailable" class="progress-bar-container">
-  <div class="progress-bar" [ngClass]="color" [style.width.%]="progress"></div>
-</div>

package/projects/tuki/widgets/di2mt/widgets/site-upgrade/progress-bar/progress-bar.component.scss

@@ -1,45 +0,0 @@
-.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;
-}
-

package/projects/tuki/widgets/di2mt/widgets/site-upgrade/progress-bar/progress-bar.component.ts

@@ -1,27 +0,0 @@
-import { Component, Input } from '@angular/core';
-
-@Component({
-  selector: 'app-progress-bar',
-  templateUrl: './progress-bar.component.html',
-  styleUrls: ['./progress-bar.component.scss']
-})
-export class ProgressBarComponent {
-  @Input() isAvailable = false;
-
-  private _progress = 0;
-  @Input() set progress(value: number) {
-    this._progress = Math.max(0, Math.min(100, Number(value) || 0));
-    this.setColor(this._progress);
-  }
-  get progress() { return this._progress; }
-
-  color: string = 'grey';
-
-  private setColor(p: number): void {
-    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';
-  }
-}

package/projects/tuki/widgets/di2mt/widgets/site-upgrade/site-upgrade-data-table/site-upgrade-data-table.component.html

@@ -1,160 +0,0 @@
-<div *ngIf="dataPending" class="overlay">
-  <mat-progress-spinner
-    class="page-spinner"
-    mode="indeterminate"
-    [diameter]="70"
-    strokeWidth="3"></mat-progress-spinner>
-</div>
-
-<div id="siteUpgradeTable" class="wrapper">
-  <div class="site-upgrade-status-wrapper">
-    <tk-summary-card [description]="'Sites are ready to upgrade'" [value]="statusCounts['Ready']"></tk-summary-card>
-    <tk-summary-card [description]="'Sites are not ready'" [value]="statusCounts['Not Ready']"
-                     [status]="'Not Ready'"></tk-summary-card>
-    <tk-summary-card [description]="'Sites failed to upgrade'" [value]="statusCounts['Failed']"
-                     [status]="'Failed'"></tk-summary-card>
-    <tk-summary-card [description]="'Successfully upgraded'" [value]="statusCounts['Completed']"
-                     [status]="'Completed'"></tk-summary-card>
-  </div>
-  <div class="table-action-panel">
-    <tk-table-filters *ngIf="filters.length > 0" [filters]="filters" (filter)="onFilter($event)"></tk-table-filters>
-    <div class="action-wrapper">
-      <span>{{ filteredDataCount }} Sites</span>
-    </div>
-  </div>
-  <table mat-table [dataSource]="data" class="site-upgrade-table">
-
-    <!-- Site Column -->
-    <ng-container matColumnDef="site">
-      <th mat-header-cell *matHeaderCellDef>Site</th>
-      <td mat-cell *matCellDef="let element">
-        <div class="site-info">
-          {{ element.siteName }}
-        </div>
-      </td>
-    </ng-container>
-
-    <!-- Ready Users Column -->
-    <ng-container matColumnDef="ready users">
-      <th mat-header-cell *matHeaderCellDef>Ready Users</th>
-      <td mat-cell *matCellDef="let element">
-        <div class="user-count-info">
-          <div class="user-count">{{ element.totalReadyUsers }}/{{ element.totalUsers }}</div>
-          <div class="user-label">Ready/Total</div>
-        </div>
-      </td>
-    </ng-container>
-
-    <!-- Upgraded Users Column -->
-    <ng-container matColumnDef="upgraded users">
-      <th mat-header-cell *matHeaderCellDef>Upgraded Users</th>
-      <td mat-cell *matCellDef="let element">
-        <div class="user-count-info">
-          <div class="user-count">{{ element.totalUpgradedUsers }}/{{ element.totalUsers }}</div>
-          <div class="user-label">Upgraded/Total</div>
-        </div>
-      </td>
-    </ng-container>
-
-    <!-- Location Mapping Column -->
-    <ng-container matColumnDef="location mapping">
-      <th mat-header-cell *matHeaderCellDef>Location Mapping</th>
-      <td mat-cell *matCellDef="let element">
-        <div class="status-icon-cell">
-          <img *ngIf="element.locationMapping" src="assets/icons/check2_icon.png" alt="Location Mapping Enabled"/>
-          <img *ngIf="!element.locationMapping" src="assets/icons/issue_icon.png" alt="Location Mapping Disabled"/>
-        </div>
-      </td>
-    </ng-container>
-
-    <!-- PSTN Trunk Column -->
-    <ng-container matColumnDef="pstn trunk">
-      <th mat-header-cell *matHeaderCellDef>PSTN Trunk</th>
-      <td mat-cell *matCellDef="let element">
-        <div class="status-icon-cell">
-          <img *ngIf="element.PSTNTrunk" src="assets/icons/check2_icon.png" alt="PSTN Trunk Enabled"/>
-          <img *ngIf="!element.PSTNTrunk" src="assets/icons/issue_icon.png" alt="PSTN Trunk Disabled"/>
-        </div>
-      </td>
-    </ng-container>
-
-    <!-- Site Upgrade Status Column -->
-    <ng-container matColumnDef="site upgrade status">
-      <th mat-header-cell *matHeaderCellDef>Site Upgrade Status</th>
-      <td mat-cell *matCellDef="let element">
-        <div class="upgrade-status-cell">
-          <ng-container *ngIf="element.upgradeStatus === 'READY'; else statusBlock">
-            <button mat-button color="primary" class="upgrade-button" (click)="onSiteMigration(element)">Upgrade</button>
-          </ng-container>
-          <ng-template #statusBlock>
-            <div class="status-info">
-              <span class="status-indicator" [ngClass]="getSiteUpgradeStatusClass(element.upgradeStatus)"></span>
-              <span>{{ STATUS_ENTRIES[element.upgradeStatus] }}</span>
-            </div>
-          </ng-template>
-        </div>
-      </td>
-    </ng-container>
-
-    <ng-container matColumnDef="progressBar">
-      <th class="header" mat-header-cell *matHeaderCellDef></th>
-      <td mat-cell *matCellDef="let element">
-        <div class="app-progress-bar-container">
-          <app-progress-bar
-            [isAvailable]="element.isProgressBarAvailable"
-            [progress]="element.progress"
-            #progressBars>
-          </app-progress-bar>
-        </div>
-        <span *ngIf="element.isProgressBarAvailable" class="progress-percents">
-            {{ element.progress }} %
-          </span>
-      </td>
-    </ng-container>
-
-    <!-- Action Column -->
-    <ng-container matColumnDef="actions">
-      <th mat-header-cell *matHeaderCellDef>Actions</th>
-      <td mat-cell *matCellDef="let element" class="progress-spinner-td">
-        <div class="flex-container">
-          <button mat-icon-button [matMenuTriggerFor]="defaultBatchMenu">
-            <span style="font-size: 17px;">⋮</span>
-          </button>
-        </div>
-
-        <mat-menu
-          #defaultBatchMenu="matMenu"
-          xPosition="after"
-          class="webex-action-menu">
-
-          <div class="webex-action-menu-row"
-               [ngClass]="{ 'webex-action-menu-row-disabled': element.pending || element.migrationFormStatus === 'NOT_PREPARED' }"
-               (click)="element.pending || element.migrationFormStatus === 'NOT_PREPARED' ? $event.stopPropagation() : onCollect(element)">
-                    <span
-                      class="webex-details-icon webex-icon"
-                      [ngClass]="{ 'migration-action-disabled': element.pending || element.migrationFormStatus === 'NOT_PREPARED'}">
-                    </span>
-            <span class="webex-action-menu-title">Collect</span>
-          </div>
-        </mat-menu>
-
-      </td>
-    </ng-container>
-
-    <ng-container matColumnDef="userUpgradeLoader">
-      <th mat-header-cell *matHeaderCellDef></th>
-      <td class="mat-progress-spinner-td" mat-cell *matCellDef="let element">
-
-        <mat-progress-spinner
-          *ngIf="element.pending"
-          class="field-spinner"
-          [diameter]="20"
-          mode="indeterminate">
-        </mat-progress-spinner>
-      </td>
-    </ng-container>
-
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-  </table>
-</div>