Release 2.8.0 (#2420)

* Improve form in account dialog

* Update changelog

.env.example

@@ -11,6 +11,5 @@ POSTGRES_USER=user
 POSTGRES_PASSWORD=<INSERT_POSTGRES_PASSWORD>
 
 ACCESS_TOKEN_SALT=<INSERT_RANDOM_STRING>
-ALPHA_VANTAGE_API_KEY=
 DATABASE_URL=postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@localhost:5432/${POSTGRES_DB}?connect_timeout=300&sslmode=prefer
 JWT_SECRET_KEY=<INSERT_RANDOM_STRING>

CHANGELOG.md

@@ -5,6 +5,129 @@ 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).
 
+## 2.8.0 - 2023-10-03
+
+### Added
+
+- Supported enter key press to submit the form of the create or update account dialog
+- Added the version to the admin control panel
+- Added pagination parameters (`skip`, `take`) to the endpoint `GET api/v1/order`
+
+### Changed
+
+- Harmonized the settings icon of the user account page
+- Improved the usability to set an asset profile as a benchmark
+- Reload platforms after making a change in the admin control panel
+- Reload tags after making a change in the admin control panel
+
+### Fixed
+
+- Fixed the sidebar navigation on the user account page
+
+## 2.7.0 - 2023-09-30
+
+### Added
+
+- Added a new static portfolio analysis rule: Emergency fund setup
+- Added tabs to the user account page
+
+### Changed
+
+- Set up the _Inter_ font family
+- Upgraded `yahoo-finance2` from version `2.7.0` to `2.8.0`
+
+### Fixed
+
+- Fixed a link on the features page
+
+## 2.6.0 - 2023-09-26
+
+### Added
+
+- Added the management of tags in the admin control panel
+- Added a blog post: _Hacktoberfest 2023_
+
+### Changed
+
+- Upgraded `prettier` from version `3.0.2` to `3.0.3`
+- Upgraded `yahoo-finance2` from version `2.5.0` to `2.7.0`
+
+## 2.5.0 - 2023-09-23
+
+### Added
+
+- Added support for translated activity types in the activities table
+- Added support for dates in `DD.MM.YYYY` format in the activities import
+- Set up the language localization for Türkçe (`tr`)
+
+### Changed
+
+- Skipped creating queue jobs for asset profiles with `MANUAL` data source on creating a new activity
+
+### Fixed
+
+- Fixed an issue with the cash position in the holdings table
+
+## 2.4.0 - 2023-09-19
+
+### Added
+
+- Added support for interest on account level (experimental)
+
+### Changed
+
+- Improved the preselected currency based on the account's currency in the create or edit activity dialog
+- Unlocked the experimental features setting for all users
+- Upgraded `prisma` from version `5.2.0` to `5.3.1`
+
+### Fixed
+
+- Fixed a memory leak related to the server's timezone (behind UTC) in the data gathering
+
+## 2.3.0 - 2023-09-17
+
+### Added
+
+- Added support for fees on account level (experimental)
+
+### Fixed
+
+- Fixed the export functionality for liabilities
+
+## 2.2.0 - 2023-09-17
+
+### Added
+
+- Introduced a sidebar navigation on desktop
+
+### Changed
+
+- Improved the style of the system message
+- Upgraded _Postgres_ from version `12` to `15` in the `docker-compose` files
+
+## 2.1.0 - 2023-09-15
+
+### Added
+
+- Added support to drop a file in the import activities dialog
+- Added a timeout to all data source requests
+
+### Changed
+
+- Harmonized the style of the user interface for granting and revoking public access to share the portfolio
+- Removed the account type from the user interface as a preparation to remove it from the `Account` database schema
+- Improved the logger output of the info service
+- Harmonized the logger output: `<symbol> (<dataSource>)`
+- Improved the language localization for German (`de`)
+- Improved the language localization for Italian (`it`)
+- Improved the language localization for Dutch (`nl`)
+- Improved the read-only mode
+
+### Fixed
+
+- Fixed the timeout in _EOD Historical Data_ requests
+- Fixed an issue with the portfolio summary caused by the language localization for Dutch (`nl`)
+
 ## 2.0.0 - 2023-09-09
 
 ### Added
@@ -1509,7 +1632,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- Set up the language localization for Italiano (`it`)
+- Set up the language localization for Italian (`it`)
 - Extended the landing page
 
 ## 1.195.0 - 20.09.2022
@@ -2932,7 +3055,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Supported the management of additional currencies in the admin control panel
 - Introduced the system message
-- Introduced the read only mode
+- Introduced the read-only mode
 
 ### Changed
 

README.md

