Release 1.24.0 (#201)

* Add balance attribute and calculate total balance

* Update changelog

CHANGELOG.md

@@ -5,6 +5,21 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 1.24.0 - 07.07.2021
+
+### Added
+
+- Added the total value in the create or edit transaction dialog
+- Added a balance attribute to the account model
+- Calculated the total balance (cash)
+
+### Changed
+
+- Upgraded `@angular/cdk` and `@angular/material` from version `11.0.4` to `12.0.6`
+- Upgraded `@nestjs` dependencies
+- Upgraded `angular-material-css-vars` from version `1.2.0` to `2.0.0`
+- Upgraded `Nx` from version `12.3.6` to `12.5.4`
+
 ## 1.23.1 - 03.07.2021
 
 ### Fixed

README.md

@@ -15,7 +15,7 @@
   </p>
 </div>
 
-**Ghostfolio** is an open source portfolio tracker based on web technology. The software empowers busy folks to have a sharp look of their financial assets and to make solid, data-driven investment decisions by evaluating automated static portfolio analysis rules.
+**Ghostfolio** is an open source portfolio tracker built with web technology. The software empowers busy people to have a sharp look of their financial assets and to make solid, data-driven investment decisions.
 
 ## Why Ghostfolio?
 
@@ -79,8 +79,8 @@ The frontend is built with [Angular](https://angular.io) and uses [Angular Mater
 1. Run `yarn setup:database` to initialize the database schema and populate your database with (example) data
 1. Start server and client (see [_Development_](#Development))
 1. Login as _Admin_ with the following _Security Token_: `ae76872ae8f3419c6d6f64bf51888ecbcc703927a342d815fafe486acdb938da07d0cf44fca211a0be74a423238f535362d390a41e81e633a9ce668a6e31cdf9`
-1. Go to the _Admin Control Panel_ and press _Gather All Data_ to fetch historical data
-1. Press _Sign out_ and check out the _Live Demo_
+1. Go to the _Admin Control Panel_ and click _Gather All Data_ to fetch historical data
+1. Click _Sign out_ and check out the _Live Demo_
 
 ## Development
 

apps/api/jest.config.js

@@ -11,5 +11,6 @@ module.exports = {
   },
   moduleFileExtensions: ['ts', 'js', 'html'],
   coverageDirectory: '../../coverage/apps/api',
-  testTimeout: 10000
+  testTimeout: 10000,
+  testEnvironment: 'node'
 };

apps/api/src/app/account/account.module.ts

@@ -4,6 +4,7 @@ import { AlphaVantageService } from '@ghostfolio/api/services/data-provider/alph
 import { GhostfolioScraperApiService } from '@ghostfolio/api/services/data-provider/ghostfolio-scraper-api/ghostfolio-scraper-api.service';
 import { RakutenRapidApiService } from '@ghostfolio/api/services/data-provider/rakuten-rapid-api/rakuten-rapid-api.service';
 import { YahooFinanceService } from '@ghostfolio/api/services/data-provider/yahoo-finance/yahoo-finance.service';
+import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
 import { ImpersonationService } from '@ghostfolio/api/services/impersonation.service';
 import { PrismaService } from '@ghostfolio/api/services/prisma.service';
 import { Module } from '@nestjs/common';
@@ -20,6 +21,7 @@ import { AccountService } from './account.service';
     AlphaVantageService,
     ConfigurationService,
     DataProviderService,
+    ExchangeRateDataService,
     GhostfolioScraperApiService,
     ImpersonationService,
     PrismaService,

apps/api/src/app/account/account.service.ts

@@ -1,12 +1,14 @@
+import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
 import { PrismaService } from '@ghostfolio/api/services/prisma.service';
 import { Injectable } from '@nestjs/common';
-import { Account, Order, Prisma } from '@prisma/client';
+import { Account, Currency, Order, Prisma } from '@prisma/client';
 
 import { RedisCacheService } from '../redis-cache/redis-cache.service';
 
 @Injectable()
 export class AccountService {
   public constructor(
+    private exchangeRateDataService: ExchangeRateDataService,
     private readonly redisCacheService: RedisCacheService,
     private prisma: PrismaService
   ) {}
@@ -53,6 +55,24 @@ export class AccountService {
     });
   }
 
+  public async calculateCashBalance(aUserId: string, aCurrency: Currency) {
+    let totalCashBalance = 0;
+
+    const accounts = await this.accounts({
+      where: { userId: aUserId }
+    });
+
+    accounts.forEach((account) => {
+      totalCashBalance += this.exchangeRateDataService.toCurrency(
+        account.balance,
+        account.currency,
+        aCurrency
+      );
+    });
+
+    return totalCashBalance;
+  }
+
   public async createAccount(
     data: Prisma.AccountCreateInput,
     aUserId: string

apps/api/src/app/account/create-account.dto.ts

@@ -1,10 +1,16 @@
-import { AccountType } from '@prisma/client';
-import { IsString, ValidateIf } from 'class-validator';
+import { AccountType, Currency } from '@prisma/client';
+import { IsNumber, IsString, ValidateIf } from 'class-validator';
 
 export class CreateAccountDto {
   @IsString()
   accountType: AccountType;
 
+  @IsNumber()
+  balance: number;
+
+  @IsString()
+  currency: Currency;
+
   @IsString()
   name: string;
 

apps/api/src/app/account/update-account.dto.ts

@@ -1,10 +1,16 @@
-import { AccountType } from '@prisma/client';
-import { IsString, ValidateIf } from 'class-validator';
+import { AccountType, Currency } from '@prisma/client';
+import { IsNumber, IsString, ValidateIf } from 'class-validator';
 
 export class UpdateAccountDto {
   @IsString()
   accountType: AccountType;
 
+  @IsNumber()
+  balance: number;
+
+  @IsString()
+  currency: Currency;
+
   @IsString()
   id: string;
 

apps/api/src/app/order/create-order.dto.ts

@@ -1,5 +1,5 @@
 import { Currency, DataSource, Type } from '@prisma/client';
-import { IsISO8601, IsNumber, IsString, ValidateIf } from 'class-validator';
+import { IsISO8601, IsNumber, IsString } from 'class-validator';
 
 export class CreateOrderDto {
   @IsString()

apps/api/src/app/portfolio/portfolio.controller.ts

@@ -142,10 +142,11 @@ export class PortfolioController {
   ): Promise<{ [symbol: string]: PortfolioPosition }> {
     let details: { [symbol: string]: PortfolioPosition } = {};
 
-    const impersonationUserId = await this.impersonationService.validateImpersonationId(
-      impersonationId,
-      this.request.user.id
-    );
+    const impersonationUserId =
+      await this.impersonationService.validateImpersonationId(
+        impersonationId,
+        this.request.user.id
+      );
 
     const portfolio = await this.portfolioService.createPortfolio(
       impersonationUserId || this.request.user.id
@@ -221,6 +222,7 @@ export class PortfolioController {
       )
     ) {
       overview = nullifyValuesInObject(overview, [
+        'cash',
         'committedFunds',
         'fees',
         'totalBuy',
@@ -238,10 +240,11 @@ export class PortfolioController {
     @Query('range') range,
     @Res() res: Response
   ): Promise<PortfolioPerformance> {
-    const impersonationUserId = await this.impersonationService.validateImpersonationId(
-      impersonationId,
-      this.request.user.id
-    );
+    const impersonationUserId =
+      await this.impersonationService.validateImpersonationId(
+        impersonationId,
+        this.request.user.id
+      );
 
     const portfolio = await this.portfolioService.createPortfolio(
       impersonationUserId || this.request.user.id
@@ -306,10 +309,11 @@ export class PortfolioController {
   public async getReport(
     @Headers('impersonation-id') impersonationId
   ): Promise<PortfolioReport> {
-    const impersonationUserId = await this.impersonationService.validateImpersonationId(
-      impersonationId,
-      this.request.user.id
-    );
+    const impersonationUserId =
+      await this.impersonationService.validateImpersonationId(
+        impersonationId,
+        this.request.user.id
+      );
 
     const portfolio = await this.portfolioService.createPortfolio(
       impersonationUserId || this.request.user.id

apps/api/src/app/portfolio/portfolio.module.ts

@@ -1,3 +1,8 @@
+import { AccountService } from '@ghostfolio/api/app/account/account.service';
+import { CacheService } from '@ghostfolio/api/app/cache/cache.service';
+import { OrderService } from '@ghostfolio/api/app/order/order.service';
+import { RedisCacheModule } from '@ghostfolio/api/app/redis-cache/redis-cache.module';
+import { UserService } from '@ghostfolio/api/app/user/user.service';
 import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
 import { DataGatheringService } from '@ghostfolio/api/services/data-gathering.service';
 import { DataProviderService } from '@ghostfolio/api/services/data-provider.service';
@@ -11,10 +16,6 @@ import { PrismaService } from '@ghostfolio/api/services/prisma.service';
 import { RulesService } from '@ghostfolio/api/services/rules.service';
 import { Module } from '@nestjs/common';
 
-import { CacheService } from '../cache/cache.service';
-import { OrderService } from '../order/order.service';
-import { RedisCacheModule } from '../redis-cache/redis-cache.module';
-import { UserService } from '../user/user.service';
 import { PortfolioController } from './portfolio.controller';
 import { PortfolioService } from './portfolio.service';
 
@@ -22,6 +23,7 @@ import { PortfolioService } from './portfolio.service';
   imports: [RedisCacheModule],
   controllers: [PortfolioController],
   providers: [
+    AccountService,
     AlphaVantageService,
     CacheService,
     ConfigurationService,

apps/api/src/app/portfolio/portfolio.service.ts

@@ -1,3 +1,7 @@
+import { AccountService } from '@ghostfolio/api/app/account/account.service';
+import { OrderService } from '@ghostfolio/api/app/order/order.service';
+import { RedisCacheService } from '@ghostfolio/api/app/redis-cache/redis-cache.service';
+import { UserService } from '@ghostfolio/api/app/user/user.service';
 import { Portfolio } from '@ghostfolio/api/models/portfolio';
 import { DataProviderService } from '@ghostfolio/api/services/data-provider.service';
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
@@ -30,9 +34,6 @@ import {
 import { isEmpty } from 'lodash';
 import * as roundTo from 'round-to';
 
-import { OrderService } from '../order/order.service';
-import { RedisCacheService } from '../redis-cache/redis-cache.service';
-import { UserService } from '../user/user.service';
 import {
   HistoricalDataItem,
   PortfolioPositionDetail
@@ -41,6 +42,7 @@ import {
 @Injectable()
 export class PortfolioService {
   public constructor(
+    private readonly accountService: AccountService,
     private readonly dataProviderService: DataProviderService,
     private readonly exchangeRateDataService: ExchangeRateDataService,
     private readonly impersonationService: ImpersonationService,
@@ -192,10 +194,15 @@ export class PortfolioService {
       impersonationUserId || this.request.user.id
     );
 
+    const cash = await this.accountService.calculateCashBalance(
+      impersonationUserId || this.request.user.id,
+      this.request.user.Settings.currency
+    );
     const committedFunds = portfolio.getCommittedFunds();
     const fees = portfolio.getFees();
 
     return {
+      cash,
       committedFunds,
       fees,
       ordersCount: portfolio.getOrders().length,

apps/api/src/models/portfolio.spec.ts

@@ -110,7 +110,9 @@ describe('Portfolio', () => {
       Account: [
         {
           accountType: AccountType.SECURITIES,
+          balance: 0,
           createdAt: new Date(),
+          currency: Currency.USD,
           id: DEFAULT_ACCOUNT_ID,
           isDefault: true,
           name: 'Default Account',

apps/client/jest.config.js

@@ -5,13 +5,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
-      stringifyContentPathRegex: '\\.(html|svg)$',
-      astTransformers: {
-        before: [
-          'jest-preset-angular/build/InlineFilesTransformer',
-          'jest-preset-angular/build/StripStylesTransformer'
-        ]
-      }
+      stringifyContentPathRegex: '\\.(html|svg)$'
     }
   },
   coverageDirectory: '../../coverage/apps/client',
@@ -19,5 +13,6 @@ module.exports = {
     'jest-preset-angular/build/serializers/no-ng-attributes',
     'jest-preset-angular/build/serializers/ng-snapshot',
     'jest-preset-angular/build/serializers/html-comment'
-  ]
+  ],
+  transform: { '^.+\\.(ts|js|html)$': 'jest-preset-angular' }
 };

apps/client/src/app/app.component.scss

@@ -7,10 +7,6 @@
     .create-account-box {
       cursor: pointer;
       font-size: 90%;
-
-      .link {
-        color: rgba(var(--palette-primary-500), 1);
-      }
     }
   }
 

apps/client/src/app/components/accounts-table/accounts-table.component.html

@@ -26,6 +26,27 @@
     </td>
   </ng-container>
 
+  <ng-container matColumnDef="transactions">
+    <th *matHeaderCellDef class="text-right" i18n mat-header-cell>
+      Transactions
+    </th>
+    <td *matCellDef="let element" class="text-right" mat-cell>
+      {{ element.Order?.length }}
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="balance">
+    <th *matHeaderCellDef class="text-right" i18n mat-header-cell>Balance</th>
+    <td *matCellDef="let element" class="text-right" mat-cell>
+      <gf-value
+        class="d-inline-block justify-content-end"
+        [currency]="element.currency"
+        [locale]="locale"
+        [value]="element.balance"
+      ></gf-value>
+    </td>
+  </ng-container>
+
   <ng-container matColumnDef="actions">
     <th *matHeaderCellDef class="px-1 text-center" i18n mat-header-cell></th>
     <td *matCellDef="let element" class="px-1 text-center" mat-cell>
@@ -53,15 +74,6 @@
     </td>
   </ng-container>
 
-  <ng-container matColumnDef="transactions">
-    <th *matHeaderCellDef class="text-right" i18n mat-header-cell>
-      Transactions
-    </th>
-    <td *matCellDef="let element" class="text-right" mat-cell>
-      {{ element.Order?.length }}
-    </td>
-  </ng-container>
-
   <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
   <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
 </table>

apps/client/src/app/components/accounts-table/accounts-table.component.ts

@@ -28,7 +28,8 @@ export class AccountsTableComponent implements OnChanges, OnDestroy, OnInit {
   @Output() accountDeleted = new EventEmitter<string>();
   @Output() accountToUpdate = new EventEmitter<AccountModel>();
 
-  public dataSource: MatTableDataSource<AccountModel> = new MatTableDataSource();
+  public dataSource: MatTableDataSource<AccountModel> =
+    new MatTableDataSource();
   public displayedColumns = [];
   public isLoading = true;
   public routeQueryParams: Subscription;
@@ -40,7 +41,7 @@ export class AccountsTableComponent implements OnChanges, OnDestroy, OnInit {
   public ngOnInit() {}
 
   public ngOnChanges() {
-    this.displayedColumns = ['account', 'platform', 'transactions'];
+    this.displayedColumns = ['account', 'platform', 'transactions', 'balance'];
 
     if (this.showActions) {
       this.displayedColumns.push('actions');

apps/client/src/app/components/header/header.component.scss

@@ -5,10 +5,7 @@
   z-index: 999;
 
   .mat-toolbar {
-    background-color: rgba(
-      var(--light-primary-text),
-      var(--palette-foreground-disabled-alpha)
-    );
+    background-color: rgba(var(--light-disabled-text));
 
     .spacer {
       flex: 1 1 auto;
@@ -28,11 +25,6 @@
 
 :host-context(.is-dark-theme) {
   .mat-toolbar {
-    background-color: rgba(
-      39,
-      39,
-      39,
-      var(--palette-foreground-disabled-alpha)
-    );
+    background-color: rgba(39, 39, 39, $alpha-disabled-text);
   }
 }

apps/client/src/app/components/portfolio-overview/portfolio-overview.component.html

@@ -1,4 +1,18 @@
 <div class="container p-0">
+  <div class="row px-3 py-1">
+    <div class="d-flex flex-grow-1" i18n>Cash</div>
+    <div class="d-flex justify-content-end">
+      <gf-value
+        class="justify-content-end"
+        [currency]="baseCurrency"
+        [locale]="locale"
+        [value]="isLoading ? undefined : overview?.cash"
+      ></gf-value>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col"><hr /></div>
+  </div>
   <div class="row px-3 py-1">
     <div class="d-flex flex-grow-1" i18n>Buy</div>
     <div class="d-flex justify-content-end">

apps/client/src/app/components/portfolio-proportion-chart/portfolio-proportion-chart.component.ts

@@ -8,7 +8,7 @@ import {
   ViewChild
 } from '@angular/core';
 import { UNKNOWN_KEY } from '@ghostfolio/common/config';
-import { getCssVariable, getTextColor } from '@ghostfolio/common/helper';
+import { getTextColor } from '@ghostfolio/common/helper';
 import { PortfolioPosition } from '@ghostfolio/common/interfaces';
 import { Currency } from '@prisma/client';
 import { Tooltip } from 'chart.js';
@@ -43,9 +43,7 @@ export class PortfolioProportionChartComponent
   private colorMap: {
     [symbol: string]: string;
   } = {
-    [UNKNOWN_KEY]: `rgba(${getTextColor()}, ${getCssVariable(
-      '--palette-foreground-divider-alpha'
-    )})`
+    [UNKNOWN_KEY]: `rgba(${getTextColor()}, 0.12)`
   };
 
   public constructor() {

apps/client/src/app/components/positions/positions.component.scss

@@ -1,12 +1,11 @@
+@import '~apps/client/src/styles/ghostfolio-style';
+
 :host {
   display: block;
 
   gf-position {
     &:nth-child(even) {
-      background-color: rgba(
-        var(--dark-primary-text),
-        var(--palette-background-hover-alpha)
-      );
+      background-color: rgba(0, 0, 0, $alpha-hover);
     }
   }
 }
@@ -14,10 +13,7 @@
 :host-context(.is-dark-theme) {
   gf-position {
     &:nth-child(even) {
-      background-color: rgba(
-        var(--light-primary-text),
-        var(--palette-background-hover-alpha)
-      );
+      background-color: rgba(255, 255, 255, $alpha-hover);
     }
   }
 }

apps/client/src/app/components/toggle/toggle.component.scss

@@ -7,10 +7,7 @@
     padding: 0.15rem 0.75rem;
 
     &.mat-radio-checked {
-      background-color: rgba(
-        var(--dark-primary-text),
-        var(--palette-foreground-divider-alpha)
-      );
+      background-color: rgba(var(--dark-dividers));
     }
 
     ::ng-deep {
@@ -33,15 +30,8 @@
 :host-context(.is-dark-theme) {
   .mat-radio-button {
     &.mat-radio-checked {
-      background-color: rgba(
-        var(--light-primary-text),
-        var(--palette-foreground-divider-alpha)
-      );
-      border: 1px solid
-        rgba(
-          var(--light-primary-text),
-          var(--palette-foreground-disabled-button-alpha)
-        );
+      background-color: rgba(var(--light-dividers));
+      border: 1px solid rgba(var(--light-disabled-text));
     }
 
     ::ng-deep {

apps/client/src/app/pages/account/account-page.component.ts

@@ -12,7 +12,7 @@ import {
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { WebAuthnService } from '@ghostfolio/client/services/web-authn.service';
-import { baseCurrency, DEFAULT_DATE_FORMAT } from '@ghostfolio/common/config';
+import { DEFAULT_DATE_FORMAT, baseCurrency } from '@ghostfolio/common/config';
 import { Access, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { Currency } from '@prisma/client';

apps/client/src/app/pages/accounts/accounts-page.component.ts

@@ -125,6 +125,8 @@ export class AccountsPageComponent implements OnInit {
 
   public openUpdateAccountDialog({
     accountType,
+    balance,
+    currency,
     id,
     name,
     platformId
@@ -133,6 +135,8 @@ export class AccountsPageComponent implements OnInit {
       data: {
         account: {
           accountType,
+          balance,
+          currency,
           id,
           name,
           platformId
@@ -167,6 +171,8 @@ export class AccountsPageComponent implements OnInit {
       data: {
         account: {
           accountType: AccountType.SECURITIES,
+          balance: 0,
+          currency: this.user?.settings?.baseCurrency,
           name: null,
           platformId: null
         }

apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.html

@@ -8,14 +8,37 @@
         <input matInput name="name" required [(ngModel)]="data.account.name" />
       </mat-form-field>
     </div>
-    <div class="d-none">
+    <div>
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Type</mat-label>
         <mat-select name="type" required [(value)]="data.account.accountType">
-          <mat-option value="SECURITIES" i18n> SECURITIES </mat-option>
+          <mat-option value="CASH" i18n>Cash</mat-option>
+          <mat-option value="SECURITIES" i18n>Securities</mat-option>
         </mat-select>
       </mat-form-field>
     </div>
+    <div>
+      <mat-form-field appearance="outline" class="w-100">
+        <mat-label i18n>Currency</mat-label>
+        <mat-select name="currency" required [(value)]="data.account.currency">
+          <mat-option *ngFor="let currency of currencies" [value]="currency"
+            >{{ currency }}</mat-option
+          >
+        </mat-select>
+      </mat-form-field>
+    </div>
+    <div>
+      <mat-form-field appearance="outline" class="w-100">
+        <mat-label i18n>Balance</mat-label>
+        <input
+          matInput
+          name="balance"
+          required
+          type="number"
+          [(ngModel)]="data.account.balance"
+        />
+      </mat-form-field>
+    </div>
     <div>
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Platform</mat-label>

apps/client/src/app/pages/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.component.ts

@@ -23,7 +23,7 @@ import { CreateOrUpdateTransactionDialogParams } from './interfaces/interfaces';
 
 @Component({
   host: { class: 'h-100' },
-  selector: 'create-or-update-transaction-dialog',
+  selector: 'gf-create-or-update-transaction-dialog',
   changeDetection: ChangeDetectionStrategy.OnPush,
   styleUrls: ['./create-or-update-transaction-dialog.scss'],
   templateUrl: 'create-or-update-transaction-dialog.html'

apps/client/src/app/pages/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.html

@@ -2,6 +2,22 @@
   <h1 *ngIf="data.transaction.id" mat-dialog-title i18n>Update transaction</h1>
   <h1 *ngIf="!data.transaction.id" mat-dialog-title i18n>Add transaction</h1>
   <div class="flex-grow-1" mat-dialog-content>
+    <div>
+      <mat-form-field appearance="outline" class="w-100">
+        <mat-label i18n>Account</mat-label>
+        <mat-select
+          name="accountId"
+          required
+          [(value)]="data.transaction.accountId"
+        >
+          <mat-option
+            *ngFor="let account of data.user?.accounts"
+            [value]="account.id"
+            >{{ account.name }}</mat-option
+          >
+        </mat-select>
+      </mat-form-field>
+    </div>
     <div>
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Symbol or ISIN</mat-label>
@@ -42,7 +58,7 @@
         </mat-select>
       </mat-form-field>
     </div>
-    <div>
+    <div class="d-none">
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Currency</mat-label>
         <mat-select
@@ -136,31 +152,25 @@
         </button>
       </mat-form-field>
     </div>
+  </div>
+  <div class="d-flex" mat-dialog-actions>
+    <gf-value
+      class="flex-grow-1"
+      [currency]="data.transaction.currency"
+      [locale]="data.user?.settings?.locale"
+      [value]="data.transaction.fee + (data.transaction.quantity * data.transaction.unitPrice)"
+    ></gf-value>
     <div>
-      <mat-form-field appearance="outline" class="w-100">
-        <mat-label i18n>Account</mat-label>
-        <mat-select
-          name="accountId"
-          required
-          [(value)]="data.transaction.accountId"
-        >
-          <mat-option *ngFor="let account of data.accounts" [value]="account.id"
-            >{{ account.name }}</mat-option
-          >
-        </mat-select>
-      </mat-form-field>
+      <button i18n mat-button (click)="onCancel()">Cancel</button>
+      <button
+        color="primary"
+        i18n
+        mat-flat-button
+        [disabled]="!(addTransactionForm.form.valid && data.transaction.symbol)"
+        [mat-dialog-close]="data"
+      >
+        Save
+      </button>
     </div>
   </div>
-  <div class="justify-content-end" mat-dialog-actions>
-    <button i18n mat-button (click)="onCancel()">Cancel</button>
-    <button
-      color="primary"
-      i18n
-      mat-flat-button
-      [disabled]="!(addTransactionForm.form.valid && data.transaction.symbol)"
-      [mat-dialog-close]="data"
-    >
-      Save
-    </button>
-  </div>
 </form>

apps/client/src/app/pages/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.module.ts

@@ -9,6 +9,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSelectModule } from '@angular/material/select';
+import { GfValueModule } from '@ghostfolio/client/components/value/value.module';
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
 
 import { CreateOrUpdateTransactionDialog } from './create-or-update-transaction-dialog.component';
@@ -19,6 +20,7 @@ import { CreateOrUpdateTransactionDialog } from './create-or-update-transaction-
   imports: [
     CommonModule,
     GfSymbolModule,
+    GfValueModule,
     FormsModule,
     MatAutocompleteModule,
     MatButtonModule,

apps/client/src/app/pages/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.scss

@@ -1,6 +1,12 @@
 :host {
   display: block;
 
+  .mat-dialog-actions {
+    gf-value {
+      font-size: 0.9rem;
+    }
+  }
+
   .mat-dialog-content {
     max-height: unset;
 

apps/client/src/app/pages/transactions/create-or-update-transaction-dialog/interfaces/interfaces.ts

@@ -1,7 +1,8 @@
+import { User } from '@ghostfolio/common/interfaces';
 import { Account, Order } from '@prisma/client';
 
 export interface CreateOrUpdateTransactionDialogParams {
   accountId: string;
-  accounts: Account[];
   transaction: Order;
+  user: User;
 }

apps/client/src/app/pages/transactions/transactions-page.component.ts

@@ -141,7 +141,6 @@ export class TransactionsPageComponent implements OnInit {
   }: OrderModel): void {
     const dialogRef = this.dialog.open(CreateOrUpdateTransactionDialog, {
       data: {
-        accounts: this.user.accounts,
         transaction: {
           accountId,
           currency,
@@ -153,7 +152,8 @@ export class TransactionsPageComponent implements OnInit {
           symbol,
           type,
           unitPrice
-        }
+        },
+        user: this.user
       },
       height: this.deviceType === 'mobile' ? '97.5vh' : '80vh',
       width: this.deviceType === 'mobile' ? '100vw' : '50rem'
@@ -182,7 +182,6 @@ export class TransactionsPageComponent implements OnInit {
   private openCreateTransactionDialog(aTransaction?: OrderModel): void {
     const dialogRef = this.dialog.open(CreateOrUpdateTransactionDialog, {
       data: {
-        accounts: this.user?.accounts,
         transaction: {
           accountId:
             aTransaction?.accountId ??
@@ -197,7 +196,8 @@ export class TransactionsPageComponent implements OnInit {
           symbol: aTransaction?.symbol ?? null,
           type: aTransaction?.type ?? 'BUY',
           unitPrice: null
-        }
+        },
+        user: this.user
       },
       height: this.deviceType === 'mobile' ? '97.5vh' : '80vh',
       width: this.deviceType === 'mobile' ? '100vw' : '50rem'

apps/client/src/styles.scss

@@ -43,10 +43,7 @@ body {
     }
 
     hr {
-      border-top-color: rgba(
-        var(--light-primary-text),
-        var(--palette-foreground-divider-alpha)
-      );
+      border-top-color: rgba(var(--light-dividers));
     }
 
     ngx-skeleton-loader {
@@ -63,10 +60,7 @@ body {
       background: var(--dark-background);
 
       &:not([class*='mat-elevation-z']) {
-        border-color: rgba(
-          var(--light-primary-text),
-          var(--palette-foreground-divider-alpha)
-        );
+        border-color: rgba(var(--light-dividers));
         box-shadow: none;
       }
     }
@@ -102,8 +96,7 @@ button:focus {
 }
 
 hr {
-  border-top: 1px solid
-    rgba(var(--dark-primary-text), var(--palette-foreground-divider-alpha));
+  border-top: 1px solid rgba(var(--dark-dividers));
 }
 
 ion-icon {
@@ -138,8 +131,7 @@ ngx-skeleton-loader {
 
 .mat-card {
   &:not([class*='mat-elevation-z']) {
-    border: 1px solid
-      rgba(var(--dark-primary-text), var(--palette-foreground-divider-alpha));
+    border: 1px solid rgba(var(--dark-dividers));
     box-shadow: none;
   }
 }

apps/client/src/styles/ghostfolio-style.scss

@@ -2,6 +2,9 @@ $mat-css-dark-theme-selector: '.is-dark-theme';
 
 @import '~angular-material-css-vars/public-util';
 
+$alpha-disabled-text: 0.38;
+$alpha-hover: 0.04;
+
 .gf-table {
   td {
     border: 0;

libs/common/src/lib/helper.ts

@@ -26,11 +26,15 @@ export function getCssVariable(aCssVariable: string) {
 }
 
 export function getTextColor() {
-  return getCssVariable(
+  const cssVariable = getCssVariable(
     window.matchMedia('(prefers-color-scheme: dark)').matches
       ? '--light-primary-text'
       : '--dark-primary-text'
   );
+
+  const [r, g, b] = cssVariable.split(',');
+
+  return `${r}, ${g}, ${b}`;
 }
 
 export function getToday() {

libs/common/src/lib/interfaces/portfolio-overview.interface.ts

@@ -1,4 +1,5 @@
 export interface PortfolioOverview {
+  cash: number;
   committedFunds: number;
   fees: number;
   ordersCount: number;

nx.json

@@ -35,5 +35,13 @@
     "common": {
       "tags": []
     }
+  },
+  "targetDependencies": {
+    "build": [
+      {
+        "target": "build",
+        "projects": "dependencies"
+      }
+    ]
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ghostfolio",
-  "version": "1.23.1",
+  "version": "1.24.0",
   "homepage": "https://ghostfol.io",
   "license": "AGPL-3.0",
   "scripts": {
@@ -46,32 +46,32 @@
   },
   "dependencies": {
     "@angular/animations": "12.0.4",
-    "@angular/cdk": "11.0.4",
+    "@angular/cdk": "12.0.6",
     "@angular/common": "12.0.4",
     "@angular/compiler": "12.0.4",
     "@angular/core": "12.0.4",
     "@angular/forms": "12.0.4",
-    "@angular/material": "11.0.4",
+    "@angular/material": "12.0.6",
     "@angular/platform-browser": "12.0.4",
     "@angular/platform-browser-dynamic": "12.0.4",
     "@angular/router": "12.0.4",
     "@codewithdan/observable-store": "2.2.11",
-    "@nestjs/common": "7.6.5",
-    "@nestjs/config": "0.6.1",
-    "@nestjs/core": "7.6.5",
+    "@nestjs/common": "7.6.18",
+    "@nestjs/config": "0.6.3",
+    "@nestjs/core": "7.6.18",
     "@nestjs/jwt": "7.2.0",
-    "@nestjs/passport": "7.1.5",
-    "@nestjs/platform-express": "7.6.5",
-    "@nestjs/schedule": "0.4.1",
+    "@nestjs/passport": "7.1.6",
+    "@nestjs/platform-express": "7.6.18",
+    "@nestjs/schedule": "0.4.3",
     "@nestjs/serve-static": "2.1.4",
-    "@nrwl/angular": "12.3.6",
+    "@nrwl/angular": "12.5.4",
     "@prisma/client": "2.24.1",
     "@simplewebauthn/browser": "3.0.0",
     "@simplewebauthn/server": "3.0.0",
     "@simplewebauthn/typescript-types": "3.0.0",
     "@stripe/stripe-js": "1.15.0",
     "alphavantage": "2.2.0",
-    "angular-material-css-vars": "1.2.0",
+    "angular-material-css-vars": "2.0.0",
     "bent": "7.3.12",
     "bootstrap": "4.6.0",
     "cache-manager": "3.4.3",
@@ -104,7 +104,7 @@
     "svgmap": "2.1.1",
     "uuid": "8.3.2",
     "yahoo-finance": "0.3.6",
-    "zone.js": "~0.11.4"
+    "zone.js": "0.11.4"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "12.0.4",
@@ -112,17 +112,17 @@
     "@angular/cli": "12.0.4",
     "@angular/compiler-cli": "12.0.4",
     "@angular/language-service": "12.0.4",
-    "@angular/localize": "11.0.9",
-    "@nestjs/schematics": "7.2.6",
-    "@nestjs/testing": "7.6.5",
-    "@nrwl/cli": "12.3.6",
-    "@nrwl/cypress": "12.3.6",
-    "@nrwl/eslint-plugin-nx": "12.3.6",
-    "@nrwl/jest": "12.3.6",
-    "@nrwl/nest": "12.3.6",
-    "@nrwl/node": "12.3.6",
-    "@nrwl/tao": "12.3.6",
-    "@nrwl/workspace": "12.3.6",
+    "@angular/localize": "12.0.5",
+    "@nestjs/schematics": "7.3.1",
+    "@nestjs/testing": "7.6.18",
+    "@nrwl/cli": "12.5.4",
+    "@nrwl/cypress": "12.5.4",
+    "@nrwl/eslint-plugin-nx": "12.5.4",
+    "@nrwl/jest": "12.5.4",
+    "@nrwl/nest": "12.5.4",
+    "@nrwl/node": "12.5.4",
+    "@nrwl/tao": "12.5.4",
+    "@nrwl/workspace": "12.5.4",
     "@types/cache-manager": "3.4.0",
     "@types/jest": "26.0.20",
     "@types/lodash": "4.14.168",
@@ -139,12 +139,12 @@
     "import-sort-cli": "6.0.0",
     "import-sort-parser-typescript": "6.0.0",
     "import-sort-style-module": "6.0.0",
-    "jest": "26.6.3",
-    "jest-preset-angular": "8.4.0",
-    "prettier": "2.3.1",
+    "jest": "27.0.3",
+    "jest-preset-angular": "9.0.3",
+    "prettier": "2.3.2",
     "replace-in-file": "6.2.0",
     "rimraf": "3.0.2",
-    "ts-jest": "26.5.5",
+    "ts-jest": "27.0.3",
     "ts-node": "9.1.1",
     "typescript": "4.2.4"
   },

prisma/migrations/20210703194509_added_balance_to_account/migration.sql

@@ -0,0 +1,6 @@
+-- AlterEnum
+ALTER TYPE "AccountType" ADD VALUE 'CASH';
+
+-- AlterTable
+ALTER TABLE "Account" ADD COLUMN     "balance" DOUBLE PRECISION NOT NULL DEFAULT 0,
+ADD COLUMN     "currency" "Currency" NOT NULL DEFAULT E'USD';

prisma/schema.prisma

@@ -26,7 +26,9 @@ model Access {
 
 model Account {
   accountType AccountType @default(SECURITIES)
+  balance     Float       @default(0)
   createdAt   DateTime    @default(now())
+  currency    Currency    @default(USD)
   id          String      @default(uuid())
   isDefault   Boolean     @default(false)
   name        String?
@@ -158,6 +160,7 @@ model User {
 }
 
 enum AccountType {
+  CASH
   SECURITIES
 }
 

prisma/seed.ts

@@ -87,6 +87,8 @@ async function main() {
         create: [
           {
             accountType: AccountType.SECURITIES,
+            balance: 0,
+            currency: Currency.USD,
             id: 'f4425b66-9ba9-4ac4-93d7-fdf9a145e8cb',
             isDefault: true,
             name: 'Default Account'
@@ -109,18 +111,24 @@ async function main() {
         create: [
           {
             accountType: AccountType.SECURITIES,
+            balance: 0,
+            currency: Currency.USD,
             id: 'd804de69-0429-42dc-b6ca-b308fd7dd926',
             name: 'Coinbase Account',
             platformId: platformCoinbase.id
           },
           {
             accountType: AccountType.SECURITIES,
+            balance: 0,
+            currency: Currency.EUR,
             id: '65cfb79d-b6c7-4591-9d46-73426bc62094',
             name: 'DEGIRO Account',
             platformId: platformDegiro.id
           },
           {
             accountType: AccountType.SECURITIES,
+            balance: 0,
+            currency: Currency.USD,
             id: '480269ce-e12a-4fd1-ac88-c4b0ff3f899c',
             isDefault: true,
             name: 'Interactive Brokers Account',