@tuki-io/tuki-widgets 0.0.63 → 0.0.65

package/projects/tuki/widgets/di2mt/widgets/upgrade-overview/cards/upgrade-state-comparison-chart/upgrade-state-comparison-chart-card.component.ts

@@ -0,0 +1,70 @@
+import { Component, Input, OnInit, OnDestroy, inject } from "@angular/core";
+import { UpgradeOverviewService } from "../../upgrade-overview.service";
+import { UsersUpgradeSummary, SitesUpgradeSummary } from "../../types/upgrade-overview";
+import { Subject } from "rxjs";
+import { takeUntil } from "rxjs";
+import { APIService } from "../../../../shared/services/api.service";
+
+@Component({
+    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%
+        }    
+    `]
+})
+export class UpgradeStateComparisonChartCardComponent implements OnInit, OnDestroy {
+    private apiService = inject(APIService);
+    private upgradeOverviewService = inject(UpgradeOverviewService);
+    private destroy$ = new Subject<void>();
+    
+    @Input() type: 'Users' | 'Sites' = 'Users';
+    @Input() token!: string;
+    @Input() customerId!: string;
+
+    title!: string;
+    totalUpgraded!: number;
+    totalNotUpgraded!: number;
+
+    loading = false;
+
+    ngOnInit(): void {
+        this.apiService.token = this.token;
+        this.upgradeOverviewService.customerId = this.customerId;
+
+        this.totalUpgraded = 0;
+        this.totalNotUpgraded = 0;
+        this.loading = true;
+        this.title = `Upgraded vs. Not Upgraded ${this.type}`;
+        if (this.type === 'Sites') {
+            this.upgradeOverviewService.getSitesUpgradeSummary()
+                .pipe(takeUntil(this.destroy$))
+                .subscribe((stats: any) => {
+                    this.totalUpgraded = parseInt(stats.totalUpgradedSites);
+                    this.totalNotUpgraded = parseInt(stats.totalReadySites);
+                    this.loading = false;
+                });
+        } else {
+            this.upgradeOverviewService.getUsersUpgradeSummary()
+                .pipe(takeUntil(this.destroy$))
+                .subscribe((stats: any) => {
+                    this.totalUpgraded = parseInt(stats.totalUpgradedUsers);
+                    this.totalNotUpgraded = parseInt(stats.totalReadyUsers);
+                    this.loading = false;
+                });
+        }
+    }
+
+    ngOnDestroy(): void {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+}

package/projects/tuki/widgets/di2mt/widgets/upgrade-overview/types/upgrade-overview.ts

@@ -0,0 +1,58 @@
+/**
+ * 
+ */
+export type UpgradePreconditions = {
+    readonly id: string;
+    readonly customerId: string;
+    controlHubIntegration: string;
+    numberOfAvailableLicences: number;
+}
+/**
+ * 
+ */
+export type SiteInfrastructureSummary = {
+    readonly id: string;
+    readonly customerId: string;
+    totalSites: number;
+    totalLocations: number;
+    totalPSTNs: number;
+}
+/**
+ * @internal
+ */
+type _UpgradeSummary = {
+    readonly id: string;
+    readonly customerId: string;
+    total: number;
+    totalUpgraded: number;
+    totalReady: number
+}
+/**
+ * 
+ */
+export type UpgradeSummary<T extends 'Users' | 'Sites'> = {
+    [
+        key in keyof _UpgradeSummary 
+        as (_UpgradeSummary[key] extends number ? `${key}${T}` : key)
+    ]: _UpgradeSummary[key]
+}
+/**
+ * 
+ */
+export type UpgradeReadiness<T extends 'Users' | 'Sites'> = Omit<UpgradeSummary<T>, `totalUpgraded${T}`>
+/**
+ * 
+ */
+export type UsersUpgradeSummary = UpgradeSummary<'Users'>;
+/**
+ * 
+ */
+export type SitesUpgradeSummary = UpgradeSummary<'Sites'>;
+/**
+ * 
+ */
+export type UsersUpgradeReadiness = UpgradeReadiness<'Users'>
+/**
+ * 
+ */
+export type SitesUpgradeReadiness = UpgradeReadiness<'Sites'>

package/projects/tuki/widgets/di2mt/widgets/upgrade-overview/upgrade-overview.module.ts

@@ -0,0 +1,42 @@
+import { NgModule } from "@angular/core";
+import { ReadyToUpgradeUsersCardComponent } from "./cards/ready-to-upgrade-users/ready-to-upgrade-users-card.component";
+import { CommonModule } from "@angular/common";
+import { SharedModule } from "../../shared/shared.module";
+import { ReadyToUpgradeSitesCardComponent } from "./cards/ready-to-upgrade-sites/ready-to-upgrade-sites-card.component";
+import { AlreadyUpgradedUsersCardComponent } from "./cards/already-upgraded-users/already-upgraded-users-card.component";
+import { AlreadyUpgradedSitesCardComponent } from "./cards/already-upgraded-sites/already-upgraded-sites-card.component";
+import { PreconditionsStatusListCardComponent } from "./cards/preconditions-status-list/preconditions-status-list-card.component";
+import { SiteInfrastructureStatusListCardComponent } from "./cards/site-infrastructure-status-list/site-infrastructure-status-list-card.component";
+import { UpgradeStateComparisonChartCardComponent } from "./cards/upgrade-state-comparison-chart/upgrade-state-comparison-chart-card.component";
+import { APIService } from "../../shared/services/api.service";
+import { UserUpgradeService } from "../user-upgrade/user-upgrade.service";
+
+
+@NgModule({
+    declarations: [
+        ReadyToUpgradeUsersCardComponent,
+        ReadyToUpgradeSitesCardComponent,
+        AlreadyUpgradedUsersCardComponent,
+        AlreadyUpgradedSitesCardComponent,
+        PreconditionsStatusListCardComponent,
+        SiteInfrastructureStatusListCardComponent,
+        UpgradeStateComparisonChartCardComponent
+    ],
+    imports: [
+        CommonModule,
+        SharedModule
+    ],
+    exports: [
+        ReadyToUpgradeUsersCardComponent,
+        ReadyToUpgradeSitesCardComponent,
+        AlreadyUpgradedUsersCardComponent,
+        AlreadyUpgradedSitesCardComponent,
+        PreconditionsStatusListCardComponent,
+        SiteInfrastructureStatusListCardComponent,
+        UpgradeStateComparisonChartCardComponent
+    ],
+    providers: [
+    
+    ]
+})
+export class UpgradeOverviewModule {}

package/projects/tuki/widgets/di2mt/widgets/upgrade-overview/upgrade-overview.service.ts

@@ -0,0 +1,95 @@
+import { Injectable } from "@angular/core";
+import { APIService } from "../../shared/services/api.service";
+import { SiteInfrastructureSummary, SitesUpgradeReadiness, SitesUpgradeSummary, UpgradePreconditions, UsersUpgradeReadiness, UsersUpgradeSummary } from "./types/upgrade-overview";
+import { map, Observable } from "rxjs";
+import { API } from "../../api/api.endpoints";
+
+@Injectable({
+    providedIn: 'root'
+})
+export class UpgradeOverviewService {
+    customerId!: string;
+
+    constructor(private apiService: APIService) { }
+
+    getUpgradePreconditions(): Observable<UpgradePreconditions> {
+        return this.apiService.fetch(
+            API.OVERVIEW.GET_UPGRADE_PRECONDITIONS.replace(':customerId', this.customerId)
+        ).pipe(map((resp) => {
+            return {
+                id: resp.id,
+                customerId: resp.customerId,
+                controlHubIntegration: resp.controlHubIntegration,
+                numberOfAvailableLicences: resp.availableLicences
+            };
+        }));
+    }
+
+    getSiteInfrastructureSummary(): Observable<SiteInfrastructureSummary> {
+        return this.apiService.fetch(
+            API.OVERVIEW.GET_SITE_INFRASTRUCTURE.replace(':customerId', this.customerId)
+        ).pipe(map((resp) => {
+            return {
+                id: resp.id,
+                customerId: resp.customerId,
+                totalSites: resp.totalSites,
+                totalLocations: resp.totalLocations,
+                totalPSTNs: resp.totalPSTNS
+            };
+        }));
+    }
+
+    getUsersUpgradeSummary(): Observable<UsersUpgradeSummary> {
+        return this.apiService.fetch(
+            API.OVERVIEW.GET_USERS_UPGRADE_SUMMARY.replace(':customerId', this.customerId)
+        ).pipe(map((resp) => {
+            return {
+                id: resp.id,
+                customerId: resp.customerId,
+                totalUsers: resp.totalUsers,
+                totalReadyUsers: resp.totalUsersReady,
+                totalUpgradedUsers: resp.totalUsersUpgraded
+            };
+        }));
+    }
+
+    getSitesUpgradeSummary(): Observable<SitesUpgradeSummary> {
+        return this.apiService.fetch(
+            API.OVERVIEW.GET_SITES_UPGRADE_SUMMARY.replace(':customerId', this.customerId)
+        ).pipe(map((resp) => {
+            return {
+                id: resp.id,
+                customerId: resp.customerId,
+                totalSites: resp.totalSites,
+                totalReadySites: resp.totalSitesReady,
+                totalUpgradedSites: resp.totalSitesUpgraded
+            };
+        }));
+    }
+
+    getUsersUpgradeReadiness(): Observable<UsersUpgradeReadiness> {
+        return this.apiService.fetch(
+            API.OVERVIEW.GET_USERS_UPGRADE_READINESS.replace(':customerId', this.customerId)
+        ).pipe(map((resp) => {
+            return {
+                id: resp.id,
+                customerId: resp.customerId,
+                totalUsers: resp.totalUsers,
+                totalReadyUsers: resp.totalUsersReady
+            };
+        }));
+    }
+
+    getSitesUpgradeReadiness(): Observable<SitesUpgradeReadiness> {
+        return this.apiService.fetch(
+            API.OVERVIEW.GET_SITES_UPGRADE_READINESS.replace(':customerId', this.customerId)
+        ).pipe(map((resp) => {
+            return {
+                id: resp.id,
+                customerId: resp.customerId,
+                totalSites: resp.totalSites,
+                totalReadySites: resp.totalSitesReady
+            };
+        }));
+    }
+}

package/projects/tuki/widgets/di2mt/widgets/user-upgrade/types/user-upgrade.ts

@@ -0,0 +1,18 @@
+import { DEPENDENCIES_STATUS, Status } from "../../../shared/types/constants";
+
+export type DependenciesStatus = typeof DEPENDENCIES_STATUS[keyof typeof DEPENDENCIES_STATUS];
+
+export interface UserUpgradeRecord {
+    userId: string;
+    userName: string;
+    customerId: string;
+    siteId: string;
+    cucmId: string;
+    siteName: string;
+    devices: string[];
+    primaryExtension?: string;
+    deviceStatus: Status;
+    dialPlanStatus: Status;
+    dependenciesStatus: DependenciesStatus;
+    upgradeStatus: Status;
+};

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

@@ -0,0 +1,131 @@
+<div class="wrapper">
+    <div class="user-upgrade-status-wrapper">
+        <tk-summary-card [description]="'Users are ready to upgrade'" [value]="statusCounts['Ready']"></tk-summary-card>
+        <tk-summary-card [description]="'Users are not ready'" [value]="statusCounts['Not Ready']" [status]="'Not Ready'"></tk-summary-card>
+        <tk-summary-card [description]="'Users 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}} Users</span>
+            <button 
+                mat-button 
+                class="upgrade-bulk-button" 
+                color="primary" 
+                [disabled]="selection.selected.length === 0" 
+                (click)="upgradeSelectedUsers()">
+                Upgrade {{ selection.selected.length === 0 ? '' : '(' + selection.selected.length + ')' }}
+            </button>
+        </div>
+    </div>
+    <table mat-table [dataSource]="data" class="user-upgrade-table">
+
+        <!-- Checkbox Column -->
+        <ng-container matColumnDef="select">
+            <th mat-header-cell *matHeaderCellDef>
+                <mat-checkbox 
+                    (change)="$event ? masterToggle() : null"
+                    [checked]="selection.hasValue() && isAllSelected()"
+                    [indeterminate]="selection.hasValue() && !isAllSelected()"
+                    class="custom-checkbox">
+                </mat-checkbox>
+            </th>
+            <td mat-cell *matCellDef="let row">
+                <mat-checkbox 
+                    (click)="$event.stopPropagation()"
+                    (change)="$event ? selection.toggle(row) : null"
+                    [checked]="selection.isSelected(row)"
+                    [disabled]="STATUS_ENTRIES[row.upgradeStatus] !== 'Ready'"
+                    class="custom-checkbox">
+                </mat-checkbox>
+            </td>
+        </ng-container>
+
+        <!-- User Column -->
+        <ng-container matColumnDef="user">
+            <th mat-header-cell *matHeaderCellDef>User</th>
+            <td mat-cell *matCellDef="let element">
+                <div class="user-info">
+                    <div class="user-name">{{element.userName}}</div>
+                    <div class="user-email">{{element.userName}}</div>
+                </div>
+            </td>
+        </ng-container>
+
+        <!-- Site Column -->
+        <ng-container matColumnDef="site">
+            <th mat-header-cell *matHeaderCellDef>Site</th>
+            <td mat-cell *matCellDef="let element">
+                <div class="site-info">
+                    <span class="site-indicator"></span>
+                    {{element.siteName}}
+                </div>
+            </td>
+        </ng-container>
+
+        <!-- Device Column -->
+        <ng-container matColumnDef="device">
+            <th mat-header-cell *matHeaderCellDef>Device</th>
+            <td mat-cell *matCellDef="let element">
+                <div class="device-info">
+                    <div *ngIf="element.devices.length > 1">
+                        <div class="device-name-wrapper">
+                            <span class="device-indicator"></span>
+                            <span class="device-name">Multiple devices</span>
+                        </div>
+                    </div>
+                    <div *ngIf="element.devices.length === 1">
+                        <div class="device-name-wrapper">
+                            <span class="device-indicator"></span>
+                            <span class="device-name">{{element.devices[0]}}</span>
+                        </div>
+                        <span class="device-model">{{ element.primaryExtension || 'No Extension' }}</span>
+                    </div>
+                </div>
+            </td>
+        </ng-container>
+
+        <!-- Dial Plan Status Column -->
+        <ng-container matColumnDef="dialPlanStatus">
+            <th mat-header-cell *matHeaderCellDef>Dial Plan Status</th>
+            <td mat-cell *matCellDef="let element">
+                <div class="status-info">
+                    <span class="status-indicator" [ngClass]="getStatusClass(element.dialPlanStatus)"></span>
+                    <span>{{STATUS_ENTRIES[element.dialPlanStatus]}}</span>
+                </div>
+            </td>
+        </ng-container>
+
+        <!-- Dependencies Column -->
+        <ng-container matColumnDef="dependencies">
+            <th mat-header-cell *matHeaderCellDef>Dependencies</th>
+            <td mat-cell *matCellDef="let element">
+                <span *ngIf="DEPENDENCIES_STATUS[element.dependenciesStatus] === 'Dependencies found'" class="dependencies-text">{{DEPENDENCIES_STATUS[element.dependenciesStatus]}}</span>
+                <span *ngIf="DEPENDENCIES_STATUS[element.dependenciesStatus] === 'No dependencies'">—</span>
+            </td>
+        </ng-container>
+
+        <!-- User Upgrade Status Column -->
+        <ng-container matColumnDef="userUpgradeStatus">
+            <th mat-header-cell *matHeaderCellDef>User Upgrade Status</th>
+            <td mat-cell *matCellDef="let element">
+                <div class="upgrade-status-cell">
+                    <ng-container *ngIf="STATUS_ENTRIES[element.upgradeStatus] === 'Ready'; else statusBlock">
+                        <button mat-button color="primary" class="upgrade-button" (click)="upgradeUser(element)">Upgrade</button>
+                    </ng-container>
+                    <ng-template #statusBlock>
+                        <div class="status-info">
+                            <span class="status-indicator" [ngClass]="getStatusClass(element.upgradeStatus)"></span>
+                            <span>{{STATUS_ENTRIES[element.upgradeStatus]}}</span>
+                        </div>
+                    </ng-template>
+                </div>
+            </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;" 
+            [class.selected-row]="selection.isSelected(row)"></tr>
+    </table>
+</div>

package/projects/tuki/widgets/di2mt/widgets/user-upgrade/user-upgrade-data-table/user-upgrade-data-table.component.scss

@@ -0,0 +1,275 @@
+@import "../../../styles/variables.scss";
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.user-upgrade-status-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+  margin-bottom: 1rem;
+}
+
+.user-upgrade-table {
+  font-family: $main-font;
+  width: 100%;
+  background: white;
+  border-radius: 8px;
+  overflow: hidden;
+  font-size: 14px;
+
+  .mat-header-row {
+    // background-color: #ededed;
+    font-size: 12px;
+    height: 35px;
+  }
+
+  .mat-cell {
+    border-bottom: 1px solid #d6d6d6;
+  }
+  .mat-header-cell {
+    border-bottom: 1px solid #afafaf;
+  }
+
+  .mat-row {
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: #f8f9fa;
+    }
+
+    &.selected-row {
+      background-color: rgba(8, 89, 156, 0.1);
+    }
+  }
+
+  // User info styling
+  .user-info {
+    .user-name {
+      font-weight: 500;
+      color: #212121;
+      // margin-bottom: 2px;
+    }
+
+    .user-email {
+      font-size: 12px;
+      color: #757575;
+    }
+  }
+
+  // Site info styling
+  .site-info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .site-indicator {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background-color: #1170cf;
+    }
+  }
+
+  // Device info styling
+  .device-info {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+    .device-name-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      // margin-bottom: 2px;
+
+      .device-name {
+        font-weight: 500;
+        color: #212121;
+      }
+
+      .device-indicator {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background-color: #f8cd00;
+      }
+    }
+
+    .device-model {
+      font-size: 12px;
+      color: #757575;
+    }
+  }
+
+  // Status indicators
+  .status-info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .status-indicator {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+
+      &.ready {
+        background-color: #1d805f;
+      }
+
+      &.partial-ready {
+        background-color: #f8cd00;
+      }
+
+      &.not-ready {
+        background-color: #9e9e9e;
+      }
+
+      &.completed {
+        background-color: #1d805f;
+      }
+
+      &.failed {
+        background-color: #f23933;
+      }
+    }
+  }
+
+  // Dependencies styling
+  .dependencies-text {
+    font-size: 12px;
+    background-color: #ffe9e9;
+    padding: 0.25rem 0.5rem;
+    border-radius: 3px;
+    color: #000;
+  }
+
+  // Upgrade status cell
+  .upgrade-status-cell {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+  }
+
+  // Upgrade button styling
+  .upgrade-button {
+    border: 1px solid #08599c !important;
+    color: #08599c !important;
+    background: white !important;
+    // padding: 6px 16px;
+    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;
+
+    &:hover {
+      background-color: #e3f2fd !important;
+    }
+  }
+
+  // Checkbox styling
+  .custom-checkbox {
+    .mdc-checkbox {
+      padding: 8px;
+    }
+  }
+}
+
+.table-action-panel {
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  gap: 1rem;
+}
+
+.action-wrapper {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.upgrade-bulk-button {
+  border: 1px solid #000 !important;
+  color: white !important;
+  background: #000 !important;
+  // padding: 6px 16px;
+  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;
+
+  &:hover {
+    background-color: #212121 !important;
+  }
+
+  &:disabled {
+    background-color: #888 !important;
+    color: #fff !important;
+    cursor: not-allowed !important;
+    border-color: #888 !important;
+    opacity: 0.25 !important;
+  }
+}
+
+// Target the specific Material checkbox classes that override colors
+:host ::ng-deep {
+  .user-upgrade-table
+    .mat-checkbox-checked.mat-accent
+    .mat-checkbox-background {
+    background-color: #08599c !important;
+    border-color: #08599c !important;
+  }
+
+  .user-upgrade-table
+    .mat-checkbox-indeterminate.mat-accent
+    .mat-checkbox-background {
+    background-color: #08599c !important;
+    border-color: #08599c !important;
+  }
+
+  .user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-background {
+    border-color: rgba(8, 89, 156, 0.6) !important;
+  }
+
+  // Fix the ripple effect and focus states - this removes the pink flash
+  .user-upgrade-table .mat-checkbox.mat-accent .mat-ripple-element {
+    background-color: rgba(8, 89, 156, 0.1) !important;
+  }
+
+  .user-upgrade-table .mat-checkbox.mat-accent:focus .mat-checkbox-background {
+    background-color: rgba(8, 89, 156, 0.1) !important;
+  }
+
+  // Fix focus indicator and overlay colors
+  .user-upgrade-table .mat-checkbox.mat-accent .mat-checkbox-frame {
+    border-color: rgba(8, 89, 156, 0.6) !important;
+  }
+
+  // Ensure checkmarks are white
+  .user-upgrade-table .mat-checkbox-checkmark {
+    color: white !important;
+  }
+
+  .user-upgrade-table .mat-checkbox-checkmark-path {
+    stroke: white !important;
+  }
+
+  .user-upgrade-table .mat-checkbox-mixedmark {
+    border-color: white !important;
+  }
+}