Release 1.24.0 (#201)

* Add balance attribute and calculate total balance

* Update changelog

.env

@@ -5,9 +5,9 @@ REDIS_HOST=localhost
 REDIS_PORT=6379
 
 # POSTGRES
+POSTGRES_DB=ghostfolio-db
 POSTGRES_USER=user
 POSTGRES_PASSWORD=password
-POSTGRES_DB=ghostfolio-db
 
 ACCESS_TOKEN_SALT=GHOSTFOLIO
 ALPHA_VANTAGE_API_KEY=

.travis.yml

@@ -8,3 +8,4 @@ before_script:
 script:
   - yarn format:check
   - yarn test
+  - yarn build:all

CHANGELOG.md

@@ -5,6 +5,217 @@ 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
+
+- Fixed the investment chart (drafts)
+
+## 1.23.0 - 03.07.2021
+
+### Added
+
+- Added support for future transactions (drafts)
+
+## 1.22.0 - 25.06.2021
+
+### Added
+
+- Set the user id in the _Stripe_ callback
+
+## 1.21.0 - 22.06.2021
+
+### Changed
+
+- Changed _Stripe_ mode from `subscription` to `payment`
+
+### Fixed
+
+- Fixed the base currency on the pricing page
+
+## 1.20.0 - 21.06.2021
+
+### Added
+
+- Set up _Stripe_ for subscriptions
+
+### Changed
+
+- Improved the style of the _Ghostfolio in Numbers_ section
+
+## 1.19.0 - 17.06.2021
+
+### Added
+
+- Added a _Ghostfolio in Numbers_ section to the about page
+
+## 1.18.0 - 16.06.2021
+
+### Changed
+
+- Improved the pie chart: Investments by sector
+- Improved the onboarding for TWA by redirecting to the account registration page
+
+## 1.17.0 - 15.06.2021
+
+### Changed
+
+- Improved the error page of the sign in with fingerprint
+- Disable the sign in with fingerprint selector for the demo user
+- Upgraded `angular` from version `11.2.4` to `12.0.4`
+- Upgraded `angular-material-css-vars` from version `1.1.2` to `1.2.0`
+- Upgraded `chart.js` from version `3.2.1` to `3.3.2`
+- Upgraded `date-fns` from version `2.19.0` to `2.22.1`
+- Upgraded `eslint` and `prettier` dependencies
+- Upgraded `ngx-device-detector` from version `2.0.6` to `2.1.1`
+- Upgraded `ngx-markdown` from version `11.1.2` to `12.0.1`
+
+## 1.16.0 - 14.06.2021
+
+### Changed
+
+- Improved the sign in with fingerprint
+
+## 1.15.0 - 14.06.2021
+
+### Added
+
+- Added a counter column to the transactions table
+- Added a label to indicate the default account in the accounts table
+- Added an option to limit the items in pie charts
+- Added sign in with fingerprint
+
+### Changed
+
+- Cleaned up the analysis page with an unused chart module
+- Improved the cell alignment in the users table of the admin control panel
+
+### Fixed
+
+- Fixed the last activity column of users in the admin control panel
+
+## 1.14.0 - 09.06.2021
+
+### Added
+
+- Added a connect or create symbol profile model logic on creating a new transaction
+
+### Changed
+
+- Improved the global heat map to visualize investments by country
+
+## 1.13.0 - 08.06.2021
+
+### Added
+
+- Added a global heat map to visualize investments by country
+
+## 1.12.0 - 06.06.2021
+
+### Added
+
+- Added a symbol profile model with additional data
+- Added new pie charts: Investments by continent and country
+
+## 1.11.0 - 05.06.2021
+
+### Added
+
+- Added a dedicated page for the account registration
+- Rendered the average buy prices in the position detail chart (useful for recurring transactions)
+- Introduced the initial prisma migration
+
+### Changed
+
+- Changed the buttons to links (`<a>`) on the tools page
+- Upgraded `prisma` from version `2.20.1` to `2.24.1`
+
+## 1.10.1 - 02.06.2021
+
+### Fixed
+
+- Fixed an optional type in the user interface
+
+## 1.10.0 - 02.06.2021
+
+### Changed
+
+- Moved the tools to a sub path (`/tools`)
+- Extended the pricing page and aligned with the subscription model
+
+## 1.9.0 - 01.06.2021
+
+### Added
+
+- Added the year labels to the investment chart on the x-axis
+
+### Changed
+
+- Respected the data source attribute of the transactions model in the data management for historical data
+- Prettified the generic scraper symbols in the transaction filtering component
+- Changed to the strict mode of distance formatting between two given dates
+
+### Fixed
+
+- Fixed the sorting in various tables
+- Made the order of the rules in the _X-ray_ section consistent
+
+## 1.8.0 - 24.05.2021
+
+### Added
+
+- Added a section for _Analysis_, _X-ray_ and upcoming tools
+
+### Changed
+
+- Introduced a user service implemented as an observable store (single source of truth for state)
+
+### Fixed
+
+- Fixed the performance chart by considering the investment
+- Fixed missing header of public pages (_About_, _Pricing_, _Resources_)
+
+## 1.7.0 - 22.05.2021
+
+### Changed
+
+- Hid footer on mobile (except on landing page)
+
+### Fixed
+
+- Fixed the internal navigation of the _Zen Mode_ in combination with a query parameter
+
+## 1.6.0 - 22.05.2021
+
+### Added
+
+- Added an index in the users table of the admin control panel
+
+### Changed
+
+- Improved the alignment in the users table of the admin control panel
+
+## 1.5.0 - 22.05.2021
+
+### Added
+
+- Added _Zen Mode_: the distraction-free view
+
 ## 1.4.0 - 20.05.2021
 
 ### Added
@@ -129,7 +340,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
-- Improved the user table styling of the admin control panel
+- Improved the users table styling of the admin control panel
 - Improved the background colors in the dark mode
 
 ## 0.92.0 - 25.04.2021
@@ -137,7 +348,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Prepared further for multi accounts support: store account for new transactions
-- Added a horizontal scrollbar to the user table of the admin control panel
+- Added a horizontal scrollbar to the users table of the admin control panel
 
 ### Fixed
 
@@ -164,7 +375,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
-- Improved the user table of the admin control panel
+- Improved the users table of the admin control panel
 
 ## 0.89.0 - 21.04.2021
 
@@ -195,7 +406,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
-- Fixed an issue in the user table of the admin control panel with missing data
+- Fixed an issue in the users table of the admin control panel with missing data
 
 ## 0.86.1 - 18.04.2021
 
@@ -210,7 +421,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Changed the about page for the new license
 - Optimized the data management for historical data
 - Optimized the exchange rate service
-- Improved the user table of the admin control panel
+- Improved the users table of the admin control panel
 
 ### Fixed
 

README.md

@@ -7,16 +7,15 @@
     <a href="https://ghostfol.io"><strong>Live Demo</strong></a>
   </p>
   <p>
-    <a href="https://travis-ci.org/github/ghostfolio/ghostfolio" rel="nofollow">
-      <img src="https://travis-ci.org/ghostfolio/ghostfolio.svg?branch=main" alt="Build Status"/>
-    </a>
+    <img src="https://img.shields.io/badge/contributions-welcome-orange.svg"/>
+    <a href="https://travis-ci.com/github/ghostfolio/ghostfolio" rel="nofollow">
+      <img src="https://travis-ci.com/ghostfolio/ghostfolio.svg?branch=main" alt="Build Status"/></a>
     <a href="https://www.gnu.org/licenses/agpl-3.0" rel="nofollow">
-      <img src="https://img.shields.io/badge/License-AGPL%20v3-blue.svg" alt="License: AGPL v3"/>
-    </a>
+      <img src="https://img.shields.io/badge/License-AGPL%20v3-blue.svg" alt="License: AGPL v3"/></a>
   </p>
 </div>
 
-**Ghostfolio** is an open source portfolio tracker. 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?
 
@@ -43,10 +42,13 @@ Ghostfolio is for you if you are...
 ## Features
 
 - ✅ Create, update and delete transactions
+- ✅ Multi account management
 - ✅ Portfolio performance (`Today`, `YTD`, `1Y`, `5Y`, `Max`)
 - ✅ Various charts
 - ✅ Static analysis to identify potential risks in your portfolio
 - ✅ Dark Mode
+- ✅ Zen Mode
+- ✅ Mobile-first design
 
 ## Technology Stack
 
@@ -54,11 +56,11 @@ Ghostfolio is a modern web application written in [TypeScript](https://www.types
 
 ### Backend
 
-The backend is based on [NestJS](https://nestjs.com) using [PostgreSQL](https://www.postgresql.org) as a database and [Redis](https://redis.io) for caching.
+The backend is based on [NestJS](https://nestjs.com) using [PostgreSQL](https://www.postgresql.org) as a database together with [Prisma](https://www.prisma.io) and [Redis](https://redis.io) for caching.
 
 ### Frontend
 
-The frontend is built with [Angular](https://angular.io).
+The frontend is built with [Angular](https://angular.io) and uses [Angular Material](https://material.angular.io) with utility classes from [Bootstrap](https://getbootstrap.com).
 
 ## Getting Started
 
@@ -77,26 +79,34 @@ The frontend is built with [Angular](https://angular.io).
 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
 
-Please make sure you have completed the instructions from [_Setup_](#Setup)
+Please make sure you have completed the instructions from [_Setup_](#Setup).
 
 ### Start server
 
-- Debug: Run `yarn watch:server` and click "Launch Program" in _Visual Studio Code_
-- Serve: Run `yarn start:server`
+<ol type="a">
+  <li>Debug: Run <code>yarn watch:server</code> and click "Launch Program" in <i>Visual Studio Code</i></li>
+  <li>Serve: Run <code>yarn start:server</code></li>
+</ol>
 
 ### Start client
 
-- Run `yarn start:client`
+Run `yarn start:client`
 
 ## Testing
 
 Run `yarn test`
 
+## Contributing
+
+Ghostfolio is **100% free** and **open source**. We encourage and support an active and healthy community that accepts contributions from the public - including you.
+
+Not sure what to work on? We have got some ideas. Please tweet to [@ghostfolio\_](https://twitter.com/ghostfolio_) or send an e-mail to hi@ghostfol.io. We would love to hear from you.
+
 ## License
 
 © 2021 [Ghostfolio](https://ghostfol.io)

angular.json

@@ -86,7 +86,6 @@
             "main": "apps/client/src/main.ts",
             "polyfills": "apps/client/src/polyfills.ts",
             "tsConfig": "apps/client/tsconfig.app.json",
-            "aot": true,
             "assets": [
               "apps/client/src/assets",
               {
@@ -121,7 +120,13 @@
               }
             ],
             "styles": ["apps/client/src/styles.scss"],
-            "scripts": ["node_modules/marked/lib/marked.js"]
+            "scripts": ["node_modules/marked/lib/marked.js"],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
           },
           "configurations": {
             "production": {
@@ -152,7 +157,8 @@
               ]
             }
           },
-          "outputs": ["{options.outputPath}"]
+          "outputs": ["{options.outputPath}"],
+          "defaultConfiguration": ""
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",

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/admin/admin.service.ts

@@ -108,7 +108,7 @@ export class AdminService {
         createdAt: true,
         id: true
       },
-      take: 20,
+      take: 30,
       where: {
         NOT: {
           Analytics: null

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

@@ -1,5 +1,6 @@
 import { join } from 'path';
 
+import { AuthDeviceModule } from '@ghostfolio/api/app/auth-device/auth-device.module';
 import { Module } from '@nestjs/common';
 import { ConfigModule } from '@nestjs/config';
 import { ScheduleModule } from '@nestjs/schedule';
@@ -26,6 +27,7 @@ import { InfoModule } from './info/info.module';
 import { OrderModule } from './order/order.module';
 import { PortfolioModule } from './portfolio/portfolio.module';
 import { RedisCacheModule } from './redis-cache/redis-cache.module';
+import { SubscriptionModule } from './subscription/subscription.module';
 import { SymbolModule } from './symbol/symbol.module';
 import { UserModule } from './user/user.module';
 
@@ -34,6 +36,7 @@ import { UserModule } from './user/user.module';
     AdminModule,
     AccessModule,
     AccountModule,
+    AuthDeviceModule,
     AuthModule,
     CacheModule,
     ConfigModule.forRoot(),
@@ -57,6 +60,7 @@ import { UserModule } from './user/user.module';
       rootPath: join(__dirname, '..', 'client'),
       exclude: ['/api*']
     }),
+    SubscriptionModule,
     SymbolModule,
     UserModule
   ],

apps/api/src/app/auth-device/auth-device.controller.ts

@@ -0,0 +1,44 @@
+import { AuthDeviceService } from '@ghostfolio/api/app/auth-device/auth-device.service';
+import {
+  getPermissions,
+  hasPermission,
+  permissions
+} from '@ghostfolio/common/permissions';
+import { RequestWithUser } from '@ghostfolio/common/types';
+import {
+  Controller,
+  Delete,
+  HttpException,
+  Inject,
+  Param,
+  UseGuards
+} from '@nestjs/common';
+import { REQUEST } from '@nestjs/core';
+import { AuthGuard } from '@nestjs/passport';
+import { StatusCodes, getReasonPhrase } from 'http-status-codes';
+
+@Controller('auth-device')
+export class AuthDeviceController {
+  public constructor(
+    private readonly authDeviceService: AuthDeviceService,
+    @Inject(REQUEST) private readonly request: RequestWithUser
+  ) {}
+
+  @Delete(':id')
+  @UseGuards(AuthGuard('jwt'))
+  public async deleteAuthDevice(@Param('id') id: string): Promise<void> {
+    if (
+      !hasPermission(
+        getPermissions(this.request.user.role),
+        permissions.deleteAuthDevice
+      )
+    ) {
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.FORBIDDEN),
+        StatusCodes.FORBIDDEN
+      );
+    }
+
+    await this.authDeviceService.deleteAuthDevice({ id });
+  }
+}

apps/api/src/app/auth-device/auth-device.dto.ts

@@ -0,0 +1,4 @@
+export interface AuthDeviceDto {
+  createdAt: string;
+  id: string;
+}

apps/api/src/app/auth-device/auth-device.module.ts

@@ -0,0 +1,18 @@
+import { AuthDeviceController } from '@ghostfolio/api/app/auth-device/auth-device.controller';
+import { AuthDeviceService } from '@ghostfolio/api/app/auth-device/auth-device.service';
+import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
+import { PrismaService } from '@ghostfolio/api/services/prisma.service';
+import { Module } from '@nestjs/common';
+import { JwtModule } from '@nestjs/jwt';
+
+@Module({
+  controllers: [AuthDeviceController],
+  imports: [
+    JwtModule.register({
+      secret: process.env.JWT_SECRET_KEY,
+      signOptions: { expiresIn: '180 days' }
+    })
+  ],
+  providers: [AuthDeviceService, ConfigurationService, PrismaService]
+})
+export class AuthDeviceModule {}

apps/api/src/app/auth-device/auth-device.service.ts

@@ -0,0 +1,65 @@
+import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
+import { PrismaService } from '@ghostfolio/api/services/prisma.service';
+import { Injectable } from '@nestjs/common';
+import { AuthDevice, Prisma } from '@prisma/client';
+
+@Injectable()
+export class AuthDeviceService {
+  public constructor(
+    private readonly configurationService: ConfigurationService,
+    private prisma: PrismaService
+  ) {}
+
+  public async authDevice(
+    where: Prisma.AuthDeviceWhereUniqueInput
+  ): Promise<AuthDevice | null> {
+    return this.prisma.authDevice.findUnique({
+      where
+    });
+  }
+
+  public async authDevices(params: {
+    skip?: number;
+    take?: number;
+    cursor?: Prisma.AuthDeviceWhereUniqueInput;
+    where?: Prisma.AuthDeviceWhereInput;
+    orderBy?: Prisma.AuthDeviceOrderByInput;
+  }): Promise<AuthDevice[]> {
+    const { skip, take, cursor, where, orderBy } = params;
+    return this.prisma.authDevice.findMany({
+      skip,
+      take,
+      cursor,
+      where,
+      orderBy
+    });
+  }
+
+  public async createAuthDevice(
+    data: Prisma.AuthDeviceCreateInput
+  ): Promise<AuthDevice> {
+    return this.prisma.authDevice.create({
+      data
+    });
+  }
+
+  public async updateAuthDevice(params: {
+    data: Prisma.AuthDeviceUpdateInput;
+    where: Prisma.AuthDeviceWhereUniqueInput;
+  }): Promise<AuthDevice> {
+    const { data, where } = params;
+
+    return this.prisma.authDevice.update({
+      data,
+      where
+    });
+  }
+
+  public async deleteAuthDevice(
+    where: Prisma.AuthDeviceWhereUniqueInput
+  ): Promise<AuthDevice> {
+    return this.prisma.authDevice.delete({
+      where
+    });
+  }
+}

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

@@ -1,9 +1,12 @@
+import { WebAuthService } from '@ghostfolio/api/app/auth/web-auth.service';
 import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
 import {
+  Body,
   Controller,
   Get,
   HttpException,
   Param,
+  Post,
   Req,
   Res,
   UseGuards
@@ -12,12 +15,17 @@ import { AuthGuard } from '@nestjs/passport';
 import { StatusCodes, getReasonPhrase } from 'http-status-codes';
 
 import { AuthService } from './auth.service';
+import {
+  AssertionCredentialJSON,
+  AttestationCredentialJSON
+} from './interfaces/simplewebauthn';
 
 @Controller('auth')
 export class AuthController {
   public constructor(
     private readonly authService: AuthService,
-    private readonly configurationService: ConfigurationService
+    private readonly configurationService: ConfigurationService,
+    private readonly webAuthService: WebAuthService
   ) {}
 
   @Get('anonymous/:accessToken')
@@ -53,4 +61,44 @@ export class AuthController {
       res.redirect(`${this.configurationService.get('ROOT_URL')}/auth`);
     }
   }
+
+  @Get('webauthn/generate-attestation-options')
+  @UseGuards(AuthGuard('jwt'))
+  public async generateAttestationOptions() {
+    return this.webAuthService.generateAttestationOptions();
+  }
+
+  @Post('webauthn/verify-attestation')
+  @UseGuards(AuthGuard('jwt'))
+  public async verifyAttestation(
+    @Body() body: { deviceName: string; credential: AttestationCredentialJSON }
+  ) {
+    return this.webAuthService.verifyAttestation(
+      body.deviceName,
+      body.credential
+    );
+  }
+
+  @Post('webauthn/generate-assertion-options')
+  public async generateAssertionOptions(@Body() body: { deviceId: string }) {
+    return this.webAuthService.generateAssertionOptions(body.deviceId);
+  }
+
+  @Post('webauthn/verify-assertion')
+  public async verifyAssertion(
+    @Body() body: { deviceId: string; credential: AssertionCredentialJSON }
+  ) {
+    try {
+      const authToken = await this.webAuthService.verifyAssertion(
+        body.deviceId,
+        body.credential
+      );
+      return { authToken };
+    } catch {
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.FORBIDDEN),
+        StatusCodes.FORBIDDEN
+      );
+    }
+  }
 }

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

@@ -1,3 +1,5 @@
+import { AuthDeviceService } from '@ghostfolio/api/app/auth-device/auth-device.service';
+import { WebAuthService } from '@ghostfolio/api/app/auth/web-auth.service';
 import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
 import { PrismaService } from '@ghostfolio/api/services/prisma.service';
 import { Module } from '@nestjs/common';
@@ -18,12 +20,14 @@ import { JwtStrategy } from './jwt.strategy';
     })
   ],
   providers: [
+    AuthDeviceService,
     AuthService,
     ConfigurationService,
     GoogleStrategy,
     JwtStrategy,
     PrismaService,
-    UserService
+    UserService,
+    WebAuthService
   ]
 })
 export class AuthModule {}

apps/api/src/app/auth/interfaces/interfaces.ts

@@ -1,5 +1,10 @@
+import { AuthDeviceDto } from '@ghostfolio/api/app/auth-device/auth-device.dto';
 import { Provider } from '@prisma/client';
 
