Release 2.8.0 (#2420)

* Improve form in account dialog

* Update changelog

CHANGELOG.md

@@ -5,6 +5,95 @@ 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

README.md

@@ -27,7 +27,7 @@ New: [Ghostfolio 2.0](https://ghostfol.io/en/blog/2023/09/ghostfolio-2)
 
 ## 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.
 

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

@@ -12,7 +12,7 @@ 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

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

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

@@ -77,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/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.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/assets/sitemap.xml

@@ -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>
@@ -558,6 +594,10 @@
     <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>
@@ -574,6 +614,10 @@
     <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>
@@ -642,6 +686,14 @@
     <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>
@@ -670,6 +722,10 @@
     <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>
@@ -686,6 +742,10 @@
     <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>
@@ -754,6 +814,14 @@
     <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>
@@ -868,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 =

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

@@ -152,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.ts

@@ -112,6 +112,7 @@ export class AppComponent implements OnDestroy, OnInit {
 
         this.hasTabs =
           (this.currentRoute === this.routerLinkAbout[0].slice(1) ||
+            this.currentRoute === 'account' ||
             this.currentRoute === 'admin' ||
             this.currentRoute === 'home' ||
             this.currentRoute === 'portfolio' ||

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.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/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

@@ -1,4 +1,4 @@
-import { Directive, HostListener, Output, EventEmitter } from '@angular/core';
+import { Directive, EventEmitter, HostListener, Output } from '@angular/core';
 
 @Directive({
   selector: '[gfFileDrop]'

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

@@ -4,7 +4,10 @@ import {
   Inject,
   OnDestroy
 } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { CreateAccountDto } from '@ghostfolio/api/app/account/create-account.dto';
+import { UpdateAccountDto } from '@ghostfolio/api/app/account/update-account.dto';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { Subject } from 'rxjs';
 
@@ -18,15 +21,17 @@ import { CreateOrUpdateAccountDialogParams } from './interfaces/interfaces';
   templateUrl: 'create-or-update-account-dialog.html'
 })
 export class CreateOrUpdateAccountDialog implements OnDestroy {
+  public accountForm: FormGroup;
   public currencies: string[] = [];
   public platforms: { id: string; name: string }[];
 
   private unsubscribeSubject = new Subject<void>();
 
   public constructor(
+    @Inject(MAT_DIALOG_DATA) public data: CreateOrUpdateAccountDialogParams,
     private dataService: DataService,
     public dialogRef: MatDialogRef<CreateOrUpdateAccountDialog>,
-    @Inject(MAT_DIALOG_DATA) public data: CreateOrUpdateAccountDialogParams
+    private formBuilder: FormBuilder
   ) {}
 
   ngOnInit() {
@@ -34,12 +39,42 @@ export class CreateOrUpdateAccountDialog implements OnDestroy {
 
     this.currencies = currencies;
     this.platforms = platforms;
+
+    this.accountForm = this.formBuilder.group({
+      accountId: [{ disabled: true, value: this.data.account.id }],
+      balance: [this.data.account.balance, Validators.required],
+      comment: [this.data.account.comment],
+      currency: [this.data.account.currency, Validators.required],
+      isExcluded: [this.data.account.isExcluded],
+      name: [this.data.account.name, Validators.required],
+      platformId: [this.data.account.platformId]
+    });
   }
 
   public onCancel() {
     this.dialogRef.close();
   }
 
+  public onSubmit() {
+    const account: CreateAccountDto | UpdateAccountDto = {
+      balance: this.accountForm.controls['balance'].value,
+      comment: this.accountForm.controls['comment'].value,
+      currency: this.accountForm.controls['currency'].value,
+      id: this.accountForm.controls['accountId'].value,
+      isExcluded: this.accountForm.controls['isExcluded'].value,
+      name: this.accountForm.controls['name'].value,
+      platformId: this.accountForm.controls['platformId'].value
+    };
+
+    if (this.data.account.id) {
+      (account as UpdateAccountDto).id = this.data.account.id;
+    } else {
+      delete (account as CreateAccountDto).id;
+    }
+
+    this.dialogRef.close({ account });
+  }
+
   public ngOnDestroy() {
     this.unsubscribeSubject.next();
     this.unsubscribeSubject.complete();

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

@@ -1,17 +1,22 @@
-<form #addAccountForm="ngForm" class="d-flex flex-column h-100">
+<form
+  class="d-flex flex-column h-100"
+  [formGroup]="accountForm"
+  (keyup.enter)="accountForm.valid && onSubmit()"
+  (ngSubmit)="onSubmit()"
+>
   <h1 *ngIf="data.account.id" i18n mat-dialog-title>Update account</h1>
   <h1 *ngIf="!data.account.id" i18n mat-dialog-title>Add account</h1>
   <div class="flex-grow-1 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.account.name" />
+        <input formControlName="name" matInput />
       </mat-form-field>
     </div>
     <div>
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Currency</mat-label>
-        <mat-select name="currency" required [(value)]="data.account.currency">
+        <mat-select formControlName="currency">
           <mat-option *ngFor="let currency of currencies" [value]="currency"
             >{{ currency }}</mat-option
           >
@@ -21,20 +26,14 @@
     <div>
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Cash Balance</mat-label>
-        <input
-          matInput
-          name="balance"
-          required
-          type="number"
-          [(ngModel)]="data.account.balance"
-        />
+        <input formControlName="balance" matInput type="number" />
         <span class="ml-2" matTextSuffix>{{ data.account.currency }}</span>
       </mat-form-field>
     </div>
     <div [ngClass]="{ 'd-none': platforms?.length < 1 }">
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Platform</mat-label>
-        <mat-select name="platformId" [(value)]="data.account.platformId">
+        <mat-select formControlName="platformId">
           <mat-option [value]="null"></mat-option>
           <mat-option *ngFor="let platform of platforms" [value]="platform.id"
             >{{ platform.name }}</mat-option
@@ -48,30 +47,21 @@
         <textarea
           cdkAutosizeMinRows="2"
           cdkTextareaAutosize
+          formControlName="comment"
           matInput
-          name="comment"
-          [(ngModel)]="data.account.comment"
           (keyup.enter)="$event.stopPropagation()"
         ></textarea>
       </mat-form-field>
     </div>
     <div class="mb-3 px-2">
-      <mat-checkbox
-        color="primary"
-        name="isExcluded"
-        [(ngModel)]="data.account.isExcluded"
+      <mat-checkbox color="primary" formControlName="isExcluded"
         >Exclude from Analysis</mat-checkbox
       >
     </div>
     <div *ngIf="data.account.id">
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Account ID</mat-label>
-        <input
-          disabled
-          matInput
-          name="accountId"
-          [(ngModel)]="data.account.id"
-        />
+        <input formControlName="accountId" matInput />
       </mat-form-field>
     </div>
   </div>
@@ -80,8 +70,8 @@
     <button
       color="primary"
       mat-flat-button
-      [disabled]="!addAccountForm.form.valid"
-      [mat-dialog-close]="data"
+      type="submit"
+      [disabled]="!accountForm.valid"
     >
       <ng-container i18n>Save</ng-container>
     </button>

apps/client/src/app/pages/blog/2023/09/hacktoberfest-2023/hacktoberfest-2023-page.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { RouterModule } from '@angular/router';
+
+@Component({
+  host: { class: 'page' },
+  imports: [MatButtonModule, RouterModule],
+  selector: 'gf-hacktoberfest-2023-page',
+  standalone: true,
+  templateUrl: './hacktoberfest-2023-page.html'
+})
+export class Hacktoberfest2023PageComponent {
+  public routerLinkAbout = ['/' + $localize`about`];
+}

apps/client/src/app/pages/blog/2023/09/hacktoberfest-2023/hacktoberfest-2023-page.html

@@ -0,0 +1,194 @@
+<div class="blog container">
+  <div class="row">
+    <div class="col-md-8 offset-md-2">
+      <article>
+        <div class="mb-4 text-center">
+          <h1 class="mb-1">Hacktoberfest 2023</h1>
+          <div class="mb-3 text-muted"><small>2023-09-26</small></div>
+          <img
+            alt="Hacktoberfest 2023 with Ghostfolio Teaser"
+            class="rounded w-100"
+            src="../assets/images/blog/hacktoberfest-2023.png"
+            title="Hacktoberfest 2023 with Ghostfolio"
+          />
+        </div>
+        <section class="mb-4">
+          <p>
+            At Ghostfolio, <a [routerLink]="routerLinkAbout">we</a> are very
+            excited to participate in
+            <a href="https://hacktoberfest.com">Hacktoberfest</a> for the second
+            time, looking forward to connecting with new and enthusiastic
+            open-source contributors. Hacktoberfest is a month-long celebration
+            of open-source projects, their maintainers, and the entire community
+            of contributors. Each October, open source maintainers from all over
+            the world give extra attention to new contributors while guiding
+            them through their first pull requests on
+            <a href="https://github.com/ghostfolio/ghostfolio">GitHub</a>. This
+            year the event celebrates its 10th anniversary.
+          </p>
+        </section>
+        <section class="mb-4">
+          <h2 class="h4">About Ghostfolio</h2>
+          <p>
+            <a href="https://ghostfol.io">Ghostfolio</a> is a modern web
+            application for managing personal finances. The software aggregates
+            your assets and empowers informed decision-making to help you
+            balance your portfolio or plan for future investments.
+          </p>
+          <p>
+            Ghostfolio is written in
+            <a href="https://www.typescriptlang.org">TypeScript</a> and
+            organized as an <a href="https://nx.dev">Nx</a> workspace, utilizing
+            the latest framework releases. The backend is based on
+            <a href="https://nestjs.com">NestJS</a> in combination with
+            <a href="https://www.postgresql.org">PostgreSQL</a> as a database
+            together with <a href="https://www.prisma.io">Prisma</a> and
+            <a href="https://redis.io">Redis</a> for caching. The frontend is
+            built with <a href="https://angular.io">Angular</a>.
+          </p>
+          <p>
+            The software is used daily by a thriving global community. With over
+            <a [routerLink]="['/open']">2’600 stars on GitHub</a> and
+            <a [routerLink]="['/open']">300’000+ pulls on Docker Hub</a>,
+            Ghostfolio has gained widespread recognition for its user-friendly
+            experience and simplicity.
+          </p>
+        </section>
+        <section class="mb-4">
+          <h2 class="h4">How to contribute?</h2>
+          <p>
+            Each contribution can make a meaningful impact. Whether it involves
+            implementing new features, resolving bugs, refactoring code,
+            enhancing documentation, adding unit tests, or translating content
+            into another language, you can actively shape our project.
+          </p>
+          <p>
+            Are you not yet familiar with our code base? That is not a problem.
+            We have applied the label <code>hacktoberfest</code> to a few
+            <a
+              href="https://github.com/ghostfolio/ghostfolio/issues?q=is%3Aissue+is%3Aopen+label%3Ahacktoberfest"
+              >issues</a
+            >
+            that are well suited for newcomers.
+          </p>
+          <p>
+            The official Hacktoberfest website provides some valuable
+            <a
+              href="https://hacktoberfest.com/participation/#beginner-resources"
+              >resources for beginners</a
+            >
+            to start contributing in open source.
+          </p>
+        </section>
+        <section class="mb-4">
+          <h2 class="h4">Get support</h2>
+          <p>
+            If you have further questions or ideas, please join our
+            <a
+              href="https://join.slack.com/t/ghostfolio/shared_invite/zt-vsaan64h-F_I0fEo5M0P88lP9ibCxFg"
+              >Slack</a
+            >
+            community or get in touch on X
+            <a href="https://twitter.com/ghostfolio_">@ghostfolio_</a>.
+          </p>
+          <p>
+            We look forward to hearing from you.<br />
+            Thomas from Ghostfolio
+          </p>
+        </section>
+        <section class="mb-4">
+          <ul class="list-inline">
+            <li class="list-inline-item">
+              <span class="badge badge-light">Angular</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Community</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Docker</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Finance</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Fintech</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Ghostfolio</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">GitHub</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Hacktoberfest</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Investment</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">NestJS</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Nx</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">October</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Open Source</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">OSS</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Personal Finance</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Portfolio</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Portfolio Tracker</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Prisma</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Software</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">TypeScript</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">UX</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Wealth</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Wealth Management</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Web3</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Web 3.0</span>
+            </li>
+          </ul>
+        </section>
+        <nav aria-label="breadcrumb">
+          <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+              <a i18n [routerLink]="['/blog']">Blog</a>
+            </li>
+            <li
+              aria-current="page"
+              class="active breadcrumb-item text-truncate"
+            >
+              Hacktoberfest 2023
+            </li>
+          </ol>
+        </nav>
+      </article>
+    </div>
+  </div>
+</div>

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

@@ -154,6 +154,15 @@ const routes: Routes = [
         (c) => c.Ghostfolio2PageComponent
       ),
     title: 'Ghostfolio 2.0'
+  },
+  {
+    canActivate: [AuthGuard],
+    path: '2023/09/hacktoberfest-2023',
+    loadComponent: () =>
+      import(
+        './2023/09/hacktoberfest-2023/hacktoberfest-2023-page.component'
+      ).then((c) => c.Hacktoberfest2023PageComponent),
+    title: 'Hacktoberfest 2023'
   }
 ];
 

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

@@ -8,6 +8,30 @@
           finance</small
         >
       </h1>
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-content>
+          <div class="container p-0">
+            <div class="flex-nowrap no-gutters row">
+              <a
+                class="d-flex overflow-hidden w-100"
+                href="../en/blog/2023/09/hacktoberfest-2023"
+              >
+                <div class="flex-grow-1 overflow-hidden">
+                  <div class="h6 m-0 text-truncate">Hacktoberfest 2023</div>
+                  <div class="d-flex text-muted">2023-09-26</div>
+                </div>
+                <div class="align-items-center d-flex">
+                  <ion-icon
+                    class="chevron text-muted"
+                    name="chevron-forward-outline"
+                    size="small"
+                  ></ion-icon>
+                </div>
+              </a>
+            </div>
+          </div>
+        </mat-card-content>
+      </mat-card>
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-content>
           <div class="container p-0">

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

@@ -142,11 +142,11 @@
         >
         <mat-card-content
           ><a [routerLink]="routerLinkPricing">Ghostfolio Premium</a> is a fully
-          managed Ghostfolio cloud offering for ambitious investors. The revenue
-          is used to cover the hosting infrastructure and to fund the ongoing
-          development. It is the Open Source code base with some extras like the
-          <a [routerLink]="routerLinkMarkets">markets overview</a> and a
-          professional data provider.</mat-card-content
+          managed Ghostfolio cloud offering for ambitious investors. Revenue is
+          used to cover the costs of the hosting infrastructure and to fund
+          ongoing development. It is the Open Source code base with some extras
+          like the <a [routerLink]="routerLinkMarkets">markets overview</a> and
+          a professional data provider.</mat-card-content
         >
       </mat-card>
       <mat-card appearance="outlined" class="mb-3">

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

@@ -15,6 +15,7 @@ export class FeaturesPageComponent implements OnDestroy {
   public hasPermissionForSubscription: boolean;
   public info: InfoItem;
   public routerLinkRegister = ['/' + $localize`register`];
+  public routerLinkResources = ['/' + $localize`resources`];
   public user: User;
 
   private unsubscribeSubject = new Subject<void>();

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

@@ -245,7 +245,7 @@
                 <h4 i18n>Multi-Language</h4>
                 <p class="m-0">
                   Use Ghostfolio in multiple languages: English, Dutch, French,
-                  German, Italian, Portuguese and Spanish are currently
+                  German, Italian, Portuguese, Spanish and Turkish are currently
                   supported.
                 </p>
               </div>

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

@@ -60,7 +60,7 @@
   <div *ngIf="hasPermissionForStatistics" class="row mb-5">
     <div
       class="col-md-4 d-flex my-1"
-      [ngClass]="{ 'justify-content-center': this.deviceType !== 'mobile' }"
+      [ngClass]="{ 'justify-content-center': deviceType !== 'mobile' }"
     >
       <a
         class="d-block"
@@ -78,7 +78,7 @@
     </div>
     <div
       class="col-md-4 d-flex my-1"
-      [ngClass]="{ 'justify-content-center': this.deviceType !== 'mobile' }"
+      [ngClass]="{ 'justify-content-center': deviceType !== 'mobile' }"
     >
       <a
         class="d-block"
@@ -96,7 +96,7 @@
     </div>
     <div
       class="col-md-4 d-flex my-1"
-      [ngClass]="{ 'justify-content-center': this.deviceType !== 'mobile' }"
+      [ngClass]="{ 'justify-content-center': deviceType !== 'mobile' }"
     >
       <a
         class="d-block"

apps/client/src/app/pages/portfolio/activities/activities-page.component.ts

@@ -80,8 +80,6 @@ export class ActivitiesPageComponent implements OnDestroy, OnInit {
   }
 
   public ngOnInit() {
-    const { globalPermissions } = this.dataService.fetchInfo();
-
     this.deviceType = this.deviceService.getDeviceInfo().deviceType;
 
     this.impersonationStorageService

apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.component.ts

@@ -20,7 +20,7 @@ import { translate } from '@ghostfolio/ui/i18n';
 import { AssetClass, AssetSubClass, Tag, Type } from '@prisma/client';
 import { isUUID } from 'class-validator';
 import { EMPTY, Observable, Subject, lastValueFrom, of } from 'rxjs';
-import { catchError, map, startWith, takeUntil } from 'rxjs/operators';
+import { catchError, delay, map, startWith, takeUntil } from 'rxjs/operators';
 
 import { CreateOrUpdateActivityDialogParams } from './interfaces/interfaces';
 
@@ -139,7 +139,12 @@ export class CreateOrUpdateActivityDialog implements OnDestroy {
     });
 
     this.activityForm.valueChanges
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(
+        // Slightly delay until the more specific form control value changes have
+        // completed
+        delay(300),
+        takeUntil(this.unsubscribeSubject)
+      )
       .subscribe(async () => {
         let exchangeRateOfFee = 1;
         let exchangeRateOfUnitPrice = 1;
@@ -217,6 +222,7 @@ export class CreateOrUpdateActivityDialog implements OnDestroy {
 
         if (
           this.activityForm.controls['type'].value === 'BUY' ||
+          this.activityForm.controls['type'].value === 'FEE' ||
           this.activityForm.controls['type'].value === 'ITEM'
         ) {
           this.total =
@@ -233,6 +239,28 @@ export class CreateOrUpdateActivityDialog implements OnDestroy {
         this.changeDetectorRef.markForCheck();
       });
 
+    this.activityForm.controls['accountId'].valueChanges.subscribe(
+      (accountId) => {
+        const type = this.activityForm.controls['type'].value;
+
+        if (
+          type === 'FEE' ||
+          type === 'INTEREST' ||
+          type === 'ITEM' ||
+          type === 'LIABILITY'
+        ) {
+          const currency =
+            this.data.accounts.find(({ id }) => {
+              return id === accountId;
+            })?.currency ?? this.data.user.settings.baseCurrency;
+
+          this.activityForm.controls['currency'].setValue(currency);
+          this.activityForm.controls['currencyOfFee'].setValue(currency);
+          this.activityForm.controls['currencyOfUnitPrice'].setValue(currency);
+        }
+      }
+    );
+
     this.activityForm.controls['searchSymbol'].valueChanges.subscribe(() => {
       if (this.activityForm.controls['searchSymbol'].invalid) {
         this.data.activity.SymbolProfile = null;
@@ -268,19 +296,21 @@ export class CreateOrUpdateActivityDialog implements OnDestroy {
             Validators.required
           );
           this.activityForm.controls['accountId'].updateValueAndValidity();
-          this.activityForm.controls['currency'].setValue(
-            this.data.user.settings.baseCurrency
-          );
-          this.activityForm.controls['currencyOfFee'].setValue(
-            this.data.user.settings.baseCurrency
-          );
-          this.activityForm.controls['currencyOfUnitPrice'].setValue(
-            this.data.user.settings.baseCurrency
-          );
+
+          const currency =
+            this.data.accounts.find(({ id }) => {
+              return id === this.activityForm.controls['accountId'].value;
+            })?.currency ?? this.data.user.settings.baseCurrency;
+
+          this.activityForm.controls['currency'].setValue(currency);
+          this.activityForm.controls['currencyOfFee'].setValue(currency);
+          this.activityForm.controls['currencyOfUnitPrice'].setValue(currency);
+
           this.activityForm.controls['dataSource'].removeValidators(
             Validators.required
           );
           this.activityForm.controls['dataSource'].updateValueAndValidity();
+          this.activityForm.controls['feeInCustomCurrency'].reset();
           this.activityForm.controls['name'].setValidators(Validators.required);
           this.activityForm.controls['name'].updateValueAndValidity();
           this.activityForm.controls['quantity'].setValue(1);
@@ -290,31 +320,57 @@ export class CreateOrUpdateActivityDialog implements OnDestroy {
           this.activityForm.controls['searchSymbol'].updateValueAndValidity();
           this.activityForm.controls['updateAccountBalance'].disable();
           this.activityForm.controls['updateAccountBalance'].setValue(false);
-        } else if (type === 'LIABILITY') {
+        } else if (
+          type === 'FEE' ||
+          type === 'INTEREST' ||
+          type === 'LIABILITY'
+        ) {
           this.activityForm.controls['accountId'].removeValidators(
             Validators.required
           );
           this.activityForm.controls['accountId'].updateValueAndValidity();
-          this.activityForm.controls['currency'].setValue(
-            this.data.user.settings.baseCurrency
-          );
-          this.activityForm.controls['currencyOfFee'].setValue(
-            this.data.user.settings.baseCurrency
-          );
-          this.activityForm.controls['currencyOfUnitPrice'].setValue(
-            this.data.user.settings.baseCurrency
-          );
+
+          const currency =
+            this.data.accounts.find(({ id }) => {
+              return id === this.activityForm.controls['accountId'].value;
+            })?.currency ?? this.data.user.settings.baseCurrency;
+
+          this.activityForm.controls['currency'].setValue(currency);
+          this.activityForm.controls['currencyOfFee'].setValue(currency);
+          this.activityForm.controls['currencyOfUnitPrice'].setValue(currency);
+
           this.activityForm.controls['dataSource'].removeValidators(
             Validators.required
           );
           this.activityForm.controls['dataSource'].updateValueAndValidity();
+
+          if (
+            (type === 'FEE' &&
+              this.activityForm.controls['feeInCustomCurrency'].value === 0) ||
+            type === 'INTEREST' ||
+            type === 'LIABILITY'
+          ) {
+            this.activityForm.controls['feeInCustomCurrency'].reset();
+          }
+
           this.activityForm.controls['name'].setValidators(Validators.required);
           this.activityForm.controls['name'].updateValueAndValidity();
-          this.activityForm.controls['quantity'].setValue(1);
+
+          if (type === 'FEE') {
+            this.activityForm.controls['quantity'].setValue(0);
+          } else if (type === 'INTEREST' || type === 'LIABILITY') {
+            this.activityForm.controls['quantity'].setValue(1);
+          }
+
           this.activityForm.controls['searchSymbol'].removeValidators(
             Validators.required
           );
           this.activityForm.controls['searchSymbol'].updateValueAndValidity();
+
+          if (type === 'FEE') {
+            this.activityForm.controls['unitPriceInCustomCurrency'].setValue(0);
+          }
+
           this.activityForm.controls['updateAccountBalance'].disable();
           this.activityForm.controls['updateAccountBalance'].setValue(false);
         } else {

apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html

@@ -15,34 +15,51 @@
             >{{ typesTranslationMap[activityForm.controls['type'].value]
             }}</mat-select-trigger
           >
-          <mat-option class="line-height-1" value="BUY">
+          <mat-option value="BUY">
             <span><b>{{ typesTranslationMap['BUY'] }}</b></span>
-            <br />
-            <small class="text-muted text-nowrap" i18n
+            <small class="d-block line-height-1 text-muted text-nowrap" i18n
               >Stocks, ETFs, bonds, cryptocurrencies, commodities</small
             >
           </mat-option>
-          <mat-option class="line-height-1" value="DIVIDEND">
-            <span><b>{{ typesTranslationMap['DIVIDEND'] }}</b></span>
+          <mat-option
+            *ngIf="data.user?.settings?.isExperimentalFeatures"
+            value="FEE"
+          >
+            <span><b>{{ typesTranslationMap['FEE'] }}</b></span>
+            <small class="d-block line-height-1 text-muted text-nowrap" i18n
+              >One-time fee, annual account fees</small
+            >
           </mat-option>
-          <mat-option class="line-height-1" value="LIABILITY">
+          <mat-option value="DIVIDEND">
+            <span><b>{{ typesTranslationMap['DIVIDEND'] }}</b></span>
+            <small class="d-block line-height-1 text-muted text-nowrap" i18n
+              >Distribution of corporate earnings</small
+            >
+          </mat-option>
+          <mat-option
+            *ngIf="data.user?.settings?.isExperimentalFeatures"
+            value="INTEREST"
+          >
+            <span><b>{{ typesTranslationMap['INTEREST'] }}</b></span>
+            <small class="d-block line-height-1 text-muted text-nowrap" i18n
+              >Revenue for lending out money</small
+            >
+          </mat-option>
+          <mat-option value="LIABILITY">
             <span><b>{{ typesTranslationMap['LIABILITY'] }}</b></span>
-            <br />
-            <small class="text-muted text-nowrap" i18n
+            <small class="d-block line-height-1 text-muted text-nowrap" i18n
               >Mortgages, personal loans, credit cards</small
             >
           </mat-option>
-          <mat-option class="line-height-1" value="SELL">
+          <mat-option value="SELL">
             <span><b>{{ typesTranslationMap['SELL'] }}</b></span>
-            <br />
-            <small class="text-muted text-nowrap" i18n
+            <small class="d-block line-height-1 text-muted text-nowrap" i18n
               >Stocks, ETFs, bonds, cryptocurrencies, commodities</small
             >
           </mat-option>
-          <mat-option class="line-height-1" value="ITEM">
+          <mat-option value="ITEM">
             <span><b>{{ typesTranslationMap['ITEM'] }}</b></span>
-            <br />
-            <small class="text-muted text-nowrap" i18n
+            <small class="d-block line-height-1 text-muted text-nowrap" i18n
               >Luxury items, real estate, private companies</small
             >
           </mat-option>
@@ -125,60 +142,72 @@
     </div>
     <div
       class="mb-3"
-      [ngClass]="{ 'd-none': activityForm.controls['type']?.value === 'ITEM' || activityForm.controls['type']?.value === 'LIABILITY' }"
+      [ngClass]="{ 'd-none': activityForm.controls['type']?.value === 'FEE' || activityForm.controls['type']?.value === 'INTEREST' || activityForm.controls['type']?.value === 'ITEM' || activityForm.controls['type']?.value === 'LIABILITY' }"
     >
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Quantity</mat-label>
         <input formControlName="quantity" matInput type="number" />
       </mat-form-field>
     </div>
-    <div class="align-items-start d-flex mb-3">
-      <mat-form-field appearance="outline" class="w-100">
-        <mat-label
-          ><ng-container [ngSwitch]="activityForm.controls['type']?.value">
-            <ng-container *ngSwitchCase="'DIVIDEND'" i18n
-              >Dividend</ng-container
-            >
-            <ng-container *ngSwitchCase="'ITEM'" i18n>Value</ng-container>
-            <ng-container *ngSwitchCase="'LIABILITY'" i18n>Value</ng-container>
-            <ng-container *ngSwitchDefault i18n>Unit Price</ng-container>
-          </ng-container>
-        </mat-label>
-        <input
-          formControlName="unitPriceInCustomCurrency"
-          matInput
-          type="number"
-        />
-        <div
-          class="ml-2"
-          matTextSuffix
-          [ngClass]="{ 'd-none': !activityForm.controls['currency']?.value }"
-        >
-          <mat-select formControlName="currencyOfUnitPrice">
-            <mat-option *ngFor="let currency of currencies" [value]="currency">
-              {{ currency }}
-            </mat-option>
-          </mat-select>
-        </div>
-        <mat-error
-          *ngIf="activityForm.controls['unitPriceInCustomCurrency'].hasError('invalid')"
-          ><ng-container i18n
-            >Oops! Could not get the historical exchange rate from</ng-container
+    <div
+      class="mb-3"
+      [ngClass]="{ 'd-none': activityForm.controls['type']?.value === 'FEE' }"
+    >
+      <div class="align-items-start d-flex">
+        <mat-form-field appearance="outline" class="w-100">
+          <mat-label
+            ><ng-container [ngSwitch]="activityForm.controls['type']?.value">
+              <ng-container *ngSwitchCase="'DIVIDEND'" i18n
+                >Dividend</ng-container
+              >
+              <ng-container *ngSwitchCase="'INTEREST'" i18n>Value</ng-container>
+              <ng-container *ngSwitchCase="'ITEM'" i18n>Value</ng-container>
+              <ng-container *ngSwitchCase="'LIABILITY'" i18n
+                >Value</ng-container
+              >
+              <ng-container *ngSwitchDefault i18n>Unit Price</ng-container>
+            </ng-container>
+          </mat-label>
+          <input
+            formControlName="unitPriceInCustomCurrency"
+            matInput
+            type="number"
+          />
+          <div
+            class="ml-2"
+            matTextSuffix
+            [ngClass]="{ 'd-none': !activityForm.controls['currency']?.value }"
           >
-          {{ activityForm.controls['date']?.value | date: defaultDateFormat
-          }}</mat-error
+            <mat-select formControlName="currencyOfUnitPrice">
+              <mat-option
+                *ngFor="let currency of currencies"
+                [value]="currency"
+              >
+                {{ currency }}
+              </mat-option>
+            </mat-select>
+          </div>
+          <mat-error
+            *ngIf="activityForm.controls['unitPriceInCustomCurrency'].hasError('invalid')"
+            ><ng-container i18n
+              >Oops! Could not get the historical exchange rate
+              from</ng-container
+            >
+            {{ activityForm.controls['date']?.value | date: defaultDateFormat
+            }}</mat-error
+          >
+        </mat-form-field>
+        <button
+          *ngIf="currentMarketPrice && (data.activity.type === 'BUY' || data.activity.type === 'SELL')"
+          class="ml-2 mt-1 no-min-width"
+          mat-button
+          title="Apply current market price"
+          type="button"
+          (click)="applyCurrentMarketPrice()"
         >
-      </mat-form-field>
-      <button
-        *ngIf="currentMarketPrice && (data.activity.type === 'BUY' || data.activity.type === 'SELL')"
-        class="ml-2 mt-1 no-min-width"
-        mat-button
-        title="Apply current market price"
-        type="button"
-        (click)="applyCurrentMarketPrice()"
-      >
-        <ion-icon class="text-muted" name="refresh-outline"></ion-icon>
-      </button>
+          <ion-icon class="text-muted" name="refresh-outline"></ion-icon>
+        </button>
+      </div>
     </div>
     <div class="d-none">
       <mat-form-field appearance="outline" class="w-100">
@@ -187,6 +216,8 @@
             <ng-container *ngSwitchCase="'DIVIDEND'" i18n
               >Dividend</ng-container
             >
+            <ng-container *ngSwitchCase="'FEE'" i18n>Value</ng-container>
+            <ng-container *ngSwitchCase="'INTEREST'" i18n>Value</ng-container>
             <ng-container *ngSwitchCase="'ITEM'" i18n>Value</ng-container>
             <ng-container *ngSwitchCase="'LIABILITY'" i18n>Value</ng-container>
             <ng-container *ngSwitchDefault i18n>Unit Price</ng-container>
@@ -200,7 +231,7 @@
     </div>
     <div
       class="mb-3"
-      [ngClass]="{ 'd-none': activityForm.controls['type']?.value === 'ITEM' || activityForm.controls['type']?.value === 'LIABILITY' }"
+      [ngClass]="{ 'd-none': activityForm.controls['type']?.value === 'INTEREST' || activityForm.controls['type']?.value === 'ITEM' || activityForm.controls['type']?.value === 'LIABILITY' }"
     >
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Fee</mat-label>

apps/client/src/app/pages/portfolio/fire/fire-page.component.ts

@@ -18,6 +18,7 @@ export class FirePageComponent implements OnDestroy, OnInit {
   public accountClusterRiskRules: PortfolioReportRule[];
   public currencyClusterRiskRules: PortfolioReportRule[];
   public deviceType: string;
+  public emergencyFundRules: PortfolioReportRule[];
   public feeRules: PortfolioReportRule[];
   public fireWealth: Big;
   public hasImpersonationId: boolean;
@@ -67,6 +68,8 @@ export class FirePageComponent implements OnDestroy, OnInit {
           portfolioReport.rules['accountClusterRisk'] || null;
         this.currencyClusterRiskRules =
           portfolioReport.rules['currencyClusterRisk'] || null;
+        this.emergencyFundRules =
+          portfolioReport.rules['emergencyFund'] || null;
         this.feeRules = portfolioReport.rules['fees'] || null;
 
         this.changeDetectorRef.markForCheck();

apps/client/src/app/pages/portfolio/fire/fire-page.html

@@ -96,8 +96,10 @@
     <div class="col">
       <h2 class="h3 mb-3 text-center">X-ray</h2>
       <p class="mb-4">
-        Ghostfolio X-ray uses static analysis to identify potential issues and
-        risks in your portfolio.
+        <span i18n
+          >Ghostfolio X-ray uses static analysis to identify potential issues
+          and risks in your portfolio.</span
+        >
         <span class="d-none"
           >It will be highly configurable in the future: activate / deactivate
           rules and customize the thresholds to match your personal investment
@@ -106,7 +108,20 @@
       </p>
       <div class="mb-4">
         <h4 class="align-items-center d-flex m-0">
-          <span>Currency Cluster Risks</span
+          <span i18n>Emergency Fund</span
+          ><gf-premium-indicator
+            *ngIf="user?.subscription?.type === 'Basic'"
+            class="ml-1"
+          ></gf-premium-indicator>
+        </h4>
+        <gf-rules
+          [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
+          [rules]="emergencyFundRules"
+        ></gf-rules>
+      </div>
+      <div class="mb-4">
+        <h4 class="align-items-center d-flex m-0">
+          <span i18n>Currency Cluster Risks</span
           ><gf-premium-indicator
             *ngIf="user?.subscription?.type === 'Basic'"
             class="ml-1"
@@ -119,7 +134,7 @@
       </div>
       <div class="mb-4">
         <h4 class="align-items-center d-flex m-0">
-          <span>Account Cluster Risks</span
+          <span i18n>Account Cluster Risks</span
           ><gf-premium-indicator
             *ngIf="user?.subscription?.type === 'Basic'"
             class="ml-1"
@@ -132,7 +147,7 @@
       </div>
       <div>
         <h4 class="align-items-center d-flex m-0">
-          <span>Fees</span
+          <span i18n>Fees</span
           ><gf-premium-indicator
             *ngIf="user?.subscription?.type === 'Basic'"
             class="ml-1"

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

@@ -6,8 +6,8 @@
         <p i18n>
           Our official Ghostfolio Premium 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 to cover the hosting
-          infrastructure and to fund the ongoing development of Ghostfolio.
+          for most people. Revenue is used to cover the costs of the hosting
+          infrastructure and to fund ongoing development.
         </p>
         <p *ngIf="user?.subscription?.type === 'Basic'">
           If you plan to open an account at <i>DEGIRO</i>, <i>frankly</i>,

apps/client/src/app/pages/resources/personal-finance-tools/product-page-template.html

@@ -96,16 +96,16 @@
                   Open Source Software
                 </td>
                 <td class="mat-mdc-cell px-1 py-2">
-                  <ng-container *ngIf="product1.isOpenSource === true" i18n
+                  <ng-container *ngIf="product1.isOpenSource" i18n
                     >✅ Yes</ng-container
-                  ><ng-container *ngIf="product1.isOpenSource === false" i18n
+                  ><ng-container *ngIf="!product1.isOpenSource" i18n
                     >❌ No</ng-container
                   >
                 </td>
                 <td class="mat-mdc-cell px-1 py-2">
-                  <ng-container *ngIf="product2.isOpenSource === true" i18n
+                  <ng-container *ngIf="product2.isOpenSource" i18n
                     >✅ Yes</ng-container
-                  ><ng-container *ngIf="product2.isOpenSource === false" i18n
+                  ><ng-container *ngIf="!product2.isOpenSource" i18n
                     >❌ No
                   </ng-container>
                 </td>

apps/client/src/app/pages/resources/personal-finance-tools/products.ts

@@ -1,10 +1,12 @@
 import { Product } from '@ghostfolio/common/interfaces';
 
 import { AltooPageComponent } from './products/altoo-page.component';
+import { CapMonPageComponent } from './products/capmon-page.component';
 import { CopilotMoneyPageComponent } from './products/copilot-money-page.component';
 import { DeltaPageComponent } from './products/delta-page.component';
 import { DivvyDiaryPageComponent } from './products/divvydiary-page.component';
 import { ExirioPageComponent } from './products/exirio-page.component';
+import { FinaryPageComponent } from './products/finary-page.component';
 import { FolisharePageComponent } from './products/folishare-page.component';
 import { GetquinPageComponent } from './products/getquin-page.component';
 import { GoSpatzPageComponent } from './products/gospatz-page.component';
@@ -22,6 +24,8 @@ import { SeekingAlphaPageComponent } from './products/seeking-alpha-page.compone
 import { SharesightPageComponent } from './products/sharesight-page.component';
 import { SimplePortfolioPageComponent } from './products/simple-portfolio-page.component';
 import { SnowballAnalyticsPageComponent } from './products/snowball-analytics-page.component';
+import { StocklePageComponent } from './products/stockle-page.component';
+import { StockMarketEyePageComponent } from './products/stockmarketeye-page.component';
 import { SumioPageComponent } from './products/sumio-page.component';
 import { UtlunaPageComponent } from './products/utluna-page.component';
 import { YeekateePageComponent } from './products/yeekatee-page.component';
@@ -45,7 +49,7 @@ export const products: Product[] = [
     ],
     name: 'Ghostfolio',
     origin: $localize`Switzerland`,
-    pricingPerYear: '$19',
+    pricingPerYear: '$24',
     region: $localize`Global`,
     slogan: 'Open Source Wealth Management',
     useAnonymously: true
@@ -54,18 +58,25 @@ export const products: Product[] = [
     component: AltooPageComponent,
     founded: 2017,
     hasSelfHostingAbility: false,
-    isOpenSource: false,
     key: 'altoo',
     name: 'Altoo Wealth Platform',
     origin: $localize`Switzerland`,
     slogan: 'Simplicity for Complex Wealth'
   },
+  {
+    component: CapMonPageComponent,
+    founded: 2022,
+    key: 'capmon',
+    name: 'CapMon.org',
+    origin: $localize`Germany`,
+    note: 'Sunset in 2023',
+    slogan: 'Next Generation Assets Tracking'
+  },
   {
     component: CopilotMoneyPageComponent,
     founded: 2019,
     hasFreePlan: false,
     hasSelfHostingAbility: false,
-    isOpenSource: false,
     key: 'copilot-money',
     name: 'Copilot Money',
     origin: $localize`United States`,
@@ -77,7 +88,6 @@ export const products: Product[] = [
     founded: 2017,
     hasFreePlan: true,
     hasSelfHostingAbility: false,
-    isOpenSource: false,
     key: 'delta',
     name: 'Delta Investment Tracker',
     note: 'Acquired by eToro',
@@ -89,7 +99,6 @@ export const products: Product[] = [
     founded: 2019,
     hasFreePlan: true,
     hasSelfHostingAbility: false,
-    isOpenSource: false,
     key: 'divvydiary',
     languages: ['Deutsch', 'English'],
     name: 'DivvyDiary',
@@ -102,18 +111,25 @@ export const products: Product[] = [
     founded: 2020,
     hasFreePlan: true,
     hasSelfHostingAbility: false,
-    isOpenSource: false,
     key: 'exirio',
     name: 'Exirio',
     origin: $localize`United States`,
     pricingPerYear: '$100',
     slogan: 'All your wealth, in one place.'
   },
+  {
+    component: FinaryPageComponent,
+    founded: 2020,
+    key: 'finary',
+    languages: ['Deutsch', 'English', 'Français'],
+    name: 'Finary',
+    origin: $localize`United States`,
+    slogan: 'Real-Time Portfolio Tracker & Stock Tracker'
+  },
   {
     component: FolisharePageComponent,
     hasFreePlan: true,
     hasSelfHostingAbility: false,
-    isOpenSource: false,
     key: 'folishare',
     languages: ['Deutsch', 'English'],
     name: 'folishare',
@@ -126,7 +142,6 @@ export const products: Product[] = [
     founded: 2020,
     hasFreePlan: true,
     hasSelfHostingAbility: false,
-    isOpenSource: false,
     key: 'getquin',
     languages: ['Deutsch', 'English'],
     name: 'getquin',
@@ -138,7 +153,6 @@ export const products: Product[] = [
     component: GoSpatzPageComponent,
     hasFreePlan: true,
     hasSelfHostingAbility: false,
-    isOpenSource: false,
     key: 'gospatz',
     name: 'goSPATZ',
     origin: $localize`Germany`,
@@ -149,7 +163,6 @@ export const products: Product[] = [
     founded: 2011,
     hasFreePlan: true,
     hasSelfHostingAbility: false,
-    isOpenSource: false,
     key: 'justetf',
     name: 'justETF',
     origin: $localize`Germany`,
@@ -161,7 +174,6 @@ export const products: Product[] = [
     founded: 2019,
     hasFreePlan: false,
     hasSelfHostingAbility: false,
-    isOpenSource: false,
     key: 'kubera',
     name: 'Kubera®',
     origin: $localize`United States`,
@@ -173,7 +185,6 @@ export const products: Product[] = [
     founded: 2022,
     hasFreePlan: true,
     hasSelfHostingAbility: false,
-    isOpenSource: false,
     key: 'markets.sh',
     languages: ['English'],
     name: 'markets.sh',
@@ -186,7 +197,6 @@ export const products: Product[] = [
     component: MaybeFinancePageComponent,
     founded: 2021,
     hasSelfHostingAbility: false,
-    isOpenSource: false,
     key: 'maybe-finance',
     languages: ['English'],
     name: 'Maybe Finance',
@@ -200,7 +210,6 @@ export const products: Product[] = [
     component: MonsePageComponent,
     hasFreePlan: false,
     hasSelfHostingAbility: false,
-    isOpenSource: false,
     key: 'monse',
     name: 'Monse',
     pricingPerYear: '$60',
@@ -211,7 +220,6 @@ export const products: Product[] = [
     founded: 2020,
     hasSelfHostingAbility: false,
     hasFreePlan: true,
-    isOpenSource: false,
     key: 'parqet',
     name: 'Parqet',
     note: 'Originally named as Tresor One',
@@ -224,7 +232,6 @@ export const products: Product[] = [
     component: PlannixPageComponent,
     founded: 2023,
     hasSelfHostingAbility: false,
-    isOpenSource: false,
     key: 'plannix',
     name: 'Plannix',
     origin: $localize`Italy`,
@@ -234,7 +241,6 @@ export const products: Product[] = [
     component: PortfolioDividendTrackerPageComponent,
     hasFreePlan: false,
     hasSelfHostingAbility: false,
-    isOpenSource: false,
     key: 'portfolio-dividend-tracker',
     languages: ['English', 'Nederlands'],
     name: 'Portfolio Dividend Tracker',
@@ -247,7 +253,6 @@ export const products: Product[] = [
     founded: 2021,
     hasFreePlan: true,
     hasSelfHostingAbility: false,
-    isOpenSource: false,
     key: 'portseido',
     languages: ['Deutsch', 'English', 'Français', 'Nederlands'],
     name: 'Portseido',
@@ -260,7 +265,6 @@ export const products: Product[] = [
     founded: 2021,
     hasFreePlan: true,
     hasSelfHostingAbility: true,
-    isOpenSource: false,
     key: 'projectionlab',
     name: 'ProjectionLab',
     origin: $localize`United States`,
@@ -272,7 +276,6 @@ export const products: Product[] = [
     founded: 2004,
     hasFreePlan: false,
     hasSelfHostingAbility: false,
-    isOpenSource: false,
     key: 'seeking-alpha',
     name: 'Seeking Alpha',
     origin: $localize`United States`,
@@ -284,7 +287,6 @@ export const products: Product[] = [
     founded: 2007,
     hasFreePlan: true,
     hasSelfHostingAbility: false,
-    isOpenSource: false,
     key: 'sharesight',
     name: 'Sharesight',
     origin: $localize`New Zealand`,
@@ -296,7 +298,6 @@ export const products: Product[] = [
     component: SimplePortfolioPageComponent,
     hasFreePlan: true,
     hasSelfHostingAbility: false,
-    isOpenSource: false,
     key: 'simple-portfolio',
     name: 'Simple Portfolio',
     origin: $localize`Czech Republic`,
@@ -308,18 +309,32 @@ export const products: Product[] = [
     founded: 2021,
     hasFreePlan: true,
     hasSelfHostingAbility: false,
-    isOpenSource: false,
     key: 'snowball-analytics',
     name: 'Snowball Analytics',
-    origin: 'France',
+    origin: $localize`France`,
     pricingPerYear: '$80',
     slogan: 'Simple and powerful portfolio tracker'
   },
+  {
+    component: StocklePageComponent,
+    key: 'stockle',
+    name: 'Stockle',
+    origin: $localize`Finland`,
+    slogan: 'Supercharge your investments tracking experience'
+  },
+  {
+    component: StockMarketEyePageComponent,
+    founded: 2008,
+    key: 'stockmarketeye',
+    name: 'StockMarketEye',
+    origin: $localize`France`,
+    note: 'Sunset in 2023',
+    slogan: 'A Powerful Portfolio & Investment Tracking App'
+  },
   {
     component: SumioPageComponent,
     hasFreePlan: true,
     hasSelfHostingAbility: false,
-    isOpenSource: false,
     key: 'sumio',
     name: 'Sumio',
     origin: $localize`Czech Republic`,
@@ -330,7 +345,6 @@ export const products: Product[] = [
     component: UtlunaPageComponent,
     hasFreePlan: true,
     hasSelfHostingAbility: false,
-    isOpenSource: false,
     key: 'utluna',
     languages: ['Deutsch', 'English', 'Français'],
     name: 'Utluna',
@@ -343,7 +357,6 @@ export const products: Product[] = [
     component: YeekateePageComponent,
     founded: 2021,
     hasSelfHostingAbility: false,
-    isOpenSource: false,
     key: 'yeekatee',
     name: 'yeekatee',
     origin: $localize`Switzerland`,

apps/client/src/app/pages/resources/personal-finance-tools/products/capmon-page.component.ts

@@ -0,0 +1,31 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { RouterModule } from '@angular/router';
+
+import { products } from '../products';
+
+@Component({
+  host: { class: 'page' },
+  imports: [CommonModule, MatButtonModule, RouterModule],
+  selector: 'gf-capmon-page',
+  standalone: true,
+  styleUrls: ['../product-page-template.scss'],
+  templateUrl: '../product-page-template.html'
+})
+export class CapMonPageComponent {
+  public product1 = products.find(({ key }) => {
+    return key === 'ghostfolio';
+  });
+
+  public product2 = products.find(({ key }) => {
+    return key === 'capmon';
+  });
+
+  public routerLinkAbout = ['/' + $localize`about`];
+  public routerLinkFeatures = ['/' + $localize`features`];
+  public routerLinkResourcesPersonalFinanceTools = [
+    '/' + $localize`resources`,
+    'personal-finance-tools'
+  ];
+}

apps/client/src/app/pages/resources/personal-finance-tools/products/finary-page.component.ts

@@ -0,0 +1,31 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { RouterModule } from '@angular/router';
+
+import { products } from '../products';
+
+@Component({
+  host: { class: 'page' },
+  imports: [CommonModule, MatButtonModule, RouterModule],
+  selector: 'gf-finary-page',
+  standalone: true,
+  styleUrls: ['../product-page-template.scss'],
+  templateUrl: '../product-page-template.html'
+})
+export class FinaryPageComponent {
+  public product1 = products.find(({ key }) => {
+    return key === 'ghostfolio';
+  });
+
+  public product2 = products.find(({ key }) => {
+    return key === 'finary';
+  });
+
+  public routerLinkAbout = ['/' + $localize`about`];
+  public routerLinkFeatures = ['/' + $localize`features`];
+  public routerLinkResourcesPersonalFinanceTools = [
+    '/' + $localize`resources`,
+    'personal-finance-tools'
+  ];
+}

apps/client/src/app/pages/resources/personal-finance-tools/products/stockle-page.component.ts

@@ -0,0 +1,31 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { RouterModule } from '@angular/router';
+
+import { products } from '../products';
+
+@Component({
+  host: { class: 'page' },
+  imports: [CommonModule, MatButtonModule, RouterModule],
+  selector: 'gf-stockle-page',
+  standalone: true,
+  styleUrls: ['../product-page-template.scss'],
+  templateUrl: '../product-page-template.html'
+})
+export class StocklePageComponent {
+  public product1 = products.find(({ key }) => {
+    return key === 'ghostfolio';
+  });
+
+  public product2 = products.find(({ key }) => {
+    return key === 'stockle';
+  });
+
+  public routerLinkAbout = ['/' + $localize`about`];
+  public routerLinkFeatures = ['/' + $localize`features`];
+  public routerLinkResourcesPersonalFinanceTools = [
+    '/' + $localize`resources`,
+    'personal-finance-tools'
+  ];
+}

apps/client/src/app/pages/resources/personal-finance-tools/products/stockmarketeye-page.component.ts

@@ -0,0 +1,31 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { RouterModule } from '@angular/router';
+
+import { products } from '../products';
+
+@Component({
+  host: { class: 'page' },
+  imports: [CommonModule, MatButtonModule, RouterModule],
+  selector: 'gf-stockmarketeye-page',
+  standalone: true,
+  styleUrls: ['../product-page-template.scss'],
+  templateUrl: '../product-page-template.html'
+})
+export class StockMarketEyePageComponent {
+  public product1 = products.find(({ key }) => {
+    return key === 'ghostfolio';
+  });
+
+  public product2 = products.find(({ key }) => {
+    return key === 'stockmarketeye';
+  });
+
+  public routerLinkAbout = ['/' + $localize`about`];
+  public routerLinkFeatures = ['/' + $localize`features`];
+  public routerLinkResourcesPersonalFinanceTools = [
+    '/' + $localize`resources`,
+    'personal-finance-tools'
+  ];
+}

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

@@ -1,5 +1,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { UserAccountAccessComponent } from '@ghostfolio/client/components/user-account-access/user-account-access.component';
+import { UserAccountMembershipComponent } from '@ghostfolio/client/components/user-account-membership/user-account-membership.component';
+import { UserAccountSettingsComponent } from '@ghostfolio/client/components/user-account-settings/user-account-settings.component';
 import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
 
 import { UserAccountPageComponent } from './user-account-page.component';
@@ -7,6 +10,23 @@ import { UserAccountPageComponent } from './user-account-page.component';
 const routes: Routes = [
   {
     canActivate: [AuthGuard],
+    children: [
+      {
+        path: '',
+        component: UserAccountSettingsComponent,
+        title: $localize`Settings`
+      },
+      {
+        path: 'membership',
+        component: UserAccountMembershipComponent,
+        title: $localize`Membership`
+      },
+      {
+        path: 'access',
+        component: UserAccountAccessComponent,
+        title: $localize`Access`
+      }
+    ],
     component: UserAccountPageComponent,
     path: '',
     title: $localize`My Ghostfolio`

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

@@ -1,447 +1,63 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  OnDestroy,
-  OnInit,
-  ViewChild
-} from '@angular/core';
-import { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';
-import { MatDialog } from '@angular/material/dialog';
-import {
-  MatSnackBar,
-  MatSnackBarRef,
-  TextOnlySnackBar
-} from '@angular/material/snack-bar';
-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 {
-  STAY_SIGNED_IN,
-  SettingsStorageService
-} from '@ghostfolio/client/services/settings-storage.service';
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
-import { WebAuthnService } from '@ghostfolio/client/services/web-authn.service';
-import { downloadAsFile, getDateFormatString } from '@ghostfolio/common/helper';
-import { Access, User } from '@ghostfolio/common/interfaces';
-import { hasPermission, permissions } from '@ghostfolio/common/permissions';
-import { format, parseISO } from 'date-fns';
-import { uniq } from 'lodash';
+import { TabConfiguration, User } from '@ghostfolio/common/interfaces';
 import { DeviceDetectorService } from 'ngx-device-detector';
-import { StripeService } from 'ngx-stripe';
-import { EMPTY, Subject } from 'rxjs';
-import { catchError, switchMap, takeUntil } from 'rxjs/operators';
-
-import { CreateOrUpdateAccessDialog } from './create-or-update-access-dialog/create-or-update-access-dialog.component';
+import { Subject, takeUntil } from 'rxjs';
 
 @Component({
-  host: { class: 'page' },
+  host: { class: 'page has-tabs' },
   selector: 'gf-user-account-page',
   styleUrls: ['./user-account-page.scss'],
   templateUrl: './user-account-page.html'
 })
 export class UserAccountPageComponent implements OnDestroy, OnInit {
-  @ViewChild('toggleSignInWithFingerprintEnabledElement')
-  signInWithFingerprintElement: MatCheckbox;
-
-  public accesses: Access[];
-  public appearancePlaceholder = $localize`Auto`;
-  public baseCurrency: string;
-  public coupon: number;
-  public couponId: string;
-  public currencies: string[] = [];
-  public defaultDateFormat: string;
   public deviceType: string;
-  public hasPermissionForSubscription: boolean;
-  public hasPermissionToCreateAccess: boolean;
-  public hasPermissionToDeleteAccess: boolean;
-  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'
-  ];
-  public price: number;
-  public priceId: string;
-  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 tabs: TabConfiguration[] = [];
   public user: User;
 
   private unsubscribeSubject = new Subject<void>();
 
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
-    private dataService: DataService,
     private deviceService: DeviceDetectorService,
-    private dialog: MatDialog,
-    private snackBar: MatSnackBar,
-    private route: ActivatedRoute,
-    private router: Router,
-    private settingsStorageService: SettingsStorageService,
-    private stripeService: StripeService,
-    private userService: UserService,
-    public webAuthnService: WebAuthnService
+    private userService: UserService
   ) {
-    const { baseCurrency, currencies, globalPermissions, subscriptions } =
-      this.dataService.fetchInfo();
-
-    this.baseCurrency = baseCurrency;
-    this.currencies = currencies;
-
-    this.hasPermissionForSubscription = hasPermission(
-      globalPermissions,
-      permissions.enableSubscription
-    );
-
-    this.hasPermissionToDeleteAccess = hasPermission(
-      globalPermissions,
-      permissions.deleteAccess
-    );
-
     this.userService.stateChanged
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((state) => {
         if (state?.user) {
           this.user = state.user;
 
-          this.defaultDateFormat = getDateFormatString(
-            this.user.settings.locale
-          );
-
-          this.hasPermissionToCreateAccess = hasPermission(
-            this.user.permissions,
-            permissions.createAccess
-          );
-
-          this.hasPermissionToDeleteAccess = hasPermission(
-            this.user.permissions,
-            permissions.deleteAccess
-          );
-
-          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.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.tabs = [
+            {
+              iconName: 'settings-outline',
+              label: $localize`Settings`,
+              path: ['/account']
+            },
+            {
+              iconName: 'diamond-outline',
+              label: $localize`Membership`,
+              path: ['/account/membership'],
+              showCondition: !!this.user?.subscription
+            },
+            {
+              iconName: 'share-social-outline',
+              label: $localize`Access`,
+              path: ['/account', 'access']
+            }
+          ];
 
           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 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 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 onDeleteAccess(aId: string) {
-    this.dataService
-      .deleteAccess(aId)
-      .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe({
-        next: () => {
-          this.update();
-        }
-      });
-  }
-
-  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 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 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 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 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() {
-    this.dataService
-      .fetchAccesses()
-      .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe((response) => {
-        this.accesses = response;
-
-        if (this.signInWithFingerprintElement) {
-          this.signInWithFingerprintElement.checked =
-            this.webAuthnService.isEnabled() ?? false;
-        }
-
-        this.changeDetectorRef.markForCheck();
-      });
-  }
 }

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

@@ -1,305 +1,29 @@
-<div class="container">
-  <div class="row">
-    <div class="col">
-      <h2 class="h3 mb-3 text-center" i18n>Account</h2>
-    </div>
-  </div>
-  <div *ngIf="user?.settings" class="mb-5 row">
-    <div class="col">
-      <mat-card appearance="outlined" class="mb-3">
-        <mat-card-content>
-          <div *ngIf="user?.subscription" class="d-flex py-1">
-            <div class="pr-1 w-50" i18n>Membership</div>
-            <div class="pl-1 w-50">
-              <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 class="align-items-center d-flex mt-4 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-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 && user?.subscription"
-            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>
-        </mat-card-content>
-      </mat-card>
-    </div>
-  </div>
-  <div class="row">
-    <div class="col">
-      <h2 class="align-items-center d-flex h3 justify-content-center mb-3">
-        <span i18n>Granted Access</span>
-        <gf-premium-indicator
-          *ngIf="user?.subscription?.type === 'Basic'"
-          class="ml-1"
-        ></gf-premium-indicator>
-      </h2>
-      <gf-access-table
-        [accesses]="accesses"
-        [hasPermissionToCreateAccess]="hasPermissionToCreateAccess"
-        [showActions]="hasPermissionToDeleteAccess"
-        (accessDeleted)="onDeleteAccess($event)"
-      ></gf-access-table>
-    </div>
-  </div>
-</div>
+<mat-tab-nav-panel #tabPanel class="flex-grow-1 overflow-auto">
+  <router-outlet></router-outlet>
+</mat-tab-nav-panel>
+
+<nav
+  mat-align-tabs="center"
+  mat-tab-nav-bar
+  [disablePagination]="true"
+  [tabPanel]="tabPanel"
+>
+  <ng-container *ngFor="let tab of tabs">
+    <a
+      #rla="routerLinkActive"
+      *ngIf="tab.showCondition !== false"
+      class="px-3"
+      mat-tab-link
+      routerLinkActive
+      [active]="rla.isActive"
+      [routerLink]="tab.path"
+      [routerLinkActiveOptions]="{ exact: true }"
+    >
+      <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>
+</nav>

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

@@ -1,18 +1,10 @@
 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 { MatDialogModule } from '@angular/material/dialog';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatSelectModule } from '@angular/material/select';
-import { RouterModule } from '@angular/router';
-import { GfPortfolioAccessTableModule } from '@ghostfolio/client/components/access-table/access-table.module';
-import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
-import { GfValueModule } from '@ghostfolio/ui/value';
+import { MatTabsModule } from '@angular/material/tabs';
+import { GfUserAccountAccessModule } from '@ghostfolio/client/components/user-account-access/user-account-access.module';
+import { GfUserAccountMembershipModule } from '@ghostfolio/client/components/user-account-membership/user-account-membership.module';
+import { GfUserAccountSettingsModule } from '@ghostfolio/client/components/user-account-settings/user-account-settings.module';
 
-import { GfCreateOrUpdateAccessDialogModule } from './create-or-update-access-dialog/create-or-update-access-dialog.module';
 import { UserAccountPageRoutingModule } from './user-account-page-routing.module';
 import { UserAccountPageComponent } from './user-account-page.component';
 
@@ -20,19 +12,10 @@ import { UserAccountPageComponent } from './user-account-page.component';
   declarations: [UserAccountPageComponent],
   imports: [
     CommonModule,
-    FormsModule,
-    GfCreateOrUpdateAccessDialogModule,
-    GfPortfolioAccessTableModule,
-    GfPremiumIndicatorModule,
-    GfValueModule,
-    MatButtonModule,
-    MatCardModule,
-    MatCheckboxModule,
-    MatDialogModule,
-    MatFormFieldModule,
-    MatSelectModule,
-    ReactiveFormsModule,
-    RouterModule,
+    GfUserAccountAccessModule,
+    GfUserAccountMembershipModule,
+    GfUserAccountSettingsModule,
+    MatTabsModule,
     UserAccountPageRoutingModule
   ]
 })

apps/client/src/app/pages/user-account/user-account-page.scss

@@ -1,15 +1,7 @@
+@import 'apps/client/src/styles/ghostfolio-style';
+
 :host {
   color: rgb(var(--dark-primary-text));
-  display: block;
-
-  gf-access-table {
-    overflow-x: auto;
-  }
-
-  .hint-text {
-    font-size: 90%;
-    line-height: 1.2;
-  }
 }
 
 :host-context(.is-dark-theme) {

apps/client/src/app/services/admin.service.ts

@@ -4,6 +4,8 @@ import { UpdateAssetProfileDto } from '@ghostfolio/api/app/admin/update-asset-pr
 import { UpdateMarketDataDto } from '@ghostfolio/api/app/admin/update-market-data.dto';
 import { CreatePlatformDto } from '@ghostfolio/api/app/platform/create-platform.dto';
 import { UpdatePlatformDto } from '@ghostfolio/api/app/platform/update-platform.dto';
+import { CreateTagDto } from '@ghostfolio/api/app/tag/create-tag.dto';
+import { UpdateTagDto } from '@ghostfolio/api/app/tag/update-tag.dto';
 import { IDataProviderHistoricalResponse } from '@ghostfolio/api/services/interfaces/interfaces';
 import { DATE_FORMAT } from '@ghostfolio/common/helper';
 import {
@@ -15,7 +17,7 @@ import {
   Filter,
   UniqueAsset
 } from '@ghostfolio/common/interfaces';
-import { DataSource, MarketData, Platform, Prisma } from '@prisma/client';
+import { DataSource, MarketData, Platform, Prisma, Tag } from '@prisma/client';
 import { JobStatus } from 'bull';
 import { format, parseISO } from 'date-fns';
 import { Observable, map } from 'rxjs';
@@ -64,6 +66,10 @@ export class AdminService {
     );
   }
 
+  public deleteTag(aId: string) {
+    return this.http.delete<void>(`/api/v1/tag/${aId}`);
+  }
+
   public fetchAdminData() {
     return this.http.get<AdminData>('/api/v1/admin');
   }
@@ -139,6 +145,10 @@ export class AdminService {
     return this.http.get<Platform[]>('/api/v1/platform');
   }
 
+  public fetchTags() {
+    return this.http.get<Tag[]>('/api/v1/tag');
+  }
+
   public gather7Days() {
     return this.http.post<void>('/api/v1/admin/gather', {});
   }
@@ -208,6 +218,10 @@ export class AdminService {
     return this.http.post<Platform>(`/api/v1/platform`, aPlatform);
   }
 
+  public postTag(aTag: CreateTagDto) {
+    return this.http.post<Tag>(`/api/v1/tag`, aTag);
+  }
+
   public putMarketData({
     dataSource,
     date,
@@ -233,4 +247,8 @@ export class AdminService {
       aPlatform
     );
   }
+
+  public putTag(aTag: UpdateTagDto) {
+    return this.http.put<Tag>(`/api/v1/tag/${aTag.id}`, aTag);
+  }
 }

apps/client/src/app/services/data.service.ts

@@ -204,6 +204,10 @@ export class DataService {
     return this.http.delete<any>(`/api/v1/order/`);
   }
 
+  public deleteBenchmark({ dataSource, symbol }: UniqueAsset) {
+    return this.http.delete<any>(`/api/v1/benchmark/${dataSource}/${symbol}`);
+  }
+
   public deleteOrder(aId: string) {
     return this.http.delete<any>(`/api/v1/order/${aId}`);
   }
@@ -496,4 +500,19 @@ export class DataService {
       couponCode
     });
   }
+
+  public updateInfo() {
+    this.http.get<InfoItem>('/api/v1/info').subscribe((info) => {
+      const utmSource = <'ios' | 'trusted-web-activity'>(
+        window.localStorage.getItem('utm_source')
+      );
+
+      info.globalPermissions = filterGlobalPermissions(
+        info.globalPermissions,
+        utmSource
+      );
+
+      (window as any).info = info;
+    });
+  }
 }