@tuki-io/tuki-widgets 0.0.133 → 0.0.134

package/projects/tuki/widgets/contact-center/cc-readiness/widgets/licences-requirement/licences-requirement.component.html

@@ -0,0 +1,74 @@
+<tk-card title="Licenses requirement">
+  <ng-container ngProjectAs="card-content">
+    <div
+      class="widget-body"
+      *ngIf="!loading && !error && viewModel; else widgetState"
+    >
+      <div class="left-section">
+        <mat-select
+          [(value)]="selectedSummaryIndex"
+          (selectionChange)="onFilterChange($event.value)"
+          class="filter-select"
+        >
+          <mat-option *ngFor="let option of filters; index as i" [value]="i">
+            {{ option }}
+          </mat-option>
+        </mat-select>
+
+        <div class="chart-section">
+          <div class="chart-wrapper">
+            <apx-chart
+              [series]="viewModel.chartOptions.series"
+              [chart]="viewModel.chartOptions.chart"
+              [labels]="viewModel.chartOptions.labels"
+              [colors]="viewModel.chartOptions.colors"
+              [legend]="viewModel.chartOptions.legend"
+              [plotOptions]="viewModel.chartOptions.plotOptions"
+              [dataLabels]="viewModel.chartOptions.dataLabels"
+            >
+            </apx-chart>
+          </div>
+          <div class="legend">
+            <div class="legend-item" *ngFor="let item of viewModel.legendItems">
+              <span
+                class="legend-marker"
+                [style.backgroundColor]="item.color"
+              ></span>
+              <span class="legend-label">{{ item.label }}</span>
+              <span class="legend-value">{{ item.count | number }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="divider" aria-hidden="true"></div>
+
+      <div class="table-section">
+        <div class="lic-table-header">
+          <span>License</span>
+          <span>Required</span>
+        </div>
+        <div class="table-row" *ngFor="let row of viewModel.rows">
+          <span>{{ row.label }}</span>
+          <span>{{ row.value | number }}</span>
+        </div>
+        <div class="table-row total-row">
+          <span>Total</span>
+          <span>{{ viewModel.totalRequired | number }}</span>
+        </div>
+      </div>
+    </div>
+
+    <ng-template #widgetState>
+      <div class="state-message" *ngIf="loading">
+        Loading license requirements…
+      </div>
+      <div class="state-message error" *ngIf="!loading && error">
+        Unable to load license requirements.
+      </div>
+      <div class="state-message" *ngIf="!loading && !error && !viewModel">
+        No license data available.
+      </div>
+    </ng-template>
+  </ng-container>
+</tk-card>

package/projects/tuki/widgets/contact-center/cc-readiness/widgets/licences-requirement/licences-requirement.component.scss

@@ -0,0 +1,177 @@
+@import "../../../shared/styles/variables.scss";
+
+:host {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.filter-select {
+  font-family: $main-font;
+  font-size: 14px;
+  min-width: 140px;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background-color: #fff;
+}
+
+.filter-select:hover {
+  border-color: #d1d5db;
+}
+
+:host ::ng-deep .filter-select.mat-mdc-select {
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  background-color: #fff;
+}
+
+:host ::ng-deep .filter-select.mat-mdc-select:hover {
+  border-color: #d1d5db;
+}
+
+:host ::ng-deep .filter-select.mat-mdc-select.mat-focused {
+  border-color: #16a693;
+}
+
+:host ::ng-deep .filter-select .mat-mdc-select-trigger {
+  font-size: 14px;
+  padding: 0.5rem 0.75rem;
+}
+
+:host ::ng-deep .filter-select .mat-mdc-select-value {
+  color: #111827;
+}
+
+:host ::ng-deep .filter-select .mat-mdc-select-arrow-wrapper {
+  padding-left: 0.5rem;
+}
+
+.widget-body {
+  display: flex;
+  gap: 2.5rem;
+  align-items: flex-start;
+}
+
+.left-section {
+  flex: 2;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.chart-section {
+  display: flex;
+  gap: 1.5rem;
+  align-items: center;
+}
+
+.chart-wrapper {
+  width: 220px;
+  min-height: 220px;
+  flex-shrink: 0;
+}
+
+.chart-wrapper apx-chart {
+  width: 220px !important;
+  height: 220px !important;
+}
+
+.legend {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-family: $main-font;
+  font-size: 14px;
+}
+
+.legend-marker {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  display: inline-flex;
+}
+
+.legend-label {
+  color: #4b5563;
+}
+
+.legend-value {
+  margin-left: auto;
+  font-weight: 600;
+  color: #111827;
+}
+
+.divider {
+  width: 1px;
+  min-height: 200px;
+  align-self: stretch;
+  background: #e5e7eb;
+}
+
+.table-section {
+  flex: 3;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  font-family: $main-font;
+}
+
+.lic-table-header,
+.table-row {
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+}
+
+.lic-table-header {
+  font-weight: 600;
+  color: #6b7280;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.table-row {
+  color: #111827;
+}
+
+.total-row {
+  font-weight: 700;
+  margin-top: 0.5rem;
+  padding-top: 0.5rem;
+  border-top: 1px solid #e5e7eb;
+}
+
+.state-message {
+  font-family: $main-font;
+  font-size: 14px;
+  color: #6b7280;
+}
+
+.state-message.error {
+  color: #b91c1c;
+}
+
+@media (max-width: 960px) {
+  .widget-body {
+    flex-direction: column;
+  }
+
+  .divider {
+    display: none;
+  }
+
+  .chart-section {
+    justify-content: space-between;
+  }
+}
+
+:host ::ng-deep .apexcharts-legend {
+  display: none !important;
+}

package/projects/tuki/widgets/contact-center/cc-readiness/widgets/licences-requirement/licences-requirement.component.spec.ts

@@ -0,0 +1,35 @@
+import { CommonModule } from '@angular/common';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NgApexchartsModule } from 'ng-apexcharts';
+import { of } from 'rxjs';
+import { CardComponent } from '../../components/card/card.component';
+import { CcReadinessService } from '../../cc-readiness.service';
+import { LicencesRequirementComponent } from './licences-requirement.component';
+
+class CcReadinessServiceMock {
+  setToken = jasmine.createSpy('setToken');
+  fetchWebexLicenseUsageSummary = jasmine.createSpy('fetchWebexLicenseUsageSummary').and.returnValue(of([]));
+}
+
+describe('LicencesRequirementComponent', () => {
+  let component: LicencesRequirementComponent;
+  let fixture: ComponentFixture<LicencesRequirementComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [LicencesRequirementComponent, CardComponent],
+      imports: [CommonModule, NgApexchartsModule],
+      providers: [{ provide: CcReadinessService, useClass: CcReadinessServiceMock }]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(LicencesRequirementComponent);
+    component = fixture.componentInstance;
+    component.customerId = 1477;
+    component.token = 'token';
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/tuki/widgets/contact-center/cc-readiness/widgets/licences-requirement/licences-requirement.component.ts

@@ -0,0 +1,237 @@
+import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, inject } from '@angular/core';
+import { ApexChart, ApexDataLabels, ApexLegend, ApexNonAxisChartSeries, ApexPlotOptions } from 'ng-apexcharts';
+import { catchError, finalize, of, Subscription } from 'rxjs';
+import { CcReadinessService } from '../../cc-readiness.service';
+import { WebexLicenseUsageSummary } from '../../types/cc-readiness';
+
+interface LicenseLegendItem {
+  label: string;
+  count: number;
+  percentage: number;
+  color: string;
+}
+
+interface LicenseTableRow {
+  label: string;
+  value: number;
+}
+
+interface LicenseChartOptions {
+  series: ApexNonAxisChartSeries;
+  chart: ApexChart;
+  labels: string[];
+  colors: string[];
+  legend: ApexLegend;
+  plotOptions: ApexPlotOptions;
+  dataLabels: ApexDataLabels;
+}
+
+interface LicenseRequirementViewModel {
+  chartOptions: LicenseChartOptions;
+  legendItems: LicenseLegendItem[];
+  rows: LicenseTableRow[];
+  totalRequired: number;
+}
+
+const LEGEND_COLORS = {
+  existing: '#16A693',
+  missing: '#808080'
+};
+
+@Component({
+  selector: 'cc-licenses-requirement',
+  templateUrl: './licences-requirement.component.html',
+  styleUrls: ['./licences-requirement.component.scss']
+})
+export class LicencesRequirementComponent implements OnInit, OnDestroy, OnChanges {
+  @Input() customerId!: number;
+  @Input() token!: string;
+
+  private readonly ccReadinessService = inject(CcReadinessService);
+  private subscription?: Subscription;
+
+  viewModel: LicenseRequirementViewModel | null = null;
+  loading = false;
+  error = false;
+
+  filters: string[] = ['All', 'Professional licenses', 'Workspace licenses'];
+  selectedSummaryIndex = 0;
+
+  private summary: WebexLicenseUsageSummary | null = null;
+
+  ngOnInit(): void {
+    this.loadSummaries();
+  }
+
+  ngOnDestroy(): void {
+    this.subscription?.unsubscribe();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if ((changes['customerId'] && !changes['customerId'].firstChange) ||
+      (changes['token'] && !changes['token'].firstChange)) {
+      this.loadSummaries();
+    }
+  }
+
+  onFilterChange(index: number): void {
+    if (!isNaN(index) && index >= 0 && index < this.filters.length) {
+      this.selectFilter(index);
+    }
+  }
+
+  private loadSummaries(): void {
+    const numericCustomerId = Number(this.customerId);
+    if (!numericCustomerId || !this.token) {
+      return;
+    }
+
+    this.subscription?.unsubscribe();
+    this.loading = true;
+    this.error = false;
+    this.viewModel = null;
+    this.selectedSummaryIndex = 0;
+
+    this.ccReadinessService.setToken(this.token);
+    this.subscription = this.ccReadinessService.fetchWebexLicenseUsageSummary(numericCustomerId)
+      .pipe(
+        catchError(error => {
+          console.error('Unable to load Webex license usage summary', error);
+          this.error = true;
+          return of<WebexLicenseUsageSummary[]>([]);
+        }),
+        finalize(() => this.loading = false)
+      )
+      .subscribe(items => {
+        console.log('Raw API response:', items);
+        // Handle both array and single object responses
+        if (Array.isArray(items) && items.length > 0) {
+          this.summary = items[0];
+        } else if (items && typeof items === 'object' && !Array.isArray(items)) {
+          // If single object returned, use it directly
+          this.summary = items as unknown as WebexLicenseUsageSummary;
+        } else {
+          this.summary = null;
+        }
+
+        console.log('Processed summary:', this.summary);
+        this.selectFilter(0);
+      });
+  }
+
+  private selectFilter(index: number): void {
+    this.selectedSummaryIndex = index;
+    if (!this.summary) {
+      this.viewModel = null;
+      return;
+    }
+    this.viewModel = this.mapSummaryToViewModel(this.summary, index);
+    console.log('Created viewModel for filter index', index, ':', this.viewModel);
+  }
+
+  private mapSummaryToViewModel(summary: WebexLicenseUsageSummary, filterIndex: number): LicenseRequirementViewModel {
+    console.log('Mapping summary to viewModel:', summary, 'filterIndex:', filterIndex);
+
+    // Extract data from webexReadinessLicenseStats and license counts
+    const personStat = summary.webexReadinessLicenseStats?.find(stat => stat.feature === 'PERSON');
+    const deviceStat = summary.webexReadinessLicenseStats?.find(stat => stat.feature === 'ORPHANED_DEVICE');
+
+    const professionalNeeded = personStat?.totalCount ?? 0;
+    const workspaceNeeded = deviceStat?.totalCount ?? 0;
+
+    const professionalOwned = Number(summary.totalProfessionalLicenseCount ?? 0);
+    const workspaceOwned = Number(summary.totalWorkspaceProfessionalLicenseCount ?? 0);
+
+    // Filter data based on selection
+    let existingCount: number;
+    let missingCount: number;
+    let rows: LicenseTableRow[];
+
+    if (filterIndex === 0) {
+      // All - show both
+      existingCount = professionalOwned + workspaceOwned;
+      const totalNeeded = professionalNeeded + workspaceNeeded;
+      missingCount = Math.max(0, totalNeeded - existingCount);
+
+      rows = [
+        { label: 'Professional licenses', value: professionalNeeded },
+        { label: 'Workspace licenses', value: workspaceNeeded }
+      ];
+    } else if (filterIndex === 1) {
+      // Professional licenses only
+      existingCount = professionalOwned;
+      missingCount = Math.max(0, professionalNeeded - professionalOwned);
+
+      rows = [{ label: 'Professional licenses', value: professionalNeeded }];
+    } else {
+      // Workspace licenses only
+      existingCount = workspaceOwned;
+      missingCount = Math.max(0, workspaceNeeded - workspaceOwned);
+
+      rows = [{ label: 'Workspace licenses', value: workspaceNeeded }];
+    }
+
+    const totalLicenses = existingCount + missingCount;
+
+    const legendItems: LicenseLegendItem[] = [
+      {
+        label: 'Existing licenses',
+        count: existingCount,
+        percentage: totalLicenses > 0 ? (existingCount / totalLicenses) * 100 : 0,
+        color: LEGEND_COLORS.existing
+      },
+      {
+        label: 'Missing licenses',
+        count: missingCount,
+        percentage: totalLicenses > 0 ? (missingCount / totalLicenses) * 100 : 0,
+        color: LEGEND_COLORS.missing
+      }
+    ];
+
+    console.log('Legend items:', legendItems);
+    console.log('Table rows:', rows);
+
+    const totalRequired = rows.reduce((acc, row) => acc + row.value, 0);
+
+    return {
+      chartOptions: this.buildChartOptions(legendItems),
+      legendItems,
+      rows,
+      totalRequired
+    };
+  }
+
+  private buildChartOptions(legendItems: LicenseLegendItem[]): LicenseChartOptions {
+    return {
+      series: legendItems.map(item => item.count),
+      chart: {
+        type: 'donut',
+        height: 220
+      },
+      labels: legendItems.map(item => item.label),
+      colors: legendItems.map(item => item.color),
+      legend: {
+        show: false
+      },
+      plotOptions: {
+        pie: {
+          donut: {
+            size: '75%'
+          }
+        }
+      },
+      dataLabels: {
+        enabled: false
+      }
+    };
+  }
+
+  private normalizePercentage(value: number): number {
+    if (!isFinite(value)) {
+      return 0;
+    }
+    // Convert decimal to percentage (0.9487 → 94.9)
+    const percentage = value * 100;
+    return Math.round(percentage * 10) / 10;
+  }
+}

package/projects/tuki/widgets/contact-center/cc-readiness/widgets/summary-grid/summary-grid.component.html

@@ -0,0 +1,19 @@
+<ng-container *ngIf="data$ | async as data">
+    <div *ngFor="let stats of data">
+        <tk-card [title]="stats.uccxIp">
+            <ng-container ngProjectAs="card-content">
+                <div class="grid-wrapper">
+                    <div class="grid-item" *ngFor="let item of stats.counts">
+                        <div class="item-top">
+                            <span class="item-icon">
+                                <img width="24" height="24" src="assets/icons/{{ item.name }}.svg" alt="{{ item.name }} Icon">
+                            </span>
+                            <span class="item-count">{{ item.value }}</span>
+                        </div>
+                        <span class="item-label">{{ ENTITY_CONFIG[item.name].label }}</span>
+                    </div>
+                </div>
+            </ng-container>
+        </tk-card>
+    </div>
+</ng-container>

package/projects/tuki/widgets/contact-center/cc-readiness/widgets/summary-grid/summary-grid.component.scss

@@ -0,0 +1,38 @@
+.grid-wrapper {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 2rem;
+  row-gap: 2rem;
+}
+
+.grid-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.item-top {
+  display: flex;
+  align-items: center;
+  gap: inherit;
+}
+
+.item-icon {
+    display: flex;
+    align-items: center;
+//   display: flex;
+//   align-items: center;
+//   justify-content: center;
+    background-color: rgb(242, 242, 242);
+    padding: 0.75rem;
+    border-radius: 0.5rem;
+}
+
+.item-count {
+  font-size: 30px;
+}
+
+.item-label {
+  font-size: 14px;
+  margin-left: .15rem;
+}

package/projects/tuki/widgets/contact-center/cc-readiness/widgets/summary-grid/summary-grid.component.ts

@@ -0,0 +1,57 @@
+import { Component, inject, Input, OnInit } from "@angular/core";
+import { CcReadinessService } from "../../cc-readiness.service";
+import { map, Observable } from "rxjs";
+import { EntityType, UccxServerEntityStats } from "../../types/cc-readiness";
+
+interface SummaryGridCount {
+    name: string;
+    value: number;
+}
+
+interface SummaryGridItem {
+    uccxIp: string;
+    counts: SummaryGridCount[];
+}
+
+const ENTITY_CONFIG: { [key: string]: { label: string } } = {
+    applications: { label: 'Applications' },
+    triggers: { label: 'Triggers' },
+    contactServiceQueues: { label: 'CSQs' },
+    resources: { label: 'Resources' },
+    resourceGroups: { label: 'Resource Groups' },
+    skills: { label: 'Skills' },
+    xml: { label: 'XML' },
+    scripts: { label: 'Scripts' },
+    audioPrompts: { label: 'Audio Prompts' },
+    teams: { label: 'Teams' },
+    wrapUpCodes: { label: 'Wrap-Up Codes' },
+    phonebooks: { label: 'Phonebooks' }
+};
+
+@Component({
+    selector: 'cc-summary-grid',
+    templateUrl: 'summary-grid.component.html',
+    styleUrls: ['summary-grid.component.scss']
+})
+export class SummaryGridComponent implements OnInit {
+    @Input() customerId!: number;
+    @Input() token!: string;
+
+    private readonly ccReadinessService = inject(CcReadinessService);
+
+    readonly ENTITY_CONFIG = ENTITY_CONFIG;
+
+    data$!: Observable<SummaryGridItem[]>;
+
+    ngOnInit(): void {
+        this.ccReadinessService.setToken(this.token);
+
+        this.data$ = this.ccReadinessService.fetchUccxServerEntityStats(this.customerId)
+            .pipe(map(items => {
+                return items.map(item => ({
+                    uccxIp: item.uccxIp,
+                    counts: Object.entries(item.counts).map(([name, value]) => ({ name, value }))
+                }));
+            }));
+    }
+}

package/projects/tuki/widgets/contact-center/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "public-api.ts"
+  },
+  "assets": ["./shared/styles/", "./shared/assets/","src/assets"]
+}

package/projects/tuki/widgets/contact-center/public-api.ts

@@ -0,0 +1,6 @@
+
+
+export * from './cc-readiness/cc-readiness.module';
+
+export * from './cc-readiness/widgets/summary-grid/summary-grid.component';
+export * from './cc-readiness/widgets/licences-requirement/licences-requirement.component';

package/projects/tuki/widgets/contact-center/shared/api.endpoints.ts

@@ -0,0 +1,6 @@
+export const API = {
+    READINESS: {
+        UCCX_SERVER_ENTITY_STATS: (customerId: number) => `/api/uccx/migration/customer/${customerId}/entity-counts`,
+        LICENSE_USAGE_SUMMARY: (customerId: number) => `/api/webexreadiness/customers/${customerId}/callinglicesnsecountperfeature`,
+    }
+}