@tuki-io/tuki-widgets 0.0.133 → 0.0.134

package/projects/tuki/widgets/di2mt/shared/components/chart-card/chart-card.component.ts

@@ -0,0 +1,76 @@
+import { Component, Input, OnInit } from "@angular/core";
+import { ApexChart, ApexPlotOptions, ApexLegend, ApexDataLabels, ApexNonAxisChartSeries } from "ng-apexcharts";
+
+export type ChartOptions = {
+    series: ApexNonAxisChartSeries;
+    chart: ApexChart;
+    labels: string[];
+    colors: string[];
+    legend: ApexLegend;
+    plotOptions: ApexPlotOptions;
+    dataLabels: ApexDataLabels;
+};
+
+@Component({
+    selector: 'tk-chart-card',
+    templateUrl: './chart-card.component.html',
+    styleUrls: ['./chart-card.component.scss']
+})
+export class ChartCardComponent implements OnInit {
+    @Input() title!: string;
+    @Input() totalUpgraded!: number;
+    @Input() totalNotUpgraded!: number;
+
+    public chartOptions!: ChartOptions;
+
+    ngOnInit() {
+        this.initChartOptions();
+    }
+
+    private initChartOptions(): void {
+        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
+            }
+        };
+    }
+
+    private roundPercentage(value: number): number {
+        return Number((Math.round(value * 100) / 100).toFixed(1));
+    }
+}

package/projects/tuki/widgets/di2mt/shared/components/index.ts

@@ -0,0 +1,6 @@
+export * from './card/card.component';
+export * from './chart-card/chart-card.component';
+export * from './stat-card/stat-card.component';
+export * from './status-list-card/status-list-card.component';
+export * from './summary-card/summary-card.component';
+export * from './table-filters/table-filters.component';

package/projects/tuki/widgets/di2mt/shared/components/stat-card/stat-card.component.html

@@ -0,0 +1,43 @@
+<tk-card [title]="title">
+  <ng-container ngProjectAs="card-content">
+    <div class="card__content-info">
+      <div class="card__content-wrapper">
+        <img width="42" [src]="'assets/icons/' + type + '.png'" alt="" />
+        <div class="card__content-text">
+          <div class="card__content-label">
+            {{ upgradeStatus === 'ready' ? stats?.totalReady : stats?.totalUpgraded }}
+            {{ type === 'user' ? 'Users' : 'Sites' }}</div>
+          <div class="card__content-description">{{ upgradeStatus === 'ready' ? 'Ready to Upgrade' : 'Already Upgraded' }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="card__content-progress-wrapper">
+      <div class="card__content-progress">
+        <div class="card__content-progress-label">
+          <span>{{ readyPercentage }}%</span>
+          <span>From all {{ stats?.total }} {{ type === 'user' ? 'users' : 'sites' }}</span>
+        </div>
+        <div class="card__content-progress-bar">
+          <div
+            class="card__content-progress-bar-fill ready"
+            [class.already]="upgradeStatus === 'already'"
+            [style.width.%]="readyPercentage"
+          ></div>
+        </div>
+      </div>
+      <div *ngIf="upgradeStatus === 'already'" class="card__content-progress">
+        <div class="card__content-progress-label">
+          <span>{{ upgradedPercentage }}%</span>
+          <span>From all {{ stats?.totalReady }} ready {{ type === 'user' ? 'users' : 'sites' }}</span>
+        </div>
+        <div class="card__content-progress-bar">
+          <div
+            class="card__content-progress-bar-fill ready"
+            [class.already]="upgradeStatus === 'already'"
+            [style.width.%]="upgradedPercentage"
+          ></div>
+        </div>
+      </div>
+    </div>
+  </ng-container>
+</tk-card>

package/projects/tuki/widgets/di2mt/shared/components/stat-card/stat-card.component.scss

@@ -0,0 +1,74 @@
+: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: 0.25rem;
+
+  .card__content-label {
+    font-size: 20px;
+  }
+
+  .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: 0.5rem;
+}
+
+.card__content-progress-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.card__content-progress {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  font-size: 14px;
+
+  .card__content-progress-label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.05rem;
+  }
+
+  .card__content-progress-bar {
+    background-color: #ededed;
+    border-radius: 10rem;
+    .card__content-progress-bar-fill {
+      height: 10px;
+      border-radius: inherit;
+    }
+  }
+}
+
+.ready {
+  background-color: #0A78CC;
+}
+
+.already {
+  background-color: #16A693;
+}

package/projects/tuki/widgets/di2mt/shared/components/stat-card/stat-card.component.ts

@@ -0,0 +1,44 @@
+import { Component, Input, OnInit } from "@angular/core";
+import { SitesUpgradeReadiness, SitesUpgradeSummary, UsersUpgradeReadiness, UsersUpgradeSummary } from "../../../widgets/upgrade-overview/types/upgrade-overview";
+
+@Component({
+    selector: 'tk-stat-card',
+    templateUrl: './stat-card.component.html',
+    styleUrls: ['./stat-card.component.scss']
+})
+export class StatCardComponent implements OnInit {
+    @Input() title!: string;
+    @Input() type!: 'site' | 'user';
+    @Input() readinessStats: any;
+    @Input() upgradeStatus!: 'ready' | 'already';
+
+    stats: any;
+
+    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;
+    }
+}

