Release 1.178.0 (#1136)

* Add default values

* Add database validation script

* Update changelog

.gitignore

@@ -24,15 +24,16 @@
 
 # misc
 /.angular/cache
+.env.prod
 /.sass-cache
 /connect.lock
 /coverage
 /dist
 /libpeerconnection.log
 npm-debug.log
-yarn-error.log
 testem.log
 /typings
+yarn-error.log
 
 # System Files
 .DS_Store

.travis.yml

@@ -2,7 +2,7 @@ language: node_js
 git:
   depth: false
 node_js:
-  - 14
+  - 16
 
 services:
   - docker

CHANGELOG.md

@@ -5,6 +5,255 @@ 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.178.0 - 09.08.2022
+
+### Added
+
+- Added `url` to the symbol profile overrides model for manual adjustments
+- Added default values for `countries` and `sectors` of the symbol profile overrides model
+
+### Changed
+
+- Simplified the initialization of the exchange rate service
+- Improved the orders query for `assetClass` with symbol profile overrides
+- Improved the styling of the benchmarks in the markets overview
+
+### Todo
+
+- Apply data migration (`yarn database:migrate`)
+
+## 1.177.0 - 04.08.2022
+
+### Added
+
+- Added `GHOSTFOLIO` as a default to `DATA_SOURCES`
+- Added the `AGPLv3` logo to the landing page
+
+### Changed
+
+- Refactored the initialization of the exchange rate service
+- Upgraded `angular` from version `14.0.2` to `14.1.0`
+- Upgraded `nestjs` from version `8.4.7` to `9.0.7`
+- Upgraded `Nx` from version `14.3.5` to `14.5.1`
+- Upgraded `prisma` from version `3.15.2` to `4.1.1`
+
+### Fixed
+
+- Handled database connection errors (do not exit process)
+
+## 1.176.2 - 31.07.2022
+
+### Added
+
+- Added page titles
+
+### Changed
+
+- Improved the performance of data provider requests by introducing a maximum number of symbols per request (chunk size)
+- Changed the log level settings
+- Refactored the access of the environment variables in the bootstrap function (api)
+- Upgraded `Node.js` from version `14` to `16` (`Dockerfile`)
+
+### Todo
+
+- Upgrade to `Node.js` 16+
+
+## 1.175.0 - 29.07.2022
+
+### Added
+
+- Set up a Frequently Asked Questions (FAQ) page
+- Added the savings rate to the investment timeline grouped by month
+
+### Fixed
+
+- Added the symbols to the activities in the account detail dialog
+
+## 1.174.0 - 27.07.2022
+
+### Added
+
+- Support a note for activities
+
+### Todo
+
+- Apply data migration (`yarn database:migrate`)
+
+## 1.173.0 - 23.07.2022
+
+### Fixed
+
+- Fixed an issue with the currency inconsistency in the _Yahoo Finance_ service (convert from `USX` to `USD`)
+
+## 1.172.0 - 23.07.2022
+
+### Added
+
+- Added a blog post: _Ghostfolio meets Internet Identity_
+
+## 1.171.0 - 22.07.2022
+
+### Added
+
+- Added _Internet Identity_ as a new social login provider
+
+### Changed
+
+- Improved the empty state of the
+  - _Analysis_ section
+  - _Holdings_ section
+  - performance chart on the home page
+
+### Fixed
+
+- Fixed the distorted tooltip in the performance chart on the home page
+- Fixed a calculation issue of the current month in the investment timeline grouped by month
+
+### Todo
+
+- Apply data migration (`yarn database:migrate`)
+
+## 1.170.0 - 19.07.2022
+
+### Added
+
+- Added support for the tags in the create or edit transaction dialog
+- Added support for the cryptocurrency _TerraUSD_ (`UST-USD`)
+
+### Changed
+
+- Removed the alias from the user interface as a preparation to remove it from the `User` database schema
+- Removed the activities import limit for users with a subscription
+
+### Todo
+
+- Rename the environment variable from `MAX_ORDERS_TO_IMPORT` to `MAX_ACTIVITIES_TO_IMPORT`
+
+## 1.169.0 - 14.07.2022
+
+### Added
+
+- Added support for the cryptocurrency _Songbird_ (`SGB1-USD`)
+- Added support for the cryptocurrency _Terra 2.0_ (`LUNA2-USD`)
+- Added a blog post
+
+### Changed
+
+- Refreshed the cryptocurrencies list to support more coins by default
+- Upgraded `date-fns` from version `2.22.1` to `2.28.0`
+
+## 1.168.0 - 10.07.2022
+
+### Added
+
+- Extended the investment timeline grouped by month
+
+### Changed
+
+- Handled an occasional currency pair inconsistency in the _Yahoo Finance_ service (`GBP=X` instead of `USDGBP=X`)
+
+### Fixed
+
+- Fixed the content height of the account detail dialog
+
+## 1.167.0 - 07.07.2022
+
+### Added
+
+- Added _Markets_ to the public pages
+
+### Changed
+
+- Improved the _Create Account_ link in the _Live Demo_
+- Upgraded `ngx-markdown` from version `13.0.0` to `14.0.1`
+
+### Fixed
+
+- Fixed an issue in the _Holdings_ section for users without a subscription
+
+## 1.166.0 - 30.06.2022
+
+### Added
+
+- Added an account detail dialog
+
+### Changed
+
+- Improved the label of the (symbol) search
+- Refactored the demo account as a route (`/demo`)
+- Upgraded `nestjs` from version `8.2.3` to `8.4.7`
+- Upgraded `prisma` from version `3.14.0` to `3.15.2`
+- Upgraded `yahoo-finance2` from version `2.3.2` to `2.3.3`
+- Upgraded `zone.js` from version `0.11.4` to `0.11.6`
+
+## 1.165.0 - 25.06.2022
+
+### Added
+
+- Added an icon and name column to the positions table
+- Added a reusable premium indicator component
+
+### Changed
+
+- Moved the positions table to a dedicated section (_Holdings_)
+- Changed the data gathering by symbol endpoint to delete data first
+
+## 1.164.0 - 23.06.2022
+
+### Added
+
+- Added the positions table including performance to the public page
+
+## 1.163.0 - 22.06.2022
+
+### Changed
+
+- Improved the onboarding for iOS
+
+## 1.162.0 - 18.06.2022
+
+### Added
+
+- Added a _Privacy Policy_ page
+
+### Changed
+
+- Simplified the header
+
+### Fixed
+
+- Fixed an issue with the currency inconsistency in the _Yahoo Finance_ service (convert from `ILA` to `ILS`)
+
+## 1.161.1 - 16.06.2022
+
+### Added
+
+- Added the vertical hover line to inspect data points in the performance chart on the home page
+
+### Changed
+
+- Improved the landing page
+- Upgraded `angular` from version `13.3.6` to `14.0.2`
+- Upgraded `Nx` from version `14.1.4` to `14.3.5`
+- Upgraded `storybook` from version `6.4.22` to `6.5.9`
+
+### Fixed
+
+- Improved the error handling of missing market prices
+
+## 1.160.0 - 15.06.2022
+
+### Fixed
+
+- Fixed the `No data provider has been found` error in the search (regression after `envalid` upgrade to `7.3.1` in Ghostfolio `1.157.0`)
+
+## 1.159.0 - 15.06.2022
+
+### Changed
+
+- Changed the default `HOST` to `0.0.0.0`
+- Refactored the endpoint of the public page (filter by equity)
+
 ## 1.158.1 - 12.06.2022
 
 ### Added

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:14-alpine as builder
+FROM node:16-alpine as builder
 
 # Build application and add additional files
 
@@ -12,7 +12,7 @@ COPY ./package.json package.json
 COPY ./yarn.lock yarn.lock
 COPY ./prisma/schema.prisma prisma/schema.prisma
 
-RUN apk add --no-cache python3 g++ make openssl
+RUN apk add --no-cache python3 g++ make openssl git
 RUN yarn install
 
 # See https://github.com/nrwl/nx/issues/6586 for further details
@@ -22,7 +22,7 @@ RUN node decorate-angular-cli.js
 COPY ./angular.json angular.json
 COPY ./nx.json nx.json
 COPY ./replace.build.js replace.build.js
-COPY ./jest.preset.ts jest.preset.ts
+COPY ./jest.preset.js jest.preset.js
 COPY ./jest.config.ts jest.config.ts
 COPY ./tsconfig.base.json tsconfig.base.json
 COPY ./libs libs
@@ -45,7 +45,7 @@ COPY package.json /ghostfolio/dist/apps/api
 RUN yarn database:generate-typings
 
 # Image to run, copy everything needed from builder
-FROM node:14-alpine
+FROM node:16-alpine
 COPY --from=builder /ghostfolio/dist/apps /ghostfolio/apps
 WORKDIR /ghostfolio/apps/api
 EXPOSE 3333

README.md

@@ -12,7 +12,7 @@
     <strong>Open Source Wealth Management Software</strong>
   </p>
   <p>
-    <a href="https://ghostfol.io"><strong>Live Demo</strong></a> | <a href="https://ghostfol.io/pricing"><strong>Ghostfolio Premium</strong></a> | <a href="https://ghostfol.io/blog"><strong>Blog</strong></a> | <a href="https://join.slack.com/t/ghostfolio/shared_invite/zt-vsaan64h-F_I0fEo5M0P88lP9ibCxFg"><strong>Slack</strong></a> | <a href="https://twitter.com/ghostfolio_"><strong>Twitter</strong></a>
+    <a href="https://ghostfol.io"><strong>Ghostfol.io</strong></a> | <a href="https://ghostfol.io/demo"><strong>Live Demo</strong></a> | <a href="https://ghostfol.io/pricing"><strong>Ghostfolio Premium</strong></a> | <a href="https://ghostfol.io/faq"><strong>FAQ</strong></a> | <a href="https://ghostfol.io/blog"><strong>Blog</strong></a> | <a href="https://join.slack.com/t/ghostfolio/shared_invite/zt-vsaan64h-F_I0fEo5M0P88lP9ibCxFg"><strong>Slack</strong></a> | <a href="https://twitter.com/ghostfolio_"><strong>Twitter</strong></a>
   </p>
   <p>
     <a href="#contributing">
@@ -35,7 +35,7 @@
 
 Our official **[Ghostfolio Premium](https://ghostfol.io/pricing)** cloud offering is the easiest way to get started. Due to the time it saves, this will be the best option for most people. The revenue is used for covering the hosting costs.
 
-If you prefer to run Ghostfolio on your own infrastructure (self-hosting), please find further instructions in the section [Run with Docker](#run-with-docker-self-hosting).
+If you prefer to run Ghostfolio on your own infrastructure, please find further instructions in the [Self-hosting](#self-hosting) section.
 
 ## Why Ghostfolio?
 
@@ -81,6 +81,23 @@ The frontend is built with [Angular](https://angular.io) and uses [Angular Mater
 
 ## Self-hosting
 
+### Supported Environment Variables
+
+| Name                | Default Value | Description                                                                                                                         |
+| ------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| `ACCESS_TOKEN_SALT` |               | A random string used as salt for access tokens                                                                                      |
+| `BASE_CURRENCY`     | `USD`         | The base currency of the Ghostfolio application. Caution: This cannot be changed later!                                             |
+| `DATABASE_URL`      |               | The database connection URL, e.g. `postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@localhost:5432/${POSTGRES_DB}?sslmode=prefer` |
+| `HOST`              | `0.0.0.0`     | The host where the Ghostfolio application will run on                                                                               |
+| `JWT_SECRET_KEY`    |               | A random string used for _JSON Web Tokens_ (JWT)                                                                                    |
+| `PORT`              | `3333`        | The port where the Ghostfolio application will run on                                                                               |
+| `POSTGRES_DB`       |               | The name of the _PostgreSQL_ database                                                                                               |
+| `POSTGRES_PASSWORD` |               | The password of the _PostgreSQL_ database                                                                                           |
+| `POSTGRES_USER`     |               | The user of the _PostgreSQL_ database                                                                                               |
+| `REDIS_HOST`        | `localhost`   | The host where _Redis_ is running                                                                                                   |
+| `REDIS_PASSWORD`    |               | The password of _Redis_                                                                                                             |
+| `REDIS_PORT`        | `6379`        | The port where _Redis_ is running                                                                                                   |
+
 ### Run with Docker Compose
 
 #### Prerequisites
@@ -136,7 +153,7 @@ Open http://localhost:3333 in your browser and accomplish these steps:
 1. Run the following command to start the new Docker image: `docker-compose --env-file ./.env -f docker/docker-compose.yml up -d`
 1. Then, run the following command to keep your database schema in sync: `docker-compose --env-file ./.env -f docker/docker-compose.yml exec ghostfolio yarn database:migrate`
 
-### Run with _Unraid_ (unofficial)
+### Run with _Unraid_ (Community)
 
 Please follow the instructions of the Ghostfolio [Unraid Community App](https://unraid.net/community/apps?q=ghostfolio).
 
@@ -145,7 +162,7 @@ Please follow the instructions of the Ghostfolio [Unraid Community App](https://
 ### Prerequisites
 
 - [Docker](https://www.docker.com/products/docker-desktop)
-- [Node.js](https://nodejs.org/en/download) (version 14+)
+- [Node.js](https://nodejs.org/en/download) (version 16+)
 - [Yarn](https://yarnpkg.com/en/docs/install)
 - A local copy of this Git repository (clone)
 
@@ -186,7 +203,7 @@ yarn database:push
 
 Run `yarn test`
 
-## Public API (experimental)
+## Public API
 
 ### Import Activities
 

angular.json

@@ -2,6 +2,7 @@
   "version": 1,
   "projects": {
     "api": {
+      "$schema": "../../node_modules/nx/schemas/project-schema.json",
       "root": "apps/api",
       "sourceRoot": "apps/api/src",
       "projectType": "application",
@@ -56,6 +57,7 @@
       "tags": []
     },
     "client": {
+      "$schema": "../../node_modules/nx/schemas/project-schema.json",
       "projectType": "application",
       "schematics": {
         "@schematics/angular:component": {
@@ -113,7 +115,7 @@
               }
             ],
             "styles": ["apps/client/src/styles.scss"],
-            "scripts": ["node_modules/marked/lib/marked.js"],
+            "scripts": ["node_modules/marked/marked.min.js"],
             "vendorChunk": true,
             "extractLicenses": false,
             "buildOptimizer": false,
@@ -189,6 +191,7 @@
       "tags": []
     },
     "client-e2e": {
+      "$schema": "../../node_modules/nx/schemas/project-schema.json",
       "root": "apps/client-e2e",
       "sourceRoot": "apps/client-e2e/src",
       "projectType": "application",
@@ -211,6 +214,7 @@
       "implicitDependencies": ["client"]
     },
     "common": {
+      "$schema": "../../node_modules/nx/schemas/project-schema.json",
       "root": "libs/common",
       "sourceRoot": "libs/common/src",
       "projectType": "library",
@@ -233,6 +237,7 @@
       "tags": []
     },
     "ui": {
+      "$schema": "../../node_modules/nx/schemas/project-schema.json",
       "projectType": "library",
       "schematics": {
         "@schematics/angular:component": {
@@ -258,14 +263,12 @@
           }
         },
         "storybook": {
-          "builder": "@nrwl/storybook:storybook",
+          "builder": "@storybook/angular:start-storybook",
           "options": {
-            "uiFramework": "@storybook/angular",
             "port": 4400,
-            "config": {
-              "configFolder": "libs/ui/.storybook"
-            },
-            "projectBuildConfig": "ui:build-storybook"
+            "configDir": "libs/ui/.storybook",
+            "browserTarget": "ui:build-storybook",
+            "compodoc": false
           },
           "configurations": {
             "ci": {
@@ -274,15 +277,13 @@
           }
         },
         "build-storybook": {
-          "builder": "@nrwl/storybook:build",
+          "builder": "@storybook/angular:build-storybook",
           "outputs": ["{options.outputPath}"],
           "options": {
-            "uiFramework": "@storybook/angular",
-            "outputPath": "dist/storybook/ui",
-            "config": {
-              "configFolder": "libs/ui/.storybook"
-            },
-            "projectBuildConfig": "ui:build-storybook"
+            "outputDir": "dist/storybook/ui",
+            "configDir": "libs/ui/.storybook",
+            "browserTarget": "ui:build-storybook",
+            "compodoc": false
           },
           "configurations": {
             "ci": {
@@ -294,6 +295,7 @@
       "tags": []
     },
     "ui-e2e": {
+      "$schema": "../../node_modules/nx/schemas/project-schema.json",
       "root": "apps/ui-e2e",
       "sourceRoot": "apps/ui-e2e/src",
       "projectType": "application",

apps/api/jest.config.ts

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   displayName: 'api',
 
   globals: {
@@ -13,5 +13,5 @@ module.exports = {
   coverageDirectory: '../../coverage/apps/api',
   testTimeout: 10000,
   testEnvironment: 'node',
-  preset: '../../jest.preset.ts'
+  preset: '../../jest.preset.js'
 };

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

@@ -7,7 +7,10 @@ import {
 import { ImpersonationService } from '@ghostfolio/api/services/impersonation.service';
 import { Accounts } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
-import type { RequestWithUser } from '@ghostfolio/common/types';
+import type {
+  AccountWithValue,
+  RequestWithUser
+} from '@ghostfolio/common/types';
 import {
   Body,
   Controller,
@@ -123,13 +126,45 @@ export class AccountController {
 
   @Get(':id')
   @UseGuards(AuthGuard('jwt'))
-  public async getAccountById(@Param('id') id: string): Promise<AccountModel> {
-    return this.accountService.account({
-      id_userId: {
-        id,
-        userId: this.request.user.id
-      }
-    });
+  public async getAccountById(
+    @Headers('impersonation-id') impersonationId,
+    @Param('id') id: string
+  ): Promise<AccountWithValue> {
+    const impersonationUserId =
+      await this.impersonationService.validateImpersonationId(
+        impersonationId,
+        this.request.user.id
+      );
+
+    let accountsWithAggregations =
+      await this.portfolioService.getAccountsWithAggregations(
+        impersonationUserId || this.request.user.id,
+        [{ id, type: 'ACCOUNT' }]
+      );
+
+    if (
+      impersonationUserId ||
+      this.userService.isRestrictedView(this.request.user)
+    ) {
+      accountsWithAggregations = {
+        ...nullifyValuesInObject(accountsWithAggregations, [
+          'totalBalanceInBaseCurrency',
+          'totalValueInBaseCurrency'
+        ]),
+        accounts: nullifyValuesInObjects(accountsWithAggregations.accounts, [
+          'balance',
+          'balanceInBaseCurrency',
+          'convertedBalance',
+          'fee',
+          'quantity',
+          'unitPrice',
+          'value',
+          'valueInBaseCurrency'
+        ])
+      };
+    }
+
+    return accountsWithAggregations.accounts[0];
   }
 
   @Post()

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

@@ -1,6 +1,5 @@
 import { SubscriptionService } from '@ghostfolio/api/app/subscription/subscription.service';
 import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
-import { DataGatheringService } from '@ghostfolio/api/services/data-gathering.service';
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
 import { MarketDataService } from '@ghostfolio/api/services/market-data.service';
 import { PrismaService } from '@ghostfolio/api/services/prisma.service';
@@ -24,7 +23,6 @@ export class AdminService {
 
   public constructor(
     private readonly configurationService: ConfigurationService,
-    private readonly dataGatheringService: DataGatheringService,
     private readonly exchangeRateDataService: ExchangeRateDataService,
     private readonly marketDataService: MarketDataService,
     private readonly prismaService: PrismaService,
@@ -174,7 +172,6 @@ export class AdminService {
         _count: {
           select: { Account: true, Order: true }
         },
-        alias: true,
         Analytics: {
           select: {
             activityCount: true,
@@ -194,7 +191,7 @@ export class AdminService {
     });
 
     return usersWithAnalytics.map(
-      ({ _count, alias, Analytics, createdAt, id, Subscription }) => {
+      ({ _count, Analytics, createdAt, id, Subscription }) => {
         const daysSinceRegistration =
           differenceInDays(new Date(), createdAt) + 1;
         const engagement = Analytics.activityCount / daysSinceRegistration;
@@ -206,7 +203,6 @@ export class AdminService {
           : undefined;
 
         return {
-          alias,
           createdAt,
           engagement,
           id,

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

@@ -1,6 +1,17 @@
+import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
 import { Controller } from '@nestjs/common';
 
 @Controller()
 export class AppController {
-  public constructor() {}
+  public constructor(
+    private readonly exchangeRateDataService: ExchangeRateDataService
+  ) {
+    this.initialize();
+  }
+
+  private async initialize() {
+    try {
+      await this.exchangeRateDataService.initialize();
+    } catch {}
+  }
 }

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

@@ -1,5 +1,6 @@
 import { WebAuthService } from '@ghostfolio/api/app/auth/web-auth.service';
 import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
+import { OAuthResponse } from '@ghostfolio/common/interfaces';
 import {
   Body,
   Controller,
@@ -31,7 +32,9 @@ export class AuthController {
   ) {}
 
   @Get('anonymous/:accessToken')
-  public async accessTokenLogin(@Param('accessToken') accessToken: string) {
+  public async accessTokenLogin(
+    @Param('accessToken') accessToken: string
+  ): Promise<OAuthResponse> {
     try {
       const authToken = await this.authService.validateAnonymousLogin(
         accessToken
@@ -65,6 +68,23 @@ export class AuthController {
     }
   }
 
+  @Get('internet-identity/:principalId')
+  public async internetIdentityLogin(
+    @Param('principalId') principalId: string
+  ): Promise<OAuthResponse> {
+    try {
+      const authToken = await this.authService.validateInternetIdentityLogin(
+        principalId
+      );
+      return { authToken };
+    } catch {
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.FORBIDDEN),
+        StatusCodes.FORBIDDEN
+      );
+    }
+  }
+
   @Get('webauthn/generate-registration-options')
   @UseGuards(AuthGuard('jwt'))
   public async generateRegistrationOptions() {

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

@@ -2,6 +2,7 @@ import { UserService } from '@ghostfolio/api/app/user/user.service';
 import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
 import { Injectable, InternalServerErrorException } from '@nestjs/common';
 import { JwtService } from '@nestjs/jwt';
+import { Provider } from '@prisma/client';
 
 import { ValidateOAuthLoginParams } from './interfaces/interfaces';
 
@@ -13,7 +14,7 @@ export class AuthService {
     private readonly userService: UserService
   ) {}
 
-  public async validateAnonymousLogin(accessToken: string) {
+  public async validateAnonymousLogin(accessToken: string): Promise<string> {
     return new Promise(async (resolve, reject) => {
       try {
         const hashedAccessToken = this.userService.createAccessToken(
@@ -26,7 +27,7 @@ export class AuthService {
         });
 
         if (user) {
-          const jwt: string = this.jwtService.sign({
+          const jwt = this.jwtService.sign({
             id: user.id
           });
 
@@ -40,6 +41,33 @@ export class AuthService {
     });
   }
 
+  public async validateInternetIdentityLogin(principalId: string) {
+    try {
+      const provider: Provider = 'INTERNET_IDENTITY';
+
+      let [user] = await this.userService.users({
+        where: { provider, thirdPartyId: principalId }
+      });
+
+      if (!user) {
+        // Create new user if not found
+        user = await this.userService.createUser({
+          provider,
+          thirdPartyId: principalId
+        });
+      }
+
+      return this.jwtService.sign({
+        id: user.id
+      });
+    } catch (error) {
+      throw new InternalServerErrorException(
+        'validateInternetIdentityLogin',
+        error.message
+      );
+    }
+  }
+
   public async validateOAuthLogin({
     provider,
     thirdPartyId
@@ -57,13 +85,14 @@ export class AuthService {
         });
       }
 
-      const jwt: string = this.jwtService.sign({
+      return this.jwtService.sign({
         id: user.id
       });
-
-      return jwt;
-    } catch (err) {
-      throw new InternalServerErrorException('validateOAuthLogin', err.message);
+    } catch (error) {
+      throw new InternalServerErrorException(
+        'validateOAuthLogin',
+        error.message
+      );
     }
   }
 }

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

@@ -3,8 +3,7 @@ import { TransformDataSourceInResponseInterceptor } from '@ghostfolio/api/interc
 import { PropertyService } from '@ghostfolio/api/services/property/property.service';
 import { PROPERTY_BENCHMARKS } from '@ghostfolio/common/config';
 import { BenchmarkResponse, UniqueAsset } from '@ghostfolio/common/interfaces';
-import { Controller, Get, UseGuards, UseInterceptors } from '@nestjs/common';
-import { AuthGuard } from '@nestjs/passport';
+import { Controller, Get, UseInterceptors } from '@nestjs/common';
 
 import { BenchmarkService } from './benchmark.service';
 
@@ -16,7 +15,6 @@ export class BenchmarkController {
   ) {}
 
   @Get()
-  @UseGuards(AuthGuard('jwt'))
   @UseInterceptors(TransformDataSourceInRequestInterceptor)
   @UseInterceptors(TransformDataSourceInResponseInterceptor)
   public async getBenchmark(): Promise<BenchmarkResponse> {

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

@@ -18,6 +18,7 @@ export class ExportService {
       orderBy: { date: 'desc' },
       select: {
         accountId: true,
+        comment: true,
         date: true,
         fee: true,
         id: true,
@@ -40,6 +41,7 @@ export class ExportService {
       activities: activities.map(
         ({
           accountId,
+          comment,
           date,
           fee,
           id,
@@ -50,6 +52,7 @@ export class ExportService {
         }) => {
           return {
             accountId,
+            comment,
             fee,
             id,
             quantity,

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

@@ -34,8 +34,20 @@ export class ImportController {
       );
     }
 
+    let maxActivitiesToImport = this.configurationService.get(
+      'MAX_ACTIVITIES_TO_IMPORT'
+    );
+
+    if (
+      this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION') &&
+      this.request.user.subscription.type === 'Premium'
+    ) {
+      maxActivitiesToImport = Number.MAX_SAFE_INTEGER;
+    }
+
     try {
       return await this.importService.import({
+        maxActivitiesToImport,
         activities: importData.activities,
         userId: this.request.user.id
       });

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

@@ -17,9 +17,11 @@ export class ImportService {
 
   public async import({
     activities,
+    maxActivitiesToImport,
     userId
   }: {
     activities: Partial<CreateOrderDto>[];
+    maxActivitiesToImport: number;
     userId: string;
   }): Promise<void> {
     for (const activity of activities) {
@@ -32,7 +34,11 @@ export class ImportService {
       }
     }
 
-    await this.validateActivities({ activities, userId });
+    await this.validateActivities({
+      activities,
+      maxActivitiesToImport,
+      userId
+    });
 
     const accountIds = (await this.accountService.getAccounts(userId)).map(
       (account) => {
@@ -42,6 +48,7 @@ export class ImportService {
 
     for (const {
       accountId,
+      comment,
       currency,
       dataSource,
       date,
@@ -52,6 +59,7 @@ export class ImportService {
       unitPrice
     } of activities) {
       await this.orderService.createOrder({
+        comment,
         fee,
         quantity,
         type,
@@ -81,19 +89,15 @@ export class ImportService {
 
   private async validateActivities({
     activities,
+    maxActivitiesToImport,
     userId
   }: {
     activities: Partial<CreateOrderDto>[];
+    maxActivitiesToImport: number;
     userId: string;
   }) {
-    if (
-      activities?.length > this.configurationService.get('MAX_ORDERS_TO_IMPORT')
-    ) {
-      throw new Error(
-        `Too many activities (${this.configurationService.get(
-          'MAX_ORDERS_TO_IMPORT'
-        )} at most)`
-      );
+    if (activities?.length > maxActivitiesToImport) {
+      throw new Error(`Too many activities (${maxActivitiesToImport} at most)`);
     }
 
     const existingActivities = await this.orderService.orders({

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

@@ -63,6 +63,8 @@ export class InfoService {
       } else {
         info.fearAndGreedDataSource = ghostfolioFearAndGreedIndexDataSource;
       }
+
+      globalPermissions.push(permissions.enableFearAndGreedIndex);
     }
 
     if (this.configurationService.get('ENABLE_FEATURE_IMPORT')) {

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

@@ -1,30 +1,46 @@
-import { AssetClass, AssetSubClass, DataSource, Type } from '@prisma/client';
 import {
+  AssetClass,
+  AssetSubClass,
+  DataSource,
+  Tag,
+  Type
+} from '@prisma/client';
+import { Transform, TransformFnParams } from 'class-transformer';
+import {
+  IsArray,
   IsEnum,
   IsISO8601,
   IsNumber,
   IsOptional,
   IsString
 } from 'class-validator';
+import { isString } from 'lodash';
 
 export class CreateOrderDto {
-  @IsString()
   @IsOptional()
+  @IsString()
   accountId?: string;
 
-  @IsEnum(AssetClass, { each: true })
   @IsOptional()
+  @IsEnum(AssetClass, { each: true })
   assetClass?: AssetClass;
 
-  @IsEnum(AssetSubClass, { each: true })
   @IsOptional()
+  @IsEnum(AssetSubClass, { each: true })
   assetSubClass?: AssetSubClass;
 
+  @IsOptional()
+  @IsString()
+  @Transform(({ value }: TransformFnParams) =>
+    isString(value) ? value.trim() : value
+  )
+  comment?: string;
+
   @IsString()
   currency: string;
 
-  @IsEnum(DataSource, { each: true })
   @IsOptional()
+  @IsEnum(DataSource, { each: true })
   dataSource?: DataSource;
 
   @IsISO8601()
@@ -39,6 +55,10 @@ export class CreateOrderDto {
   @IsString()
   symbol: string;
 
+  @IsArray()
+  @IsOptional()
+  tags?: Tag[];
+
   @IsEnum(Type, { each: true })
   type: Type;
 

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

@@ -4,6 +4,7 @@ import { RedactValuesInResponseInterceptor } from '@ghostfolio/api/interceptors/
 import { TransformDataSourceInRequestInterceptor } from '@ghostfolio/api/interceptors/transform-data-source-in-request.interceptor';
 import { TransformDataSourceInResponseInterceptor } from '@ghostfolio/api/interceptors/transform-data-source-in-response.interceptor';
 import { ImpersonationService } from '@ghostfolio/api/services/impersonation.service';
+import { Filter } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import type { RequestWithUser } from '@ghostfolio/common/types';
 import {
@@ -17,6 +18,7 @@ import {
   Param,
   Post,
   Put,
+  Query,
   UseGuards,
   UseInterceptors
 } from '@nestjs/common';
@@ -66,8 +68,36 @@ export class OrderController {
   @UseInterceptors(RedactValuesInResponseInterceptor)
   @UseInterceptors(TransformDataSourceInResponseInterceptor)
   public async getAllOrders(
-    @Headers('impersonation-id') impersonationId
+    @Headers('impersonation-id') impersonationId,
+    @Query('accounts') filterByAccounts?: string,
+    @Query('assetClasses') filterByAssetClasses?: string,
+    @Query('tags') filterByTags?: string
   ): Promise<Activities> {
+    const accountIds = filterByAccounts?.split(',') ?? [];
+    const assetClasses = filterByAssetClasses?.split(',') ?? [];
+    const tagIds = filterByTags?.split(',') ?? [];
+
+    const filters: Filter[] = [
+      ...accountIds.map((accountId) => {
+        return <Filter>{
+          id: accountId,
+          type: 'ACCOUNT'
+        };
+      }),
+      ...assetClasses.map((assetClass) => {
+        return <Filter>{
+          id: assetClass,
+          type: 'ASSET_CLASS'
+        };
+      }),
+      ...tagIds.map((tagId) => {
+        return <Filter>{
+          id: tagId,
+          type: 'TAG'
+        };
+      })
+    ];
+
     const impersonationUserId =
       await this.impersonationService.validateImpersonationId(
         impersonationId,
@@ -76,6 +106,7 @@ export class OrderController {
     const userCurrency = this.request.user.Settings.currency;
 
     let activities = await this.orderService.getOrders({
+      filters,
       userCurrency,
       includeDrafts: true,
       userId: impersonationUserId || this.request.user.id

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

@@ -16,6 +16,7 @@ import {
   DataSource,
   Order,
   Prisma,
+  Tag,
   Type as TypeOfOrder
 } from '@prisma/client';
 import Big from 'big.js';
@@ -71,6 +72,7 @@ export class OrderService {
       currency?: string;
       dataSource?: DataSource;
       symbol?: string;
+      tags?: Tag[];
       userId: string;
     }
   ): Promise<Order> {
@@ -80,6 +82,8 @@ export class OrderService {
       return account.isDefault === true;
     });
 
+    const tags = data.tags ?? [];
+
     let Account = {
       connect: {
         id_userId: {
@@ -139,9 +143,15 @@ export class OrderService {
     delete data.accountId;
     delete data.assetClass;
     delete data.assetSubClass;
+
+    if (!data.comment) {
+      delete data.comment;
+    }
+
     delete data.currency;
     delete data.dataSource;
     delete data.symbol;
+    delete data.tags;
     delete data.userId;
 
     const orderData: Prisma.OrderCreateInput = data;
@@ -150,7 +160,12 @@ export class OrderService {
       data: {
         ...orderData,
         Account,
-        isDraft
+        isDraft,
+        tags: {
+          connect: tags.map(({ id }) => {
+            return { id };
+          })
+        }
       }
     });
   }
@@ -215,9 +230,10 @@ export class OrderService {
                 })
               },
               {
-                SymbolProfileOverrides: {
-                  is: null
-                }
+                OR: [
+                  { SymbolProfileOverrides: { is: null } },
+                  { SymbolProfileOverrides: { assetClass: null } }
+                ]
               }
             ]
           },
@@ -298,6 +314,7 @@ export class OrderService {
       currency?: string;
       dataSource?: DataSource;
       symbol?: string;
+      tags?: Tag[];
     };
     where: Prisma.OrderWhereUniqueInput;
   }): Promise<Order> {
@@ -305,6 +322,12 @@ export class OrderService {
       delete data.Account;
     }
 
+    if (!data.comment) {
+      data.comment = null;
+    }
+
+    const tags = data.tags ?? [];
+
     let isDraft = false;
 
     if (data.type === 'ITEM') {
@@ -331,11 +354,17 @@ export class OrderService {
     delete data.currency;
     delete data.dataSource;
     delete data.symbol;
+    delete data.tags;
 
     return this.prismaService.order.update({
       data: {
         ...data,
-        isDraft
+        isDraft,
+        tags: {
+          connect: tags.map(({ id }) => {
+            return { id };
+          })
+        }
       },
       where
     });

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

@@ -1,11 +1,20 @@
-import { AssetClass, AssetSubClass, DataSource, Type } from '@prisma/client';
 import {
+  AssetClass,
+  AssetSubClass,
+  DataSource,
+  Tag,
+  Type
+} from '@prisma/client';
+import { Transform, TransformFnParams } from 'class-transformer';
+import {
+  IsArray,
   IsEnum,
   IsISO8601,
   IsNumber,
   IsOptional,
   IsString
 } from 'class-validator';
+import { isString } from 'lodash';
 
 export class UpdateOrderDto {
   @IsOptional()
@@ -20,6 +29,13 @@ export class UpdateOrderDto {
   @IsOptional()
   assetSubClass?: AssetSubClass;
 
+  @IsOptional()
+  @IsString()
+  @Transform(({ value }: TransformFnParams) =>
+    isString(value) ? value.trim() : value
+  )
+  comment?: string;
+
   @IsString()
   currency: string;
 
@@ -41,6 +57,10 @@ export class UpdateOrderDto {
   @IsString()
   symbol: string;
 
+  @IsArray()
+  @IsOptional()
+  tags?: Tag[];
+
   @IsString()
   type: Type;
 

apps/api/src/app/portfolio/portfolio-calculator-baln-buy-and-sell.spec.ts

@@ -62,6 +62,10 @@ describe('PortfolioCalculator', () => {
         parseDate('2021-11-22')
       );
 
+      const investments = portfolioCalculator.getInvestments();
+
+      const investmentsByMonth = portfolioCalculator.getInvestmentsByMonth();
+
       spy.mockRestore();
 
       expect(currentPositions).toEqual({
@@ -91,6 +95,15 @@ describe('PortfolioCalculator', () => {
         ],
         totalInvestment: new Big('0')
       });
+
+      expect(investments).toEqual([
+        { date: '2021-11-22', investment: new Big('285.8') },
+        { date: '2021-11-30', investment: new Big('0') }
+      ]);
+
+      expect(investmentsByMonth).toEqual([
+        { date: '2021-11-01', investment: new Big('12.6') }
+      ]);
     });
   });
 });

apps/api/src/app/portfolio/portfolio-calculator-baln-buy.spec.ts

@@ -51,6 +51,10 @@ describe('PortfolioCalculator', () => {
         parseDate('2021-11-30')
       );
 
+      const investments = portfolioCalculator.getInvestments();
+
+      const investmentsByMonth = portfolioCalculator.getInvestmentsByMonth();
+
       spy.mockRestore();
 
       expect(currentPositions).toEqual({
@@ -80,6 +84,14 @@ describe('PortfolioCalculator', () => {
         ],
         totalInvestment: new Big('273.2')
       });
+
+      expect(investments).toEqual([
+        { date: '2021-11-30', investment: new Big('273.2') }
+      ]);
+
+      expect(investmentsByMonth).toEqual([
+        { date: '2021-11-01', investment: new Big('273.2') }
+      ]);
     });
   });
 });

apps/api/src/app/portfolio/portfolio-calculator-no-orders.spec.ts

@@ -39,6 +39,10 @@ describe('PortfolioCalculator', () => {
         new Date()
       );
 
+      const investments = portfolioCalculator.getInvestments();
+
+      const investmentsByMonth = portfolioCalculator.getInvestmentsByMonth();
+
       spy.mockRestore();
 
       expect(currentPositions).toEqual({
@@ -51,6 +55,10 @@ describe('PortfolioCalculator', () => {
         positions: [],
         totalInvestment: new Big(0)
       });
+
+      expect(investments).toEqual([]);
+
+      expect(investmentsByMonth).toEqual([]);
     });
   });
 });

apps/api/src/app/portfolio/portfolio-calculator-novn-buy-and-sell-partially.spec.ts

@@ -62,6 +62,10 @@ describe('PortfolioCalculator', () => {
         parseDate('2022-03-07')
       );
 
+      const investments = portfolioCalculator.getInvestments();
+
+      const investmentsByMonth = portfolioCalculator.getInvestmentsByMonth();
+
       spy.mockRestore();
 
       expect(currentPositions).toEqual({
@@ -91,6 +95,16 @@ describe('PortfolioCalculator', () => {
         ],
         totalInvestment: new Big('75.80')
       });
+
+      expect(investments).toEqual([
+        { date: '2022-03-07', investment: new Big('151.6') },
+        { date: '2022-04-08', investment: new Big('75.8') }
+      ]);
+
+      expect(investmentsByMonth).toEqual([
+        { date: '2022-03-01', investment: new Big('151.6') },
+        { date: '2022-04-01', investment: new Big('-85.73') }
+      ]);
     });
   });
 });

apps/api/src/app/portfolio/portfolio-calculator.ts

@@ -14,8 +14,11 @@ import {
   format,
   isAfter,
   isBefore,
+  isSameMonth,
+  isSameYear,
   max,
-  min
+  min,
+  set
 } from 'date-fns';
 import { first, flatten, isNumber, sortBy } from 'lodash';
 
@@ -323,6 +326,53 @@ export class PortfolioCalculator {
     });
   }
 
+  public getInvestmentsByMonth(): { date: string; investment: Big }[] {
+    if (this.orders.length === 0) {
+      return [];
+    }
+
+    const investments = [];
+    let currentDate: Date;
+    let investmentByMonth = new Big(0);
+
+    for (const [index, order] of this.orders.entries()) {
+      if (
+        isSameMonth(parseDate(order.date), currentDate) &&
+        isSameYear(parseDate(order.date), currentDate)
+      ) {
+        // Same month: Add up investments
+
+        investmentByMonth = investmentByMonth.plus(
+          order.quantity.mul(order.unitPrice).mul(this.getFactor(order.type))
+        );
+      } else {
+        // New month: Store previous month and reset
+
+        if (currentDate) {
+          investments.push({
+            date: format(set(currentDate, { date: 1 }), DATE_FORMAT),
+            investment: investmentByMonth
+          });
+        }
+
+        currentDate = parseDate(order.date);
+        investmentByMonth = order.quantity
+          .mul(order.unitPrice)
+          .mul(this.getFactor(order.type));
+      }
+
+      if (index === this.orders.length - 1) {
+        // Store current month (latest order)
+        investments.push({
+          date: format(set(currentDate, { date: 1 }), DATE_FORMAT),
+          investment: investmentByMonth
+        });
+      }
+    }
+
+    return investments;
+  }
+
   public async calculateTimeline(
     timelineSpecification: TimelineSpecification[],
     endDate: string

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

@@ -20,7 +20,12 @@ import {
   PortfolioReport,
   PortfolioSummary
 } from '@ghostfolio/common/interfaces';
-import type { DateRange, RequestWithUser } from '@ghostfolio/common/types';
+import { InvestmentItem } from '@ghostfolio/common/interfaces/investment-item.interface';
+import type {
+  DateRange,
+  GroupBy,
+  RequestWithUser
+} from '@ghostfolio/common/types';
 import {
   Controller,
   Get,
@@ -190,21 +195,35 @@ export class PortfolioController {
       }
     }
 
-    const isBasicUser =
-      this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION') &&
-      this.request.user.subscription.type === 'Basic';
+    let hasDetails = true;
+    if (this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION')) {
+      hasDetails = this.request.user.subscription.type === 'Premium';
+    }
+
+    for (const [symbol, portfolioPosition] of Object.entries(holdings)) {
+      holdings[symbol] = {
+        ...portfolioPosition,
+        assetClass: hasDetails ? portfolioPosition.assetClass : undefined,
+        assetSubClass: hasDetails ? portfolioPosition.assetSubClass : undefined,
+        countries: hasDetails ? portfolioPosition.countries : [],
+        currency: hasDetails ? portfolioPosition.currency : undefined,
+        markets: hasDetails ? portfolioPosition.markets : undefined,
+        sectors: hasDetails ? portfolioPosition.sectors : []
+      };
+    }
 
     return {
       accounts,
       hasError,
-      holdings: isBasicUser ? {} : holdings
+      holdings
     };
   }
 
   @Get('investments')
   @UseGuards(AuthGuard('jwt'))
   public async getInvestments(
-    @Headers('impersonation-id') impersonationId: string
+    @Headers('impersonation-id') impersonationId: string,
+    @Query('groupBy') groupBy?: GroupBy
   ): Promise<PortfolioInvestments> {
     if (
       this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION') &&
@@ -216,9 +235,16 @@ export class PortfolioController {
       );
     }
 
-    let investments = await this.portfolioService.getInvestments(
-      impersonationId
-    );
+    let investments: InvestmentItem[];
+
+    if (groupBy === 'month') {
+      investments = await this.portfolioService.getInvestments(
+        impersonationId,
+        'month'
+      );
+    } else {
+      investments = await this.portfolioService.getInvestments(impersonationId);
+    }
 
     if (
       impersonationId ||
@@ -316,7 +342,9 @@ export class PortfolioController {
 
     const { holdings } = await this.portfolioService.getDetails(
       access.userId,
-      access.userId
+      access.userId,
+      'max',
+      [{ id: 'EQUITY', type: 'ASSET_CLASS' }]
     );
 
     const portfolioPublicDetails: PortfolioPublicDetails = {
@@ -325,9 +353,6 @@ export class PortfolioController {
     };
 
     const totalValue = Object.values(holdings)
-      .filter((holding) => {
-        return holding.assetClass === 'EQUITY';
-      })
       .map((portfolioPosition) => {
         return this.exchangeRateDataService.toCurrency(
           portfolioPosition.quantity * portfolioPosition.marketPrice,
@@ -338,17 +363,18 @@ export class PortfolioController {
       .reduce((a, b) => a + b, 0);
 
     for (const [symbol, portfolioPosition] of Object.entries(holdings)) {
-      if (portfolioPosition.assetClass === 'EQUITY') {
-        portfolioPublicDetails.holdings[symbol] = {
-          allocationCurrent: portfolioPosition.allocationCurrent,
-          countries: hasDetails ? portfolioPosition.countries : [],
-          currency: portfolioPosition.currency,
-          markets: portfolioPosition.markets,
-          name: portfolioPosition.name,
-          sectors: hasDetails ? portfolioPosition.sectors : [],
-          value: portfolioPosition.value / totalValue
-        };
-      }
+      portfolioPublicDetails.holdings[symbol] = {
+        allocationCurrent: portfolioPosition.value / totalValue,
+        countries: hasDetails ? portfolioPosition.countries : [],
+        currency: hasDetails ? portfolioPosition.currency : undefined,
+        markets: hasDetails ? portfolioPosition.markets : undefined,
+        name: portfolioPosition.name,
+        netPerformancePercent: portfolioPosition.netPerformancePercent,
+        sectors: hasDetails ? portfolioPosition.sectors : [],
+        symbol: portfolioPosition.symbol,
+        url: portfolioPosition.url,
+        value: portfolioPosition.value / totalValue
+      };
     }
 
     return portfolioPublicDetails;

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

@@ -41,6 +41,7 @@ import { InvestmentItem } from '@ghostfolio/common/interfaces/investment-item.in
 import type {
   AccountWithValue,
   DateRange,
+  GroupBy,
   Market,
   OrderWithAccount,
   RequestWithUser
@@ -50,6 +51,7 @@ import { REQUEST } from '@nestjs/core';
 import {
   AssetClass,
   DataSource,
+  Prisma,
   Tag,
   Type as TypeOfOrder
 } from '@prisma/client';
@@ -63,6 +65,7 @@ import {
   max,
   parse,
   parseISO,
+  set,
   setDayOfYear,
   startOfDay,
   subDays,
@@ -100,14 +103,23 @@ export class PortfolioService {
     this.baseCurrency = this.configurationService.get('BASE_CURRENCY');
   }
 
-  public async getAccounts(aUserId: string): Promise<AccountWithValue[]> {
+  public async getAccounts(
+    aUserId: string,
+    aFilters?: Filter[]
+  ): Promise<AccountWithValue[]> {
+    const where: Prisma.AccountWhereInput = { userId: aUserId };
+
+    if (aFilters?.[0].id && aFilters?.[0].type === 'ACCOUNT') {
+      where.id = aFilters[0].id;
+    }
+
     const [accounts, details] = await Promise.all([
       this.accountService.accounts({
+        where,
         include: { Order: true, Platform: true },
-        orderBy: { name: 'asc' },
-        where: { userId: aUserId }
+        orderBy: { name: 'asc' }
       }),
-      this.getDetails(aUserId, aUserId)
+      this.getDetails(aUserId, aUserId, undefined, aFilters)
     ]);
 
     const userCurrency = this.request.user.Settings.currency;
@@ -145,8 +157,11 @@ export class PortfolioService {
     });
   }
 
-  public async getAccountsWithAggregations(aUserId: string): Promise<Accounts> {
-    const accounts = await this.getAccounts(aUserId);
+  public async getAccountsWithAggregations(
+    aUserId: string,
+    aFilters?: Filter[]
+  ): Promise<Accounts> {
+    const accounts = await this.getAccounts(aUserId, aFilters);
     let totalBalanceInBaseCurrency = new Big(0);
     let totalValueInBaseCurrency = new Big(0);
     let transactionCount = 0;
@@ -170,7 +185,8 @@ export class PortfolioService {
   }
 
   public async getInvestments(
-    aImpersonationId: string
+    aImpersonationId: string,
+    groupBy?: GroupBy
   ): Promise<InvestmentItem[]> {
     const userId = await this.getUserId(aImpersonationId, this.request.user.id);
 
@@ -191,28 +207,57 @@ export class PortfolioService {
       return [];
     }
 
-    const investments = portfolioCalculator.getInvestments().map((item) => {
-      return {
-        date: item.date,
-        investment: item.investment.toNumber()
-      };
-    });
+    let investments: InvestmentItem[];
 
-    // Add investment of today
-    const investmentOfToday = investments.filter((investment) => {
-      return investment.date === format(new Date(), DATE_FORMAT);
-    });
-
-    if (investmentOfToday.length <= 0) {
-      const pastInvestments = investments.filter((investment) => {
-        return isBefore(parseDate(investment.date), new Date());
+    if (groupBy === 'month') {
+      investments = portfolioCalculator.getInvestmentsByMonth().map((item) => {
+        return {
+          date: item.date,
+          investment: item.investment.toNumber()
+        };
       });
-      const lastInvestment = pastInvestments[pastInvestments.length - 1];
 
-      investments.push({
-        date: format(new Date(), DATE_FORMAT),
-        investment: lastInvestment?.investment ?? 0
+      // Add investment of current month
+      const dateOfCurrentMonth = format(
+        set(new Date(), { date: 1 }),
+        DATE_FORMAT
+      );
+      const investmentOfCurrentMonth = investments.filter(({ date }) => {
+        return date === dateOfCurrentMonth;
       });
+
+      if (investmentOfCurrentMonth.length <= 0) {
+        investments.push({
+          date: dateOfCurrentMonth,
+          investment: 0
+        });
+      }
+    } else {
+      investments = portfolioCalculator
+        .getInvestments()
+        .map(({ date, investment }) => {
+          return {
+            date,
+            investment: investment.toNumber()
+          };
+        });
+
+      // Add investment of today
+      const investmentOfToday = investments.filter(({ date }) => {
+        return date === format(new Date(), DATE_FORMAT);
+      });
+
+      if (investmentOfToday.length <= 0) {
+        const pastInvestments = investments.filter(({ date }) => {
+          return isBefore(parseDate(date), new Date());
+        });
+        const lastInvestment = pastInvestments[pastInvestments.length - 1];
+
+        investments.push({
+          date: format(new Date(), DATE_FORMAT),
+          investment: lastInvestment?.investment ?? 0
+        });
+      }
     }
 
     return sortBy(investments, (investment) => {
@@ -273,7 +318,6 @@ export class PortfolioService {
       .filter((timelineItem) => timelineItem !== null)
       .map((timelineItem) => ({
         date: timelineItem.date,
-        marketPrice: timelineItem.value,
         value: timelineItem.netPerformance.toNumber()
       }));
 
@@ -394,7 +438,7 @@ export class PortfolioService {
         continue;
       }
 
-      const value = item.quantity.mul(item.marketPrice);
+      const value = item.quantity.mul(item.marketPrice ?? 0);
       const symbolProfile = symbolProfileMap[item.symbol];
       const dataProviderResponse = dataProviderResponses[item.symbol];
 
@@ -442,6 +486,7 @@ export class PortfolioService {
         sectors: symbolProfile.sectors,
         symbol: item.symbol,
         transactionCount: item.transactionCount,
+        url: symbolProfile.url,
         value: value.toNumber()
       };
     }
@@ -658,7 +703,7 @@ export class PortfolioService {
         netPerformancePercent: position.netPerformancePercentage?.toNumber(),
         quantity: quantity.toNumber(),
         value: this.exchangeRateDataService.toCurrency(
-          quantity.mul(marketPrice).toNumber(),
+          quantity.mul(marketPrice ?? 0).toNumber(),
           currency,
           userCurrency
         )
@@ -1290,6 +1335,10 @@ export class PortfolioService {
 
     if (filters.length === 0) {
       currentAccounts = await this.accountService.getAccounts(userId);
+    } else if (filters.length === 1 && filters[0].type === 'ACCOUNT') {
+      currentAccounts = await this.accountService.accounts({
+        where: { id: filters[0].id }
+      });
     } else {
       const accountIds = uniq(
         orders.map(({ accountId }) => {

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

@@ -46,7 +46,6 @@ export class SymbolController {
    * Must be after /lookup
    */
   @Get(':dataSource/:symbol')
-  @UseGuards(AuthGuard('jwt'))
   @UseInterceptors(TransformDataSourceInRequestInterceptor)
   @UseInterceptors(TransformDataSourceInResponseInterceptor)
   public async getSymbolData(

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

@@ -36,14 +36,7 @@ export class UserService {
   }
 
   public async getUser(
-    {
-      Account,
-      alias,
-      id,
-      permissions,
-      Settings,
-      subscription
-    }: UserWithSettings,
+    { Account, id, permissions, Settings, subscription }: UserWithSettings,
     aLocale = locale
   ): Promise<IUser> {
     const access = await this.prismaService.access.findMany({
@@ -63,7 +56,6 @@ export class UserService {
     }
 
     return {
-      alias,
       id,
       permissions,
       subscription,
@@ -158,10 +150,6 @@ export class UserService {
 
     let currentPermissions = getPermissions(user.role);
 
-    if (this.configurationService.get('ENABLE_FEATURE_FEAR_AND_GREED_INDEX')) {
-      currentPermissions.push(permissions.accessFearAndGreedIndex);
-    }
-
     if (user.subscription?.type === 'Premium') {
       currentPermissions.push(permissions.reportDataGlitch);
     }

apps/api/src/assets/cryptocurrencies/custom.json

@@ -1,4 +1,7 @@
 {
   "LUNA1": "Terra",
-  "UNI1": "Uniswap"
+  "LUNA2": "Terra",
+  "SGB1": "Songbird",
+  "UNI1": "Uniswap",
+  "UST": "TerraUSD"
 }

apps/api/src/main.ts

@@ -1,11 +1,24 @@
 import { Logger, ValidationPipe, VersioningType } from '@nestjs/common';
+import { ConfigService } from '@nestjs/config';
 import { NestFactory } from '@nestjs/core';
 
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
 
 async function bootstrap() {
-  const app = await NestFactory.create(AppModule);
+  const configApp = await NestFactory.create(AppModule);
+  const configService = configApp.get<ConfigService>(ConfigService);
+
+  const NODE_ENV =
+    configService.get<'development' | 'production'>('NODE_ENV') ??
+    'development';
+
+  const app = await NestFactory.create(AppModule, {
+    logger:
+      NODE_ENV === 'production'
+        ? ['error', 'log', 'warn']
+        : ['debug', 'error', 'log', 'verbose', 'warn']
+  });
   app.enableCors();
   app.enableVersioning({
     defaultVersion: '1',
@@ -20,11 +33,11 @@ async function bootstrap() {
     })
   );
 
-  const host = process.env.HOST || 'localhost';
-  const port = process.env.PORT || 3333;
-  await app.listen(port, host, () => {
+  const HOST = configService.get<string>('HOST') || '0.0.0.0';
+  const PORT = configService.get<number>('PORT') || 3333;
+  await app.listen(PORT, HOST, () => {
     logLogo();
-    Logger.log(`Listening at http://${host}:${port}`);
+    Logger.log(`Listening at http://${HOST}:${PORT}`);
     Logger.log('');
   });
 }

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

@@ -15,7 +15,9 @@ export class ConfigurationService {
       BASE_CURRENCY: str({ default: 'USD' }),
       CACHE_TTL: num({ default: 1 }),
       DATA_SOURCE_PRIMARY: str({ default: DataSource.YAHOO }),
-      DATA_SOURCES: json({ default: JSON.stringify([DataSource.YAHOO]) }),
+      DATA_SOURCES: json({
+        default: [DataSource.GHOSTFOLIO, DataSource.YAHOO]
+      }),
       ENABLE_FEATURE_BLOG: bool({ default: false }),
       ENABLE_FEATURE_CUSTOM_SYMBOLS: bool({ default: false }),
       ENABLE_FEATURE_FEAR_AND_GREED_INDEX: bool({ default: false }),
@@ -31,10 +33,10 @@ export class ConfigurationService {
       GOOGLE_SHEETS_ACCOUNT: str({ default: '' }),
       GOOGLE_SHEETS_ID: str({ default: '' }),
       GOOGLE_SHEETS_PRIVATE_KEY: str({ default: '' }),
-      HOST: host({ default: 'localhost' }),
+      HOST: host({ default: '0.0.0.0' }),
       JWT_SECRET_KEY: str({}),
+      MAX_ACTIVITIES_TO_IMPORT: num({ default: Number.MAX_SAFE_INTEGER }),
       MAX_ITEM_IN_CACHE: num({ default: 9999 }),
-      MAX_ORDERS_TO_IMPORT: num({ default: Number.MAX_SAFE_INTEGER }),
       PORT: port({ default: 3333 }),
       RAKUTEN_RAPID_API_KEY: str({ default: '' }),
       REDIS_HOST: host({ default: 'localhost' }),

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

@@ -10,6 +10,7 @@ import ms from 'ms';
 
 import { DataGatheringProcessor } from './data-gathering.processor';
 import { ExchangeRateDataModule } from './exchange-rate-data.module';
+import { MarketDataModule } from './market-data.module';
 import { SymbolProfileModule } from './symbol-profile.module';
 
 @Module({
@@ -25,6 +26,7 @@ import { SymbolProfileModule } from './symbol-profile.module';
     DataEnhancerModule,
     DataProviderModule,
     ExchangeRateDataModule,
+    MarketDataModule,
     PrismaModule,
     SymbolProfileModule
   ],

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

@@ -17,6 +17,7 @@ import { DataProviderService } from './data-provider/data-provider.service';
 import { DataEnhancerInterface } from './data-provider/interfaces/data-enhancer.interface';
 import { ExchangeRateDataService } from './exchange-rate-data.service';
 import { IDataGatheringItem } from './interfaces/interfaces';
+import { MarketDataService } from './market-data.service';
 import { PrismaService } from './prisma.service';
 
 @Injectable()
@@ -28,6 +29,7 @@ export class DataGatheringService {
     private readonly dataGatheringQueue: Queue,
     private readonly dataProviderService: DataProviderService,
     private readonly exchangeRateDataService: ExchangeRateDataService,
+    private readonly marketDataService: MarketDataService,
     private readonly prismaService: PrismaService,
     private readonly symbolProfileService: SymbolProfileService
   ) {}
@@ -56,6 +58,8 @@ export class DataGatheringService {
   }
 
   public async gatherSymbol({ dataSource, symbol }: UniqueAsset) {
+    await this.marketDataService.deleteMany({ dataSource, symbol });
+
     const symbols = (await this.getSymbolsMax()).filter((dataGatheringItem) => {
       return (
         dataGatheringItem.dataSource === dataSource &&

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

@@ -168,6 +168,7 @@ export class DataProviderService {
     const response: {
       [symbol: string]: IDataProviderResponse;
     } = {};
+    const startTimeTotal = performance.now();
 
     const itemsGroupedByDataSource = groupBy(items, (item) => item.dataSource);
 
@@ -176,25 +177,59 @@ export class DataProviderService {
     for (const [dataSource, dataGatheringItems] of Object.entries(
       itemsGroupedByDataSource
     )) {
+      const dataProvider = this.getDataProvider(DataSource[dataSource]);
+
       const symbols = dataGatheringItems.map((dataGatheringItem) => {
         return dataGatheringItem.symbol;
       });
 
-      const promise = Promise.resolve(
-        this.getDataProvider(DataSource[dataSource]).getQuotes(symbols)
-      );
+      const maximumNumberOfSymbolsPerRequest =
+        dataProvider.getMaxNumberOfSymbolsPerRequest?.() ??
+        Number.MAX_SAFE_INTEGER;
+      for (
+        let i = 0;
+        i < symbols.length;
+        i += maximumNumberOfSymbolsPerRequest
+      ) {
+        const startTimeDataSource = performance.now();
 
-      promises.push(
-        promise.then((result) => {
-          for (const [symbol, dataProviderResponse] of Object.entries(result)) {
-            response[symbol] = dataProviderResponse;
-          }
-        })
-      );
+        const symbolsChunk = symbols.slice(
+          i,
+          i + maximumNumberOfSymbolsPerRequest
+        );
+
+        const promise = Promise.resolve(dataProvider.getQuotes(symbolsChunk));
+
+        promises.push(
+          promise.then((result) => {
+            for (const [symbol, dataProviderResponse] of Object.entries(
+              result
+            )) {
+              response[symbol] = dataProviderResponse;
+            }
+
+            Logger.debug(
+              `Fetched ${symbolsChunk.length} quotes from ${dataSource} in ${(
+                (performance.now() - startTimeDataSource) /
+                1000
+              ).toFixed(3)} seconds`
+            );
+          })
+        );
+      }
     }
 
     await Promise.all(promises);
 
+    Logger.debug('------------------------------------------------');
+    Logger.debug(
+      `Fetched ${items.length} quotes in ${(
+        (performance.now() - startTimeTotal) /
+        1000
+      ).toFixed(3)} seconds`
+    );
+    Logger.debug('================================================');
+
     return response;
   }
 

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

@@ -81,6 +81,12 @@ export class EodHistoricalDataService implements DataProviderInterface {
     }
   }
 
+  public getMaxNumberOfSymbolsPerRequest() {
+    // It is not recommended using more than 15-20 tickers per request
+    // https://eodhistoricaldata.com/financial-apis/live-realtime-stocks-api
+    return 20;
+  }
+
   public getName(): DataSource {
     return DataSource.EOD_HISTORICAL_DATA;
   }

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

@@ -20,6 +20,8 @@ export interface DataProviderInterface {
     [symbol: string]: { [date: string]: IDataProviderHistoricalResponse };
   }>; // TODO: Return only one symbol
 
+  getMaxNumberOfSymbolsPerRequest?(): number;
+
   getName(): DataSource;
 
   getQuotes(

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

@@ -37,10 +37,15 @@ export class YahooFinanceService implements DataProviderInterface {
   }
 
   public convertFromYahooFinanceSymbol(aYahooFinanceSymbol: string) {
-    const symbol = aYahooFinanceSymbol.replace(
+    let symbol = aYahooFinanceSymbol.replace(
       new RegExp(`-${this.baseCurrency}$`),
       this.baseCurrency
     );
+
+    if (symbol.includes('=X') && !symbol.includes(this.baseCurrency)) {
+      symbol = `${this.baseCurrency}${symbol}`;
+    }
+
     return symbol.replace('=X', '');
   }
 
@@ -181,6 +186,9 @@ export class YahooFinanceService implements DataProviderInterface {
         if (symbol === 'USDGBp') {
           // Convert GPB to GBp (pence)
           marketPrice = new Big(marketPrice).mul(100).toNumber();
+        } else if (symbol === 'USDILA') {
+          // Convert ILS to ILA
+          marketPrice = new Big(marketPrice).mul(100).toNumber();
         }
 
         response[symbol][format(historicalItem.date, DATE_FORMAT)] = {
@@ -200,6 +208,10 @@ export class YahooFinanceService implements DataProviderInterface {
     }
   }
 
+  public getMaxNumberOfSymbolsPerRequest() {
+    return 50;
+  }
+
   public getName(): DataSource {
     return DataSource.YAHOO;
   }
@@ -243,9 +255,31 @@ export class YahooFinanceService implements DataProviderInterface {
               .mul(100)
               .toNumber()
           };
+        } else if (
+          symbol === 'USDILS' &&
+          yahooFinanceSymbols.includes('USDILA=X')
+        ) {
+          // Convert ILS to ILA
+          response['USDILA'] = {
+            ...response[symbol],
+            currency: 'ILA',
+            marketPrice: new Big(response[symbol].marketPrice)
+              .mul(100)
+              .toNumber()
+          };
         }
       }
 
+      if (yahooFinanceSymbols.includes('USDUSX=X')) {
+        // Convert USD to USX (cent)
+        response['USDUSX'] = {
+          currency: 'USX',
+          dataSource: this.getName(),
+          marketPrice: new Big(1).mul(100).toNumber(),
+          marketState: 'open'
+        };
+      }
+
       return response;
     } catch (error) {
       Logger.error(error, 'YahooFinanceService');

apps/api/src/services/exchange-rate-data.service.ts

@@ -22,9 +22,7 @@ export class ExchangeRateDataService {
     private readonly dataProviderService: DataProviderService,
     private readonly prismaService: PrismaService,
     private readonly propertyService: PropertyService
-  ) {
-    this.initialize();
-  }
+  ) {}
 
   public getCurrencies() {
     return this.currencies?.length > 0 ? this.currencies : [this.baseCurrency];
@@ -122,15 +120,6 @@ export class ExchangeRateDataService {
       return 0;
     }
 
-    const hasNaN = Object.values(this.exchangeRates).some((exchangeRate) => {
-      return isNaN(exchangeRate);
-    });
-
-    if (hasNaN) {
-      // Reinitialize if data is not loaded correctly
-      this.initialize();
-    }
-
     let factor = 1;
 
     if (aFromCurrency !== aToCurrency) {

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

@@ -6,7 +6,7 @@ export interface Environment extends CleanedEnvAccessors {
   BASE_CURRENCY: string;
   CACHE_TTL: number;
   DATA_SOURCE_PRIMARY: string;
-  DATA_SOURCES: string | string[]; // string is not correct, error in envalid?
+  DATA_SOURCES: string[];
   ENABLE_FEATURE_BLOG: boolean;
   ENABLE_FEATURE_CUSTOM_SYMBOLS: boolean;
   ENABLE_FEATURE_FEAR_AND_GREED_INDEX: boolean;
@@ -23,8 +23,8 @@ export interface Environment extends CleanedEnvAccessors {
   GOOGLE_SHEETS_ID: string;
   GOOGLE_SHEETS_PRIVATE_KEY: string;
   JWT_SECRET_KEY: string;
+  MAX_ACTIVITIES_TO_IMPORT: number;
   MAX_ITEM_IN_CACHE: number;
-  MAX_ORDERS_TO_IMPORT: number;
   PORT: number;
   RAKUTEN_RAPID_API_KEY: string;
   REDIS_HOST: string;

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

@@ -1,15 +1,25 @@
-import { Injectable, OnModuleDestroy, OnModuleInit } from '@nestjs/common';
+import {
+  Injectable,
+  Logger,
+  OnModuleDestroy,
+  OnModuleInit
+} from '@nestjs/common';
 import { PrismaClient } from '@prisma/client';
 
 @Injectable()
 export class PrismaService
   extends PrismaClient
-  implements OnModuleInit, OnModuleDestroy {
-  async onModuleInit() {
-    await this.$connect();
+  implements OnModuleInit, OnModuleDestroy
+{
+  public async onModuleInit() {
+    try {
+      await this.$connect();
+    } catch (error) {
+      Logger.error(error, 'PrismaService');
+    }
   }
 
-  async onModuleDestroy() {
+  public async onModuleDestroy() {
     await this.$disconnect();
   }
 }

apps/api/src/services/symbol-profile.service.ts

@@ -115,9 +115,16 @@ export class SymbolProfileService {
         }
 
         item.name = item.SymbolProfileOverrides?.name ?? item.name;
-        item.sectors =
-          (item.SymbolProfileOverrides.sectors as unknown as Sector[]) ??
-          item.sectors;
+
+        if (
+          (item.SymbolProfileOverrides.sectors as unknown as Sector[])?.length >
+          0
+        ) {
+          item.sectors = item.SymbolProfileOverrides
+            .sectors as unknown as Sector[];
+        }
+
+        item.url = item.SymbolProfileOverrides?.url ?? item.url;
 
         delete item.SymbolProfileOverrides;
       }

apps/client/jest.config.ts

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   displayName: 'client',
 
   setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
@@ -18,5 +18,5 @@ module.exports = {
     '^.+.(ts|mjs|js|html)$': 'jest-preset-angular'
   },
   transformIgnorePatterns: ['node_modules/(?!.*.mjs$)'],
-  preset: '../../jest.preset.ts'
+  preset: '../../jest.preset.js'
 };

apps/client/src/app/adapter/custom-date-adapter.ts

@@ -5,9 +5,6 @@ import { getDateFormatString } from '@ghostfolio/common/helper';
 import { format, parse } from 'date-fns';
 
 export class CustomDateAdapter extends NativeDateAdapter {
-  /**
-   * @constructor
-   */
   public constructor(
     @Inject(MAT_DATE_LOCALE) public locale: string,
     @Inject(forwardRef(() => MAT_DATE_LOCALE)) matDateLocale: string,

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

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { RouterModule, Routes, TitleStrategy } from '@angular/router';
+import { PageTitleStrategy } from '@ghostfolio/client/services/page-title.strategy';
 
 import { ModulePreloadService } from './core/module-preload.service';
 
@@ -16,6 +17,13 @@ const routes: Routes = [
         (m) => m.ChangelogPageModule
       )
   },
+  {
+    path: 'about/privacy-policy',
+    loadChildren: () =>
+      import('./pages/about/privacy-policy/privacy-policy-page.module').then(
+        (m) => m.PrivacyPolicyPageModule
+      )
+  },
   {
     path: 'account',
     loadChildren: () =>
@@ -52,6 +60,11 @@ const routes: Routes = [
         './pages/blog/2021/07/hallo-ghostfolio/hallo-ghostfolio-page.module'
       ).then((m) => m.HalloGhostfolioPageModule)
   },
+  {
+    path: 'demo',
+    loadChildren: () =>
+      import('./pages/demo/demo-page.module').then((m) => m.DemoPageModule)
+  },
   {
     path: 'en/blog/2021/07/hello-ghostfolio',
     loadChildren: () =>
@@ -66,6 +79,25 @@ const routes: Routes = [
         './pages/blog/2022/01/first-months-in-open-source/first-months-in-open-source-page.module'
       ).then((m) => m.FirstMonthsInOpenSourcePageModule)
   },
+  {
+    path: 'en/blog/2022/07/ghostfolio-meets-internet-identity',
+    loadChildren: () =>
+      import(
+        './pages/blog/2022/07/ghostfolio-meets-internet-identity/ghostfolio-meets-internet-identity-page.module'
+      ).then((m) => m.GhostfolioMeetsInternetIdentityPageModule)
+  },
+  {
+    path: 'en/blog/2022/07/how-do-i-get-my-finances-in-order',
+    loadChildren: () =>
+      import(
+        './pages/blog/2022/07/how-do-i-get-my-finances-in-order/how-do-i-get-my-finances-in-order-page.module'
+      ).then((m) => m.HowDoIGetMyFinancesInOrderPageModule)
+  },
+  {
+    path: 'faq',
+    loadChildren: () =>
+      import('./pages/faq/faq-page.module').then((m) => m.FaqPageModule)
+  },
   {
     path: 'features',
     loadChildren: () =>
@@ -78,6 +110,13 @@ const routes: Routes = [
     loadChildren: () =>
       import('./pages/home/home-page.module').then((m) => m.HomePageModule)
   },
+  {
+    path: 'markets',
+    loadChildren: () =>
+      import('./pages/markets/markets-page.module').then(
+        (m) => m.MarketsPageModule
+      )
+  },
   {
     path: 'p',
     loadChildren: () =>
@@ -120,6 +159,13 @@ const routes: Routes = [
         (m) => m.FirePageModule
       )
   },
+  {
+    path: 'portfolio/holdings',
+    loadChildren: () =>
+      import('./pages/portfolio/holdings/holdings-page.module').then(
+        (m) => m.HoldingsPageModule
+      )
+  },
   {
     path: 'portfolio/report',
     loadChildren: () =>
@@ -189,7 +235,10 @@ const routes: Routes = [
       }
     )
   ],
-  providers: [ModulePreloadService],
+  providers: [
+    ModulePreloadService,
+    { provide: TitleStrategy, useClass: PageTitleStrategy }
+  ],
   exports: [RouterModule]
 })
 export class AppRoutingModule {}

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

@@ -15,13 +15,17 @@
   >
     <div class="row">
       <div class="col-md-8 offset-md-2 text-center">
-        <a *ngIf="canCreateAccount" class="text-center" [routerLink]="['/']">
+        <a
+          *ngIf="canCreateAccount"
+          class="text-center"
+          [routerLink]="['/register']"
+        >
           <div
             class="cursor-pointer d-inline-block info-message px-3 py-2"
             (click)="onCreateAccount()"
           >
             <span i18n>You are using the Live Demo.</span>
-            <a class="ml-2" href="#" i18n>Create Account</a>
+            <span class="a ml-2" i18n>Create Account</span>
           </div></a
         >
         <div

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

@@ -17,7 +17,7 @@
         border-radius: 2rem;
         font-size: 80%;
 
-        a {
+        .a {
           color: rgba(var(--palette-primary-500), 1);
           font-weight: 500;
         }

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

@@ -1,6 +1,8 @@
 import { Platform } from '@angular/cdk/platform';
 import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatChipsModule } from '@angular/material/chips';
 import {
   DateAdapter,
   MAT_DATE_FORMATS,
@@ -38,6 +40,8 @@ export function NgxStripeFactory(): string {
     GfHeaderModule,
     HttpClientModule,
     MarkdownModule.forRoot(),
+    MatAutocompleteModule,
+    MatChipsModule,
     MaterialCssVarsModule.forRoot({
       darkThemeClass: 'is-dark-theme',
       isAutoContrast: true,

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

@@ -10,7 +10,6 @@ import { AccessTableComponent } from './access-table.component';
   declarations: [AccessTableComponent],
   exports: [AccessTableComponent],
   imports: [CommonModule, MatButtonModule, MatMenuModule, MatTableModule],
-  providers: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfPortfolioAccessTableModule {}

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

@@ -0,0 +1,7 @@
+:host {
+  display: block;
+
+  .mat-dialog-content {
+    max-height: unset;
+  }
+}

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

@@ -0,0 +1,112 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Inject,
+  OnDestroy,
+  OnInit
+} from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { DataService } from '@ghostfolio/client/services/data.service';
+import { UserService } from '@ghostfolio/client/services/user/user.service';
+import { downloadAsFile } from '@ghostfolio/common/helper';
+import { User } from '@ghostfolio/common/interfaces';
+import { OrderWithAccount } from '@ghostfolio/common/types';
+import { AccountType } from '@prisma/client';
+import { format, parseISO } from 'date-fns';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import { AccountDetailDialogParams } from './interfaces/interfaces';
+
+@Component({
+  host: { class: 'd-flex flex-column h-100' },
+  selector: 'gf-account-detail-dialog',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: 'account-detail-dialog.html',
+  styleUrls: ['./account-detail-dialog.component.scss']
+})
+export class AccountDetailDialog implements OnDestroy, OnInit {
+  public accountType: AccountType;
+  public name: string;
+  public orders: OrderWithAccount[];
+  public platformName: string;
+  public user: User;
+  public valueInBaseCurrency: number;
+
+  private unsubscribeSubject = new Subject<void>();
+
+  public constructor(
+    private changeDetectorRef: ChangeDetectorRef,
+    @Inject(MAT_DIALOG_DATA) public data: AccountDetailDialogParams,
+    private dataService: DataService,
+    public dialogRef: MatDialogRef<AccountDetailDialog>,
+    private userService: UserService
+  ) {
+    this.userService.stateChanged
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((state) => {
+        if (state?.user) {
+          this.user = state.user;
+
+          this.changeDetectorRef.markForCheck();
+        }
+      });
+  }
+
+  public ngOnInit(): void {
+    this.dataService
+      .fetchAccount(this.data.accountId)
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(({ accountType, name, Platform, valueInBaseCurrency }) => {
+        this.accountType = accountType;
+        this.name = name;
+        this.platformName = Platform?.name;
+        this.valueInBaseCurrency = valueInBaseCurrency;
+
+        this.changeDetectorRef.markForCheck();
+      });
+
+    this.dataService
+      .fetchActivities({
+        filters: [{ id: this.data.accountId, type: 'ACCOUNT' }]
+      })
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(({ activities }) => {
+        this.orders = activities;
+
+        this.changeDetectorRef.markForCheck();
+      });
+  }
+
+  public onClose(): void {
+    this.dialogRef.close();
+  }
+
+  public onExport() {
+    this.dataService
+      .fetchExport(
+        this.orders.map((order) => {
+          return order.id;
+        })
+      )
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((data) => {
+        downloadAsFile({
+          content: data,
+          fileName: `ghostfolio-export-${this.name
+            .replace(/\s+/g, '-')
+            .toLowerCase()}-${format(
+            parseISO(data.meta.date),
+            'yyyyMMddHHmm'
+          )}.json`,
+          format: 'json'
+        });
+      });
+  }
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+}

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

@@ -0,0 +1,64 @@
+<gf-dialog-header
+  mat-dialog-title
+  position="center"
+  [deviceType]="data.deviceType"
+  [title]="name"
+  (closeButtonClicked)="onClose()"
+></gf-dialog-header>
+
+<div class="flex-grow-1" mat-dialog-content>
+  <div class="container p-0">
+    <div class="row">
+      <div class="col-12 d-flex justify-content-center mb-3">
+        <gf-value
+          size="large"
+          [currency]="user?.settings?.baseCurrency"
+          [locale]="user?.settings?.locale"
+          [value]="valueInBaseCurrency"
+        ></gf-value>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-6 mb-3">
+        <gf-value
+          label="Account Type"
+          size="medium"
+          [value]="accountType"
+        ></gf-value>
+      </div>
+      <div class="col-6 mb-3">
+        <gf-value
+          label="Platform"
+          size="medium"
+          [value]="platformName"
+        ></gf-value>
+      </div>
+    </div>
+
+    <div *ngIf="orders?.length > 0" class="row">
+      <div class="col mb-3">
+        <div class="h5 mb-0" i18n>Activities</div>
+        <gf-activities-table
+          [activities]="orders"
+          [baseCurrency]="user?.settings?.baseCurrency"
+          [deviceType]="data.deviceType"
+          [hasPermissionToCreateActivity]="false"
+          [hasPermissionToExportActivities]="!hasImpersonationId"
+          [hasPermissionToFilter]="false"
+          [hasPermissionToImportActivities]="false"
+          [hasPermissionToOpenDetails]="false"
+          [locale]="user?.settings?.locale"
+          [showActions]="false"
+          (export)="onExport()"
+        ></gf-activities-table>
+      </div>
+    </div>
+  </div>
+</div>
+
+<gf-dialog-footer
+  mat-dialog-actions
+  [deviceType]="data.deviceType"
+  (closeButtonClicked)="onClose()"
+></gf-dialog-footer>

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

@@ -0,0 +1,27 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module';
+import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module';
+import { GfActivitiesTableModule } from '@ghostfolio/ui/activities-table/activities-table.module';
+import { GfValueModule } from '@ghostfolio/ui/value';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+
+import { AccountDetailDialog } from './account-detail-dialog.component';
+
+@NgModule({
+  declarations: [AccountDetailDialog],
+  imports: [
+    CommonModule,
+    GfActivitiesTableModule,
+    GfDialogFooterModule,
+    GfDialogHeaderModule,
+    GfValueModule,
+    MatButtonModule,
+    MatDialogModule,
+    NgxSkeletonLoaderModule
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class GfAccountDetailDialogModule {}

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

@@ -0,0 +1,5 @@
+export interface AccountDetailDialogParams {
+  accountId: string;
+  deviceType: string;
+  hasImpersonationId: boolean;
+}

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

@@ -65,7 +65,7 @@
   <ng-container matColumnDef="transactions">
     <th *matHeaderCellDef class="px-1 text-right" mat-header-cell>
       <span class="d-block d-sm-none">#</span>
-      <span class="d-none d-sm-block" i18n>Transactions</span>
+      <span class="d-none d-sm-block" i18n>Activities</span>
     </th>
     <td *matCellDef="let element" class="px-1 text-right" mat-cell>
       <ng-container *ngIf="element.accountType === 'SECURITIES'">{{
@@ -212,7 +212,12 @@
   </ng-container>
 
   <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
-  <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
+  <tr
+    *matRowDef="let row; columns: displayedColumns"
+    class="cursor-pointer"
+    mat-row
+    (click)="onOpenAccountDetailDialog(row.id)"
+  ></tr>
   <tr
     *matFooterRowDef="displayedColumns"
     mat-footer-row

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

@@ -9,6 +9,7 @@ import {
   Output
 } from '@angular/core';
 import { MatTableDataSource } from '@angular/material/table';
+import { Router } from '@angular/router';
 import { Account as AccountModel } from '@prisma/client';
 import { Subject, Subscription } from 'rxjs';
 
@@ -39,7 +40,7 @@ export class AccountsTableComponent implements OnChanges, OnDestroy, OnInit {
 
   private unsubscribeSubject = new Subject<void>();
 
-  public constructor() {}
+  public constructor(private router: Router) {}
 
   public ngOnInit() {}
 
@@ -75,6 +76,12 @@ export class AccountsTableComponent implements OnChanges, OnDestroy, OnInit {
     }
   }
 
+  public onOpenAccountDetailDialog(accountId: string) {
+    this.router.navigate([], {
+      queryParams: { accountId, accountDetailDialog: true }
+    });
+  }
+
   public onUpdateAccount(aAccount: AccountModel) {
     this.accountToUpdate.emit(aAccount);
   }

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

@@ -25,7 +25,6 @@ import { AccountsTableComponent } from './accounts-table.component';
     NgxSkeletonLoaderModule,
     RouterModule
   ],
-  providers: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfAccountsTableModule {}

apps/client/src/app/components/admin-jobs/admin-jobs.component.ts

@@ -30,9 +30,6 @@ export class AdminJobsComponent implements OnDestroy, OnInit {
 
   private unsubscribeSubject = new Subject<void>();
 
-  /**
-   * @constructor
-   */
   public constructor(
     private adminService: AdminService,
     private changeDetectorRef: ChangeDetectorRef,
@@ -52,9 +49,6 @@ export class AdminJobsComponent implements OnDestroy, OnInit {
       });
   }
 
-  /**
-   * Initializes the controller
-   */
   public ngOnInit() {
     this.filterForm = this.formBuilder.group({
       status: []

apps/client/src/app/components/admin-market-data-detail/admin-market-data-detail.module.ts

@@ -9,7 +9,6 @@ import { GfMarketDataDetailDialogModule } from './market-data-detail-dialog/mark
   declarations: [AdminMarketDataDetailComponent],
   exports: [AdminMarketDataDetailComponent],
   imports: [CommonModule, GfLineChartModule, GfMarketDataDetailDialogModule],
-  providers: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfAdminMarketDataDetailModule {}

apps/client/src/app/components/admin-market-data-detail/market-data-detail-dialog/market-data-detail-dialog.module.ts

@@ -11,7 +11,6 @@ import { MarketDataDetailDialog } from './market-data-detail-dialog.component';
 
 @NgModule({
   declarations: [MarketDataDetailDialog],
-  exports: [],
   imports: [
     CommonModule,
     FormsModule,
@@ -22,7 +21,6 @@ import { MarketDataDetailDialog } from './market-data-detail-dialog.component';
     MatInputModule,
     ReactiveFormsModule
   ],
-  providers: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfMarketDataDetailDialogModule {}

apps/client/src/app/components/admin-market-data/admin-market-data.component.ts

@@ -31,9 +31,6 @@ export class AdminMarketDataComponent implements OnDestroy, OnInit {
 
   private unsubscribeSubject = new Subject<void>();
 
-  /**
-   * @constructor
-   */
   public constructor(
     private adminService: AdminService,
     private changeDetectorRef: ChangeDetectorRef,
@@ -53,9 +50,6 @@ export class AdminMarketDataComponent implements OnDestroy, OnInit {
       });
   }
 
-  /**
-   * Initializes the controller
-   */
   public ngOnInit() {
     this.fetchAdminMarketData();
   }

apps/client/src/app/components/admin-overview/admin-overview.component.ts

@@ -42,9 +42,6 @@ export class AdminOverviewComponent implements OnDestroy, OnInit {
 
   private unsubscribeSubject = new Subject<void>();
 
-  /**
-   * @constructor
-   */
   public constructor(
     private adminService: AdminService,
     private cacheService: CacheService,
@@ -78,9 +75,6 @@ export class AdminOverviewComponent implements OnDestroy, OnInit {
       });
   }
 
-  /**
-   * Initializes the controller
-   */
   public ngOnInit() {
     this.fetchAdminData();
   }

apps/client/src/app/components/admin-users/admin-users.component.ts

@@ -21,9 +21,6 @@ export class AdminUsersComponent implements OnDestroy, OnInit {
 
   private unsubscribeSubject = new Subject<void>();
 
-  /**
-   * @constructor
-   */
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
@@ -38,9 +35,6 @@ export class AdminUsersComponent implements OnDestroy, OnInit {
       });
   }
 
-  /**
-   * Initializes the controller
-   */
   public ngOnInit() {
     this.fetchAdminData();
   }

apps/client/src/app/components/admin-users/admin-users.html

@@ -29,17 +29,15 @@
               <td class="mat-cell px-1 py-2">
                 <div class="d-flex align-items-center">
                   <span class="d-none d-sm-inline-block"
-                    >{{ userItem.alias || userItem.id }}</span
+                    >{{ userItem.id }}</span
                   >
                   <span class="d-inline-block d-sm-none"
-                    >{{ userItem.alias || (userItem.id | slice:0:5) +
-                    '...' }}</span
+                    >{{ (userItem.id | slice:0:5) + '...' }}</span
                   >
-                  <ion-icon
+                  <gf-premium-indicator
                     *ngIf="userItem?.subscription?.type === 'Premium'"
-                    class="ml-1 text-muted"
-                    name="diamond-outline"
-                  ></ion-icon>
+                    class="ml-1"
+                  ></gf-premium-indicator>
                 </div>
               </td>
               <td class="mat-cell px-1 py-2 text-right">

apps/client/src/app/components/admin-users/admin-users.module.ts

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
+import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
 import { GfValueModule } from '@ghostfolio/ui/value';
 
 import { AdminUsersComponent } from './admin-users.component';
@@ -9,7 +10,13 @@ import { AdminUsersComponent } from './admin-users.component';
 @NgModule({
   declarations: [AdminUsersComponent],
   exports: [],
-  imports: [CommonModule, GfValueModule, MatButtonModule, MatMenuModule],
+  imports: [
+    CommonModule,
+    GfPremiumIndicatorModule,
+    GfValueModule,
+    MatButtonModule,
+    MatMenuModule
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfAdminUsersModule {}

apps/client/src/app/components/dialog-footer/dialog-footer.module.ts

@@ -8,7 +8,6 @@ import { DialogFooterComponent } from './dialog-footer.component';
   declarations: [DialogFooterComponent],
   exports: [DialogFooterComponent],
   imports: [CommonModule, MatButtonModule],
-  providers: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfDialogFooterModule {}

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

@@ -8,7 +8,6 @@ import { DialogHeaderComponent } from './dialog-header.component';
   declarations: [DialogHeaderComponent],
   exports: [DialogHeaderComponent],
   imports: [CommonModule, MatButtonModule],
-  providers: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfDialogHeaderModule {}

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

@@ -66,7 +66,9 @@
       >Resources</a
     >
     <a
-      *ngIf="hasPermissionForSubscription"
+      *ngIf="
+        hasPermissionForSubscription && user?.subscription?.type === 'Basic'
+      "
       class="d-none d-sm-block mx-1"
       i18n
       mat-flat-button
@@ -122,13 +124,11 @@
                 : 'radio-button-on-outline'
             "
           ></ion-icon>
-          <span *ngIf="user?.alias">{{ user.alias }}</span>
-          <span *ngIf="!user?.alias" i18n><span></span>Me</span>
+          <span i18n>Me</span>
         </button>
         <button
           *ngFor="let accessItem of user?.access"
           class="align-items-center d-flex"
-          disabled="false"
           mat-menu-item
           (click)="impersonateAccount(accessItem.id)"
         >
@@ -203,7 +203,9 @@
         >Resources</a
       >
       <a
-        *ngIf="hasPermissionForSubscription"
+        *ngIf="
+          hasPermissionForSubscription && user?.subscription?.type === 'Basic'
+        "
         class="d-block d-sm-none"
         i18n
         mat-menu-item
@@ -229,13 +231,7 @@
       mat-button
       [routerLink]="['/']"
     >
-      <gf-logo
-        [hideName]="
-          !currentRoute ||
-          currentRoute === 'register' ||
-          currentRoute === 'start'
-        "
-      ></gf-logo>
+      <gf-logo [hideName]="currentRoute === 'register'"></gf-logo>
     </a>
     <span class="spacer"></span>
     <a
@@ -271,6 +267,18 @@
       [routerLink]="['/pricing']"
       >Pricing</a
     >
+    <a
+      *ngIf="hasPermissionToAccessFearAndGreedIndex"
+      class="d-none d-sm-block mx-1"
+      i18n
+      mat-flat-button
+      [ngClass]="{
+        'font-weight-bold': currentRoute === 'markets',
+        'text-decoration-underline': currentRoute === 'markets'
+      }"
+      [routerLink]="['/markets']"
+      >Markets</a
+    >
     <a
       class="d-none d-sm-block mx-1 no-min-width px-1"
       href="https://github.com/ghostfolio/ghostfolio"

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

@@ -37,6 +37,7 @@ export class HeaderComponent implements OnChanges {
   public hasPermissionForSocialLogin: boolean;
   public hasPermissionForSubscription: boolean;
   public hasPermissionToAccessAdminControl: boolean;
+  public hasPermissionToAccessFearAndGreedIndex: boolean;
   public impersonationId: string;
   public isMenuOpen: boolean;
 
@@ -73,6 +74,11 @@ export class HeaderComponent implements OnChanges {
       this.user?.permissions,
       permissions.accessAdminControl
     );
+
+    this.hasPermissionToAccessFearAndGreedIndex = hasPermission(
+      this.info?.globalPermissions,
+      permissions.enableFearAndGreedIndex
+    );
   }
 
   public impersonateAccount(aId: string) {

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

@@ -21,7 +21,6 @@ import { HeaderComponent } from './header.component';
     MatToolbarModule,
     RouterModule
   ],
-  providers: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfHeaderModule {}

apps/client/src/app/components/home-holdings/home-holdings.component.ts

@@ -36,9 +36,6 @@ export class HomeHoldingsComponent implements OnDestroy, OnInit {
 
   private unsubscribeSubject = new Subject<void>();
 
-  /**
-   * @constructor
-   */
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
@@ -81,9 +78,6 @@ export class HomeHoldingsComponent implements OnDestroy, OnInit {
       });
   }
 
-  /**
-   * Initializes the controller
-   */
   public ngOnInit() {
     this.deviceType = this.deviceService.getDeviceInfo().deviceType;
 

apps/client/src/app/components/home-holdings/home-holdings.module.ts

@@ -11,7 +11,6 @@ import { HomeHoldingsComponent } from './home-holdings.component';
 
 @NgModule({
   declarations: [HomeHoldingsComponent],
-  exports: [],
   imports: [
     CommonModule,
     GfPositionDetailDialogModule,
@@ -21,7 +20,6 @@ import { HomeHoldingsComponent } from './home-holdings.component';
     MatCardModule,
     RouterModule
   ],
-  providers: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfHomeHoldingsModule {}

apps/client/src/app/components/home-market/home-market.component.ts

@@ -30,9 +30,6 @@ export class HomeMarketComponent implements OnDestroy, OnInit {
 
   private unsubscribeSubject = new Subject<void>();
 
-  /**
-   * @constructor
-   */
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
@@ -47,52 +44,49 @@ export class HomeMarketComponent implements OnDestroy, OnInit {
         if (state?.user) {
           this.user = state.user;
 
-          this.hasPermissionToAccessFearAndGreedIndex = hasPermission(
-            this.user.permissions,
-            permissions.accessFearAndGreedIndex
-          );
-
-          if (this.hasPermissionToAccessFearAndGreedIndex) {
-            this.dataService
-              .fetchSymbolItem({
-                dataSource: this.info.fearAndGreedDataSource,
-                includeHistoricalData: this.numberOfDays,
-                symbol: ghostfolioFearAndGreedIndexSymbol
-              })
-              .pipe(takeUntil(this.unsubscribeSubject))
-              .subscribe(({ historicalData, marketPrice }) => {
-                this.fearAndGreedIndex = marketPrice;
-                this.historicalData = [
-                  ...historicalData,
-                  {
-                    date: resetHours(new Date()).toISOString(),
-                    value: marketPrice
-                  }
-                ];
-                this.isLoading = false;
-
-                this.changeDetectorRef.markForCheck();
-              });
-          }
-
-          this.dataService
-            .fetchBenchmarks()
-            .pipe(takeUntil(this.unsubscribeSubject))
-            .subscribe(({ benchmarks }) => {
-              this.benchmarks = benchmarks;
-
-              this.changeDetectorRef.markForCheck();
-            });
-
           this.changeDetectorRef.markForCheck();
         }
       });
   }
 
-  /**
-   * Initializes the controller
-   */
-  public ngOnInit() {}
+  public ngOnInit() {
+    this.hasPermissionToAccessFearAndGreedIndex = hasPermission(
+      this.info?.globalPermissions,
+      permissions.enableFearAndGreedIndex
+    );
+
+    if (this.hasPermissionToAccessFearAndGreedIndex) {
+      this.dataService
+        .fetchSymbolItem({
+          dataSource: this.info.fearAndGreedDataSource,
+          includeHistoricalData: this.numberOfDays,
+          symbol: ghostfolioFearAndGreedIndexSymbol
+        })
+        .pipe(takeUntil(this.unsubscribeSubject))
+        .subscribe(({ historicalData, marketPrice }) => {
+          this.fearAndGreedIndex = marketPrice;
+          this.historicalData = [
+            ...historicalData,
+            {
+              date: resetHours(new Date()).toISOString(),
+              value: marketPrice
+            }
+          ];
+
+          this.changeDetectorRef.markForCheck();
+        });
+    }
+
+    this.dataService
+      .fetchBenchmarks()
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(({ benchmarks }) => {
+        this.benchmarks = benchmarks;
+        this.isLoading = false;
+
+        this.changeDetectorRef.markForCheck();
+      });
+  }
 
   public ngOnDestroy() {
     this.unsubscribeSubject.next();

apps/client/src/app/components/home-market/home-market.html

@@ -28,16 +28,18 @@
   <div class="mb-3 row">
     <div class="col-xs-12 col-md-8 offset-md-2">
       <gf-benchmark
-        *ngFor="let benchmark of benchmarks"
-        class="py-2"
-        [benchmark]="benchmark"
+        [benchmarks]="benchmarks"
         [locale]="user?.settings?.locale"
       ></gf-benchmark>
-      <gf-benchmark
-        *ngIf="!benchmarks"
-        class="py-2"
-        [benchmark]="undefined"
-      ></gf-benchmark>
+      <ngx-skeleton-loader
+        *ngIf="isLoading"
+        animation="pulse"
+        class="px-2 py-3"
+        [theme]="{
+          height: '1.5rem',
+          width: '100%'
+        }"
+      ></ngx-skeleton-loader>
     </div>
   </div>
 </div>

apps/client/src/app/components/home-market/home-market.module.ts

@@ -3,19 +3,20 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { GfFearAndGreedIndexModule } from '@ghostfolio/client/components/fear-and-greed-index/fear-and-greed-index.module';
 import { GfBenchmarkModule } from '@ghostfolio/ui/benchmark/benchmark.module';
 import { GfLineChartModule } from '@ghostfolio/ui/line-chart/line-chart.module';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { HomeMarketComponent } from './home-market.component';
 
 @NgModule({
   declarations: [HomeMarketComponent],
-  exports: [],
+  exports: [HomeMarketComponent],
   imports: [
     CommonModule,
     GfBenchmarkModule,
     GfFearAndGreedIndexModule,
-    GfLineChartModule
+    GfLineChartModule,
+    NgxSkeletonLoaderModule
   ],
-  providers: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfHomeMarketModule {}

apps/client/src/app/components/home-overview/home-overview.component.ts

@@ -42,9 +42,6 @@ export class HomeOverviewComponent implements OnDestroy, OnInit {
 
   private unsubscribeSubject = new Subject<void>();
 
-  /**
-   * @constructor
-   */
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
@@ -69,9 +66,6 @@ export class HomeOverviewComponent implements OnDestroy, OnInit {
       });
   }
 
-  /**
-   * Initializes the controller
-   */
   public ngOnInit() {
     this.deviceType = this.deviceService.getDeviceInfo().deviceType;
 

apps/client/src/app/components/home-overview/home-overview.html

@@ -2,24 +2,29 @@
   class="align-items-center container d-flex flex-column h-100 justify-content-center overview p-0 position-relative"
 >
   <div class="row w-100">
-    <div class="chart-container col">
-      <gf-line-chart
-        symbol="Performance"
-        [historicalDataItems]="historicalDataItems"
-        [locale]="user?.settings?.locale"
-        [ngClass]="{ 'pr-3': deviceType === 'mobile' }"
-        [showGradient]="true"
-        [showLoader]="false"
-        [showXAxis]="false"
-        [showYAxis]="false"
-      ></gf-line-chart>
-      <div
-        *ngIf="hasPermissionToCreateOrder && historicalDataItems?.length === 0"
-        class="align-items-center d-flex h-100 justify-content-center w-100"
-      >
-        <div class="d-flex justify-content-center">
-          <gf-no-transactions-info-indicator></gf-no-transactions-info-indicator>
+    <div class="col p-0">
+      <div class="chart-container mx-auto position-relative">
+        <div
+          *ngIf="hasPermissionToCreateOrder && historicalDataItems?.length === 0"
+          class="align-items-center d-flex h-100 justify-content-center w-100"
+        >
+          <div class="d-flex justify-content-center">
+            <gf-no-transactions-info-indicator></gf-no-transactions-info-indicator>
+          </div>
         </div>
+        <gf-line-chart
+          class="position-absolute"
+          symbol="Performance"
+          [currency]="user?.settings?.baseCurrency"
+          [historicalDataItems]="historicalDataItems"
+          [hidden]="historicalDataItems?.length === 0"
+          [locale]="user?.settings?.locale"
+          [ngClass]="{ 'pr-3': deviceType === 'mobile' }"
+          [showGradient]="true"
+          [showLoader]="false"
+          [showXAxis]="false"
+          [showYAxis]="false"
+        ></gf-line-chart>
       </div>
     </div>
   </div>

apps/client/src/app/components/home-overview/home-overview.module.ts

@@ -10,7 +10,6 @@ import { HomeOverviewComponent } from './home-overview.component';
 
 @NgModule({
   declarations: [HomeOverviewComponent],
-  exports: [],
   imports: [
     CommonModule,
     GfLineChartModule,
@@ -19,7 +18,6 @@ import { HomeOverviewComponent } from './home-overview.component';
     GfToggleModule,
     RouterModule
   ],
-  providers: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfHomeOverviewModule {}

apps/client/src/app/components/home-overview/home-overview.scss

@@ -5,7 +5,8 @@
 
   .chart-container {
     aspect-ratio: 16 / 9;
-    max-height: 50vh;
+    height: auto;
+    max-width: 67rem;
 
     // Fallback for aspect-ratio (using padding hack)
     @supports not (aspect-ratio: 16 / 9) {
@@ -25,10 +26,8 @@
     gf-line-chart {
       bottom: 0;
       left: 0;
-      position: absolute;
       right: 0;
       top: 0;
-      z-index: -1;
     }
   }
 }

apps/client/src/app/components/home-summary/home-summary.component.ts

@@ -21,9 +21,6 @@ export class HomeSummaryComponent implements OnDestroy, OnInit {
 
   private unsubscribeSubject = new Subject<void>();
 
-  /**
-   * @constructor
-   */
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
@@ -46,9 +43,6 @@ export class HomeSummaryComponent implements OnDestroy, OnInit {
       });
   }
 
-  /**
-   * Initializes the controller
-   */
   public ngOnInit() {
     this.impersonationStorageService
       .onChangeHasImpersonation()

apps/client/src/app/components/home-summary/home-summary.module.ts

@@ -8,14 +8,12 @@ import { HomeSummaryComponent } from './home-summary.component';
 
 @NgModule({
   declarations: [HomeSummaryComponent],
-  exports: [],
   imports: [
     CommonModule,
     GfPortfolioSummaryModule,
     MatCardModule,
     RouterModule
   ],
-  providers: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfHomeSummaryModule {}

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

@@ -1,3 +1,7 @@
 :host {
   display: block;
+
+  ngx-skeleton-loader {
+    height: 100%;
+  }
 }

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

@@ -13,7 +13,7 @@ import {
   getTooltipPositionerMapTop,
   getVerticalHoverLinePlugin
 } from '@ghostfolio/common/chart-helper';
-import { primaryColorRgb } from '@ghostfolio/common/config';
+import { primaryColorRgb, secondaryColorRgb } from '@ghostfolio/common/config';
 import {
   getBackgroundColor,
   getDateFormatString,
@@ -22,7 +22,10 @@ import {
   transformTickToAbbreviation
 } from '@ghostfolio/common/helper';
 import { InvestmentItem } from '@ghostfolio/common/interfaces/investment-item.interface';
+import { GroupBy } from '@ghostfolio/common/types';
 import {
+  BarController,
+  BarElement,
   Chart,
   LineController,
   LineElement,
@@ -31,6 +34,7 @@ import {
   TimeScale,
   Tooltip
 } from 'chart.js';
+import annotationPlugin from 'chartjs-plugin-annotation';
 import { addDays, isAfter, parseISO, subDays } from 'date-fns';
 
 @Component({
@@ -42,9 +46,11 @@ import { addDays, isAfter, parseISO, subDays } from 'date-fns';
 export class InvestmentChartComponent implements OnChanges, OnDestroy {
   @Input() currency: string;
   @Input() daysInMarket: number;
+  @Input() groupBy: GroupBy;
   @Input() investments: InvestmentItem[];
   @Input() isInPercent = false;
   @Input() locale: string;
+  @Input() savingsRate = 0;
 
   @ViewChild('chartCanvas') chartCanvas;
 
@@ -53,6 +59,9 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
 
   public constructor() {
     Chart.register(
+      annotationPlugin,
+      BarController,
+      BarElement,
       LinearScale,
       LineController,
       LineElement,
@@ -78,7 +87,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
   private initialize() {
     this.isLoading = true;
 
-    if (this.investments?.length > 0) {
+    if (!this.groupBy && this.investments?.length > 0) {
       // Extend chart by 5% of days in market (before)
       const firstItem = this.investments[0];
       this.investments.unshift({
@@ -102,13 +111,14 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
     }
 
     const data = {
-      labels: this.investments.map((position) => {
-        return position.date;
+      labels: this.investments.map((investmentItem) => {
+        return investmentItem.date;
       }),
       datasets: [
         {
+          backgroundColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`,
           borderColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`,
-          borderWidth: 2,
+          borderWidth: this.groupBy ? 0 : 2,
           data: this.investments.map((position) => {
             return position.investment;
           }),
@@ -137,6 +147,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
         this.chart = new Chart(this.chartCanvas.nativeElement, {
           data,
           options: {
+            animation: false,
             elements: {
               line: {
                 tension: 0
@@ -150,6 +161,39 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
             interaction: { intersect: false, mode: 'index' },
             maintainAspectRatio: true,
             plugins: <unknown>{
+              annotation: {
+                annotations: {
+                  savingsRate: this.savingsRate
+                    ? {
+                        borderColor: `rgba(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b}, 0.75)`,
+                        borderWidth: 1,
+                        label: {
+                          backgroundColor: `rgb(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b})`,
+                          borderRadius: 2,
+                          color: 'white',
+                          content: 'Savings Rate',
+                          display: true,
+                          font: { size: '10px', weight: 'normal' },
+                          padding: {
+                            x: 4,
+                            y: 2
+                          },
+                          position: 'start'
+                        },
+                        scaleID: 'y',
+                        type: 'line',
+                        value: this.savingsRate
+                      }
+                    : undefined,
+                  yAxis: {
+                    borderColor: `rgba(${getTextColor()}, 0.1)`,
+                    borderWidth: 1,
+                    scaleID: 'y',
+                    type: 'line',
+                    value: 0
+                  }
+                }
+              },
               legend: {
                 display: false
               },
@@ -164,6 +208,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
                 display: true,
                 grid: {
                   borderColor: `rgba(${getTextColor()}, 0.1)`,
+                  borderWidth: this.groupBy ? 0 : 1,
                   color: `rgba(${getTextColor()}, 0.8)`,
                   display: false
                 },
@@ -178,8 +223,10 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
                 grid: {
                   borderColor: `rgba(${getTextColor()}, 0.1)`,
                   color: `rgba(${getTextColor()}, 0.8)`,
-                  display: false
+                  display: false,
+                  drawBorder: false
                 },
+                position: 'right',
                 ticks: {
                   callback: (value: number) => {
                     return transformTickToAbbreviation(value);
@@ -192,12 +239,12 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
             }
           },
           plugins: [getVerticalHoverLinePlugin(this.chartCanvas)],
-          type: 'line'
+          type: this.groupBy ? 'bar' : 'line'
         });
-
-        this.isLoading = false;
       }
     }
+
+    this.isLoading = false;
   }
 
   private getTooltipPluginConfiguration() {

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

@@ -1,10 +1,13 @@
 import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
 import { MatCheckboxChange } from '@angular/material/checkbox';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { Router } from '@angular/router';
+import { InternetIdentityService } from '@ghostfolio/client/services/internet-identity.service';
 import {
   STAY_SIGNED_IN,
   SettingsStorageService
 } from '@ghostfolio/client/services/settings-storage.service';
+import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service';
 
 @Component({
   selector: 'gf-login-with-access-token-dialog',
@@ -16,7 +19,10 @@ export class LoginWithAccessTokenDialog {
   public constructor(
     @Inject(MAT_DIALOG_DATA) public data: any,
     public dialogRef: MatDialogRef<LoginWithAccessTokenDialog>,
-    private settingsStorageService: SettingsStorageService
+    private internetIdentityService: InternetIdentityService,
+    private router: Router,
+    private settingsStorageService: SettingsStorageService,
+    private tokenStorageService: TokenStorageService
   ) {}
 
   ngOnInit() {}
@@ -31,4 +37,14 @@ export class LoginWithAccessTokenDialog {
   public onClose() {
     this.dialogRef.close();
   }
+
+  public async onLoginWithInternetIdentity() {
+    try {
+      const { authToken } = await this.internetIdentityService.login();
+
+      this.tokenStorageService.saveToken(authToken);
+      this.dialogRef.close();
+      this.router.navigate(['/']);
+    } catch {}
+  }
 }

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

@@ -5,16 +5,7 @@
 ></gf-dialog-header>
 
 <div mat-dialog-content>
-  <div>
-    <ng-container *ngIf="data.hasPermissionToUseSocialLogin">
-      <div class="text-center">
-        <a color="accent" href="/api/v1/auth/google" mat-flat-button
-          ><ion-icon class="mr-1" name="logo-google"></ion-icon
-          ><span i18n>Sign in with Google</span></a
-        >
-      </div>
-      <div class="my-3 text-center text-muted" i18n>or</div>
-    </ng-container>
+  <div class="align-items-center d-flex flex-column">
     <mat-form-field appearance="outline" class="w-100">
       <mat-label i18n>Security Token</mat-label>
       <textarea
@@ -24,6 +15,29 @@
         [(ngModel)]="data.accessToken"
       ></textarea>
     </mat-form-field>
+    <ng-container *ngIf="data.hasPermissionToUseSocialLogin">
+      <div class="my-3 text-center text-muted" i18n>or</div>
+      <div class="d-flex flex-column">
+        <button
+          class="mb-2"
+          mat-stroked-button
+          (click)="onLoginWithInternetIdentity()"
+        >
+          <img
+            class="mr-2"
+            src="./assets/icons/internet-computer.svg"
+            style="height: 0.75rem"
+          /><span i18n>Sign in with Internet Identity</span>
+        </button>
+        <a href="/api/v1/auth/google" mat-stroked-button
+          ><img
+            class="mr-2"
+            src="./assets/icons/google.svg"
+            style="height: 1rem"
+          /><span i18n>Sign in with Google</span></a
+        >
+      </div>
+    </ng-container>
   </div>
 </div>
 <div mat-dialog-actions>

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

@@ -13,7 +13,6 @@ import { LoginWithAccessTokenDialog } from './login-with-access-token-dialog.com
 
 @NgModule({
   declarations: [LoginWithAccessTokenDialog],
-  exports: [],
   imports: [
     CommonModule,
     FormsModule,
@@ -26,7 +25,6 @@ import { LoginWithAccessTokenDialog } from './login-with-access-token-dialog.com
     ReactiveFormsModule,
     TextFieldModule
   ],
-  providers: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class LoginWithAccessTokenDialogModule {}

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

@@ -12,4 +12,12 @@
       }
     }
   }
+
+  .mat-form-field {
+    ::ng-deep {
+      .mat-form-field-wrapper {
+        padding-bottom: 0;
+      }
+    }
+  }
 }

apps/client/src/app/components/portfolio-performance/portfolio-performance.module.ts

@@ -8,7 +8,6 @@ import { PortfolioPerformanceComponent } from './portfolio-performance.component
 @NgModule({
   declarations: [PortfolioPerformanceComponent],
   exports: [PortfolioPerformanceComponent],
-  imports: [CommonModule, GfValueModule, NgxSkeletonLoaderModule],
-  providers: []
+  imports: [CommonModule, GfValueModule, NgxSkeletonLoaderModule]
 })
 export class GfPortfolioPerformanceModule {}

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

@@ -15,7 +15,6 @@ import { PositionDetailDialog } from './position-detail-dialog.component';
 
 @NgModule({
   declarations: [PositionDetailDialog],
-  exports: [],
   imports: [
     CommonModule,
     GfActivitiesTableModule,
@@ -29,7 +28,6 @@ import { PositionDetailDialog } from './position-detail-dialog.component';
     MatDialogModule,
     NgxSkeletonLoaderModule
   ],
-  providers: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfPositionDetailDialogModule {}

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

@@ -23,7 +23,6 @@ import { PositionComponent } from './position.component';
     NgxSkeletonLoaderModule,
     RouterModule
   ],
-  providers: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfPositionModule {}

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

@@ -6,12 +6,40 @@
   mat-table
   [dataSource]="dataSource"
 >
+  <ng-container matColumnDef="icon">
+    <th *matHeaderCellDef class="px-1" mat-header-cell></th>
+    <td *matCellDef="let element" class="px-1 text-center" mat-cell>
+      <gf-symbol-icon
+        *ngIf="element.url"
+        [tooltip]="element.name"
+        [url]="element.url"
+      ></gf-symbol-icon>
+    </td>
+  </ng-container>
+
   <ng-container matColumnDef="symbol">
     <th *matHeaderCellDef class="px-1" i18n mat-header-cell mat-sort-header>
       Symbol
     </th>
     <td *matCellDef="let element" class="px-1" mat-cell>
-      {{ element.symbol | gfSymbol }}
+      <span [title]="element.name">{{ element.symbol | gfSymbol }}</span>
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="name">
+    <th
+      *matHeaderCellDef
+      class="d-none d-lg-table-cell px-1"
+      i18n
+      mat-header-cell
+      mat-sort-header
+    >
+      Name
+    </th>
+    <td *matCellDef="let element" class="d-none d-lg-table-cell px-1" mat-cell>
+      <ng-container *ngIf="element.name !== element.symbol">{{
+        element.name
+      }}</ng-container>
     </td>
   </ng-container>
 
@@ -36,48 +64,6 @@
     </td>
   </ng-container>
 
-  <ng-container matColumnDef="performance">
-    <th
-      *matHeaderCellDef
-      class="d-none d-lg-table-cell px-1 text-right"
-      i18n
-      mat-header-cell
-    >
-      Performance
-    </th>
-    <td class="d-none d-lg-table-cell px-1" mat-cell *matCellDef="let element">
-      <div class="d-flex justify-content-end">
-        <gf-value
-          [colorizeSign]="true"
-          [isPercent]="true"
-          [locale]="locale"
-          [value]="isLoading ? undefined : element.netPerformancePercent"
-        ></gf-value>
-      </div>
-    </td>
-  </ng-container>
-
-  <ng-container matColumnDef="allocationInvestment">
-    <th
-      *matHeaderCellDef
-      class="justify-content-end px-1"
-      i18n
-      mat-header-cell
-      mat-sort-header
-    >
-      Initial Allocation
-    </th>
-    <td mat-cell *matCellDef="let element">
-      <div class="d-flex justify-content-end px-1">
-        <gf-value
-          [isPercent]="true"
-          [locale]="locale"
-          [value]="isLoading ? undefined : element.allocationInvestment"
-        ></gf-value>
-      </div>
-    </td>
-  </ng-container>
-
   <ng-container matColumnDef="allocationCurrent">
     <th
       *matHeaderCellDef
@@ -86,7 +72,7 @@
       mat-header-cell
       mat-sort-header
     >
-      Current Allocation
+      Allocation
     </th>
     <td *matCellDef="let element" class="px-1" mat-cell>
       <div class="d-flex justify-content-end">
@@ -99,15 +85,39 @@
     </td>
   </ng-container>
 
-  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <ng-container matColumnDef="performance">
+    <th
+      *matHeaderCellDef
+      class="d-none d-lg-table-cell px-1 text-right"
+      i18n
+      mat-header-cell
+    >
+      Performance
+    </th>
+    <td *matCellDef="let element" class="d-none d-lg-table-cell px-1" mat-cell>
+      <div class="d-flex justify-content-end">
+        <gf-value
+          [colorizeSign]="true"
+          [isPercent]="true"
+          [locale]="locale"
+          [value]="isLoading ? undefined : element.netPerformancePercent"
+        ></gf-value>
+      </div>
+    </td>
+  </ng-container>
+
+  <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
   <tr
     *matRowDef="let row; columns: displayedColumns"
     mat-row
     [ngClass]="{
-      'cursor-pointer': !ignoreAssetSubClasses.includes(row.assetSubClass)
+      'cursor-pointer':
+        hasPermissionToShowValues &&
+        !ignoreAssetSubClasses.includes(row.assetSubClass)
     }"
     (click)="
-      !ignoreAssetSubClasses.includes(row.assetSubClass) &&
+      hasPermissionToShowValues &&
+        !ignoreAssetSubClasses.includes(row.assetSubClass) &&
         onOpenPositionDialog({ dataSource: row.dataSource, symbol: row.symbol })
     "
   ></tr>
@@ -132,4 +142,15 @@
   </button>
 </div>
 
+<div
+  *ngIf="
+    dataSource.data.length === 0 && hasPermissionToCreateActivity && !isLoading
+  "
+  class="p-3 text-center"
+>
+  <gf-no-transactions-info-indicator
+    [hasBorder]="false"
+  ></gf-no-transactions-info-indicator>
+</div>
+
 <mat-paginator class="d-none" [pageSize]="pageSize"></mat-paginator>

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

@@ -27,7 +27,10 @@ import { Subject, Subscription } from 'rxjs';
 export class PositionsTableComponent implements OnChanges, OnDestroy, OnInit {
   @Input() baseCurrency: string;
   @Input() deviceType: string;
+  @Input() hasPermissionToCreateActivity: boolean;
+  @Input() hasPermissionToShowValues = true;
   @Input() locale: string;
+  @Input() pageSize = Number.MAX_SAFE_INTEGER;
   @Input() positions: PortfolioPosition[];
 
   @Output() transactionDeleted = new EventEmitter<string>();
@@ -44,7 +47,6 @@ export class PositionsTableComponent implements OnChanges, OnDestroy, OnInit {
     ASSET_SUB_CLASS_EMERGENCY_FUND
   ];
   public isLoading = true;
-  public pageSize = 7;
   public routeQueryParams: Subscription;
 
   private unsubscribeSubject = new Subject<void>();
@@ -54,13 +56,14 @@ export class PositionsTableComponent implements OnChanges, OnDestroy, OnInit {
   public ngOnInit() {}
 
   public ngOnChanges() {
-    this.displayedColumns = [
-      'symbol',
-      'value',
-      'performance',
-      'allocationInvestment',
-      'allocationCurrent'
-    ];
+    this.displayedColumns = ['icon', 'symbol', 'name'];
+
+    if (this.hasPermissionToShowValues) {
+      this.displayedColumns.push('value');
+    }
+
+    this.displayedColumns.push('allocationCurrent');
+    this.displayedColumns.push('performance');
 
     this.isLoading = true;
 

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

@@ -35,7 +35,6 @@ import { PositionsTableComponent } from './positions-table.component';
     NgxSkeletonLoaderModule,
     RouterModule
   ],
-  providers: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfPositionsTableModule {}

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

@@ -15,7 +15,6 @@ import { PositionsComponent } from './positions.component';
     GfPositionModule,
     MatButtonModule
   ],
-  providers: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfPositionsModule {}

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

@@ -8,7 +8,6 @@ import { RuleComponent } from './rule.component';
   declarations: [RuleComponent],
   exports: [RuleComponent],
   imports: [CommonModule, NgxSkeletonLoaderModule],
-  providers: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfRuleModule {}

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

@@ -19,7 +19,6 @@ import { RulesComponent } from './rules.component';
     MatButtonModule,
     MatCardModule
   ],
-  providers: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class RulesModule {}

apps/client/src/app/components/symbol-icon/symbol-icon.module.ts

@@ -7,7 +7,6 @@ import { SymbolIconComponent } from './symbol-icon.component';
   declarations: [SymbolIconComponent],
   exports: [SymbolIconComponent],
   imports: [CommonModule],
-  providers: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfSymbolIconModule {}

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

@@ -23,7 +23,7 @@ export class ToggleComponent implements OnChanges, OnInit {
 
   @Output() change = new EventEmitter<Pick<ToggleOption, 'value'>>();
 
-  public option = new FormControl();
+  public option = new FormControl<string>(undefined);
 
   public constructor() {}