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,70 +30,91 @@
       />
     </div>
 
-    <div class="mb-3 row">
-      <div class="col-6 mb-3">
-        <gf-value
-          i18n
-          size="medium"
-          [isCurrency]="true"
-          [locale]="user?.settings?.locale"
-          [precision]="balancePrecision"
-          [unit]="currency"
-          [value]="balance"
-          >Cash Balance</gf-value
-        >
-      </div>
-      <div class="col-6 mb-3">
-        <gf-value
-          i18n
-          size="medium"
-          [isCurrency]="true"
-          [locale]="user?.settings?.locale"
-          [precision]="equityPrecision"
-          [unit]="currency"
-          [value]="equity"
-          >Equity</gf-value
-        >
-      </div>
-      <div class="col-6 mb-3">
-        <gf-value
-          i18n
-          size="medium"
-          [isCurrency]="true"
-          [locale]="user?.settings?.locale"
-          [precision]="interestInBaseCurrencyPrecision"
-          [unit]="user?.settings?.baseCurrency"
-          [value]="interestInBaseCurrency"
-          >Interest</gf-value
-        >
-      </div>
-      <div class="col-6 mb-3">
-        <gf-value
-          i18n
-          size="medium"
-          [isCurrency]="true"
-          [locale]="user?.settings?.locale"
-          [precision]="dividendInBaseCurrencyPrecision"
-          [unit]="user?.settings?.baseCurrency"
-          [value]="dividendInBaseCurrency"
-          >Dividend</gf-value
-        >
-      </div>
-      <div class="col-6 mb-3">
-        <gf-value i18n size="medium" [value]="activitiesCount"
-          >Activities</gf-value
-        >
-      </div>
-      <div class="col-6 mb-3">
-        <gf-value i18n size="medium" [value]="platformName">Platform</gf-value>
-      </div>
-    </div>
-
     <mat-tab-group
       animationDuration="0ms"
-      [class.d-none]="isLoadingActivities"
+      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
+                size="medium"
+                [isCurrency]="true"
+                [locale]="user?.settings?.locale"
+                [precision]="balancePrecision"
+                [unit]="currency"
+                [value]="balance"
+                >Cash Balance</gf-value
+              >
+            </div>
+            <div class="col-6 mb-3">
+              <gf-value
+                i18n
+                size="medium"
+                [isCurrency]="true"
+                [locale]="user?.settings?.locale"
+                [precision]="equityPrecision"
+                [unit]="currency"
+                [value]="equity"
+                >Equity</gf-value
+              >
+            </div>
+            <div class="col-6 mb-3">
+              <gf-value
+                i18n
+                size="medium"
+                [isCurrency]="true"
+                [locale]="user?.settings?.locale"
+                [precision]="interestInBaseCurrencyPrecision"
+                [unit]="user?.settings?.baseCurrency"
+                [value]="interestInBaseCurrency"
+                >Interest</gf-value
+              >
+            </div>
+            <div class="col-6 mb-3">
+              <gf-value
+                i18n
+                size="medium"
+                [isCurrency]="true"
+                [locale]="user?.settings?.locale"
+                [precision]="dividendInBaseCurrencyPrecision"
+                [unit]="user?.settings?.baseCurrency"
+                [value]="dividendInBaseCurrency"
+                >Dividend</gf-value
+              >
+            </div>
+            <div class="col-6 mb-3">
+              <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"
+                [locale]="user?.settings?.locale"
+                [value]="platformName"
+                >Platform</gf-value
+              >
+            </div>
+          </div>
+        </div>
+      </mat-tab>
       <mat-tab>
         <ng-template mat-tab-label>
           <ion-icon name="albums-outline" />