@@ -13,6 +13,8 @@
 [![Shield: Contributions Welcome](https://img.shields.io/badge/Contributions-Welcome-orange.svg)](#contributing)
 [![Shield: License: AGPL v3](https://img.shields.io/badge/License-AGPL%20v3-blue.svg)](https://www.gnu.org/licenses/agpl-3.0)
 
+New: [Ghostfolio 2.0](https://ghostfol.io/en/blog/2023/09/ghostfolio-2)
+
 </div>
 
 **Ghostfolio** is an open source wealth management software built with web technology. The application empowers busy people to keep track of stocks, ETFs or cryptocurrencies and make solid, data-driven investment decisions. The software is designed for personal use in continuous operation.
@@ -25,7 +27,7 @@
 
 ## Ghostfolio Premium
 
-Our official **[Ghostfolio Premium](https://ghostfol.io/en/pricing)** cloud offering is the easiest way to get started. Due to the time it saves, this will be the best option for most people. The revenue is used for covering the hosting costs.
+Our official **[Ghostfolio Premium](https://ghostfol.io/en/pricing)** cloud offering is the easiest way to get started. Due to the time it saves, this will be the best option for most people. Revenue is used to cover the costs of the hosting infrastructure and to fund ongoing development.
 
 If you prefer to run Ghostfolio on your own infrastructure, please find further instructions in the [Self-hosting](#self-hosting) section.
 
@@ -136,9 +138,9 @@ docker-compose --env-file ./.env -f docker/docker-compose.build.yml up -d
 1. Run the following command to start the new Docker image: `docker-compose --env-file ./.env -f docker/docker-compose.yml up -d`  
    At each start, the container will automatically apply the database schema migrations if needed.
 
-### Run with _Unraid_ (Community)
+### Home Server Systems (Community)
 
-Please follow the instructions of the Ghostfolio [Unraid Community App](https://unraid.net/community/apps?q=ghostfolio).
+Ghostfolio is available for various home server systems, including [Runtipi](https://www.runtipi.io/docs/apps-available), [TrueCharts](https://truecharts.org/charts/stable/ghostfolio), [Umbrel](https://apps.umbrel.com/app/ghostfolio), and [Unraid](https://unraid.net/community/apps?q=ghostfolio).
 
 ## Development
 

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

@@ -10,8 +10,9 @@ import {
 import { isString } from 'lodash';
 
 export class CreateAccountDto {
+  @IsOptional()
   @IsString()
-  accountType: AccountType;
+  accountType?: AccountType;
 
   @IsNumber()
   balance: number;

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

@@ -10,8 +10,9 @@ import {
 import { isString } from 'lodash';
 
 export class UpdateAccountDto {
+  @IsOptional()
   @IsString()
-  accountType: AccountType;
+  accountType?: AccountType;
 
   @IsNumber()
   balance: number;

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

@@ -8,7 +8,9 @@ import { PropertyService } from '@ghostfolio/api/services/property/property.serv
 import { SymbolProfileService } from '@ghostfolio/api/services/symbol-profile/symbol-profile.service';
 import {
   DEFAULT_CURRENCY,
-  PROPERTY_CURRENCIES
+  PROPERTY_CURRENCIES,
+  PROPERTY_IS_READ_ONLY_MODE,
+  PROPERTY_IS_USER_SIGNUP_ENABLED
 } from '@ghostfolio/common/config';
 import {
   AdminData,
@@ -305,7 +307,9 @@ export class AdminService {
       response = await this.propertyService.delete({ key });
     }
 
-    if (key === PROPERTY_CURRENCIES) {
+    if (key === PROPERTY_IS_READ_ONLY_MODE && value === 'true') {
+      await this.putSetting(PROPERTY_IS_USER_SIGNUP_ENABLED, 'false');
+    } else if (key === PROPERTY_CURRENCIES) {
       await this.exchangeRateDataService.initialize();
     }
 

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

@@ -39,6 +39,7 @@ import { RedisCacheModule } from './redis-cache/redis-cache.module';
 import { SitemapModule } from './sitemap/sitemap.module';
 import { SubscriptionModule } from './subscription/subscription.module';
 import { SymbolModule } from './symbol/symbol.module';
+import { TagModule } from './tag/tag.module';
 import { UserModule } from './user/user.module';
 
 @Module({
@@ -101,6 +102,7 @@ import { UserModule } from './user/user.module';
     SitemapModule,
     SubscriptionModule,
     SymbolModule,
+    TagModule,
     TwitterBotModule,
     UserModule
   ],

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

@@ -10,6 +10,7 @@ import type { RequestWithUser } from '@ghostfolio/common/types';
 import {
   Body,
   Controller,
+  Delete,
   Get,
   HttpException,
   Inject,
@@ -32,32 +33,6 @@ export class BenchmarkController {
     @Inject(REQUEST) private readonly request: RequestWithUser
   ) {}
 
-  @Get()
-  @UseInterceptors(TransformDataSourceInRequestInterceptor)
-  @UseInterceptors(TransformDataSourceInResponseInterceptor)
-  public async getBenchmark(): Promise<BenchmarkResponse> {
-    return {
-      benchmarks: await this.benchmarkService.getBenchmarks()
-    };
-  }
-
-  @Get(':dataSource/:symbol/:startDateString')
-  @UseGuards(AuthGuard('jwt'))
-  @UseInterceptors(TransformDataSourceInRequestInterceptor)
-  public async getBenchmarkMarketDataBySymbol(
-    @Param('dataSource') dataSource: DataSource,
-    @Param('startDateString') startDateString: string,
-    @Param('symbol') symbol: string
-  ): Promise<BenchmarkMarketDataDetails> {
-    const startDate = new Date(startDateString);
-
-    return this.benchmarkService.getMarketDataBySymbol({
-      dataSource,
-      startDate,
-      symbol
-    });
-  }
-
   @Post()
   @UseGuards(AuthGuard('jwt'))
   public async addBenchmark(@Body() { dataSource, symbol }: UniqueAsset) {
@@ -94,4 +69,70 @@ export class BenchmarkController {
       );
     }
   }
+
+  @Delete(':dataSource/:symbol')
+  @UseGuards(AuthGuard('jwt'))
+  public async deleteBenchmark(
+    @Param('dataSource') dataSource: DataSource,
+    @Param('symbol') symbol: string
+  ) {
+    if (
+      !hasPermission(
+        this.request.user.permissions,
+        permissions.accessAdminControl
+      )
+    ) {
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.FORBIDDEN),
+        StatusCodes.FORBIDDEN
+      );
+    }
+
+    try {
+      const benchmark = await this.benchmarkService.deleteBenchmark({
+        dataSource,
+        symbol
+      });
+
+      if (!benchmark) {
+        throw new HttpException(
+          getReasonPhrase(StatusCodes.NOT_FOUND),
+          StatusCodes.NOT_FOUND
+        );
+      }
+
+      return benchmark;
+    } catch {
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.INTERNAL_SERVER_ERROR),
+        StatusCodes.INTERNAL_SERVER_ERROR
+      );
+    }
+  }
+
+  @Get()
+  @UseInterceptors(TransformDataSourceInRequestInterceptor)
+  @UseInterceptors(TransformDataSourceInResponseInterceptor)
+  public async getBenchmark(): Promise<BenchmarkResponse> {
+    return {
+      benchmarks: await this.benchmarkService.getBenchmarks()
+    };
+  }
+
+  @Get(':dataSource/:symbol/:startDateString')
+  @UseGuards(AuthGuard('jwt'))
+  @UseInterceptors(TransformDataSourceInRequestInterceptor)
+  public async getBenchmarkMarketDataBySymbol(
+    @Param('dataSource') dataSource: DataSource,
+    @Param('startDateString') startDateString: string,
+    @Param('symbol') symbol: string
+  ): Promise<BenchmarkMarketDataDetails> {
+    const startDate = new Date(startDateString);
+
+    return this.benchmarkService.getMarketDataBySymbol({
+      dataSource,
+      startDate,
+      symbol
+    });
+  }
 }

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

@@ -245,6 +245,43 @@ export class BenchmarkService {
     };
   }
 
+  public async deleteBenchmark({
+    dataSource,
+    symbol
+  }: UniqueAsset): Promise<Partial<SymbolProfile>> {
+    const assetProfile = await this.prismaService.symbolProfile.findFirst({
+      where: {
+        dataSource,
+        symbol
+      }
+    });
+
+    if (!assetProfile) {
+      return null;
+    }
+
+    let benchmarks =
+      ((await this.propertyService.getByKey(
+        PROPERTY_BENCHMARKS
+      )) as BenchmarkProperty[]) ?? [];
+
+    benchmarks = benchmarks.filter(({ symbolProfileId }) => {
+      return symbolProfileId !== assetProfile.id;
+    });
+
+    await this.propertyService.put({
+      key: PROPERTY_BENCHMARKS,
+      value: JSON.stringify(benchmarks)
+    });
+
+    return {
+      dataSource,
+      symbol,
+      id: assetProfile.id,
+      name: assetProfile.name
+    };
+  }
+
   private getMarketCondition(aPerformanceInPercent: number) {
     return aPerformanceInPercent <= -0.2 ? 'BEAR_MARKET' : 'NEUTRAL_MARKET';
   }

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

@@ -26,18 +26,8 @@ export class ExportService {
         where: { userId }
       })
     ).map(
-      ({
-        accountType,
-        balance,
-        comment,
-        currency,
-        id,
-        isExcluded,
-        name,
-        platformId
-      }) => {
+      ({ balance, comment, currency, id, isExcluded, name, platformId }) => {
         return {
-          accountType,
           balance,
           comment,
           currency,
@@ -87,7 +77,13 @@ export class ExportService {
             currency: SymbolProfile.currency,
             dataSource: SymbolProfile.dataSource,
             date: date.toISOString(),
-            symbol: type === 'ITEM' ? SymbolProfile.name : SymbolProfile.symbol
+            symbol:
+              type === 'FEE' ||
+              type === 'INTEREST' ||
+              type === 'ITEM' ||
+              type === 'LIABILITY'
+                ? SymbolProfile.name
+                : SymbolProfile.symbol
           };
         }
       )

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

@@ -410,7 +410,7 @@ export class ImportService {
           currency,
           userCurrency
         ),
-        //@ts-ignore
+        // @ts-ignore
         SymbolProfile: assetProfile,
         valueInBaseCurrency: this.exchangeRateDataService.toCurrency(
           value,

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

@@ -8,6 +8,7 @@ import { PropertyService } from '@ghostfolio/api/services/property/property.serv
 import { TagService } from '@ghostfolio/api/services/tag/tag.service';
 import {
   DEFAULT_CURRENCY,
+  DEFAULT_REQUEST_TIMEOUT,
   PROPERTY_BETTER_UPTIME_MONITOR_ID,
   PROPERTY_COUNTRIES_OF_SUBSCRIBERS,
   PROPERTY_DEMO_USER_ID,
@@ -168,16 +169,24 @@ export class InfoService {
 
   private async countDockerHubPulls(): Promise<number> {
     try {
+      const abortController = new AbortController();
+
+      setTimeout(() => {
+        abortController.abort();
+      }, DEFAULT_REQUEST_TIMEOUT);
+
       const { pull_count } = await got(
         `https://hub.docker.com/v2/repositories/ghostfolio/ghostfolio`,
         {
-          headers: { 'User-Agent': 'request' }
+          headers: { 'User-Agent': 'request' },
+          // @ts-ignore
+          signal: abortController.signal
         }
       ).json<any>();
 
       return pull_count;
     } catch (error) {
-      Logger.error(error, 'InfoService');
+      Logger.error(error, 'InfoService - DockerHub');
 
       return undefined;
     }
@@ -185,7 +194,16 @@ export class InfoService {
 
   private async countGitHubContributors(): Promise<number> {
     try {
-      const { body } = await got('https://github.com/ghostfolio/ghostfolio');
+      const abortController = new AbortController();
+
+      setTimeout(() => {
+        abortController.abort();
+      }, DEFAULT_REQUEST_TIMEOUT);
+
+      const { body } = await got('https://github.com/ghostfolio/ghostfolio', {
+        // @ts-ignore
+        signal: abortController.signal
+      });
 
       const $ = cheerio.load(body);
 
@@ -195,7 +213,7 @@ export class InfoService {
         ).text()
       );
     } catch (error) {
-      Logger.error(error, 'InfoService');
+      Logger.error(error, 'InfoService - GitHub');
 
       return undefined;
     }
@@ -203,16 +221,24 @@ export class InfoService {
 
   private async countGitHubStargazers(): Promise<number> {
     try {
+      const abortController = new AbortController();
+
+      setTimeout(() => {
+        abortController.abort();
+      }, DEFAULT_REQUEST_TIMEOUT);
+
       const { stargazers_count } = await got(
         `https://api.github.com/repos/ghostfolio/ghostfolio`,
         {
-          headers: { 'User-Agent': 'request' }
+          headers: { 'User-Agent': 'request' },
+          // @ts-ignore
+          signal: abortController.signal
         }
       ).json<any>();
 
       return stargazers_count;
     } catch (error) {
-      Logger.error(error, 'InfoService');
+      Logger.error(error, 'InfoService - GitHub');
 
       return undefined;
     }
@@ -323,24 +349,31 @@ export class InfoService {
           PROPERTY_BETTER_UPTIME_MONITOR_ID
         )) as string;
 
+        const abortController = new AbortController();
+
+        setTimeout(() => {
+          abortController.abort();
+        }, DEFAULT_REQUEST_TIMEOUT);
+
         const { data } = await got(
-          `https://betteruptime.com/api/v2/monitors/${monitorId}/sla?from=${format(
+          `https://uptime.betterstack.com/api/v2/monitors/${monitorId}/sla?from=${format(
             subDays(new Date(), 90),
             DATE_FORMAT
           )}&to${format(new Date(), DATE_FORMAT)}`,
-
           {
             headers: {
               Authorization: `Bearer ${this.configurationService.get(
                 'BETTER_UPTIME_API_KEY'
               )}`
-            }
+            },
+            // @ts-ignore
+            signal: abortController.signal
           }
         ).json<any>();
 
         return data.attributes.availability / 100;
       } catch (error) {
-        Logger.error(error, 'InfoService');
+        Logger.error(error, 'InfoService - Better Stack');
 
         return undefined;
       }

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

@@ -1,4 +1,5 @@
 import { SymbolProfileService } from '@ghostfolio/api/services/symbol-profile/symbol-profile.service';
+import { DEFAULT_REQUEST_TIMEOUT } from '@ghostfolio/common/config';
 import { UniqueAsset } from '@ghostfolio/common/interfaces';
 import { HttpException, Injectable } from '@nestjs/common';
 import { DataSource } from '@prisma/client';
@@ -41,10 +42,18 @@ export class LogoService {
   }
 
   private getBuffer(aUrl: string) {
+    const abortController = new AbortController();
+
+    setTimeout(() => {
+      abortController.abort();
+    }, DEFAULT_REQUEST_TIMEOUT);
+
     return got(
       `https://t0.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${aUrl}&size=64`,
       {
-        headers: { 'User-Agent': 'request' }
+        headers: { 'User-Agent': 'request' },
+        // @ts-ignore
+        signal: abortController.signal
       }
     ).buffer();
   }

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

@@ -89,7 +89,9 @@ export class OrderController {
     @Headers(HEADER_KEY_IMPERSONATION.toLowerCase()) impersonationId,
     @Query('accounts') filterByAccounts?: string,
     @Query('assetClasses') filterByAssetClasses?: string,
-    @Query('tags') filterByTags?: string
+    @Query('skip') skip?: number,
+    @Query('tags') filterByTags?: string,
+    @Query('take') take?: number
   ): Promise<Activities> {
     const filters = this.apiService.buildFiltersFromQueryParams({
       filterByAccounts,
@@ -105,6 +107,8 @@ export class OrderController {
       filters,
       userCurrency,
       includeDrafts: true,
+      skip: isNaN(skip) ? undefined : skip,
+      take: isNaN(take) ? undefined : take,
       userId: impersonationUserId || this.request.user.id,
       withExcludedAccounts: true
     });
@@ -147,8 +151,9 @@ export class OrderController {
       userId: this.request.user.id
     });
 
-    if (!order.isDraft) {
-      // Gather symbol data in the background, if not draft
+    if (data.dataSource && !order.isDraft) {
+      // Gather symbol data in the background, if data source is set
+      // (not MANUAL) and not draft
       this.dataGatheringService.gatherSymbols([
         {
           dataSource: data.dataSource,

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

@@ -97,7 +97,12 @@ export class OrderService {
     const updateAccountBalance = data.updateAccountBalance ?? false;
     const userId = data.userId;
 
-    if (data.type === 'ITEM' || data.type === 'LIABILITY') {
+    if (
+      data.type === 'FEE' ||
+      data.type === 'INTEREST' ||
+      data.type === 'ITEM' ||
+      data.type === 'LIABILITY'
+    ) {
       const assetClass = data.assetClass;
       const assetSubClass = data.assetSubClass;
       currency = data.SymbolProfile.connectOrCreate.create.currency;
@@ -118,20 +123,22 @@ export class OrderService {
       };
     }
 
-    this.dataGatheringService.addJobToQueue({
-      data: {
-        dataSource: data.SymbolProfile.connectOrCreate.create.dataSource,
-        symbol: data.SymbolProfile.connectOrCreate.create.symbol
-      },
-      name: GATHER_ASSET_PROFILE_PROCESS,
-      opts: {
-        ...GATHER_ASSET_PROFILE_PROCESS_OPTIONS,
-        jobId: getAssetProfileIdentifier({
+    if (data.SymbolProfile.connectOrCreate.create.dataSource !== 'MANUAL') {
+      this.dataGatheringService.addJobToQueue({
+        data: {
           dataSource: data.SymbolProfile.connectOrCreate.create.dataSource,
           symbol: data.SymbolProfile.connectOrCreate.create.symbol
-        })
-      }
-    });
+        },
+        name: GATHER_ASSET_PROFILE_PROCESS,
+        opts: {
+          ...GATHER_ASSET_PROFILE_PROCESS_OPTIONS,
+          jobId: getAssetProfileIdentifier({
+            dataSource: data.SymbolProfile.connectOrCreate.create.dataSource,
+            symbol: data.SymbolProfile.connectOrCreate.create.symbol
+          })
+        }
+      });
+    }
 
     delete data.accountId;
     delete data.assetClass;
@@ -151,6 +158,9 @@ export class OrderService {
     const orderData: Prisma.OrderCreateInput = data;
 
     const isDraft =
+      data.type === 'FEE' ||
+      data.type === 'INTEREST' ||
+      data.type === 'ITEM' ||
       data.type === 'LIABILITY'
         ? false
         : isAfter(data.date as Date, endOfToday());
@@ -197,7 +207,12 @@ export class OrderService {
       where
     });
 
-    if (order.type === 'ITEM' || order.type === 'LIABILITY') {
+    if (
+      order.type === 'FEE' ||
+      order.type === 'INTEREST' ||
+      order.type === 'ITEM' ||
+      order.type === 'LIABILITY'
+    ) {
       await this.symbolProfileService.deleteById(order.symbolProfileId);
     }
 
@@ -215,6 +230,8 @@ export class OrderService {
   public async getOrders({
     filters,
     includeDrafts = false,
+    skip,
+    take = Number.MAX_SAFE_INTEGER,
     types,
     userCurrency,
     userId,
@@ -222,6 +239,8 @@ export class OrderService {
   }: {
     filters?: Filter[];
     includeDrafts?: boolean;
+    skip?: number;
+    take?: number;
     types?: TypeOfOrder[];
     userCurrency: string;
     userId: string;
@@ -300,6 +319,8 @@ export class OrderService {
 
     return (
       await this.orders({
+        skip,
+        take,
         where,
         include: {
           // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -368,7 +389,12 @@ export class OrderService {
 
     let isDraft = false;
 
-    if (data.type === 'ITEM' || data.type === 'LIABILITY') {
+    if (
+      data.type === 'FEE' ||
+      data.type === 'INTEREST' ||
+      data.type === 'ITEM' ||
+      data.type === 'LIABILITY'
+    ) {
       delete data.SymbolProfile.connect;
     } else {
       delete data.SymbolProfile.update;

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

@@ -47,6 +47,7 @@ export class PlatformController {
         StatusCodes.FORBIDDEN
       );
     }
+
     return this.platformService.createPlatform(data);
   }
 

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

@@ -6,6 +6,18 @@ import { Platform, Prisma } from '@prisma/client';
 export class PlatformService {
   public constructor(private readonly prismaService: PrismaService) {}
 
+  public async createPlatform(data: Prisma.PlatformCreateInput) {
+    return this.prismaService.platform.create({
+      data
+    });
+  }
+
+  public async deletePlatform(
+    where: Prisma.PlatformWhereUniqueInput
+  ): Promise<Platform> {
+    return this.prismaService.platform.delete({ where });
+  }
+
   public async getPlatform(
     platformWhereUniqueInput: Prisma.PlatformWhereUniqueInput
   ): Promise<Platform> {
@@ -56,12 +68,6 @@ export class PlatformService {
     });
   }
 
-  public async createPlatform(data: Prisma.PlatformCreateInput) {
-    return this.prismaService.platform.create({
-      data
-    });
-  }
-
   public async updatePlatform({
     data,
     where
@@ -74,10 +80,4 @@ export class PlatformService {
       where
     });
   }
-
-  public async deletePlatform(
-    where: Prisma.PlatformWhereUniqueInput
-  ): Promise<Platform> {
-    return this.prismaService.platform.delete({ where });
-  }
 }

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

@@ -784,7 +784,7 @@ export class PortfolioCalculator {
         );
       } else if (!currentPosition.quantity.eq(0)) {
         Logger.warn(
-          `Missing historical market data for symbol ${currentPosition.symbol}`,
+          `Missing historical market data for ${currentPosition.symbol} (${currentPosition.dataSource})`,
           'PortfolioCalculator'
         );
         hasErrors = true;

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

@@ -173,8 +173,14 @@ export class PortfolioController {
     for (const [symbol, portfolioPosition] of Object.entries(holdings)) {
       holdings[symbol] = {
         ...portfolioPosition,
-        assetClass: hasDetails ? portfolioPosition.assetClass : undefined,
-        assetSubClass: hasDetails ? portfolioPosition.assetSubClass : undefined,
+        assetClass:
+          hasDetails || portfolioPosition.assetClass === 'CASH'
+            ? portfolioPosition.assetClass
+            : undefined,
+        assetSubClass:
+          hasDetails || portfolioPosition.assetSubClass === 'CASH'
+            ? portfolioPosition.assetSubClass
+            : undefined,
         countries: hasDetails ? portfolioPosition.countries : [],
         currency: hasDetails ? portfolioPosition.currency : undefined,
         markets: hasDetails ? portfolioPosition.markets : undefined,

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

@@ -10,6 +10,7 @@ import { AccountClusterRiskCurrentInvestment } from '@ghostfolio/api/models/rule
 import { AccountClusterRiskSingleAccount } from '@ghostfolio/api/models/rules/account-cluster-risk/single-account';
 import { CurrencyClusterRiskBaseCurrencyCurrentInvestment } from '@ghostfolio/api/models/rules/currency-cluster-risk/base-currency-current-investment';
 import { CurrencyClusterRiskCurrentInvestment } from '@ghostfolio/api/models/rules/currency-cluster-risk/current-investment';
+import { EmergencyFundSetup } from '@ghostfolio/api/models/rules/emergency-fund/emergency-fund-setup';
 import { FeeRatioInitialInvestment } from '@ghostfolio/api/models/rules/fees/fee-ratio-initial-investment';
 import { DataProviderService } from '@ghostfolio/api/services/data-provider/data-provider.service';
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data/exchange-rate-data.service';
@@ -50,18 +51,17 @@ import { Inject, Injectable } from '@nestjs/common';
 import { REQUEST } from '@nestjs/core';
 import {
   Account,
+  Type as ActivityType,
   AssetClass,
   DataSource,
   Order,
   Platform,
   Prisma,
-  Tag,
-  Type as TypeOfOrder
+  Tag
 } from '@prisma/client';
 import Big from 'big.js';
 import {
   differenceInDays,
-  endOfToday,
   format,
   isAfter,
   isBefore,
@@ -1215,12 +1215,6 @@ export class PortfolioService {
         userId
       });
 
-    if (isEmpty(orders)) {
-      return {
-        rules: {}
-      };
-    }
-
     const portfolioCalculator = new PortfolioCalculator({
       currency: userCurrency,
       currentRateService: this.currentRateService,
@@ -1229,7 +1223,9 @@ export class PortfolioService {
 
     portfolioCalculator.setTransactionPoints(transactionPoints);
 
-    const portfolioStart = parseDate(transactionPoints[0].date);
+    const portfolioStart = parseDate(
+      transactionPoints[0]?.date ?? format(new Date(), DATE_FORMAT)
+    );
     const currentPositions =
       await portfolioCalculator.getCurrentPositions(portfolioStart);
 
@@ -1250,33 +1246,48 @@ export class PortfolioService {
       userId
     });
 
+    const userSettings = <UserSettings>this.request.user.Settings.settings;
+
     return {
       rules: {
-        accountClusterRisk: await this.rulesService.evaluate(
-          [
-            new AccountClusterRiskCurrentInvestment(
-              this.exchangeRateDataService,
-              accounts
+        accountClusterRisk: isEmpty(orders)
+          ? undefined
+          : await this.rulesService.evaluate(
+              [
+                new AccountClusterRiskCurrentInvestment(
+                  this.exchangeRateDataService,
+                  accounts
+                ),
+                new AccountClusterRiskSingleAccount(
+                  this.exchangeRateDataService,
+                  accounts
+                )
+              ],
+              userSettings
             ),
-            new AccountClusterRiskSingleAccount(
+        currencyClusterRisk: isEmpty(orders)
+          ? undefined
+          : await this.rulesService.evaluate(
+              [
+                new CurrencyClusterRiskBaseCurrencyCurrentInvestment(
+                  this.exchangeRateDataService,
+                  positions
+                ),
+                new CurrencyClusterRiskCurrentInvestment(
+                  this.exchangeRateDataService,
+                  positions
+                )
+              ],
+              userSettings
+            ),
+        emergencyFund: await this.rulesService.evaluate(
+          [
+            new EmergencyFundSetup(
               this.exchangeRateDataService,
-              accounts
+              userSettings.emergencyFund
             )
           ],
-          <UserSettings>this.request.user.Settings.settings
-        ),
-        currencyClusterRisk: await this.rulesService.evaluate(
-          [
-            new CurrencyClusterRiskBaseCurrencyCurrentInvestment(
-              this.exchangeRateDataService,
-              positions
-            ),
-            new CurrencyClusterRiskCurrentInvestment(
-              this.exchangeRateDataService,
-              positions
-            )
-          ],
-          <UserSettings>this.request.user.Settings.settings
+          userSettings
         ),
         fees: await this.rulesService.evaluate(
           [
@@ -1286,7 +1297,7 @@ export class PortfolioService {
               this.getFees({ userCurrency, activities: orders }).toNumber()
             )
           ],
-          <UserSettings>this.request.user.Settings.settings
+          userSettings
         )
       }
     };
@@ -1342,36 +1353,6 @@ export class PortfolioService {
     return cashPositions;
   }
 
-  private getDividend({
-    activities,
-    date = new Date(0),
-    userCurrency
-  }: {
-    activities: OrderWithAccount[];
-    date?: Date;
-    userCurrency: string;
-  }) {
-    return activities
-      .filter((activity) => {
-        // Filter out all activities before given date (drafts) and type dividend
-        return (
-          isBefore(date, new Date(activity.date)) &&
-          activity.type === TypeOfOrder.DIVIDEND
-        );
-      })
-      .map(({ quantity, SymbolProfile, unitPrice }) => {
-        return this.exchangeRateDataService.toCurrency(
-          new Big(quantity).mul(unitPrice).toNumber(),
-          SymbolProfile.currency,
-          userCurrency
-        );
-      })
-      .reduce(
-        (previous, current) => new Big(previous).plus(current),
-        new Big(0)
-      );
-  }
-
   private getDividendsByGroup({
     dividends,
     groupBy
@@ -1516,52 +1497,6 @@ export class PortfolioService {
     };
   }
 
-  private getItems(activities: OrderWithAccount[], date = new Date(0)) {
-    return activities
-      .filter((activity) => {
-        // Filter out all activities before given date (drafts) and type item
-        return (
-          isBefore(date, new Date(activity.date)) &&
-          activity.type === TypeOfOrder.ITEM
-        );
-      })
-      .map(({ quantity, SymbolProfile, unitPrice }) => {
-        return this.exchangeRateDataService.toCurrency(
-          new Big(quantity).mul(unitPrice).toNumber(),
-          SymbolProfile.currency,
-          this.request.user.Settings.settings.baseCurrency
-        );
-      })
-      .reduce(
-        (previous, current) => new Big(previous).plus(current),
-        new Big(0)
-      );
-  }
-
-  private getLiabilities({
-    activities,
-    userCurrency
-  }: {
-    activities: OrderWithAccount[];
-    userCurrency: string;
-  }) {
-    return activities
-      .filter(({ type }) => {
-        return type === TypeOfOrder.LIABILITY;
-      })
-      .map(({ quantity, SymbolProfile, unitPrice }) => {
-        return this.exchangeRateDataService.toCurrency(
-          new Big(quantity).mul(unitPrice).toNumber(),
-          SymbolProfile.currency,
-          userCurrency
-        );
-      })
-      .reduce(
-        (previous, current) => new Big(previous).plus(current),
-        new Big(0)
-      );
-  }
-
   private getStartDate(aDateRange: DateRange, portfolioStart: Date) {
     switch (aDateRange) {
       case '1d':
@@ -1650,9 +1585,10 @@ export class PortfolioService {
       return account?.isExcluded ?? false;
     });
 
-    const dividend = this.getDividend({
+    const dividend = this.getSumOfActivityType({
       activities,
-      userCurrency
+      userCurrency,
+      activityType: 'DIVIDEND'
     }).toNumber();
     const emergencyFund = new Big(
       Math.max(
@@ -1662,23 +1598,49 @@ export class PortfolioService {
     );
     const fees = this.getFees({ activities, userCurrency }).toNumber();
     const firstOrderDate = activities[0]?.date;
-    const items = this.getItems(activities).toNumber();
-    const liabilities = this.getLiabilities({
+    const interest = this.getSumOfActivityType({
       activities,
-      userCurrency
+      userCurrency,
+      activityType: 'INTEREST'
+    }).toNumber();
+    const items = this.getSumOfActivityType({
+      activities,
+      userCurrency,
+      activityType: 'ITEM'
+    }).toNumber();
+    const liabilities = this.getSumOfActivityType({
+      activities,
+      userCurrency,
+      activityType: 'LIABILITY'
     }).toNumber();
 
-    const totalBuy = this.getTotalByType(activities, userCurrency, 'BUY');
-    const totalSell = this.getTotalByType(activities, userCurrency, 'SELL');
+    const totalBuy = this.getSumOfActivityType({
+      activities,
+      userCurrency,
+      activityType: 'BUY'
+    }).toNumber();
+    const totalSell = this.getSumOfActivityType({
+      activities,
+      userCurrency,
+      activityType: 'SELL'
+    }).toNumber();
 
     const cash = new Big(balanceInBaseCurrency)
       .minus(emergencyFund)
       .plus(emergencyFundPositionsValueInBaseCurrency)
       .toNumber();
     const committedFunds = new Big(totalBuy).minus(totalSell);
-    const totalOfExcludedActivities = new Big(
-      this.getTotalByType(excludedActivities, userCurrency, 'BUY')
-    ).minus(this.getTotalByType(excludedActivities, userCurrency, 'SELL'));
+    const totalOfExcludedActivities = this.getSumOfActivityType({
+      userCurrency,
+      activities: excludedActivities,
+      activityType: 'BUY'
+    }).minus(
+      this.getSumOfActivityType({
+        userCurrency,
+        activities: excludedActivities,
+        activityType: 'SELL'
+      })
+    );
 
     const cashDetailsWithExcludedAccounts =
       await this.accountService.getCashDetails({
@@ -1725,6 +1687,7 @@ export class PortfolioService {
       excludedAccountsAndActivities,
       fees,
       firstOrderDate,
+      interest,
       items,
       liabilities,
       netWorth,
@@ -1747,6 +1710,39 @@ export class PortfolioService {
     };
   }
 
+  private getSumOfActivityType({
+    activities,
+    activityType,
+    date = new Date(0),
+    userCurrency
+  }: {
+    activities: OrderWithAccount[];
+    activityType: ActivityType;
+    date?: Date;
+    userCurrency: string;
+  }) {
+    return activities
+      .filter((activity) => {
+        // Filter out all activities before given date (drafts) and
+        // activity type
+        return (
+          isBefore(date, new Date(activity.date)) &&
+          activity.type === activityType
+        );
+      })
+      .map(({ quantity, SymbolProfile, unitPrice }) => {
+        return this.exchangeRateDataService.toCurrency(
+          new Big(quantity).mul(unitPrice).toNumber(),
+          SymbolProfile.currency,
+          userCurrency
+        );
+      })
+      .reduce(
+        (previous, current) => new Big(previous).plus(current),
+        new Big(0)
+      );
+  }
+
   private async getTransactionPoints({
     filters,
     includeDrafts = false,
@@ -1818,6 +1814,21 @@ export class PortfolioService {
     };
   }
 
+  private getUserCurrency(aUser: UserWithSettings) {
+    return (
+      aUser.Settings?.settings.baseCurrency ??
+      this.request.user?.Settings?.settings.baseCurrency ??
+      DEFAULT_CURRENCY
+    );
+  }
+
+  private async getUserId(aImpersonationId: string, aUserId: string) {
+    const impersonationUserId =
+      await this.impersonationService.validateImpersonationId(aImpersonationId);
+
+    return impersonationUserId || aUserId;
+  }
+
   private async getValueOfAccountsAndPlatforms({
     filters = [],
     orders,
@@ -1961,38 +1972,4 @@ export class PortfolioService {
 
     return { accounts, platforms };
   }
-
-  private getTotalByType(
-    orders: OrderWithAccount[],
-    currency: string,
-    type: TypeOfOrder
-  ) {
-    return orders
-      .filter(
-        (order) => !isAfter(order.date, endOfToday()) && order.type === type
-      )
-      .map((order) => {
-        return this.exchangeRateDataService.toCurrency(
-          order.quantity * order.unitPrice,
-          order.SymbolProfile.currency,
-          currency
-        );
-      })
-      .reduce((previous, current) => previous + current, 0);
-  }
-
-  private getUserCurrency(aUser: UserWithSettings) {
-    return (
-      aUser.Settings?.settings.baseCurrency ??
-      this.request.user?.Settings?.settings.baseCurrency ??
-      DEFAULT_CURRENCY
-    );
-  }
-
-  private async getUserId(aImpersonationId: string, aUserId: string) {
-    const impersonationUserId =
-      await this.impersonationService.validateImpersonationId(aImpersonationId);
-
-    return impersonationUserId || aUserId;
-  }
 }

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

@@ -0,0 +1,6 @@
+import { IsString } from 'class-validator';
+
+export class CreateTagDto {
+  @IsString()
+  name: string;
+}

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

@@ -0,0 +1,104 @@
+import { hasPermission, permissions } from '@ghostfolio/common/permissions';
+import type { RequestWithUser } from '@ghostfolio/common/types';
+import {
+  Body,
+  Controller,
+  Delete,
+  Get,
+  HttpException,
+  Inject,
+  Param,
+  Post,
+  Put,
+  UseGuards
+} from '@nestjs/common';
+import { REQUEST } from '@nestjs/core';
+import { AuthGuard } from '@nestjs/passport';
+import { Tag } from '@prisma/client';
+import { StatusCodes, getReasonPhrase } from 'http-status-codes';
+
+import { CreateTagDto } from './create-tag.dto';
+import { TagService } from './tag.service';
+import { UpdateTagDto } from './update-tag.dto';
+
+@Controller('tag')
+export class TagController {
+  public constructor(
+    @Inject(REQUEST) private readonly request: RequestWithUser,
+    private readonly tagService: TagService
+  ) {}
+
+  @Get()
+  @UseGuards(AuthGuard('jwt'))
+  public async getTags() {
+    return this.tagService.getTagsWithActivityCount();
+  }
+
+  @Post()
+  @UseGuards(AuthGuard('jwt'))
+  public async createTag(@Body() data: CreateTagDto): Promise<Tag> {
+    if (!hasPermission(this.request.user.permissions, permissions.createTag)) {
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.FORBIDDEN),
+        StatusCodes.FORBIDDEN
+      );
+    }
+
+    return this.tagService.createTag(data);
+  }
+
+  @Put(':id')
+  @UseGuards(AuthGuard('jwt'))
+  public async updateTag(@Param('id') id: string, @Body() data: UpdateTagDto) {
+    if (!hasPermission(this.request.user.permissions, permissions.updateTag)) {
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.FORBIDDEN),
+        StatusCodes.FORBIDDEN
+      );
+    }
+
+    const originalTag = await this.tagService.getTag({
+      id
+    });
+
+    if (!originalTag) {
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.FORBIDDEN),
+        StatusCodes.FORBIDDEN
+      );
+    }
+
+    return this.tagService.updateTag({
+      data: {
+        ...data
+      },
+      where: {
+        id
+      }
+    });
+  }
+
+  @Delete(':id')
+  @UseGuards(AuthGuard('jwt'))
+  public async deleteTag(@Param('id') id: string) {
+    if (!hasPermission(this.request.user.permissions, permissions.deleteTag)) {
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.FORBIDDEN),
+        StatusCodes.FORBIDDEN
+      );
+    }
+
+    const originalTag = await this.tagService.getTag({
+      id
+    });
+
+    if (!originalTag) {
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.FORBIDDEN),
+        StatusCodes.FORBIDDEN
+      );
+    }
+
+    return this.tagService.deleteTag({ id });
+  }
+}

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

@@ -0,0 +1,13 @@
+import { PrismaModule } from '@ghostfolio/api/services/prisma/prisma.module';
+import { Module } from '@nestjs/common';
+
+import { TagController } from './tag.controller';
+import { TagService } from './tag.service';
+
+@Module({
+  controllers: [TagController],
+  exports: [TagService],
+  imports: [PrismaModule],
+  providers: [TagService]
+})
+export class TagModule {}

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

@@ -0,0 +1,79 @@
+import { PrismaService } from '@ghostfolio/api/services/prisma/prisma.service';
+import { Injectable } from '@nestjs/common';
+import { Prisma, Tag } from '@prisma/client';
+
+@Injectable()
+export class TagService {
+  public constructor(private readonly prismaService: PrismaService) {}
+
+  public async createTag(data: Prisma.TagCreateInput) {
+    return this.prismaService.tag.create({
+      data
+    });
+  }
+
+  public async deleteTag(where: Prisma.TagWhereUniqueInput): Promise<Tag> {
+    return this.prismaService.tag.delete({ where });
+  }
+
+  public async getTag(
+    tagWhereUniqueInput: Prisma.TagWhereUniqueInput
+  ): Promise<Tag> {
+    return this.prismaService.tag.findUnique({
+      where: tagWhereUniqueInput
+    });
+  }
+
+  public async getTags({
+    cursor,
+    orderBy,
+    skip,
+    take,
+    where
+  }: {
+    cursor?: Prisma.TagWhereUniqueInput;
+    orderBy?: Prisma.TagOrderByWithRelationInput;
+    skip?: number;
+    take?: number;
+    where?: Prisma.TagWhereInput;
+  } = {}) {
+    return this.prismaService.tag.findMany({
+      cursor,
+      orderBy,
+      skip,
+      take,
+      where
+    });
+  }
+
+  public async getTagsWithActivityCount() {
+    const tagsWithOrderCount = await this.prismaService.tag.findMany({
+      include: {
+        _count: {
+          select: { orders: true }
+        }
+      }
+    });
+
+    return tagsWithOrderCount.map(({ _count, id, name }) => {
+      return {
+        id,
+        name,
+        activityCount: _count.orders
+      };
+    });
+  }
+
+  public async updateTag({
+    data,
+    where
+  }: {
+    data: Prisma.TagUpdateInput;
+    where: Prisma.TagWhereUniqueInput;
+  }): Promise<Tag> {
+    return this.prismaService.tag.update({
+      data,
+      where
+    });
+  }
+}

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

@@ -0,0 +1,9 @@
+import { IsString } from 'class-validator';
+
+export class UpdateTagDto {
+  @IsString()
+  id: string;
+
+  @IsString()
+  name: string;
+}

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

@@ -19,7 +19,7 @@ import { UserWithSettings } from '@ghostfolio/common/types';
 import { Injectable } from '@nestjs/common';
 import { Prisma, Role, User } from '@prisma/client';
 import { differenceInDays } from 'date-fns';
-import { sortBy } from 'lodash';
+import { sortBy, without } from 'lodash';
 
 const crypto = require('crypto');
 
@@ -188,6 +188,11 @@ export class UserService {
           currentPermissions.push(permissions.enableSubscriptionInterstitial);
         }
 
+        currentPermissions = without(
+          currentPermissions,
+          permissions.createAccess
+        );
+
         // Reset benchmark
         user.Settings.settings.benchmark = undefined;
       }

apps/api/src/assets/sitemap.xml

@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset
-      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
-      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-      xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
-            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
+  xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+  xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
+    http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
   <url>
     <loc>https://ghostfol.io/de</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
@@ -58,6 +58,10 @@
     <loc>https://ghostfol.io/de/ressourcen/personal-finance-tools/open-source-alternative-zu-altoo</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/de/ressourcen/personal-finance-tools/open-source-alternative-zu-capmon</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/de/ressourcen/personal-finance-tools/open-source-alternative-zu-copilot-money</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
@@ -74,6 +78,10 @@
     <loc>https://ghostfol.io/de/ressourcen/personal-finance-tools/open-source-alternative-zu-exirio</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/de/ressourcen/personal-finance-tools/open-source-alternative-zu-finary</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/de/ressourcen/personal-finance-tools/open-source-alternative-zu-folishare</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
@@ -142,6 +150,14 @@
     <loc>https://ghostfol.io/de/ressourcen/personal-finance-tools/open-source-alternative-zu-snowball-analytics</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/de/ressourcen/personal-finance-tools/open-source-alternative-zu-stockle</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/de/ressourcen/personal-finance-tools/open-source-alternative-zu-stockmarketeye</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/de/ressourcen/personal-finance-tools/open-source-alternative-zu-sumio</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
@@ -254,6 +270,10 @@
     <loc>https://ghostfol.io/en/blog/2023/09/ghostfolio-2</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/en/blog/2023/09/hacktoberfest-2023</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/en/faq</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
@@ -292,6 +312,10 @@
     <loc>https://ghostfol.io/en/resources/personal-finance-tools/open-source-alternative-to-altoo</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/en/resources/personal-finance-tools/open-source-alternative-to-capmon</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/en/resources/personal-finance-tools/open-source-alternative-to-copilot-money</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
@@ -308,6 +332,10 @@
     <loc>https://ghostfol.io/en/resources/personal-finance-tools/open-source-alternative-to-exirio</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/en/resources/personal-finance-tools/open-source-alternative-to-finary</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/en/resources/personal-finance-tools/open-source-alternative-to-folishare</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
@@ -376,6 +404,14 @@
     <loc>https://ghostfol.io/en/resources/personal-finance-tools/open-source-alternative-to-snowball-analytics</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/en/resources/personal-finance-tools/open-source-alternative-to-stockle</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/en/resources/personal-finance-tools/open-source-alternative-to-stockmarketeye</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/en/resources/personal-finance-tools/open-source-alternative-to-sumio</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
@@ -550,6 +586,126 @@
     <loc>https://ghostfol.io/it/risorse</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/it/risorse/personal-finance-tools</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-altoo</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-campmon</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-copilot-money</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-delta</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-divvydiary</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-exirio</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-finary</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-folishare</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-getquin</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-gospatz</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-justetf</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-kubera</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-markets.sh</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-maybe-finance</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-monse</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-parqet</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-plannix</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-portfolio-dividend-tracker</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-portseido</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-projectionlab</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-seeking-alpha</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-sharesight</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-simple-portfolio</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-snowball-analytics</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-stockle</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-stockmarketeye</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-sumio</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-utluna</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-yeekatee</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/nl</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
@@ -559,7 +715,127 @@
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
   <url>
-    <loc>https://ghostfol.io/nl/kenmerken</loc>
+    <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-altoo</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-capmon</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-copilot-money</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-delta</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-divvydiary</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-exirio</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-finary</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-folishare</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-getquin</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-gospatz</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-justetf</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-kubera</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-markets.sh</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-maybe-finance</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-monse</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-parqet</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-plannix</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-portfolio-dividend-tracker</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-portseido</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-projectionlab</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-seeking-alpha</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-sharesight</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-simple-portfolio</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-snowball-analytics</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-stockle</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-stockmarketeye</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-sumio</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-utluna</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-yeekatee</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/nl/functionaliteiten</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
   <url>
@@ -601,7 +877,7 @@
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
   <url>
-    <loc>https://ghostfol.io/nl/vaak-gestelde-vragen</loc>
+    <loc>https://ghostfol.io/nl/veelgestelde-vragen</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
   <url>
@@ -660,4 +936,8 @@
     <loc>https://ghostfol.io/pt/sobre/politica-de-privacidade</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/tr</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
 </urlset>

apps/api/src/middlewares/html-template.middleware.ts

@@ -18,7 +18,8 @@ const descriptions = {
   fr: 'Ghostfolio est un dashboard de finances personnelles qui permet de suivre vos actifs comme les actions, les ETF ou les crypto-monnaies sur plusieurs plateformes.',
   it: 'Ghostfolio è un dashboard di finanza personale per tenere traccia delle vostre attività come azioni, ETF o criptovalute su più piattaforme.',
   nl: 'Ghostfolio is een persoonlijk financieel dashboard om uw activa zoals aandelen, ETF’s of cryptocurrencies over meerdere platforms bij te houden.',
-  pt: 'Ghostfolio é um dashboard de finanças pessoais para acompanhar os seus activos como acções, ETFs ou criptomoedas em múltiplas plataformas.'
+  pt: 'Ghostfolio é um dashboard de finanças pessoais para acompanhar os seus activos como acções, ETFs ou criptomoedas em múltiplas plataformas.',
+  tr: 'Ghostfolio, hisse senetleri, ETF’ler veya kripto para birimleri gibi varlıklarınızı birden fazla platformda takip etmenizi sağlayan bir kişisel finans panosudur.'
 };
 
 const title = 'Ghostfolio – Open Source Wealth Management Software';
@@ -79,6 +80,10 @@ const locales = {
   '/en/blog/2023/09/ghostfolio-2': {
     featureGraphicPath: 'assets/images/blog/ghostfolio-2.jpg',
     title: `Announcing Ghostfolio 2.0 - ${titleShort}`
+  },
+  '/en/blog/2023/09/hacktoberfest-2023': {
+    featureGraphicPath: 'assets/images/blog/hacktoberfest-2023.png',
+    title: `Hacktoberfest 2023 - ${titleShort}`
   }
 };
 

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

@@ -1,4 +1,5 @@
 import { RuleSettings } from '@ghostfolio/api/models/interfaces/rule-settings.interface';
+import { Rule } from '@ghostfolio/api/models/rule';
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data/exchange-rate-data.service';
 import {
   PortfolioDetails,
@@ -6,16 +7,18 @@ import {
   UserSettings
 } from '@ghostfolio/common/interfaces';
 
-import { Rule } from '../../rule';
-
 export class AccountClusterRiskCurrentInvestment extends Rule<Settings> {
+  private accounts: PortfolioDetails['accounts'];
+
   public constructor(
     protected exchangeRateDataService: ExchangeRateDataService,
-    private accounts: PortfolioDetails['accounts']
+    accounts: PortfolioDetails['accounts']
   ) {
     super(exchangeRateDataService, {
       name: 'Investment'
     });
+
+    this.accounts = accounts;
   }
 
   public evaluate(ruleSettings: Settings) {

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

@@ -1,17 +1,20 @@
 import { RuleSettings } from '@ghostfolio/api/models/interfaces/rule-settings.interface';
+import { Rule } from '@ghostfolio/api/models/rule';
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data/exchange-rate-data.service';
 import { PortfolioDetails, UserSettings } from '@ghostfolio/common/interfaces';
 
-import { Rule } from '../../rule';
-
 export class AccountClusterRiskSingleAccount extends Rule<RuleSettings> {
+  private accounts: PortfolioDetails['accounts'];
+
   public constructor(
     protected exchangeRateDataService: ExchangeRateDataService,
-    private accounts: PortfolioDetails['accounts']
+    accounts: PortfolioDetails['accounts']
   ) {
     super(exchangeRateDataService, {
       name: 'Single Account'
     });
+
+    this.accounts = accounts;
   }
 
   public evaluate() {

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

@@ -1,17 +1,20 @@
 import { RuleSettings } from '@ghostfolio/api/models/interfaces/rule-settings.interface';
+import { Rule } from '@ghostfolio/api/models/rule';
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data/exchange-rate-data.service';
 import { TimelinePosition, UserSettings } from '@ghostfolio/common/interfaces';
 
-import { Rule } from '../../rule';
-
 export class CurrencyClusterRiskBaseCurrencyCurrentInvestment extends Rule<Settings> {
+  private positions: TimelinePosition[];
+
   public constructor(
     protected exchangeRateDataService: ExchangeRateDataService,
-    private positions: TimelinePosition[]
+    positions: TimelinePosition[]
   ) {
     super(exchangeRateDataService, {
       name: 'Investment: Base Currency'
     });
+
+    this.positions = positions;
   }
 
   public evaluate(ruleSettings: Settings) {

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

@@ -1,17 +1,20 @@
 import { RuleSettings } from '@ghostfolio/api/models/interfaces/rule-settings.interface';
+import { Rule } from '@ghostfolio/api/models/rule';
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data/exchange-rate-data.service';
 import { TimelinePosition, UserSettings } from '@ghostfolio/common/interfaces';
 
-import { Rule } from '../../rule';
-
 export class CurrencyClusterRiskCurrentInvestment extends Rule<Settings> {
+  private positions: TimelinePosition[];
+
   public constructor(
     protected exchangeRateDataService: ExchangeRateDataService,
-    private positions: TimelinePosition[]
+    positions: TimelinePosition[]
   ) {
     super(exchangeRateDataService, {
       name: 'Investment'
     });
+
+    this.positions = positions;
   }
 
   public evaluate(ruleSettings: Settings) {

apps/api/src/models/rules/emergency-fund/emergency-fund-setup.ts

@@ -0,0 +1,46 @@
+import { RuleSettings } from '@ghostfolio/api/models/interfaces/rule-settings.interface';
+import { Rule } from '@ghostfolio/api/models/rule';
+import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data/exchange-rate-data.service';
+import { UserSettings } from '@ghostfolio/common/interfaces';
+
+export class EmergencyFundSetup extends Rule<Settings> {
+  private emergencyFund: number;
+
+  public constructor(
+    protected exchangeRateDataService: ExchangeRateDataService,
+    emergencyFund: number
+  ) {
+    super(exchangeRateDataService, {
+      name: 'Emergency Fund: Set up'
+    });
+
+    this.emergencyFund = emergencyFund;
+  }
+
+  public evaluate(ruleSettings: Settings) {
+    if (this.emergencyFund > ruleSettings.threshold) {
+      return {
+        evaluation: 'An emergency fund has been set up',
+        value: true
+      };
+    }
+
+    return {
+      evaluation: 'No emergency fund has been set up',
+      value: false
+    };
+  }
+
+  public getSettings(aUserSettings: UserSettings): Settings {
+    return {
+      baseCurrency: aUserSettings.baseCurrency,
+      isActive: true,
+      threshold: 0
+    };
+  }
+}
+
+interface Settings extends RuleSettings {
+  baseCurrency: string;
+  threshold: number;
+}

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

@@ -1,22 +1,29 @@
 import { RuleSettings } from '@ghostfolio/api/models/interfaces/rule-settings.interface';
+import { Rule } from '@ghostfolio/api/models/rule';
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data/exchange-rate-data.service';
 import { UserSettings } from '@ghostfolio/common/interfaces';
 
-import { Rule } from '../../rule';
-
 export class FeeRatioInitialInvestment extends Rule<Settings> {
+  private fees: number;
+  private totalInvestment: number;
+
   public constructor(
     protected exchangeRateDataService: ExchangeRateDataService,
-    private totalInvestment: number,
-    private fees: number
+    totalInvestment: number,
+    fees: number
   ) {
     super(exchangeRateDataService, {
-      name: 'Investment'
+      name: 'Fee Ratio'
     });
+
+    this.fees = fees;
+    this.totalInvestment = totalInvestment;
   }
 
   public evaluate(ruleSettings: Settings) {
-    const feeRatio = this.fees / this.totalInvestment;
+    const feeRatio = this.totalInvestment
+      ? this.fees / this.totalInvestment
+      : 0;
 
     if (feeRatio > ruleSettings.threshold) {
       return {

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

@@ -13,6 +13,7 @@ import { Injectable, Logger } from '@nestjs/common';
 import { Prisma } from '@prisma/client';
 import { Job } from 'bull';
 import {
+  addDays,
   format,
   getDate,
   getMonth,
@@ -101,15 +102,7 @@ export class DataGatheringProcessor {
           });
         }
 
-        // Count month one up for iteration
-        currentDate = new Date(
-          Date.UTC(
-            getYear(currentDate),
-            getMonth(currentDate),
-            getDate(currentDate) + 1,
-            0
-          )
-        );
+        currentDate = addDays(currentDate, 1);
       }
 
       await this.marketDataService.updateMany({ data });

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

@@ -127,6 +127,10 @@ export class DataGatheringService {
       uniqueAssets = await this.getUniqueAssets();
     }
 
+    if (uniqueAssets.length <= 0) {
+      return;
+    }
+
     const assetProfiles =
       await this.dataProviderService.getAssetProfiles(uniqueAssets);
     const symbolProfiles =
@@ -145,7 +149,9 @@ export class DataGatheringService {
           });
         } catch (error) {
           Logger.error(
-            `Failed to enhance data for symbol ${symbol} by ${dataEnhancer.getName()}`,
+            `Failed to enhance data for ${symbol} (${
+              assetProfile.dataSource
+            }) by ${dataEnhancer.getName()}`,
             error,
             'DataGatheringService'
           );

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

@@ -9,6 +9,7 @@ import { DATE_FORMAT } from '@ghostfolio/common/helper';
 import { Granularity } from '@ghostfolio/common/types';
 import { Injectable } from '@nestjs/common';
 import { DataSource, SymbolProfile } from '@prisma/client';
+import * as Alphavantage from 'alphavantage';
 import { format, isAfter, isBefore, parse } from 'date-fns';
 
 import { IAlphaVantageHistoricalResponse } from './interfaces/interfaces';
@@ -20,7 +21,7 @@ export class AlphaVantageService implements DataProviderInterface {
   public constructor(
     private readonly configurationService: ConfigurationService
   ) {
-    this.alphaVantage = require('alphavantage')({
+    this.alphaVantage = Alphavantage({
       key: this.configurationService.get('ALPHA_VANTAGE_API_KEY')
     });
   }
@@ -126,6 +127,9 @@ export class AlphaVantageService implements DataProviderInterface {
     return {
       items: result?.bestMatches?.map((bestMatch) => {
         return {
+          assetClass: undefined,
+          assetSubClass: undefined,
+          currency: bestMatch['8. currency'],
           dataSource: this.getName(),
           name: bestMatch['2. name'],
           symbol: bestMatch['1. symbol']

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

@@ -4,7 +4,10 @@ import {
   IDataProviderHistoricalResponse,
   IDataProviderResponse
 } from '@ghostfolio/api/services/interfaces/interfaces';
-import { DEFAULT_CURRENCY } from '@ghostfolio/common/config';
+import {
+  DEFAULT_CURRENCY,
+  DEFAULT_REQUEST_TIMEOUT
+} from '@ghostfolio/common/config';
 import { DATE_FORMAT } from '@ghostfolio/common/helper';
 import { DataProviderInfo } from '@ghostfolio/common/interfaces';
 import { Granularity } from '@ghostfolio/common/types';
@@ -40,7 +43,16 @@ export class CoinGeckoService implements DataProviderInterface {
     };
 
     try {
-      const { name } = await got(`${this.URL}/coins/${aSymbol}`).json<any>();
+      const abortController = new AbortController();
+
+      setTimeout(() => {
+        abortController.abort();
+      }, DEFAULT_REQUEST_TIMEOUT);
+
+      const { name } = await got(`${this.URL}/coins/${aSymbol}`, {
+        // @ts-ignore
+        signal: abortController.signal
+      }).json<any>();
 
       response.name = name;
     } catch (error) {
@@ -73,12 +85,22 @@ export class CoinGeckoService implements DataProviderInterface {
     [symbol: string]: { [date: string]: IDataProviderHistoricalResponse };
   }> {
     try {
+      const abortController = new AbortController();
+
+      setTimeout(() => {
+        abortController.abort();
+      }, DEFAULT_REQUEST_TIMEOUT);
+
       const { prices } = await got(
         `${
           this.URL
         }/coins/${aSymbol}/market_chart/range?vs_currency=${DEFAULT_CURRENCY.toLowerCase()}&from=${getUnixTime(
           from
-        )}&to=${getUnixTime(to)}`
+        )}&to=${getUnixTime(to)}`,
+        {
+          // @ts-ignore
+          signal: abortController.signal
+        }
       ).json<any>();
 
       const result: {
@@ -122,10 +144,20 @@ export class CoinGeckoService implements DataProviderInterface {
     }
 
     try {
+      const abortController = new AbortController();
+
+      setTimeout(() => {
+        abortController.abort();
+      }, DEFAULT_REQUEST_TIMEOUT);
+
       const response = await got(
         `${this.URL}/simple/price?ids=${aSymbols.join(
           ','
-        )}&vs_currencies=${DEFAULT_CURRENCY.toLowerCase()}`
+        )}&vs_currencies=${DEFAULT_CURRENCY.toLowerCase()}`,
+        {
+          // @ts-ignore
+          signal: abortController.signal
+        }
       ).json<any>();
 
       for (const symbol in response) {
@@ -160,9 +192,16 @@ export class CoinGeckoService implements DataProviderInterface {
     let items: LookupItem[] = [];
 
     try {
-      const { coins } = await got(
-        `${this.URL}/search?query=${query}`
-      ).json<any>();
+      const abortController = new AbortController();
+
+      setTimeout(() => {
+        abortController.abort();
+      }, DEFAULT_REQUEST_TIMEOUT);
+
+      const { coins } = await got(`${this.URL}/search?query=${query}`, {
+        // @ts-ignore
+        signal: abortController.signal
+      }).json<any>();
 
       items = coins.map(({ id: symbol, name }) => {
         return {

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

@@ -1,4 +1,5 @@
 import { DataEnhancerInterface } from '@ghostfolio/api/services/data-provider/interfaces/data-enhancer.interface';
+import { DEFAULT_REQUEST_TIMEOUT } from '@ghostfolio/common/config';
 import { Country } from '@ghostfolio/common/interfaces/country.interface';
 import { Sector } from '@ghostfolio/common/interfaces/sector.interface';
 import { Injectable } from '@nestjs/common';
@@ -32,15 +33,35 @@ export class TrackinsightDataEnhancerService implements DataEnhancerInterface {
       return response;
     }
 
+    let abortController = new AbortController();
+
+    setTimeout(() => {
+      abortController.abort();
+    }, DEFAULT_REQUEST_TIMEOUT);
+
     const profile = await got(
-      `${TrackinsightDataEnhancerService.baseUrl}/funds/${symbol}.json`
+      `${TrackinsightDataEnhancerService.baseUrl}/funds/${symbol}.json`,
+      {
+        // @ts-ignore
+        signal: abortController.signal
+      }
     )
       .json<any>()
       .catch(() => {
+        const abortController = new AbortController();
+
+        setTimeout(() => {
+          abortController.abort();
+        }, DEFAULT_REQUEST_TIMEOUT);
+
         return got(
           `${TrackinsightDataEnhancerService.baseUrl}/funds/${symbol.split(
             '.'
-          )?.[0]}.json`
+          )?.[0]}.json`,
+          {
+            // @ts-ignore
+            signal: abortController.signal
+          }
         )
           .json<any>()
           .catch(() => {
@@ -54,15 +75,35 @@ export class TrackinsightDataEnhancerService implements DataEnhancerInterface {
       response.isin = isin;
     }
 
+    abortController = new AbortController();
+
+    setTimeout(() => {
+      abortController.abort();
+    }, DEFAULT_REQUEST_TIMEOUT);
+
     const holdings = await got(
-      `${TrackinsightDataEnhancerService.baseUrl}/holdings/${symbol}.json`
+      `${TrackinsightDataEnhancerService.baseUrl}/holdings/${symbol}.json`,
+      {
+        // @ts-ignore
+        signal: abortController.signal
+      }
     )
       .json<any>()
       .catch(() => {
+        const abortController = new AbortController();
+
+        setTimeout(() => {
+          abortController.abort();
+        }, DEFAULT_REQUEST_TIMEOUT);
+
         return got(
           `${TrackinsightDataEnhancerService.baseUrl}/holdings/${symbol.split(
             '.'
-          )?.[0]}.json`
+          )?.[0]}.json`,
+          {
+            // @ts-ignore
+            signal: abortController.signal
+          }
         )
           .json<any>()
           .catch(() => {

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

@@ -78,6 +78,12 @@ export class EodHistoricalDataService implements DataProviderInterface {
     const symbol = this.convertToEodSymbol(aSymbol);
 
     try {
+      const abortController = new AbortController();
+
+      setTimeout(() => {
+        abortController.abort();
+      }, DEFAULT_REQUEST_TIMEOUT);
+
       const response = await got(
         `${this.URL}/eod/${symbol}?api_token=${
           this.apiKey
@@ -86,9 +92,8 @@ export class EodHistoricalDataService implements DataProviderInterface {
           DATE_FORMAT
         )}&period={aGranularity}`,
         {
-          timeout: {
-            request: DEFAULT_REQUEST_TIMEOUT
-          }
+          // @ts-ignore
+          signal: abortController.signal
         }
       ).json<any>();
 
@@ -138,14 +143,19 @@ export class EodHistoricalDataService implements DataProviderInterface {
     }
 
     try {
+      const abortController = new AbortController();
+
+      setTimeout(() => {
+        abortController.abort();
+      }, DEFAULT_REQUEST_TIMEOUT);
+
       const realTimeResponse = await got(
         `${this.URL}/real-time/${symbols[0]}?api_token=${
           this.apiKey
         }&fmt=json&s=${symbols.join(',')}`,
         {
-          timeout: {
-            request: DEFAULT_REQUEST_TIMEOUT
-          }
+          // @ts-ignore
+          signal: abortController.signal
         }
       ).json<any>();
 
@@ -331,12 +341,17 @@ export class EodHistoricalDataService implements DataProviderInterface {
     let searchResult = [];
 
     try {
+      const abortController = new AbortController();
+
+      setTimeout(() => {
+        abortController.abort();
+      }, DEFAULT_REQUEST_TIMEOUT);
+
       const response = await got(
         `${this.URL}/search/${aQuery}?api_token=${this.apiKey}`,
         {
-          timeout: {
-            request: DEFAULT_REQUEST_TIMEOUT
-          }
+          // @ts-ignore
+          signal: abortController.signal
         }
       ).json<any>();
 

apps/api/src/services/data-provider/financial-modeling-prep/financial-modeling-prep.service.ts

@@ -5,7 +5,10 @@ import {
   IDataProviderHistoricalResponse,
   IDataProviderResponse
 } from '@ghostfolio/api/services/interfaces/interfaces';
-import { DEFAULT_CURRENCY } from '@ghostfolio/common/config';
+import {
+  DEFAULT_CURRENCY,
+  DEFAULT_REQUEST_TIMEOUT
+} from '@ghostfolio/common/config';
 import { DATE_FORMAT, parseDate } from '@ghostfolio/common/helper';
 import { DataProviderInfo } from '@ghostfolio/common/interfaces';
 import { Granularity } from '@ghostfolio/common/types';
@@ -63,8 +66,18 @@ export class FinancialModelingPrepService implements DataProviderInterface {
     [symbol: string]: { [date: string]: IDataProviderHistoricalResponse };
   }> {
     try {
+      const abortController = new AbortController();
+
+      setTimeout(() => {
+        abortController.abort();
+      }, DEFAULT_REQUEST_TIMEOUT);
+
       const { historical } = await got(
-        `${this.URL}/historical-price-full/${aSymbol}?apikey=${this.apiKey}`
+        `${this.URL}/historical-price-full/${aSymbol}?apikey=${this.apiKey}`,
+        {
+          // @ts-ignore
+          signal: abortController.signal
+        }
       ).json<any>();
 
       const result: {
@@ -110,8 +123,18 @@ export class FinancialModelingPrepService implements DataProviderInterface {
     }
 
     try {
+      const abortController = new AbortController();
+
+      setTimeout(() => {
+        abortController.abort();
+      }, DEFAULT_REQUEST_TIMEOUT);
+
       const response = await got(
-        `${this.URL}/quote/${aSymbols.join(',')}?apikey=${this.apiKey}`
+        `${this.URL}/quote/${aSymbols.join(',')}?apikey=${this.apiKey}`,
+        {
+          // @ts-ignore
+          signal: abortController.signal
+        }
       ).json<any>();
 
       for (const { price, symbol } of response) {
@@ -144,8 +167,18 @@ export class FinancialModelingPrepService implements DataProviderInterface {
     let items: LookupItem[] = [];
 
     try {
+      const abortController = new AbortController();
+
+      setTimeout(() => {
+        abortController.abort();
+      }, DEFAULT_REQUEST_TIMEOUT);
+
       const result = await got(
-        `${this.URL}/search?query=${query}&apikey=${this.apiKey}`
+        `${this.URL}/search?query=${query}&apikey=${this.apiKey}`,
+        {
+          // @ts-ignore
+          signal: abortController.signal
+        }
       ).json<any>();
 
       items = result.map(({ currency, name, symbol }) => {

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

@@ -6,6 +6,7 @@ import {
 } from '@ghostfolio/api/services/interfaces/interfaces';
 import { PrismaService } from '@ghostfolio/api/services/prisma/prisma.service';
 import { SymbolProfileService } from '@ghostfolio/api/services/symbol-profile/symbol-profile.service';
+import { DEFAULT_REQUEST_TIMEOUT } from '@ghostfolio/common/config';
 import {
   DATE_FORMAT,
   extractNumberFromString,
@@ -95,7 +96,17 @@ export class ManualService implements DataProviderInterface {
         return {};
       }
 
-      const { body } = await got(url, { headers });
+      const abortController = new AbortController();
+
+      setTimeout(() => {
+        abortController.abort();
+      }, DEFAULT_REQUEST_TIMEOUT);
+
+      const { body } = await got(url, {
+        headers,
+        // @ts-ignore
+        signal: abortController.signal
+      });
 
       const $ = cheerio.load(body);
 

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

@@ -5,7 +5,10 @@ import {
   IDataProviderHistoricalResponse,
   IDataProviderResponse
 } from '@ghostfolio/api/services/interfaces/interfaces';
-import { ghostfolioFearAndGreedIndexSymbol } from '@ghostfolio/common/config';
+import {
+  DEFAULT_REQUEST_TIMEOUT,
+  ghostfolioFearAndGreedIndexSymbol
+} from '@ghostfolio/common/config';
 import { DATE_FORMAT, getYesterday } from '@ghostfolio/common/helper';
 import { Granularity } from '@ghostfolio/common/types';
 import { Injectable, Logger } from '@nestjs/common';
@@ -135,6 +138,12 @@ export class RapidApiService implements DataProviderInterface {
     oneYearAgo: { value: number; valueText: string };
   }> {
     try {
+      const abortController = new AbortController();
+
+      setTimeout(() => {
+        abortController.abort();
+      }, DEFAULT_REQUEST_TIMEOUT);
+
       const { fgi } = await got(
         `https://fear-and-greed-index.p.rapidapi.com/v1/fgi`,
         {
@@ -142,7 +151,9 @@ export class RapidApiService implements DataProviderInterface {
             useQueryString: 'true',
             'x-rapidapi-host': 'fear-and-greed-index.p.rapidapi.com',
             'x-rapidapi-key': this.configurationService.get('RAPID_API_API_KEY')
-          }
+          },
+          // @ts-ignore
+          signal: abortController.signal
         }
       ).json<any>();
 

apps/client/project.json

@@ -21,6 +21,7 @@
         "tsConfig": "apps/client/tsconfig.app.json",
         "assets": [],
         "styles": [
+          "apps/client/src/assets/fonts/inter.css",
           "apps/client/src/styles/theme.scss",
           "apps/client/src/styles.scss"
         ],
@@ -63,6 +64,10 @@
           "baseHref": "/pt/",
           "localize": ["pt"]
         },
+        "development-tr": {
+          "baseHref": "/tr/",
+          "localize": ["tr"]
+        },
         "production": {
           "fileReplacements": [
             {
@@ -99,40 +104,40 @@
       "options": {
         "commands": [
           {
-            "command": "mkdir -p dist/apps/client"
+            "command": "shx mkdir -p dist/apps/client"
           },
           {
-            "command": "cp -r apps/client/src/assets dist/apps/client"
+            "command": "shx cp -r apps/client/src/assets dist/apps/client"
           },
           {
-            "command": "cp -r apps/client/src/assets/.well-known dist/apps/client"
+            "command": "shx cp -r apps/client/src/assets/.well-known dist/apps/client"
           },
           {
-            "command": "cp apps/client/src/assets/favicon.ico dist/apps/client"
+            "command": "shx cp apps/client/src/assets/favicon.ico dist/apps/client"
           },
           {
-            "command": "cp apps/client/src/assets/index.html dist/apps/client"
+            "command": "shx cp apps/client/src/assets/index.html dist/apps/client"
           },
           {
-            "command": "cp apps/client/src/assets/robots.txt dist/apps/client"
+            "command": "shx cp apps/client/src/assets/robots.txt dist/apps/client"
           },
           {
-            "command": "cp apps/client/src/assets/site.webmanifest dist/apps/client"
+            "command": "shx cp apps/client/src/assets/site.webmanifest dist/apps/client"
           },
           {
-            "command": "cp node_modules/ionicons/dist/index.js dist/apps/client"
+            "command": "shx cp node_modules/ionicons/dist/index.js dist/apps/client"
           },
           {
-            "command": "cp node_modules/ionicons/dist/ionicons.js dist/apps/client"
+            "command": "shx cp node_modules/ionicons/dist/ionicons.js dist/apps/client"
           },
           {
-            "command": "cp -r node_modules/ionicons/dist/ionicons dist/apps/client/ionicons"
+            "command": "shx cp -r node_modules/ionicons/dist/ionicons dist/apps/client/ionicons"
           },
           {
-            "command": "cp CHANGELOG.md dist/apps/client/assets"
+            "command": "shx cp CHANGELOG.md dist/apps/client/assets"
           },
           {
-            "command": "cp LICENSE dist/apps/client/assets"
+            "command": "shx cp LICENSE dist/apps/client/assets"
           }
         ]
       }
@@ -165,6 +170,9 @@
         "development-pt": {
           "browserTarget": "client:build:development-pt"
         },
+        "development-tr": {
+          "browserTarget": "client:build:development-tr"
+        },
         "production": {
           "browserTarget": "client:build:production"
         }
@@ -182,7 +190,8 @@
           "messages.fr.xlf",
           "messages.it.xlf",
           "messages.nl.xlf",
-          "messages.pt.xlf"
+          "messages.pt.xlf",
+          "messages.tr.xlf"
         ]
       }
     },
@@ -226,6 +235,10 @@
       "pt": {
         "baseHref": "/pt/",
         "translation": "apps/client/src/locales/messages.pt.xlf"
+      },
+      "tr": {
+        "baseHref": "/tr/",
+        "translation": "apps/client/src/locales/messages.tr.xlf"
       }
     },
     "sourceLocale": "en"

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

@@ -1,37 +1,26 @@
 <header>
-  <gf-header
-    class="position-fixed w-100"
-    [currentRoute]="currentRoute"
-    [info]="info"
-    [pageTitle]="pageTitle"
-    [user]="user"
-    (signOut)="onSignOut()"
-  ></gf-header>
-</header>
-
-<main role="main">
   <div
     *ngIf="canCreateAccount || (info?.systemMessage && user)"
-    class="container info-message-container"
+    class="info-message-container"
   >
-    <div class="row">
-      <div class="col-md-8 offset-md-2 text-center">
+    <div class="info-message-inner-container position-fixed w-100">
+      <div class="align-items-center d-flex h-100 justify-content-center">
         <a
           *ngIf="canCreateAccount"
           class="text-center"
           [routerLink]="routerLinkRegister"
         >
           <div
-            class="cursor-pointer d-inline-block info-message px-3 py-2"
+            class="cursor-pointer d-inline-block info-message"
             (click)="onCreateAccount()"
           >
-            <span>You are using the Live Demo.</span>
-            <span class="a ml-2">Create Account</span>
+            <span i18n>You are using the Live Demo.</span>
+            <span class="a ml-2" i18n>Create Account</span>
           </div></a
         >
         <div
           *ngIf="!canCreateAccount && info?.systemMessage && user"
-          class="cursor-pointer d-inline-block info-message px-3 py-2 text-truncate"
+          class="cursor-pointer d-inline-block info-message text-truncate"
           (click)="onShowSystemMessage()"
         >
           {{ info.systemMessage }}
@@ -40,6 +29,18 @@
     </div>
   </div>
 
+  <gf-header
+    class="position-fixed w-100"
+    [currentRoute]="currentRoute"
+    [hasTabs]="hasTabs"
+    [info]="info"
+    [pageTitle]="pageTitle"
+    [user]="user"
+    (signOut)="onSignOut()"
+  ></gf-header>
+</header>
+
+<main role="main">
   <router-outlet></router-outlet>
 </main>
 
@@ -151,6 +152,11 @@
           <li>
             <a href="../pt" title="Ghostfolio in Português">Português</a>
           </li>
+          <!--
+            <li>
+              <a href="../tr" title="Ghostfolio in Türkçe">Türkçe</a>
+            </li>
+          -->
         </ul>
       </div>
     </div>

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

@@ -4,31 +4,47 @@
   display: block;
   min-height: 100vh;
 
+  &.has-info-message {
+    header {
+      height: calc(2 * var(--mat-toolbar-standard-height));
+
+      .info-message-container {
+        height: var(--mat-toolbar-standard-height);
+
+        .info-message-inner-container {
+          background-color: rgba(var(--palette-primary-500), 1);
+          height: var(--mat-toolbar-standard-height);
+          z-index: 999;
+
+          .info-message {
+            color: rgba(var(--palette-foreground-text), 1);
+            font-size: 80%;
+            max-width: 100%;
+
+            .a {
+              font-weight: 500;
+            }
+          }
+        }
+      }
+    }
+
+    main {
+      min-height: calc(100vh - 2 * var(--mat-toolbar-standard-height));
+    }
+  }
+
   footer {
     background-color: rgba(var(--palette-foreground-text), 0.05);
     font-size: 90%;
   }
 
+  header {
+    height: var(--mat-toolbar-standard-height);
+  }
+
   main {
-    min-height: 100vh;
-    padding-top: 5rem;
-
-    .info-message-container {
-      height: 3.5rem;
-      margin-top: -0.5rem;
-
-      .info-message {
-        background-color: rgba(var(--palette-foreground-text), 0.05);
-        border-radius: 2rem;
-        font-size: 80%;
-        max-width: 100%;
-
-        .a {
-          color: rgba(var(--palette-primary-500), 1);
-          font-weight: 500;
-        }
-      }
-    }
+    min-height: calc(100vh - var(--mat-toolbar-standard-height));
   }
 }
 
@@ -36,12 +52,4 @@
   footer {
     background-color: rgba(var(--palette-foreground-text-dark), 0.05);
   }
-
-  main {
-    .info-message-container {
-      .info-message {
-        background-color: rgba(var(--palette-foreground-text-dark), 0.05);
-      }
-    }
-  }
 }

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

@@ -3,6 +3,7 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  HostBinding,
   Inject,
   OnDestroy,
   OnInit
@@ -28,14 +29,20 @@ import { UserService } from './services/user/user.service';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent implements OnDestroy, OnInit {
+  @HostBinding('class.has-info-message') get getHasMessage() {
+    return this.hasInfoMessage;
+  }
+
   public canCreateAccount: boolean;
   public currentRoute: string;
   public currentYear = new Date().getFullYear();
   public deviceType: string;
+  public hasInfoMessage: boolean;
   public hasPermissionForBlog: boolean;
   public hasPermissionForStatistics: boolean;
   public hasPermissionForSubscription: boolean;
   public hasPermissionToAccessFearAndGreedIndex: boolean;
+  public hasTabs = false;
   public info: InfoItem;
   public pageTitle: string;
   public routerLinkAbout = ['/' + $localize`about`];
@@ -103,6 +110,15 @@ export class AppComponent implements OnDestroy, OnInit {
         const urlSegments = urlSegmentGroup.segments;
         this.currentRoute = urlSegments[0].path;
 
+        this.hasTabs =
+          (this.currentRoute === this.routerLinkAbout[0].slice(1) ||
+            this.currentRoute === 'account' ||
+            this.currentRoute === 'admin' ||
+            this.currentRoute === 'home' ||
+            this.currentRoute === 'portfolio' ||
+            this.currentRoute === 'zen') &&
+          this.deviceType !== 'mobile';
+
         this.showFooter =
           (this.currentRoute === 'blog' ||
             this.currentRoute === this.routerLinkFaq[0].slice(1) ||
@@ -140,6 +156,12 @@ export class AppComponent implements OnDestroy, OnInit {
           permissions.createUserAccount
         );
 
+        this.hasInfoMessage =
+          hasPermission(
+            this.user?.permissions,
+            permissions.createUserAccount
+          ) || !!this.info.systemMessage;
+
         this.initializeTheme(this.user?.settings.colorScheme);
 
         this.changeDetectorRef.markForCheck();

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

@@ -1,3 +1,15 @@
+<div *ngIf="hasPermissionToCreateAccess" class="d-flex justify-content-end">
+  <a
+    color="primary"
+    i18n
+    mat-flat-button
+    [queryParams]="{ createDialog: true }"
+    [routerLink]="[]"
+  >
+    Add Access
+  </a>
+</div>
+
 <table class="gf-table w-100" mat-table [dataSource]="dataSource">
   <ng-container matColumnDef="alias">
     <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Alias</th>

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

@@ -19,6 +19,7 @@ import { Access } from '@ghostfolio/common/interfaces';
 })
 export class AccessTableComponent implements OnChanges, OnInit {
   @Input() accesses: Access[];
+  @Input() hasPermissionToCreateAccess = false;
   @Input() showActions: boolean;
 
   @Output() accessDeleted = new EventEmitter<string>();

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

@@ -3,13 +3,20 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatTableModule } from '@angular/material/table';
+import { RouterModule } from '@angular/router';
 
 import { AccessTableComponent } from './access-table.component';
 
 @NgModule({
   declarations: [AccessTableComponent],
   exports: [AccessTableComponent],
-  imports: [CommonModule, MatButtonModule, MatMenuModule, MatTableModule],
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatMenuModule,
+    MatTableModule,
+    RouterModule
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfPortfolioAccessTableModule {}

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

@@ -29,13 +29,13 @@ import { AccountDetailDialogParams } from './interfaces/interfaces';
   styleUrls: ['./account-detail-dialog.component.scss']
 })
 export class AccountDetailDialog implements OnDestroy, OnInit {
-  public accountType: string;
   public balance: number;
   public currency: string;
   public equity: number;
   public name: string;
   public orders: OrderWithAccount[];
   public platformName: string;
+  public transactionCount: number;
   public user: User;
   public valueInBaseCurrency: number;
 
@@ -65,15 +65,14 @@ export class AccountDetailDialog implements OnDestroy, OnInit {
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(
         ({
-          accountType,
           balance,
           currency,
           name,
           Platform,
+          transactionCount,
           value,
           valueInBaseCurrency
         }) => {
-          this.accountType = translate(accountType);
           this.balance = balance;
           this.currency = currency;
 
@@ -85,6 +84,7 @@ export class AccountDetailDialog implements OnDestroy, OnInit {
 
           this.name = name;
           this.platformName = Platform?.name ?? '-';
+          this.transactionCount = transactionCount;
           this.valueInBaseCurrency = valueInBaseCurrency;
 
           this.changeDetectorRef.markForCheck();

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

@@ -44,8 +44,8 @@
         >
       </div>
       <div class="col-6 mb-3">
-        <gf-value i18n size="medium" [value]="accountType"
-          >Account Type</gf-value
+        <gf-value i18n size="medium" [value]="transactionCount"
+          >Activities</gf-value
         >
       </div>
       <div class="col-6 mb-3">

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

@@ -85,7 +85,7 @@
   <ng-container matColumnDef="transactions">
     <th
       *matHeaderCellDef
-      class="px-1 text-right"
+      class="justify-content-end px-1"
       mat-header-cell
       mat-sort-header="transactionCount"
     >
@@ -93,9 +93,7 @@
       <span class="d-none d-sm-block" i18n>Activities</span>
     </th>
     <td *matCellDef="let element" class="px-1 text-right" mat-cell>
-      <ng-container *ngIf="element.accountType === 'SECURITIES'">{{
-        element.transactionCount
-      }}</ng-container>
+      {{ element.transactionCount }}
     </td>
     <td *matFooterCellDef class="px-1 text-right" mat-footer-cell>
       {{ transactionCount }}

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

@@ -146,9 +146,11 @@ export class AssetProfileDialog implements OnDestroy, OnInit {
       .postBenchmark({ dataSource, symbol })
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(() => {
-        setTimeout(() => {
-          window.location.reload();
-        }, 300);
+        this.dataService.updateInfo();
+
+        this.isBenchmark = true;
+
+        this.changeDetectorRef.markForCheck();
       });
   }
 
@@ -185,6 +187,19 @@ export class AssetProfileDialog implements OnDestroy, OnInit {
       });
   }
 
+  public onUnsetBenchmark({ dataSource, symbol }: UniqueAsset) {
+    this.dataService
+      .deleteBenchmark({ dataSource, symbol })
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(() => {
+        this.dataService.updateInfo();
+
+        this.isBenchmark = false;
+
+        this.changeDetectorRef.markForCheck();
+      });
+  }
+
   public ngOnDestroy() {
     this.unsubscribeSubject.next();
     this.unsubscribeSubject.complete();

apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.html

@@ -37,13 +37,6 @@
       >
         <ng-container i18n>Gather Profile Data</ng-container>
       </button>
-      <button
-        mat-menu-item
-        [disabled]="isBenchmark"
-        (click)="onSetBenchmark({dataSource: data.dataSource, symbol: data.symbol})"
-      >
-        <ng-container i18n>Set as Benchmark</ng-container>
-      </button>
     </mat-menu>
   </div>
 
@@ -151,6 +144,17 @@
         </ng-template>
       </ng-container>
     </div>
+    <div class="d-flex my-3">
+      <div class="w-50">
+        <mat-checkbox
+          color="primary"
+          i18n
+          [checked]="isBenchmark"
+          (change)="isBenchmark ? onUnsetBenchmark({dataSource: data.dataSource, symbol: data.symbol}) : onSetBenchmark({dataSource: data.dataSource, symbol: data.symbol})"
+          >Benchmark</mat-checkbox
+        >
+      </div>
+    </div>
     <div class="mt-3">
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Symbol Mapping</mat-label>

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

@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
@@ -21,6 +22,7 @@ import { AssetProfileDialog } from './asset-profile-dialog.component';
     GfPortfolioProportionChartModule,
     GfValueModule,
     MatButtonModule,
+    MatCheckboxModule,
     MatDialogModule,
     MatInputModule,
     MatMenuModule,

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

@@ -1,5 +1,6 @@
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { MatCheckboxChange } from '@angular/material/checkbox';
+import { environment } from '@ghostfolio/client/../environments/environment';
 import { AdminService } from '@ghostfolio/client/services/admin.service';
 import { CacheService } from '@ghostfolio/client/services/cache.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
@@ -42,6 +43,7 @@ export class AdminOverviewComponent implements OnDestroy, OnInit {
   public transactionCount: number;
   public userCount: number;
   public user: User;
+  public version = environment.version;
 
   private unsubscribeSubject = new Subject<void>();
 

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

@@ -3,6 +3,10 @@
     <div class="col">
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-content>
+          <div class="d-flex my-3">
+            <div class="w-50" i18n>Version</div>
+            <div class="w-50">{{ version }}</div>
+          </div>
           <div class="d-flex my-3">
             <div class="w-50" i18n>User Count</div>
             <div class="w-50">
@@ -72,19 +76,6 @@
               </div>
             </div>
           </div>
-          <div
-            *ngIf="info?.tags?.length > 0"
-            class="align-items-start d-flex my-3"
-          >
-            <div class="w-50" i18n>Tags</div>
-            <div class="w-50">
-              <table>
-                <tr *ngFor="let tag of info.tags">
-                  <td class="pl-1">{{ tag.name }}</td>
-                </tr>
-              </table>
-            </div>
-          </div>
           <div class="d-flex my-3">
             <div class="w-50" i18n>User Signup</div>
             <div class="w-50">

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

@@ -13,13 +13,14 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { CreatePlatformDto } from '@ghostfolio/api/app/platform/create-platform.dto';
 import { UpdatePlatformDto } from '@ghostfolio/api/app/platform/update-platform.dto';
 import { AdminService } from '@ghostfolio/client/services/admin.service';
+import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { Platform } from '@prisma/client';
 import { get } from 'lodash';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject, takeUntil } from 'rxjs';
 
-import { CreateOrUpdatePlatformDialog } from './create-or-update-platform-dialog/create-or-update-account-platform.component';
+import { CreateOrUpdatePlatformDialog } from './create-or-update-platform-dialog/create-or-update-platform-dialog.component';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -40,6 +41,7 @@ export class AdminPlatformComponent implements OnInit, OnDestroy {
   public constructor(
     private adminService: AdminService,
     private changeDetectorRef: ChangeDetectorRef,
+    private dataService: DataService,
     private deviceService: DeviceDetectorService,
     private dialog: MatDialog,
     private route: ActivatedRoute,
@@ -114,10 +116,13 @@ export class AdminPlatformComponent implements OnInit, OnDestroy {
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((platforms) => {
         this.platforms = platforms;
+
         this.dataSource = new MatTableDataSource(platforms);
         this.dataSource.sort = this.sort;
         this.dataSource.sortingDataAccessor = get;
 
+        this.dataService.updateInfo();
+
         this.changeDetectorRef.markForCheck();
       });
   }
@@ -130,7 +135,6 @@ export class AdminPlatformComponent implements OnInit, OnDestroy {
           url: null
         }
       },
-
       height: this.deviceType === 'mobile' ? '97.5vh' : '80vh',
       width: this.deviceType === 'mobile' ? '100vw' : '50rem'
     });
@@ -170,7 +174,6 @@ export class AdminPlatformComponent implements OnInit, OnDestroy {
           url
         }
       },
-
       height: this.deviceType === 'mobile' ? '97.5vh' : '80vh',
       width: this.deviceType === 'mobile' ? '100vw' : '50rem'
     });

apps/client/src/app/components/admin-platform/create-or-update-platform-dialog/create-or-update-platform-dialog.component.ts

@@ -15,8 +15,8 @@ export class CreateOrUpdatePlatformDialog {
   private unsubscribeSubject = new Subject<void>();
 
   public constructor(
-    public dialogRef: MatDialogRef<CreateOrUpdatePlatformDialog>,
-    @Inject(MAT_DIALOG_DATA) public data: CreateOrUpdatePlatformDialogParams
+    @Inject(MAT_DIALOG_DATA) public data: CreateOrUpdatePlatformDialogParams,
+    public dialogRef: MatDialogRef<CreateOrUpdatePlatformDialog>
   ) {}
 
   public onCancel() {

apps/client/src/app/components/admin-platform/create-or-update-platform-dialog/create-or-update-platform-dialog.module.ts

@@ -6,7 +6,7 @@ import { MatDialogModule } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 
-import { CreateOrUpdatePlatformDialog } from './create-or-update-account-platform.component';
+import { CreateOrUpdatePlatformDialog } from './create-or-update-platform-dialog.component';
 
 @NgModule({
   declarations: [CreateOrUpdatePlatformDialog],

apps/client/src/app/components/admin-settings/admin-settings.component.html

@@ -2,14 +2,13 @@
   <div class="mb-5 row">
     <div class="col">
       <h2 class="text-center" i18n>Platforms</h2>
-      <gf-admin-platform></gf-admin-platform>
+      <gf-admin-platform />
     </div>
   </div>
-  <!--
   <div class="row">
     <div class="col">
       <h2 class="text-center" i18n>Tags</h2>
+      <gf-admin-tag />
     </div>
   </div>
-  -->
 </div>

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

@@ -8,7 +8,6 @@ import { Subject } from 'rxjs';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  host: { class: 'page' },
   selector: 'gf-admin-settings',
   styleUrls: ['./admin-settings.component.scss'],
   templateUrl: './admin-settings.component.html'

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

@@ -2,12 +2,18 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { GfAdminPlatformModule } from '@ghostfolio/client/components/admin-platform/admin-platform.module';
+import { GfAdminTagModule } from '@ghostfolio/client/components/admin-tag/admin-tag.module';
 
 import { AdminSettingsComponent } from './admin-settings.component';
 
 @NgModule({
   declarations: [AdminSettingsComponent],
-  imports: [CommonModule, GfAdminPlatformModule, RouterModule],
+  imports: [
+    CommonModule,
+    GfAdminPlatformModule,
+    GfAdminTagModule,
+    RouterModule
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfAdminSettingsModule {}

apps/client/src/app/components/admin-tag/admin-tag.component.html

@@ -0,0 +1,85 @@
+<div class="container">
+  <div class="row">
+    <div class="col">
+      <div class="d-flex justify-content-end">
+        <a
+          color="primary"
+          i18n
+          mat-flat-button
+          [queryParams]="{ createTagDialog: true }"
+          [routerLink]="[]"
+        >
+          Add Tag
+        </a>
+      </div>
+      <table
+        class="gf-table w-100"
+        mat-table
+        matSort
+        matSortActive="name"
+        matSortDirection="asc"
+        [dataSource]="dataSource"
+      >
+        <ng-container matColumnDef="name">
+          <th
+            *matHeaderCellDef
+            class="px-1"
+            mat-header-cell
+            mat-sort-header="name"
+          >
+            <ng-container i18n>Name</ng-container>
+          </th>
+          <td *matCellDef="let element" class="px-1" mat-cell>
+            {{ element.name }}
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="activities">
+          <th
+            *matHeaderCellDef
+            class="px-1"
+            mat-header-cell
+            mat-sort-header="activityCount"
+          >
+            <ng-container i18n>Activities</ng-container>
+          </th>
+          <td *matCellDef="let element" class="px-1" mat-cell>
+            {{ element.activityCount }}
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="actions">
+          <th
+            *matHeaderCellDef
+            class="px-1 text-center"
+            i18n
+            mat-header-cell
+          ></th>
+          <td *matCellDef="let element" class="px-1 text-center" mat-cell>
+            <button
+              class="mx-1 no-min-width px-2"
+              mat-button
+              [matMenuTriggerFor]="tagMenu"
+              (click)="$event.stopPropagation()"
+            >
+              <ion-icon name="ellipsis-horizontal"></ion-icon>
+            </button>
+            <mat-menu #tagMenu="matMenu" xPosition="before">
+              <button mat-menu-item (click)="onUpdateTag(element)">
+                <ion-icon class="mr-2" name="create-outline"></ion-icon>
+                <span i18n>Edit</span>
+              </button>
+              <button mat-menu-item (click)="onDeleteTag(element.id)">
+                <ion-icon class="mr-2" name="trash-outline"></ion-icon>
+                <span i18n>Delete</span>
+              </button>
+            </mat-menu>
+          </td>
+        </ng-container>
+
+        <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
+        <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
+      </table>
+    </div>
+  </div>
+</div>

apps/client/src/app/components/admin-tag/admin-tag.component.scss

@@ -0,0 +1,5 @@
+@import 'apps/client/src/styles/ghostfolio-style';
+
+:host {
+  display: block;
+}

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

@@ -0,0 +1,204 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  OnDestroy,
+  OnInit,
+  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 { CreateTagDto } from '@ghostfolio/api/app/tag/create-tag.dto';
+import { UpdateTagDto } from '@ghostfolio/api/app/tag/update-tag.dto';
+import { AdminService } from '@ghostfolio/client/services/admin.service';
+import { DataService } from '@ghostfolio/client/services/data.service';
+import { UserService } from '@ghostfolio/client/services/user/user.service';
+import { Tag } from '@prisma/client';
+import { get } from 'lodash';
+import { DeviceDetectorService } from 'ngx-device-detector';
+import { Subject, takeUntil } from 'rxjs';
+
+import { CreateOrUpdateTagDialog } from './create-or-update-tag-dialog/create-or-update-tag-dialog.component';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'gf-admin-tag',
+  styleUrls: ['./admin-tag.component.scss'],
+  templateUrl: './admin-tag.component.html'
+})
+export class AdminTagComponent implements OnInit, OnDestroy {
+  @ViewChild(MatSort) sort: MatSort;
+
+  public dataSource: MatTableDataSource<Tag> = new MatTableDataSource();
+  public deviceType: string;
+  public displayedColumns = ['name', 'activities', 'actions'];
+  public tags: Tag[];
+
+  private unsubscribeSubject = new Subject<void>();
+
+  public constructor(
+    private adminService: AdminService,
+    private changeDetectorRef: ChangeDetectorRef,
+    private dataService: DataService,
+    private deviceService: DeviceDetectorService,
+    private dialog: MatDialog,
+    private route: ActivatedRoute,
+    private router: Router,
+    private userService: UserService
+  ) {
+    this.route.queryParams
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((params) => {
+        if (params['createTagDialog']) {
+          this.openCreateTagDialog();
+        } else if (params['editTagDialog']) {
+          if (this.tags) {
+            const tag = this.tags.find(({ id }) => {
+              return id === params['tagId'];
+            });
+
+            this.openUpdateTagDialog(tag);
+          } else {
+            this.router.navigate(['.'], { relativeTo: this.route });
+          }
+        }
+      });
+  }
+
+  public ngOnInit() {
+    this.deviceType = this.deviceService.getDeviceInfo().deviceType;
+
+    this.fetchTags();
+  }
+
+  public onDeleteTag(aId: string) {
+    const confirmation = confirm(
+      $localize`Do you really want to delete this tag?`
+    );
+
+    if (confirmation) {
+      this.deleteTag(aId);
+    }
+  }
+
+  public onUpdateTag({ id }: Tag) {
+    this.router.navigate([], {
+      queryParams: { editTagDialog: true, tagId: id }
+    });
+  }
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+
+  private deleteTag(aId: string) {
+    this.adminService
+      .deleteTag(aId)
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe({
+        next: () => {
+          this.userService
+            .get(true)
+            .pipe(takeUntil(this.unsubscribeSubject))
+            .subscribe();
+
+          this.fetchTags();
+        }
+      });
+  }
+
+  private fetchTags() {
+    this.adminService
+      .fetchTags()
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((tags) => {
+        this.tags = tags;
+
+        this.dataSource = new MatTableDataSource(this.tags);
+        this.dataSource.sort = this.sort;
+        this.dataSource.sortingDataAccessor = get;
+
+        this.dataService.updateInfo();
+
+        this.changeDetectorRef.markForCheck();
+      });
+  }
+
+  private openCreateTagDialog() {
+    const dialogRef = this.dialog.open(CreateOrUpdateTagDialog, {
+      data: {
+        tag: {
+          name: null
+        }
+      },
+      height: this.deviceType === 'mobile' ? '97.5vh' : '80vh',
+      width: this.deviceType === 'mobile' ? '100vw' : '50rem'
+    });
+
+    dialogRef
+      .afterClosed()
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((data) => {
+        const tag: CreateTagDto = data?.tag;
+
+        if (tag) {
+          this.adminService
+            .postTag(tag)
+            .pipe(takeUntil(this.unsubscribeSubject))
+            .subscribe({
+              next: () => {
+                this.userService
+                  .get(true)
+                  .pipe(takeUntil(this.unsubscribeSubject))
+                  .subscribe();
+
+                this.fetchTags();
+              }
+            });
+        }
+
+        this.router.navigate(['.'], { relativeTo: this.route });
+      });
+  }
+
+  private openUpdateTagDialog({ id, name }) {
+    const dialogRef = this.dialog.open(CreateOrUpdateTagDialog, {
+      data: {
+        tag: {
+          id,
+          name
+        }
+      },
+      height: this.deviceType === 'mobile' ? '97.5vh' : '80vh',
+      width: this.deviceType === 'mobile' ? '100vw' : '50rem'
+    });
+
+    dialogRef
+      .afterClosed()
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((data) => {
+        const tag: UpdateTagDto = data?.tag;
+
+        if (tag) {
+          this.adminService
+            .putTag(tag)
+            .pipe(takeUntil(this.unsubscribeSubject))
+            .subscribe({
+              next: () => {
+                this.userService
+                  .get(true)
+                  .pipe(takeUntil(this.unsubscribeSubject))
+                  .subscribe();
+
+                this.fetchTags();
+              }
+            });
+        }
+
+        this.router.navigate(['.'], { relativeTo: this.route });
+      });
+  }
+}

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

@@ -0,0 +1,26 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { RouterModule } from '@angular/router';
+
+import { AdminTagComponent } from './admin-tag.component';
+import { GfCreateOrUpdateTagDialogModule } from './create-or-update-tag-dialog/create-or-update-tag-dialog.module';
+
+@NgModule({
+  declarations: [AdminTagComponent],
+  exports: [AdminTagComponent],
+  imports: [
+    CommonModule,
+    GfCreateOrUpdateTagDialogModule,
+    MatButtonModule,
+    MatMenuModule,
+    MatSortModule,
+    MatTableModule,
+    RouterModule
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class GfAdminTagModule {}

apps/client/src/app/components/admin-tag/create-or-update-tag-dialog/create-or-update-tag-dialog.component.ts

@@ -0,0 +1,30 @@
+import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { Subject } from 'rxjs';
+
+import { CreateOrUpdateTagDialogParams } from './interfaces/interfaces';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { class: 'h-100' },
+  selector: 'gf-create-or-update-tag-dialog',
+  styleUrls: ['./create-or-update-tag-dialog.scss'],
+  templateUrl: 'create-or-update-tag-dialog.html'
+})
+export class CreateOrUpdateTagDialog {
+  private unsubscribeSubject = new Subject<void>();
+
+  public constructor(
+    @Inject(MAT_DIALOG_DATA) public data: CreateOrUpdateTagDialogParams,
+    public dialogRef: MatDialogRef<CreateOrUpdateTagDialog>
+  ) {}
+
+  public onCancel() {
+    this.dialogRef.close();
+  }
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+}

apps/client/src/app/components/admin-tag/create-or-update-tag-dialog/create-or-update-tag-dialog.html

@@ -0,0 +1,23 @@
+<form #addTagForm="ngForm" class="d-flex flex-column h-100">
+  <h1 *ngIf="data.tag.id" i18n mat-dialog-title>Update tag</h1>
+  <h1 *ngIf="!data.tag.id" i18n mat-dialog-title>Add tag</h1>
+  <div class="flex-grow-1 py-3" mat-dialog-content>
+    <div>
+      <mat-form-field appearance="outline" class="w-100">
+        <mat-label i18n>Name</mat-label>
+        <input matInput name="name" required [(ngModel)]="data.tag.name" />
+      </mat-form-field>
+    </div>
+  </div>
+  <div class="justify-content-end" mat-dialog-actions>
+    <button i18n mat-button (click)="onCancel()">Cancel</button>
+    <button
+      color="primary"
+      mat-flat-button
+      [disabled]="!addTagForm.form.valid"
+      [mat-dialog-close]="data"
+    >
+      <ng-container i18n>Save</ng-container>
+    </button>
+  </div>
+</form>

apps/client/src/app/components/admin-tag/create-or-update-tag-dialog/create-or-update-tag-dialog.module.ts

@@ -0,0 +1,23 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+
+import { CreateOrUpdateTagDialog } from './create-or-update-tag-dialog.component';
+
+@NgModule({
+  declarations: [CreateOrUpdateTagDialog],
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatInputModule,
+    ReactiveFormsModule
+  ]
+})
+export class GfCreateOrUpdateTagDialogModule {}

apps/client/src/app/components/admin-tag/create-or-update-tag-dialog/interfaces/interfaces.ts

@@ -0,0 +1,5 @@
+import { Tag } from '@prisma/client';
+
+export interface CreateOrUpdateTagDialogParams {
+  tag: Tag;
+}

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

@@ -1,14 +1,17 @@
-<mat-toolbar class="px-2">
+<mat-toolbar class="px-0">
   <ng-container *ngIf="user">
-    <a
-      class="align-items-center d-flex h-100 no-min-width px-2 rounded-0"
-      mat-button
-      [routerLink]="['/']"
-    >
-      <gf-logo [label]="pageTitle"></gf-logo>
-    </a>
+    <div class="d-flex h-100 logo-container" [ngClass]="{ filled: hasTabs }">
+      <a
+        class="align-items-center justify-content-start rounded-0"
+        mat-button
+        [ngClass]="{ 'w-100': hasTabs }"
+        [routerLink]="['/']"
+      >
+        <gf-logo class="px-2" [label]="pageTitle"></gf-logo>
+      </a>
+    </div>
     <span class="spacer"></span>
-    <ul class="alig-items-center d-flex list-inline m-0">
+    <ul class="alig-items-center d-flex list-inline m-0 px-2">
       <li class="list-inline-item">
         <a
           class="d-none d-sm-block"
@@ -246,18 +249,22 @@
     </ul>
   </ng-container>
   <ng-container *ngIf="user === null">
-    <a
-      class="align-items-center d-flex h-100 mx-2 no-min-width px-2 rounded-0"
-      mat-button
-      [routerLink]="['/']"
-    >
-      <gf-logo
-        [label]="pageTitle"
-        [showLabel]="currentRoute !== 'register'"
-      ></gf-logo>
-    </a>
+    <div class="d-flex h-100 logo-container" [ngClass]="{ filled: hasTabs }">
+      <a
+        class="align-items-center justify-content-start rounded-0"
+        mat-button
+        [ngClass]="{ 'w-100': hasTabs }"
+        [routerLink]="['/']"
+      >
+        <gf-logo
+          class="px-2"
+          [label]="pageTitle"
+          [showLabel]="currentRoute !== 'register'"
+        ></gf-logo>
+      </a>
+    </div>
     <span class="spacer"></span>
-    <ul class="alig-items-center d-flex list-inline m-0">
+    <ul class="alig-items-center d-flex list-inline m-0 px-2">
       <li class="list-inline-item">
         <a
           class="d-none d-sm-block"

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

@@ -7,6 +7,16 @@
   .mat-toolbar {
     background-color: var(--light-background);
 
+    .logo-container {
+      &.filled {
+        background-color: rgba(var(--palette-foreground-base), 0.02);
+      }
+
+      @media (min-width: 576px) {
+        width: 14rem;
+      }
+    }
+
     .list-inline-item {
       margin: 0;
     }
@@ -34,5 +44,11 @@
 :host-context(.is-dark-theme) {
   .mat-toolbar {
     background-color: var(--dark-background);
+
+    .logo-container {
+      &.filled {
+        background-color: rgba(var(--palette-foreground-base-dark), 0.02);
+      }
+    }
   }
 }

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

@@ -29,6 +29,7 @@ import { catchError, takeUntil } from 'rxjs/operators';
 })
 export class HeaderComponent implements OnChanges {
   @Input() currentRoute: string;
+  @Input() hasTabs: boolean;
   @Input() info: InfoItem;
   @Input() pageTitle: string;
   @Input() user: User;

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

@@ -5,6 +5,15 @@
       <gf-value class="justify-content-end" [value]="timeInMarket"></gf-value>
     </div>
   </div>
+  <div
+    class="flex-nowrap px-3 py-1 row"
+    [hidden]="summary?.ordersCount === null"
+  >
+    <div class="flex-grow-1 ml-3 text-truncate" i18n>
+      {{ summary?.ordersCount }} {summary?.ordersCount, plural, =1 {transaction}
+      other {transactions}}
+    </div>
+  </div>
   <div class="row">
     <div class="col"><hr /></div>
   </div>
@@ -75,10 +84,7 @@
     </div>
   </div>
   <div class="flex-nowrap px-3 py-1 row">
-    <div class="flex-grow-1 text-truncate" i18n>
-      Fees for {{ summary?.ordersCount }} {summary?.ordersCount, plural, =1
-      {transaction} other {transactions}}
-    </div>
+    <div class="flex-grow-1 text-truncate" i18n>Fees</div>
     <div class="d-flex justify-content-end">
       <span *ngIf="summary?.fees || summary?.fees === 0" class="mr-1">-</span>
       <gf-value
@@ -270,6 +276,18 @@
   <div class="row">
     <div class="col"><hr /></div>
   </div>
+  <div class="flex-nowrap px-3 py-1 row">
+    <div class="flex-grow-1 text-truncate" i18n>Interest</div>
+    <div class="justify-content-end">
+      <gf-value
+        class="justify-content-end"
+        [isCurrency]="true"
+        [locale]="locale"
+        [unit]="baseCurrency"
+        [value]="isLoading ? undefined : summary?.interest"
+      ></gf-value>
+    </div>
+  </div>
   <div class="flex-nowrap px-3 py-1 row">
     <div class="flex-grow-1 text-truncate" i18n>Dividend</div>
     <div class="justify-content-end">

apps/client/src/app/components/user-account-access/create-or-update-access-dialog/create-or-update-access-dialog.scss

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

apps/client/src/app/components/user-account-access/user-account-access.component.ts

@@ -0,0 +1,146 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  OnDestroy,
+  OnInit
+} from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { ActivatedRoute, Router } from '@angular/router';
+import { CreateAccessDto } from '@ghostfolio/api/app/access/create-access.dto';
+import { DataService } from '@ghostfolio/client/services/data.service';
+import { UserService } from '@ghostfolio/client/services/user/user.service';
+import { Access, User } from '@ghostfolio/common/interfaces';
+import { hasPermission, permissions } from '@ghostfolio/common/permissions';
+import { DeviceDetectorService } from 'ngx-device-detector';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import { CreateOrUpdateAccessDialog } from './create-or-update-access-dialog/create-or-update-access-dialog.component';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'gf-user-account-access',
+  styleUrls: ['./user-account-access.scss'],
+  templateUrl: './user-account-access.html'
+})
+export class UserAccountAccessComponent implements OnDestroy, OnInit {
+  public accesses: Access[];
+  public deviceType: string;
+  public hasPermissionToCreateAccess: boolean;
+  public hasPermissionToDeleteAccess: boolean;
+  public user: User;
+
+  private unsubscribeSubject = new Subject<void>();
+
+  public constructor(
+    private changeDetectorRef: ChangeDetectorRef,
+    private dataService: DataService,
+    private deviceService: DeviceDetectorService,
+    private dialog: MatDialog,
+    private route: ActivatedRoute,
+    private router: Router,
+    private userService: UserService
+  ) {
+    const { globalPermissions } = this.dataService.fetchInfo();
+
+    this.hasPermissionToDeleteAccess = hasPermission(
+      globalPermissions,
+      permissions.deleteAccess
+    );
+
+    this.userService.stateChanged
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((state) => {
+        if (state?.user) {
+          this.user = state.user;
+
+          this.hasPermissionToCreateAccess = hasPermission(
+            this.user.permissions,
+            permissions.createAccess
+          );
+
+          this.hasPermissionToDeleteAccess = hasPermission(
+            this.user.permissions,
+            permissions.deleteAccess
+          );
+
+          this.changeDetectorRef.markForCheck();
+        }
+      });
+
+    this.route.queryParams
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((params) => {
+        if (params['createDialog']) {
+          this.openCreateAccessDialog();
+        }
+      });
+  }
+
+  public ngOnInit() {
+    this.deviceType = this.deviceService.getDeviceInfo().deviceType;
+
+    this.update();
+  }
+
+  public onDeleteAccess(aId: string) {
+    this.dataService
+      .deleteAccess(aId)
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe({
+        next: () => {
+          this.update();
+        }
+      });
+  }
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+
+  private openCreateAccessDialog(): void {
+    const dialogRef = this.dialog.open(CreateOrUpdateAccessDialog, {
+      data: {
+        access: {
+          alias: '',
+          type: 'PUBLIC'
+        }
+      },
+      height: this.deviceType === 'mobile' ? '97.5vh' : '80vh',
+      width: this.deviceType === 'mobile' ? '100vw' : '50rem'
+    });
+
+    dialogRef
+      .afterClosed()
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((data: any) => {
+        const access: CreateAccessDto = data?.access;
+
+        if (access) {
+          this.dataService
+            .postAccess({ alias: access.alias })
+            .pipe(takeUntil(this.unsubscribeSubject))
+            .subscribe({
+              next: () => {
+                this.update();
+              }
+            });
+        }
+
+        this.router.navigate(['.'], { relativeTo: this.route });
+      });
+  }
+
+  private update() {
+    this.dataService
+      .fetchAccesses()
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((accesses) => {
+        this.accesses = accesses;
+
+        this.changeDetectorRef.markForCheck();
+      });
+  }
+}

apps/client/src/app/components/user-account-access/user-account-access.html

@@ -0,0 +1,17 @@
+<div class="container">
+  <h1
+    class="align-items-center d-none d-sm-flex h3 justify-content-center mb-3 text-center"
+  >
+    <span i18n>Granted Access</span>
+    <gf-premium-indicator
+      *ngIf="user?.subscription?.type === 'Basic'"
+      class="ml-1"
+    ></gf-premium-indicator>
+  </h1>
+  <gf-access-table
+    [accesses]="accesses"
+    [hasPermissionToCreateAccess]="hasPermissionToCreateAccess"
+    [showActions]="hasPermissionToDeleteAccess"
+    (accessDeleted)="onDeleteAccess($event)"
+  ></gf-access-table>
+</div>

apps/client/src/app/components/user-account-access/user-account-access.module.ts

@@ -0,0 +1,23 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatDialogModule } from '@angular/material/dialog';
+import { RouterModule } from '@angular/router';
+import { GfPortfolioAccessTableModule } from '@ghostfolio/client/components/access-table/access-table.module';
+import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
+
+import { GfCreateOrUpdateAccessDialogModule } from './create-or-update-access-dialog/create-or-update-access-dialog.module';
+import { UserAccountAccessComponent } from './user-account-access.component';
+
+@NgModule({
+  declarations: [UserAccountAccessComponent],
+  exports: [UserAccountAccessComponent],
+  imports: [
+    CommonModule,
+    GfCreateOrUpdateAccessDialogModule,
+    GfPortfolioAccessTableModule,
+    GfPremiumIndicatorModule,
+    MatDialogModule,
+    RouterModule
+  ]
+})
+export class GfUserAccountAccessModule {}

apps/client/src/app/components/user-account-access/user-account-access.scss

@@ -0,0 +1,12 @@
+:host {
+  color: rgb(var(--dark-primary-text));
+  display: block;
+
+  gf-access-table {
+    overflow-x: auto;
+  }
+}
+
+:host-context(.is-dark-theme) {
+  color: rgb(var(--light-primary-text));
+}

apps/client/src/app/components/user-account-membership/user-account-membership.component.ts

@@ -0,0 +1,160 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  OnDestroy,
+  OnInit
+} from '@angular/core';
+import {
+  MatSnackBar,
+  MatSnackBarRef,
+  TextOnlySnackBar
+} from '@angular/material/snack-bar';
+import { DataService } from '@ghostfolio/client/services/data.service';
+import { UserService } from '@ghostfolio/client/services/user/user.service';
+import { getDateFormatString } from '@ghostfolio/common/helper';
+import { User } from '@ghostfolio/common/interfaces';
+import { hasPermission, permissions } from '@ghostfolio/common/permissions';
+import { StripeService } from 'ngx-stripe';
+import { EMPTY, Subject } from 'rxjs';
+import { catchError, switchMap, takeUntil } from 'rxjs/operators';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'gf-user-account-membership',
+  styleUrls: ['./user-account-membership.scss'],
+  templateUrl: './user-account-membership.html'
+})
+export class UserAccountMembershipComponent implements OnDestroy, OnInit {
+  public baseCurrency: string;
+  public coupon: number;
+  public couponId: string;
+  public defaultDateFormat: string;
+  public hasPermissionForSubscription: boolean;
+  public hasPermissionToUpdateUserSettings: boolean;
+  public price: number;
+  public priceId: string;
+  public routerLinkPricing = ['/' + $localize`pricing`];
+  public snackBarRef: MatSnackBarRef<TextOnlySnackBar>;
+  public trySubscriptionMail =
+    'mailto:hi@ghostfol.io?Subject=Ghostfolio Premium Trial&body=Hello%0D%0DI am interested in Ghostfolio Premium. Can you please send me a coupon code to try it for some time?%0D%0DKind regards';
+  public user: User;
+
+  private unsubscribeSubject = new Subject<void>();
+
+  public constructor(
+    private changeDetectorRef: ChangeDetectorRef,
+    private dataService: DataService,
+    private snackBar: MatSnackBar,
+    private stripeService: StripeService,
+    private userService: UserService
+  ) {
+    const { baseCurrency, globalPermissions, subscriptions } =
+      this.dataService.fetchInfo();
+
+    this.baseCurrency = baseCurrency;
+
+    this.hasPermissionForSubscription = hasPermission(
+      globalPermissions,
+      permissions.enableSubscription
+    );
+
+    this.userService.stateChanged
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((state) => {
+        if (state?.user) {
+          this.user = state.user;
+
+          this.defaultDateFormat = getDateFormatString(
+            this.user.settings.locale
+          );
+
+          this.hasPermissionToUpdateUserSettings = hasPermission(
+            this.user.permissions,
+            permissions.updateUserSettings
+          );
+
+          this.coupon = subscriptions?.[this.user.subscription.offer]?.coupon;
+          this.couponId =
+            subscriptions?.[this.user.subscription.offer]?.couponId;
+          this.price = subscriptions?.[this.user.subscription.offer]?.price;
+          this.priceId = subscriptions?.[this.user.subscription.offer]?.priceId;
+
+          this.changeDetectorRef.markForCheck();
+        }
+      });
+  }
+
+  public ngOnInit() {}
+
+  public onCheckout() {
+    this.dataService
+      .createCheckoutSession({ couponId: this.couponId, priceId: this.priceId })
+      .pipe(
+        switchMap(({ sessionId }: { sessionId: string }) => {
+          return this.stripeService.redirectToCheckout({ sessionId });
+        }),
+        catchError((error) => {
+          alert(error.message);
+          throw error;
+        })
+      )
+      .subscribe((result) => {
+        if (result.error) {
+          alert(result.error.message);
+        }
+      });
+  }
+
+  public onRedeemCoupon() {
+    let couponCode = prompt($localize`Please enter your coupon code:`);
+    couponCode = couponCode?.trim();
+
+    if (couponCode) {
+      this.dataService
+        .redeemCoupon(couponCode)
+        .pipe(
+          takeUntil(this.unsubscribeSubject),
+          catchError(() => {
+            this.snackBar.open(
+              '😞 ' + $localize`Could not redeem coupon code`,
+              undefined,
+              {
+                duration: 3000
+              }
+            );
+
+            return EMPTY;
+          })
+        )
+        .subscribe(() => {
+          this.snackBarRef = this.snackBar.open(
+            '✅ ' + $localize`Coupon code has been redeemed`,
+            $localize`Reload`,
+            {
+              duration: 3000
+            }
+          );
+
+          this.snackBarRef
+            .afterDismissed()
+            .pipe(takeUntil(this.unsubscribeSubject))
+            .subscribe(() => {
+              window.location.reload();
+            });
+
+          this.snackBarRef
+            .onAction()
+            .pipe(takeUntil(this.unsubscribeSubject))
+            .subscribe(() => {
+              window.location.reload();
+            });
+        });
+    }
+  }
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+}

apps/client/src/app/components/user-account-membership/user-account-membership.html

@@ -0,0 +1,69 @@
+<div class="container">
+  <h1 class="d-none d-sm-block h3 mb-3 text-center" i18n>Membership</h1>
+  <div class="row">
+    <div class="col">
+      <div class="d-flex">
+        <div class="mx-auto">
+          <div class="align-items-center d-flex mb-1">
+            <a [routerLink]="routerLinkPricing"
+              >{{ user?.subscription?.type }}</a
+            >
+            <gf-premium-indicator
+              *ngIf="user?.subscription?.type === 'Premium'"
+              class="ml-1"
+            ></gf-premium-indicator>
+          </div>
+          <div *ngIf="user?.subscription?.type === 'Premium'">
+            <ng-container i18n>Valid until</ng-container> {{
+            user?.subscription?.expiresAt | date: defaultDateFormat }}
+          </div>
+          <div *ngIf="user?.subscription?.type === 'Basic'">
+            <ng-container
+              *ngIf="hasPermissionForSubscription && hasPermissionToUpdateUserSettings"
+            >
+              <button color="primary" mat-flat-button (click)="onCheckout()">
+                <ng-container *ngIf="user.subscription.offer === 'default'" i18n
+                  >Upgrade</ng-container
+                >
+                <ng-container *ngIf="user.subscription.offer === 'renewal'" i18n
+                  >Renew</ng-container
+                >
+              </button>
+              <div *ngIf="price" class="mt-1">
+                <ng-container *ngIf="coupon"
+                  ><del class="text-muted"
+                    >{{ baseCurrency }}&nbsp;{{ price }}</del
+                  >&nbsp;{{ baseCurrency }}&nbsp;{{ price - coupon
+                  }}</ng-container
+                >
+                <ng-container *ngIf="!coupon"
+                  >{{ baseCurrency }}&nbsp;{{ price }}</ng-container
+                >&nbsp;<span i18n>per year</span>
+              </div>
+            </ng-container>
+            <a
+              *ngIf="!user?.subscription?.expiresAt"
+              class="mr-2 my-2"
+              mat-stroked-button
+              [href]="trySubscriptionMail"
+              ><span i18n>Try Premium</span>
+              <gf-premium-indicator
+                class="d-inline-block ml-1"
+                [enableLink]="false"
+              ></gf-premium-indicator
+            ></a>
+            <a
+              *ngIf="hasPermissionToUpdateUserSettings"
+              class="mr-2 my-2"
+              i18n
+              mat-stroked-button
+              [routerLink]=""
+              (click)="onRedeemCoupon()"
+              >Redeem Coupon</a
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

apps/client/src/app/components/user-account-membership/user-account-membership.module.ts

@@ -0,0 +1,23 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { RouterModule } from '@angular/router';
+import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
+import { GfValueModule } from '@ghostfolio/ui/value';
+
+import { UserAccountMembershipComponent } from './user-account-membership.component';
+
+@NgModule({
+  declarations: [UserAccountMembershipComponent],
+  exports: [UserAccountMembershipComponent],
+  imports: [
+    CommonModule,
+    GfPremiumIndicatorModule,
+    GfValueModule,
+    MatButtonModule,
+    MatCardModule,
+    RouterModule
+  ]
+})
+export class GfUserAccountMembershipModule {}

apps/client/src/app/components/user-account-membership/user-account-membership.scss

@@ -0,0 +1,8 @@
+:host {
+  color: rgb(var(--dark-primary-text));
+  display: block;
+}
+
+:host-context(.is-dark-theme) {
+  color: rgb(var(--light-primary-text));
+}

apps/client/src/app/components/user-account-settings/user-account-settings.component.ts

@@ -0,0 +1,258 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  OnDestroy,
+  OnInit,
+  ViewChild
+} from '@angular/core';
+import { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';
+import { DataService } from '@ghostfolio/client/services/data.service';
+import {
+  STAY_SIGNED_IN,
+  SettingsStorageService
+} from '@ghostfolio/client/services/settings-storage.service';
+import { UserService } from '@ghostfolio/client/services/user/user.service';
+import { WebAuthnService } from '@ghostfolio/client/services/web-authn.service';
+import { downloadAsFile } from '@ghostfolio/common/helper';
+import { User } from '@ghostfolio/common/interfaces';
+import { hasPermission, permissions } from '@ghostfolio/common/permissions';
+import { format, parseISO } from 'date-fns';
+import { uniq } from 'lodash';
+import { EMPTY, Subject } from 'rxjs';
+import { catchError, takeUntil } from 'rxjs/operators';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'gf-user-account-settings',
+  styleUrls: ['./user-account-settings.scss'],
+  templateUrl: './user-account-settings.html'
+})
+export class UserAccountSettingsComponent implements OnDestroy, OnInit {
+  @ViewChild('toggleSignInWithFingerprintEnabledElement')
+  signInWithFingerprintElement: MatCheckbox;
+
+  public appearancePlaceholder = $localize`Auto`;
+  public baseCurrency: string;
+  public currencies: string[] = [];
+  public hasPermissionToUpdateViewMode: boolean;
+  public hasPermissionToUpdateUserSettings: boolean;
+  public language = document.documentElement.lang;
+  public locales = [
+    'de',
+    'de-CH',
+    'en-GB',
+    'en-US',
+    'es',
+    'fr',
+    'it',
+    'nl',
+    'pt',
+    'tr'
+  ];
+  public user: User;
+
+  private unsubscribeSubject = new Subject<void>();
+
+  public constructor(
+    private changeDetectorRef: ChangeDetectorRef,
+    private dataService: DataService,
+    private settingsStorageService: SettingsStorageService,
+    private userService: UserService,
+    public webAuthnService: WebAuthnService
+  ) {
+    const { baseCurrency, currencies } = this.dataService.fetchInfo();
+
+    this.baseCurrency = baseCurrency;
+    this.currencies = currencies;
+
+    this.userService.stateChanged
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((state) => {
+        if (state?.user) {
+          this.user = state.user;
+
+          this.hasPermissionToUpdateUserSettings = hasPermission(
+            this.user.permissions,
+            permissions.updateUserSettings
+          );
+
+          this.hasPermissionToUpdateViewMode = hasPermission(
+            this.user.permissions,
+            permissions.updateViewMode
+          );
+
+          this.locales.push(this.user.settings.locale);
+          this.locales = uniq(this.locales.sort());
+
+          this.changeDetectorRef.markForCheck();
+        }
+      });
+  }
+
+  public ngOnInit() {
+    this.update();
+  }
+
+  public onChangeUserSetting(aKey: string, aValue: string) {
+    this.dataService
+      .putUserSetting({ [aKey]: aValue })
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(() => {
+        this.userService.remove();
+
+        this.userService
+          .get()
+          .pipe(takeUntil(this.unsubscribeSubject))
+          .subscribe((user) => {
+            this.user = user;
+
+            this.changeDetectorRef.markForCheck();
+
+            if (aKey === 'language') {
+              if (aValue) {
+                window.location.href = `../${aValue}/account`;
+              } else {
+                window.location.href = `../`;
+              }
+            }
+          });
+      });
+  }
+
+  public onExperimentalFeaturesChange(aEvent: MatCheckboxChange) {
+    this.dataService
+      .putUserSetting({ isExperimentalFeatures: aEvent.checked })
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(() => {
+        this.userService.remove();
+
+        this.userService
+          .get()
+          .pipe(takeUntil(this.unsubscribeSubject))
+          .subscribe((user) => {
+            this.user = user;
+
+            this.changeDetectorRef.markForCheck();
+          });
+      });
+  }
+
+  public onExport() {
+    this.dataService
+      .fetchExport()
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((data) => {
+        for (const activity of data.activities) {
+          delete activity.id;
+        }
+
+        downloadAsFile({
+          content: data,
+          fileName: `ghostfolio-export-${format(
+            parseISO(data.meta.date),
+            'yyyyMMddHHmm'
+          )}.json`,
+          format: 'json'
+        });
+      });
+  }
+
+  public onRestrictedViewChange(aEvent: MatCheckboxChange) {
+    this.dataService
+      .putUserSetting({ isRestrictedView: aEvent.checked })
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(() => {
+        this.userService.remove();
+
+        this.userService
+          .get()
+          .pipe(takeUntil(this.unsubscribeSubject))
+          .subscribe((user) => {
+            this.user = user;
+
+            this.changeDetectorRef.markForCheck();
+          });
+      });
+  }
+
+  public onSignInWithFingerprintChange(aEvent: MatCheckboxChange) {
+    if (aEvent.checked) {
+      this.registerDevice();
+    } else {
+      const confirmation = confirm(
+        $localize`Do you really want to remove this sign in method?`
+      );
+
+      if (confirmation) {
+        this.deregisterDevice();
+      } else {
+        this.update();
+      }
+    }
+  }
+
+  public onViewModeChange(aEvent: MatCheckboxChange) {
+    this.dataService
+      .putUserSetting({ viewMode: aEvent.checked === true ? 'ZEN' : 'DEFAULT' })
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(() => {
+        this.userService.remove();
+
+        this.userService
+          .get()
+          .pipe(takeUntil(this.unsubscribeSubject))
+          .subscribe((user) => {
+            this.user = user;
+
+            this.changeDetectorRef.markForCheck();
+          });
+      });
+  }
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+
+  private deregisterDevice() {
+    this.webAuthnService
+      .deregister()
+      .pipe(
+        takeUntil(this.unsubscribeSubject),
+        catchError(() => {
+          this.update();
+
+          return EMPTY;
+        })
+      )
+      .subscribe(() => {
+        this.update();
+      });
+  }
+
+  private registerDevice() {
+    this.webAuthnService
+      .register()
+      .pipe(
+        takeUntil(this.unsubscribeSubject),
+        catchError(() => {
+          this.update();
+
+          return EMPTY;
+        })
+      )
+      .subscribe(() => {
+        this.settingsStorageService.removeSetting(STAY_SIGNED_IN);
+
+        this.update();
+      });
+  }
+
+  private update() {
+    if (this.signInWithFingerprintElement) {
+      this.signInWithFingerprintElement.checked =
+        this.webAuthnService.isEnabled() ?? false;
+    }
+  }
+}

apps/client/src/app/components/user-account-settings/user-account-settings.html

@@ -0,0 +1,197 @@
+<div class="container">
+  <h1 class="d-none d-sm-block h3 mb-3 text-center" i18n>Settings</h1>
+  <div class="row">
+    <div class="col">
+      <div class="align-items-center d-flex py-1">
+        <div class="pr-1 w-50">
+          <div i18n>Presenter View</div>
+          <div class="hint-text text-muted" i18n>
+            Protection for sensitive information like absolute performances and
+            quantity values
+          </div>
+        </div>
+        <div class="pl-1 w-50">
+          <mat-checkbox
+            color="primary"
+            [checked]="user.settings.isRestrictedView"
+            [disabled]="!hasPermissionToUpdateUserSettings"
+            (change)="onRestrictedViewChange($event)"
+          ></mat-checkbox>
+        </div>
+      </div>
+      <div class="d-flex mt-4 py-1">
+        <form #changeUserSettingsForm="ngForm" class="w-100">
+          <div class="d-flex mb-2">
+            <div class="align-items-center d-flex pt-1 pt-1 w-50">
+              <ng-container i18n>Base Currency</ng-container>
+            </div>
+            <div class="pl-1 w-50">
+              <mat-form-field appearance="outline" class="w-100 without-hint">
+                <mat-select
+                  name="baseCurrency"
+                  [disabled]="!hasPermissionToUpdateUserSettings"
+                  [value]="user.settings.baseCurrency"
+                  (selectionChange)="onChangeUserSetting('baseCurrency', $event.value)"
+                >
+                  <mat-option
+                    *ngFor="let currency of currencies"
+                    [value]="currency"
+                    >{{ currency }}</mat-option
+                  >
+                </mat-select>
+              </mat-form-field>
+            </div>
+          </div>
+          <div class="align-items-center d-flex mb-2">
+            <div class="pr-1 w-50">
+              <div i18n>Language</div>
+            </div>
+            <div class="pl-1 w-50">
+              <mat-form-field appearance="outline" class="w-100 without-hint">
+                <mat-select
+                  name="language"
+                  [disabled]="!hasPermissionToUpdateUserSettings"
+                  [value]="language"
+                  (selectionChange)="onChangeUserSetting('language', $event.value)"
+                >
+                  <mat-option [value]="null"></mat-option>
+                  <mat-option value="de">Deutsch</mat-option>
+                  <mat-option value="en">English</mat-option>
+                  <mat-option value="es"
+                    >Español (<ng-container i18n>Community</ng-container
+                    >)</mat-option
+                  >
+                  <mat-option value="fr"
+                    >Français (<ng-container i18n>Community</ng-container
+                    >)</mat-option
+                  >
+                  <mat-option value="it"
+                    >Italiano (<ng-container i18n>Community</ng-container
+                    >)</mat-option
+                  >
+                  <mat-option value="nl"
+                    >Nederlands (<ng-container i18n>Community</ng-container
+                    >)</mat-option
+                  >
+                  <mat-option value="pt"
+                    >Português (<ng-container i18n>Community</ng-container
+                    >)</mat-option
+                  >
+                  <mat-option value="tr"
+                    >Türkçe (<ng-container i18n>Community</ng-container
+                    >)</mat-option
+                  >
+                </mat-select>
+              </mat-form-field>
+            </div>
+          </div>
+          <div class="align-items-center d-flex mb-2">
+            <div class="pr-1 w-50">
+              <div i18n>Locale</div>
+              <div class="hint-text text-muted">
+                <ng-container i18n>Date and number format</ng-container>
+              </div>
+            </div>
+            <div class="pl-1 w-50">
+              <mat-form-field appearance="outline" class="w-100 without-hint">
+                <mat-select
+                  name="locale"
+                  [disabled]="!hasPermissionToUpdateUserSettings"
+                  [value]="user.settings.locale"
+                  (selectionChange)="onChangeUserSetting('locale', $event.value)"
+                >
+                  <mat-option [value]="null"></mat-option>
+                  <mat-option *ngFor="let locale of locales" [value]="locale"
+                    >{{ locale }}</mat-option
+                  >
+                </mat-select>
+              </mat-form-field>
+            </div>
+          </div>
+          <div class="d-flex">
+            <div class="align-items-center d-flex pr-1 pt-1 w-50">
+              <ng-container i18n>Appearance</ng-container>
+            </div>
+            <div class="pl-1 w-50">
+              <mat-form-field appearance="outline" class="w-100 without-hint">
+                <mat-select
+                  class="with-placeholder-as-option"
+                  name="colorScheme"
+                  [disabled]="!hasPermissionToUpdateUserSettings"
+                  [placeholder]="appearancePlaceholder"
+                  [value]="user?.settings?.colorScheme"
+                  (selectionChange)="onChangeUserSetting('colorScheme', $event.value)"
+                >
+                  <mat-option i18n [value]="null">Auto</mat-option>
+                  <mat-option i18n value="LIGHT">Light</mat-option>
+                  <mat-option i18n value="DARK">Dark</mat-option>
+                </mat-select>
+              </mat-form-field>
+            </div>
+          </div>
+        </form>
+      </div>
+      <div class="d-flex mt-4 py-1">
+        <div class="pr-1 w-50">
+          <div i18n>Zen Mode</div>
+          <div class="hint-text text-muted" i18n>
+            Distraction-free experience for turbulent times
+          </div>
+        </div>
+        <div class="pl-1 w-50">
+          <mat-checkbox
+            color="primary"
+            [checked]="user.settings.viewMode === 'ZEN'"
+            [disabled]="!hasPermissionToUpdateViewMode"
+            (change)="onViewModeChange($event)"
+          ></mat-checkbox>
+        </div>
+      </div>
+      <div class="align-items-center d-flex mt-4 py-1">
+        <div class="pr-1 w-50">
+          <div i18n>Biometric Authentication</div>
+          <div class="hint-text text-muted" i18n>Sign in with fingerprint</div>
+        </div>
+        <div class="pl-1 w-50">
+          <mat-checkbox
+            #toggleSignInWithFingerprintEnabledElement
+            color="primary"
+            [disabled]="!hasPermissionToUpdateUserSettings"
+            (change)="onSignInWithFingerprintChange($event)"
+          ></mat-checkbox>
+        </div>
+      </div>
+      <div
+        *ngIf="hasPermissionToUpdateUserSettings"
+        class="align-items-center d-flex mt-4 py-1"
+      >
+        <div class="pr-1 w-50">
+          <div i18n>Experimental Features</div>
+          <div class="hint-text text-muted" i18n>
+            Sneak peek at upcoming functionality
+          </div>
+        </div>
+        <div class="pl-1 w-50">
+          <mat-checkbox
+            color="primary"
+            [checked]="user.settings.isExperimentalFeatures"
+            [disabled]="!hasPermissionToUpdateUserSettings"
+            (change)="onExperimentalFeaturesChange($event)"
+          ></mat-checkbox>
+        </div>
+      </div>
+      <div class="align-items-center d-flex mt-4 py-1">
+        <div class="pr-1 w-50" i18n>User ID</div>
+        <div class="pl-1 text-monospace w-50">{{ user?.id }}</div>
+      </div>
+      <div class="align-items-center d-flex py-1">
+        <div class="pr-1 w-50"></div>
+        <div class="pl-1 text-monospace w-50">
+          <button color="primary" mat-flat-button (click)="onExport()">
+            <span i18n>Export Data</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

apps/client/src/app/components/user-account-settings/user-account-settings.module.ts

@@ -0,0 +1,30 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';
+import { RouterModule } from '@angular/router';
+import { GfValueModule } from '@ghostfolio/ui/value';
+
+import { UserAccountSettingsComponent } from './user-account-settings.component';
+
+@NgModule({
+  declarations: [UserAccountSettingsComponent],
+  exports: [UserAccountSettingsComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+    GfValueModule,
+    MatButtonModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    ReactiveFormsModule,
+    RouterModule
+  ]
+})
+export class GfUserAccountSettingsModule {}

apps/client/src/app/components/user-account-settings/user-account-settings.scss

@@ -0,0 +1,13 @@
+:host {
+  color: rgb(var(--dark-primary-text));
+  display: block;
+
+  .hint-text {
+    font-size: 90%;
+    line-height: 1.2;
+  }
+}
+
+:host-context(.is-dark-theme) {
+  color: rgb(var(--light-primary-text));
+}

apps/client/src/app/directives/file-drop/file-drop.directive.ts

@@ -0,0 +1,28 @@
+import { Directive, EventEmitter, HostListener, Output } from '@angular/core';
+
+@Directive({
+  selector: '[gfFileDrop]'
+})
+export class FileDropDirective {
+  @Output() filesDropped = new EventEmitter<FileList>();
+
+  @HostListener('dragenter', ['$event']) onDragEnter(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+
+  @HostListener('dragover', ['$event']) onDragOver(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+
+  @HostListener('drop', ['$event']) onDrop(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    // Prevent the browser's default behavior for handling the file drop
+    event.dataTransfer.dropEffect = 'copy';
+
+    this.filesDropped.emit(event.dataTransfer.files);
+  }
+}

apps/client/src/app/directives/file-drop/file-drop.module.ts

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+
+import { FileDropDirective } from './file-drop.directive';
+
+@NgModule({
+  declarations: [FileDropDirective],
+  exports: [FileDropDirective]
+})
+export class GfFileDropModule {}

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

@@ -1,28 +1,20 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  HostBinding,
-  OnDestroy,
-  OnInit
-} from '@angular/core';
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { TabConfiguration, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
+import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
+  host: { class: 'page has-tabs' },
   selector: 'gf-about-page',
   styleUrls: ['./about-page.scss'],
   templateUrl: './about-page.html'
 })
 export class AboutPageComponent implements OnDestroy, OnInit {
-  @HostBinding('class.with-info-message') get getHasMessage() {
-    return this.hasMessage;
-  }
-
-  public hasMessage: boolean;
+  public deviceType: string;
   public hasPermissionForSubscription: boolean;
   public tabs: TabConfiguration[] = [];
   public user: User;
@@ -32,9 +24,10 @@ export class AboutPageComponent implements OnDestroy, OnInit {
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
+    private deviceService: DeviceDetectorService,
     private userService: UserService
   ) {
-    const { globalPermissions, systemMessage } = this.dataService.fetchInfo();
+    const { globalPermissions } = this.dataService.fetchInfo();
 
     this.hasPermissionForSubscription = hasPermission(
       globalPermissions,
@@ -71,12 +64,6 @@ export class AboutPageComponent implements OnDestroy, OnInit {
           });
           this.user = state.user;
 
-          this.hasMessage =
-            hasPermission(
-              this.user?.permissions,
-              permissions.createUserAccount
-            ) || !!systemMessage;
-
           this.changeDetectorRef.markForCheck();
         }
 
@@ -88,7 +75,9 @@ export class AboutPageComponent implements OnDestroy, OnInit {
       });
   }
 
-  public ngOnInit() {}
+  public ngOnInit() {
+    this.deviceType = this.deviceService.getDeviceInfo().deviceType;
+  }
 
   public ngOnDestroy() {
     this.unsubscribeSubject.next();

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

@@ -2,7 +2,12 @@
   <router-outlet></router-outlet>
 </mat-tab-nav-panel>
 
-<nav mat-align-tabs="center" mat-tab-nav-bar [tabPanel]="tabPanel">
+<nav
+  mat-align-tabs="center"
+  mat-tab-nav-bar
+  [disablePagination]="true"
+  [tabPanel]="tabPanel"
+>
   <ng-container *ngFor="let tab of tabs">
     <a
       #rla="routerLinkActive"
@@ -14,7 +19,10 @@
       [routerLink]="tab.path"
       [routerLinkActiveOptions]="{ exact: true }"
     >
-      <ion-icon size="large" [name]="tab.iconName"></ion-icon>
+      <ion-icon
+        [name]="tab.iconName"
+        [size]="deviceType === 'mobile' ? 'large': 'small'"
+      ></ion-icon>
       <div class="d-none d-sm-block ml-2">{{ tab.label }}</div>
     </a>
   </ng-container>

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

@@ -2,27 +2,6 @@
 
 :host {
   color: rgb(var(--dark-primary-text));
-  display: flex;
-  flex-direction: column;
-  height: calc(100vh - 5rem);
-  overflow-y: auto;
-
-  padding-bottom: env(safe-area-inset-bottom);
-  padding-bottom: constant(safe-area-inset-bottom);
-
-  ::ng-deep {
-    .mat-mdc-tab-link-container {
-      --mat-tab-header-active-focus-indicator-color: transparent;
-      --mat-tab-header-active-hover-indicator-color: transparent;
-      --mdc-tab-indicator-active-indicator-color: transparent;
-
-      .mat-mdc-tab-link {
-        &:hover {
-          opacity: 0.75;
-        }
-      }
-    }
-  }
 }
 
 :host-context(.is-dark-theme) {

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

@@ -2,7 +2,6 @@ import { Component, OnDestroy } from '@angular/core';
 import { Subject } from 'rxjs';
 
 @Component({
-  host: { class: 'page' },
   selector: 'gf-changelog-page',
   styleUrls: ['./changelog-page.scss'],
   templateUrl: './changelog-page.html'