+export interface AuthDeviceDialogParams {
+  authDevice: AuthDeviceDto;
+}
+
 export interface ValidateOAuthLoginParams {
   provider: Provider;
   thirdPartyId: string;

apps/api/src/app/auth/interfaces/simplewebauthn.ts

@@ -0,0 +1,226 @@
+export interface AuthenticatorAssertionResponse extends AuthenticatorResponse {
+  readonly authenticatorData: ArrayBuffer;
+  readonly signature: ArrayBuffer;
+  readonly userHandle: ArrayBuffer | null;
+}
+export interface AuthenticatorAttestationResponse
+  extends AuthenticatorResponse {
+  readonly attestationObject: ArrayBuffer;
+}
+export interface AuthenticationExtensionsClientInputs {
+  appid?: string;
+  appidExclude?: string;
+  credProps?: boolean;
+  uvm?: boolean;
+}
+export interface AuthenticationExtensionsClientOutputs {
+  appid?: boolean;
+  credProps?: CredentialPropertiesOutput;
+  uvm?: UvmEntries;
+}
+export interface AuthenticatorSelectionCriteria {
+  authenticatorAttachment?: AuthenticatorAttachment;
+  requireResidentKey?: boolean;
+  residentKey?: ResidentKeyRequirement;
+  userVerification?: UserVerificationRequirement;
+}
+export interface PublicKeyCredential extends Credential {
+  readonly rawId: ArrayBuffer;
+  readonly response: AuthenticatorResponse;
+  getClientExtensionResults(): AuthenticationExtensionsClientOutputs;
+}
+export interface PublicKeyCredentialCreationOptions {
+  attestation?: AttestationConveyancePreference;
+  authenticatorSelection?: AuthenticatorSelectionCriteria;
+  challenge: BufferSource;
+  excludeCredentials?: PublicKeyCredentialDescriptor[];
+  extensions?: AuthenticationExtensionsClientInputs;
+  pubKeyCredParams: PublicKeyCredentialParameters[];
+  rp: PublicKeyCredentialRpEntity;
+  timeout?: number;
+  user: PublicKeyCredentialUserEntity;
+}
+export interface PublicKeyCredentialDescriptor {
+  id: BufferSource;
+  transports?: AuthenticatorTransport[];
+  type: PublicKeyCredentialType;
+}
+export interface PublicKeyCredentialParameters {
+  alg: COSEAlgorithmIdentifier;
+  type: PublicKeyCredentialType;
+}
+export interface PublicKeyCredentialRequestOptions {
+  allowCredentials?: PublicKeyCredentialDescriptor[];
+  challenge: BufferSource;
+  extensions?: AuthenticationExtensionsClientInputs;
+  rpId?: string;
+  timeout?: number;
+  userVerification?: UserVerificationRequirement;
+}
+export interface PublicKeyCredentialUserEntity
+  extends PublicKeyCredentialEntity {
+  displayName: string;
+  id: BufferSource;
+}
+export interface AuthenticatorResponse {
+  readonly clientDataJSON: ArrayBuffer;
+}
+export interface CredentialPropertiesOutput {
+  rk?: boolean;
+}
+export interface Credential {
+  readonly id: string;
+  readonly type: string;
+}
+export interface PublicKeyCredentialRpEntity extends PublicKeyCredentialEntity {
+  id?: string;
+}
+export interface PublicKeyCredentialEntity {
+  name: string;
+}
+export declare type AttestationConveyancePreference =
+  | 'direct'
+  | 'enterprise'
+  | 'indirect'
+  | 'none';
+export declare type AuthenticatorTransport = 'ble' | 'internal' | 'nfc' | 'usb';
+export declare type COSEAlgorithmIdentifier = number;
+export declare type UserVerificationRequirement =
+  | 'discouraged'
+  | 'preferred'
+  | 'required';
+export declare type UvmEntries = UvmEntry[];
+export declare type AuthenticatorAttachment = 'cross-platform' | 'platform';
+export declare type ResidentKeyRequirement =
+  | 'discouraged'
+  | 'preferred'
+  | 'required';
+export declare type BufferSource = ArrayBufferView | ArrayBuffer;
+export declare type PublicKeyCredentialType = 'public-key';
+export declare type UvmEntry = number[];
+
+export interface PublicKeyCredentialCreationOptionsJSON
+  extends Omit<
+    PublicKeyCredentialCreationOptions,
+    'challenge' | 'user' | 'excludeCredentials'
+  > {
+  user: PublicKeyCredentialUserEntityJSON;
+  challenge: Base64URLString;
+  excludeCredentials: PublicKeyCredentialDescriptorJSON[];
+  extensions?: AuthenticationExtensionsClientInputs;
+}
+/**
+ * A variant of PublicKeyCredentialRequestOptions suitable for JSON transmission to the browser to
+ * (eventually) get passed into navigator.credentials.get(...) in the browser.
+ */
+export interface PublicKeyCredentialRequestOptionsJSON
+  extends Omit<
+    PublicKeyCredentialRequestOptions,
+    'challenge' | 'allowCredentials'
+  > {
+  challenge: Base64URLString;
+  allowCredentials?: PublicKeyCredentialDescriptorJSON[];
+  extensions?: AuthenticationExtensionsClientInputs;
+}
+export interface PublicKeyCredentialDescriptorJSON
+  extends Omit<PublicKeyCredentialDescriptor, 'id'> {
+  id: Base64URLString;
+}
+export interface PublicKeyCredentialUserEntityJSON
+  extends Omit<PublicKeyCredentialUserEntity, 'id'> {
+  id: string;
+}
+/**
+ * The value returned from navigator.credentials.create()
+ */
+export interface AttestationCredential extends PublicKeyCredential {
+  response: AuthenticatorAttestationResponseFuture;
+}
+/**
+ * A slightly-modified AttestationCredential to simplify working with ArrayBuffers that
+ * are Base64URL-encoded in the browser so that they can be sent as JSON to the server.
+ */
+export interface AttestationCredentialJSON
+  extends Omit<
+    AttestationCredential,
+    'response' | 'rawId' | 'getClientExtensionResults'
+  > {
+  rawId: Base64URLString;
+  response: AuthenticatorAttestationResponseJSON;
+  clientExtensionResults: AuthenticationExtensionsClientOutputs;
+  transports?: AuthenticatorTransport[];
+}
+/**
+ * The value returned from navigator.credentials.get()
+ */
+export interface AssertionCredential extends PublicKeyCredential {
+  response: AuthenticatorAssertionResponse;
+}
+/**
+ * A slightly-modified AssertionCredential to simplify working with ArrayBuffers that
+ * are Base64URL-encoded in the browser so that they can be sent as JSON to the server.
+ */
+export interface AssertionCredentialJSON
+  extends Omit<
+    AssertionCredential,
+    'response' | 'rawId' | 'getClientExtensionResults'
+  > {
+  rawId: Base64URLString;
+  response: AuthenticatorAssertionResponseJSON;
+  clientExtensionResults: AuthenticationExtensionsClientOutputs;
+}
+/**
+ * A slightly-modified AuthenticatorAttestationResponse to simplify working with ArrayBuffers that
+ * are Base64URL-encoded in the browser so that they can be sent as JSON to the server.
+ */
+export interface AuthenticatorAttestationResponseJSON
+  extends Omit<
+    AuthenticatorAttestationResponseFuture,
+    'clientDataJSON' | 'attestationObject'
+  > {
+  clientDataJSON: Base64URLString;
+  attestationObject: Base64URLString;
+}
+/**
+ * A slightly-modified AuthenticatorAssertionResponse to simplify working with ArrayBuffers that
+ * are Base64URL-encoded in the browser so that they can be sent as JSON to the server.
+ */
+export interface AuthenticatorAssertionResponseJSON
+  extends Omit<
+    AuthenticatorAssertionResponse,
+    'authenticatorData' | 'clientDataJSON' | 'signature' | 'userHandle'
+  > {
+  authenticatorData: Base64URLString;
+  clientDataJSON: Base64URLString;
+  signature: Base64URLString;
+  userHandle?: string;
+}
+/**
+ * A WebAuthn-compatible device and the information needed to verify assertions by it
+ */
+export declare type AuthenticatorDevice = {
+  credentialPublicKey: Buffer;
+  credentialID: Buffer;
+  counter: number;
+  transports?: AuthenticatorTransport[];
+};
+/**
+ * An attempt to communicate that this isn't just any string, but a Base64URL-encoded string
+ */
+export declare type Base64URLString = string;
+/**
+ * AuthenticatorAttestationResponse in TypeScript's DOM lib is outdated (up through v3.9.7).
+ * Maintain an augmented version here so we can implement additional properties as the WebAuthn
+ * spec evolves.
+ *
+ * See https://www.w3.org/TR/webauthn-2/#iface-authenticatorattestationresponse
+ *
+ * Properties marked optional are not supported in all browsers.
+ */
+export interface AuthenticatorAttestationResponseFuture
+  extends AuthenticatorAttestationResponse {
+  getTransports?: () => AuthenticatorTransport[];
+  getAuthenticatorData?: () => ArrayBuffer;
+  getPublicKey?: () => ArrayBuffer;
+  getPublicKeyAlgorithm?: () => COSEAlgorithmIdentifier[];
+}

apps/api/src/app/auth/web-auth.service.ts

@@ -0,0 +1,216 @@
+import { AuthDeviceDto } from '@ghostfolio/api/app/auth-device/auth-device.dto';
+import { AuthDeviceService } from '@ghostfolio/api/app/auth-device/auth-device.service';
+import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
+import { RequestWithUser } from '@ghostfolio/common/types';
+import {
+  Inject,
+  Injectable,
+  InternalServerErrorException
+} from '@nestjs/common';
+import { REQUEST } from '@nestjs/core';
+import { JwtService } from '@nestjs/jwt';
+import {
+  GenerateAssertionOptionsOpts,
+  GenerateAttestationOptionsOpts,
+  VerifiedAssertion,
+  VerifiedAttestation,
+  VerifyAssertionResponseOpts,
+  VerifyAttestationResponseOpts,
+  generateAssertionOptions,
+  generateAttestationOptions,
+  verifyAssertionResponse,
+  verifyAttestationResponse
+} from '@simplewebauthn/server';
+
+import { UserService } from '../user/user.service';
+import {
+  AssertionCredentialJSON,
+  AttestationCredentialJSON
+} from './interfaces/simplewebauthn';
+
+@Injectable()
+export class WebAuthService {
+  public constructor(
+    private readonly configurationService: ConfigurationService,
+    private readonly deviceService: AuthDeviceService,
+    private readonly jwtService: JwtService,
+    private readonly userService: UserService,
+    @Inject(REQUEST) private readonly request: RequestWithUser
+  ) {}
+
+  get rpID() {
+    return this.configurationService.get('WEB_AUTH_RP_ID');
+  }
+
+  get expectedOrigin() {
+    return this.configurationService.get('ROOT_URL');
+  }
+
+  public async generateAttestationOptions() {
+    const user = this.request.user;
+
+    const opts: GenerateAttestationOptionsOpts = {
+      rpName: 'Ghostfolio',
+      rpID: this.rpID,
+      userID: user.id,
+      userName: user.alias,
+      timeout: 60000,
+      attestationType: 'indirect',
+      authenticatorSelection: {
+        authenticatorAttachment: 'platform',
+        requireResidentKey: false,
+        userVerification: 'required'
+      }
+    };
+
+    const options = generateAttestationOptions(opts);
+
+    await this.userService.updateUser({
+      data: {
+        authChallenge: options.challenge
+      },
+      where: {
+        id: user.id
+      }
+    });
+
+    return options;
+  }
+
+  public async verifyAttestation(
+    deviceName: string,
+    credential: AttestationCredentialJSON
+  ): Promise<AuthDeviceDto> {
+    const user = this.request.user;
+    const expectedChallenge = user.authChallenge;
+
+    let verification: VerifiedAttestation;
+    try {
+      const opts: VerifyAttestationResponseOpts = {
+        credential,
+        expectedChallenge,
+        expectedOrigin: this.expectedOrigin,
+        expectedRPID: this.rpID
+      };
+      verification = await verifyAttestationResponse(opts);
+    } catch (error) {
+      console.error(error);
+      throw new InternalServerErrorException(error.message);
+    }
+
+    const { verified, attestationInfo } = verification;
+
+    const devices = await this.deviceService.authDevices({
+      where: { userId: user.id }
+    });
+    if (verified && attestationInfo) {
+      const { credentialPublicKey, credentialID, counter } = attestationInfo;
+
+      let existingDevice = devices.find(
+        (device) => device.credentialId === credentialID
+      );
+
+      if (!existingDevice) {
+        /**
+         * Add the returned device to the user's list of devices
+         */
+        existingDevice = await this.deviceService.createAuthDevice({
+          credentialPublicKey,
+          credentialId: credentialID,
+          counter,
+          User: { connect: { id: user.id } }
+        });
+      }
+
+      return {
+        createdAt: existingDevice.createdAt.toISOString(),
+        id: existingDevice.id
+      };
+    }
+
+    throw new InternalServerErrorException('An unknown error occurred');
+  }
+
+  public async generateAssertionOptions(deviceId: string) {
+    const device = await this.deviceService.authDevice({ id: deviceId });
+
+    if (!device) {
+      throw new Error('Device not found');
+    }
+
+    const opts: GenerateAssertionOptionsOpts = {
+      timeout: 60000,
+      allowCredentials: [
+        {
+          id: device.credentialId,
+          type: 'public-key',
+          transports: ['internal']
+        }
+      ],
+      userVerification: 'preferred',
+      rpID: this.rpID
+    };
+
+    const options = generateAssertionOptions(opts);
+
+    await this.userService.updateUser({
+      data: {
+        authChallenge: options.challenge
+      },
+      where: {
+        id: device.userId
+      }
+    });
+
+    return options;
+  }
+
+  public async verifyAssertion(
+    deviceId: string,
+    credential: AssertionCredentialJSON
+  ) {
+    const device = await this.deviceService.authDevice({ id: deviceId });
+
+    if (!device) {
+      throw new Error('Device not found');
+    }
+
+    const user = await this.userService.user({ id: device.userId });
+
+    let verification: VerifiedAssertion;
+    try {
+      const opts: VerifyAssertionResponseOpts = {
+        credential,
+        expectedChallenge: `${user.authChallenge}`,
+        expectedOrigin: this.expectedOrigin,
+        expectedRPID: this.rpID,
+        authenticator: {
+          credentialID: device.credentialId,
+          credentialPublicKey: device.credentialPublicKey,
+          counter: device.counter
+        }
+      };
+      verification = verifyAssertionResponse(opts);
+    } catch (error) {
+      console.error(error);
+      throw new InternalServerErrorException({ error: error.message });
+    }
+
+    const { verified, assertionInfo } = verification;
+
+    if (verified) {
+      device.counter = assertionInfo.newCounter;
+
+      await this.deviceService.updateAuthDevice({
+        data: device,
+        where: { id: device.id }
+      });
+
+      return this.jwtService.sign({
+        id: user.id
+      });
+    }
+
+    throw new Error();
+  }
+}

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

@@ -37,7 +37,9 @@ export class ExperimentalController {
       );
     }
 
-    return benchmarks;
+    return benchmarks.map(({ symbol }) => {
+      return symbol;
+    });
   }
 
   @Get('benchmarks/:symbol')

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

