Release 1.9.0 (#136)

* Make order of X-ray rules consistent

* Update changelog

.env

@@ -5,12 +5,12 @@ REDIS_HOST=localhost
 REDIS_PORT=6379
 
 # POSTGRES
+POSTGRES_DB=ghostfolio-db
 POSTGRES_USER=user
 POSTGRES_PASSWORD=password
-POSTGRES_DB=ghostfolio-db
 
 ACCESS_TOKEN_SALT=GHOSTFOLIO
 ALPHA_VANTAGE_API_KEY=
-DATABASE_URL=postgresql://user:password@localhost:5432/ghostfolio-db?sslmode=prefer
+DATABASE_URL=postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@localhost:5432/${POSTGRES_DB}?sslmode=prefer
 JWT_SECRET_KEY=123456
 PORT=3333

.travis.yml

@@ -7,3 +7,5 @@ before_script:
   - yarn
 script:
   - yarn format:check
+  - yarn test
+  - yarn build:all

CHANGELOG.md

@@ -5,6 +5,93 @@ 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.9.0 - 01.06.2021
+
+### Added
+
+- Added the year labels to the investment chart on the x-axis
+
+### Changed
+
+- Respected the data source attribute of the transactions model in the data management for historical data
+- Prettified the generic scraper symbols in the transaction filtering component
+- Changed to the strict mode of distance formatting between two given dates
+
+### Fixed
+
+- Fixed the sorting in various tables
+- Made the order of the rules in the _X-ray_ section consistent
+
+## 1.8.0 - 24.05.2021
+
+### Added
+
+- Added a section for _Analysis_, _X-ray_ and upcoming tools
+
+### Changed
+
+- Introduced a user service implemented as an observable store (single source of truth for state)
+
+### Fixed
+
+- Fixed the performance chart by considering the investment
+- Fixed missing header of public pages (_About_, _Pricing_, _Resources_)
+
+## 1.7.0 - 22.05.2021
+
+### Changed
+
+- Hid footer on mobile (except on landing page)
+
+### Fixed
+
+- Fixed the internal navigation of the _Zen Mode_ in combination with a query parameter
+
+## 1.6.0 - 22.05.2021
+
+### Added
+
+- Added an index in the user table of the admin control panel
+
+### Changed
+
+- Improved the alignment in the user table of the admin control panel
+
+## 1.5.0 - 22.05.2021
+
+### Added
+
+- Added _Zen Mode_: the distraction-free view
+
+## 1.4.0 - 20.05.2021
+
+### Added
+
+- Added filtering by year in the transaction filtering component
+
+### Changed
+
+- Renamed _Ghostfolio Account_ to _My Ghostfolio_
+- Hid unknown exchange in the position overview
+- Disable the base currency selector for the demo user
+- Refactored the portfolio unit tests to work without database
+- Refactored the search functionality of the data management (aligned with data source)
+- Renamed shared helper to `@ghostfolio/common/helper`
+- Moved shared interfaces to `@ghostfolio/common/interfaces`
+- Moved shared types to `@ghostfolio/common/types`
+
+## 1.3.0 - 15.05.2021
+
+### Changed
+
+- Refactored the active menu item state by parsing the current url
+- Used a desaturated background color for unknown types in pie charts
+- Renamed the columns _Initial Share_ and _Current Share_ to _Initial Allocation_ and _Current Allocation_ in the positions table
+
+### Fixed
+
+- Fixed the link to the pricing page
+
 ## 1.2.1 - 14.05.2021
 
 ### Changed

README.md

@@ -7,16 +7,15 @@
     <a href="https://ghostfol.io"><strong>Live Demo</strong></a>
   </p>
   <p>
+    <img src="https://img.shields.io/badge/contributions-welcome-orange.svg"/>
     <a href="https://travis-ci.org/github/ghostfolio/ghostfolio" rel="nofollow">
-      <img src="https://travis-ci.org/ghostfolio/ghostfolio.svg?branch=main" alt="Build Status"/>
+      <img src="https://travis-ci.org/ghostfolio/ghostfolio.svg?branch=main" alt="Build Status"/></a>
-    </a>
     <a href="https://www.gnu.org/licenses/agpl-3.0" rel="nofollow">
-      <img src="https://img.shields.io/badge/License-AGPL%20v3-blue.svg" alt="License: AGPL v3"/>
+      <img src="https://img.shields.io/badge/License-AGPL%20v3-blue.svg" alt="License: AGPL v3"/></a>
-    </a>
   </p>
 </div>
 
-**Ghostfolio** is an open source portfolio tracker. The software empowers busy folks to have a sharp look of their financial assets and to make solid, data-driven investment decisions by evaluating automated static portfolio analysis rules.
+**Ghostfolio** is an open source portfolio tracker based on web technology. The software empowers busy folks to have a sharp look of their financial assets and to make solid, data-driven investment decisions by evaluating automated static portfolio analysis rules.
 
 ## Why Ghostfolio?
 
@@ -43,10 +42,13 @@ Ghostfolio is for you if you are...
 ## Features
 
 - ✅ Create, update and delete transactions
+- ✅ Multi account management
 - ✅ Portfolio performance (`Today`, `YTD`, `1Y`, `5Y`, `Max`)
 - ✅ Various charts
 - ✅ Static analysis to identify potential risks in your portfolio
 - ✅ Dark Mode
+- ✅ Zen Mode
+- ✅ Mobile-first design
 
 ## Technology Stack
 
@@ -54,11 +56,11 @@ Ghostfolio is a modern web application written in [TypeScript](https://www.types
 
 ### Backend
 
-The backend is based on [NestJS](https://nestjs.com) using [PostgreSQL](https://www.postgresql.org) as a database and [Redis](https://redis.io) for caching.
+The backend is based on [NestJS](https://nestjs.com) using [PostgreSQL](https://www.postgresql.org) as a database together with [Prisma](https://www.prisma.io) and [Redis](https://redis.io) for caching.
 
 ### Frontend
 
-The frontend is built with [Angular](https://angular.io).
+The frontend is built with [Angular](https://angular.io) and uses [Angular Material](https://material.angular.io) with utility classes from [Bootstrap](https://getbootstrap.com).
 
 ## Getting Started
 

angular.json

@@ -208,22 +208,22 @@
         }
       }
     },
-    "helper": {
+    "common": {
-      "root": "libs/helper",
+      "root": "libs/common",
-      "sourceRoot": "libs/helper/src",
+      "sourceRoot": "libs/common/src",
       "projectType": "library",
       "architect": {
         "lint": {
           "builder": "@nrwl/linter:eslint",
           "options": {
-            "lintFilePatterns": ["libs/helper/**/*.ts"]
+            "lintFilePatterns": ["libs/common/**/*.ts"]
           }
         },
         "test": {
           "builder": "@nrwl/jest:jest",
-          "outputs": ["coverage/libs/helper"],
+          "outputs": ["coverage/libs/common"],
           "options": {
-            "jestConfig": "libs/helper/jest.config.js",
+            "jestConfig": "libs/common/jest.config.js",
             "passWithNoTests": true
           }
         }

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

@@ -1,10 +1,10 @@
-import { RequestWithUser } from '@ghostfolio/api/app/interfaces/request-with-user.type';
+import { Access } from '@ghostfolio/common/interfaces';
+import { RequestWithUser } from '@ghostfolio/common/types';
 import { Controller, Get, Inject, UseGuards } from '@nestjs/common';
 import { REQUEST } from '@nestjs/core';
 import { AuthGuard } from '@nestjs/passport';
 
 import { AccessService } from './access.service';
-import { Access } from './interfaces/access.interface';
 
 @Controller('access')
 export class AccessController {

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

@@ -1,9 +1,8 @@
 import { PrismaService } from '@ghostfolio/api/services/prisma.service';
+import { AccessWithGranteeUser } from '@ghostfolio/common/types';
 import { Injectable } from '@nestjs/common';
 import { Prisma } from '@prisma/client';
 
-import { AccessWithGranteeUser } from './interfaces/access-with-grantee-user.type';
-
 @Injectable()
 export class AccessService {
   public constructor(private prisma: PrismaService) {}

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

@@ -1,7 +1,11 @@
-import { RequestWithUser } from '@ghostfolio/api/app/interfaces/request-with-user.type';
 import { nullifyValuesInObjects } from '@ghostfolio/api/helper/object.helper';
 import { ImpersonationService } from '@ghostfolio/api/services/impersonation.service';
-import { getPermissions, hasPermission, permissions } from '@ghostfolio/helper';
+import {
+  getPermissions,
+  hasPermission,
+  permissions
+} from '@ghostfolio/common/permissions';
+import { RequestWithUser } from '@ghostfolio/common/types';
 import {
   Body,
   Controller,
@@ -17,7 +21,7 @@ import {
 } from '@nestjs/common';
 import { REQUEST } from '@nestjs/core';
 import { AuthGuard } from '@nestjs/passport';
-import { Account as AccountModel, Order } from '@prisma/client';
+import { Account as AccountModel } from '@prisma/client';
 import { StatusCodes, getReasonPhrase } from 'http-status-codes';
 
 import { AccountService } from './account.service';

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

@@ -1,6 +1,11 @@
-import { RequestWithUser } from '@ghostfolio/api/app/interfaces/request-with-user.type';
 import { DataGatheringService } from '@ghostfolio/api/services/data-gathering.service';
-import { getPermissions, hasPermission, permissions } from '@ghostfolio/helper';
+import { AdminData } from '@ghostfolio/common/interfaces';
+import {
+  getPermissions,
+  hasPermission,
+  permissions
+} from '@ghostfolio/common/permissions';
+import { RequestWithUser } from '@ghostfolio/common/types';
 import {
   Controller,
   Get,
@@ -14,7 +19,6 @@ import { AuthGuard } from '@nestjs/passport';
 import { StatusCodes, getReasonPhrase } from 'http-status-codes';
 
 import { AdminService } from './admin.service';
-import { AdminData } from './interfaces/admin-data.interface';
 
 @Controller('admin')
 export class AdminController {

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

@@ -1,10 +1,9 @@
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
 import { PrismaService } from '@ghostfolio/api/services/prisma.service';
+import { AdminData } from '@ghostfolio/common/interfaces';
 import { Injectable } from '@nestjs/common';
 import { Currency } from '@prisma/client';
 
-import { AdminData } from './interfaces/admin-data.interface';
-
 @Injectable()
 export class AdminService {
   public constructor(
@@ -109,7 +108,7 @@ export class AdminService {
         createdAt: true,
         id: true
       },
-      take: 20,
+      take: 30,
       where: {
         NOT: {
           Analytics: null

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

@@ -1,5 +1,5 @@
-import { RequestWithUser } from '@ghostfolio/api/app/interfaces/request-with-user.type';
+import { RequestWithUser } from '@ghostfolio/common/types';
-import { Controller, Inject, Param, Post, UseGuards } from '@nestjs/common';
+import { Controller, Inject, Post, UseGuards } from '@nestjs/common';
 import { REQUEST } from '@nestjs/core';
 import { AuthGuard } from '@nestjs/passport';
 

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

@@ -1,9 +1,6 @@
-import { RequestWithUser } from '@ghostfolio/api/app/interfaces/request-with-user.type';
+import { baseCurrency, benchmarks } from '@ghostfolio/common/config';
-import {
+import { isApiTokenAuthorized } from '@ghostfolio/common/permissions';
-  baseCurrency,
+import { RequestWithUser } from '@ghostfolio/common/types';
-  benchmarks,
-  isApiTokenAuthorized
-} from '@ghostfolio/helper';
 import {
   Body,
   Controller,
@@ -40,7 +37,9 @@ export class ExperimentalController {
       );
     }
 
-    return benchmarks;
+    return benchmarks.map(({ symbol }) => {
+      return symbol;
+    });
   }
 
   @Get('benchmarks/:symbol')

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

@@ -3,11 +3,11 @@ import { DataProviderService } from '@ghostfolio/api/services/data-provider.serv
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
 import { PrismaService } from '@ghostfolio/api/services/prisma.service';
 import { RulesService } from '@ghostfolio/api/services/rules.service';
+import { OrderWithAccount } from '@ghostfolio/common/types';
 import { Injectable } from '@nestjs/common';
 import { Currency, Type } from '@prisma/client';
 import { parseISO } from 'date-fns';
 
-import { OrderWithAccount } from '../order/interfaces/order-with-account.type';
 import { CreateOrderDto } from './create-order.dto';
 import { Data } from './interfaces/data.interface';
 

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

@@ -1,7 +1,7 @@
+import { InfoItem } from '@ghostfolio/common/interfaces';
 import { Controller, Get } from '@nestjs/common';
 
 import { InfoService } from './info.service';
-import { InfoItem } from './interfaces/info-item.interface';
 
 @Controller('info')
 export class InfoController {

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

@@ -1,12 +1,11 @@
 import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
 import { PrismaService } from '@ghostfolio/api/services/prisma.service';
-import { permissions } from '@ghostfolio/helper';
+import { InfoItem } from '@ghostfolio/common/interfaces';
+import { permissions } from '@ghostfolio/common/permissions';
 import { Injectable } from '@nestjs/common';
 import { JwtService } from '@nestjs/jwt';
 import { Currency } from '@prisma/client';
 
-import { InfoItem } from './interfaces/info-item.interface';
-
 @Injectable()
 export class InfoService {
   private static DEMO_USER_ID = '9b112b4d-3b7d-4bad-9bdd-3b0f7b4dac2f';

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

@@ -1,7 +1,11 @@
-import { RequestWithUser } from '@ghostfolio/api/app/interfaces/request-with-user.type';
 import { nullifyValuesInObjects } from '@ghostfolio/api/helper/object.helper';
 import { ImpersonationService } from '@ghostfolio/api/services/impersonation.service';
-import { getPermissions, hasPermission, permissions } from '@ghostfolio/helper';
+import {
+  getPermissions,
+  hasPermission,
+  permissions
+} from '@ghostfolio/common/permissions';
+import { RequestWithUser } from '@ghostfolio/common/types';
 import {
   Body,
   Controller,

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

@@ -1,11 +1,11 @@
 import { DataGatheringService } from '@ghostfolio/api/services/data-gathering.service';
 import { PrismaService } from '@ghostfolio/api/services/prisma.service';
+import { OrderWithAccount } from '@ghostfolio/common/types';
 import { Injectable } from '@nestjs/common';
-import { Order, Prisma } from '@prisma/client';
+import { DataSource, Order, Prisma } from '@prisma/client';
 
 import { CacheService } from '../cache/cache.service';
 import { RedisCacheService } from '../redis-cache/redis-cache.service';
-import { OrderWithAccount } from './interfaces/order-with-account.type';
 
 @Injectable()
 export class OrderService {
@@ -53,6 +53,7 @@ export class OrderService {
     // Gather symbol data of order in the background
     this.dataGatheringService.gatherSymbols([
       {
+        dataSource: data.dataSource,
         date: <Date>data.date,
         symbol: data.symbol
       }
@@ -90,6 +91,7 @@ export class OrderService {
     // Gather symbol data of order in the background
     this.dataGatheringService.gatherSymbols([
       {
+        dataSource: <DataSource>data.dataSource,
         date: <Date>data.date,
         symbol: <string>data.symbol
       }

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

@@ -4,7 +4,19 @@ import {
 } from '@ghostfolio/api/helper/object.helper';
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
 import { ImpersonationService } from '@ghostfolio/api/services/impersonation.service';
-import { getPermissions, hasPermission, permissions } from '@ghostfolio/helper';
+import {
+  PortfolioItem,
+  PortfolioOverview,
+  PortfolioPerformance,
+  PortfolioPosition,
+  PortfolioReport
+} from '@ghostfolio/common/interfaces';
+import {
+  getPermissions,
+  hasPermission,
+  permissions
+} from '@ghostfolio/common/permissions';
+import { RequestWithUser } from '@ghostfolio/common/types';
 import {
   Controller,
   Get,
@@ -21,16 +33,10 @@ import { AuthGuard } from '@nestjs/passport';
 import { Response } from 'express';
 import { StatusCodes, getReasonPhrase } from 'http-status-codes';
 
-import { RequestWithUser } from '../interfaces/request-with-user.type';
-import { PortfolioItem } from './interfaces/portfolio-item.interface';
-import { PortfolioOverview } from './interfaces/portfolio-overview.interface';
-import { PortfolioPerformance } from './interfaces/portfolio-performance.interface';
 import {
   HistoricalDataItem,
   PortfolioPositionDetail
 } from './interfaces/portfolio-position-detail.interface';
-import { PortfolioPosition } from './interfaces/portfolio-position.interface';
-import { PortfolioReport } from './interfaces/portfolio-report.interface';
 import { PortfolioService } from './portfolio.service';
 
 @Controller('portfolio')
@@ -309,18 +315,6 @@ export class PortfolioController {
       impersonationUserId || this.request.user.id
     );
 
-    let report = await portfolio.getReport();
+    return await portfolio.getReport();
-
-    if (
-      impersonationId &&
-      !hasPermission(
-        getPermissions(this.request.user.role),
-        permissions.readForeignPortfolio
-      )
-    ) {
-      // TODO: Filter out absolute numbers
-    }
-
-    return report;
   }
 }

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

@@ -1,12 +1,17 @@
-import { RequestWithUser } from '@ghostfolio/api/app/interfaces/request-with-user.type';
 import { Portfolio } from '@ghostfolio/api/models/portfolio';
 import { DataProviderService } from '@ghostfolio/api/services/data-provider.service';
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
 import { ImpersonationService } from '@ghostfolio/api/services/impersonation.service';
 import { IOrder } from '@ghostfolio/api/services/interfaces/interfaces';
 import { RulesService } from '@ghostfolio/api/services/rules.service';
+import {
+  PortfolioItem,
+  PortfolioOverview
+} from '@ghostfolio/common/interfaces';
+import { DateRange, RequestWithUser } from '@ghostfolio/common/types';
 import { Inject, Injectable } from '@nestjs/common';
 import { REQUEST } from '@nestjs/core';
+import { DataSource } from '@prisma/client';
 import {
   add,
   format,
@@ -26,9 +31,6 @@ import * as roundTo from 'round-to';
 import { OrderService } from '../order/order.service';
 import { RedisCacheService } from '../redis-cache/redis-cache.service';
 import { UserService } from '../user/user.service';
-import { DateRange } from './interfaces/date-range.type';
-import { PortfolioItem } from './interfaces/portfolio-item.interface';
-import { PortfolioOverview } from './interfaces/portfolio-overview.interface';
 import {
   HistoricalDataItem,
   PortfolioPositionDetail
@@ -157,8 +159,8 @@ export class PortfolioService {
         return {
           date: format(parseISO(portfolioItem.date), 'yyyy-MM-dd'),
           grossPerformancePercent: portfolioItem.grossPerformancePercent,
-          marketPrice: portfolioItem.value || null,
+          marketPrice: portfolioItem.value ?? null,
-          value: portfolioItem.value || null
+          value: portfolioItem.value - portfolioItem.investment ?? null
         };
       });
   }
@@ -288,7 +290,7 @@ export class PortfolioService {
 
       if (isEmpty(historicalData)) {
         historicalData = await this.dataProviderService.getHistoricalRaw(
-          [aSymbol],
+          [{ dataSource: DataSource.YAHOO, symbol: aSymbol }],
           portfolio.getMinDate(),
           new Date()
         );

apps/api/src/app/symbol/interfaces/lookup-item.interface.ts

@@ -1,4 +1,7 @@
+import { DataSource } from '@prisma/client';
+
 export interface LookupItem {
+  dataSource: DataSource;
   name: string;
   symbol: string;
 }

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

@@ -1,4 +1,4 @@
-import { RequestWithUser } from '@ghostfolio/api/app/interfaces/request-with-user.type';
+import { RequestWithUser } from '@ghostfolio/common/types';
 import {
   Controller,
   Get,
@@ -28,9 +28,12 @@ export class SymbolController {
    */
   @Get('lookup')
   @UseGuards(AuthGuard('jwt'))
-  public async lookupSymbol(@Query() { query }): Promise<LookupItem[]> {
+  public async lookupSymbol(
+    @Query() { query = '' }
+  ): Promise<{ items: LookupItem[] }> {
     try {
-      return this.symbolService.lookup(query);
+      const encodedQuery = encodeURIComponent(query.toLowerCase());
+      return this.symbolService.lookup(encodedQuery);
     } catch {
       throw new HttpException(
         getReasonPhrase(StatusCodes.INTERNAL_SERVER_ERROR),

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

@@ -1,10 +1,8 @@
-import { DataGatheringService } from '@ghostfolio/api/services/data-gathering.service';
 import { DataProviderService } from '@ghostfolio/api/services/data-provider.service';
 import { GhostfolioScraperApiService } from '@ghostfolio/api/services/data-provider/ghostfolio-scraper-api/ghostfolio-scraper-api.service';
 import { convertFromYahooSymbol } from '@ghostfolio/api/services/data-provider/yahoo-finance/yahoo-finance.service';
 import { Injectable } from '@nestjs/common';
-import { Currency } from '@prisma/client';
+import { Currency, DataSource } from '@prisma/client';
-import * as bent from 'bent';
 
 import { LookupItem } from './interfaces/lookup-item.interface';
 import { SymbolItem } from './interfaces/symbol-item.interface';
@@ -27,62 +25,30 @@ export class SymbolService {
     };
   }
 
-  public async lookup(aQuery = ''): Promise<LookupItem[]> {
+  public async lookup(aQuery: string): Promise<{ items: LookupItem[] }> {
-    const query = aQuery.toLowerCase();
+    const results: { items: LookupItem[] } = { items: [] };
-    const results: LookupItem[] = [];
 
-    if (!query) {
+    if (!aQuery) {
       return results;
     }
 
-    const get = bent(
-      `https://query1.finance.yahoo.com/v1/finance/search?q=${query}&lang=en-US&region=US&quotesCount=8&newsCount=0&enableFuzzyQuery=false&quotesQueryId=tss_match_phrase_query&multiQuoteQueryId=multi_quote_single_token_query&newsQueryId=news_cie_vespa&enableCb=true&enableNavLinks=false&enableEnhancedTrivialQuery=true`,
-      'GET',
-      'json',
-      200
-    );
-
-    // Add custom symbols
-    const scraperConfigurations = await this.ghostfolioScraperApiService.getScraperConfigurations();
-    scraperConfigurations.forEach((scraperConfiguration) => {
-      if (scraperConfiguration.name.toLowerCase().startsWith(query)) {
-        results.push({
-          name: scraperConfiguration.name,
-          symbol: scraperConfiguration.symbol
-        });
-      }
-    });
-
     try {
-      const { quotes } = await get();
+      const { items } = await this.dataProviderService.search(aQuery);
+      results.items = items;
 
-      const searchResult = quotes
+      // Add custom symbols
-        .filter(({ isYahooFinance }) => {
+      const scraperConfigurations = await this.ghostfolioScraperApiService.getScraperConfigurations();
-          return isYahooFinance;
+      scraperConfigurations.forEach((scraperConfiguration) => {
-        })
+        if (scraperConfiguration.name.toLowerCase().startsWith(aQuery)) {
-        .filter(({ quoteType }) => {
+          results.items.push({
-          return (
+            dataSource: DataSource.GHOSTFOLIO,
-            quoteType === 'CRYPTOCURRENCY' ||
+            name: scraperConfiguration.name,
-            quoteType === 'EQUITY' ||
+            symbol: scraperConfiguration.symbol
-            quoteType === 'ETF'
+          });
-          );
+        }
-        })
+      });
-        .filter(({ quoteType, symbol }) => {
-          if (quoteType === 'CRYPTOCURRENCY') {
-            // Only allow cryptocurrencies in USD
-            return symbol.includes('USD');
-          }
 
-          return true;
+      return results;
-        })
-        .map(({ longname, shortname, symbol }) => {
-          return {
-            name: longname || shortname,
-            symbol: convertFromYahooSymbol(symbol)
-          };
-        });
-
-      return results.concat(searchResult);
     } catch (error) {
       console.error(error);
 

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

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

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

@@ -1,5 +1,10 @@
-import { RequestWithUser } from '@ghostfolio/api/app/interfaces/request-with-user.type';
+import { User } from '@ghostfolio/common/interfaces';
-import { getPermissions, hasPermission, permissions } from '@ghostfolio/helper';
+import {
+  getPermissions,
+  hasPermission,
+  permissions
+} from '@ghostfolio/common/permissions';
+import { RequestWithUser } from '@ghostfolio/common/types';
 import {
   Body,
   Controller,
@@ -20,7 +25,6 @@ import { User as UserModel } from '@prisma/client';
 import { StatusCodes, getReasonPhrase } from 'http-status-codes';
 
 import { UserItem } from './interfaces/user-item.interface';
-import { User } from './interfaces/user.interface';
 import { UpdateUserSettingsDto } from './update-user-settings.dto';
 import { UserService } from './user.service';
 
@@ -89,8 +93,9 @@ export class UserController {
     }
 
     return await this.userService.updateUserSettings({
-      currency: data.currency,
+      currency: data.baseCurrency,
-      userId: this.request.user.id
+      userId: this.request.user.id,
+      viewMode: data.viewMode
     });
   }
 }

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

@@ -1,18 +1,13 @@
 import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
 import { PrismaService } from '@ghostfolio/api/services/prisma.service';
-import {
+import { locale } from '@ghostfolio/common/config';
-  getPermissions,
+import { resetHours } from '@ghostfolio/common/helper';
-  locale,
+import { User as IUser, UserWithSettings } from '@ghostfolio/common/interfaces';
-  permissions,
+import { getPermissions, permissions } from '@ghostfolio/common/permissions';
-  resetHours
-} from '@ghostfolio/helper';
 import { Injectable } from '@nestjs/common';
-import { Currency, Prisma, Provider, User } from '@prisma/client';
+import { Currency, Prisma, Provider, User, ViewMode } from '@prisma/client';
 import { add } from 'date-fns';
 
-import { UserWithSettings } from '../interfaces/user-with-settings';
-import { User as IUser } from './interfaces/user.interface';
-
 const crypto = require('crypto');
 
 @Injectable()
@@ -57,8 +52,9 @@ export class UserService {
       accounts: Account,
       permissions: currentPermissions,
       settings: {
-        baseCurrency: Settings?.currency || UserService.DEFAULT_CURRENCY,
+        locale,
-        locale
+        baseCurrency: Settings?.currency ?? UserService.DEFAULT_CURRENCY,
+        viewMode: Settings.viewMode ?? ViewMode.DEFAULT
       },
       subscription: {
         expiresAt: resetHours(add(new Date(), { days: 7 })),
@@ -85,7 +81,8 @@ export class UserService {
       user.Settings = {
         currency: UserService.DEFAULT_CURRENCY,
         updatedAt: new Date(),
-        userId: user?.id
+        userId: user?.id,
+        viewMode: ViewMode.DEFAULT
       };
     }
 
@@ -192,10 +189,12 @@ export class UserService {
 
   public async updateUserSettings({
     currency,
-    userId
+    userId,
+    viewMode
   }: {
-    currency: Currency;
+    currency?: Currency;
     userId: string;
+    viewMode?: ViewMode;
   }) {
     await this.prisma.settings.upsert({
       create: {
@@ -204,10 +203,12 @@ export class UserService {
           connect: {
             id: userId
           }
-        }
+        },
+        viewMode
       },
       update: {
-        currency
+        currency,
+        viewMode
       },
       where: {
         userId: userId

apps/api/src/models/interfaces/portfolio.interface.ts

@@ -1,7 +1,4 @@
-import {
+import { PortfolioItem, Position } from '@ghostfolio/common/interfaces';
-  PortfolioItem,
-  Position
-} from '@ghostfolio/api/app/portfolio/interfaces/portfolio-item.interface';
 
 import { Order } from '../order';
 

apps/api/src/models/interfaces/rule.interface.ts

@@ -1,4 +1,4 @@
-import { PortfolioPosition } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-position.interface';
+import { PortfolioPosition } from '@ghostfolio/common/interfaces';
 
 import { EvaluationResult } from './evaluation-result.interface';
 

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

@@ -1,65 +1,102 @@
-import { baseCurrency, getUtc, getYesterday } from '@ghostfolio/helper';
+import { UNKNOWN_KEY, baseCurrency } from '@ghostfolio/common/config';
-import { Test } from '@nestjs/testing';
+import { getUtc, getYesterday } from '@ghostfolio/common/helper';
-import { AccountType, Currency, DataSource, Role, Type } from '@prisma/client';
+import {
+  AccountType,
+  Currency,
+  DataSource,
+  Role,
+  Type,
+  ViewMode
+} from '@prisma/client';
+import { format } from 'date-fns';
 
-import { ConfigurationService } from '../services/configuration.service';
 import { DataProviderService } from '../services/data-provider.service';
-import { AlphaVantageService } from '../services/data-provider/alpha-vantage/alpha-vantage.service';
-import { GhostfolioScraperApiService } from '../services/data-provider/ghostfolio-scraper-api/ghostfolio-scraper-api.service';
-import { RakutenRapidApiService } from '../services/data-provider/rakuten-rapid-api/rakuten-rapid-api.service';
-import { YahooFinanceService } from '../services/data-provider/yahoo-finance/yahoo-finance.service';
 import { ExchangeRateDataService } from '../services/exchange-rate-data.service';
 import { MarketState } from '../services/interfaces/interfaces';
-import { PrismaService } from '../services/prisma.service';
 import { RulesService } from '../services/rules.service';
 import { Portfolio } from './portfolio';
 
+jest.mock('../services/data-provider.service', () => {
+  return {
+    DataProviderService: jest.fn().mockImplementation(() => {
+      const today = format(new Date(), 'yyyy-MM-dd');
+      const yesterday = format(getYesterday(), 'yyyy-MM-dd');
+
+      return {
+        get: () => {
+          return Promise.resolve({
+            BTCUSD: {
+              currency: Currency.USD,
+              dataSource: DataSource.YAHOO,
+              exchange: UNKNOWN_KEY,
+              marketPrice: 57973.008,
+              marketState: MarketState.open,
+              name: 'Bitcoin USD',
+              type: 'Cryptocurrency'
+            },
+            ETHUSD: {
+              currency: Currency.USD,
+              dataSource: DataSource.YAHOO,
+              exchange: UNKNOWN_KEY,
+              marketPrice: 3915.337,
+              marketState: MarketState.open,
+              name: 'Ethereum USD',
+              type: 'Cryptocurrency'
+            }
+          });
+        },
+        getHistorical: () => {
+          return Promise.resolve({
+            BTCUSD: {
+              [yesterday]: 56710.122,
+              [today]: 57973.008
+            },
+            ETHUSD: {
+              [yesterday]: 3641.984,
+              [today]: 3915.337
+            }
+          });
+        }
+      };
+    })
+  };
+});
+
+jest.mock('../services/exchange-rate-data.service', () => {
+  return {
+    ExchangeRateDataService: jest.fn().mockImplementation(() => {
+      return {
+        initialize: () => Promise.resolve(),
+        toCurrency: (value: number) => value
+      };
+    })
+  };
+});
+
+jest.mock('../services/data-provider.service');
+jest.mock('../services/exchange-rate-data.service');
+jest.mock('../services/rules.service');
+
 const DEFAULT_ACCOUNT_ID = '693a834b-eb89-42c9-ae47-35196c25d269';
 const USER_ID = 'ca6ce867-5d31-495a-bce9-5942bbca9237';
 
 describe('Portfolio', () => {
-  let alphaVantageService: AlphaVantageService;
-  let configurationService: ConfigurationService;
   let dataProviderService: DataProviderService;
   let exchangeRateDataService: ExchangeRateDataService;
-  let ghostfolioScraperApiService: GhostfolioScraperApiService;
   let portfolio: Portfolio;
-  let prismaService: PrismaService;
-  let rakutenRapidApiService: RakutenRapidApiService;
   let rulesService: RulesService;
-  let yahooFinanceService: YahooFinanceService;
 
   beforeAll(async () => {
-    const app = await Test.createTestingModule({
+    dataProviderService = new DataProviderService(
-      imports: [],
+      null,
-      providers: [
+      null,
-        AlphaVantageService,
+      null,
-        ConfigurationService,
+      null,
-        DataProviderService,
+      null,
-        ExchangeRateDataService,
+      null
-        GhostfolioScraperApiService,
-        PrismaService,
-        RakutenRapidApiService,
-        RulesService,
-        YahooFinanceService
-      ]
-    }).compile();
-
-    alphaVantageService = app.get<AlphaVantageService>(AlphaVantageService);
-    configurationService = app.get<ConfigurationService>(ConfigurationService);
-    dataProviderService = app.get<DataProviderService>(DataProviderService);
-    exchangeRateDataService = app.get<ExchangeRateDataService>(
-      ExchangeRateDataService
     );
-    ghostfolioScraperApiService = app.get<GhostfolioScraperApiService>(
+    exchangeRateDataService = new ExchangeRateDataService(null);
-      GhostfolioScraperApiService
+    rulesService = new RulesService();
-    );
-    prismaService = app.get<PrismaService>(PrismaService);
-    rakutenRapidApiService = app.get<RakutenRapidApiService>(
-      RakutenRapidApiService
-    );
-    rulesService = app.get<RulesService>(RulesService);
-    yahooFinanceService = app.get<YahooFinanceService>(YahooFinanceService);
 
     await exchangeRateDataService.initialize();
 
@@ -90,7 +127,8 @@ describe('Portfolio', () => {
       Settings: {
         currency: Currency.CHF,
         updatedAt: new Date(),
-        userId: USER_ID
+        userId: USER_ID,
+        viewMode: ViewMode.DEFAULT
       },
       thirdPartyId: null,
       updatedAt: new Date()
@@ -170,7 +208,7 @@ describe('Portfolio', () => {
       expect(details).toMatchObject({
         BTCUSD: {
           accounts: {
-            Other: {
+            [UNKNOWN_KEY]: {
               /*current: exchangeRateDataService.toCurrency(
                 1 * 49631.24,
                 Currency.USD,
@@ -183,8 +221,10 @@ describe('Portfolio', () => {
               )
             }
           },
+          allocationCurrent: 1,
+          allocationInvestment: 1,
           currency: Currency.USD,
-          exchange: 'Other',
+          exchange: UNKNOWN_KEY,
           grossPerformance: 0,
           grossPerformancePercent: 0,
           investment: exchangeRateDataService.toCurrency(
@@ -192,12 +232,10 @@ describe('Portfolio', () => {
             Currency.USD,
             baseCurrency
           ),
-          // marketPrice: 57973.008,
+          marketPrice: 57973.008,
           marketState: MarketState.open,
           name: 'Bitcoin USD',
           quantity: 1,
-          // shareCurrent: 0.9999999559148652,
-          shareInvestment: 1,
           symbol: 'BTCUSD',
           transactionCount: 1,
           type: 'Cryptocurrency'
@@ -271,7 +309,7 @@ describe('Portfolio', () => {
       expect(details).toMatchObject({
         ETHUSD: {
           accounts: {
-            Other: {
+            [UNKNOWN_KEY]: {
               /*current: exchangeRateDataService.toCurrency(
                 0.2 * 991.49,
                 Currency.USD,
@@ -284,8 +322,10 @@ describe('Portfolio', () => {
               )
             }
           },
+          // allocationCurrent: 1,
+          allocationInvestment: 1,
           currency: Currency.USD,
-          exchange: 'Other',
+          exchange: UNKNOWN_KEY,
           // grossPerformance: 0,
           // grossPerformancePercent: 0,
           investment: exchangeRateDataService.toCurrency(
@@ -293,11 +333,9 @@ describe('Portfolio', () => {
             Currency.USD,
             baseCurrency
           ),
-          // marketPrice: 57973.008,
+          marketPrice: 3915.337,
           name: 'Ethereum USD',
           quantity: 0.2,
-          // shareCurrent: 1,
-          shareInvestment: 1,
           transactionCount: 1,
           symbol: 'ETHUSD',
           type: 'Cryptocurrency'
@@ -326,7 +364,7 @@ describe('Portfolio', () => {
             baseCurrency
           ),
           investmentInOriginalCurrency: 0.2 * 991.49,
-          // marketPrice: 0,
+          // marketPrice: 3915.337,
           quantity: 0.2
         }
       });
@@ -402,7 +440,7 @@ describe('Portfolio', () => {
               baseCurrency
             ),
           investmentInOriginalCurrency: 0.2 * 991.49 + 0.3 * 1050,
-          // marketPrice: 0,
+          // marketPrice: 3641.984,
           quantity: 0.5
         }
       });
@@ -551,8 +589,7 @@ describe('Portfolio', () => {
         }
       ]);
 
-      // TODO: Fix
+      expect(portfolio.getCommittedFunds()).toEqual(
-      /*expect(portfolio.getCommittedFunds()).toEqual(
         exchangeRateDataService.toCurrency(
           0.2 * 991.49,
           Currency.USD,
@@ -568,7 +605,7 @@ describe('Portfolio', () => {
             Currency.USD,
             baseCurrency
           )
-      );*/
+      );
 
       expect(portfolio.getFees()).toEqual(
         exchangeRateDataService.toCurrency(3, Currency.USD, baseCurrency)
@@ -580,12 +617,11 @@ describe('Portfolio', () => {
             (0.2 * 991.49 - 0.1 * 1050 + 0.2 * 1050) / (0.2 - 0.1 + 0.2),
           currency: Currency.USD,
           firstBuyDate: '2018-01-05T00:00:00.000Z',
-          // TODO: Fix
+          investment: exchangeRateDataService.toCurrency(
-          /*investment: exchangeRateDataService.toCurrency(
             0.2 * 991.49 - 0.1 * 1050 + 0.2 * 1050,
             Currency.USD,
             baseCurrency
-          ),*/
+          ),
           investmentInOriginalCurrency: 0.2 * 991.49 - 0.1 * 1050 + 0.2 * 1050,
           // marketPrice: 0,
           quantity: 0.2 - 0.1 + 0.2
@@ -595,8 +631,4 @@ describe('Portfolio', () => {
       expect(portfolio.getSymbols(getYesterday())).toEqual(['ETHUSD']);
     });
   });
-
-  afterAll(async () => {
-    prismaService.$disconnect();
-  });
 });

apps/api/src/models/portfolio.ts

@@ -1,8 +1,14 @@
+import { UNKNOWN_KEY } from '@ghostfolio/common/config';
+import { getToday, getYesterday, resetHours } from '@ghostfolio/common/helper';
 import {
   PortfolioItem,
-  Position
+  PortfolioPerformance,
-} from '@ghostfolio/api/app/portfolio/interfaces/portfolio-item.interface';
+  PortfolioPosition,
-import { getToday, getYesterday, resetHours } from '@ghostfolio/helper';
+  PortfolioReport,
+  Position,
+  UserWithSettings
+} from '@ghostfolio/common/interfaces';
+import { DateRange, OrderWithAccount } from '@ghostfolio/common/types';
 import {
   add,
   format,
@@ -22,18 +28,13 @@ import {
 import { cloneDeep, isEmpty } from 'lodash';
 import * as roundTo from 'round-to';
 
-import { UserWithSettings } from '../app/interfaces/user-with-settings';
-import { OrderWithAccount } from '../app/order/interfaces/order-with-account.type';
-import { DateRange } from '../app/portfolio/interfaces/date-range.type';
-import { PortfolioPerformance } from '../app/portfolio/interfaces/portfolio-performance.interface';
-import { PortfolioPosition } from '../app/portfolio/interfaces/portfolio-position.interface';
-import { PortfolioReport } from '../app/portfolio/interfaces/portfolio-report.interface';
 import { DataProviderService } from '../services/data-provider.service';
 import { ExchangeRateDataService } from '../services/exchange-rate-data.service';
 import { IOrder } from '../services/interfaces/interfaces';
 import { RulesService } from '../services/rules.service';
 import { PortfolioInterface } from './interfaces/portfolio.interface';
 import { Order } from './order';
+import { OrderType } from './order-type';
 import { AccountClusterRiskCurrentInvestment } from './rules/account-cluster-risk/current-investment';
 import { AccountClusterRiskInitialInvestment } from './rules/account-cluster-risk/initial-investment';
 import { AccountClusterRiskSingleAccount } from './rules/account-cluster-risk/single-account';
@@ -227,15 +228,17 @@ export class Portfolio implements PortfolioInterface {
           originalValueOfSymbol *= -1;
         }
 
-        if (accounts[orderOfSymbol.getAccount()?.name || 'Other']?.current) {
+        if (
+          accounts[orderOfSymbol.getAccount()?.name || UNKNOWN_KEY]?.current
+        ) {
           accounts[
-            orderOfSymbol.getAccount()?.name || 'Other'
+            orderOfSymbol.getAccount()?.name || UNKNOWN_KEY
           ].current += currentValueOfSymbol;
           accounts[
-            orderOfSymbol.getAccount()?.name || 'Other'
+            orderOfSymbol.getAccount()?.name || UNKNOWN_KEY
           ].original += originalValueOfSymbol;
         } else {
-          accounts[orderOfSymbol.getAccount()?.name || 'Other'] = {
+          accounts[orderOfSymbol.getAccount()?.name || UNKNOWN_KEY] = {
             current: currentValueOfSymbol,
             original: originalValueOfSymbol
           };
@@ -278,6 +281,14 @@ export class Portfolio implements PortfolioInterface {
         ...data[symbol],
         accounts,
         symbol,
+        allocationCurrent:
+          this.exchangeRateDataService.toCurrency(
+            portfolioItem.positions[symbol].quantity * now,
+            data[symbol]?.currency,
+            this.user.Settings.currency
+          ) / value,
+        allocationInvestment:
+          portfolioItem.positions[symbol].investment / investment,
         grossPerformance: roundTo(
           portfolioItemsNow.positions[symbol].quantity * (now - before),
           2
@@ -285,14 +296,6 @@ export class Portfolio implements PortfolioInterface {
         grossPerformancePercent: roundTo((now - before) / before, 4),
         investment: portfolioItem.positions[symbol].investment,
         quantity: portfolioItem.positions[symbol].quantity,
-        shareCurrent:
-          this.exchangeRateDataService.toCurrency(
-            portfolioItem.positions[symbol].quantity * now,
-            data[symbol]?.currency,
-            this.user.Settings.currency
-          ) / value,
-        shareInvestment:
-          portfolioItem.positions[symbol].investment / investment,
         transactionCount: portfolioItem.positions[symbol].transactionCount
       };
     });
@@ -399,10 +402,10 @@ export class Portfolio implements PortfolioInterface {
         accountClusterRisk: await this.rulesService.evaluate(
           this,
           [
-            new AccountClusterRiskCurrentInvestment(
+            new AccountClusterRiskInitialInvestment(
               this.exchangeRateDataService
             ),
-            new AccountClusterRiskInitialInvestment(
+            new AccountClusterRiskCurrentInvestment(
               this.exchangeRateDataService
             ),
             new AccountClusterRiskSingleAccount(this.exchangeRateDataService)
@@ -530,12 +533,12 @@ export class Portfolio implements PortfolioInterface {
       this.orders.push(
         new Order({
           account: order.Account,
-          currency: <any>order.currency,
+          currency: order.currency,
           date: order.date.toISOString(),
           fee: order.fee,
           quantity: order.quantity,
           symbol: order.symbol,
-          type: <any>order.type,
+          type: <OrderType>order.type,
           unitPrice: order.unitPrice
         })
       );

apps/api/src/models/rule.ts

@@ -1,7 +1,7 @@
-import { groupBy } from '@ghostfolio/helper';
+import { groupBy } from '@ghostfolio/common/helper';
+import { PortfolioPosition } from '@ghostfolio/common/interfaces';
 import { Currency } from '@prisma/client';
 
-import { PortfolioPosition } from '../app/portfolio/interfaces/portfolio-position.interface';
 import { ExchangeRateDataService } from '../services/exchange-rate-data.service';
 import { EvaluationResult } from './interfaces/evaluation-result.interface';
 import { RuleInterface } from './interfaces/rule.interface';

apps/api/src/models/rules/account-cluster-risk/current-investment.ts

@@ -1,5 +1,5 @@
-import { PortfolioPosition } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-position.interface';
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
+import { PortfolioPosition } from '@ghostfolio/common/interfaces';
 
 import { Rule } from '../../rule';
 

apps/api/src/models/rules/account-cluster-risk/initial-investment.ts

@@ -1,4 +1,4 @@
-import { PortfolioPosition } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-position.interface';
+import { PortfolioPosition } from '@ghostfolio/common/interfaces';
 import { ExchangeRateDataService } from 'apps/api/src/services/exchange-rate-data.service';
 
 import { Rule } from '../../rule';

apps/api/src/models/rules/account-cluster-risk/single-account.ts

@@ -1,4 +1,4 @@
-import { PortfolioPosition } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-position.interface';
+import { PortfolioPosition } from '@ghostfolio/common/interfaces';
 import { ExchangeRateDataService } from 'apps/api/src/services/exchange-rate-data.service';
 
 import { Rule } from '../../rule';

apps/api/src/models/rules/currency-cluster-risk/base-currency-current-investment.ts

@@ -1,5 +1,5 @@
-import { PortfolioPosition } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-position.interface';
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
+import { PortfolioPosition } from '@ghostfolio/common/interfaces';
 
 import { Rule } from '../../rule';
 

apps/api/src/models/rules/currency-cluster-risk/base-currency-initial-investment.ts

@@ -1,4 +1,4 @@
-import { PortfolioPosition } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-position.interface';
+import { PortfolioPosition } from '@ghostfolio/common/interfaces';
 import { ExchangeRateDataService } from 'apps/api/src/services/exchange-rate-data.service';
 
 import { Rule } from '../../rule';

apps/api/src/models/rules/currency-cluster-risk/current-investment.ts

@@ -1,4 +1,4 @@
-import { PortfolioPosition } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-position.interface';
+import { PortfolioPosition } from '@ghostfolio/common/interfaces';
 import { ExchangeRateDataService } from 'apps/api/src/services/exchange-rate-data.service';
 
 import { Rule } from '../../rule';

apps/api/src/models/rules/currency-cluster-risk/initial-investment.ts

@@ -1,4 +1,4 @@
-import { PortfolioPosition } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-position.interface';
+import { PortfolioPosition } from '@ghostfolio/common/interfaces';
 import { ExchangeRateDataService } from 'apps/api/src/services/exchange-rate-data.service';
 
 import { Rule } from '../../rule';

apps/api/src/models/rules/fees/fee-ratio-initial-investment.ts

@@ -1,4 +1,4 @@
-import { PortfolioPosition } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-position.interface';
+import { PortfolioPosition } from '@ghostfolio/common/interfaces';
 import { ExchangeRateDataService } from 'apps/api/src/services/exchange-rate-data.service';
 
 import { Rule } from '../../rule';

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

@@ -1,5 +1,6 @@
 import { Injectable } from '@nestjs/common';
-import { bool, cleanEnv, num, port, str } from 'envalid';
+import { DataSource } from '@prisma/client';
+import { bool, cleanEnv, json, num, port, str } from 'envalid';
 
 import { Environment } from './interfaces/environment.interface';
 
@@ -12,6 +13,7 @@ export class ConfigurationService {
       ACCESS_TOKEN_SALT: str(),
       ALPHA_VANTAGE_API_KEY: str({ default: '' }),
       CACHE_TTL: num({ default: 1 }),
+      DATA_SOURCES: json({ default: JSON.stringify([DataSource.YAHOO]) }),
       ENABLE_FEATURE_CUSTOM_SYMBOLS: bool({ default: false }),
       ENABLE_FEATURE_FEAR_AND_GREED_INDEX: bool({ default: false }),
       ENABLE_FEATURE_SOCIAL_LOGIN: bool({ default: false }),

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

@@ -1,11 +1,11 @@
+import { benchmarks, currencyPairs } from '@ghostfolio/common/config';
 import {
-  benchmarks,
-  currencyPairs,
   getUtc,
   isGhostfolioScraperApiSymbol,
   resetHours
-} from '@ghostfolio/helper';
+} from '@ghostfolio/common/helper';
 import { Injectable } from '@nestjs/common';
+import { DataSource } from '@prisma/client';
 import {
   differenceInHours,
   format,
@@ -19,6 +19,7 @@ import {
 import { ConfigurationService } from './configuration.service';
 import { DataProviderService } from './data-provider.service';
 import { GhostfolioScraperApiService } from './data-provider/ghostfolio-scraper-api/ghostfolio-scraper-api.service';
+import { IDataGatheringItem } from './interfaces/interfaces';
 import { PrismaService } from './prisma.service';
 
 @Injectable()
@@ -116,15 +117,13 @@ export class DataGatheringService {
     }
   }
 
-  public async gatherSymbols(
+  public async gatherSymbols(aSymbolsWithStartDate: IDataGatheringItem[]) {
-    aSymbolsWithStartDate: { date: Date; symbol: string }[]
-  ) {
     let hasError = false;
 
-    for (const { date, symbol } of aSymbolsWithStartDate) {
+    for (const { dataSource, date, symbol } of aSymbolsWithStartDate) {
       try {
         const historicalData = await this.dataProviderService.getHistoricalRaw(
-          [symbol],
+          [{ dataSource, symbol }],
           date,
           new Date()
         );
@@ -185,20 +184,24 @@ export class DataGatheringService {
     }
   }
 
-  public async getCustomSymbolsToGather(startDate?: Date) {
+  public async getCustomSymbolsToGather(
+    startDate?: Date
+  ): Promise<IDataGatheringItem[]> {
     const scraperConfigurations = await this.ghostfolioScraperApi.getScraperConfigurations();
 
     return scraperConfigurations.map((scraperConfiguration) => {
       return {
+        dataSource: DataSource.GHOSTFOLIO,
         date: startDate,
         symbol: scraperConfiguration.symbol
       };
     });
   }
 
-  private getBenchmarksToGather(startDate: Date) {
+  private getBenchmarksToGather(startDate: Date): IDataGatheringItem[] {
-    const benchmarksToGather = benchmarks.map((symbol) => {
+    const benchmarksToGather = benchmarks.map(({ dataSource, symbol }) => {
       return {
+        dataSource,
         symbol,
         date: startDate
       };
@@ -206,6 +209,7 @@ export class DataGatheringService {
 
     if (this.configurationService.get('ENABLE_FEATURE_FEAR_AND_GREED_INDEX')) {
       benchmarksToGather.push({
+        dataSource: DataSource.RAKUTEN,
         date: startDate,
         symbol: 'GF.FEAR_AND_GREED_INDEX'
       });
@@ -214,16 +218,16 @@ export class DataGatheringService {
     return benchmarksToGather;
   }
 
-  private async getSymbols7D(): Promise<{ date: Date; symbol: string }[]> {
+  private async getSymbols7D(): Promise<IDataGatheringItem[]> {
     const startDate = subDays(resetHours(new Date()), 7);
 
     const distinctOrders = await this.prisma.order.findMany({
       distinct: ['symbol'],
       orderBy: [{ symbol: 'asc' }],
-      select: { symbol: true }
+      select: { dataSource: true, symbol: true }
     });
 
-    const distinctOrdersWithDate = distinctOrders
+    const distinctOrdersWithDate: IDataGatheringItem[] = distinctOrders
       .filter((distinctOrder) => {
         return !isGhostfolioScraperApiSymbol(distinctOrder.symbol);
       })
@@ -234,12 +238,15 @@ export class DataGatheringService {
         };
       });
 
-    const currencyPairsToGather = currencyPairs.map((symbol) => {
+    const currencyPairsToGather = currencyPairs.map(
-      return {
+      ({ dataSource, symbol }) => {
-        symbol,
+        return {
-        date: startDate
+          dataSource,
-      };
+          symbol,
-    });
+          date: startDate
+        };
+      }
+    );
 
     const customSymbolsToGather = await this.getCustomSymbolsToGather(
       startDate
@@ -253,24 +260,27 @@ export class DataGatheringService {
     ];
   }
 
-  private async getSymbolsMax() {
+  private async getSymbolsMax(): Promise<IDataGatheringItem[]> {
     const startDate = new Date(getUtc('2015-01-01'));
 
     const customSymbolsToGather = await this.getCustomSymbolsToGather(
       startDate
     );
 
-    const currencyPairsToGather = currencyPairs.map((symbol) => {
+    const currencyPairsToGather = currencyPairs.map(
-      return {
+      ({ dataSource, symbol }) => {
-        symbol,
+        return {
-        date: startDate
+          dataSource,
-      };
+          symbol,
-    });
+          date: startDate
+        };
+      }
+    );
 
     const distinctOrders = await this.prisma.order.findMany({
       distinct: ['symbol'],
       orderBy: [{ date: 'asc' }],
-      select: { date: true, symbol: true }
+      select: { dataSource: true, date: true, symbol: true }
     });
 
     return [

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

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

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

@@ -1,9 +1,11 @@
+import { LookupItem } from '@ghostfolio/api/app/symbol/interfaces/lookup-item.interface';
+import { Granularity } from '@ghostfolio/common/types';
 import { Injectable } from '@nestjs/common';
+import { DataSource } from '@prisma/client';
 import { isAfter, isBefore, parse } from 'date-fns';
 
 import { ConfigurationService } from '../../configuration.service';
 import { DataProviderInterface } from '../../interfaces/data-provider.interface';
-import { Granularity } from '../../interfaces/granularity.type';
 import {
   IDataProviderHistoricalResponse,
   IDataProviderResponse
@@ -22,6 +24,10 @@ export class AlphaVantageService implements DataProviderInterface {
     });
   }
 
+  public canHandle(symbol: string) {
+    return !!this.configurationService.get('ALPHA_VANTAGE_API_KEY');
+  }
+
   public async get(
     aSymbols: string[]
   ): Promise<{ [symbol: string]: IDataProviderResponse }> {
@@ -77,7 +83,17 @@ export class AlphaVantageService implements DataProviderInterface {
     }
   }
 
-  public search(aSymbol: string) {
+  public async search(aSymbol: string): Promise<{ items: LookupItem[] }> {
-    return this.alphaVantage.data.search(aSymbol);
+    const result = await this.alphaVantage.data.search(aSymbol);
+
+    return {
+      items: result?.bestMatches?.map((bestMatch) => {
+        return {
+          dataSource: DataSource.ALPHA_VANTAGE,
+          name: bestMatch['2. name'],
+          symbol: bestMatch['1. symbol']
+        };
+      })
+    };
   }
 }

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

@@ -1,4 +1,8 @@
-import { getYesterday } from '@ghostfolio/helper';
+import {
+  getYesterday,
+  isGhostfolioScraperApiSymbol
+} from '@ghostfolio/common/helper';
+import { Granularity } from '@ghostfolio/common/types';
 import { Injectable } from '@nestjs/common';
 import { DataSource } from '@prisma/client';
 import * as bent from 'bent';
@@ -6,7 +10,6 @@ import * as cheerio from 'cheerio';
 import { format } from 'date-fns';
 
 import { DataProviderInterface } from '../../interfaces/data-provider.interface';
-import { Granularity } from '../../interfaces/granularity.type';
 import {
   IDataProviderHistoricalResponse,
   IDataProviderResponse,
@@ -21,6 +24,10 @@ export class GhostfolioScraperApiService implements DataProviderInterface {
 
   public constructor(private prisma: PrismaService) {}
 
+  public canHandle(symbol: string) {
+    return isGhostfolioScraperApiSymbol(symbol);
+  }
+
   public async get(
     aSymbols: string[]
   ): Promise<{ [symbol: string]: IDataProviderResponse }> {
@@ -117,6 +124,10 @@ export class GhostfolioScraperApiService implements DataProviderInterface {
     return [];
   }
 
+  public async search(aSymbol: string) {
+    return { items: [] };
+  }
+
   private extractNumberFromString(aString: string): number {
     try {
       const [numberString] = aString.match(

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

@@ -1,4 +1,9 @@
-import { getToday, getYesterday } from '@ghostfolio/helper';
+import {
+  getToday,
+  getYesterday,
+  isRakutenRapidApiSymbol
+} from '@ghostfolio/common/helper';
+import { Granularity } from '@ghostfolio/common/types';
 import { Injectable } from '@nestjs/common';
 import { DataSource } from '@prisma/client';
 import * as bent from 'bent';
@@ -6,7 +11,6 @@ import { format, subMonths, subWeeks, subYears } from 'date-fns';
 
 import { ConfigurationService } from '../../configuration.service';
 import { DataProviderInterface } from '../../interfaces/data-provider.interface';
-import { Granularity } from '../../interfaces/granularity.type';
 import {
   IDataProviderHistoricalResponse,
   IDataProviderResponse,
@@ -24,6 +28,13 @@ export class RakutenRapidApiService implements DataProviderInterface {
     private readonly configurationService: ConfigurationService
   ) {}
 
+  public canHandle(symbol: string) {
+    return (
+      isRakutenRapidApiSymbol(symbol) &&
+      !!this.configurationService.get('RAKUTEN_RAPID_API_KEY')
+    );
+  }
+
   public async get(
     aSymbols: string[]
   ): Promise<{ [symbol: string]: IDataProviderResponse }> {
@@ -117,6 +128,14 @@ export class RakutenRapidApiService implements DataProviderInterface {
     return {};
   }
 
+  public async search(aSymbol: string) {
+    return { items: [] };
+  }
+
+  public setPrisma(aPrismaService: PrismaService) {
+    this.prisma = aPrismaService;
+  }
+
   private async getFearAndGreedIndex(): Promise<{
     now: { value: number; valueText: string };
     previousClose: { value: number; valueText: string };
@@ -147,8 +166,4 @@ export class RakutenRapidApiService implements DataProviderInterface {
       return undefined;
     }
   }
-
-  public setPrisma(aPrismaService: PrismaService) {
-    this.prisma = aPrismaService;
-  }
 }

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

@@ -1,24 +0,0 @@
-/*
-  import { Test } from '@nestjs/testing';
-
-  import { YahooFinanceService } from './yahoo-finance.service';
-
-  describe('AppService', () => {
-    let service: YahooFinanceService;
-
-    beforeAll(async () => {
-      const app = await Test.createTestingModule({
-        imports: [],
-        providers: [YahooFinanceService]
-      }).compile();
-
-      service = app.get<YahooFinanceService>(YahooFinanceService);
-    });
-
-    describe('get', () => {
-      it('should return data for USDCHF', () => {
-        expect(service.get(['USDCHF'])).toEqual('{}');
-      });
-    });
-  });
-*/

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

@@ -1,11 +1,14 @@
-import { isCrypto, isCurrency, parseCurrency } from '@ghostfolio/helper';
+import { LookupItem } from '@ghostfolio/api/app/symbol/interfaces/lookup-item.interface';
+import { UNKNOWN_KEY } from '@ghostfolio/common/config';
+import { isCrypto, isCurrency, parseCurrency } from '@ghostfolio/common/helper';
+import { Granularity } from '@ghostfolio/common/types';
 import { Injectable } from '@nestjs/common';
 import { DataSource } from '@prisma/client';
+import * as bent from 'bent';
 import { format } from 'date-fns';
 import * as yahooFinance from 'yahoo-finance';
 
 import { DataProviderInterface } from '../../interfaces/data-provider.interface';
-import { Granularity } from '../../interfaces/granularity.type';
 import {
   IDataProviderHistoricalResponse,
   IDataProviderResponse,
@@ -21,8 +24,14 @@ import {
 
 @Injectable()
 export class YahooFinanceService implements DataProviderInterface {
+  private yahooFinanceHostname = 'https://query1.finance.yahoo.com';
+
   public constructor() {}
 
+  public canHandle(symbol: string) {
+    return true;
+  }
+
   public async get(
     aSymbols: string[]
   ): Promise<{ [symbol: string]: IDataProviderResponse }> {
@@ -135,6 +144,49 @@ export class YahooFinanceService implements DataProviderInterface {
     }
   }
 
+  public async search(aSymbol: string): Promise<{ items: LookupItem[] }> {
+    let items = [];
+
+    try {
+      const get = bent(
+        `${this.yahooFinanceHostname}/v1/finance/search?q=${aSymbol}&lang=en-US&region=US&quotesCount=8&newsCount=0&enableFuzzyQuery=false&quotesQueryId=tss_match_phrase_query&multiQuoteQueryId=multi_quote_single_token_query&newsQueryId=news_cie_vespa&enableCb=true&enableNavLinks=false&enableEnhancedTrivialQuery=true`,
+        'GET',
+        'json',
+        200
+      );
+
+      const result = await get();
+      items = result.quotes
+        .filter((quote) => {
+          return quote.isYahooFinance;
+        })
+        .filter(({ quoteType }) => {
+          return (
+            quoteType === 'CRYPTOCURRENCY' ||
+            quoteType === 'EQUITY' ||
+            quoteType === 'ETF'
+          );
+        })
+        .filter(({ quoteType, symbol }) => {
+          if (quoteType === 'CRYPTOCURRENCY') {
+            // Only allow cryptocurrencies in USD
+            return symbol.includes('USD');
+          }
+
+          return true;
+        })
+        .map(({ longname, shortname, symbol }) => {
+          return {
+            dataSource: DataSource.YAHOO,
+            name: longname || shortname,
+            symbol: convertFromYahooSymbol(symbol)
+          };
+        });
+    } catch {}
+
+    return { items };
+  }
+
   /**
    * Converts a symbol to a Yahoo symbol
    *
@@ -170,7 +222,7 @@ export class YahooFinanceService implements DataProviderInterface {
 
   private parseExchange(aString: string): string {
     if (aString?.toLowerCase() === 'ccc') {
-      return 'Other';
+      return UNKNOWN_KEY;
     }
 
     return aString;
@@ -200,7 +252,7 @@ export class YahooFinanceService implements DataProviderInterface {
       return Industry.Software;
     }
 
-    return Industry.Other;
+    return Industry.Unknown;
   }
 
   private parseSector(aString: string): Sector {
@@ -222,7 +274,7 @@ export class YahooFinanceService implements DataProviderInterface {
       return Sector.Technology;
     }
 
-    return Sector.Other;
+    return Sector.Unknown;
   }
 
   private parseType(aString: string): Type {
@@ -234,7 +286,7 @@ export class YahooFinanceService implements DataProviderInterface {
       return Type.Stock;
     }
 
-    return Type.Other;
+    return Type.Unknown;
   }
 }
 

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

@@ -1,4 +1,4 @@
-import { getYesterday } from '@ghostfolio/helper';
+import { getYesterday } from '@ghostfolio/common/helper';
 import { Injectable } from '@nestjs/common';
 import { Currency } from '@prisma/client';
 import { format } from 'date-fns';

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

@@ -1,10 +1,14 @@
-import { Granularity } from './granularity.type';
+import { LookupItem } from '@ghostfolio/api/app/symbol/interfaces/lookup-item.interface';
+import { Granularity } from '@ghostfolio/common/types';
+
 import {
   IDataProviderHistoricalResponse,
   IDataProviderResponse
 } from './interfaces';
 
 export interface DataProviderInterface {
+  canHandle(symbol: string): boolean;
+
   get(aSymbols: string[]): Promise<{ [symbol: string]: IDataProviderResponse }>;
 
   getHistorical(
@@ -15,4 +19,6 @@ export interface DataProviderInterface {
   ): Promise<{
     [symbol: string]: { [date: string]: IDataProviderHistoricalResponse };
   }>;
+
+  search(aSymbol: string): Promise<{ items: LookupItem[] }>;
 }

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

@@ -4,6 +4,7 @@ export interface Environment extends CleanedEnvAccessors {
   ACCESS_TOKEN_SALT: string;
   ALPHA_VANTAGE_API_KEY: string;
   CACHE_TTL: number;
+  DATA_SOURCES: string | string[]; // string is not correct, error in envalid?
   ENABLE_FEATURE_CUSTOM_SYMBOLS: boolean;
   ENABLE_FEATURE_FEAR_AND_GREED_INDEX: boolean;
   ENABLE_FEATURE_SOCIAL_LOGIN: boolean;

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

@@ -1,4 +1,5 @@
-import { Account, Currency, DataSource, Platform } from '@prisma/client';
+import { UNKNOWN_KEY } from '@ghostfolio/common/config';
+import { Account, Currency, DataSource } from '@prisma/client';
 
 import { OrderType } from '../../models/order-type';
 
@@ -7,9 +8,9 @@ export const Industry = {
   Biotechnology: 'Biotechnology',
   Food: 'Food',
   Internet: 'Internet',
-  Other: 'Other',
   Pharmaceutical: 'Pharmaceutical',
-  Software: 'Software'
+  Software: 'Software',
+  Unknown: UNKNOWN_KEY
 };
 
 export const MarketState = {
@@ -21,15 +22,15 @@ export const MarketState = {
 export const Sector = {
   Consumer: 'Consumer',
   Healthcare: 'Healthcare',
-  Other: 'Other',
+  Technology: 'Technology',
-  Technology: 'Technology'
+  Unknown: UNKNOWN_KEY
 };
 
 export const Type = {
   Cryptocurrency: 'Cryptocurrency',
   ETF: 'ETF',
-  Other: 'Other',
+  Stock: 'Stock',
-  Stock: 'Stock'
+  Unknown: UNKNOWN_KEY
 };
 
 export interface IOrder {
@@ -64,6 +65,12 @@ export interface IDataProviderResponse {
   url?: string;
 }
 
+export interface IDataGatheringItem {
+  dataSource: DataSource;
+  date?: Date;
+  symbol: string;
+}
+
 export type Industry = typeof Industry[keyof typeof Industry];
 
 export type MarketState = typeof MarketState[keyof typeof MarketState];

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

@@ -1,7 +1,7 @@
 import {
   DEFAULT_DATE_FORMAT,
   DEFAULT_DATE_FORMAT_MONTH_YEAR
-} from '@ghostfolio/helper';
+} from '@ghostfolio/common/config';
 
 export const DateFormats = {
   display: {

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

@@ -71,6 +71,11 @@ const routes: Routes = [
     loadChildren: () =>
       import('./pages/login/login-page.module').then((m) => m.LoginPageModule)
   },
+  {
+    path: 'tools',
+    loadChildren: () =>
+      import('./pages/tools/tools-page.module').then((m) => m.ToolsPageModule)
+  },
   {
     path: 'transactions',
     loadChildren: () =>
@@ -78,11 +83,16 @@ const routes: Routes = [
         (m) => m.TransactionsPageModule
       )
   },
+  {
+    path: 'zen',
+    loadChildren: () =>
+      import('./pages/zen/zen-page.module').then((m) => m.ZenPageModule)
+  },
   {
     // wildcard, if requested url doesn't match any paths for routes defined
     // earlier
     path: '**',
-    redirectTo: '/home',
+    redirectTo: 'home',
     pathMatch: 'full'
   }
 ];

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

@@ -4,6 +4,7 @@
     [currentRoute]="currentRoute"
     [info]="info"
     [user]="user"
+    (signOut)="onSignOut()"
   ></gf-header>
 </header>
 
@@ -25,7 +26,10 @@
   <router-outlet></router-outlet>
 </main>
 
-<footer class="footer d-flex justify-content-center position-absolute w-100">
+<footer
+  *ngIf="currentRoute === 'start' || deviceType !== 'mobile'"
+  class="footer d-flex justify-content-center position-absolute w-100"
+>
   <div class="container text-center">
     <div>
       © {{ currentYear }} <a href="https://ghostfol.io">Ghostfolio</a>

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

@@ -5,22 +5,19 @@ import {
   OnDestroy,
   OnInit
 } from '@angular/core';
-import { NavigationEnd, Router } from '@angular/router';
+import { NavigationEnd, PRIMARY_OUTLET, Router } from '@angular/router';
-import { InfoItem } from '@ghostfolio/api/app/info/interfaces/info-item.interface';
+import { primaryColorHex, secondaryColorHex } from '@ghostfolio/common/config';
-import { User } from '@ghostfolio/api/app/user/interfaces/user.interface';
+import { InfoItem, User } from '@ghostfolio/common/interfaces';
-import {
+import { hasPermission, permissions } from '@ghostfolio/common/permissions';
-  hasPermission,
-  permissions,
-  primaryColorHex,
-  secondaryColorHex
-} from '@ghostfolio/helper';
 import { MaterialCssVarsService } from 'angular-material-css-vars';
+import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
 
 import { environment } from '../environments/environment';
 import { DataService } from './services/data.service';
 import { TokenStorageService } from './services/token-storage.service';
+import { UserService } from './services/user/user.service';
 
 @Component({
   selector: 'gf-root',
@@ -32,25 +29,29 @@ export class AppComponent implements OnDestroy, OnInit {
   public canCreateAccount: boolean;
   public currentRoute: string;
   public currentYear = new Date().getFullYear();
+  public deviceType: string;
   public info: InfoItem;
-  public isLoggedIn = false;
   public user: User;
   public version = environment.version;
 
   private unsubscribeSubject = new Subject<void>();
 
   public constructor(
-    private cd: ChangeDetectorRef,
+    private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
+    private deviceService: DeviceDetectorService,
     private materialCssVarsService: MaterialCssVarsService,
     private router: Router,
-    private tokenStorageService: TokenStorageService
+    private tokenStorageService: TokenStorageService,
+    private userService: UserService
   ) {
     this.initializeTheme();
     this.user = undefined;
   }
 
   public ngOnInit() {
+    this.deviceType = this.deviceService.getDeviceInfo().deviceType;
+
     this.dataService.fetchInfo().subscribe((info) => {
       this.info = info;
     });
@@ -58,32 +59,48 @@ export class AppComponent implements OnDestroy, OnInit {
     this.router.events
       .pipe(filter((event) => event instanceof NavigationEnd))
       .subscribe(() => {
-        this.currentRoute = this.router.url.toString().substring(1);
+        const urlTree = this.router.parseUrl(this.router.url);
+        const urlSegmentGroup = urlTree.root.children[PRIMARY_OUTLET];
+        const urlSegments = urlSegmentGroup.segments;
+        this.currentRoute = urlSegments[0].path;
       });
 
-    this.tokenStorageService
+    this.userService.stateChanged
-      .onChangeHasToken()
       .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(() => {
+      .subscribe((state) => {
-        this.isLoggedIn = !!this.tokenStorageService.getToken();
+        if (state?.user) {
+          this.user = state.user;
 
-        if (this.isLoggedIn) {
+          this.canCreateAccount = hasPermission(
-          this.dataService.fetchUser().subscribe((user) => {
+            this.user.permissions,
-            this.user = user;
+            permissions.createUserAccount
-
+          );
-            this.canCreateAccount = hasPermission(
+        } else if (!this.tokenStorageService.getToken()) {
-              this.user.permissions,
+          // User has not been logged in
-              permissions.createUserAccount
-            );
-
-            this.cd.markForCheck();
-          });
-        } else {
           this.user = null;
         }
+
+        this.changeDetectorRef.markForCheck();
       });
   }
 
+  public onCreateAccount() {
+    this.tokenStorageService.signOut();
+    window.location.reload();
+  }
+
+  public onSignOut() {
+    this.tokenStorageService.signOut();
+    this.userService.remove();
+
+    window.location.reload();
+  }
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+
   private initializeTheme() {
     this.materialCssVarsService.setDarkTheme(
       window.matchMedia('(prefers-color-scheme: dark)').matches
@@ -96,14 +113,4 @@ export class AppComponent implements OnDestroy, OnInit {
     this.materialCssVarsService.setPrimaryColor(primaryColorHex);
     this.materialCssVarsService.setAccentColor(secondaryColorHex);
   }
-
-  public onCreateAccount() {
-    this.tokenStorageService.signOut();
-    window.location.reload();
-  }
-
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
 }

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

@@ -22,7 +22,7 @@ import { AppComponent } from './app.component';
 import { GfHeaderModule } from './components/header/header.module';
 import { authInterceptorProviders } from './core/auth.interceptor';
 import { httpResponseInterceptorProviders } from './core/http-response.interceptor';
-import { LanguageManager } from './core/language-manager.service';
+import { LanguageService } from './core/language.service';
 
 @NgModule({
   declarations: [AppComponent],
@@ -46,11 +46,11 @@ import { LanguageManager } from './core/language-manager.service';
   providers: [
     authInterceptorProviders,
     httpResponseInterceptorProviders,
-    LanguageManager,
+    LanguageService,
     {
       provide: DateAdapter,
       useClass: CustomDateAdapter,
-      deps: [LanguageManager, MAT_DATE_LOCALE, Platform]
+      deps: [LanguageService, MAT_DATE_LOCALE, Platform]
     },
     { provide: MAT_DATE_FORMATS, useValue: DateFormats }
   ],

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

@@ -6,7 +6,7 @@ import {
   OnInit
 } from '@angular/core';
 import { MatTableDataSource } from '@angular/material/table';
-import { Access } from '@ghostfolio/api/app/access/interfaces/access.interface';
+import { Access } from '@ghostfolio/common/interfaces';
 
 @Component({
   selector: 'gf-access-table',

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

@@ -1,24 +1,13 @@
-<table
+<table class="gf-table w-100" mat-table [dataSource]="dataSource">
-  class="gf-table w-100"
-  matSort
-  matSortActive="account"
-  matSortDirection="desc"
-  mat-table
-  [dataSource]="dataSource"
->
   <ng-container matColumnDef="account">
-    <th *matHeaderCellDef class="px-1" i18n mat-header-cell mat-sort-header>
+    <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Name</th>
-      Name
-    </th>
     <td *matCellDef="let element" class="px-1" mat-cell>
       {{ element.name }}
     </td>
   </ng-container>
 
   <ng-container matColumnDef="platform">
-    <th *matHeaderCellDef class="px-1" i18n mat-header-cell mat-sort-header>
+    <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Platform</th>
-      Platform
-    </th>
     <td *matCellDef="let element" class="px-1" mat-cell>
       <div class="d-flex">
         <gf-symbol-icon
@@ -60,7 +49,7 @@
   </ng-container>
 
   <ng-container matColumnDef="transactions">
-    <th *matHeaderCellDef i18n mat-header-cell mat-sort-header>Transactions</th>
+    <th *matHeaderCellDef i18n mat-header-cell>Transactions</th>
     <td *matCellDef="let element" mat-cell>
       {{ element.Order?.length }}
     </td>

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

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

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

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

apps/client/src/app/components/fear-and-greed-index/fear-and-greed-index.component.ts

@@ -5,7 +5,7 @@ import {
   OnChanges,
   OnInit
 } from '@angular/core';
-import { resolveFearAndGreedIndex } from '@ghostfolio/helper';
+import { resolveFearAndGreedIndex } from '@ghostfolio/common/helper';
 
 @Component({
   selector: 'gf-fear-and-greed-index',

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

@@ -8,31 +8,32 @@
       class="d-none d-sm-block"
       i18n
       mat-flat-button
-      [color]="currentRoute?.startsWith('home') ? 'primary' : null"
+      [color]="
+        currentRoute === 'home' || currentRoute === 'zen' ? 'primary' : null
+      "
       [routerLink]="['/']"
       >Overview</a
     >
     <a
+      *ngIf="user?.settings?.viewMode === 'DEFAULT'"
       class="d-none d-sm-block mx-1"
       i18n
       mat-flat-button
-      [color]="currentRoute?.startsWith('analysis') ? 'primary' : null"
+      [color]="
-      [routerLink]="['/analysis']"
+        currentRoute === 'analysis' ||
-      >Analysis</a
+        currentRoute === 'report' ||
+        currentRoute === 'tools'
+          ? 'primary'
+          : null
+      "
+      [routerLink]="['/tools']"
+      >Tools</a
     >
     <a
       class="d-none d-sm-block mx-1"
       i18n
       mat-flat-button
-      [color]="currentRoute?.startsWith('report') ? 'primary' : null"
+      [color]="currentRoute === 'transactions' ? 'primary' : null"
-      [routerLink]="['/report']"
-      >X-ray</a
-    >
-    <a
-      class="d-none d-sm-block mx-1"
-      i18n
-      mat-flat-button
-      [color]="currentRoute?.startsWith('transactions') ? 'primary' : null"
       [routerLink]="['/transactions']"
       >Transactions</a
     >
@@ -40,7 +41,7 @@
       class="d-none d-sm-block mx-1"
       i18n
       mat-flat-button
-      [color]="currentRoute?.startsWith('accounts') ? 'primary' : null"
+      [color]="currentRoute === 'accounts' ? 'primary' : null"
       [routerLink]="['/accounts']"
       >Accounts</a
     >
@@ -49,7 +50,7 @@
       class="d-none d-sm-block mx-1"
       i18n
       mat-flat-button
-      [color]="currentRoute?.startsWith('admin') ? 'primary' : null"
+      [color]="currentRoute === 'admin' ? 'primary' : null"
       [routerLink]="['/admin']"
       >Admin Control</a
     >
@@ -57,7 +58,7 @@
       class="d-none d-sm-block mx-1"
       i18n
       mat-flat-button
-      [color]="currentRoute?.startsWith('resources') ? 'primary' : null"
+      [color]="currentRoute === 'resources' ? 'primary' : null"
       [routerLink]="['/resources']"
       >Resources</a
     >
@@ -66,7 +67,7 @@
       class="d-none d-sm-block mx-1"
       i18n
       mat-flat-button
-      [color]="currentRoute?.startsWith('pricing') ? 'primary' : null"
+      [color]="currentRoute === 'pricing' ? 'primary' : null"
       [routerLink]="['/pricing']"
       >Pricing</a
     >
@@ -74,7 +75,7 @@
       class="d-none d-sm-block mx-1"
       i18n
       mat-flat-button
-      [color]="currentRoute?.startsWith('about') ? 'primary' : null"
+      [color]="currentRoute === 'about' ? 'primary' : null"
       [routerLink]="['/about']"
       >About</a
     >
@@ -138,24 +139,21 @@
         class="d-block d-sm-none"
         i18n
         mat-menu-item
-        [ngClass]="{ 'font-weight-bold': currentRoute?.startsWith('analysis') }"
+        [ngClass]="{
-        [routerLink]="['/analysis']"
+          'font-weight-bold':
-        >Analysis</a
+            currentRoute === 'analysis' ||
-      >
+            currentRoute === 'report' ||
-      <a
+            currentRoute === 'tools'
-        class="d-block d-sm-none"
+        }"
-        i18n
+        [routerLink]="['/tools']"
-        mat-menu-item
+        >Tools</a
-        [ngClass]="{ 'font-weight-bold': currentRoute?.startsWith('report') }"
-        [routerLink]="['/report']"
-        >X-ray</a
       >
       <a
         class="d-block d-sm-none"
         i18n
         mat-menu-item
         [ngClass]="{
-          'font-weight-bold': currentRoute?.startsWith('transactions')
+          'font-weight-bold': currentRoute === 'transactions'
         }"
         [routerLink]="['/transactions']"
         >Transactions</a
@@ -164,7 +162,7 @@
         class="d-block d-sm-none"
         i18n
         mat-menu-item
-        [ngClass]="{ 'font-weight-bold': currentRoute?.startsWith('accounts') }"
+        [ngClass]="{ 'font-weight-bold': currentRoute === 'accounts' }"
         [routerLink]="['/accounts']"
         >Accounts</a
       >
@@ -172,16 +170,16 @@
         class="align-items-center d-flex"
         i18n
         mat-menu-item
-        [ngClass]="{ 'font-weight-bold': currentRoute?.startsWith('account') }"
+        [ngClass]="{ 'font-weight-bold': currentRoute === 'account' }"
         [routerLink]="['/account']"
-        >Ghostfolio Account</a
+        >My Ghostfolio</a
       >
       <a
         *ngIf="hasPermissionToAccessAdminControl"
         class="d-block d-sm-none"
         i18n
         mat-menu-item
-        [ngClass]="{ 'font-weight-bold': currentRoute?.startsWith('admin') }"
+        [ngClass]="{ 'font-weight-bold': currentRoute === 'admin' }"
         [routerLink]="['/admin']"
         >Admin Control</a
       >
@@ -191,7 +189,7 @@
         i18n
         mat-menu-item
         [ngClass]="{
-          'font-weight-bold': currentRoute?.startsWith('resources')
+          'font-weight-bold': currentRoute === 'resources'
         }"
         [routerLink]="['/resources']"
         >Resources</a
@@ -201,7 +199,7 @@
         class="d-block d-sm-none"
         i18n
         mat-menu-item
-        [ngClass]="{ 'font-weight-bold': currentRoute?.startsWith('pricing') }"
+        [ngClass]="{ 'font-weight-bold': currentRoute === 'pricing' }"
         [routerLink]="['/pricing']"
         >Pricing</a
       >
@@ -209,7 +207,7 @@
         class="d-block d-sm-none"
         i18n
         mat-menu-item
-        [ngClass]="{ 'font-weight-bold': currentRoute?.startsWith('about') }"
+        [ngClass]="{ 'font-weight-bold': currentRoute === 'about' }"
         [routerLink]="['/about']"
         >About Ghostfolio</a
       >
@@ -227,11 +225,19 @@
       <gf-logo></gf-logo>
     </a>
     <span class="spacer"></span>
+    <a
+      *ngIf="hasPermissionForSubscription"
+      i18n
+      mat-flat-button
+      [color]="currentRoute === 'pricing' ? 'primary' : null"
+      [routerLink]="['/pricing']"
+      >Pricing</a
+    >
     <a
       class="d-none d-sm-block mx-1"
       i18n
       mat-flat-button
-      [color]="currentRoute?.startsWith('about') ? 'primary' : null"
+      [color]="currentRoute === 'about' ? 'primary' : null"
       [routerLink]="['/about']"
       >About</a
     >

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

@@ -1,18 +1,19 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  EventEmitter,
   Input,
-  OnChanges
+  OnChanges,
+  Output
 } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { Router } from '@angular/router';
-import { InfoItem } from '@ghostfolio/api/app/info/interfaces/info-item.interface';
-import { User } from '@ghostfolio/api/app/user/interfaces/user.interface';
 import { LoginWithAccessTokenDialog } from '@ghostfolio/client/pages/login/login-with-access-token-dialog/login-with-access-token-dialog.component';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
 import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service';
-import { hasPermission, permissions } from '@ghostfolio/helper';
+import { InfoItem, User } from '@ghostfolio/common/interfaces';
+import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { EMPTY, Subject } from 'rxjs';
 import { catchError, takeUntil } from 'rxjs/operators';
 
@@ -27,6 +28,8 @@ export class HeaderComponent implements OnChanges {
   @Input() info: InfoItem;
   @Input() user: User;
 
+  @Output() signOut = new EventEmitter<void>();
+
   public hasPermissionForSocialLogin: boolean;
   public hasPermissionForSubscription: boolean;
   public hasPermissionToAccessAdminControl: boolean;
@@ -76,8 +79,7 @@ export class HeaderComponent implements OnChanges {
   }
 
   public onSignOut() {
-    this.tokenStorageService.signOut();
+    this.signOut.next();
-    window.location.reload();
   }
 
   public openLoginDialog(): void {

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

@@ -9,8 +9,8 @@ import {
   OnInit,
   ViewChild
 } from '@angular/core';
-import { PortfolioItem } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-item.interface';
+import { primaryColorRgb } from '@ghostfolio/common/config';
-import { primaryColorRgb } from '@ghostfolio/helper';
+import { PortfolioItem } from '@ghostfolio/common/interfaces';
 import {
   LineController,
   LineElement,
@@ -36,10 +36,10 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy, OnInit {
 
   public constructor() {
     Chart.register(
+      LinearScale,
       LineController,
       LineElement,
       PointElement,
-      LinearScale,
       TimeScale
     );
   }
@@ -95,7 +95,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy, OnInit {
             responsive: true,
             scales: {
               x: {
-                display: false,
+                display: true,
                 grid: {
                   display: false
                 },

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

@@ -9,7 +9,8 @@ import {
   OnInit,
   ViewChild
 } from '@angular/core';
-import { primaryColorRgb, secondaryColorRgb } from '@ghostfolio/helper';
+import { primaryColorRgb, secondaryColorRgb } from '@ghostfolio/common/config';
+import { getBackgroundColor } from '@ghostfolio/common/helper';
 import {
   Chart,
   Filler,
@@ -62,6 +63,10 @@ export class LineChartComponent implements OnChanges, OnDestroy, OnInit {
     }
   }
 
+  public ngOnDestroy() {
+    this.chart?.destroy();
+  }
+
   private initialize() {
     this.isLoading = true;
     const benchmarkPrices = [];
@@ -76,7 +81,7 @@ export class LineChartComponent implements OnChanges, OnDestroy, OnInit {
 
     const canvas = document.getElementById('chartCanvas');
 
-    var gradient = this.chartCanvas?.nativeElement
+    const gradient = this.chartCanvas?.nativeElement
       ?.getContext('2d')
       .createLinearGradient(
         0,
@@ -88,14 +93,7 @@ export class LineChartComponent implements OnChanges, OnDestroy, OnInit {
       0,
       `rgba(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b}, 0.01)`
     );
-    gradient.addColorStop(
+    gradient.addColorStop(1, getBackgroundColor());
-      1,
-      getComputedStyle(document.documentElement).getPropertyValue(
-        window.matchMedia('(prefers-color-scheme: dark)').matches
-          ? '--dark-background'
-          : '--light-background'
-      )
-    );
 
     const data = {
       labels,
@@ -181,8 +179,4 @@ export class LineChartComponent implements OnChanges, OnDestroy, OnInit {
 
     this.isLoading = false;
   }
-
-  public ngOnDestroy() {
-    this.chart?.destroy();
-  }
 }

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

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

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

@@ -5,7 +5,7 @@ import {
   OnChanges,
   OnInit
 } from '@angular/core';
-import { PortfolioOverview } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-overview.interface';
+import { PortfolioOverview } from '@ghostfolio/common/interfaces';
 import { Currency } from '@prisma/client';
 
 @Component({

apps/client/src/app/components/portfolio-performance-summary/portfolio-performance-summary.component.ts

@@ -7,7 +7,7 @@ import {
   OnInit,
   ViewChild
 } from '@angular/core';
-import { PortfolioPerformance } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-performance.interface';
+import { PortfolioPerformance } from '@ghostfolio/common/interfaces';
 import { Currency } from '@prisma/client';
 import { CountUp } from 'countup.js';
 import { isNumber } from 'lodash';

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

@@ -4,7 +4,7 @@ import {
   Input,
   OnInit
 } from '@angular/core';
-import { PortfolioPerformance } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-performance.interface';
+import { PortfolioPerformance } from '@ghostfolio/common/interfaces';
 import { Currency } from '@prisma/client';
 
 @Component({

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

@@ -7,7 +7,7 @@ import {
   OnChanges,
   OnInit
 } from '@angular/core';
-import { PortfolioItem } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-item.interface';
+import { PortfolioItem } from '@ghostfolio/common/interfaces';
 import { endOfDay, parseISO, startOfDay } from 'date-fns';
 
 @Component({

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

@@ -7,7 +7,9 @@ import {
   OnInit,
   ViewChild
 } from '@angular/core';
-import { PortfolioPosition } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-position.interface';
+import { UNKNOWN_KEY } from '@ghostfolio/common/config';
+import { getCssVariable, getTextColor } from '@ghostfolio/common/helper';
+import { PortfolioPosition } from '@ghostfolio/common/interfaces';
 import { Currency } from '@prisma/client';
 import { Tooltip } from 'chart.js';
 import { LinearScale } from 'chart.js';
@@ -38,7 +40,11 @@ export class PortfolioProportionChartComponent
 
   private colorMap: {
     [symbol: string]: string;
-  } = {};
+  } = {
+    [UNKNOWN_KEY]: `rgba(${getTextColor()}, ${getCssVariable(
+      '--palette-foreground-divider-alpha'
+    )})`
+  };
 
   public constructor() {
     Chart.register(ArcElement, DoughnutController, LinearScale, Tooltip);
@@ -74,10 +80,10 @@ export class PortfolioProportionChartComponent
           };
         }
       } else {
-        if (chartData['Other']) {
+        if (chartData[UNKNOWN_KEY]) {
-          chartData['Other'].value += this.positions[symbol].value;
+          chartData[UNKNOWN_KEY].value += this.positions[symbol].value;
         } else {
-          chartData['Other'] = {
+          chartData[UNKNOWN_KEY] = {
             value: this.positions[symbol].value
           };
         }
@@ -134,7 +140,8 @@ export class PortfolioProportionChartComponent
               tooltip: {
                 callbacks: {
                   label: (context) => {
-                    const label = context.label;
+                    const label =
+                      context.label === UNKNOWN_KEY ? 'Other' : context.label;
 
                     if (this.isInPercent) {
                       const value = 100 * <number>context.raw;

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

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

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

@@ -35,7 +35,9 @@
         <div class="h6 m-0 text-truncate">{{ position?.name }}</div>
         <div class="d-flex">
           <span>{{ position?.symbol | gfSymbol }}</span>
-          <span *ngIf="position?.exchange" class="ml-2 text-muted"
+          <span
+            *ngIf="position?.exchange && position?.exchange !== unknownKey"
+            class="ml-2 text-muted"
             >({{ position.exchange }})</span
           >
         </div>

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

@@ -7,8 +7,9 @@ import {
 } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
-import { PortfolioPosition } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-position.interface';
+import { UNKNOWN_KEY } from '@ghostfolio/common/config';
-import { Subject, Subscription } from 'rxjs';
+import { PortfolioPosition } from '@ghostfolio/common/interfaces';
+import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 import { PositionDetailDialog } from './position-detail-dialog/position-detail-dialog.component';
@@ -27,7 +28,7 @@ export class PositionComponent implements OnDestroy, OnInit {
   @Input() position: PortfolioPosition;
   @Input() range: string;
 
-  public routeQueryParams: Subscription;
+  public unknownKey = UNKNOWN_KEY;
 
   private unsubscribeSubject = new Subject<void>();
 
@@ -36,7 +37,7 @@ export class PositionComponent implements OnDestroy, OnInit {
     private route: ActivatedRoute,
     private router: Router
   ) {
-    this.routeQueryParams = route.queryParams
+    route.queryParams
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((params) => {
         if (

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

@@ -1,7 +1,7 @@
 <table
   class="gf-table w-100"
   matSort
-  matSortActive="shareCurrent"
+  matSortActive="allocationCurrent"
   matSortDirection="desc"
   mat-table
   [dataSource]="dataSource"
@@ -36,7 +36,7 @@
     </td>
   </ng-container>
 
-  <ng-container matColumnDef="shareInvestment">
+  <ng-container matColumnDef="allocationInvestment">
     <th
       *matHeaderCellDef
       class="justify-content-end px-1"
@@ -44,20 +44,20 @@
       mat-header-cell
       mat-sort-header
     >
-      Initial Share
+      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.shareInvestment"
+          [value]="isLoading ? undefined : element.allocationInvestment"
         ></gf-value>
       </div>
     </td>
   </ng-container>
 
-  <ng-container matColumnDef="shareCurrent">
+  <ng-container matColumnDef="allocationCurrent">
     <th
       *matHeaderCellDef
       class="justify-content-end px-1"
@@ -65,14 +65,14 @@
       mat-header-cell
       mat-sort-header
     >
-      Current Share
+      Current Allocation
     </th>
     <td *matCellDef="let element" class="px-1" mat-cell>
       <div class="d-flex justify-content-end">
         <gf-value
           [isPercent]="true"
           [locale]="locale"
-          [value]="isLoading ? undefined : element.shareCurrent"
+          [value]="isLoading ? undefined : element.allocationCurrent"
         ></gf-value>
       </div>
     </td>

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

@@ -13,7 +13,7 @@ import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
-import { PortfolioPosition } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-position.interface';
+import { PortfolioPosition } from '@ghostfolio/common/interfaces';
 import { Order as OrderModel } from '@prisma/client';
 import { Subject, Subscription } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -73,8 +73,8 @@ export class PositionsTableComponent implements OnChanges, OnInit {
     this.displayedColumns = [
       'symbol',
       'performance',
-      'shareInvestment',
+      'allocationInvestment',
-      'shareCurrent'
+      'allocationCurrent'
     ];
 
     this.isLoading = true;

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

@@ -5,8 +5,8 @@ import {
   OnChanges,
   OnInit
 } from '@angular/core';
-import { PortfolioPosition } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-position.interface';
 import { MarketState } from '@ghostfolio/api/services/interfaces/interfaces';
+import { PortfolioPosition } from '@ghostfolio/common/interfaces/portfolio-position.interface';
 
 @Component({
   selector: 'gf-positions',

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

@@ -4,7 +4,7 @@ import {
   Input,
   OnInit
 } from '@angular/core';
-import { PortfolioReportRule } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-report.interface';
+import { PortfolioReportRule } from '@ghostfolio/common/interfaces';
 
 @Component({
   selector: 'gf-rule',

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

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { PortfolioReportRule } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-report.interface';
+import { PortfolioReportRule } from '@ghostfolio/common/interfaces';
 
 @Component({
   selector: 'gf-rules',

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

@@ -8,7 +8,7 @@
       [removable]="true"
       (removed)="removeKeyword(searchKeyword)"
     >
-      {{ searchKeyword }}
+      {{ searchKeyword | gfSymbol }}
       <ion-icon class="ml-2" matPrefix name="close-outline"></ion-icon>
     </mat-chip>
     <input
@@ -26,11 +26,8 @@
     #autocomplete="matAutocomplete"
     (optionSelected)="keywordSelected($event)"
   >
-    <mat-option
+    <mat-option *ngFor="let filter of filters | async" [value]="filter">
-      *ngFor="let transaction of filteredTransactions | async"
+      {{ filter | gfSymbol }}
-      [value]="transaction"
-    >
-      {{ transaction }}
     </mat-option>
   </mat-autocomplete>
 </mat-form-field>
@@ -178,9 +175,7 @@
   </ng-container>
 
   <ng-container matColumnDef="account">
-    <th *matHeaderCellDef class="px-1" i18n mat-header-cell mat-sort-header>
+    <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Account</th>
-      Account
-    </th>
     <td *matCellDef="let element" class="px-1" mat-cell>
       <div class="d-flex">
         <gf-symbol-icon

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

@@ -21,8 +21,9 @@ import { MatDialog } from '@angular/material/dialog';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
-import { OrderWithAccount } from '@ghostfolio/api/app/order/interfaces/order-with-account.type';
+import { DEFAULT_DATE_FORMAT } from '@ghostfolio/common/config';
-import { DEFAULT_DATE_FORMAT } from '@ghostfolio/helper';
+import { OrderWithAccount } from '@ghostfolio/common/types';
+import { format } from 'date-fns';
 import { BehaviorSubject, Observable, Subject, Subscription } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -56,10 +57,8 @@ export class TransactionsTableComponent
   public dataSource: MatTableDataSource<OrderWithAccount> = new MatTableDataSource();
   public defaultDateFormat = DEFAULT_DATE_FORMAT;
   public displayedColumns = [];
-  public filteredTransactions$: Subject<string[]> = new BehaviorSubject([]);
+  public filters$: Subject<string[]> = new BehaviorSubject([]);
-  public filteredTransactions: Observable<
+  public filters: Observable<string[]> = this.filters$.asObservable();
-    string[]
-  > = this.filteredTransactions$.asObservable();
   public isLoading = true;
   public placeholder = '';
   public routeQueryParams: Subscription;
@@ -67,7 +66,7 @@ export class TransactionsTableComponent
   public searchKeywords: string[] = [];
   public separatorKeysCodes: number[] = [ENTER, COMMA];
 
-  private allFilteredTransactions: string[];
+  private allFilters: string[];
   private unsubscribeSubject = new Subject<void>();
 
   public constructor(
@@ -89,13 +88,13 @@ export class TransactionsTableComponent
     this.searchControl.valueChanges.subscribe((keyword) => {
       if (keyword) {
         const filterValue = keyword.toLowerCase();
-        this.filteredTransactions$.next(
+        this.filters$.next(
-          this.allFilteredTransactions.filter(
+          this.allFilters.filter(
             (filter) => filter.toLowerCase().indexOf(filterValue) === 0
           )
         );
       } else {
-        this.filteredTransactions$.next(this.allFilteredTransactions);
+        this.filters$.next(this.allFilters);
       }
     });
   }
@@ -238,13 +237,13 @@ export class TransactionsTableComponent
     this.placeholder =
       lowercaseSearchKeywords.length <= 0 ? SEARCH_PLACEHOLDER : '';
 
-    this.allFilteredTransactions = this.getSearchableFieldValues(
+    this.allFilters = this.getSearchableFieldValues(this.transactions).filter(
-      this.transactions
+      (item) => {
-    ).filter((item) => {
+        return !lowercaseSearchKeywords.includes(item.trim().toLowerCase());
-      return !lowercaseSearchKeywords.includes(item.trim().toLowerCase());
+      }
-    });
+    );
 
-    this.filteredTransactions$.next(this.allFilteredTransactions);
+    this.filters$.next(this.allFilters);
   }
 
   private getSearchableFieldValues(transactions: OrderWithAccount[]): string[] {
@@ -258,7 +257,21 @@ export class TransactionsTableComponent
       .filter((item) => {
         return item !== undefined;
       })
-      .sort();
+      .sort((a, b) => {
+        const aFirstChar = a.charAt(0);
+        const bFirstChar = b.charAt(0);
+        const isANumber = aFirstChar >= '0' && aFirstChar <= '9';
+        const isBNumber = bFirstChar >= '0' && bFirstChar <= '9';
+
+        // Sort priority: text, followed by numbers
+        if (isANumber && !isBNumber) {
+          return 1;
+        } else if (!isANumber && isBNumber) {
+          return -1;
+        } else {
+          return a.toLowerCase() < b.toLowerCase() ? -1 : 1;
+        }
+      });
   }
 
   private getFilterableValues(
@@ -270,6 +283,7 @@ export class TransactionsTableComponent
     fieldValues.add(transaction.type);
     fieldValues.add(transaction.Account?.name);
     fieldValues.add(transaction.Account?.Platform?.name);
+    fieldValues.add(format(transaction.date, 'yyyy'));
 
     return [...fieldValues].filter((item) => {
       return item !== undefined;

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

@@ -5,7 +5,7 @@ import {
   OnChanges,
   OnInit
 } from '@angular/core';
-import { DEFAULT_DATE_FORMAT } from '@ghostfolio/helper';
+import { DEFAULT_DATE_FORMAT } from '@ghostfolio/common/config';
 import { format, isDate } from 'date-fns';
 import { isNumber } from 'lodash';
 

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

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

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

@@ -1,8 +1,4 @@
-import {
+import { HTTP_INTERCEPTORS, HttpEvent } from '@angular/common/http';
-  HTTP_INTERCEPTORS,
-  HttpErrorResponse,
-  HttpEvent
-} from '@angular/common/http';
 import {
   HttpHandler,
   HttpInterceptor,
@@ -11,7 +7,6 @@ import {
 import { Injectable } from '@angular/core';
 import { Router } from '@angular/router';
 import { Observable } from 'rxjs';
-import { tap } from 'rxjs/operators';
 
 import { ImpersonationStorageService } from '../services/impersonation-storage.service';
 import { TokenStorageService } from '../services/token-storage.service';

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

@@ -79,7 +79,6 @@ export class HttpResponseInterceptor implements HttpInterceptor {
           }
         } else if (error.status === StatusCodes.UNAUTHORIZED) {
           this.tokenStorageService.signOut();
-          this.router.navigate(['start']);
         }
 
         return throwError('');

apps/client/src/app/core/language-manager.service.ts

@@ -1,126 +0,0 @@
-import { Injectable } from '@angular/core';
-import * as deDateFnsLocale from 'date-fns/locale/de/index';
-import * as frDateFnsLocale from 'date-fns/locale/fr/index';
-import { BehaviorSubject } from 'rxjs';
-
-// TODO: Rename to language service
-
-/**
- * Service that distributes onLanguageChanged events
- */
-@Injectable()
-export class LanguageManager {
-  private static readonly AVALABLE_LANGUAGES = ['de', 'fr'];
-  private static readonly LANGUAGE_LABELS = {
-    de: 'Deutsch',
-    fr: 'Français'
-  };
-  private currentLanguage: string;
-  private changeLoadLanguageStateSubject = new BehaviorSubject(false);
-
-  /**
-   * @constructor
-   */
-  public constructor() {} // private translate: TranslateService // private dataLoaderManager: DataLoaderManager,
-
-  /**
-   * Emits an event that the language has changed
-   */
-  public changeLanguage(aLanguage: string) {
-    if (aLanguage && aLanguage !== this.currentLanguage) {
-      this.currentLanguage = aLanguage;
-
-      this.changeLoadLanguageStateSubject.next(true);
-
-      // this.translate.use(this.currentLanguage);
-
-      /*this.dataLoaderManager.changeLanguage(this.currentLanguage).then(() => {
-        // Emit an event that loading has finished
-        this.changeLoadLanguageStateSubject.next(false);
-      });*/
-    }
-  }
-
-  /**
-   * Returns a list of available languages for admin
-   */
-  public getAvailableLanguages() {
-    return LanguageManager.AVALABLE_LANGUAGES;
-  }
-
-  /**
-   * Get the current language
-   */
-  public getCurrentLanguage(aReturnFullLocale = false) {
-    // Check if the full locale is needed (e.g. for angular pipes like
-    // '| percentage')
-    if (aReturnFullLocale) {
-      if (this.currentLanguage) {
-        if (this.currentLanguage.match(/^de/)) {
-          return 'de-CH';
-        }
-
-        if (this.currentLanguage.match(/^fr/)) {
-          return 'fr-CH';
-        }
-      }
-
-      // Default
-      return 'de-CH';
-    }
-
-    if (this.currentLanguage) {
-      return this.currentLanguage;
-    }
-
-    // Default
-    return 'de';
-  }
-
-  /**
-   * Gets the locale module of date-fns in the current language
-   */
-  public getDateFnsLocale() {
-    let currentDateFnsLocale = null;
-
-    switch (this.getCurrentLanguage()) {
-      case 'de':
-        currentDateFnsLocale = deDateFnsLocale;
-        break;
-      case 'fr':
-        currentDateFnsLocale = frDateFnsLocale;
-        break;
-      default:
-        currentDateFnsLocale = deDateFnsLocale;
-    }
-
-    return currentDateFnsLocale;
-  }
-
-  /**
-   * Returns the default language
-   */
-  public getDefaultLanguage() {
-    // return globals.defaultLanguage;
-    return 'de';
-  }
-
-  /**
-   * Returns a pretty label of the given language
-   */
-  public getLanguageLabel(aLanguage: string) {
-    if (LanguageManager.LANGUAGE_LABELS[aLanguage]) {
-      return LanguageManager.LANGUAGE_LABELS[aLanguage];
-    }
-
-    return aLanguage;
-  }
-
-  /**
-   * Returns an observable that emits true when loading is in progress and false
-   * when loading is finished
-   */
-  public onChangeLoadLanguageState() {
-    return this.changeLoadLanguageStateSubject.asObservable();
-  }
-}

apps/client/src/app/core/language.service.ts

@@ -0,0 +1,6 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class LanguageService {
+  public constructor() {}
+}

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

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

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

@@ -1,8 +1,7 @@
 import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
-import { User } from '@ghostfolio/api/app/user/interfaces/user.interface';
+import { UserService } from '@ghostfolio/client/services/user/user.service';
-import { DataService } from '@ghostfolio/client/services/data.service';
+import { baseCurrency } from '@ghostfolio/common/config';
-import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service';
+import { User } from '@ghostfolio/common/interfaces';
-import { baseCurrency } from '@ghostfolio/helper';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -26,28 +25,23 @@ export class AboutPageComponent implements OnInit {
    * @constructor
    */
   public constructor(
-    private cd: ChangeDetectorRef,
+    private changeDetectorRef: ChangeDetectorRef,
-    private dataService: DataService,
+    private userService: UserService
-    private tokenStorageService: TokenStorageService
   ) {}
 
   /**
    * Initializes the controller
    */
   public ngOnInit() {
-    this.isLoggedIn = !!this.tokenStorageService.getToken();
+    this.userService.stateChanged
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((state) => {
+        if (state?.user) {
+          this.user = state.user;
 
-    if (this.isLoggedIn)
+          this.changeDetectorRef.markForCheck();
-      this.tokenStorageService
+        }
-        .onChangeHasToken()
+      });
-        .pipe(takeUntil(this.unsubscribeSubject))
-        .subscribe(() => {
-          this.dataService.fetchUser().subscribe((user) => {
-            this.user = user;
-
-            this.cd.markForCheck();
-          });
-        });
   }
 
   public ngOnDestroy() {

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

@@ -5,15 +5,14 @@
       <mat-card class="mb-3">
         <mat-card-content>
           <p>
-            <strong>Ghostfolio</strong> ({{ version }}) is open source software
+            <strong>Ghostfolio</strong> is open source software which empowers
-            which empowers busy folks to have a sharp look of their financial
+            busy folks to have a sharp look of their financial assets and to
-            assets and to make solid, data-driven investment decisions by
+            make solid, data-driven investment decisions by evaluating automated
-            evaluating automated static portfolio analysis rules. The project
+            static portfolio analysis rules. The project has been initiated by
-            has been initiated by
             <a href="https://dotsilver.ch">Thomas Kaul</a>.
             <ng-container *ngIf="lastPublish">
-              This instance has been last published on {{ lastPublish
+              This instance is running Ghostfolio {{ version }} and has been
-              }}.</ng-container
+              last published on {{ lastPublish }}.</ng-container
             >
           </p>
           <p>

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

@@ -1,13 +1,9 @@
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
-import { Access } from '@ghostfolio/api/app/access/interfaces/access.interface';
-import { User } from '@ghostfolio/api/app/user/interfaces/user.interface';
 import { DataService } from '@ghostfolio/client/services/data.service';
-import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service';
+import { UserService } from '@ghostfolio/client/services/user/user.service';
-import {
+import { DEFAULT_DATE_FORMAT } from '@ghostfolio/common/config';
-  DEFAULT_DATE_FORMAT,
+import { Access, User } from '@ghostfolio/common/interfaces';
-  hasPermission,
+import { hasPermission, permissions } from '@ghostfolio/common/permissions';
-  permissions
-} from '@ghostfolio/helper';
 import { Currency } from '@prisma/client';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -23,6 +19,7 @@ export class AccountPageComponent implements OnDestroy, OnInit {
   public currencies: Currency[] = [];
   public defaultDateFormat = DEFAULT_DATE_FORMAT;
   public hasPermissionForSubscription: boolean;
+  public hasPermissionToUpdateUserSettings: boolean;
   public user: User;
 
   private unsubscribeSubject = new Subject<void>();
@@ -31,9 +28,9 @@ export class AccountPageComponent implements OnDestroy, OnInit {
    * @constructor
    */
   public constructor(
-    private cd: ChangeDetectorRef,
+    private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
-    private tokenStorageService: TokenStorageService
+    private userService: UserService
   ) {
     this.dataService
       .fetchInfo()
@@ -47,15 +44,19 @@ export class AccountPageComponent implements OnDestroy, OnInit {
         );
       });
 
-    this.tokenStorageService
+    this.userService.stateChanged
-      .onChangeHasToken()
       .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(() => {
+      .subscribe((state) => {
-        this.dataService.fetchUser().subscribe((user) => {
+        if (state?.user) {
-          this.user = user;
+          this.user = state.user;
 
-          this.cd.markForCheck();
+          this.hasPermissionToUpdateUserSettings = hasPermission(
-        });
+            this.user.permissions,
+            permissions.updateUserSettings
+          );
+
+          this.changeDetectorRef.markForCheck();
+        }
       });
   }
 
@@ -66,16 +67,26 @@ export class AccountPageComponent implements OnDestroy, OnInit {
     this.update();
   }
 
-  public onChangeBaseCurrency({ value: currency }: { value: Currency }) {
+  public onChangeUserSettings(aKey: string, aValue: string) {
+    const settings = { ...this.user.settings, [aKey]: aValue };
+
     this.dataService
-      .putUserSettings({ currency })
+      .putUserSettings({
+        baseCurrency: settings?.baseCurrency,
+        viewMode: settings?.viewMode
+      })
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(() => {
-        this.dataService.fetchUser().subscribe((user) => {
+        this.userService.remove();
-          this.user = user;
 
-          this.cd.markForCheck();
+        this.userService
-        });
+          .get()
+          .pipe(takeUntil(this.unsubscribeSubject))
+          .subscribe((user) => {
+            this.user = user;
+
+            this.changeDetectorRef.markForCheck();
+          });
       });
   }
 
@@ -91,7 +102,7 @@ export class AccountPageComponent implements OnDestroy, OnInit {
       .subscribe((response) => {
         this.accesses = response;
 
-        this.cd.markForCheck();
+        this.changeDetectorRef.markForCheck();
       });
   }
 }

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

@@ -30,13 +30,14 @@
           <div class="d-flex mt-4 py-1">
             <div class="pt-4 w-50" i18n>Settings</div>
             <div class="w-50">
-              <form #addTransactionForm="ngForm">
+              <form #changeUserSettingsForm="ngForm">
-                <mat-form-field appearance="outline" class="w-100">
+                <mat-form-field appearance="outline" class="mb-3 w-100">
                   <mat-label i18n>Base Currency</mat-label>
                   <mat-select
                     name="baseCurrency"
+                    [disabled]="!hasPermissionToUpdateUserSettings"
                     [value]="user.settings.baseCurrency"
-                    (selectionChange)="onChangeBaseCurrency($event)"
+                    (selectionChange)="onChangeUserSettings('baseCurrency', $event.value)"
                   >
                     <mat-option
                       *ngFor="let currency of currencies"
@@ -45,6 +46,18 @@
                     >
                   </mat-select>
                 </mat-form-field>
+                <mat-form-field appearance="outline" class="w-100">
+                  <mat-label i18n>View Mode</mat-label>
+                  <mat-select
+                    name="viewMode"
+                    [disabled]="!hasPermissionToUpdateUserSettings"
+                    [value]="user.settings.viewMode"
+                    (selectionChange)="onChangeUserSettings('viewMode', $event.value)"
+                  >
+                    <mat-option value="DEFAULT">Default</mat-option>
+                    <mat-option value="ZEN">Zen</mat-option>
+                  </mat-select>
+                </mat-form-field>
               </form>
             </div>
           </div>

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

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

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

@@ -1,12 +1,11 @@
 import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
-import { AdminData } from '@ghostfolio/api/app/admin/interfaces/admin-data.interface';
-import { User } from '@ghostfolio/api/app/user/interfaces/user.interface';
 import { AdminService } from '@ghostfolio/client/services/admin.service';
 import { CacheService } from '@ghostfolio/client/services/cache.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
-import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service';
+import { UserService } from '@ghostfolio/client/services/user/user.service';
-import { DEFAULT_DATE_FORMAT } from '@ghostfolio/helper';
+import { DEFAULT_DATE_FORMAT } from '@ghostfolio/common/config';
-import { formatDistanceToNow, isValid, parseISO, sub } from 'date-fns';
+import { AdminData, User } from '@ghostfolio/common/interfaces';
+import { formatDistanceToNowStrict, isValid, parseISO, sub } from 'date-fns';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -33,9 +32,9 @@ export class AdminPageComponent implements OnInit {
   public constructor(
     private adminService: AdminService,
     private cacheService: CacheService,
-    private cd: ChangeDetectorRef,
+    private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
-    private tokenStorageService: TokenStorageService
+    private userService: UserService
   ) {}
 
   /**
@@ -44,13 +43,12 @@ export class AdminPageComponent implements OnInit {
   public ngOnInit() {
     this.fetchAdminData();
 
-    this.tokenStorageService
+    this.userService.stateChanged
-      .onChangeHasToken()
       .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(() => {
+      .subscribe((state) => {
-        this.dataService.fetchUser().subscribe((user) => {
+        if (state?.user) {
-          this.user = user;
+          this.user = state.user;
-        });
+        }
       });
   }
 
@@ -78,7 +76,7 @@ export class AdminPageComponent implements OnInit {
 
   public formatDistanceToNow(aDateString: string) {
     if (aDateString) {
-      const distanceString = formatDistanceToNow(
+      const distanceString = formatDistanceToNowStrict(
         sub(parseISO(aDateString), { seconds: 10 }),
         {
           addSuffix: true
@@ -126,7 +124,7 @@ export class AdminPageComponent implements OnInit {
           this.users = users;
 
           if (isValid(parseISO(lastDataGathering?.toString()))) {
-            this.lastDataGathering = formatDistanceToNow(
+            this.lastDataGathering = formatDistanceToNowStrict(
               new Date(lastDataGathering),
               {
                 addSuffix: true
@@ -141,7 +139,7 @@ export class AdminPageComponent implements OnInit {
           this.transactionCount = transactionCount;
           this.userCount = userCount;
 
-          this.cd.markForCheck();
+          this.changeDetectorRef.markForCheck();
         }
       );
   }

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

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

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

@@ -1,11 +1,13 @@
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
-import { PortfolioItem } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-item.interface';
-import { PortfolioPosition } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-position.interface';
-import { User } from '@ghostfolio/api/app/user/interfaces/user.interface';
 import { ToggleOption } from '@ghostfolio/client/components/toggle/interfaces/toggle-option.type';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
-import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service';
+import { UserService } from '@ghostfolio/client/services/user/user.service';
+import {
+  PortfolioItem,
+  PortfolioPosition,
+  User
+} from '@ghostfolio/common/interfaces';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -38,11 +40,11 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
    * @constructor
    */
   public constructor(
-    private cd: ChangeDetectorRef,
+    private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
     private deviceService: DeviceDetectorService,
     private impersonationStorageService: ImpersonationStorageService,
-    private tokenStorageService: TokenStorageService
+    private userService: UserService
   ) {}
 
   /**
@@ -64,7 +66,7 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
       .subscribe((response) => {
         this.portfolioItems = response;
 
-        this.cd.markForCheck();
+        this.changeDetectorRef.markForCheck();
       });
 
     this.dataService
@@ -74,18 +76,17 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
         this.portfolioPositions = response;
         this.initializeAnalysisData(this.portfolioPositions, this.period);
 
-        this.cd.markForCheck();
+        this.changeDetectorRef.markForCheck();
       });
 
-    this.tokenStorageService
+    this.userService.stateChanged
-      .onChangeHasToken()
       .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(() => {
+      .subscribe((state) => {
-        this.dataService.fetchUser().subscribe((user) => {
+        if (state?.user) {
-          this.user = user;
+          this.user = state.user;
 
-          this.cd.markForCheck();
+          this.changeDetectorRef.markForCheck();
-        });
+        }
       });
   }
 
@@ -108,8 +109,8 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
         type: position.type,
         value:
           aPeriod === 'original'
-            ? position.shareInvestment
+            ? position.allocationInvestment
-            : position.shareCurrent
+            : position.allocationCurrent
       };
       this.positionsArray.push(position);
 

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

@@ -2,12 +2,15 @@
   <div class="mb-5 row">
     <div class="col">
       <h3 class="d-flex justify-content-center mb-3" i18n>Analysis</h3>
-      <gf-positions-table
+      <div class="mb-4">
-        [baseCurrency]="user?.settings?.baseCurrency"
+        <h4 class="m-0" i18n>Positions</h4>
-        [deviceType]="deviceType"
+        <gf-positions-table
-        [locale]="user?.settings?.locale"
+          [baseCurrency]="user?.settings?.baseCurrency"
-        [positions]="positionsArray"
+          [deviceType]="deviceType"
-      ></gf-positions-table>
+          [locale]="user?.settings?.locale"
+          [positions]="positionsArray"
+        ></gf-positions-table>
+      </div>
     </div>
   </div>
   <div class="proportion-charts row">
@@ -157,14 +160,14 @@
             </div>
             <div i18n>
               You can find more charts on your desktop:
-              <a href="https://ghostfol.io" target="_blank">www.ghostfol.io</a>
+              <a href="https://ghostfol.io" target="_blank">Ghostfol.io</a>
             </div>
           </div>
         </mat-card-content>
       </mat-card>
     </div>
   </div>
-  <div *ngIf="!hasImpersonationId" class="d-none d-sm-block row">
+  <div class="d-none d-sm-block row">
     <div class="col-lg">
       <mat-card class="mb-3">
         <mat-card-header>

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

@@ -1,11 +1,6 @@
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
-import { DateRange } from '@ghostfolio/api/app/portfolio/interfaces/date-range.type';
-import { PortfolioOverview } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-overview.interface';
-import { PortfolioPerformance } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-performance.interface';
-import { PortfolioPosition } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-position.interface';
-import { User } from '@ghostfolio/api/app/user/interfaces/user.interface';
 import { LineChartItem } from '@ghostfolio/client/components/line-chart/interfaces/line-chart.interface';
 import { PerformanceChartDialog } from '@ghostfolio/client/components/performance-chart-dialog/performance-chart-dialog.component';
 import { ToggleOption } from '@ghostfolio/client/components/toggle/interfaces/toggle-option.type';
@@ -15,8 +10,15 @@ import {
   RANGE,
   SettingsStorageService
 } from '@ghostfolio/client/services/settings-storage.service';
-import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service';
+import { UserService } from '@ghostfolio/client/services/user/user.service';
-import { hasPermission, permissions } from '@ghostfolio/helper';
+import {
+  PortfolioOverview,
+  PortfolioPerformance,
+  PortfolioPosition,
+  User
+} from '@ghostfolio/common/interfaces';
+import { hasPermission, permissions } from '@ghostfolio/common/permissions';
+import { DateRange } from '@ghostfolio/common/types';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject, Subscription } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -56,7 +58,7 @@ export class HomePageComponent implements OnDestroy, OnInit {
    * @constructor
    */
   public constructor(
-    private cd: ChangeDetectorRef,
+    private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
     private deviceService: DeviceDetectorService,
     private dialog: MatDialog,
@@ -64,9 +66,9 @@ export class HomePageComponent implements OnDestroy, OnInit {
     private route: ActivatedRoute,
     private router: Router,
     private settingsStorageService: SettingsStorageService,
-    private tokenStorageService: TokenStorageService
+    private userService: UserService
   ) {
-    this.routeQueryParams = route.queryParams
+    this.routeQueryParams = this.route.queryParams
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((params) => {
         if (params['performanceChartDialog']) {
@@ -74,14 +76,14 @@ export class HomePageComponent implements OnDestroy, OnInit {
         }
       });
 
-    this.tokenStorageService
+    this.userService.stateChanged
-      .onChangeHasToken()
       .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(() => {
+      .subscribe((state) => {
-        this.dataService.fetchUser().subscribe((user) => {
+        if (state?.user) {
-          this.user = user;
+          this.user = state.user;
+
           this.hasPermissionToAccessFearAndGreedIndex = hasPermission(
-            user.permissions,
+            this.user.permissions,
             permissions.accessFearAndGreedIndex
           );
 
@@ -92,17 +94,17 @@ export class HomePageComponent implements OnDestroy, OnInit {
               .subscribe(({ marketPrice }) => {
                 this.fearAndGreedIndex = marketPrice;
 
-                this.cd.markForCheck();
+                this.changeDetectorRef.markForCheck();
               });
           }
 
           this.hasPermissionToReadForeignPortfolio = hasPermission(
-            user.permissions,
+            this.user.permissions,
             permissions.readForeignPortfolio
           );
 
-          this.cd.markForCheck();
+          this.changeDetectorRef.markForCheck();
-        });
+        }
       });
   }
 
@@ -130,6 +132,11 @@ export class HomePageComponent implements OnDestroy, OnInit {
     this.update();
   }
 
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+
   private openDialog(): void {
     const dialogRef = this.dialog.open(PerformanceChartDialog, {
       autoFocus: false,
@@ -162,7 +169,7 @@ export class HomePageComponent implements OnDestroy, OnInit {
           };
         });
 
-        this.cd.markForCheck();
+        this.changeDetectorRef.markForCheck();
       });
 
     this.dataService
@@ -171,14 +178,14 @@ export class HomePageComponent implements OnDestroy, OnInit {
         this.performance = response;
         this.isLoadingPerformance = false;
 
-        this.cd.markForCheck();
+        this.changeDetectorRef.markForCheck();
       });
 
     this.dataService.fetchPortfolioOverview().subscribe((response) => {
       this.overview = response;
       this.isLoadingOverview = false;
 
-      this.cd.markForCheck();
+      this.changeDetectorRef.markForCheck();
     });
 
     this.dataService
@@ -188,14 +195,9 @@ export class HomePageComponent implements OnDestroy, OnInit {
         this.hasPositions =
           this.positions && Object.keys(this.positions).length > 0;
 
-        this.cd.markForCheck();
+        this.changeDetectorRef.markForCheck();
       });
 
-    this.cd.markForCheck();
+    this.changeDetectorRef.markForCheck();
-  }
-
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
   }
 }

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

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

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

@@ -26,7 +26,7 @@ export class LoginPageComponent implements OnDestroy, OnInit {
    * @constructor
    */
   public constructor(
-    private cd: ChangeDetectorRef,
+    private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
     private dialog: MatDialog,
     private router: Router,
@@ -37,15 +37,12 @@ export class LoginPageComponent implements OnDestroy, OnInit {
    * Initializes the controller
    */
   public ngOnInit() {
-    // Remove all tokens (e.g. impersonationId)
-    window.localStorage.clear();
-
     this.dataService.fetchInfo().subscribe(({ demoAuthToken }) => {
       this.demoAuthToken = demoAuthToken;
 
       this.initializeLineChart();
 
-      this.cd.markForCheck();
+      this.changeDetectorRef.markForCheck();
     });
   }
 

apps/client/src/app/pages/login/show-access-token-dialog/show-access-token-dialog.component.ts

@@ -16,7 +16,7 @@ export class ShowAccessTokenDialog {
   public isAgreeButtonDisabled = true;
 
   public constructor(
-    private cd: ChangeDetectorRef,
+    private changeDetectorRef: ChangeDetectorRef,
     @Inject(MAT_DIALOG_DATA) public data: any
   ) {}
 
@@ -26,7 +26,7 @@ export class ShowAccessTokenDialog {
     setTimeout(() => {
       this.isAgreeButtonDisabled = false;
 
-      this.cd.markForCheck();
+      this.changeDetectorRef.markForCheck();
     }, 1500);
   }
 }