package/projects/tuki/widgets/di2mt/shared/components/status-list-card/status-list-card.component.html

@@ -0,0 +1,57 @@
+<tk-card [title]="title">
+    <ng-container ngProjectAs="card-content">
+        <div class="card__list-wrapper">
+            <div class="card__list-item" *ngFor="let item of items; trackBy: trackByFn">
+                <img *ngIf="item.status" src="{{ 'assets/icons/check_icon.png' }}" alt="">
+                <img *ngIf="!item.status" src="{{ 'assets/icons/warning_icon.png' }}" alt="">
+                <div 
+                    class="card__item-info"
+                    (mouseover)="onMouseOverItemText($event, item.label)"
+                    (mouseleave)="onMouseLeaveItemText($event, item.label)">
+                    <div 
+                        class="card__item-text-wrapper">
+                        <div class="card__item-text"
+                            [matTooltip]="item.tooltip"
+                            [matTooltipPosition]="'above'">
+                            <div class="card__item-label">
+                                {{ item.label }}
+                            </div>
+                            <div class="card__item-description">
+                                {{ item.description }}
+                            </div>
+                        </div>
+                        <div
+                            class="card__item-link-wrapper"
+                            *ngIf="item.link.href && hoveredItemLabel === item.label && displayLink"
+                            [matTooltip]="item.link.tooltip"
+                            [matTooltipPosition]="'right'">
+                            <mat-icon>open_in_new</mat-icon>
+                        </div>
+                    </div>
+                    <div
+                        *ngIf="title.includes('Site')"
+                        class="card__item-stats"
+                        (mouseover)="onMouseOverItemStats($event, item.label)"
+                        (mouseleave)="onMouseLeaveItemStats($event, item.label)">
+                        <div class="card__item-numbers">
+                            {{ item.value }}/{{ item.totalSites }}
+                        </div>
+                        <div class="card__item-numbers-description">
+                            Ready/All
+                        </div>
+
+                        <div class="card__item-stats-dialog" [class.fade-in]="hoveredItemLabel === item.label && displayStatsDialog">
+                            <div class="card__item-stats-dialog-item">
+                                <span class="name">Atlanta</span>
+                                <div class="status">
+                                    <span class="indicator"></span>
+                                    <span class="status-text">Ready</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </ng-container>
+</tk-card>

package/projects/tuki/widgets/di2mt/shared/components/status-list-card/status-list-card.component.scss

@@ -0,0 +1,187 @@
+: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 0.3s ease-in-out;
+  padding: 0.75rem;
+  border-radius: 1rem;
+
+  &: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: 0.05rem;
+  // font-weight: 400;
+
+  .card__item-label {
+    font-size: 18px;
+  }
+
+  .card__item-description {
+    font-size: 14px;
+  }
+}
+
+/* styles.css or styles.scss */
+::ng-deep {
+  .mat-tooltip {
+    // background: rgb(0, 102, 198) !important;
+    background: linear-gradient(
+      90deg,
+      rgb(0, 0, 0) 0%,
+      rgb(73, 73, 73) 100%
+    ) !important;
+    color: #fff !important;
+    // background: rgb(0, 0, 0) !important;
+    // color: #fff !important;
+    font-size: 14px !important;
+    border-radius: 1rem !important;
+    padding: 0.75rem !important;
+    line-height: 1.25rem;
+  }
+}
+
+.card__item-link-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.4rem;
+  border-radius: 0.45rem;
+  background-color: #eefaff;
+  // color: #41a5cc;
+  // background-color: #fff5ea;
+  // color: #e77400;
+  background: linear-gradient(90deg, #41a5cc, #95ea8b);
+
+  /* Clip background to text */
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+
+  /* For some browsers */
+  background-clip: text;
+  color: transparent;
+
+  cursor: pointer;
+  transition: all 0.3s ease-in-out;
+
+  &:hover {
+    background: linear-gradient(90deg, #41a5cc, #95ea8b);
+    color: white;
+    -webkit-background-clip: unset;
+    -webkit-text-fill-color: unset;
+    background-clip: unset;
+    transform: scale(0.95);
+  }
+}
+
+.card__item-stats {
+  right: 0;
+  position: absolute;
+  text-align: right;
+  cursor: pointer;
+
+  .card__item-numbers {
+    font-size: 28px;
+  }
+  .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: rgb(255, 255, 255);
+  padding: 1rem;
+  border-radius: .5rem;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  // display: none;
+  min-width: 200px;
+  max-width: 300px;
+  border: 1px solid #ddd;
+  opacity: 0;
+  transform: translateX(-100%) translateY(-50%) scale(0.95);
+  transition: opacity 0.3s ease-in-out;
+}
+
+.card__item-stats-dialog-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 2.5rem;
+
+  span {
+    font-size: 18px;
+    color: #555;
+  }
+
+  .status {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  
+  .status-text {
+    font-weight: 600;
+    color: #777;
+    font-size: 14px;
+  }
+
+  .indicator {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: #1170cf; /* Default color */
+  }
+}
+
+.fade-in {
+  animation: fadeIn 0.3s forwards;
+}
+
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+    transform: translateX(calc(-100% - 1.5rem)) translateY(-50%) scale(1);
+  }
+}

