Task/add overview tab to account detail dialog (#7462)

* Add overview tab

* Update changelog

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Added an overview tab to the account detail dialog
+
 ### Changed
 
 - Improved the portfolio summary tab on the home page

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

@@ -48,6 +48,7 @@ import { addIcons } from 'ionicons';
 import {
   albumsOutline,
   cashOutline,
+  readerOutline,
   swapVerticalOutline
 } from 'ionicons/icons';
 import { isNumber } from 'lodash';
@@ -97,7 +98,6 @@ export class GfAccountDetailDialogComponent implements OnInit {
   protected holdings: PortfolioPosition[];
   protected interestInBaseCurrency: number;
   protected interestInBaseCurrencyPrecision = 2;
-  protected isLoadingActivities: boolean;
   protected isLoadingChart: boolean;
   protected name: string | null;
   protected pageIndex = 0;
@@ -148,7 +148,12 @@ export class GfAccountDetailDialogComponent implements OnInit {
         }
       });
 
-    addIcons({ albumsOutline, cashOutline, swapVerticalOutline });
+    addIcons({
+      albumsOutline,
+      cashOutline,
+      readerOutline,
+      swapVerticalOutline
+    });
   }
 
   public ngOnInit() {
@@ -288,8 +293,6 @@ export class GfAccountDetailDialogComponent implements OnInit {
   }
 
   private fetchActivities() {
-    this.isLoadingActivities = true;
-
     this.dataService
       .fetchActivities({
         filters: [{ id: this.data.accountId, type: 'ACCOUNT' }],
@@ -303,8 +306,6 @@ export class GfAccountDetailDialogComponent implements OnInit {
         this.dataSource = new MatTableDataSource(activities);
         this.totalItems = count;
 
-        this.isLoadingActivities = false;
-
         this.changeDetectorRef.markForCheck();
       });
   }

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

@@ -30,7 +30,18 @@
       />
     </div>
 
-    <div class="mb-3 row">
+    <mat-tab-group
+      animationDuration="0ms"
+      class="mb-4"
+      [mat-stretch-tabs]="false"
+    >
+      <mat-tab>
+        <ng-template mat-tab-label>
+          <ion-icon name="reader-outline" />
+          <div class="d-none d-sm-block ml-2" i18n>Overview</div>
+        </ng-template>
+        <div class="container mt-3 p-0">
+          <div class="row w-100">
             <div class="col-6 mb-3">
               <gf-value
                 i18n
@@ -80,20 +91,30 @@
               >
             </div>
             <div class="col-6 mb-3">
-        <gf-value i18n size="medium" [value]="activitiesCount"
+              <gf-value
-          >Activities</gf-value
+                size="medium"
+                [locale]="user?.settings?.locale"
+                [value]="activitiesCount"
               >
+                @if (activitiesCount === 1) {
+                  <ng-container i18n>Activity</ng-container>
+                } @else {
+                  <ng-container i18n>Activities</ng-container>
+                }
+              </gf-value>
             </div>
             <div class="col-6 mb-3">
-        <gf-value i18n size="medium" [value]="platformName">Platform</gf-value>
+              <gf-value
+                i18n
+                size="medium"
+                [locale]="user?.settings?.locale"
+                [value]="platformName"
+                >Platform</gf-value
+              >
             </div>
           </div>
-
+        </div>
-    <mat-tab-group
+      </mat-tab>
-      animationDuration="0ms"
-      [class.d-none]="isLoadingActivities"
-      [mat-stretch-tabs]="false"
-    >
       <mat-tab>
         <ng-template mat-tab-label>
           <ion-icon name="albums-outline" />