From 404ef252c7c1e38baa6c7c8ef085aead26772025 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Wed, 29 Apr 2026 20:17:39 +0200
Subject: [PATCH] Task/improve coupon management in admin control panel (#6794)

* Improve coupon management
---
 .../access-table/access-table.component.html  |   4 +-
 .../app/components/admin-jobs/admin-jobs.html |   4 +-
 .../admin-market-data/admin-market-data.html  |   4 +-
 .../admin-overview.component.ts               |  66 ++++--
 .../admin-overview/admin-overview.html        | 220 +++++++++++-------
 .../components/admin-users/admin-users.html   |   4 +-
 6 files changed, 192 insertions(+), 110 deletions(-)

diff --git a/apps/client/src/app/components/access-table/access-table.component.html b/apps/client/src/app/components/access-table/access-table.component.html
index 4283d7860..8ba906e0f 100644
--- a/apps/client/src/app/components/access-table/access-table.component.html
+++ b/apps/client/src/app/components/access-table/access-table.component.html
@@ -53,9 +53,9 @@
     </ng-container>
 
     <ng-container matColumnDef="actions" stickyEnd>
-      <th *matHeaderCellDef class="px-1 text-center" mat-header-cell></th>
+      <th *matHeaderCellDef class="px-1 text-right" mat-header-cell></th>
 
-      <td *matCellDef="let element" class="px-1 text-center" mat-cell>
+      <td *matCellDef="let element" class="px-1 text-right" mat-cell>
         <button
           class="mx-1 no-min-width px-2"
           mat-button
diff --git a/apps/client/src/app/components/admin-jobs/admin-jobs.html b/apps/client/src/app/components/admin-jobs/admin-jobs.html
index cff80498c..1570ce82b 100644
--- a/apps/client/src/app/components/admin-jobs/admin-jobs.html
+++ b/apps/client/src/app/components/admin-jobs/admin-jobs.html
@@ -188,7 +188,7 @@
         </ng-container>
 
         <ng-container matColumnDef="actions" stickyEnd>
-          <th *matHeaderCellDef class="px-1 py-2" mat-header-cell>
+          <th *matHeaderCellDef class="px-1 py-2 text-right" mat-header-cell>
             <button
               class="mx-1 no-min-width px-2"
               mat-button
@@ -203,7 +203,7 @@
               </button>
             </mat-menu>
           </th>
-          <td *matCellDef="let element" class="px-1 py-2" mat-cell>
+          <td *matCellDef="let element" class="px-1 py-2 text-right" mat-cell>
             <button
               class="mx-1 no-min-width px-2"
               mat-button
diff --git a/apps/client/src/app/components/admin-market-data/admin-market-data.html b/apps/client/src/app/components/admin-market-data/admin-market-data.html
index 156ae0f5f..28745300d 100644
--- a/apps/client/src/app/components/admin-market-data/admin-market-data.html
+++ b/apps/client/src/app/components/admin-market-data/admin-market-data.html
@@ -206,7 +206,7 @@
           </ng-container>
 
           <ng-container matColumnDef="actions" stickyEnd>
-            <th *matHeaderCellDef class="px-1 text-center" mat-header-cell>
+            <th *matHeaderCellDef class="px-1 text-right" mat-header-cell>
               <button
                 class="mx-1 no-min-width px-2"
                 mat-button
@@ -243,7 +243,7 @@
                 </button>
               </mat-menu>
             </th>
-            <td *matCellDef="let element" class="px-1 text-center" mat-cell>
+            <td *matCellDef="let element" class="px-1 text-right" mat-cell>
               <button
                 class="mx-1 no-min-width px-2"
                 mat-button
diff --git a/apps/client/src/app/components/admin-overview/admin-overview.component.ts b/apps/client/src/app/components/admin-overview/admin-overview.component.ts
index 9b92c5b11..07977b367 100644
--- a/apps/client/src/app/components/admin-overview/admin-overview.component.ts
+++ b/apps/client/src/app/components/admin-overview/admin-overview.component.ts
@@ -24,6 +24,7 @@ import { NotificationService } from '@ghostfolio/ui/notifications';
 import { AdminService, DataService } from '@ghostfolio/ui/services';
 import { GfValueComponent } from '@ghostfolio/ui/value';
 
+import { Clipboard, ClipboardModule } from '@angular/cdk/clipboard';
 import { CommonModule } from '@angular/common';
 import {
   ChangeDetectorRef,
@@ -42,6 +43,7 @@ import {
   MatSlideToggleModule
 } from '@angular/material/slide-toggle';
 import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { RouterModule } from '@angular/router';
 import { IonIcon } from '@ionic/angular/standalone';
 import {
@@ -62,6 +64,7 @@ import ms, { StringValue } from 'ms';
 
 @Component({
   imports: [
+    ClipboardModule,
     CommonModule,
     FormsModule,
     GfValueComponent,
@@ -72,6 +75,7 @@ import ms, { StringValue } from 'ms';
     MatSelectModule,
     MatSnackBarModule,
     MatSlideToggleModule,
+    MatTableModule,
     ReactiveFormsModule,
     RouterModule
   ],
@@ -82,7 +86,8 @@ import ms, { StringValue } from 'ms';
 export class GfAdminOverviewComponent implements OnInit {
   public activitiesCount: number;
   public couponDuration: StringValue = '14 days';
-  public coupons: Coupon[];
+  public couponsDataSource = new MatTableDataSource<Coupon>();
+  public couponsDisplayedColumns = ['code', 'duration', 'actions'];
   public hasPermissionForSubscription: boolean;
   public hasPermissionForSystemMessage: boolean;
   public hasPermissionToSyncDemoUserAccount: boolean;
@@ -99,6 +104,7 @@ export class GfAdminOverviewComponent implements OnInit {
     private adminService: AdminService,
     private cacheService: CacheService,
     private changeDetectorRef: ChangeDetectorRef,
+    private clipboard: Clipboard,
     private dataService: DataService,
     private destroyRef: DestroyRef,
     private notificationService: NotificationService,
@@ -188,14 +194,14 @@ export class GfAdminOverviewComponent implements OnInit {
   }
 
   public onAddCoupon() {
-    const coupons = [
-      ...this.coupons,
-      {
-        code: `${ghostfolioPrefix}${this.generateCouponCode(14)}`,
-        duration: this.couponDuration
-      }
-    ];
-    this.putAdminSetting({ key: PROPERTY_COUPONS, value: coupons });
+    const newCoupon: Coupon = {
+      code: `${ghostfolioPrefix}${this.generateCouponCode(14)}`,
+      duration: this.couponDuration
+    };
+
+    const coupons = [...this.couponsDataSource.data, newCoupon];
+
+    this.saveCoupons({ coupons, codeToCopy: newCoupon.code });
   }
 
   public onChangeCouponDuration(aCouponDuration: StringValue) {
@@ -205,10 +211,11 @@ export class GfAdminOverviewComponent implements OnInit {
   public onDeleteCoupon(aCouponCode: string) {
     this.notificationService.confirm({
       confirmFn: () => {
-        const coupons = this.coupons.filter((coupon) => {
-          return coupon.code !== aCouponCode;
+        const coupons = this.couponsDataSource.data.filter(({ code }) => {
+          return code !== aCouponCode;
         });
-        this.putAdminSetting({ key: PROPERTY_COUPONS, value: coupons });
+
+        this.saveCoupons({ coupons });
       },
       confirmType: ConfirmationDialogType.Warn,
       title: $localize`Do you really want to delete this coupon?`
@@ -307,9 +314,13 @@ export class GfAdminOverviewComponent implements OnInit {
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(({ activitiesCount, settings, userCount, version }) => {
         this.activitiesCount = activitiesCount;
-        this.coupons = (settings[PROPERTY_COUPONS] as Coupon[]) ?? [];
+
+        this.couponsDataSource.data =
+          (settings[PROPERTY_COUPONS] as Coupon[]) ?? [];
+
         this.isDataGatheringEnabled =
           settings[PROPERTY_IS_DATA_GATHERING_ENABLED] === false ? false : true;
+
         this.systemMessage = settings[PROPERTY_SYSTEM_MESSAGE] as SystemMessage;
         this.userCount = userCount;
         this.version = version;
@@ -343,4 +354,33 @@ export class GfAdminOverviewComponent implements OnInit {
         }, 300);
       });
   }
+
+  private saveCoupons({
+    codeToCopy,
+    coupons
+  }: {
+    codeToCopy?: string;
+    coupons: Coupon[];
+  }) {
+    this.dataService
+      .putAdminSetting(PROPERTY_COUPONS, {
+        value: JSON.stringify(coupons)
+      })
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(() => {
+        this.couponsDataSource.data = coupons;
+
+        if (codeToCopy) {
+          this.clipboard.copy(codeToCopy);
+
+          this.snackBar.open(
+            '✅ ' + $localize`${codeToCopy} has been copied to the clipboard`,
+            undefined,
+            { duration: ms('3 seconds') }
+          );
+        }
+
+        this.changeDetectorRef.markForCheck();
+      });
+  }
 }
diff --git a/apps/client/src/app/components/admin-overview/admin-overview.html b/apps/client/src/app/components/admin-overview/admin-overview.html
index 5514c57d0..bccedd251 100644
--- a/apps/client/src/app/components/admin-overview/admin-overview.html
+++ b/apps/client/src/app/components/admin-overview/admin-overview.html
@@ -113,95 +113,6 @@
               </div>
             </div>
           }
-          @if (hasPermissionForSubscription) {
-            <div class="d-flex my-3 subscription">
-              <div class="w-50" i18n>Coupons</div>
-              <div class="w-50">
-                <table>
-                  @for (coupon of coupons; track coupon) {
-                    <tr>
-                      <td>
-                        <gf-value
-                          class="text-monospace"
-                          [enableCopyToClipboardButton]="true"
-                          [value]="coupon.code"
-                        />
-                      </td>
-                      <td class="pl-2 text-right">
-                        {{ formatStringValue(coupon.duration) }}
-                      </td>
-                      <td>
-                        <button
-                          class="mx-1 no-min-width px-2"
-                          mat-button
-                          [matMenuTriggerFor]="couponActionsMenu"
-                          (click)="$event.stopPropagation()"
-                        >
-                          <ion-icon name="ellipsis-horizontal" />
-                        </button>
-                        <mat-menu
-                          #couponActionsMenu="matMenu"
-                          class="h-100 mx-1 no-min-width px-2"
-                          xPosition="before"
-                        >
-                          <button
-                            mat-menu-item
-                            (click)="onDeleteCoupon(coupon.code)"
-                          >
-                            <span class="align-items-center d-flex">
-                              <ion-icon class="mr-2" name="trash-outline" />
-                              <span i18n>Delete</span>
-                            </span>
-                          </button>
-                        </mat-menu>
-                      </td>
-                    </tr>
-                  }
-                </table>
-                <div class="mt-2">
-                  <form #couponForm="ngForm" class="align-items-center d-flex">
-                    <mat-form-field
-                      appearance="outline"
-                      class="mr-2 without-hint"
-                    >
-                      <mat-select
-                        name="duration"
-                        [value]="couponDuration"
-                        (selectionChange)="onChangeCouponDuration($event.value)"
-                      >
-                        <mat-option value="7 days">{{
-                          formatStringValue('7 days')
-                        }}</mat-option>
-                        <mat-option value="14 days">{{
-                          formatStringValue('14 days')
-                        }}</mat-option>
-                        <mat-option value="30 days">{{
-                          formatStringValue('30 days')
-                        }}</mat-option>
-                        <mat-option value="90 days">{{
-                          formatStringValue('90 days')
-                        }}</mat-option>
-                        <mat-option value="180 days">{{
-                          formatStringValue('180 days')
-                        }}</mat-option>
-                        <mat-option value="1 year">{{
-                          formatStringValue('1 year')
-                        }}</mat-option>
-                      </mat-select>
-                    </mat-form-field>
-                    <button
-                      class="mt-1"
-                      color="primary"
-                      mat-flat-button
-                      (click)="onAddCoupon()"
-                    >
-                      <span i18n>Add</span>
-                    </button>
-                  </form>
-                </div>
-              </div>
-            </div>
-          }
           <div class="d-flex my-3">
             <div class="w-50" i18n>Housekeeping</div>
             <div class="w-50">
@@ -228,4 +139,135 @@
       </mat-card>
     </div>
   </div>
+
+  @if (hasPermissionForSubscription) {
+    <div class="row">
+      <div class="col">
+        <mat-card appearance="outlined">
+          <mat-card-header>
+            <mat-card-title i18n>Coupons</mat-card-title>
+          </mat-card-header>
+          <mat-card-content>
+            <div class="overflow-x-auto">
+              <table
+                class="gf-table w-100"
+                mat-table
+                [dataSource]="couponsDataSource"
+              >
+                <ng-container matColumnDef="code">
+                  <th *matHeaderCellDef class="px-1" mat-header-cell>
+                    <ng-container i18n>Code</ng-container>
+                  </th>
+                  <td *matCellDef="let element" class="px-1" mat-cell>
+                    <gf-value
+                      class="text-monospace"
+                      [enableCopyToClipboardButton]="true"
+                      [value]="element.code"
+                    />
+                  </td>
+                </ng-container>
+
+                <ng-container matColumnDef="duration">
+                  <th *matHeaderCellDef class="px-1 text-right" mat-header-cell>
+                    <ng-container i18n>Duration</ng-container>
+                  </th>
+                  <td
+                    *matCellDef="let element"
+                    class="px-1 text-right"
+                    mat-cell
+                  >
+                    {{ formatStringValue(element.duration) }}
+                  </td>
+                </ng-container>
+
+                <ng-container matColumnDef="actions" stickyEnd>
+                  <th
+                    *matHeaderCellDef
+                    class="px-1 text-right"
+                    mat-header-cell
+                  ></th>
+                  <td
+                    *matCellDef="let element"
+                    class="px-1 text-right"
+                    mat-cell
+                  >
+                    <button
+                      class="mx-1 no-min-width px-2"
+                      mat-button
+                      [matMenuTriggerFor]="couponActionsMenu"
+                      (click)="$event.stopPropagation()"
+                    >
+                      <ion-icon name="ellipsis-horizontal" />
+                    </button>
+                    <mat-menu
+                      #couponActionsMenu="matMenu"
+                      class="no-max-width"
+                      xPosition="before"
+                    >
+                      <button
+                        mat-menu-item
+                        (click)="onDeleteCoupon(element.code)"
+                      >
+                        <span class="align-items-center d-flex">
+                          <ion-icon class="mr-2" name="trash-outline" />
+                          <span i18n>Delete</span>
+                        </span>
+                      </button>
+                    </mat-menu>
+                  </td>
+                </ng-container>
+
+                <tr
+                  *matHeaderRowDef="couponsDisplayedColumns"
+                  mat-header-row
+                ></tr>
+                <tr
+                  *matRowDef="let row; columns: couponsDisplayedColumns"
+                  mat-row
+                ></tr>
+              </table>
+            </div>
+          </mat-card-content>
+          <mat-card-actions align="end">
+            <form #couponForm="ngForm" class="align-items-stretch d-flex">
+              <mat-form-field appearance="outline" class="mr-1 without-hint">
+                <mat-select
+                  name="duration"
+                  [value]="couponDuration"
+                  (selectionChange)="onChangeCouponDuration($event.value)"
+                >
+                  <mat-option value="7 days">{{
+                    formatStringValue('7 days')
+                  }}</mat-option>
+                  <mat-option value="14 days">{{
+                    formatStringValue('14 days')
+                  }}</mat-option>
+                  <mat-option value="30 days">{{
+                    formatStringValue('30 days')
+                  }}</mat-option>
+                  <mat-option value="90 days">{{
+                    formatStringValue('90 days')
+                  }}</mat-option>
+                  <mat-option value="180 days">{{
+                    formatStringValue('180 days')
+                  }}</mat-option>
+                  <mat-option value="1 year">{{
+                    formatStringValue('1 year')
+                  }}</mat-option>
+                </mat-select>
+              </mat-form-field>
+              <button
+                class="h-auto rounded"
+                color="primary"
+                mat-flat-button
+                (click)="onAddCoupon()"
+              >
+                <ng-container i18n>Add</ng-container>
+              </button>
+            </form>
+          </mat-card-actions>
+        </mat-card>
+      </div>
+    </div>
+  }
 </div>
diff --git a/apps/client/src/app/components/admin-users/admin-users.html b/apps/client/src/app/components/admin-users/admin-users.html
index 0f9789feb..529703d9e 100644
--- a/apps/client/src/app/components/admin-users/admin-users.html
+++ b/apps/client/src/app/components/admin-users/admin-users.html
@@ -198,12 +198,12 @@
           <ng-container matColumnDef="actions" stickyEnd>
             <th
               *matHeaderCellDef
-              class="mat-mdc-header-cell px-1 py-2"
+              class="mat-mdc-header-cell px-1 py-2 text-right"
               mat-header-cell
             ></th>
             <td
               *matCellDef="let element"
-              class="mat-mdc-cell px-1 py-2"
+              class="mat-mdc-cell px-1 py-2 text-right"
               mat-cell
             >
               <button