package/projects/tuki/widgets/di2mt/shared/components/status-list-card/status-list-card.component.ts

@@ -0,0 +1,41 @@
+import { Component, Input } from "@angular/core";
+
+@Component({
+    selector: "tk-status-list-card",
+    templateUrl: "./status-list-card.component.html",
+    styleUrls: ["./status-list-card.component.scss"]
+})
+export class StatusListCardComponent {
+    @Input() title!: string;
+    @Input() items!: any;
+
+    displayLink: boolean = false;
+    hoveredItemLabel!: string;
+    
+    displayStatsDialog: boolean = false;
+
+    onMouseOverItemText(event: Event, label: string): void {
+        this.hoveredItemLabel = label;
+        this.displayLink = true;
+    }
+
+    onMouseLeaveItemText(event: Event, label: string): void {
+        this.hoveredItemLabel = label;
+        this.displayLink = false;
+    }
+
+    onMouseOverItemStats(event: Event, label: string): void {
+        event.stopPropagation();
+        this.hoveredItemLabel = label;
+        this.displayStatsDialog = true;
+    }
+
+    onMouseLeaveItemStats(event: Event, label: string): void {
+        this.hoveredItemLabel = label;
+        this.displayStatsDialog = false;
+    }
+
+    trackByFn(index: number): number {
+        return index;
+    }
+}

package/projects/tuki/widgets/di2mt/shared/components/summary-card/summary-card.component.html

@@ -0,0 +1,12 @@
+<article class="summary-card">
+    <header class="summary-card__header">
+        <h2>{{ value }}</h2>
+    </header>
+    <div class="summary__card-description">
+        <span>{{ description }}</span>
+        <div class="summary__card-status-wrapper">
+            <span class="summary__card-status-indicator" [ngClass]="getStatusClass(status)"></span>
+          <span [ngClass]="{'status-ready': status === 'ready'}">{{ status }}</span>
+        </div>
+    </div>
+</article>

package/projects/tuki/widgets/di2mt/shared/components/summary-card/summary-card.component.scss

@@ -0,0 +1,78 @@
+@import "../../../styles/variables.scss";
+
+:host {
+  display: block;
+  box-sizing: border-box;
+  flex: 1;
+}
+
+.summary-card {
+  font-family: $main-font;
+  background-color: white;
+  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: 0.25rem;
+}
+
+.summary-card__header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  h2 {
+    font-size: 28px;
+    font-weight: 500;
+    margin: 0;
+  }
+}
+
+.summary__card-status-wrapper {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  gap: 0.5rem;
+
+  .summary__card-status-indicator {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+
+    &.ready {
+      background-color: #1c3893;
+    }
+
+    &.partial-ready {
+      background-color: #f8cd00;
+    }
+
+    &.not-ready {
+      background-color: #9e9e9e;
+    }
+
+    &.completed {
+      background-color: #1d805f;
+    }
+
+    &.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;
+}

package/projects/tuki/widgets/di2mt/shared/components/summary-card/summary-card.component.ts

@@ -0,0 +1,27 @@
+import { Component, Input } from "@angular/core";
+
+@Component({
+    selector: 'tk-summary-card',
+    templateUrl: './summary-card.component.html',
+    styleUrls: ['./summary-card.component.scss']
+})
+export class SummaryCardComponent {
+    @Input() value: number = 41;
+    @Input() status: string = 'Ready';
+    @Input() description!: string;
+
+    getStatusClass(status: string): string {
+        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';
+        }
+    }
+}

package/projects/tuki/widgets/di2mt/shared/components/table-filters/table-filters.component.html

@@ -0,0 +1,28 @@
+<div class="filters-wrapper">
+    <ng-container *ngFor="let filter of filters">
+        <div class="filter">
+            <ng-container [ngSwitch]="filter.type">
+                <!-- Search Input with Material Design -->
+                <mat-form-field *ngSwitchCase="'search'" appearance="outline" class="search-field custom-mat-form-field">
+<!--                    <mat-label>{{ filter.placeholder }}</mat-label>-->
+                    <input matInput
+                           [placeholder]="filter.placeholder"
+                           (input)="onFilter(filter.columnKey, $event)">
+                    <mat-icon matPrefix class="search-icon">
+                        <!-- <img src="assets/icons/search_icon.png" alt="Search" /> -->
+                    </mat-icon>
+                </mat-form-field>
+
+                <!-- Select Dropdown with Material Design -->
+                <mat-form-field *ngSwitchCase="'select'" appearance="outline" class="select-field custom-mat-form-field">
+                    <mat-label>{{ filter.placeholder }}</mat-label>
+                    <mat-select (selectionChange)="onFilter(filter.columnKey, $event)">
+                        <mat-option *ngFor="let option of filter.options" [value]="option.value">
+                            {{ option.label }}
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
+            </ng-container>
+        </div>
+    </ng-container>
+</div>