@@ -44,6 +44,7 @@ export class ExperimentalService {
         fee: 0,
         id: undefined,
         platformId: undefined,
+        symbolProfileId: undefined,
         type: Type.BUY,
         updatedAt: undefined,
         userId: undefined

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

@@ -1,10 +1,13 @@
 import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
 import { PrismaService } from '@ghostfolio/api/services/prisma.service';
 import { InfoItem } from '@ghostfolio/common/interfaces';
+import { Subscription } from '@ghostfolio/common/interfaces/subscription.interface';
 import { permissions } from '@ghostfolio/common/permissions';
 import { Injectable } from '@nestjs/common';
 import { JwtService } from '@nestjs/jwt';
 import { Currency } from '@prisma/client';
+import * as bent from 'bent';
+import { subDays } from 'date-fns';
 
 @Injectable()
 export class InfoService {
@@ -28,6 +31,10 @@ export class InfoService {
       globalPermissions.push(permissions.enableSocialLogin);
     }
 
+    if (this.configurationService.get('ENABLE_FEATURE_STATISTICS')) {
+      globalPermissions.push(permissions.enableStatistics);
+    }
+
     if (this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION')) {
       globalPermissions.push(permissions.enableSubscription);
     }
@@ -37,10 +44,59 @@ export class InfoService {
       platforms,
       currencies: Object.values(Currency),
       demoAuthToken: this.getDemoAuthToken(),
-      lastDataGathering: await this.getLastDataGathering()
+      lastDataGathering: await this.getLastDataGathering(),
+      statistics: await this.getStatistics(),
+      subscriptions: await this.getSubscriptions()
     };
   }
 
+  private async countActiveUsers(aDays: number) {
+    return await this.prisma.user.count({
+      orderBy: {
+        Analytics: {
+          updatedAt: 'desc'
+        }
+      },
+      where: {
+        AND: [
+          {
+            NOT: {
+              Analytics: null
+            }
+          },
+          {
+            Analytics: {
+              updatedAt: {
+                gt: subDays(new Date(), aDays)
+              }
+            }
+          }
+        ]
+      }
+    });
+  }
+
+  private async countGitHubStargazers(): Promise<number> {
+    try {
+      const get = bent(
+        `https://api.github.com/repos/ghostfolio/ghostfolio`,
+        'GET',
+        'json',
+        200,
+        {
+          'User-Agent': 'request'
+        }
+      );
+
+      const { stargazers_count } = await get();
+      return stargazers_count;
+    } catch (error) {
+      console.error(error);
+
+      return undefined;
+    }
+  }
+
   private getDemoAuthToken() {
     return this.jwtService.sign({
       id: InfoService.DEMO_USER_ID
@@ -54,4 +110,36 @@ export class InfoService {
 
     return lastDataGathering?.value ? new Date(lastDataGathering.value) : null;
   }
+
+  private async getStatistics() {
+    if (!this.configurationService.get('ENABLE_FEATURE_STATISTICS')) {
+      return undefined;
+    }
+
+    const activeUsers1d = await this.countActiveUsers(1);
+    const activeUsers30d = await this.countActiveUsers(30);
+    const gitHubStargazers = await this.countGitHubStargazers();
+
+    return {
+      activeUsers1d,
+      activeUsers30d,
+      gitHubStargazers
+    };
+  }
+
+  private async getSubscriptions(): Promise<Subscription[]> {
+    if (!this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION')) {
+      return undefined;
+    }
+
+    const stripeConfig = await this.prisma.property.findUnique({
+      where: { key: 'STRIPE_CONFIG' }
+    });
+
+    if (stripeConfig) {
+      return [JSON.parse(stripeConfig.value)];
+    }
+
+    return [];
+  }
 }

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/order/order.controller.ts

@@ -68,10 +68,11 @@ export class OrderController {
   public async getAllOrders(
     @Headers('impersonation-id') impersonationId
   ): Promise<OrderModel[]> {
-    const impersonationUserId = await this.impersonationService.validateImpersonationId(
-      impersonationId,
-      this.request.user.id
-    );
+    const impersonationUserId =
+      await this.impersonationService.validateImpersonationId(
+        impersonationId,
+        this.request.user.id
+      );
 
     let orders = await this.orderService.orders({
       include: {
@@ -132,12 +133,26 @@ export class OrderController {
     return this.orderService.createOrder(
       {
         ...data,
-        date,
         Account: {
           connect: {
             id_userId: { id: accountId, userId: this.request.user.id }
           }
         },
+        date,
+        SymbolProfile: {
+          connectOrCreate: {
+            where: {
+              dataSource_symbol: {
+                dataSource: data.dataSource,
+                symbol: data.symbol
+              }
+            },
+            create: {
+              dataSource: data.dataSource,
+              symbol: data.symbol
+            }
+          }
+        },
         User: { connect: { id: this.request.user.id } }
       },
       this.request.user.id

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

@@ -2,7 +2,8 @@ import { DataGatheringService } from '@ghostfolio/api/services/data-gathering.se
 import { PrismaService } from '@ghostfolio/api/services/prisma.service';
 import { OrderWithAccount } from '@ghostfolio/common/types';
 import { Injectable } from '@nestjs/common';
-import { Order, Prisma } from '@prisma/client';
+import { DataSource, Order, Prisma } from '@prisma/client';
+import { endOfToday, isAfter } from 'date-fns';
 
 import { CacheService } from '../cache/cache.service';
 import { RedisCacheService } from '../redis-cache/redis-cache.service';
@@ -50,13 +51,16 @@ export class OrderService {
   ): Promise<Order> {
     this.redisCacheService.remove(`${aUserId}.portfolio`);
 
-    // Gather symbol data of order in the background
-    this.dataGatheringService.gatherSymbols([
-      {
-        date: <Date>data.date,
-        symbol: data.symbol
-      }
-    ]);
+    if (!isAfter(data.date as Date, endOfToday())) {
+      // Gather symbol data of order in the background, if not draft
+      this.dataGatheringService.gatherSymbols([
+        {
+          dataSource: data.dataSource,
+          date: <Date>data.date,
+          symbol: data.symbol
+        }
+      ]);
+    }
 
     await this.cacheService.flush(aUserId);
 
@@ -90,6 +94,7 @@ export class OrderService {
     // Gather symbol data of order in the background
     this.dataGatheringService.gatherSymbols([
       {
+        dataSource: <DataSource>data.dataSource,
         date: <Date>data.date,
         symbol: <string>data.symbol
       }

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,27 +309,16 @@ 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
     );
 
-    let report = await portfolio.getReport();
-
-    if (
-      impersonationId &&
-      !hasPermission(
-        getPermissions(this.request.user.role),
-        permissions.readForeignPortfolio
-      )
-    ) {
-      // TODO: Filter out absolute numbers
-    }
-
-    return report;
+    return await portfolio.getReport();
   }
 }

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';
@@ -11,14 +15,17 @@ import {
 import { DateRange, RequestWithUser } from '@ghostfolio/common/types';
 import { Inject, Injectable } from '@nestjs/common';
 import { REQUEST } from '@nestjs/core';
+import { DataSource } from '@prisma/client';
 import {
   add,
+  endOfToday,
   format,
   getDate,
   getMonth,
   getYear,
   isAfter,
   isSameDay,
+  parse,
   parseISO,
   setDate,
   setMonth,
@@ -27,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
@@ -38,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,
@@ -50,7 +55,7 @@ export class PortfolioService {
 
   public async createPortfolio(aUserId: string): Promise<Portfolio> {
     let portfolio: Portfolio;
-    let stringifiedPortfolio = await this.redisCacheService.get(
+    const stringifiedPortfolio = await this.redisCacheService.get(
       `${aUserId}.portfolio`
     );
 
@@ -61,9 +66,8 @@ export class PortfolioService {
       const {
         orders,
         portfolioItems
-      }: { orders: IOrder[]; portfolioItems: PortfolioItem[] } = JSON.parse(
-        stringifiedPortfolio
-      );
+      }: { orders: IOrder[]; portfolioItems: PortfolioItem[] } =
+        JSON.parse(stringifiedPortfolio);
 
       portfolio = new Portfolio(
         this.dataProviderService,
@@ -74,7 +78,8 @@ export class PortfolioService {
       // Get portfolio from database
       const orders = await this.orderService.orders({
         include: {
-          Account: true
+          Account: true,
+          SymbolProfile: true
         },
         orderBy: { date: 'asc' },
         where: { userId: aUserId }
@@ -101,15 +106,21 @@ export class PortfolioService {
     }
 
     // Enrich portfolio with current data
-    return await portfolio.addCurrentPortfolioItems();
+    await portfolio.addCurrentPortfolioItems();
+
+    // Enrich portfolio with future data
+    await portfolio.addFuturePortfolioItems();
+
+    return portfolio;
   }
 
   public async findAll(aImpersonationId: string): Promise<PortfolioItem[]> {
     try {
-      const impersonationUserId = await this.impersonationService.validateImpersonationId(
-        aImpersonationId,
-        this.request.user.id
-      );
+      const impersonationUserId =
+        await this.impersonationService.validateImpersonationId(
+          aImpersonationId,
+          this.request.user.id
+        );
 
       const portfolio = await this.createPortfolio(
         impersonationUserId || this.request.user.id
@@ -124,10 +135,11 @@ export class PortfolioService {
     aImpersonationId: string,
     aDateRange: DateRange = 'max'
   ): Promise<HistoricalDataItem[]> {
-    const impersonationUserId = await this.impersonationService.validateImpersonationId(
-      aImpersonationId,
-      this.request.user.id
-    );
+    const impersonationUserId =
+      await this.impersonationService.validateImpersonationId(
+        aImpersonationId,
+        this.request.user.id
+      );
 
     const portfolio = await this.createPortfolio(
       impersonationUserId || this.request.user.id
@@ -145,6 +157,11 @@ export class PortfolioService {
     return portfolio
       .get()
       .filter((portfolioItem) => {
+        if (isAfter(parseISO(portfolioItem.date), endOfToday())) {
+          // Filter out future dates
+          return false;
+        }
+
         if (dateRangeDate === undefined) {
           return true;
         }
@@ -158,8 +175,8 @@ export class PortfolioService {
         return {
           date: format(parseISO(portfolioItem.date), 'yyyy-MM-dd'),
           grossPerformancePercent: portfolioItem.grossPerformancePercent,
-          marketPrice: portfolioItem.value || null,
-          value: portfolioItem.value || null
+          marketPrice: portfolioItem.value ?? null,
+          value: portfolioItem.value - portfolioItem.investment ?? null
         };
       });
   }
@@ -167,19 +184,25 @@ export class PortfolioService {
   public async getOverview(
     aImpersonationId: string
   ): Promise<PortfolioOverview> {
-    const impersonationUserId = await this.impersonationService.validateImpersonationId(
-      aImpersonationId,
-      this.request.user.id
-    );
+    const impersonationUserId =
+      await this.impersonationService.validateImpersonationId(
+        aImpersonationId,
+        this.request.user.id
+      );
 
     const portfolio = await this.createPortfolio(
       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,
@@ -192,10 +215,11 @@ export class PortfolioService {
     aImpersonationId: string,
     aSymbol: string
   ): Promise<PortfolioPositionDetail> {
-    const impersonationUserId = await this.impersonationService.validateImpersonationId(
-      aImpersonationId,
-      this.request.user.id
-    );
+    const impersonationUserId =
+      await this.impersonationService.validateImpersonationId(
+        aImpersonationId,
+        this.request.user.id
+      );
 
     const portfolio = await this.createPortfolio(
       impersonationUserId || this.request.user.id
@@ -214,6 +238,8 @@ export class PortfolioService {
         transactionCount
       } = portfolio.getPositions(new Date())[aSymbol];
 
+      const orders = portfolio.getOrders(aSymbol);
+
       const historicalData = await this.dataProviderService.getHistorical(
         [aSymbol],
         'day',
@@ -226,6 +252,7 @@ export class PortfolioService {
       }
 
       const historicalDataArray: HistoricalDataItem[] = [];
+      let currentAveragePrice: number;
       let maxPrice = marketPrice;
       let minPrice = marketPrice;
 
@@ -233,9 +260,24 @@ export class PortfolioService {
         for (const [date, { marketPrice }] of Object.entries(
           historicalData[aSymbol]
         )) {
+          const currentDate = parse(date, 'yyyy-MM-dd', new Date());
+          if (
+            isSameDay(currentDate, parseISO(orders[0]?.getDate())) ||
+            isAfter(currentDate, parseISO(orders[0]?.getDate()))
+          ) {
+            // Get snapshot of first day of month
+            const snapshot = portfolio.get(setDate(currentDate, 1))[0]
+              .positions[aSymbol];
+            orders.shift();
+
+            if (snapshot?.averagePrice) {
+              currentAveragePrice = snapshot?.averagePrice;
+            }
+          }
+
           historicalDataArray.push({
-            averagePrice,
             date,
+            averagePrice: currentAveragePrice,
             value: marketPrice
           });
 
@@ -289,7 +331,7 @@ export class PortfolioService {
 
       if (isEmpty(historicalData)) {
         historicalData = await this.dataProviderService.getHistoricalRaw(
-          [aSymbol],
+          [{ dataSource: DataSource.YAHOO, symbol: aSymbol }],
           portfolio.getMinDate(),
           new Date()
         );
@@ -297,7 +339,7 @@ export class PortfolioService {
 
       const historicalDataArray: HistoricalDataItem[] = [];
 
-      for (const [date, { marketPrice, performance }] of Object.entries(
+      for (const [date, { marketPrice }] of Object.entries(
         historicalData[aSymbol]
       ).reverse()) {
         historicalDataArray.push({

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

@@ -0,0 +1,57 @@
+import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
+import { RequestWithUser } from '@ghostfolio/common/types';
+import {
+  Body,
+  Controller,
+  Get,
+  HttpException,
+  Inject,
+  Post,
+  Req,
+  Res,
+  UseGuards
+} from '@nestjs/common';
+import { REQUEST } from '@nestjs/core';
+import { AuthGuard } from '@nestjs/passport';
+import { StatusCodes, getReasonPhrase } from 'http-status-codes';
+
+import { SubscriptionService } from './subscription.service';
+
+@Controller('subscription')
+export class SubscriptionController {
+  public constructor(
+    private readonly configurationService: ConfigurationService,
+    @Inject(REQUEST) private readonly request: RequestWithUser,
+    private readonly subscriptionService: SubscriptionService
+  ) {}
+
+  @Get('stripe/callback')
+  public async stripeCallback(@Req() req, @Res() res) {
+    await this.subscriptionService.createSubscription(
+      req.query.checkoutSessionId
+    );
+
+    res.redirect(`${this.configurationService.get('ROOT_URL')}/account`);
+  }
+
+  @Post('stripe/checkout-session')
+  @UseGuards(AuthGuard('jwt'))
+  public async createCheckoutSession(
+    @Body() { couponId, priceId }: { couponId: string; priceId: string }
+  ) {
+    try {
+      return await this.subscriptionService.createCheckoutSession({
+        couponId,
+        priceId,
+        userId: this.request.user.id
+      });
+    } catch (error) {
+      console.error(error);
+
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.BAD_REQUEST),
+        StatusCodes.BAD_REQUEST
+      );
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
+import { PrismaService } from '@ghostfolio/api/services/prisma.service';
+import { Module } from '@nestjs/common';
+
+import { SubscriptionController } from './subscription.controller';
+import { SubscriptionService } from './subscription.service';
+
+@Module({
+  imports: [],
+  controllers: [SubscriptionController],
+  providers: [ConfigurationService, PrismaService, SubscriptionService]
+})
+export class SubscriptionModule {}

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

@@ -0,0 +1,89 @@
+import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
+import { PrismaService } from '@ghostfolio/api/services/prisma.service';
+import { Injectable } from '@nestjs/common';
+import { addDays } from 'date-fns';
+import Stripe from 'stripe';
+
+@Injectable()
+export class SubscriptionService {
+  private stripe: Stripe;
+
+  public constructor(
+    private readonly configurationService: ConfigurationService,
+    private prisma: PrismaService
+  ) {
+    this.stripe = new Stripe(
+      this.configurationService.get('STRIPE_SECRET_KEY'),
+      {
+        apiVersion: '2020-08-27'
+      }
+    );
+  }
+
+  public async createCheckoutSession({
+    couponId,
+    priceId,
+    userId
+  }: {
+    couponId?: string;
+    priceId: string;
+    userId: string;
+  }) {
+    const checkoutSessionCreateParams: Stripe.Checkout.SessionCreateParams = {
+      cancel_url: `${this.configurationService.get('ROOT_URL')}/account`,
+      client_reference_id: userId,
+      line_items: [
+        {
+          price: priceId,
+          quantity: 1
+        }
+      ],
+      mode: 'payment',
+      payment_method_types: ['card'],
+      success_url: `${this.configurationService.get(
+        'ROOT_URL'
+      )}/api/subscription/stripe/callback?checkoutSessionId={CHECKOUT_SESSION_ID}`
+    };
+
+    if (couponId) {
+      checkoutSessionCreateParams.discounts = [
+        {
+          coupon: couponId
+        }
+      ];
+    }
+
+    const session = await this.stripe.checkout.sessions.create(
+      checkoutSessionCreateParams
+    );
+
+    return {
+      sessionId: session.id
+    };
+  }
+
+  public async createSubscription(aCheckoutSessionId: string) {
+    try {
+      const session = await this.stripe.checkout.sessions.retrieve(
+        aCheckoutSessionId
+      );
+
+      await this.prisma.subscription.create({
+        data: {
+          expiresAt: addDays(new Date(), 365),
+          User: {
+            connect: {
+              id: session.client_reference_id
+            }
+          }
+        }
+      });
+
+      await this.stripe.customers.update(session.customer as string, {
+        description: session.client_reference_id
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  }
+}

apps/api/src/app/user/interfaces/user-settings-params.interface.ts

@@ -0,0 +1,7 @@
+import { Currency, ViewMode } from '@prisma/client';
+
+export interface UserSettingsParams {
+  currency?: Currency;
+  userId: string;
+  viewMode?: ViewMode;
+}

apps/api/src/app/user/update-user-settings.dto.ts

@@ -1,7 +1,10 @@
-import { Currency } from '@prisma/client';
+import { Currency, ViewMode } from '@prisma/client';
 import { IsString } from 'class-validator';
 
 export class UpdateUserSettingsDto {
   @IsString()
-  currency: Currency;
+  baseCurrency: Currency;
+
+  @IsString()
+  viewMode: ViewMode;
 }

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

@@ -25,6 +25,7 @@ import { User as UserModel } from '@prisma/client';
 import { StatusCodes, getReasonPhrase } from 'http-status-codes';
 
 import { UserItem } from './interfaces/user-item.interface';
+import { UserSettingsParams } from './interfaces/user-settings-params.interface';
 import { UpdateUserSettingsDto } from './update-user-settings.dto';
 import { UserService } from './user.service';
 
@@ -92,9 +93,20 @@ export class UserController {
       );
     }
 
-    return await this.userService.updateUserSettings({
-      currency: data.currency,
+    const userSettings: UserSettingsParams = {
+      currency: data.baseCurrency,
       userId: this.request.user.id
-    });
+    };
+
+    if (
+      hasPermission(
+        getPermissions(this.request.user.role),
+        permissions.updateViewMode
+      )
+    ) {
+      userSettings.viewMode = data.viewMode;
+    }
+
+    return await this.userService.updateUserSettings(userSettings);
   }
 }

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

@@ -1,12 +1,14 @@
 import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
 import { PrismaService } from '@ghostfolio/api/services/prisma.service';
 import { locale } from '@ghostfolio/common/config';
-import { resetHours } from '@ghostfolio/common/helper';
 import { User as IUser, UserWithSettings } from '@ghostfolio/common/interfaces';
 import { getPermissions, permissions } from '@ghostfolio/common/permissions';
+import { SubscriptionType } from '@ghostfolio/common/types/subscription.type';
 import { Injectable } from '@nestjs/common';
-import { Currency, Prisma, Provider, User } from '@prisma/client';
-import { add } from 'date-fns';
+import { Currency, Prisma, Provider, User, ViewMode } from '@prisma/client';
+import { isBefore } from 'date-fns';
+
+import { UserSettingsParams } from './interfaces/user-settings-params.interface';
 
 const crypto = require('crypto');
 
@@ -23,8 +25,9 @@ export class UserService {
     Account,
     alias,
     id,
-    role,
-    Settings
+    permissions,
+    Settings,
+    subscription
   }: UserWithSettings): Promise<IUser> {
     const access = await this.prisma.access.findMany({
       include: {
@@ -34,15 +37,11 @@ export class UserService {
       where: { GranteeUser: { id } }
     });
 
-    const currentPermissions = getPermissions(role);
-
-    if (this.configurationService.get('ENABLE_FEATURE_FEAR_AND_GREED_INDEX')) {
-      currentPermissions.push(permissions.accessFearAndGreedIndex);
-    }
-
     return {
       alias,
       id,
+      permissions,
+      subscription,
       access: access.map((accessItem) => {
         return {
           alias: accessItem.User.alias,
@@ -50,14 +49,10 @@ export class UserService {
         };
       }),
       accounts: Account,
-      permissions: currentPermissions,
       settings: {
-        baseCurrency: Settings?.currency || UserService.DEFAULT_CURRENCY,
-        locale
-      },
-      subscription: {
-        expiresAt: resetHours(add(new Date(), { days: 7 })),
-        type: 'Trial'
+        locale,
+        baseCurrency: Settings?.currency ?? UserService.DEFAULT_CURRENCY,
+        viewMode: Settings?.viewMode ?? ViewMode.DEFAULT
       }
     };
   }
@@ -65,25 +60,64 @@ export class UserService {
   public async user(
     userWhereUniqueInput: Prisma.UserWhereUniqueInput
   ): Promise<UserWithSettings | null> {
-    const user = await this.prisma.user.findUnique({
-      include: { Account: true, Settings: true },
+    const userFromDatabase = await this.prisma.user.findUnique({
+      include: { Account: true, Settings: true, Subscription: true },
       where: userWhereUniqueInput
     });
 
-    if (user?.Settings) {
-      if (!user.Settings.currency) {
+    const user: UserWithSettings = userFromDatabase;
+
+    const currentPermissions = getPermissions(userFromDatabase.role);
+
+    if (this.configurationService.get('ENABLE_FEATURE_FEAR_AND_GREED_INDEX')) {
+      currentPermissions.push(permissions.accessFearAndGreedIndex);
+    }
+
+    user.permissions = currentPermissions;
+
+    if (userFromDatabase?.Settings) {
+      if (!userFromDatabase.Settings.currency) {
         // Set default currency if needed
-        user.Settings.currency = UserService.DEFAULT_CURRENCY;
+        userFromDatabase.Settings.currency = UserService.DEFAULT_CURRENCY;
       }
-    } else if (user) {
+    } else if (userFromDatabase) {
       // Set default settings if needed
-      user.Settings = {
+      userFromDatabase.Settings = {
         currency: UserService.DEFAULT_CURRENCY,
         updatedAt: new Date(),
-        userId: user?.id
+        userId: userFromDatabase?.id,
+        viewMode: ViewMode.DEFAULT
       };
     }
 
+    if (this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION')) {
+      if (userFromDatabase?.Subscription?.length > 0) {
+        const latestSubscription = userFromDatabase.Subscription.reduce(
+          (a, b) => {
+            return new Date(a.expiresAt) > new Date(b.expiresAt) ? a : b;
+          }
+        );
+
+        user.subscription = {
+          expiresAt: latestSubscription.expiresAt,
+          type: isBefore(new Date(), latestSubscription.expiresAt)
+            ? SubscriptionType.Premium
+            : SubscriptionType.Basic
+        };
+      } else {
+        user.subscription = {
+          type: SubscriptionType.Basic
+        };
+      }
+
+      if (user.subscription.type === SubscriptionType.Basic) {
+        user.permissions = user.permissions.filter((permission) => {
+          return permission !== permissions.updateViewMode;
+        });
+        user.Settings.viewMode = ViewMode.ZEN;
+      }
+    }
+
     return user;
   }
 
@@ -187,11 +221,9 @@ export class UserService {
 
   public async updateUserSettings({
     currency,
-    userId
-  }: {
-    currency: Currency;
-    userId: string;
-  }) {
+    userId,
+    viewMode
+  }: UserSettingsParams) {
     await this.prisma.settings.upsert({
       create: {
         currency,
@@ -199,10 +231,12 @@ export class UserService {
           connect: {
             id: userId
           }
-        }
+        },
+        viewMode
       },
       update: {
-        currency
+        currency,
+        viewMode
       },
       where: {
         userId: userId

apps/api/src/models/order.ts

@@ -1,4 +1,5 @@
-import { Account, Currency, Platform } from '@prisma/client';
+import { Account, Currency, SymbolProfile } from '@prisma/client';
+import { endOfToday, isAfter, parseISO } from 'date-fns';
 import { v4 as uuidv4 } from 'uuid';
 
 import { IOrder } from '../services/interfaces/interfaces';
@@ -12,6 +13,7 @@ export class Order {
   private id: string;
   private quantity: number;
   private symbol: string;
+  private symbolProfile: SymbolProfile;
   private total: number;
   private type: OrderType;
   private unitPrice: number;
@@ -24,6 +26,7 @@ export class Order {
     this.id = data.id || uuidv4();
     this.quantity = data.quantity;
     this.symbol = data.symbol;
+    this.symbolProfile = data.symbolProfile;
     this.type = data.type;
     this.unitPrice = data.unitPrice;
 
@@ -50,6 +53,10 @@ export class Order {
     return this.id;
   }
 
+  public getIsDraft() {
+    return isAfter(parseISO(this.date), endOfToday());
+  }
+
   public getQuantity() {
     return this.quantity;
   }
@@ -58,6 +65,10 @@ export class Order {
     return this.symbol;
   }
 
+  getSymbolProfile() {
+    return this.symbolProfile;
+  }
+
   public getTotal() {
     return this.total;
   }

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

@@ -1,6 +1,13 @@
 import { UNKNOWN_KEY, baseCurrency } from '@ghostfolio/common/config';
 import { getUtc, getYesterday } from '@ghostfolio/common/helper';
-import { AccountType, Currency, DataSource, Role, Type } from '@prisma/client';
+import {
+  AccountType,
+  Currency,
+  DataSource,
+  Role,
+  Type,
+  ViewMode
+} from '@prisma/client';
 import { format } from 'date-fns';
 
 import { DataProviderService } from '../services/data-provider.service';
@@ -103,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',
@@ -113,6 +122,7 @@ describe('Portfolio', () => {
         }
       ],
       alias: 'Test',
+      authChallenge: null,
       createdAt: new Date(),
       id: USER_ID,
       provider: null,
@@ -120,7 +130,8 @@ describe('Portfolio', () => {
       Settings: {
         currency: Currency.CHF,
         updatedAt: new Date(),
-        userId: USER_ID
+        userId: USER_ID,
+        viewMode: ViewMode.DEFAULT
       },
       thirdPartyId: null,
       updatedAt: new Date()
@@ -181,6 +192,7 @@ describe('Portfolio', () => {
           id: '8d999347-dee2-46ee-88e1-26b344e71fcc',
           quantity: 1,
           symbol: 'BTCUSD',
+          symbolProfileId: null,
           type: Type.BUY,
           unitPrice: 49631.24,
           updatedAt: null,
@@ -215,6 +227,7 @@ describe('Portfolio', () => {
           },
           allocationCurrent: 1,
           allocationInvestment: 1,
+          countries: [],
           currency: Currency.USD,
           exchange: UNKNOWN_KEY,
           grossPerformance: 0,
@@ -264,7 +277,9 @@ describe('Portfolio', () => {
 
       expect(portfolio.getPositions(getYesterday())).toMatchObject({});
 
-      expect(portfolio.getSymbols(getYesterday())).toEqual(['BTCUSD']);
+      expect(portfolio.getSymbols(getYesterday())).toEqual([]);
+
+      expect(portfolio.getSymbols(new Date())).toEqual(['BTCUSD']);
     });
   });
 
@@ -282,6 +297,7 @@ describe('Portfolio', () => {
           id: '4a5a5c6e-659d-45cc-9fd4-fd6c873b50fb',
           quantity: 0.2,
           symbol: 'ETHUSD',
+          symbolProfileId: null,
           type: Type.BUY,
           unitPrice: 991.49,
           updatedAt: null,
@@ -297,16 +313,16 @@ describe('Portfolio', () => {
         )
       );
 
-      const details = await portfolio.getDetails('1d');
+      /*const details = await portfolio.getDetails('1d');
       expect(details).toMatchObject({
         ETHUSD: {
           accounts: {
             [UNKNOWN_KEY]: {
-              /*current: exchangeRateDataService.toCurrency(
+              current: exchangeRateDataService.toCurrency(
                 0.2 * 991.49,
                 Currency.USD,
                 baseCurrency
-              ),*/
+              ),
               original: exchangeRateDataService.toCurrency(
                 0.2 * 991.49,
                 Currency.USD,
@@ -316,6 +332,7 @@ describe('Portfolio', () => {
           },
           // allocationCurrent: 1,
           allocationInvestment: 1,
+          countries: [],
           currency: Currency.USD,
           exchange: UNKNOWN_KEY,
           // grossPerformance: 0,
@@ -332,7 +349,7 @@ describe('Portfolio', () => {
           symbol: 'ETHUSD',
           type: 'Cryptocurrency'
         }
-      });
+      });*/
 
       expect(portfolio.getFees()).toEqual(0);
 
@@ -377,6 +394,7 @@ describe('Portfolio', () => {
           id: '4a5a5c6e-659d-45cc-9fd4-fd6c873b50fb',
           quantity: 0.2,
           symbol: 'ETHUSD',
+          symbolProfileId: null,
           type: Type.BUY,
           unitPrice: 991.49,
           updatedAt: null,
@@ -393,6 +411,7 @@ describe('Portfolio', () => {
           id: '4a5a5c6e-659d-45cc-9fd4-fd6c873b50fc',
           quantity: 0.3,
           symbol: 'ETHUSD',
+          symbolProfileId: null,
           type: Type.BUY,
           unitPrice: 1050,
           updatedAt: null,
@@ -453,6 +472,7 @@ describe('Portfolio', () => {
           id: 'd96795b2-6ae6-420e-aa21-fabe5e45d475',
           quantity: 0.05614682,
           symbol: 'BTCUSD',
+          symbolProfileId: null,
           type: Type.BUY,
           unitPrice: 3562.089535970158,
           updatedAt: null,
@@ -469,6 +489,7 @@ describe('Portfolio', () => {
           id: '4a5a5c6e-659d-45cc-9fd4-fd6c873b50fb',
           quantity: 0.2,
           symbol: 'ETHUSD',
+          symbolProfileId: null,
           type: Type.BUY,
           unitPrice: 991.49,
           updatedAt: null,
@@ -542,6 +563,7 @@ describe('Portfolio', () => {
           id: '4a5a5c6e-659d-45cc-9fd4-fd6c873b50fb',
           quantity: 0.2,
           symbol: 'ETHUSD',
+          symbolProfileId: null,
           type: Type.BUY,
           unitPrice: 991.49,
           updatedAt: null,
@@ -558,6 +580,7 @@ describe('Portfolio', () => {
           id: '4a5a5c6e-659d-45cc-9fd4-fd6c873b50fc',
           quantity: 0.1,
           symbol: 'ETHUSD',
+          symbolProfileId: null,
           type: Type.SELL,
           unitPrice: 1050,
           updatedAt: null,
@@ -574,6 +597,7 @@ describe('Portfolio', () => {
           id: '4a5a5c6e-659d-45cc-9fd4-fd6c873b50fc',
           quantity: 0.2,
           symbol: 'ETHUSD',
+          symbolProfileId: null,
           type: Type.BUY,
           unitPrice: 1050,
           updatedAt: null,

apps/api/src/models/portfolio.ts

@@ -8,7 +8,11 @@ import {
   Position,
   UserWithSettings
 } from '@ghostfolio/common/interfaces';
+import { Country } from '@ghostfolio/common/interfaces/country.interface';
+import { Sector } from '@ghostfolio/common/interfaces/sector.interface';
 import { DateRange, OrderWithAccount } from '@ghostfolio/common/types';
+import { Prisma } from '@prisma/client';
+import { continents, countries } from 'countries-list';
 import {
   add,
   format,
@@ -69,7 +73,7 @@ export class Portfolio implements PortfolioInterface {
 
     const [portfolioItemsYesterday] = this.get(yesterday);
 
-    let positions: { [symbol: string]: Position } = {};
+    const positions: { [symbol: string]: Position } = {};
 
     this.getSymbols().forEach((symbol) => {
       positions[symbol] = {
@@ -101,14 +105,45 @@ export class Portfolio implements PortfolioInterface {
       );
 
       // Set value after pushing today's portfolio items
-      this.portfolioItems[portfolioItemsLength - 1].value = this.getValue(
-        today
-      );
+      this.portfolioItems[portfolioItemsLength - 1].value =
+        this.getValue(today);
     }
 
     return this;
   }
 
+  public async addFuturePortfolioItems() {
+    let investment = this.getInvestment(new Date());
+
+    this.getOrders()
+      .filter((order) => order.getIsDraft() === true)
+      .forEach((order) => {
+        investment += this.exchangeRateDataService.toCurrency(
+          order.getTotal(),
+          order.getCurrency(),
+          this.user.Settings.currency
+        );
+
+        const portfolioItem = this.portfolioItems.find((item) => {
+          return item.date === order.getDate();
+        });
+
+        if (portfolioItem) {
+          portfolioItem.investment = investment;
+        } else {
+          this.portfolioItems.push({
+            investment,
+            date: order.getDate(),
+            grossPerformancePercent: 0,
+            positions: {},
+            value: 0
+          });
+        }
+      });
+
+    return this;
+  }
+
   public createFromData({
     orders,
     portfolioItems,
@@ -127,6 +162,7 @@ export class Portfolio implements PortfolioInterface {
         id,
         quantity,
         symbol,
+        symbolProfile,
         type,
         unitPrice
       }) => {
@@ -139,6 +175,7 @@ export class Portfolio implements PortfolioInterface {
             id,
             quantity,
             symbol,
+            symbolProfile,
             type,
             unitPrice
           })
@@ -172,6 +209,8 @@ export class Portfolio implements PortfolioInterface {
       if (filteredPortfolio) {
         return [cloneDeep(filteredPortfolio)];
       }
+
+      return [];
     }
 
     return cloneDeep(this.portfolioItems);
@@ -204,6 +243,8 @@ export class Portfolio implements PortfolioInterface {
 
     symbols.forEach((symbol) => {
       const accounts: PortfolioPosition['accounts'] = {};
+      let countriesOfSymbol: Country[];
+      let sectorsOfSymbol: Sector[];
       const [portfolioItem] = portfolioItems;
 
       const ordersBySymbol = this.getOrders().filter((order) => {
@@ -231,24 +272,48 @@ export class Portfolio implements PortfolioInterface {
         if (
           accounts[orderOfSymbol.getAccount()?.name || UNKNOWN_KEY]?.current
         ) {
-          accounts[
-            orderOfSymbol.getAccount()?.name || UNKNOWN_KEY
-          ].current += currentValueOfSymbol;
-          accounts[
-            orderOfSymbol.getAccount()?.name || UNKNOWN_KEY
-          ].original += originalValueOfSymbol;
+          accounts[orderOfSymbol.getAccount()?.name || UNKNOWN_KEY].current +=
+            currentValueOfSymbol;
+          accounts[orderOfSymbol.getAccount()?.name || UNKNOWN_KEY].original +=
+            originalValueOfSymbol;
         } else {
           accounts[orderOfSymbol.getAccount()?.name || UNKNOWN_KEY] = {
             current: currentValueOfSymbol,
             original: originalValueOfSymbol
           };
         }
+
+        countriesOfSymbol = (
+          (orderOfSymbol.getSymbolProfile()?.countries as Prisma.JsonArray) ??
+          []
+        ).map((country) => {
+          const { code, weight } = country as Prisma.JsonObject;
+
+          return {
+            code: code as string,
+            continent:
+              continents[countries[code as string]?.continent] ?? UNKNOWN_KEY,
+            name: countries[code as string]?.name ?? UNKNOWN_KEY,
+            weight: weight as number
+          };
+        });
+
+        sectorsOfSymbol = (
+          (orderOfSymbol.getSymbolProfile()?.sectors as Prisma.JsonArray) ?? []
+        ).map((sector) => {
+          const { name, weight } = sector as Prisma.JsonObject;
+
+          return {
+            name: (name as string) ?? UNKNOWN_KEY,
+            weight: weight as number
+          };
+        });
       });
 
       let now = portfolioItemsNow.positions[symbol].marketPrice;
 
       // 1d
-      let before = portfolioItemsBefore.positions[symbol].marketPrice;
+      let before = portfolioItemsBefore?.positions[symbol].marketPrice;
 
       if (aDateRange === 'ytd') {
         before =
@@ -265,7 +330,7 @@ export class Portfolio implements PortfolioInterface {
       if (
         !isBefore(
           parseISO(portfolioItemsNow.positions[symbol].firstBuyDate),
-          parseISO(portfolioItemsBefore.date)
+          parseISO(portfolioItemsBefore?.date)
         )
       ) {
         // Trade was not before the date of portfolioItemsBefore, then override it with average price
@@ -289,6 +354,7 @@ export class Portfolio implements PortfolioInterface {
           ) / value,
         allocationInvestment:
           portfolioItem.positions[symbol].investment / investment,
+        countries: countriesOfSymbol,
         grossPerformance: roundTo(
           portfolioItemsNow.positions[symbol].quantity * (now - before),
           2
@@ -296,7 +362,13 @@ export class Portfolio implements PortfolioInterface {
         grossPerformancePercent: roundTo((now - before) / before, 4),
         investment: portfolioItem.positions[symbol].investment,
         quantity: portfolioItem.positions[symbol].quantity,
-        transactionCount: portfolioItem.positions[symbol].transactionCount
+        sectors: sectorsOfSymbol,
+        transactionCount: portfolioItem.positions[symbol].transactionCount,
+        value: this.exchangeRateDataService.toCurrency(
+          portfolioItem.positions[symbol].quantity * now,
+          data[symbol]?.currency,
+          this.user.Settings.currency
+        )
       };
     });
 
@@ -324,7 +396,11 @@ export class Portfolio implements PortfolioInterface {
   }
 
   public getMinDate() {
-    if (this.orders.length > 0) {
+    const orders = this.getOrders().filter(
+      (order) => order.getIsDraft() === false
+    );
+
+    if (orders.length > 0) {
       return new Date(this.orders[0].getDate());
     }
 
@@ -402,10 +478,10 @@ export class Portfolio implements PortfolioInterface {
         accountClusterRisk: await this.rulesService.evaluate(
           this,
           [
-            new AccountClusterRiskCurrentInvestment(
+            new AccountClusterRiskInitialInvestment(
               this.exchangeRateDataService
             ),
-            new AccountClusterRiskInitialInvestment(
+            new AccountClusterRiskCurrentInvestment(
               this.exchangeRateDataService
             ),
             new AccountClusterRiskSingleAccount(this.exchangeRateDataService)
@@ -451,9 +527,11 @@ export class Portfolio implements PortfolioInterface {
         }
       }
     } else {
-      symbols = this.orders.map((order) => {
-        return order.getSymbol();
-      });
+      symbols = this.orders
+        .filter((order) => order.getIsDraft() === false)
+        .map((order) => {
+          return order.getSymbol();
+        });
     }
 
     // unique values
@@ -462,7 +540,9 @@ export class Portfolio implements PortfolioInterface {
 
   public getTotalBuy() {
     return this.orders
-      .filter((order) => order.getType() === 'BUY')
+      .filter(
+        (order) => order.getIsDraft() === false && order.getType() === 'BUY'
+      )
       .map((order) => {
         return this.exchangeRateDataService.toCurrency(
           order.getTotal(),
@@ -475,7 +555,9 @@ export class Portfolio implements PortfolioInterface {
 
   public getTotalSell() {
     return this.orders
-      .filter((order) => order.getType() === 'SELL')
+      .filter(
+        (order) => order.getIsDraft() === false && order.getType() === 'SELL'
+      )
       .map((order) => {
         return this.exchangeRateDataService.toCurrency(
           order.getTotal(),
@@ -486,7 +568,13 @@ export class Portfolio implements PortfolioInterface {
       .reduce((previous, current) => previous + current, 0);
   }
 
-  public getOrders() {
+  public getOrders(aSymbol?: string) {
+    if (aSymbol) {
+      return this.orders.filter((order) => {
+        return order.getSymbol() === aSymbol;
+      });
+    }
+
     return this.orders;
   }
 
@@ -538,6 +626,7 @@ export class Portfolio implements PortfolioInterface {
           fee: order.fee,
           quantity: order.quantity,
           symbol: order.symbol,
+          symbolProfile: order.SymbolProfile,
           type: <OrderType>order.type,
           unitPrice: order.unitPrice
         })
@@ -638,10 +727,10 @@ export class Portfolio implements PortfolioInterface {
 
       this.portfolioItems.push(
         cloneDeep({
+          positions,
           date: yesterday.toISOString(),
           grossPerformancePercent: 0,
           investment: 0,
-          positions: positions,
           value: 0
         })
       );
@@ -698,8 +787,6 @@ export class Portfolio implements PortfolioInterface {
   }
 
   private updatePortfolioItems() {
-    // console.time('update-portfolio-items');
-
     let currentDate = new Date();
 
     const year = getYear(currentDate);
@@ -723,107 +810,99 @@ export class Portfolio implements PortfolioInterface {
     }
 
     this.orders.forEach((order) => {
-      let index = this.portfolioItems.findIndex((item) => {
-        const dateOfOrder = setDate(parseISO(order.getDate()), 1);
-        return isSameDay(parseISO(item.date), dateOfOrder);
-      });
+      if (order.getIsDraft() === false) {
+        let index = this.portfolioItems.findIndex((item) => {
+          const dateOfOrder = setDate(parseISO(order.getDate()), 1);
+          return isSameDay(parseISO(item.date), dateOfOrder);
+        });
 
-      if (index === -1) {
-        // if not found, we only have one order, which means we do not loop below
-        index = 0;
-      }
-
-      for (let i = index; i < this.portfolioItems.length; i++) {
-        // Set currency
-        this.portfolioItems[i].positions[
-          order.getSymbol()
-        ].currency = order.getCurrency();
-
-        this.portfolioItems[i].positions[
-          order.getSymbol()
-        ].transactionCount += 1;
-
-        if (order.getType() === 'BUY') {
-          if (
-            !this.portfolioItems[i].positions[order.getSymbol()].firstBuyDate
-          ) {
-            this.portfolioItems[i].positions[
-              order.getSymbol()
-            ].firstBuyDate = resetHours(
-              parseISO(order.getDate())
-            ).toISOString();
-          }
-
-          this.portfolioItems[i].positions[
-            order.getSymbol()
-          ].quantity += order.getQuantity();
-          this.portfolioItems[i].positions[
-            order.getSymbol()
-          ].investment += this.exchangeRateDataService.toCurrency(
-            order.getTotal(),
-            order.getCurrency(),
-            this.user.Settings.currency
-          );
-          this.portfolioItems[i].positions[
-            order.getSymbol()
-          ].investmentInOriginalCurrency += order.getTotal();
-
-          this.portfolioItems[
-            i
-          ].investment += this.exchangeRateDataService.toCurrency(
-            order.getTotal(),
-            order.getCurrency(),
-            this.user.Settings.currency
-          );
-        } else if (order.getType() === 'SELL') {
-          this.portfolioItems[i].positions[
-            order.getSymbol()
-          ].quantity -= order.getQuantity();
-
-          if (
-            this.portfolioItems[i].positions[order.getSymbol()].quantity === 0
-          ) {
-            this.portfolioItems[i].positions[order.getSymbol()].investment = 0;
-            this.portfolioItems[i].positions[
-              order.getSymbol()
-            ].investmentInOriginalCurrency = 0;
-          } else {
-            this.portfolioItems[i].positions[
-              order.getSymbol()
-            ].investment -= this.exchangeRateDataService.toCurrency(
-              order.getTotal(),
-              order.getCurrency(),
-              this.user.Settings.currency
-            );
-            this.portfolioItems[i].positions[
-              order.getSymbol()
-            ].investmentInOriginalCurrency -= order.getTotal();
-          }
-
-          this.portfolioItems[
-            i
-          ].investment -= this.exchangeRateDataService.toCurrency(
-            order.getTotal(),
-            order.getCurrency(),
-            this.user.Settings.currency
-          );
+        if (index === -1) {
+          // if not found, we only have one order, which means we do not loop below
+          index = 0;
         }
 
-        this.portfolioItems[i].positions[order.getSymbol()].averagePrice =
-          this.portfolioItems[i].positions[order.getSymbol()]
-            .investmentInOriginalCurrency /
-          this.portfolioItems[i].positions[order.getSymbol()].quantity;
+        for (let i = index; i < this.portfolioItems.length; i++) {
+          // Set currency
+          this.portfolioItems[i].positions[order.getSymbol()].currency =
+            order.getCurrency();
 
-        const currentValue = this.getValue(
-          parseISO(this.portfolioItems[i].date)
-        );
+          this.portfolioItems[i].positions[
+            order.getSymbol()
+          ].transactionCount += 1;
 
-        this.portfolioItems[i].grossPerformancePercent =
-          currentValue / this.portfolioItems[i].investment - 1 || 0;
-        this.portfolioItems[i].value = currentValue;
+          if (order.getType() === 'BUY') {
+            if (
+              !this.portfolioItems[i].positions[order.getSymbol()].firstBuyDate
+            ) {
+              this.portfolioItems[i].positions[order.getSymbol()].firstBuyDate =
+                resetHours(parseISO(order.getDate())).toISOString();
+            }
+
+            this.portfolioItems[i].positions[order.getSymbol()].quantity +=
+              order.getQuantity();
+            this.portfolioItems[i].positions[order.getSymbol()].investment +=
+              this.exchangeRateDataService.toCurrency(
+                order.getTotal(),
+                order.getCurrency(),
+                this.user.Settings.currency
+              );
+            this.portfolioItems[i].positions[
+              order.getSymbol()
+            ].investmentInOriginalCurrency += order.getTotal();
+
+            this.portfolioItems[i].investment +=
+              this.exchangeRateDataService.toCurrency(
+                order.getTotal(),
+                order.getCurrency(),
+                this.user.Settings.currency
+              );
+          } else if (order.getType() === 'SELL') {
+            this.portfolioItems[i].positions[order.getSymbol()].quantity -=
+              order.getQuantity();
+
+            if (
+              this.portfolioItems[i].positions[order.getSymbol()].quantity === 0
+            ) {
+              this.portfolioItems[i].positions[
+                order.getSymbol()
+              ].investment = 0;
+              this.portfolioItems[i].positions[
+                order.getSymbol()
+              ].investmentInOriginalCurrency = 0;
+            } else {
+              this.portfolioItems[i].positions[order.getSymbol()].investment -=
+                this.exchangeRateDataService.toCurrency(
+                  order.getTotal(),
+                  order.getCurrency(),
+                  this.user.Settings.currency
+                );
+              this.portfolioItems[i].positions[
+                order.getSymbol()
+              ].investmentInOriginalCurrency -= order.getTotal();
+            }
+
+            this.portfolioItems[i].investment -=
+              this.exchangeRateDataService.toCurrency(
+                order.getTotal(),
+                order.getCurrency(),
+                this.user.Settings.currency
+              );
+          }
+
+          this.portfolioItems[i].positions[order.getSymbol()].averagePrice =
+            this.portfolioItems[i].positions[order.getSymbol()]
+              .investmentInOriginalCurrency /
+            this.portfolioItems[i].positions[order.getSymbol()].quantity;
+
+          const currentValue = this.getValue(
+            parseISO(this.portfolioItems[i].date)
+          );
+
+          this.portfolioItems[i].grossPerformancePercent =
+            currentValue / this.portfolioItems[i].investment - 1 || 0;
+          this.portfolioItems[i].value = currentValue;
+        }
       }
     });
-
-    // console.timeEnd('update-portfolio-items');
   }
 }

apps/api/src/services/configuration.service.ts

@@ -1,8 +1,8 @@
 import { Injectable } from '@nestjs/common';
-import { bool, cleanEnv, json, num, port, str } from 'envalid';
+import { DataSource } from '@prisma/client';
+import { bool, cleanEnv, host, json, num, port, str } from 'envalid';
 
 import { Environment } from './interfaces/environment.interface';
-import { DataSource } from '.prisma/client';
 
 @Injectable()
 export class ConfigurationService {
@@ -17,6 +17,7 @@ export class ConfigurationService {
       ENABLE_FEATURE_CUSTOM_SYMBOLS: bool({ default: false }),
       ENABLE_FEATURE_FEAR_AND_GREED_INDEX: bool({ default: false }),
       ENABLE_FEATURE_SOCIAL_LOGIN: bool({ default: false }),
+      ENABLE_FEATURE_STATISTICS: bool({ default: false }),
       ENABLE_FEATURE_SUBSCRIPTION: bool({ default: false }),
       GOOGLE_CLIENT_ID: str({ default: 'dummyClientId' }),
       GOOGLE_SECRET: str({ default: 'dummySecret' }),
@@ -26,7 +27,9 @@ export class ConfigurationService {
       RAKUTEN_RAPID_API_KEY: str({ default: '' }),
       REDIS_HOST: str({ default: 'localhost' }),
       REDIS_PORT: port({ default: 6379 }),
-      ROOT_URL: str({ default: 'http://localhost:4200' })
+      ROOT_URL: str({ default: 'http://localhost:4200' }),
+      STRIPE_SECRET_KEY: str({ default: '' }),
+      WEB_AUTH_RP_ID: host({ default: 'localhost' })
     });
   }
 

apps/api/src/services/data-gathering.service.ts

@@ -5,8 +5,10 @@ import {
   resetHours
 } from '@ghostfolio/common/helper';
 import { Injectable } from '@nestjs/common';
+import { DataSource } from '@prisma/client';
 import {
   differenceInHours,
+  endOfToday,
   format,
   getDate,
   getMonth,
@@ -18,6 +20,7 @@ import {
 import { ConfigurationService } from './configuration.service';
 import { DataProviderService } from './data-provider.service';
 import { GhostfolioScraperApiService } from './data-provider/ghostfolio-scraper-api/ghostfolio-scraper-api.service';
+import { IDataGatheringItem } from './interfaces/interfaces';
 import { PrismaService } from './prisma.service';
 
 @Injectable()
@@ -115,15 +118,13 @@ export class DataGatheringService {
     }
   }
 
-  public async gatherSymbols(
-    aSymbolsWithStartDate: { date: Date; symbol: string }[]
-  ) {
+  public async gatherSymbols(aSymbolsWithStartDate: IDataGatheringItem[]) {
     let hasError = false;
 
-    for (const { date, symbol } of aSymbolsWithStartDate) {
+    for (const { dataSource, date, symbol } of aSymbolsWithStartDate) {
       try {
         const historicalData = await this.dataProviderService.getHistoricalRaw(
-          [symbol],
+          [{ dataSource, symbol }],
           date,
           new Date()
         );
@@ -184,20 +185,25 @@ export class DataGatheringService {
     }
   }
 
-  public async getCustomSymbolsToGather(startDate?: Date) {
-    const scraperConfigurations = await this.ghostfolioScraperApi.getScraperConfigurations();
+  public async getCustomSymbolsToGather(
+    startDate?: Date
+  ): Promise<IDataGatheringItem[]> {
+    const scraperConfigurations =
+      await this.ghostfolioScraperApi.getScraperConfigurations();
 
     return scraperConfigurations.map((scraperConfiguration) => {
       return {
+        dataSource: DataSource.GHOSTFOLIO,
         date: startDate,
         symbol: scraperConfiguration.symbol
       };
     });
   }
 
-  private getBenchmarksToGather(startDate: Date) {
-    const benchmarksToGather = benchmarks.map((symbol) => {
+  private getBenchmarksToGather(startDate: Date): IDataGatheringItem[] {
+    const benchmarksToGather = benchmarks.map(({ dataSource, symbol }) => {
       return {
+        dataSource,
         symbol,
         date: startDate
       };
@@ -205,6 +211,7 @@ export class DataGatheringService {
 
     if (this.configurationService.get('ENABLE_FEATURE_FEAR_AND_GREED_INDEX')) {
       benchmarksToGather.push({
+        dataSource: DataSource.RAKUTEN,
         date: startDate,
         symbol: 'GF.FEAR_AND_GREED_INDEX'
       });
@@ -213,16 +220,21 @@ export class DataGatheringService {
     return benchmarksToGather;
   }
 
-  private async getSymbols7D(): Promise<{ date: Date; symbol: string }[]> {
+  private async getSymbols7D(): Promise<IDataGatheringItem[]> {
     const startDate = subDays(resetHours(new Date()), 7);
 
     const distinctOrders = await this.prisma.order.findMany({
       distinct: ['symbol'],
       orderBy: [{ symbol: 'asc' }],
-      select: { symbol: true }
+      select: { dataSource: true, symbol: true },
+      where: {
+        date: {
+          lt: endOfToday() // no draft
+        }
+      }
     });
 
-    const distinctOrdersWithDate = distinctOrders
+    const distinctOrdersWithDate: IDataGatheringItem[] = distinctOrders
       .filter((distinctOrder) => {
         return !isGhostfolioScraperApiSymbol(distinctOrder.symbol);
       })
@@ -233,12 +245,15 @@ export class DataGatheringService {
         };
       });
 
-    const currencyPairsToGather = currencyPairs.map((symbol) => {
-      return {
-        symbol,
-        date: startDate
-      };
-    });
+    const currencyPairsToGather = currencyPairs.map(
+      ({ dataSource, symbol }) => {
+        return {
+          dataSource,
+          symbol,
+          date: startDate
+        };
+      }
+    );
 
     const customSymbolsToGather = await this.getCustomSymbolsToGather(
       startDate
@@ -252,24 +267,32 @@ export class DataGatheringService {
     ];
   }
 
-  private async getSymbolsMax() {
+  private async getSymbolsMax(): Promise<IDataGatheringItem[]> {
     const startDate = new Date(getUtc('2015-01-01'));
 
     const customSymbolsToGather = await this.getCustomSymbolsToGather(
       startDate
     );
 
-    const currencyPairsToGather = currencyPairs.map((symbol) => {
-      return {
-        symbol,
-        date: startDate
-      };
-    });
+    const currencyPairsToGather = currencyPairs.map(
+      ({ dataSource, symbol }) => {
+        return {
+          dataSource,
+          symbol,
+          date: startDate
+        };
+      }
+    );
 
     const distinctOrders = await this.prisma.order.findMany({
       distinct: ['symbol'],
       orderBy: [{ date: 'asc' }],
-      select: { date: true, symbol: true }
+      select: { dataSource: true, date: true, symbol: true },
+      where: {
+        date: {
+          lt: endOfToday() // no draft
+        }
+      }
     });
 
     return [

apps/api/src/services/data-provider.service.ts

@@ -1,6 +1,4 @@
-import { LookupItem } from '@ghostfolio/api/app/symbol/interfaces/lookup-item.interface';
 import {
-  isCrypto,
   isGhostfolioScraperApiSymbol,
   isRakutenRapidApiSymbol
 } from '@ghostfolio/common/helper';
@@ -14,15 +12,15 @@ import { AlphaVantageService } from './data-provider/alpha-vantage/alpha-vantage
 import { GhostfolioScraperApiService } from './data-provider/ghostfolio-scraper-api/ghostfolio-scraper-api.service';
 import { RakutenRapidApiService } from './data-provider/rakuten-rapid-api/rakuten-rapid-api.service';
 import { YahooFinanceService } from './data-provider/yahoo-finance/yahoo-finance.service';
-import { DataProviderInterface } from './interfaces/data-provider.interface';
 import {
+  IDataGatheringItem,
   IDataProviderHistoricalResponse,
   IDataProviderResponse
 } from './interfaces/interfaces';
 import { PrismaService } from './prisma.service';
 
 @Injectable()
-export class DataProviderService implements DataProviderInterface {
+export class DataProviderService {
   public constructor(
     private readonly alphaVantageService: AlphaVantageService,
     private readonly configurationService: ConfigurationService,
@@ -121,79 +119,53 @@ export class DataProviderService implements DataProviderInterface {
   }
 
   public async getHistoricalRaw(
-    aSymbols: string[],
+    aDataGatheringItems: IDataGatheringItem[],
     from: Date,
     to: Date
   ): Promise<{
     [symbol: string]: { [date: string]: IDataProviderHistoricalResponse };
   }> {
-    const filteredSymbols = aSymbols.filter((symbol) => {
-      return !isGhostfolioScraperApiSymbol(symbol);
-    });
+    const result: {
+      [symbol: string]: { [date: string]: IDataProviderHistoricalResponse };
+    } = {};
 
-    const dataOfYahoo = await this.yahooFinanceService.getHistorical(
-      filteredSymbols,
-      undefined,
-      from,
-      to
-    );
-
-    if (aSymbols.length === 1) {
-      const symbol = aSymbols[0];
-
-      if (
-        isCrypto(symbol) &&
-        this.configurationService.get('ALPHA_VANTAGE_API_KEY')
-      ) {
-        // Merge data from Yahoo with data from Alpha Vantage
-        const dataOfAlphaVantage = await this.alphaVantageService.getHistorical(
-          [symbol],
-          undefined,
-          from,
-          to
+    const promises: Promise<{
+      data: { [date: string]: IDataProviderHistoricalResponse };
+      symbol: string;
+    }>[] = [];
+    for (const { dataSource, symbol } of aDataGatheringItems) {
+      const dataProvider = this.getDataProvider(dataSource);
+      if (dataProvider.canHandle(symbol)) {
+        promises.push(
+          dataProvider
+            .getHistorical([symbol], undefined, from, to)
+            .then((data) => ({ data: data?.[symbol], symbol }))
         );
-
-        return {
-          [symbol]: {
-            ...dataOfYahoo[symbol],
-            ...dataOfAlphaVantage[symbol]
-          }
-        };
-      } else if (isGhostfolioScraperApiSymbol(symbol)) {
-        const dataOfGhostfolioScraperApi = await this.ghostfolioScraperApiService.getHistorical(
-          [symbol],
-          undefined,
-          from,
-          to
-        );
-
-        return dataOfGhostfolioScraperApi;
-      } else if (
-        isRakutenRapidApiSymbol(symbol) &&
-        this.configurationService.get('RAKUTEN_RAPID_API_KEY')
-      ) {
-        const dataOfRakutenRapidApi = await this.rakutenRapidApiService.getHistorical(
-          [symbol],
-          undefined,
-          from,
-          to
-        );
-
-        return dataOfRakutenRapidApi;
       }
     }
 
-    return dataOfYahoo;
+    const allData = await Promise.all(promises);
+    for (const { data, symbol } of allData) {
+      result[symbol] = data;
+    }
+
+    return result;
   }
 
   public async search(aSymbol: string) {
-    return this.getDataProvider().search(aSymbol);
+    return this.getDataProvider(
+      <DataSource>this.configurationService.get('DATA_SOURCES')[0]
+    ).search(aSymbol);
   }
 
-  private getDataProvider() {
-    switch (this.configurationService.get('DATA_SOURCES')[0]) {
+  private getDataProvider(providerName: DataSource) {
+    switch (providerName) {
       case DataSource.ALPHA_VANTAGE:
         return this.alphaVantageService;
+      case DataSource.GHOSTFOLIO:
+        return this.ghostfolioScraperApiService;
+      case DataSource.RAKUTEN:
+        return this.rakutenRapidApiService;
       case DataSource.YAHOO:
         return this.yahooFinanceService;
       default:

apps/api/src/services/data-provider/alpha-vantage/alpha-vantage.service.ts

@@ -24,6 +24,10 @@ export class AlphaVantageService implements DataProviderInterface {
     });
   }
 
+  public canHandle(symbol: string) {
+    return !!this.configurationService.get('ALPHA_VANTAGE_API_KEY');
+  }
+
   public async get(
     aSymbols: string[]
   ): Promise<{ [symbol: string]: IDataProviderResponse }> {

apps/api/src/services/data-provider/ghostfolio-scraper-api/ghostfolio-scraper-api.service.ts

@@ -1,4 +1,7 @@
-import { getYesterday } from '@ghostfolio/common/helper';
+import {
+  getYesterday,
+  isGhostfolioScraperApiSymbol
+} from '@ghostfolio/common/helper';
 import { Granularity } from '@ghostfolio/common/types';
 import { Injectable } from '@nestjs/common';
 import { DataSource } from '@prisma/client';
@@ -21,6 +24,10 @@ export class GhostfolioScraperApiService implements DataProviderInterface {
 
   public constructor(private prisma: PrismaService) {}
 
+  public canHandle(symbol: string) {
+    return isGhostfolioScraperApiSymbol(symbol);
+  }
+
   public async get(
     aSymbols: string[]
   ): Promise<{ [symbol: string]: IDataProviderResponse }> {

apps/api/src/services/data-provider/rakuten-rapid-api/rakuten-rapid-api.service.ts

@@ -1,4 +1,8 @@
-import { getToday, getYesterday } from '@ghostfolio/common/helper';
+import {
+  getToday,
+  getYesterday,
+  isRakutenRapidApiSymbol
+} from '@ghostfolio/common/helper';
 import { Granularity } from '@ghostfolio/common/types';
 import { Injectable } from '@nestjs/common';
 import { DataSource } from '@prisma/client';
@@ -24,6 +28,13 @@ export class RakutenRapidApiService implements DataProviderInterface {
     private readonly configurationService: ConfigurationService
   ) {}
 
+  public canHandle(symbol: string) {
+    return (
+      isRakutenRapidApiSymbol(symbol) &&
+      !!this.configurationService.get('RAKUTEN_RAPID_API_KEY')
+    );
+  }
+
   public async get(
     aSymbols: string[]
   ): Promise<{ [symbol: string]: IDataProviderResponse }> {

apps/api/src/services/data-provider/yahoo-finance/yahoo-finance.service.ts

@@ -12,9 +12,7 @@ import { DataProviderInterface } from '../../interfaces/data-provider.interface'
 import {
   IDataProviderHistoricalResponse,
   IDataProviderResponse,
-  Industry,
   MarketState,
-  Sector,
   Type
 } from '../../interfaces/interfaces';
 import {
@@ -28,6 +26,10 @@ export class YahooFinanceService implements DataProviderInterface {
 
   public constructor() {}
 
+  public canHandle(symbol: string) {
+    return true;
+  }
+
   public async get(
     aSymbols: string[]
   ): Promise<{ [symbol: string]: IDataProviderResponse }> {
@@ -66,16 +68,6 @@ export class YahooFinanceService implements DataProviderInterface {
           type: this.parseType(this.getType(symbol, value))
         };
 
-        const industry = this.parseIndustry(value.summaryProfile?.industry);
-        if (industry) {
-          response[symbol].industry = industry;
-        }
-
-        const sector = this.parseSector(value.summaryProfile?.sector);
-        if (sector) {
-          response[symbol].sector = sector;
-        }
-
         const url = value.summaryProfile?.website;
         if (url) {
           response[symbol].url = url;
@@ -224,55 +216,6 @@ export class YahooFinanceService implements DataProviderInterface {
     return aString;
   }
 
-  private parseIndustry(aString: string): Industry {
-    if (aString === undefined) {
-      return undefined;
-    }
-
-    if (aString?.toLowerCase() === 'auto manufacturers') {
-      return Industry.Automotive;
-    } else if (aString?.toLowerCase() === 'biotechnology') {
-      return Industry.Biotechnology;
-    } else if (
-      aString?.toLowerCase() === 'drug manufacturers—specialty & generic'
-    ) {
-      return Industry.Pharmaceutical;
-    } else if (
-      aString?.toLowerCase() === 'internet content & information' ||
-      aString?.toLowerCase() === 'internet retail'
-    ) {
-      return Industry.Internet;
-    } else if (aString?.toLowerCase() === 'packaged foods') {
-      return Industry.Food;
-    } else if (aString?.toLowerCase() === 'software—application') {
-      return Industry.Software;
-    }
-
-    return Industry.Unknown;
-  }
-
-  private parseSector(aString: string): Sector {
-    if (aString === undefined) {
-      return undefined;
-    }
-
-    if (
-      aString?.toLowerCase() === 'consumer cyclical' ||
-      aString?.toLowerCase() === 'consumer defensive'
-    ) {
-      return Sector.Consumer;
-    } else if (aString?.toLowerCase() === 'healthcare') {
-      return Sector.Healthcare;
-    } else if (
-      aString?.toLowerCase() === 'communication services' ||
-      aString?.toLowerCase() === 'technology'
-    ) {
-      return Sector.Technology;
-    }
-
-    return Sector.Unknown;
-  }
-
   private parseType(aString: string): Type {
     if (aString?.toLowerCase() === 'cryptocurrency') {
       return Type.Cryptocurrency;
@@ -287,6 +230,6 @@ export class YahooFinanceService implements DataProviderInterface {
 }
 
 export const convertFromYahooSymbol = (aSymbol: string) => {
-  let symbol = aSymbol.replace('-', '');
+  const symbol = aSymbol.replace('-', '');
   return symbol.replace('=X', '');
 };

apps/api/src/services/interfaces/data-provider.interface.ts

@@ -7,6 +7,8 @@ import {
 } from './interfaces';
 
 export interface DataProviderInterface {
+  canHandle(symbol: string): boolean;
+
   get(aSymbols: string[]): Promise<{ [symbol: string]: IDataProviderResponse }>;
 
   getHistorical(

apps/api/src/services/interfaces/environment.interface.ts

@@ -8,6 +8,7 @@ export interface Environment extends CleanedEnvAccessors {
   ENABLE_FEATURE_CUSTOM_SYMBOLS: boolean;
   ENABLE_FEATURE_FEAR_AND_GREED_INDEX: boolean;
   ENABLE_FEATURE_SOCIAL_LOGIN: boolean;
+  ENABLE_FEATURE_STATISTICS: boolean;
   ENABLE_FEATURE_SUBSCRIPTION: boolean;
   GOOGLE_CLIENT_ID: string;
   GOOGLE_SECRET: string;
@@ -18,4 +19,6 @@ export interface Environment extends CleanedEnvAccessors {
   REDIS_HOST: string;
   REDIS_PORT: number;
   ROOT_URL: string;
+  STRIPE_SECRET_KEY: string;
+  WEB_AUTH_RP_ID: string;
 }

apps/api/src/services/interfaces/interfaces.ts

@@ -1,31 +1,14 @@
 import { UNKNOWN_KEY } from '@ghostfolio/common/config';
-import { Account, Currency, DataSource } from '@prisma/client';
+import { Account, Currency, DataSource, SymbolProfile } from '@prisma/client';
 
 import { OrderType } from '../../models/order-type';
 
-export const Industry = {
-  Automotive: 'Automotive',
-  Biotechnology: 'Biotechnology',
-  Food: 'Food',
-  Internet: 'Internet',
-  Pharmaceutical: 'Pharmaceutical',
-  Software: 'Software',
-  Unknown: UNKNOWN_KEY
-};
-
 export const MarketState = {
   closed: 'closed',
   delayed: 'delayed',
   open: 'open'
 };
 
-export const Sector = {
-  Consumer: 'Consumer',
-  Healthcare: 'Healthcare',
-  Technology: 'Technology',
-  Unknown: UNKNOWN_KEY
-};
-
 export const Type = {
   Cryptocurrency: 'Cryptocurrency',
   ETF: 'ETF',
@@ -41,6 +24,7 @@ export interface IOrder {
   id?: string;
   quantity: number;
   symbol: string;
+  symbolProfile: SymbolProfile;
   type: OrderType;
   unitPrice: number;
 }
@@ -54,21 +38,21 @@ export interface IDataProviderResponse {
   currency: Currency;
   dataSource: DataSource;
   exchange?: string;
-  industry?: Industry;
   marketChange?: number;
   marketChangePercent?: number;
   marketPrice: number;
   marketState: MarketState;
   name: string;
-  sector?: Sector;
   type?: Type;
   url?: string;
 }
 
-export type Industry = typeof Industry[keyof typeof Industry];
+export interface IDataGatheringItem {
+  dataSource: DataSource;
+  date?: Date;
+  symbol: string;
+}
 
 export type MarketState = typeof MarketState[keyof typeof MarketState];
 
-export type Sector = typeof Sector[keyof typeof Sector];
-
 export type Type = typeof Type[keyof typeof Type];

apps/client/jest.config.js

@@ -5,19 +5,14 @@ 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',
   snapshotSerializers: [
-    'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js',
-    'jest-preset-angular/build/AngularSnapshotSerializer.js',
-    'jest-preset-angular/build/HTMLCommentSerializer.js'
-  ]
+    '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-routing.module.ts

@@ -28,13 +28,6 @@ const routes: Routes = [
     loadChildren: () =>
       import('./pages/admin/admin-page.module').then((m) => m.AdminPageModule)
   },
-  {
-    path: 'analysis',
-    loadChildren: () =>
-      import('./pages/analysis/analysis-page.module').then(
-        (m) => m.AnalysisPageModule
-      )
-  },
   {
     path: 'auth',
     loadChildren: () =>
@@ -53,10 +46,10 @@ const routes: Routes = [
       )
   },
   {
-    path: 'report',
+    path: 'register',
     loadChildren: () =>
-      import('./pages/report/report-page.module').then(
-        (m) => m.ReportPageModule
+      import('./pages/register/register-page.module').then(
+        (m) => m.RegisterPageModule
       )
   },
   {
@@ -69,7 +62,28 @@ const routes: Routes = [
   {
     path: 'start',
     loadChildren: () =>
-      import('./pages/login/login-page.module').then((m) => m.LoginPageModule)
+      import('./pages/landing/landing-page.module').then(
+        (m) => m.LandingPageModule
+      )
+  },
+  {
+    path: 'tools',
+    loadChildren: () =>
+      import('./pages/tools/tools-page.module').then((m) => m.ToolsPageModule)
+  },
+  {
+    path: 'tools/analysis',
+    loadChildren: () =>
+      import('./pages/tools/analysis/analysis-page.module').then(
+        (m) => m.AnalysisPageModule
+      )
+  },
+  {
+    path: 'tools/report',
+    loadChildren: () =>
+      import('./pages/tools/report/report-page.module').then(
+        (m) => m.ReportPageModule
+      )
   },
   {
     path: 'transactions',
@@ -78,6 +92,18 @@ const routes: Routes = [
         (m) => m.TransactionsPageModule
       )
   },
+  {
+    path: 'webauthn',
+    loadChildren: () =>
+      import('./pages/webauthn/webauthn-page.module').then(
+        (m) => m.WebauthnPageModule
+      )
+  },
+  {
+    path: 'zen',
+    loadChildren: () =>
+      import('./pages/zen/zen-page.module').then((m) => m.ZenPageModule)
+  },
   {
     // wildcard, if requested url doesn't match any paths for routes defined
     // earlier

apps/client/src/app/app.component.html

@@ -4,6 +4,7 @@
     [currentRoute]="currentRoute"
     [info]="info"
     [user]="user"
+    (signOut)="onSignOut()"
   ></gf-header>
 </header>
 
@@ -11,13 +12,15 @@
   <div *ngIf="canCreateAccount" class="container create-account-container">
     <div class="row mb-5">
       <div class="col-md-6 offset-md-3">
-        <div
-          class="create-account-box p-2 text-center"
-          (click)="onCreateAccount()"
+        <a [routerLink]="['/']">
+          <mat-card
+            class="create-account-box p-2 text-center"
+            (click)="onCreateAccount()"
+          >
+            <div class="mt-1" i18n>You are using the Live Demo.</div>
+            <button mat-button color="primary" i18n>Create Account</button>
+          </mat-card></a
         >
-          <div class="mt-1" i18n>You are using the Live Demo.</div>
-          <button mat-button color="primary" i18n>Create Account</button>
-        </div>
       </div>
     </div>
   </div>
@@ -25,7 +28,10 @@
   <router-outlet></router-outlet>
 </main>
 
-<footer class="footer d-flex justify-content-center position-absolute w-100">
+<footer
+  *ngIf="currentRoute === 'start' || deviceType !== 'mobile'"
+  class="footer d-flex justify-content-center position-absolute w-100"
+>
   <div class="container text-center">
     <div>
       © {{ currentYear }} <a href="https://ghostfol.io">Ghostfolio</a>

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

@@ -5,14 +5,8 @@
     padding: 5rem 0;
 
     .create-account-box {
-      border: 1px solid rgba(var(--palette-primary-500), 1);
-      border-radius: 0.25rem;
       cursor: pointer;
       font-size: 90%;
-
-      .link {
-        color: rgba(var(--palette-primary-500), 1);
-      }
     }
   }
 

apps/client/src/app/app.component.ts

@@ -10,12 +10,14 @@ import { primaryColorHex, secondaryColorHex } from '@ghostfolio/common/config';
 import { InfoItem, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { MaterialCssVarsService } from 'angular-material-css-vars';
+import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
 
 import { environment } from '../environments/environment';
 import { DataService } from './services/data.service';
 import { TokenStorageService } from './services/token-storage.service';
+import { UserService } from './services/user/user.service';
 
 @Component({
   selector: 'gf-root',
@@ -27,25 +29,29 @@ export class AppComponent implements OnDestroy, OnInit {
   public canCreateAccount: boolean;
   public currentRoute: string;
   public currentYear = new Date().getFullYear();
+  public deviceType: string;
   public info: InfoItem;
-  public isLoggedIn = false;
   public user: User;
   public version = environment.version;
 
   private unsubscribeSubject = new Subject<void>();
 
   public constructor(
-    private cd: ChangeDetectorRef,
+    private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
+    private deviceService: DeviceDetectorService,
     private materialCssVarsService: MaterialCssVarsService,
     private router: Router,
-    private tokenStorageService: TokenStorageService
+    private tokenStorageService: TokenStorageService,
+    private userService: UserService
   ) {
     this.initializeTheme();
     this.user = undefined;
   }
 
   public ngOnInit() {
+    this.deviceType = this.deviceService.getDeviceInfo().deviceType;
+
     this.dataService.fetchInfo().subscribe((info) => {
       this.info = info;
     });
@@ -59,31 +65,28 @@ export class AppComponent implements OnDestroy, OnInit {
         this.currentRoute = urlSegments[0].path;
       });
 
-    this.tokenStorageService
-      .onChangeHasToken()
+    this.userService.stateChanged
       .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(() => {
-        this.isLoggedIn = !!this.tokenStorageService.getToken();
+      .subscribe((state) => {
+        this.user = state.user;
 
-        if (this.isLoggedIn) {
-          this.dataService.fetchUser().subscribe((user) => {
-            this.user = user;
+        this.canCreateAccount = hasPermission(
+          this.user?.permissions,
+          permissions.createUserAccount
+        );
 
-            this.canCreateAccount = hasPermission(
-              this.user.permissions,
-              permissions.createUserAccount
-            );
-
-            this.cd.markForCheck();
-          });
-        } else {
-          this.user = null;
-        }
+        this.changeDetectorRef.markForCheck();
       });
   }
 
   public onCreateAccount() {
     this.tokenStorageService.signOut();
+  }
+
+  public onSignOut() {
+    this.tokenStorageService.signOut();
+    this.userService.remove();
+
     window.location.reload();
   }
 

apps/client/src/app/app.module.ts

@@ -2,6 +2,7 @@ import { Platform } from '@angular/cdk/platform';
 import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
 import {
   DateAdapter,
   MAT_DATE_FORMATS,
@@ -14,7 +15,9 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MaterialCssVarsModule } from 'angular-material-css-vars';
 import { MarkdownModule } from 'ngx-markdown';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+import { NgxStripeModule } from 'ngx-stripe';
 
+import { environment } from '../environments/environment';
 import { CustomDateAdapter } from './adapter/custom-date-adapter';
 import { DateFormats } from './adapter/date-formats';
 import { AppRoutingModule } from './app-routing.module';
@@ -34,6 +37,7 @@ import { LanguageService } from './core/language.service';
     HttpClientModule,
     MarkdownModule.forRoot(),
     MatButtonModule,
+    MatCardModule,
     MaterialCssVarsModule.forRoot({
       darkThemeClass: 'is-dark-theme',
       isAutoContrast: true,
@@ -41,7 +45,8 @@ import { LanguageService } from './core/language.service';
     }),
     MatNativeDateModule,
     MatSnackBarModule,
-    NgxSkeletonLoaderModule
+    NgxSkeletonLoaderModule,
+    NgxStripeModule.forRoot(environment.stripePublicKey)
   ],
   providers: [
     authInterceptorProviders,

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

@@ -1,24 +1,18 @@
-<table
-  class="gf-table w-100"
-  matSort
-  matSortActive="account"
-  matSortDirection="desc"
-  mat-table
-  [dataSource]="dataSource"
->
+<table class="gf-table w-100" mat-table [dataSource]="dataSource">
   <ng-container matColumnDef="account">
-    <th *matHeaderCellDef class="px-1" i18n mat-header-cell mat-sort-header>
-      Name
-    </th>
+    <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Name</th>
     <td *matCellDef="let element" class="px-1" mat-cell>
       {{ element.name }}
+      <span
+        *ngIf="element.isDefault"
+        class="d-lg-inline-block d-none text-muted"
+        >(Default)</span
+      >
     </td>
   </ng-container>
 
   <ng-container matColumnDef="platform">
-    <th *matHeaderCellDef class="px-1" i18n mat-header-cell mat-sort-header>
-      Platform
-    </th>
+    <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Platform</th>
     <td *matCellDef="let element" class="px-1" mat-cell>
       <div class="d-flex">
         <gf-symbol-icon
@@ -32,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>
@@ -59,13 +74,6 @@
     </td>
   </ng-container>
 
-  <ng-container matColumnDef="transactions">
-    <th *matHeaderCellDef i18n mat-header-cell mat-sort-header>Transactions</th>
-    <td *matCellDef="let element" 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

@@ -6,13 +6,9 @@ import {
   OnChanges,
   OnDestroy,
   OnInit,
-  Output,
-  ViewChild
+  Output
 } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
-import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
-import { ActivatedRoute, Router } from '@angular/router';
 import { Account as AccountModel } from '@prisma/client';
 import { Subject, Subscription } from 'rxjs';
 
@@ -32,25 +28,20 @@ export class AccountsTableComponent implements OnChanges, OnDestroy, OnInit {
   @Output() accountDeleted = new EventEmitter<string>();
   @Output() accountToUpdate = new EventEmitter<AccountModel>();
 
-  @ViewChild(MatSort) sort: MatSort;
-
-  public dataSource: MatTableDataSource<AccountModel> = new MatTableDataSource();
+  public dataSource: MatTableDataSource<AccountModel> =
+    new MatTableDataSource();
   public displayedColumns = [];
   public isLoading = true;
   public routeQueryParams: Subscription;
 
   private unsubscribeSubject = new Subject<void>();
 
-  public constructor(
-    private dialog: MatDialog,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {}
+  public constructor() {}
 
   public ngOnInit() {}
 
   public ngOnChanges() {
-    this.displayedColumns = ['account', 'platform', 'transactions'];
+    this.displayedColumns = ['account', 'platform', 'transactions', 'balance'];
 
     if (this.showActions) {
       this.displayedColumns.push('actions');
@@ -60,7 +51,6 @@ export class AccountsTableComponent implements OnChanges, OnDestroy, OnInit {
 
     if (this.accounts) {
       this.dataSource = new MatTableDataSource(this.accounts);
-      this.dataSource.sort = this.sort;
 
       this.isLoading = false;
     }

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

@@ -3,7 +3,6 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
-import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { RouterModule } from '@angular/router';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
@@ -22,7 +21,6 @@ import { AccountsTableComponent } from './accounts-table.component';
     MatButtonModule,
     MatInputModule,
     MatMenuModule,
-    MatSortModule,
     MatTableModule,
     NgxSkeletonLoaderModule,
     RouterModule

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

@@ -8,31 +8,40 @@
       class="d-none d-sm-block"
       i18n
       mat-flat-button
-      [color]="currentRoute === 'home' ? 'primary' : null"
+      [ngClass]="{
+        'font-weight-bold': currentRoute === 'home' || currentRoute === 'zen',
+        'text-decoration-underline':
+          currentRoute === 'home' || currentRoute === 'zen'
+      }"
       [routerLink]="['/']"
       >Overview</a
     >
     <a
+      *ngIf="user?.settings?.viewMode === 'DEFAULT'"
       class="d-none d-sm-block mx-1"
       i18n
       mat-flat-button
-      [color]="currentRoute === 'analysis' ? 'primary' : null"
-      [routerLink]="['/analysis']"
-      >Analysis</a
+      [ngClass]="{
+        'font-weight-bold':
+          currentRoute === 'analysis' ||
+          currentRoute === 'report' ||
+          currentRoute === 'tools',
+        'text-decoration-underline':
+          currentRoute === 'analysis' ||
+          currentRoute === 'report' ||
+          currentRoute === 'tools'
+      }"
+      [routerLink]="['/tools']"
+      >Tools</a
     >
     <a
       class="d-none d-sm-block mx-1"
       i18n
       mat-flat-button
-      [color]="currentRoute === 'report' ? 'primary' : null"
-      [routerLink]="['/report']"
-      >X-ray</a
-    >
-    <a
-      class="d-none d-sm-block mx-1"
-      i18n
-      mat-flat-button
-      [color]="currentRoute === 'transactions' ? 'primary' : null"
+      [ngClass]="{
+        'font-weight-bold': currentRoute === 'transactions',
+        'text-decoration-underline': currentRoute === 'transactions'
+      }"
       [routerLink]="['/transactions']"
       >Transactions</a
     >
@@ -40,7 +49,10 @@
       class="d-none d-sm-block mx-1"
       i18n
       mat-flat-button
-      [color]="currentRoute === 'accounts' ? 'primary' : null"
+      [ngClass]="{
+        'font-weight-bold': currentRoute === 'accounts',
+        'text-decoration-underline': currentRoute === 'accounts'
+      }"
       [routerLink]="['/accounts']"
       >Accounts</a
     >
@@ -49,7 +61,10 @@
       class="d-none d-sm-block mx-1"
       i18n
       mat-flat-button
-      [color]="currentRoute === 'admin' ? 'primary' : null"
+      [ngClass]="{
+        'font-weight-bold': currentRoute === 'admin',
+        'text-decoration-underline': currentRoute === 'admin'
+      }"
       [routerLink]="['/admin']"
       >Admin Control</a
     >
@@ -57,7 +72,10 @@
       class="d-none d-sm-block mx-1"
       i18n
       mat-flat-button
-      [color]="currentRoute === 'resources' ? 'primary' : null"
+      [ngClass]="{
+        'font-weight-bold': currentRoute === 'resources',
+        'text-decoration-underline': currentRoute === 'resources'
+      }"
       [routerLink]="['/resources']"
       >Resources</a
     >
@@ -66,7 +84,10 @@
       class="d-none d-sm-block mx-1"
       i18n
       mat-flat-button
-      [color]="currentRoute === 'pricing' ? 'primary' : null"
+      [ngClass]="{
+        'font-weight-bold': currentRoute === 'pricing',
+        'text-decoration-underline': currentRoute === 'pricing'
+      }"
       [routerLink]="['/pricing']"
       >Pricing</a
     >
@@ -74,7 +95,10 @@
       class="d-none d-sm-block mx-1"
       i18n
       mat-flat-button
-      [color]="currentRoute === 'about' ? 'primary' : null"
+      [ngClass]="{
+        'font-weight-bold': currentRoute === 'about',
+        'text-decoration-underline': currentRoute === 'about'
+      }"
       [routerLink]="['/about']"
       >About</a
     >
@@ -135,20 +159,18 @@
         <hr class="m-0" />
       </ng-container>
       <a
+        *ngIf="user?.settings?.viewMode === 'DEFAULT'"
         class="d-block d-sm-none"
         i18n
         mat-menu-item
-        [ngClass]="{ 'font-weight-bold': currentRoute === 'analysis' }"
-        [routerLink]="['/analysis']"
-        >Analysis</a
-      >
-      <a
-        class="d-block d-sm-none"
-        i18n
-        mat-menu-item
-        [ngClass]="{ 'font-weight-bold': currentRoute === 'report' }"
-        [routerLink]="['/report']"
-        >X-ray</a
+        [ngClass]="{
+          'font-weight-bold':
+            currentRoute === 'analysis' ||
+            currentRoute === 'report' ||
+            currentRoute === 'tools'
+        }"
+        [routerLink]="['/tools']"
+        >Tools</a
       >
       <a
         class="d-block d-sm-none"
@@ -227,28 +249,44 @@
       <gf-logo></gf-logo>
     </a>
     <span class="spacer"></span>
-    <a
-      *ngIf="hasPermissionForSubscription"
-      i18n
-      mat-flat-button
-      [color]="currentRoute === 'pricing' ? 'primary' : null"
-      [routerLink]="['/pricing']"
-      >Pricing</a
-    >
     <a
       class="d-none d-sm-block mx-1"
       i18n
       mat-flat-button
-      [color]="currentRoute === 'about' ? 'primary' : null"
+      [ngClass]="{
+        'font-weight-bold': currentRoute === 'about',
+        'text-decoration-underline': currentRoute === 'about'
+      }"
       [routerLink]="['/about']"
       >About</a
     >
     <a
-      class="d-none d-sm-block mx-1"
+      *ngIf="hasPermissionForSubscription"
+      i18n
+      mat-flat-button
+      [ngClass]="{
+        'font-weight-bold': currentRoute === 'pricing',
+        'text-decoration-underline': currentRoute === 'pricing'
+      }"
+      [routerLink]="['/pricing']"
+      >Pricing</a
+    >
+    <a
+      class="d-none d-sm-block mx-1 no-min-width px-1"
       href="https://github.com/ghostfolio/ghostfolio"
       mat-flat-button
-      >GitHub</a
-    >
-    <button i18n mat-flat-button (click)="openLoginDialog()">Sign in</button>
+      ><ion-icon name="logo-github"></ion-icon
+    ></a>
+    <button class="mx-1" i18n mat-flat-button (click)="openLoginDialog()">
+      Sign In
+    </button>
+    <a
+      class="d-none d-sm-block"
+      color="primary"
+      i18n
+      mat-flat-button
+      [routerLink]="['/register']"
+      >Get Started
+    </a>
   </ng-container>
 </mat-toolbar>

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/header/header.component.ts

@@ -1,14 +1,20 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  EventEmitter,
   Input,
-  OnChanges
+  OnChanges,
+  Output
 } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { Router } from '@angular/router';
-import { LoginWithAccessTokenDialog } from '@ghostfolio/client/pages/login/login-with-access-token-dialog/login-with-access-token-dialog.component';
+import { LoginWithAccessTokenDialog } from '@ghostfolio/client/components/login-with-access-token-dialog/login-with-access-token-dialog.component';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
+import {
+  STAY_SIGNED_IN,
+  SettingsStorageService
+} from '@ghostfolio/client/services/settings-storage.service';
 import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service';
 import { InfoItem, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
@@ -26,6 +32,8 @@ export class HeaderComponent implements OnChanges {
   @Input() info: InfoItem;
   @Input() user: User;
 
+  @Output() signOut = new EventEmitter<void>();
+
   public hasPermissionForSocialLogin: boolean;
   public hasPermissionForSubscription: boolean;
   public hasPermissionToAccessAdminControl: boolean;
@@ -38,6 +46,7 @@ export class HeaderComponent implements OnChanges {
     private dialog: MatDialog,
     private impersonationStorageService: ImpersonationStorageService,
     private router: Router,
+    private settingsStorageService: SettingsStorageService,
     private tokenStorageService: TokenStorageService
   ) {
     this.impersonationStorageService
@@ -75,8 +84,7 @@ export class HeaderComponent implements OnChanges {
   }
 
   public onSignOut() {
-    this.tokenStorageService.signOut();
-    window.location.reload();
+    this.signOut.next();
   }
 
   public openLoginDialog(): void {
@@ -84,7 +92,8 @@ export class HeaderComponent implements OnChanges {
       autoFocus: false,
       data: {
         accessToken: '',
-        hasPermissionToUseSocialLogin: this.hasPermissionForSocialLogin
+        hasPermissionToUseSocialLogin: this.hasPermissionForSocialLogin,
+        title: 'Sign in'
       },
       width: '30rem'
     });
@@ -109,7 +118,10 @@ export class HeaderComponent implements OnChanges {
   }
 
   public setToken(aToken: string) {
-    this.tokenStorageService.saveToken(aToken);
+    this.tokenStorageService.saveToken(
+      aToken,
+      this.settingsStorageService.getSetting(STAY_SIGNED_IN) === 'true'
+    );
 
     this.router.navigate(['/']);
   }

apps/client/src/app/components/header/header.module.ts

@@ -4,7 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { RouterModule } from '@angular/router';
-import { LoginWithAccessTokenDialogModule } from '@ghostfolio/client/pages/login/login-with-access-token-dialog/login-with-access-token-dialog.module';
+import { LoginWithAccessTokenDialogModule } from '@ghostfolio/client/components/login-with-access-token-dialog/login-with-access-token-dialog.module';
 
 import { GfLogoModule } from '../logo/logo.module';
 import { HeaderComponent } from './header.component';

apps/client/src/app/components/investment-chart/investment-chart.component.html

@@ -2,12 +2,12 @@
   *ngIf="isLoading"
   animation="pulse"
   [theme]="{
-    height: '12rem',
+    height: '100%',
     width: '100%'
   }"
 ></ngx-skeleton-loader>
 <canvas
   #chartCanvas
-  height="50"
+  class="h-100"
   [ngStyle]="{ display: isLoading ? 'none' : 'block' }"
 ></canvas>

apps/client/src/app/components/investment-chart/investment-chart.component.ts

@@ -19,6 +19,7 @@ import {
   TimeScale
 } from 'chart.js';
 import { Chart } from 'chart.js';
+import { addMonths, isAfter, parseISO, subMonths } from 'date-fns';
 
 @Component({
   selector: 'gf-investment-chart',
@@ -36,10 +37,10 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy, OnInit {
 
   public constructor() {
     Chart.register(
+      LinearScale,
       LineController,
       LineElement,
       PointElement,
-      LinearScale,
       TimeScale
     );
   }
@@ -52,9 +53,30 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy, OnInit {
     }
   }
 
+  public ngOnDestroy() {
+    this.chart?.destroy();
+  }
+
   private initialize() {
     this.isLoading = true;
 
+    if (this.portfolioItems?.length > 0) {
+      // Extend chart by three months (before)
+      const firstItem = this.portfolioItems[0];
+      this.portfolioItems.unshift({
+        ...firstItem,
+        date: subMonths(parseISO(firstItem.date), 3).toISOString(),
+        investment: 0
+      });
+
+      // Extend chart by three months (after)
+      const lastItem = this.portfolioItems[this.portfolioItems.length - 1];
+      this.portfolioItems.push({
+        ...lastItem,
+        date: addMonths(parseISO(lastItem.date), 3).toISOString()
+      });
+    }
+
     const data = {
       labels: this.portfolioItems.map((position) => {
         return position.date;
@@ -65,7 +87,16 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy, OnInit {
           borderWidth: 2,
           data: this.portfolioItems.map((position) => {
             return position.investment;
-          })
+          }),
+          segment: {
+            borderColor: (context: unknown) =>
+              this.isInFuture(
+                context,
+                `rgba(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b}, 0.67)`
+              ),
+            borderDash: (context: unknown) => this.isInFuture(context, [2, 2])
+          },
+          stepped: true
         }
       ]
     };
@@ -95,7 +126,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy, OnInit {
             responsive: true,
             scales: {
               x: {
-                display: false,
+                display: true,
                 grid: {
                   display: false
                 },
@@ -123,7 +154,9 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy, OnInit {
     }
   }
 
-  public ngOnDestroy() {
-    this.chart?.destroy();
+  private isInFuture(aContext: any, aValue: any) {
+    return isAfter(new Date(aContext?.p0?.parsed?.x), new Date())
+      ? aValue
+      : undefined;
   }
 }

apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.component.ts

@@ -0,0 +1,34 @@
+import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
+import { MatCheckboxChange } from '@angular/material/checkbox';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import {
+  STAY_SIGNED_IN,
+  SettingsStorageService
+} from '@ghostfolio/client/services/settings-storage.service';
+
+@Component({
+  selector: 'gf-login-with-access-token-dialog',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styleUrls: ['./login-with-access-token-dialog.scss'],
+  templateUrl: 'login-with-access-token-dialog.html'
+})
+export class LoginWithAccessTokenDialog {
+  public constructor(
+    @Inject(MAT_DIALOG_DATA) public data: any,
+    public dialogRef: MatDialogRef<LoginWithAccessTokenDialog>,
+    private settingsStorageService: SettingsStorageService
+  ) {}
+
+  ngOnInit() {}
+
+  public onChangeStaySignedIn(aValue: MatCheckboxChange) {
+    this.settingsStorageService.setSetting(
+      STAY_SIGNED_IN,
+      aValue.checked?.toString()
+    );
+  }
+
+  public onClose() {
+    this.dialogRef.close();
+  }
+}

apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.html

@@ -1,4 +1,9 @@
-<h1 mat-dialog-title i18n>Sign in</h1>
+<gf-dialog-header
+  mat-dialog-title
+  [title]="data.title"
+  (closeButtonClicked)="onClose()"
+></gf-dialog-header>
+
 <div mat-dialog-content>
   <div>
     <ng-container *ngIf="data.hasPermissionToUseSocialLogin">
@@ -21,15 +26,21 @@
     </mat-form-field>
   </div>
 </div>
-<div class="float-right" mat-dialog-actions>
-  <button i18n mat-flat-button [mat-dialog-close]="undefined">Cancel</button>
-  <button
-    color="primary"
-    i18n
-    mat-flat-button
-    [disabled]="!data.accessToken"
-    [mat-dialog-close]="data"
-  >
-    Sign in
-  </button>
+<div mat-dialog-actions>
+  <div class="flex-grow-1">
+    <mat-checkbox i18n (change)="onChangeStaySignedIn($event)"
+      >Stay signed in</mat-checkbox
+    >
+  </div>
+  <div>
+    <button
+      color="primary"
+      i18n
+      mat-flat-button
+      [disabled]="!data.accessToken"
+      [mat-dialog-close]="data"
+    >
+      Sign in
+    </button>
+  </div>
 </div>

apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.module.ts

@@ -3,10 +3,12 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 
+import { GfDialogHeaderModule } from '../dialog-header/dialog-header.module';
 import { LoginWithAccessTokenDialog } from './login-with-access-token-dialog.component';
 
 @NgModule({
@@ -15,7 +17,9 @@ import { LoginWithAccessTokenDialog } from './login-with-access-token-dialog.com
   imports: [
     CommonModule,
     FormsModule,
+    GfDialogHeaderModule,
     MatButtonModule,
+    MatCheckboxModule,
     MatDialogModule,
     MatFormFieldModule,
     MatInputModule,

apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.scss

@@ -0,0 +1,15 @@
+:host {
+  display: block;
+
+  textarea.mat-input-element.cdk-textarea-autosize {
+    box-sizing: content-box;
+  }
+
+  .mat-checkbox {
+    ::ng-deep {
+      label {
+        margin-bottom: 0;
+      }
+    }
+  }
+}

apps/client/src/app/components/performance-chart-dialog/performance-chart-dialog.component.ts

@@ -28,7 +28,7 @@ export class PerformanceChartDialog {
   public title: string;
 
   public constructor(
-    private cd: ChangeDetectorRef,
+    private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
     public dialogRef: MatDialogRef<PerformanceChartDialog>,
     @Inject(MAT_DIALOG_DATA) public data: PositionDetailDialogParams
@@ -46,7 +46,7 @@ export class PerformanceChartDialog {
 
         this.historicalDataItems = this.data.historicalDataItems;
 
-        this.historicalDataItems.forEach((historicalDataItem) => {
+        this.historicalDataItems?.forEach((historicalDataItem) => {
           const benchmarkItem = historicalData.find((item) => {
             return item.date === historicalDataItem.date;
           });
@@ -75,7 +75,7 @@ export class PerformanceChartDialog {
           }
         });
 
-        this.cd.markForCheck();
+        this.changeDetectorRef.markForCheck();
       });
 
     this.title = `Performance vs. ${this.benchmarkLabel}`;

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-positions-chart/portfolio-positions-chart.component.ts

@@ -1,158 +0,0 @@
-// import 'chartjs-chart-timeline';
-
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  OnChanges,
-  OnInit
-} from '@angular/core';
-import { PortfolioItem } from '@ghostfolio/common/interfaces';
-import { endOfDay, parseISO, startOfDay } from 'date-fns';
-
-@Component({
-  selector: 'gf-portfolio-positions-chart',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './portfolio-positions-chart.component.html',
-  styleUrls: ['./portfolio-positions-chart.component.scss']
-})
-export class PortfolioPositionsChartComponent implements OnChanges, OnInit {
-  @Input() portfolioItems: PortfolioItem[];
-
-  // @ViewChild('timelineCanvas') timeline;
-
-  public isLoading = true;
-
-  public constructor() {}
-
-  public ngOnInit() {}
-
-  public ngOnChanges() {
-    if (this.portfolioItems) {
-      this.initialize();
-    }
-  }
-
-  private initialize() {
-    this.isLoading = true;
-
-    let datasets = [];
-    const fromToPosition = {};
-
-    this.portfolioItems.forEach((positionsByDay) => {
-      Object.keys(positionsByDay.positions).forEach((symbol) => {
-        if (fromToPosition[symbol]) {
-          fromToPosition[symbol].push({
-            date: positionsByDay.date,
-            quantity: positionsByDay.positions[symbol].quantity
-          });
-        } else {
-          fromToPosition[symbol] = [
-            {
-              date: positionsByDay.date,
-              quantity: positionsByDay.positions[symbol].quantity
-            }
-          ];
-        }
-      });
-    });
-
-    Object.keys(fromToPosition).forEach((symbol) => {
-      let currentDate = null;
-      let currentQuantity = null;
-      let data = [];
-      let hasStock = false;
-
-      fromToPosition[symbol].forEach((x, index) => {
-        if (x.quantity > 0 && index === 0) {
-          currentDate = x.date;
-          hasStock = true;
-        }
-
-        if (x.quantity === 0 || index === fromToPosition[symbol].length - 1) {
-          if (hasStock) {
-            data.push([
-              startOfDay(parseISO(currentDate)),
-              endOfDay(parseISO(x.date)),
-              currentQuantity
-            ]);
-            hasStock = false;
-          } else {
-            // Do nothing
-          }
-        } else {
-          if (hasStock) {
-            // Do nothing
-          } else {
-            currentDate = x.date;
-            hasStock = true;
-          }
-        }
-
-        currentQuantity = x.quantity;
-      });
-
-      if (data.length === 0) {
-        // Fill data for today
-        data.push([
-          startOfDay(new Date()),
-          endOfDay(new Date()),
-          currentQuantity
-        ]);
-      }
-
-      datasets.push({ data, symbol });
-    });
-
-    // Sort by date
-    datasets = datasets.sort((a: any, b: any) => {
-      return a.data[0][0].getTime() - b.data[0][0].getTime();
-    });
-
-    /*new Chart(this.timeline.nativeElement, {
-      type: 'timeline',
-      options: {
-        elements: {
-          colorFunction: (text, data, dataset, index) => {
-            return `rgba(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`;
-          },
-          showText: false,
-          textPadding: 4
-        },
-        maintainAspectRatio: true,
-        responsive: true,
-        scales: {
-          xAxes: [
-            {
-              gridLines: {
-                display: false
-              },
-              position: 'top',
-              time: {
-                unit: 'year'
-              }
-            }
-          ],
-          yAxes: [
-            {
-              gridLines: {
-                display: false
-              },
-              ticks: {
-                display: false
-              }
-            }
-          ]
-        }
-      },
-      data: {
-        datasets,
-        labels: datasets.map((dataset) => {
-          return dataset.symbol;
-        })
-      }
-    });*/
-
-    this.isLoading = false;
-  }
-}

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';
@@ -24,11 +24,13 @@ import { Chart } from 'chart.js';
   styleUrls: ['./portfolio-proportion-chart.component.scss']
 })
 export class PortfolioProportionChartComponent
-  implements OnChanges, OnDestroy, OnInit {
+  implements OnChanges, OnDestroy, OnInit
+{
   @Input() baseCurrency: Currency;
   @Input() isInPercent: boolean;
   @Input() key: string;
   @Input() locale: string;
+  @Input() maxItems?: number;
   @Input() positions: {
     [symbol: string]: Pick<PortfolioPosition, 'type'> & { value: number };
   };
@@ -41,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() {
@@ -71,9 +71,8 @@ export class PortfolioProportionChartComponent
     Object.keys(this.positions).forEach((symbol) => {
       if (this.positions[symbol][this.key]) {
         if (chartData[this.positions[symbol][this.key]]) {
-          chartData[this.positions[symbol][this.key]].value += this.positions[
-            symbol
-          ].value;
+          chartData[this.positions[symbol][this.key]].value +=
+            this.positions[symbol].value;
         } else {
           chartData[this.positions[symbol][this.key]] = {
             value: this.positions[symbol].value
@@ -90,12 +89,44 @@ export class PortfolioProportionChartComponent
       }
     });
 
-    const chartDataSorted = Object.entries(chartData)
+    let chartDataSorted = Object.entries(chartData)
       .sort((a, b) => {
         return a[1].value - b[1].value;
       })
       .reverse();
 
+    if (this.maxItems && chartDataSorted.length > this.maxItems) {
+      // Add surplus items to unknown group
+      const rest = chartDataSorted.splice(
+        this.maxItems,
+        chartDataSorted.length - 1
+      );
+
+      let unknownItem = chartDataSorted.find((charDataItem) => {
+        return charDataItem[0] === UNKNOWN_KEY;
+      });
+
+      if (!unknownItem) {
+        const index = chartDataSorted.push([UNKNOWN_KEY, { value: 0 }]);
+        unknownItem = chartDataSorted[index];
+      }
+
+      rest.forEach((restItem) => {
+        if (unknownItem?.[1]) {
+          unknownItem[1] = {
+            value: unknownItem[1].value + restItem[1].value
+          };
+        }
+      });
+
+      // Sort data again
+      chartDataSorted = chartDataSorted
+        .sort((a, b) => {
+          return a[1].value - b[1].value;
+        })
+        .reverse();
+    }
+
     chartDataSorted.forEach(([symbol, item], index) => {
       if (this.colorMap[symbol]) {
         // Reuse color

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

@@ -34,7 +34,7 @@ export class PositionDetailDialog {
   public transactionCount: number;
 
   public constructor(
-    private cd: ChangeDetectorRef,
+    private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
     public dialogRef: MatDialogRef<PositionDetailDialog>,
     @Inject(MAT_DIALOG_DATA) public data: PositionDetailDialogParams
@@ -127,7 +127,7 @@ export class PositionDetailDialog {
             this.benchmarkDataItems[0].value = this.averagePrice;
           }
 
-          this.cd.markForCheck();
+          this.changeDetectorRef.markForCheck();
         }
       );
   }

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/components/transactions-table/transactions-table.component.html

@@ -8,7 +8,7 @@
       [removable]="true"
       (removed)="removeKeyword(searchKeyword)"
     >
-      {{ searchKeyword }}
+      {{ searchKeyword | gfSymbol }}
       <ion-icon class="ml-2" matPrefix name="close-outline"></ion-icon>
     </mat-chip>
     <input
@@ -26,11 +26,8 @@
     #autocomplete="matAutocomplete"
     (optionSelected)="keywordSelected($event)"
   >
-    <mat-option
-      *ngFor="let transaction of filteredTransactions | async"
-      [value]="transaction"
-    >
-      {{ transaction }}
+    <mat-option *ngFor="let filter of filters | async" [value]="filter">
+      {{ filter | gfSymbol }}
     </mat-option>
   </mat-autocomplete>
 </mat-form-field>
@@ -43,47 +40,51 @@
   mat-table
   [dataSource]="dataSource"
 >
-  <ng-container matColumnDef="date">
+  <ng-container matColumnDef="count">
     <th
       *matHeaderCellDef
-      class="justify-content-center px-1"
+      class="d-none d-lg-table-cell px-1 text-right"
       i18n
       mat-header-cell
-      mat-sort-header
     >
+      #
+    </th>
+    <td
+      *matCellDef="let element; let i = index"
+      class="d-none d-lg-table-cell px-1 text-right"
+      mat-cell
+    >
+      {{ dataSource.data.length - i }}
+    </td>
+  </ng-container>
+  <ng-container matColumnDef="date">
+    <th *matHeaderCellDef class="px-1" i18n mat-header-cell mat-sort-header>
       Date
     </th>
     <td *matCellDef="let element" class="px-1" mat-cell>
-      <div class="d-flex justify-content-center">
+      <div class="d-flex">
         {{ element.date | date: defaultDateFormat }}
       </div>
     </td>
   </ng-container>
 
   <ng-container matColumnDef="type">
-    <th
-      *matHeaderCellDef
-      class="justify-content-center px-1"
-      i18n
-      mat-header-cell
-      mat-sort-header
-    >
+    <th *matHeaderCellDef class="px-1" i18n mat-header-cell mat-sort-header>
       Type
     </th>
-    <td mat-cell *matCellDef="let element" class="px-1 text-center">
+    <td mat-cell *matCellDef="let element" class="px-1">
       <div
-        class="d-inline-flex justify-content-center pl-1 pr-2 py-1 type-badge"
+        class="d-inline-flex p-1 type-badge"
         [ngClass]="element.type == 'BUY' ? 'buy' : 'sell'"
       >
         <ion-icon
-          class="mr-1"
           [name]="
             element.type === 'BUY'
               ? 'arrow-forward-circle-outline'
               : 'arrow-back-circle-outline'
           "
         ></ion-icon>
-        <span>{{ element.type }}</span>
+        <span class="d-none d-lg-block mx-1">{{ element.type }}</span>
       </div>
     </td>
   </ng-container>
@@ -93,24 +94,30 @@
       Symbol
     </th>
     <td *matCellDef="let element" class="px-1" mat-cell>
-      {{ element.symbol | gfSymbol }}
+      <div class="d-flex align-items-center">
+        {{ element.symbol | gfSymbol }}
+        <span
+          *ngIf="isAfter(element.date, endOfToday)"
+          class="badge badge-secondary ml-1"
+          i18n
+          >Draft</span
+        >
+      </div>
     </td>
   </ng-container>
 
   <ng-container matColumnDef="currency">
     <th
       *matHeaderCellDef
-      class="d-none d-lg-table-cell justify-content-center px-1"
-      mat-header-cell
+      class="d-none d-lg-table-cell px-1"
       i18n
+      mat-header-cell
       mat-sort-header
     >
       Currency
     </th>
     <td *matCellDef="let element" class="d-none d-lg-table-cell px-1" mat-cell>
-      <div class="d-flex justify-content-center">
-        {{ element.currency }}
-      </div>
+      {{ element.currency }}
     </td>
   </ng-container>
 
@@ -178,8 +185,8 @@
   </ng-container>
 
   <ng-container matColumnDef="account">
-    <th *matHeaderCellDef class="px-1" i18n mat-header-cell mat-sort-header>
-      Account
+    <th *matHeaderCellDef class="px-1" mat-header-cell>
+      <span class="d-none d-lg-block" i18n>Account</span>
     </th>
     <td *matCellDef="let element" class="px-1" mat-cell>
       <div class="d-flex">

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

@@ -23,7 +23,7 @@ import { MatTableDataSource } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
 import { DEFAULT_DATE_FORMAT } from '@ghostfolio/common/config';
 import { OrderWithAccount } from '@ghostfolio/common/types';
-import { format } from 'date-fns';
+import { endOfToday, format, isAfter } from 'date-fns';
 import { BehaviorSubject, Observable, Subject, Subscription } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -39,7 +39,8 @@ const SEARCH_STRING_SEPARATOR = ',';
   styleUrls: ['./transactions-table.component.scss']
 })
 export class TransactionsTableComponent
-  implements OnChanges, OnDestroy, OnInit {
+  implements OnChanges, OnDestroy, OnInit
+{
   @Input() baseCurrency: string;
   @Input() deviceType: string;
   @Input() locale: string;
@@ -54,13 +55,14 @@ export class TransactionsTableComponent
   @ViewChild('searchInput') searchInput: ElementRef<HTMLInputElement>;
   @ViewChild(MatSort) sort: MatSort;
 
-  public dataSource: MatTableDataSource<OrderWithAccount> = new MatTableDataSource();
+  public dataSource: MatTableDataSource<OrderWithAccount> =
+    new MatTableDataSource();
   public defaultDateFormat = DEFAULT_DATE_FORMAT;
   public displayedColumns = [];
-  public filteredTransactions$: Subject<string[]> = new BehaviorSubject([]);
-  public filteredTransactions: Observable<
-    string[]
-  > = this.filteredTransactions$.asObservable();
+  public endOfToday = endOfToday();
+  public filters$: Subject<string[]> = new BehaviorSubject([]);
+  public filters: Observable<string[]> = this.filters$.asObservable();
+  public isAfter = isAfter;
   public isLoading = true;
   public placeholder = '';
   public routeQueryParams: Subscription;
@@ -68,7 +70,7 @@ export class TransactionsTableComponent
   public searchKeywords: string[] = [];
   public separatorKeysCodes: number[] = [ENTER, COMMA];
 
-  private allFilteredTransactions: string[];
+  private allFilters: string[];
   private unsubscribeSubject = new Subject<void>();
 
   public constructor(
@@ -90,13 +92,13 @@ export class TransactionsTableComponent
     this.searchControl.valueChanges.subscribe((keyword) => {
       if (keyword) {
         const filterValue = keyword.toLowerCase();
-        this.filteredTransactions$.next(
-          this.allFilteredTransactions.filter(
+        this.filters$.next(
+          this.allFilters.filter(
             (filter) => filter.toLowerCase().indexOf(filterValue) === 0
           )
         );
       } else {
-        this.filteredTransactions$.next(this.allFilteredTransactions);
+        this.filters$.next(this.allFilters);
       }
     });
   }
@@ -135,6 +137,7 @@ export class TransactionsTableComponent
 
   public ngOnChanges() {
     this.displayedColumns = [
+      'count',
       'date',
       'type',
       'symbol',
@@ -239,13 +242,13 @@ export class TransactionsTableComponent
     this.placeholder =
       lowercaseSearchKeywords.length <= 0 ? SEARCH_PLACEHOLDER : '';
 
-    this.allFilteredTransactions = this.getSearchableFieldValues(
-      this.transactions
-    ).filter((item) => {
-      return !lowercaseSearchKeywords.includes(item.trim().toLowerCase());
-    });
+    this.allFilters = this.getSearchableFieldValues(this.transactions).filter(
+      (item) => {
+        return !lowercaseSearchKeywords.includes(item.trim().toLowerCase());
+      }
+    );
 
-    this.filteredTransactions$.next(this.allFilteredTransactions);
+    this.filters$.next(this.allFilters);
   }
 
   private getSearchableFieldValues(transactions: OrderWithAccount[]): string[] {

apps/client/src/app/components/world-map-chart/world-map-chart.component.html

@@ -1,12 +1,10 @@
 <ngx-skeleton-loader
   *ngIf="isLoading"
   animation="pulse"
+  class="h-100"
   [theme]="{
-    height: '30rem',
     width: '100%'
   }"
 ></ngx-skeleton-loader>
-<canvas
-  #timelineCanvas
-  [ngStyle]="{ display: isLoading ? 'none' : 'block' }"
-></canvas>
+
+<div class="align-items-center d-flex h-100 w-100" id="svgMap"></div>

apps/client/src/app/components/world-map-chart/world-map-chart.component.scss

@@ -0,0 +1,32 @@
+:host {
+  display: block;
+  height: 100%;
+
+  ::ng-deep {
+    .loader {
+      height: 100% !important;
+    }
+
+    .svgMap-map-wrapper {
+      background: transparent;
+
+      .svgMap-country {
+        stroke: #e5e5e5;
+      }
+
+      .svgMap-map-controls-wrapper {
+        display: none;
+      }
+    }
+  }
+}
+
+:host-context(.is-dark-theme) {
+  ::ng-deep {
+    .svgMap-map-wrapper {
+      .svgMap-country {
+        stroke: #414141;
+      }
+    }
+  }
+}

apps/client/src/app/components/world-map-chart/world-map-chart.component.ts

@@ -0,0 +1,77 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit
+} from '@angular/core';
+import { Currency } from '@prisma/client';
+import svgMap from 'svgmap';
+
+@Component({
+  selector: 'gf-world-map-chart',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './world-map-chart.component.html',
+  styleUrls: ['./world-map-chart.component.scss']
+})
+export class WorldMapChartComponent implements OnChanges, OnDestroy, OnInit {
+  @Input() baseCurrency: Currency;
+  @Input() countries: { [code: string]: { name: string; value: number } };
+
+  public isLoading = true;
+  public svgMapElement;
+
+  public constructor(private changeDetectorRef: ChangeDetectorRef) {}
+
+  public ngOnInit() {}
+
+  public ngOnChanges() {
+    if (this.countries) {
+      this.isLoading = true;
+
+      this.destroySvgMap();
+
+      this.initialize();
+    }
+  }
+
+  public ngOnDestroy() {
+    this.destroySvgMap();
+  }
+
+  private initialize() {
+    this.svgMapElement = new svgMap({
+      colorMax: '#22bdb9',
+      colorMin: '#c3f1f0',
+      colorNoData: 'transparent',
+      data: {
+        applyData: 'value',
+        data: {
+          value: {
+            format: `{0} ${this.baseCurrency}`
+          }
+        },
+        values: this.countries
+      },
+      hideFlag: true,
+      minZoom: 1.06,
+      maxZoom: 1.06,
+      targetElementID: 'svgMap'
+    });
+
+    setTimeout(() => {
+      this.isLoading = false;
+
+      this.changeDetectorRef.markForCheck();
+    }, 500);
+  }
+
+  private destroySvgMap() {
+    this.svgMapElement?.mapWrapper?.remove();
+    this.svgMapElement?.tooltip?.remove();
+
+    this.svgMapElement = null;
+  }
+}

apps/client/src/app/components/world-map-chart/world-map-chart.module.ts

@@ -2,12 +2,12 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
-import { PortfolioPositionsChartComponent } from './portfolio-positions-chart.component';
+import { WorldMapChartComponent } from './world-map-chart.component';
 
 @NgModule({
-  declarations: [PortfolioPositionsChartComponent],
-  exports: [PortfolioPositionsChartComponent],
+  declarations: [WorldMapChartComponent],
+  exports: [WorldMapChartComponent],
   imports: [CommonModule, NgxSkeletonLoaderModule],
   providers: []
 })
-export class PortfolioPositionsChartModule {}
+export class GfWorldMapChartModule {}

apps/client/src/app/core/auth.guard.ts

@@ -5,16 +5,26 @@ import {
   Router,
   RouterStateSnapshot
 } from '@angular/router';
+import { ViewMode } from '@prisma/client';
+import { EMPTY } from 'rxjs';
+import { catchError } from 'rxjs/operators';
 
 import { SettingsStorageService } from '../services/settings-storage.service';
-import { TokenStorageService } from '../services/token-storage.service';
+import { UserService } from '../services/user/user.service';
 
 @Injectable({ providedIn: 'root' })
 export class AuthGuard implements CanActivate {
+  private static PUBLIC_PAGE_ROUTES = [
+    '/about',
+    '/pricing',
+    '/register',
+    '/resources'
+  ];
+
   constructor(
     private router: Router,
     private settingsStorageService: SettingsStorageService,
-    private tokenStorageService: TokenStorageService
+    private userService: UserService
   ) {}
 
   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
@@ -25,23 +35,52 @@ export class AuthGuard implements CanActivate {
       );
     }
 
-    const isLoggedIn = !!this.tokenStorageService.getToken();
+    return new Promise<boolean>((resolve) => {
+      this.userService
+        .get()
+        .pipe(
+          catchError(() => {
+            if (route.queryParams?.utm_source) {
+              this.router.navigate(['/register']);
+              resolve(false);
+            } else if (AuthGuard.PUBLIC_PAGE_ROUTES.includes(state.url)) {
+              resolve(true);
+              return EMPTY;
+            } else if (state.url !== '/start') {
+              this.router.navigate(['/start']);
+              resolve(false);
+              return EMPTY;
+            }
 
-    if (isLoggedIn) {
-      if (state.url === '/start') {
-        this.router.navigate(['/home']);
-        return false;
-      }
+            resolve(true);
+            return EMPTY;
+          })
+        )
+        .subscribe((user) => {
+          if (
+            state.url.startsWith('/home') &&
+            user.settings.viewMode === ViewMode.ZEN
+          ) {
+            this.router.navigate(['/zen']);
+            resolve(false);
+          } else if (state.url.startsWith('/start')) {
+            if (user.settings.viewMode === ViewMode.ZEN) {
+              this.router.navigate(['/zen']);
+            } else {
+              this.router.navigate(['/home']);
+            }
 
-      return true;
-    }
+            resolve(false);
+          } else if (
+            state.url.startsWith('/zen') &&
+            user.settings.viewMode === ViewMode.DEFAULT
+          ) {
+            this.router.navigate(['/home']);
+            resolve(false);
+          }
 
-    // Not logged in
-    if (state.url !== '/start') {
-      this.router.navigate(['/start']);
-      return false;
-    }
-
-    return true;
+          resolve(true);
+        });
+    });
   }
 }

apps/client/src/app/core/http-response.interceptor.ts

@@ -2,12 +2,10 @@ import {
   HTTP_INTERCEPTORS,
   HttpErrorResponse,
   HttpEvent,
-  HttpResponse
-} from '@angular/common/http';
-import {
   HttpHandler,
   HttpInterceptor,
-  HttpRequest
+  HttpRequest,
+  HttpResponse
 } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import {
@@ -16,6 +14,7 @@ import {
   TextOnlySnackBar
 } from '@angular/material/snack-bar';
 import { Router } from '@angular/router';
+import { WebAuthnService } from '@ghostfolio/client/services/web-authn.service';
 import { StatusCodes } from 'http-status-codes';
 import { Observable, throwError } from 'rxjs';
 import { catchError, tap } from 'rxjs/operators';
@@ -29,7 +28,8 @@ export class HttpResponseInterceptor implements HttpInterceptor {
   public constructor(
     private router: Router,
     private tokenStorageService: TokenStorageService,
-    private snackBar: MatSnackBar
+    private snackBar: MatSnackBar,
+    private webAuthnService: WebAuthnService
   ) {}
 
   public intercept(
@@ -78,8 +78,11 @@ export class HttpResponseInterceptor implements HttpInterceptor {
             });
           }
         } else if (error.status === StatusCodes.UNAUTHORIZED) {
-          this.tokenStorageService.signOut();
-          this.router.navigate(['start']);
+          if (this.webAuthnService.isEnabled()) {
+            this.router.navigate(['/webauthn']);
+          } else {
+            this.tokenStorageService.signOut();
+          }
         }
 
         return throwError('');

apps/client/src/app/pages/about/about-page-routing.module.ts

@@ -1,9 +1,12 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
 
 import { AboutPageComponent } from './about-page.component';
 
-const routes: Routes = [{ path: '', component: AboutPageComponent }];
+const routes: Routes = [
+  { path: '', component: AboutPageComponent, canActivate: [AuthGuard] }
+];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],

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

@@ -1,8 +1,10 @@
 import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { DataService } from '@ghostfolio/client/services/data.service';
-import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service';
+import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { baseCurrency } from '@ghostfolio/common/config';
 import { User } from '@ghostfolio/common/interfaces';
+import { Statistics } from '@ghostfolio/common/interfaces/statistics.interface';
+import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -15,8 +17,10 @@ import { environment } from '../../../environments/environment';
 })
 export class AboutPageComponent implements OnInit {
   public baseCurrency = baseCurrency;
+  public hasPermissionForStatistics: boolean;
   public isLoggedIn: boolean;
   public lastPublish = environment.lastPublish;
+  public statistics: Statistics;
   public user: User;
   public version = environment.version;
 
@@ -26,28 +30,37 @@ export class AboutPageComponent implements OnInit {
    * @constructor
    */
   public constructor(
-    private cd: ChangeDetectorRef,
+    private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
-    private tokenStorageService: TokenStorageService
+    private userService: UserService
   ) {}
 
   /**
    * Initializes the controller
    */
   public ngOnInit() {
-    this.isLoggedIn = !!this.tokenStorageService.getToken();
+    this.dataService
+      .fetchInfo()
+      .subscribe(({ globalPermissions, statistics }) => {
+        this.hasPermissionForStatistics = hasPermission(
+          globalPermissions,
+          permissions.enableStatistics
+        );
 
-    if (this.isLoggedIn)
-      this.tokenStorageService
-        .onChangeHasToken()
-        .pipe(takeUntil(this.unsubscribeSubject))
-        .subscribe(() => {
-          this.dataService.fetchUser().subscribe((user) => {
-            this.user = user;
+        this.statistics = statistics;
 
-            this.cd.markForCheck();
-          });
-        });
+        this.changeDetectorRef.markForCheck();
+      });
+
+    this.userService.stateChanged
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((state) => {
+        if (state?.user) {
+          this.user = state.user;
+
+          this.changeDetectorRef.markForCheck();
+        }
+      });
   }
 
   public ngOnDestroy() {

apps/client/src/app/pages/about/about-page.html

@@ -2,37 +2,28 @@
   <div class="mb-5 row">
     <div class="col">
       <h3 class="d-flex justify-content-center mb-3" i18n>About Ghostfolio</h3>
-      <mat-card class="mb-3">
+      <mat-card>
         <mat-card-content>
           <p>
-            <strong>Ghostfolio</strong> ({{ version }}) is open source software
-            which 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. The project
-            has been initiated by
+            <strong>Ghostfolio</strong> is open source software which 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. The project has been initiated by
             <a href="https://dotsilver.ch">Thomas Kaul</a>.
             <ng-container *ngIf="lastPublish">
-              This instance has been last published on {{ lastPublish
-              }}.</ng-container
+              This instance is running Ghostfolio {{ version }} and has been
+              last published on {{ lastPublish }}.</ng-container
             >
           </p>
           <p>
             If you encounter a bug or would like to suggest an improvement or a
-            new feature, please open an issue at
-            <a href="https://github.com/ghostfolio/ghostfolio">GitHub</a>, tweet
-            to <a href="https://twitter.com/ghostfolio_">@ghostfolio_</a> or
-            send an e-mail to
-            <a href="mailto:hi@ghostfol.io">hi@ghostfol.io</a>.
+            new feature, please tweet to
+            <a href="https://twitter.com/ghostfolio_">@ghostfolio_</a>, send an
+            e-mail to <a href="mailto:hi@ghostfol.io">hi@ghostfol.io</a> or open
+            an issue at
+            <a href="https://github.com/ghostfolio/ghostfolio">GitHub</a>.
           </p>
           <p class="text-center">
-            <a
-              class="mx-2"
-              href="https://github.com/ghostfolio/ghostfolio"
-              mat-icon-button
-              title="Find Ghostfolio on GitHub"
-            >
-              <ion-icon name="logo-github" size="large"></ion-icon>
-            </a>
             <a
               class="mx-2"
               href="https://twitter.com/ghostfolio_"
@@ -49,6 +40,14 @@
             >
               <ion-icon name="mail" size="large"></ion-icon>
             </a>
+            <a
+              class="mx-2"
+              href="https://github.com/ghostfolio/ghostfolio"
+              mat-icon-button
+              title="Find Ghostfolio on GitHub"
+            >
+              <ion-icon name="logo-github" size="large"></ion-icon>
+            </a>
           </p>
           <div class="d-flex justify-content-center">
             <div
@@ -61,10 +60,44 @@
     </div>
   </div>
 
+  <div *ngIf="hasPermissionForStatistics" class="mb-5 row">
+    <div class="col">
+      <h3 class="mb-3 text-center" i18n>Ghostfolio in Numbers</h3>
+      <mat-card>
+        <mat-card-content>
+          <div class="row">
+            <div class="col-xs-12 col-md-4 my-2">
+              <h3 class="mb-0" [hidden]="!statistics?.activeUsers1d">
+                {{ statistics?.activeUsers1d ?? '-' }}
+              </h3>
+              <div class="h6 mb-0">
+                Active Users <small class="text-muted">(Last 24 hours)</small>
+              </div>
+            </div>
+            <div class="col-xs-12 col-md-4 my-2">
+              <h3 class="mb-0" [hidden]="!statistics?.activeUsers30d">
+                {{ statistics?.activeUsers30d ?? '-' }}
+              </h3>
+              <div class="h6 mb-0">
+                Active Users <small class="text-muted">(Last 30 days)</small>
+              </div>
+            </div>
+            <div class="col-xs-12 col-md-4 my-2">
+              <h3 class="mb-0" [hidden]="!statistics?.gitHubStargazers">
+                {{ statistics?.gitHubStargazers ?? '-' }}
+              </h3>
+              <div class="h6 mb-0">Stars on GitHub</div>
+            </div>
+          </div>
+        </mat-card-content>
+      </mat-card>
+    </div>
+  </div>
+
   <div class="mb-5 row">
     <div class="col">
       <h3 class="mb-3 text-center" i18n>Changelog</h3>
-      <mat-card class="changelog mb-3">
+      <mat-card class="changelog">
         <mat-card-content>
           <markdown [src]="'CHANGELOG.md'"></markdown>
         </mat-card-content>
@@ -75,7 +108,7 @@
   <div class="row">
     <div class="col">
       <h3 class="mb-3 text-center" i18n>License</h3>
-      <mat-card class="mb-3">
+      <mat-card>
         <mat-card-content>
           <markdown [src]="'LICENSE'"></markdown>
         </mat-card-content>

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

@@ -1,12 +1,24 @@
-import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component,
+  OnDestroy,
+  OnInit,
+  ViewChild
+} from '@angular/core';
+import {
+  MatSlideToggle,
+  MatSlideToggleChange
+} from '@angular/material/slide-toggle';
 import { DataService } from '@ghostfolio/client/services/data.service';
-import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service';
-import { DEFAULT_DATE_FORMAT } from '@ghostfolio/common/config';
+import { UserService } from '@ghostfolio/client/services/user/user.service';
+import { WebAuthnService } from '@ghostfolio/client/services/web-authn.service';
+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';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { StripeService } from 'ngx-stripe';
+import { EMPTY, Subject } from 'rxjs';
+import { catchError, switchMap, takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'gf-account-page',
@@ -14,12 +26,20 @@ import { takeUntil } from 'rxjs/operators';
   styleUrls: ['./account-page.scss']
 })
 export class AccountPageComponent implements OnDestroy, OnInit {
+  @ViewChild('toggleSignInWithFingerprintEnabledElement')
+  signInWithFingerprintElement: MatSlideToggle;
+
   public accesses: Access[];
-  public baseCurrency: Currency;
+  public baseCurrency = baseCurrency;
+  public coupon: number;
+  public couponId: string;
   public currencies: Currency[] = [];
   public defaultDateFormat = DEFAULT_DATE_FORMAT;
-  public hasPermissionForSubscription: boolean;
+  public hasPermissionForSubscription;
+  public hasPermissionToUpdateViewMode: boolean;
   public hasPermissionToUpdateUserSettings: boolean;
+  public price: number;
+  public priceId: string;
   public user: User;
 
   private unsubscribeSubject = new Subject<void>();
@@ -28,36 +48,49 @@ export class AccountPageComponent implements OnDestroy, OnInit {
    * @constructor
    */
   public constructor(
-    private cd: ChangeDetectorRef,
+    private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
-    private tokenStorageService: TokenStorageService
+    private stripeService: StripeService,
+    private userService: UserService,
+    public webAuthnService: WebAuthnService
   ) {
     this.dataService
       .fetchInfo()
       .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(({ currencies, globalPermissions }) => {
+      .subscribe(({ currencies, globalPermissions, subscriptions }) => {
+        this.coupon = subscriptions?.[0]?.coupon;
+        this.couponId = subscriptions?.[0]?.couponId;
         this.currencies = currencies;
 
         this.hasPermissionForSubscription = hasPermission(
           globalPermissions,
           permissions.enableSubscription
         );
+
+        this.price = subscriptions?.[0]?.price;
+        this.priceId = subscriptions?.[0]?.priceId;
+
+        this.changeDetectorRef.markForCheck();
       });
 
-    this.tokenStorageService
-      .onChangeHasToken()
+    this.userService.stateChanged
       .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(() => {
-        this.dataService.fetchUser().subscribe((user) => {
-          this.user = user;
+      .subscribe((state) => {
+        if (state?.user) {
+          this.user = state.user;
 
           this.hasPermissionToUpdateUserSettings = hasPermission(
             this.user.permissions,
             permissions.updateUserSettings
           );
 
-          this.cd.markForCheck();
-        });
+          this.hasPermissionToUpdateViewMode = hasPermission(
+            this.user.permissions,
+            permissions.updateViewMode
+          );
+
+          this.changeDetectorRef.markForCheck();
+        }
       });
   }
 
@@ -68,24 +101,97 @@ export class AccountPageComponent implements OnDestroy, OnInit {
     this.update();
   }
 
-  public onChangeBaseCurrency({ value: currency }: { value: Currency }) {
+  public onChangeUserSettings(aKey: string, aValue: string) {
+    const settings = { ...this.user.settings, [aKey]: aValue };
+
     this.dataService
-      .putUserSettings({ currency })
+      .putUserSettings({
+        baseCurrency: settings?.baseCurrency,
+        viewMode: settings?.viewMode
+      })
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(() => {
-        this.dataService.fetchUser().subscribe((user) => {
-          this.user = user;
+        this.userService.remove();
 
-          this.cd.markForCheck();
-        });
+        this.userService
+          .get()
+          .pipe(takeUntil(this.unsubscribeSubject))
+          .subscribe((user) => {
+            this.user = user;
+
+            this.changeDetectorRef.markForCheck();
+          });
       });
   }
 
+  public onCheckout() {
+    this.dataService
+      .createCheckoutSession({ couponId: this.couponId, priceId: this.priceId })
+      .pipe(
+        switchMap(({ sessionId }: { sessionId: string }) => {
+          return this.stripeService.redirectToCheckout({
+            sessionId
+          });
+        })
+      )
+      .subscribe((result) => {
+        if (result.error) {
+          alert(result.error.message);
+        }
+      });
+  }
+
+  public onSignInWithFingerprintChange(aEvent: MatSlideToggleChange) {
+    if (aEvent.checked) {
+      this.registerDevice();
+    } else {
+      const confirmation = confirm(
+        'Do you really want to remove this sign in method?'
+      );
+
+      if (confirmation) {
+        this.deregisterDevice();
+      } else {
+        this.update();
+      }
+    }
+  }
+
   public ngOnDestroy() {
     this.unsubscribeSubject.next();
     this.unsubscribeSubject.complete();
   }
 
+  private deregisterDevice() {
+    this.webAuthnService
+      .deregister()
+      .pipe(
+        catchError(() => {
+          this.update();
+
+          return EMPTY;
+        })
+      )
+      .subscribe(() => {
+        this.update();
+      });
+  }
+
+  private registerDevice() {
+    this.webAuthnService
+      .register()
+      .pipe(
+        catchError(() => {
+          this.update();
+
+          return EMPTY;
+        })
+      )
+      .subscribe(() => {
+        this.update();
+      });
+  }
+
   private update() {
     this.dataService
       .fetchAccesses()
@@ -93,7 +199,12 @@ export class AccountPageComponent implements OnDestroy, OnInit {
       .subscribe((response) => {
         this.accesses = response;
 
-        this.cd.markForCheck();
+        if (this.signInWithFingerprintElement) {
+          this.signInWithFingerprintElement.checked =
+            this.webAuthnService.isEnabled() ?? false;
+        }
+
+        this.changeDetectorRef.markForCheck();
       });
   }
 }

apps/client/src/app/pages/account/account-page.html

@@ -1,10 +1,7 @@
 <div class="container">
   <div class="row">
     <div class="col">
-      <h3 class="d-flex justify-content-center mb-3">
-        <ng-container *ngIf="user?.alias">{{ user.alias }}</ng-container>
-        <ng-container *ngIf="!user?.alias" i18n>Account</ng-container>
-      </h3>
+      <h3 class="d-flex justify-content-center mb-3" i18n>Account</h3>
     </div>
   </div>
   <div *ngIf="user?.settings" class="mb-5 row">
@@ -15,29 +12,50 @@
             <div class="w-50" i18n>Alias</div>
             <div class="w-50">{{ user.alias }}</div>
           </div>
-          <div *ngIf="hasPermissionForSubscription" class="d-flex py-1">
+          <div *ngIf="user?.subscription" class="d-flex py-1">
             <div class="w-50" i18n>Membership</div>
             <div class="w-50">
               <div class="align-items-center d-flex mb-1">
-                {{ user?.subscription?.type }}
+                {{ user.subscription.type }}
               </div>
-              <div>
+              <div *ngIf="user.subscription.expiresAt">
                 Valid until {{ user.subscription.expiresAt | date:
                 defaultDateFormat }}
               </div>
+              <div
+                *ngIf="hasPermissionForSubscription && !user.subscription.expiresAt"
+              >
+                <button
+                  color="primary"
+                  i18n
+                  mat-flat-button
+                  (click)="onCheckout(priceId)"
+                >
+                  Upgrade
+                </button>
+                <div *ngIf="price" class="mt-1">
+                  {{ baseCurrency }}
+                  <ng-container *ngIf="coupon"
+                    >{{ price - coupon | number : '1.2-2' }}
+                    <del>{{ price }}</del>
+                  </ng-container>
+                  <ng-container *ngIf="!coupon">{{ price }}</ng-container>
+                  <span i18n> per year</span>
+                </div>
+              </div>
             </div>
           </div>
           <div class="d-flex mt-4 py-1">
             <div class="pt-4 w-50" i18n>Settings</div>
             <div class="w-50">
-              <form #addTransactionForm="ngForm">
-                <mat-form-field appearance="outline" class="w-100">
+              <form #changeUserSettingsForm="ngForm">
+                <mat-form-field appearance="outline" class="mb-3 w-100">
                   <mat-label i18n>Base Currency</mat-label>
                   <mat-select
                     name="baseCurrency"
                     [disabled]="!hasPermissionToUpdateUserSettings"
                     [value]="user.settings.baseCurrency"
-                    (selectionChange)="onChangeBaseCurrency($event)"
+                    (selectionChange)="onChangeUserSettings('baseCurrency', $event.value)"
                   >
                     <mat-option
                       *ngFor="let currency of currencies"
@@ -46,9 +64,39 @@
                     >
                   </mat-select>
                 </mat-form-field>
+                <div class="align-items-center d-flex overflow-hidden">
+                  <mat-form-field appearance="outline" class="flex-grow-1">
+                    <mat-label i18n>View Mode</mat-label>
+                    <mat-select
+                      name="viewMode"
+                      [disabled]="!hasPermissionToUpdateViewMode"
+                      [value]="user.settings.viewMode"
+                      (selectionChange)="onChangeUserSettings('viewMode', $event.value)"
+                    >
+                      <mat-option value="DEFAULT">Default</mat-option>
+                      <mat-option value="ZEN">Zen</mat-option>
+                    </mat-select>
+                  </mat-form-field>
+                  <ion-icon
+                    *ngIf="!hasPermissionToUpdateViewMode"
+                    class="h5 mb-0 mx-3 text-muted"
+                    name="diamond-outline"
+                  ></ion-icon>
+                </div>
               </form>
             </div>
           </div>
+          <div class="align-items-center d-flex mt-4 py-1">
+            <div class="w-50" i18n>Sign in with fingerprint</div>
+            <div class="w-50">
+              <mat-slide-toggle
+                #toggleSignInWithFingerprintEnabledElement
+                color="primary"
+                [disabled]="!hasPermissionToUpdateUserSettings"
+                (change)="onSignInWithFingerprintChange($event)"
+              ></mat-slide-toggle>
+            </div>
+          </div>
         </mat-card-content>
       </mat-card>
     </div>

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

@@ -1,9 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { GfPortfolioAccessTableModule } from '@ghostfolio/client/components/access-table/access-table.module';
 
 import { AccountPageRoutingModule } from './account-page-routing.module';
@@ -17,9 +21,13 @@ import { AccountPageComponent } from './account-page.component';
     CommonModule,
     FormsModule,
     GfPortfolioAccessTableModule,
+    MatButtonModule,
     MatCardModule,
+    MatDialogModule,
     MatFormFieldModule,
+    MatInputModule,
     MatSelectModule,
+    MatSlideToggleModule,
     ReactiveFormsModule
   ],
   providers: []

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

@@ -5,7 +5,7 @@ import { CreateAccountDto } from '@ghostfolio/api/app/account/create-account.dto
 import { UpdateAccountDto } from '@ghostfolio/api/app/account/update-account.dto';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
-import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service';
+import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { Account as AccountModel, AccountType } from '@prisma/client';
@@ -35,14 +35,14 @@ export class AccountsPageComponent implements OnInit {
    * @constructor
    */
   public constructor(
-    private cd: ChangeDetectorRef,
+    private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
     private deviceService: DeviceDetectorService,
     private dialog: MatDialog,
     private impersonationStorageService: ImpersonationStorageService,
     private route: ActivatedRoute,
     private router: Router,
-    private tokenStorageService: TokenStorageService
+    private userService: UserService
   ) {
     this.routeQueryParams = route.queryParams
       .pipe(takeUntil(this.unsubscribeSubject))
@@ -75,23 +75,23 @@ export class AccountsPageComponent implements OnInit {
         this.hasImpersonationId = !!aId;
       });
 
-    this.tokenStorageService
-      .onChangeHasToken()
+    this.userService.stateChanged
       .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(() => {
-        this.dataService.fetchUser().subscribe((user) => {
-          this.user = user;
+      .subscribe((state) => {
+        if (state?.user) {
+          this.user = state.user;
+
           this.hasPermissionToCreateAccount = hasPermission(
-            user.permissions,
+            this.user.permissions,
             permissions.createAccount
           );
           this.hasPermissionToDeleteAccount = hasPermission(
-            user.permissions,
+            this.user.permissions,
             permissions.deleteAccount
           );
 
-          this.cd.markForCheck();
-        });
+          this.changeDetectorRef.markForCheck();
+        }
       });
 
     this.fetchAccounts();
@@ -105,7 +105,7 @@ export class AccountsPageComponent implements OnInit {
         this.router.navigate([], { queryParams: { createDialog: true } });
       }
 
-      this.cd.markForCheck();
+      this.changeDetectorRef.markForCheck();
     });
   }
 
@@ -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/accounts-page.module.ts

@@ -6,7 +6,7 @@ import { GfAccountsTableModule } from '@ghostfolio/client/components/accounts-ta
 
 import { AccountsPageRoutingModule } from './accounts-page-routing.module';
 import { AccountsPageComponent } from './accounts-page.component';
-import { CreateOrUpdateAccountDialogModule } from './create-or-update-account-dialog/create-or-update-account-dialog.module';
+import { GfCreateOrUpdateAccountDialogModule } from './create-or-update-account-dialog/create-or-update-account-dialog.module';
 
 @NgModule({
   declarations: [AccountsPageComponent],
@@ -14,8 +14,8 @@ import { CreateOrUpdateAccountDialogModule } from './create-or-update-account-di
   imports: [
     AccountsPageRoutingModule,
     CommonModule,
-    CreateOrUpdateAccountDialogModule,
     GfAccountsTableModule,
+    GfCreateOrUpdateAccountDialogModule,
     MatButtonModule,
     RouterModule
   ],

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

@@ -1,6 +1,6 @@
 <form #addAccountForm="ngForm" class="d-flex flex-column h-100">
-  <h1 *ngIf="data.account.id" mat-dialog-title i18n>Update account</h1>
-  <h1 *ngIf="!data.account.id" mat-dialog-title i18n>Add account</h1>
+  <h1 *ngIf="data.account.id" i18n mat-dialog-title>Update account</h1>
+  <h1 *ngIf="!data.account.id" i18n mat-dialog-title>Add account</h1>
   <div class="flex-grow-1" mat-dialog-content>
     <div>
       <mat-form-field appearance="outline" class="w-100">
@@ -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/accounts/create-or-update-account-dialog/create-or-update-account-dialog.module.ts

@@ -24,4 +24,4 @@ import { CreateOrUpdateAccountDialog } from './create-or-update-account-dialog.c
   ],
   providers: []
 })
-export class CreateOrUpdateAccountDialogModule {}
+export class GfCreateOrUpdateAccountDialogModule {}

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

@@ -2,10 +2,15 @@ import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { AdminService } from '@ghostfolio/client/services/admin.service';
 import { CacheService } from '@ghostfolio/client/services/cache.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
-import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service';
+import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { DEFAULT_DATE_FORMAT } from '@ghostfolio/common/config';
 import { AdminData, User } from '@ghostfolio/common/interfaces';
-import { formatDistanceToNow, isValid, parseISO, sub } from 'date-fns';
+import {
+  differenceInSeconds,
+  formatDistanceToNowStrict,
+  isValid,
+  parseISO
+} from 'date-fns';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -32,9 +37,9 @@ export class AdminPageComponent implements OnInit {
   public constructor(
     private adminService: AdminService,
     private cacheService: CacheService,
-    private cd: ChangeDetectorRef,
+    private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
-    private tokenStorageService: TokenStorageService
+    private userService: UserService
   ) {}
 
   /**
@@ -43,13 +48,12 @@ export class AdminPageComponent implements OnInit {
   public ngOnInit() {
     this.fetchAdminData();
 
-    this.tokenStorageService
-      .onChangeHasToken()
+    this.userService.stateChanged
       .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(() => {
-        this.dataService.fetchUser().subscribe((user) => {
-          this.user = user;
-        });
+      .subscribe((state) => {
+        if (state?.user) {
+          this.user = state.user;
+        }
       });
   }
 
@@ -77,14 +81,12 @@ export class AdminPageComponent implements OnInit {
 
   public formatDistanceToNow(aDateString: string) {
     if (aDateString) {
-      const distanceString = formatDistanceToNow(
-        sub(parseISO(aDateString), { seconds: 10 }),
-        {
-          addSuffix: true
-        }
-      );
+      const distanceString = formatDistanceToNowStrict(parseISO(aDateString), {
+        addSuffix: true
+      });
 
-      return distanceString === 'less than a minute ago'
+      return Math.abs(differenceInSeconds(parseISO(aDateString), new Date())) <
+        60
         ? 'just now'
         : distanceString;
     }
@@ -125,7 +127,7 @@ export class AdminPageComponent implements OnInit {
           this.users = users;
 
           if (isValid(parseISO(lastDataGathering?.toString()))) {
-            this.lastDataGathering = formatDistanceToNow(
+            this.lastDataGathering = formatDistanceToNowStrict(
               new Date(lastDataGathering),
               {
                 addSuffix: true
@@ -140,7 +142,7 @@ export class AdminPageComponent implements OnInit {
           this.transactionCount = transactionCount;
           this.userCount = userCount;
 
-          this.cd.markForCheck();
+          this.changeDetectorRef.markForCheck();
         }
       );
   }

apps/client/src/app/pages/admin/admin-page.html

@@ -73,26 +73,40 @@
         <table class="gf-table">
           <thead>
             <tr class="mat-header-row">
+              <th class="mat-header-cell px-1 py-2 text-right" i18n>#</th>
               <th class="mat-header-cell px-1 py-2" i18n>User</th>
-              <th class="mat-header-cell px-1 py-2" i18n>Registration Date</th>
-              <th class="mat-header-cell px-1 py-2" i18n>Accounts</th>
-              <th class="mat-header-cell px-1 py-2" i18n>Transactions</th>
-              <th class="mat-header-cell px-1 py-2" i18n>Engagement</th>
+              <th class="mat-header-cell px-1 py-2 text-right" i18n>
+                Registration Date
+              </th>
+              <th class="mat-header-cell px-1 py-2 text-right" i18n>
+                Accounts
+              </th>
+              <th class="mat-header-cell px-1 py-2 text-right" i18n>
+                Transactions
+              </th>
+              <th class="mat-header-cell px-1 py-2 text-right" i18n>
+                Engagement
+              </th>
               <th class="mat-header-cell px-1 py-2" i18n>Last Activitiy</th>
               <th class="mat-header-cell px-1 py-2"></th>
             </tr>
           </thead>
           <tbody>
-            <tr *ngFor="let userItem of users" class="mat-row">
+            <tr *ngFor="let userItem of users; let i = index" class="mat-row">
+              <td class="mat-cell px-1 py-2 text-right">{{ i + 1 }}</td>
               <td class="mat-cell px-1 py-2">
                 {{ userItem.alias || userItem.id }}
               </td>
-              <td class="mat-cell px-1 py-2">
+              <td class="mat-cell px-1 py-2 text-right">
                 {{ userItem.createdAt | date: defaultDateFormat }}
               </td>
-              <td class="mat-cell px-1 py-2">{{ userItem._count?.Account }}</td>
-              <td class="mat-cell px-1 py-2">{{ userItem._count?.Order }}</td>
-              <td class="mat-cell px-1 py-2">
+              <td class="mat-cell px-1 py-2 text-right">
+                {{ userItem._count?.Account }}
+              </td>
+              <td class="mat-cell px-1 py-2 text-right">
+                {{ userItem._count?.Order }}
+              </td>
+              <td class="mat-cell px-1 py-2 text-right">
                 {{ userItem.Analytics?.activityCount }}
               </td>
               <td class="mat-cell px-1 py-2">

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

@@ -1,5 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import {
+  STAY_SIGNED_IN,
+  SettingsStorageService
+} from '@ghostfolio/client/services/settings-storage.service';
 import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service';
 
 @Component({
@@ -14,6 +18,7 @@ export class AuthPageComponent implements OnInit {
   public constructor(
     private route: ActivatedRoute,
     private router: Router,
+    private settingsStorageService: SettingsStorageService,
     private tokenStorageService: TokenStorageService
   ) {}
 
@@ -23,7 +28,10 @@ export class AuthPageComponent implements OnInit {
   public ngOnInit() {
     this.route.params.subscribe((params) => {
       const jwt = params['jwt'];
-      this.tokenStorageService.saveToken(jwt);
+      this.tokenStorageService.saveToken(
+        jwt,
+        this.settingsStorageService.getSetting(STAY_SIGNED_IN) === 'true'
+      );
 
       this.router.navigate(['/']);
     });

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

@@ -10,7 +10,7 @@ import {
   RANGE,
   SettingsStorageService
 } from '@ghostfolio/client/services/settings-storage.service';
-import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service';
+import { UserService } from '@ghostfolio/client/services/user/user.service';
 import {
   PortfolioOverview,
   PortfolioPerformance,
@@ -58,7 +58,7 @@ export class HomePageComponent implements OnDestroy, OnInit {
    * @constructor
    */
   public constructor(
-    private cd: ChangeDetectorRef,
+    private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
     private deviceService: DeviceDetectorService,
     private dialog: MatDialog,
@@ -66,7 +66,7 @@ export class HomePageComponent implements OnDestroy, OnInit {
     private route: ActivatedRoute,
     private router: Router,
     private settingsStorageService: SettingsStorageService,
-    private tokenStorageService: TokenStorageService
+    private userService: UserService
   ) {
     this.routeQueryParams = this.route.queryParams
       .pipe(takeUntil(this.unsubscribeSubject))
@@ -76,14 +76,14 @@ export class HomePageComponent implements OnDestroy, OnInit {
         }
       });
 
-    this.tokenStorageService
-      .onChangeHasToken()
+    this.userService.stateChanged
       .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(() => {
-        this.dataService.fetchUser().subscribe((user) => {
-          this.user = user;
+      .subscribe((state) => {
+        if (state?.user) {
+          this.user = state.user;
+
           this.hasPermissionToAccessFearAndGreedIndex = hasPermission(
-            user.permissions,
+            this.user.permissions,
             permissions.accessFearAndGreedIndex
           );
 
@@ -94,17 +94,17 @@ export class HomePageComponent implements OnDestroy, OnInit {
               .subscribe(({ marketPrice }) => {
                 this.fearAndGreedIndex = marketPrice;
 
-                this.cd.markForCheck();
+                this.changeDetectorRef.markForCheck();
               });
           }
 
           this.hasPermissionToReadForeignPortfolio = hasPermission(
-            user.permissions,
+            this.user.permissions,
             permissions.readForeignPortfolio
           );
 
-          this.cd.markForCheck();
-        });
+          this.changeDetectorRef.markForCheck();
+        }
       });
   }
 
@@ -132,6 +132,11 @@ export class HomePageComponent implements OnDestroy, OnInit {
     this.update();
   }
 
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+
   private openDialog(): void {
     const dialogRef = this.dialog.open(PerformanceChartDialog, {
       autoFocus: false,
@@ -164,7 +169,7 @@ export class HomePageComponent implements OnDestroy, OnInit {
           };
         });
 
-        this.cd.markForCheck();
+        this.changeDetectorRef.markForCheck();
       });
 
     this.dataService
@@ -173,14 +178,14 @@ export class HomePageComponent implements OnDestroy, OnInit {
         this.performance = response;
         this.isLoadingPerformance = false;
 
-        this.cd.markForCheck();
+        this.changeDetectorRef.markForCheck();
       });
 
     this.dataService.fetchPortfolioOverview().subscribe((response) => {
       this.overview = response;
       this.isLoadingOverview = false;
 
-      this.cd.markForCheck();
+      this.changeDetectorRef.markForCheck();
     });
 
     this.dataService
@@ -190,14 +195,9 @@ export class HomePageComponent implements OnDestroy, OnInit {
         this.hasPositions =
           this.positions && Object.keys(this.positions).length > 0;
 
-        this.cd.markForCheck();
+        this.changeDetectorRef.markForCheck();
       });
 
-    this.cd.markForCheck();
-  }
-
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
+    this.changeDetectorRef.markForCheck();
   }
 }

apps/client/src/app/pages/home/home-page.module.ts

@@ -1,6 +1,5 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { RouterModule } from '@angular/router';
 import { GfLineChartModule } from '@ghostfolio/client/components/line-chart/line-chart.module';
@@ -27,7 +26,6 @@ import { HomePageComponent } from './home-page.component';
     GfPositionsModule,
     GfToggleModule,
     HomePageRoutingModule,
-    MatButtonModule,
     MatCardModule,
     RouterModule
   ],

apps/client/src/app/pages/landing/landing-page-routing.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
+
+import { LandingPageComponent } from './landing-page.component';
+
+const routes: Routes = [
+  { path: '', component: LandingPageComponent, canActivate: [AuthGuard] }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class LandingPageRoutingModule {}