Feature/extend account detail dialog by cash balance and equity (#1978)

* Add cash balance and equity

* Update changelog

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Added the cash balance and the value of equity to the account detail dialog
 - Added a connection timeout to the environment variable `DATABASE_URL`
 - Introduced the _Open Startup_ (`/open`) page with aggregated key metrics including uptime
 

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

@@ -13,7 +13,9 @@ import { downloadAsFile } from '@ghostfolio/common/helper';
 import { User } from '@ghostfolio/common/interfaces';
 import { OrderWithAccount } from '@ghostfolio/common/types';
 import { translate } from '@ghostfolio/ui/i18n';
+import Big from 'big.js';
 import { format, parseISO } from 'date-fns';
+import { isNumber } from 'lodash';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -28,6 +30,9 @@ import { AccountDetailDialogParams } from './interfaces/interfaces';
 })
 export class AccountDetailDialog implements OnDestroy, OnInit {
   public accountType: string;
+  public balance: number;
+  public currency: string;
+  public equity: number;
   public name: string;
   public orders: OrderWithAccount[];
   public platformName: string;
@@ -58,14 +63,33 @@ export class AccountDetailDialog implements OnDestroy, OnInit {
     this.dataService
       .fetchAccount(this.data.accountId)
       .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(({ accountType, name, Platform, valueInBaseCurrency }) => {
-        this.accountType = translate(accountType);
-        this.name = name;
-        this.platformName = Platform?.name ?? '-';
-        this.valueInBaseCurrency = valueInBaseCurrency;
+      .subscribe(
+        ({
+          accountType,
+          balance,
+          currency,
+          name,
+          Platform,
+          value,
+          valueInBaseCurrency
+        }) => {
+          this.accountType = translate(accountType);
+          this.balance = balance;
+          this.currency = currency;
 
-        this.changeDetectorRef.markForCheck();
-      });
+          if (isNumber(balance) && isNumber(value)) {
+            this.equity = new Big(value).minus(balance).toNumber();
+          } else {
+            this.equity = null;
+          }
+
+          this.name = name;
+          this.platformName = Platform?.name ?? '-';
+          this.valueInBaseCurrency = valueInBaseCurrency;
+
+          this.changeDetectorRef.markForCheck();
+        }
+      );
 
     this.dataService
       .fetchActivities({

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

@@ -20,6 +20,26 @@
     </div>
 
     <div class="row">
+      <div class="col-6 mb-3">
+        <gf-value
+          i18n
+          size="medium"
+          [currency]="currency"
+          [locale]="user?.settings?.locale"
+          [value]="balance"
+          >Cash Balance</gf-value
+        >
+      </div>
+      <div class="col-6 mb-3">
+        <gf-value
+          i18n
+          size="medium"
+          [currency]="currency"
+          [locale]="user?.settings?.locale"
+          [value]="equity"
+          >Equity</gf-value
+        >
+      </div>
       <div class="col-6 mb-3">
         <gf-value i18n size="medium" [value]="accountType"
           >Account Type</gf-value