@tuki-io/tuki-widgets 0.0.75 → 0.0.77

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

@@ -1,37 +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.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,40 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-progress-bar',
-  templateUrl: './progress-bar.component.html',
-  styleUrls: ['./progress-bar.component.scss']
-})
-export class ProgressBarComponent implements OnInit {
-  @Input()
-  public isAvailable = false;
-  @Input()
-  public progress = 0;
-  public color = 'grey';
-
-  constructor(
-  ) {
-  }
-
-  ngOnInit() {
-  }
-
-  public updatedProgress(progress: number): void {
-    this.progress = progress;
-    this.setColor(this.progress);
-  }
-
-  private setColor(progress: number): void {
-    if (progress <= 20) {
-      this.color = 'red';
-    } else if (progress <= 40) {
-      this.color = 'yellow';
-    } else if (progress <= 60) {
-      this.color = 'darkblue';
-    } else if (progress <= 80) {
-      this.color = 'lightblue';
-    } else if (progress <= 100.0) {
-      this.color = 'green';
-    }
-  }
-}

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

@@ -1,158 +0,0 @@
-<div *ngIf="dataPending" class="overlay">
-  <mat-progress-spinner
-    class="page-spinner"
-    mode="indeterminate"
-    [diameter]="120"></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)="upgradeSite(element)">Upgrade</button>
-          </ng-container>
-          <ng-template #statusBlock>
-            <div class="status-info">
-              <span class="status-indicator" [ngClass]="getSiteUpgradeStatusClass(element.upgradeStatus)"></span>
-              <span [ngClass]="{'status-ready': element.upgradeStatus === 'READY'}">{{ 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">
-        <button mat-button color="primary" class="upgrade-button" (click)="onSiteMigration(element)">Upgrade</button>
-<!--        <div class="pay-button-icon"></div>-->
-        <button mat-icon-button [matMenuTriggerFor]="defaultBatchMenu">
-          <span style="font-size: 17px;">⋮</span>
-        </button>
-        <mat-menu
-          #defaultBatchMenu="matMenu"
-          xPosition="after"
-          class="webex-action-menu">
-
-          <div class="webex-action-menu-row"
-               [ngClass]="{ 'webex-action-menu-row-disabled': element.pending }"
-               (click)="element.pending  ? $event.stopPropagation() : onCollect(element)">
-                    <span
-                      class="webex-details-icon webex-icon"
-                      [ngClass]="{ 'migration-action-disabled': element.pending || STATUS_ENTRIES[element.upgradeStatus] !== 'Ready'}">
-                    </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>

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

@@ -1,430 +0,0 @@
-@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;500;600;700&display=swap');
-
-.webex-action-menu {
-  box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.1) !important;
-  border-radius: 0px !important;
-  width: 258px;
-  box-sizing: content-box;
-  cursor: pointer;
-}
-.webex-action-menu-row-disabled {
-  cursor: default !important;
-  opacity: 0.4;
-
-  .webex-action-menu-title {
-    color: #bababa !important;
-    line-height: 23px;
-  }
-}
-.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('../../../assets/icons/details_d_icon.svg');
-}
-.webex-action-menu-row {
-  padding: 5px 15px;
-  display: flex;
-  justify-content: flex-start;
-
-  .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%;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(255, 255, 255, 0.4);
-  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;
-}
-
-::ng-deep {
-
-  .mat-progress-spinner-td {
-    position: relative;
-  }
-  #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;
-}
-
-.site-upgrade-table {
-  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;
-    font-family: "Inter", sans-serif !important;
-  }
-  .mat-header-cell {
-    border-bottom: 1px solid #afafaf;
-    font-family: "Inter", sans-serif !important;
-  }
-
-  // Site info styling
-  .site-info {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-
-    .site-indicator {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background-color: #1170cf;
-    }
-  }
-  .status-ready {
-    color: #1170CF;
-  }
-
-  // Device info styling
-  .device-info {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-
-    .device-name-wrapper {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      // 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;
-    color: #08599c;
-    background: white;
-    // padding: 6px 16px;
-    border-radius: 20px;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 500;
-    height: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &:hover {
-      background-color: #e3f2fd;
-    }
-  }
-
-  // User count info styling
-  .user-count-info {
-    .user-count {
-      font-weight: 500;
-      color: #212121;
-      // margin-bottom: 2px;
-    }
-
-    .user-label {
-      font-size: 12px;
-      color: #757575;
-    }
-  }
-
-  // Status icon cell styling
-  .status-icon-cell {
-    display: flex;
-    align-items: center;
-  }
-}
-
-::ng-deep .action-wrapper {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  justify-content: space-between;
-  gap: 1rem;
-  color: #555555;
-}
-
-.table-action-panel {
-    width: 100%;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    gap: 1rem;
-}
-
-/// Play button
-// Pay Button Icon - Circle with right arrow triangle
-.pay-button-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  border-radius: 50%;
-  border: 1px solid #2c355d; // Light grey border
-  background-color: #ffffff;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  position: relative;
-
-  // Blue right arrow triangle
-  &::after {
-    content: '';
-    width: 0;
-    height: 0;
-    border-left: 6px solid #2c355d; // Blue color
-    border-top: 4px solid transparent;
-    border-bottom: 4px solid transparent;
-    margin-left: 2px; // Slight offset to center visually
-  }
-
-  // Hover effects
-  &:hover {
-    border-color: #2c355d;
-    background-color: #f8fafc;
-    transform: scale(1.05);
-
-    &::after {
-      border-left-color: #2c355d; // Darker blue on hover
-    }
-  }
-
-  // Active/pressed state
-  &:active {
-    transform: scale(0.95);
-    background-color: #e2e8f0;
-  }
-
-  // Disabled state
-  &:disabled,
-  &.disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-
-    &:hover {
-      transform: none;
-      border-color: #d1d5db;
-      background-color: #ffffff;
-
-      &::after {
-        border-left-color: #2c355d;
-      }
-    }
-  }
-}
-
-// Size variations
-.pay-button-icon {
-  // Small size
-  &.small {
-    width: 32px;
-    height: 32px;
-    border-width: 1.5px;
-
-    &::after {
-      border-left-width: 6px;
-      border-top-width: 5px;
-      border-bottom-width: 5px;
-      margin-left: 1px;
-    }
-  }
-
-  // Large size
-  &.large {
-    width: 48px;
-    height: 48px;
-    border-width: 2.5px;
-
-    &::after {
-      border-left-width: 10px;
-      border-top-width: 7px;
-      border-bottom-width: 7px;
-      margin-left: 3px;
-    }
-  }
-
-  // Extra large size
-  &.xl {
-    width: 56px;
-    height: 56px;
-    border-width: 3px;
-
-    &::after {
-      border-left-width: 12px;
-      border-top-width: 8px;
-      border-bottom-width: 8px;
-      margin-left: 3px;
-    }
-  }
-}
-
-
-// Animation for loading state
-.pay-button-icon {
-  &.loading {
-    &::after {
-      display: none;
-    }
-
-    &::before {
-      content: '';
-      width: 16px;
-      height: 16px;
-      border: 2px solid #2c355d;
-      //border-top-color: #2563eb;
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-  }
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-// Usage with button text
-.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 0.3s ease;
-
-  .pay-button-icon {
-    margin: 0;
-  }
-}