Various improvements

apps/client/src/app/components/user-detail-dialog/user-detail-dialog.component.ts

@@ -106,9 +106,13 @@ export class GfUserDetailDialogComponent implements OnInit {
 
   public getSum() {
     return getSum(
-      this.subscriptionsDataSource.data.map(({ price }) => {
-        return new Big(price);
-      })
+      this.subscriptionsDataSource.data
+        .filter(({ price }) => {
+          return price !== null;
+        })
+        .map(({ price }) => {
+          return new Big(price);
+        })
     ).toNumber();
   }
 

apps/client/src/app/components/user-detail-dialog/user-detail-dialog.html

@@ -128,7 +128,7 @@
       @if (subscriptionsDataSource.data.length > 0) {
         <div class="row">
           <div class="col">
-            <h2 class="h6" i18n>Subscriptions</h2>
+            <h2 class="h6" i18n>Subscription History</h2>
             <div class="overflow-x-auto">
               <table
                 class="gf-table w-100"
@@ -137,7 +137,7 @@
               >
                 <ng-container matColumnDef="createdAt">
                   <th *matHeaderCellDef class="px-1" mat-header-cell>
-                    <ng-container i18n>Created</ng-container>
+                    <ng-container i18n>Creation</ng-container>
                   </th>
                   <td *matCellDef="let element" class="px-1" mat-cell>
                     <gf-value
@@ -170,13 +170,17 @@
                     class="px-1 text-right"
                     mat-cell
                   >
-                    <gf-value
-                      class="d-inline-block justify-content-end"
-                      [isCurrency]="true"
-                      [locale]="data.locale"
-                      [unit]="baseCurrency"
-                      [value]="element.price"
-                    />
+                    @if (element.price === null) {
+                      <span class="text-muted">-</span>
+                    } @else {
+                      <gf-value
+                        class="d-inline-block justify-content-end"
+                        [isCurrency]="true"
+                        [locale]="data.locale"
+                        [unit]="baseCurrency"
+                        [value]="element.price"
+                      />
+                    }
                   </td>
                   <td *matFooterCellDef class="px-1 text-right" mat-footer-cell>
                     <gf-value
@@ -191,7 +195,7 @@
 
                 <ng-container matColumnDef="expiresAt">
                   <th *matHeaderCellDef class="px-1" mat-header-cell>
-                    <ng-container i18n>Expires</ng-container>
+                    <ng-container i18n>Expiration</ng-container>
                   </th>
                   <td *matCellDef="let element" class="px-1" mat-cell>
                     <gf-value