@tuki-io/tuki-widgets 0.0.73 → 0.0.75

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

@@ -0,0 +1,38 @@
+:host {
+    width: 100%;
+    display: block;
+    height: 100%;
+    box-sizing: border-box;
+}
+
+.chart-container {
+    width: 100%;
+    // height: 100%;
+    height: 220px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 0;
+    
+    apx-chart {
+        width: 100%;
+        max-width: 400px;
+    }
+}
+
+// Override ApexCharts legend styles to match the design
+:host ::ng-deep .apexcharts-legend {
+    display: flex !important;
+    flex-direction: column !important;
+    justify-content: center !important;
+    // height: 100% !important;
+    
+    .apexcharts-legend-marker {
+        border-radius: 2px !important;
+    }
+    
+    .apexcharts-legend-text {
+        font-weight: 500 !important;
+        color: #333 !important;
+    }
+}

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

@@ -0,0 +1,71 @@
+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", "#2E8B57"],
+            legend: {
+                position: "right",
+                offsetY: 0,
+                fontSize: "14px",
+                markers: {
+                    width: 16,
+                    height: 16,
+                    radius: 2
+                },
+                itemMargin: {
+                    horizontal: 20,
+                    vertical: 2
+                },
+                formatter: function (seriesName, opts) {
+                    return seriesName + " " + ((opts.w.globals.series[opts.seriesIndex] / (opts.w.globals.series[0] + opts.w.globals.series[1]) * 100) >> 0) + "%";
+                }
+            },
+            plotOptions: {
+                pie: {
+                    donut: {
+                        size: "75%"
+                    }
+                }
+            },
+            dataLabels: {
+                enabled: false
+            }
+        };
+    }
+}

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,57 @@
+<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 class="card__content-wrapper">
+        <img
+          *ngIf="upgradeStatus === 'ready'"
+          height="48"
+          src="assets/icons/ready_to_upgrade.png"
+          alt=""
+        />
+        <img
+          *ngIf="upgradeStatus === 'already'"
+          height="48"
+          src="assets/icons/already_upgraded.png"
+          alt=""
+        />
+      </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: #1170cf;
+}
+
+.already {
+  background-color: #1d805f;
+}

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,28 @@
+<tk-card [title]="title">
+    <ng-container ngProjectAs="card-content">
+        <div class="card__list-wrapper">
+            <div class="card__list-item" *ngFor="let item of items">
+                <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">
+                    <div class="card__item-text">
+                        <div class="card__item-label">
+                            {{ item.label }}
+                        </div>
+                        <div class="card__item-description">
+                            {{ item.description }}
+                        </div>
+                    </div>
+                    <div *ngIf="title.includes('Site')" class="card__item-stats">
+                        <div class="card__item-numbers">
+                            {{ item.value }}/{{ item.totalSites }}
+                        </div>
+                        <div class="card__item-numbers-description">
+                            Ready/All
+                        </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,55 @@
+:host {
+  color: #333;
+  display: block;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.card__list-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.card__list-item {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.card__item-info {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  width: 100%;
+}
+
+.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;
+  }
+}
+
+.card__item-stats {
+  right: 0;
+  position: absolute;
+  text-align: right;
+
+  .card__item-numbers {
+    font-size: 28px;
+  }
+  .card__item-numbers-description {
+    font-size: 14px;
+  }
+}

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

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

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,79 @@
+@import "../../../styles/variables.scss";
+
+:host {
+  display: block;
+  height: 100%;
+  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;
+    }
+  }
+}
+.status-ready {
+  color: #1170CF;
+}
+
+.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>