Release 1.133.0 (#812)

* Improve empty state

* Update changelog

CHANGELOG.md

@@ -5,6 +5,86 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 1.133.0 - 07.04.2022
+
+### Changed
+
+- Improved the empty state of the portfolio proportion chart component
+
+### Fixed
+
+- Fixed an issue with dates in the value component
+
+## 1.132.1 - 06.04.2022
+
+### Fixed
+
+- Fixed an issue with percentages in the value component
+
+## 1.132.0 - 06.04.2022
+
+### Added
+
+- Added support for localization (date and number format) in user settings
+
+### Changed
+
+- Improved the label of the average price from _Ø Buy Price_ to _Average Unit Price_
+
+## 1.131.1 - 04.04.2022
+
+### Fixed
+
+- Fixed the missing API version in the _Stripe_ success callback url
+
+## 1.131.0 - 02.04.2022
+
+### Added
+
+- Added API versioning
+- Added more durations in the coupon system
+
+### Changed
+
+- Display the value in base currency in the accounts table on mobile
+- Display the value in base currency in the activities table on mobile
+- Renamed `orders` to `activities` in import and export functionality
+- Harmonized the algebraic sign of `currentGrossPerformancePercent` and `currentNetPerformancePercent` with `currentGrossPerformance` and `currentNetPerformance`
+- Improved the pricing page
+- Upgraded `prisma` from version `3.10.0` to `3.11.1`
+- Upgraded `yahoo-finance2` from version `2.2.0` to `2.3.0`
+
+## 1.130.0 - 30.03.2022
+
+### Added
+
+- Added a _FIRE_ (Financial Independence, Retire Early) section including the 4% rule
+- Added more durations in the coupon system
+
+### Fixed
+
+- Fixed an issue with the currency conversion (duplicate) in the account calculations
+
+## 1.129.0 - 26.03.2022
+
+### Added
+
+- Added the calculation for developed vs. emerging markets to the allocations page
+- Added a hover effect to the page tabs
+- Extended the feature overview page by _Bonds_ and _Emergency Fund_
+
+## 1.128.0 - 19.03.2022
+
+### Added
+
+- Added the attribute `defaultMarketPrice` to the scraper configuration to improve the support for bonds
+- Added a hover effect to the table style
+
+### Fixed
+
+- Fixed an issue with the user currency of the public page
+- Fixed an issue of the performance calculation with recent activities in the new calculation engine
+
 ## 1.127.0 - 16.03.2022
 
 ### Changed

README.md

@@ -79,6 +79,7 @@ The frontend is built with [Angular](https://angular.io) and uses [Angular Mater
 ### Prerequisites
 
 - [Docker](https://www.docker.com/products/docker-desktop)
+- A local copy of this Git repository (clone)
 
 ### a. Run environment
 
@@ -121,13 +122,11 @@ Open http://localhost:3333 in your browser and accomplish these steps:
 1. Go to the _Admin Control Panel_ and click _Gather All Data_ to fetch historical data
 1. Click _Sign out_ and check out the _Live Demo_
 
-### Migrate Database
+### Upgrade Version
 
-With the following command you can keep your database schema in sync after a Ghostfolio version update:
-
-```bash
-docker-compose -f docker/docker-compose-build-local.yml exec ghostfolio yarn database:migrate
-```
+1. Increase the version of the `ghostfolio/ghostfolio` Docker image in `docker/docker-compose.yml`
+1. Run the following command to start the new Docker image: `docker-compose -f docker/docker-compose.yml up -d`
+1. Then, run the following command to keep your database schema in sync: `docker-compose -f docker/docker-compose.yml exec ghostfolio yarn database:migrate`
 
 ## Development
 
@@ -136,6 +135,7 @@ docker-compose -f docker/docker-compose-build-local.yml exec ghostfolio yarn dat
 - [Docker](https://www.docker.com/products/docker-desktop)
 - [Node.js](https://nodejs.org/en/download) (version 14+)
 - [Yarn](https://yarnpkg.com/en/docs/install)
+- A local copy of this Git repository (clone)
 
 ### Setup
 
@@ -162,10 +162,84 @@ Run `yarn start:client`
 
 Run `yarn start:storybook`
 
+### Migrate Database
+
+With the following command you can keep your database schema in sync:
+
+```bash
+yarn database:push
+```
+
 ## Testing
 
 Run `yarn test`
 
+## Public API (experimental)
+
+### Import Activities
+
+#### Request
+
+`POST http://localhost:3333/api/v1/import`
+
+#### Authorization: Bearer Token
+
+Set the header as follows:
+
+```
+"Authorization": "Bearer eyJh..."
+```
+
+#### Body
+
+```
+{
+  "activities": [
+    {
+      "currency": "USD",
+      "dataSource": "YAHOO",
+      "date": "2021-09-15T00:00:00.000Z",
+      "fee": 19,
+      "quantity": 5,
+      "symbol": "MSFT"
+      "type": "BUY",
+      "unitPrice": 298.58
+    }
+  ]
+}
+```
+
+| Field      | Type                | Description                                        |
+| ---------- | ------------------- | -------------------------------------------------- |
+| accountId  | string (`optional`) | Id of the account                                  |
+| currency   | string              | `CHF` \| `EUR` \| `USD` etc.                       |
+| dataSource | string              | `MANUAL` (for type `ITEM`) \| `YAHOO`              |
+| date       | string              | Date in the format `ISO-8601`                      |
+| fee        | number              | Fee of the activity                                |
+| quantity   | number              | Quantity of the activity                           |
+| symbol     | string              | Symbol of the activity (suitable for `dataSource`) |
+| type       | string              | `BUY` \| `DIVIDEND` \| `ITEM` \| `SELL`            |
+| unitPrice  | number              | Price per unit of the activity                     |
+
+#### Response
+
+##### Success
+
+`201 Created`
+
+##### Error
+
+`400 Bad Request`
+
+```
+{
+  "error": "Bad Request",
+  "message": [
+    "activities.1 is a duplicate activity"
+  ]
+}
+```
+
 ## Contributing
 
 Ghostfolio is **100% free** and **open source**. We encourage and support an active and healthy community that accepts contributions from the public - including you.

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

@@ -9,7 +9,9 @@ import {
   Post,
   Req,
   Res,
-  UseGuards
+  UseGuards,
+  VERSION_NEUTRAL,
+  Version
 } from '@nestjs/common';
 import { AuthGuard } from '@nestjs/passport';
 import { StatusCodes, getReasonPhrase } from 'http-status-codes';
@@ -51,6 +53,7 @@ export class AuthController {
 
   @Get('google/callback')
   @UseGuards(AuthGuard('google'))
+  @Version(VERSION_NEUTRAL)
   public googleLoginCallback(@Req() req, @Res() res) {
     // Handles the Google OAuth2 callback
     const jwt: string = req.user.jwt;

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

@@ -1,13 +1,6 @@
 import { Export } from '@ghostfolio/common/interfaces';
 import type { RequestWithUser } from '@ghostfolio/common/types';
-import {
-  Controller,
-  Get,
-  Headers,
-  Inject,
-  Query,
-  UseGuards
-} from '@nestjs/common';
+import { Controller, Get, Inject, Query, UseGuards } from '@nestjs/common';
 import { REQUEST } from '@nestjs/core';
 import { AuthGuard } from '@nestjs/passport';
 

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

@@ -14,7 +14,7 @@ export class ExportService {
     activityIds?: string[];
     userId: string;
   }): Promise<Export> {
-    let orders = await this.prismaService.order.findMany({
+    let activities = await this.prismaService.order.findMany({
       orderBy: { date: 'desc' },
       select: {
         accountId: true,
@@ -30,14 +30,14 @@ export class ExportService {
     });
 
     if (activityIds) {
-      orders = orders.filter((order) => {
-        return activityIds.includes(order.id);
+      activities = activities.filter((activity) => {
+        return activityIds.includes(activity.id);
       });
     }
 
     return {
       meta: { date: new Date().toISOString(), version: environment.version },
-      orders: orders.map(
+      activities: activities.map(
         ({
           accountId,
           date,

apps/api/src/app/import/import-data.dto.ts

@@ -6,5 +6,5 @@ export class ImportDataDto {
   @IsArray()
   @Type(() => CreateOrderDto)
   @ValidateNested({ each: true })
-  orders: CreateOrderDto[];
+  activities: CreateOrderDto[];
 }

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

@@ -36,7 +36,7 @@ export class ImportController {
 
     try {
       return await this.importService.import({
-        orders: importData.orders,
+        activities: importData.activities,
         userId: this.request.user.id
       });
     } catch (error) {

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

@@ -16,23 +16,23 @@ export class ImportService {
   ) {}
 
   public async import({
-    orders,
+    activities,
     userId
   }: {
-    orders: Partial<CreateOrderDto>[];
+    activities: Partial<CreateOrderDto>[];
     userId: string;
   }): Promise<void> {
-    for (const order of orders) {
-      if (!order.dataSource) {
-        if (order.type === 'ITEM') {
-          order.dataSource = 'MANUAL';
+    for (const activity of activities) {
+      if (!activity.dataSource) {
+        if (activity.type === 'ITEM') {
+          activity.dataSource = 'MANUAL';
         } else {
-          order.dataSource = this.dataProviderService.getPrimaryDataSource();
+          activity.dataSource = this.dataProviderService.getPrimaryDataSource();
         }
       }
     }
 
-    await this.validateOrders({ orders, userId });
+    await this.validateActivities({ activities, userId });
 
     const accountIds = (await this.accountService.getAccounts(userId)).map(
       (account) => {
@@ -50,7 +50,7 @@ export class ImportService {
       symbol,
       type,
       unitPrice
-    } of orders) {
+    } of activities) {
       await this.orderService.createOrder({
         fee,
         quantity,
@@ -79,24 +79,24 @@ export class ImportService {
     }
   }
 
-  private async validateOrders({
-    orders,
+  private async validateActivities({
+    activities,
     userId
   }: {
-    orders: Partial<CreateOrderDto>[];
+    activities: Partial<CreateOrderDto>[];
     userId: string;
   }) {
     if (
-      orders?.length > this.configurationService.get('MAX_ORDERS_TO_IMPORT')
+      activities?.length > this.configurationService.get('MAX_ORDERS_TO_IMPORT')
     ) {
       throw new Error(
-        `Too many transactions (${this.configurationService.get(
+        `Too many activities (${this.configurationService.get(
           'MAX_ORDERS_TO_IMPORT'
         )} at most)`
       );
     }
 
-    const existingOrders = await this.orderService.orders({
+    const existingActivities = await this.orderService.orders({
       include: { SymbolProfile: true },
       orderBy: { date: 'desc' },
       where: { userId }
@@ -105,22 +105,22 @@ export class ImportService {
     for (const [
       index,
       { currency, dataSource, date, fee, quantity, symbol, type, unitPrice }
-    ] of orders.entries()) {
-      const duplicateOrder = existingOrders.find((order) => {
+    ] of activities.entries()) {
+      const duplicateActivity = existingActivities.find((activity) => {
         return (
-          order.SymbolProfile.currency === currency &&
-          order.SymbolProfile.dataSource === dataSource &&
-          isSameDay(order.date, parseISO(<string>(<unknown>date))) &&
-          order.fee === fee &&
-          order.quantity === quantity &&
-          order.SymbolProfile.symbol === symbol &&
-          order.type === type &&
-          order.unitPrice === unitPrice
+          activity.SymbolProfile.currency === currency &&
+          activity.SymbolProfile.dataSource === dataSource &&
+          isSameDay(activity.date, parseISO(<string>(<unknown>date))) &&
+          activity.fee === fee &&
+          activity.quantity === quantity &&
+          activity.SymbolProfile.symbol === symbol &&
+          activity.type === type &&
+          activity.unitPrice === unitPrice
         );
       });
 
-      if (duplicateOrder) {
-        throw new Error(`orders.${index} is a duplicate transaction`);
+      if (duplicateActivity) {
+        throw new Error(`activities.${index} is a duplicate activity`);
       }
 
       if (dataSource !== 'MANUAL') {
@@ -130,13 +130,13 @@ export class ImportService {
 
         if (quotes[symbol] === undefined) {
           throw new Error(
-            `orders.${index}.symbol ("${symbol}") is not valid for the specified data source ("${dataSource}")`
+            `activities.${index}.symbol ("${symbol}") is not valid for the specified data source ("${dataSource}")`
           );
         }
 
         if (quotes[symbol].currency !== currency) {
           throw new Error(
-            `orders.${index}.currency ("${currency}") does not match with "${quotes[symbol].currency}"`
+            `activities.${index}.currency ("${currency}") does not match with "${quotes[symbol].currency}"`
           );
         }
       }

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

@@ -37,6 +37,9 @@ import { TransactionPointSymbol } from './interfaces/transaction-point-symbol.in
 import { TransactionPoint } from './interfaces/transaction-point.interface';
 
 export class PortfolioCalculatorNew {
+  private static readonly CALCULATE_PERCENTAGE_PERFORMANCE_WITH_MAX_INVESTMENT =
+    true;
+
   private static readonly ENABLE_LOGGING = false;
 
   private currency: string;
@@ -688,6 +691,7 @@ export class PortfolioCalculatorNew {
     let grossPerformanceAtStartDate = new Big(0);
     let grossPerformanceFromSells = new Big(0);
     let initialValue: Big;
+    let investmentAtStartDate: Big;
     let lastAveragePrice = new Big(0);
     let lastTransactionInvestment = new Big(0);
     let lastValueOfInvestmentBeforeTransaction = new Big(0);
@@ -697,6 +701,7 @@ export class PortfolioCalculatorNew {
     let totalInvestment = new Big(0);
     let totalInvestmentWithGrossPerformanceFromSell = new Big(0);
     let totalUnits = new Big(0);
+    let valueAtStartDate: Big;
 
     // Add a synthetic order at the start and the end date
     orders.push({
@@ -774,13 +779,18 @@ export class PortfolioCalculatorNew {
         order.unitPrice
       );
 
+      if (!investmentAtStartDate && i >= indexOfStartOrder) {
+        investmentAtStartDate = totalInvestment ?? new Big(0);
+        valueAtStartDate = valueOfInvestmentBeforeTransaction;
+      }
+
       const transactionInvestment = order.quantity
         .mul(order.unitPrice)
         .mul(this.getFactor(order.type));
 
       totalInvestment = totalInvestment.plus(transactionInvestment);
 
-      if (totalInvestment.gt(maxTotalInvestment)) {
+      if (i >= indexOfStartOrder && totalInvestment.gt(maxTotalInvestment)) {
         maxTotalInvestment = totalInvestment;
       }
 
@@ -898,12 +908,22 @@ export class PortfolioCalculatorNew {
       .minus(grossPerformanceAtStartDate)
       .minus(fees.minus(feesAtStartDate));
 
+    const maxInvestmentBetweenStartAndEndDate = valueAtStartDate.plus(
+      maxTotalInvestment.minus(investmentAtStartDate)
+    );
+
     const grossPerformancePercentage =
+      PortfolioCalculatorNew.CALCULATE_PERCENTAGE_PERFORMANCE_WITH_MAX_INVESTMENT ||
       averagePriceAtStartDate.eq(0) ||
       averagePriceAtEndDate.eq(0) ||
       orders[indexOfStartOrder].unitPrice.eq(0)
-        ? totalGrossPerformance.div(maxTotalInvestment)
-        : unitPriceAtEndDate
+        ? maxInvestmentBetweenStartAndEndDate.gt(0)
+          ? totalGrossPerformance.div(maxInvestmentBetweenStartAndEndDate)
+          : new Big(0)
+        : // This formula has the issue that buying more units with a price
+          // lower than the average buying price results in a positive
+          // performance even if the market price stays constant
+          unitPriceAtEndDate
             .div(averagePriceAtEndDate)
             .div(
               orders[indexOfStartOrder].unitPrice.div(averagePriceAtStartDate)
@@ -915,11 +935,17 @@ export class PortfolioCalculatorNew {
       : new Big(0);
 
     const netPerformancePercentage =
+      PortfolioCalculatorNew.CALCULATE_PERCENTAGE_PERFORMANCE_WITH_MAX_INVESTMENT ||
       averagePriceAtStartDate.eq(0) ||
       averagePriceAtEndDate.eq(0) ||
       orders[indexOfStartOrder].unitPrice.eq(0)
-        ? totalNetPerformance.div(maxTotalInvestment)
-        : unitPriceAtEndDate
+        ? maxInvestmentBetweenStartAndEndDate.gt(0)
+          ? totalNetPerformance.div(maxInvestmentBetweenStartAndEndDate)
+          : new Big(0)
+        : // This formula has the issue that buying more units with a price
+          // lower than the average buying price results in a positive
+          // performance even if the market price stays constant
+          unitPriceAtEndDate
             .minus(feesPerUnit)
             .div(averagePriceAtEndDate)
             .div(

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

@@ -13,8 +13,9 @@ export class PortfolioServiceStrategy {
     @Inject(REQUEST) private readonly request: RequestWithUser
   ) {}
 
-  public get() {
+  public get(newCalculationEngine?: boolean) {
     if (
+      newCalculationEngine ||
       this.request.user?.Settings?.settings?.['isNewCalculationEngine'] === true
     ) {
       return this.portfolioServiceNew;

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

@@ -106,21 +106,11 @@ export class PortfolioController {
     @Headers('impersonation-id') impersonationId: string,
     @Query('range') range
   ): Promise<PortfolioDetails & { hasError: boolean }> {
-    if (
-      this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION') &&
-      this.request.user.subscription.type === 'Basic'
-    ) {
-      throw new HttpException(
-        getReasonPhrase(StatusCodes.FORBIDDEN),
-        StatusCodes.FORBIDDEN
-      );
-    }
-
     let hasError = false;
 
     const { accounts, holdings, hasErrors } =
       await this.portfolioServiceStrategy
-        .get()
+        .get(true)
         .getDetails(impersonationId, this.request.user.id, range);
 
     if (hasErrors || hasNotDefinedValuesInObject(holdings)) {
@@ -162,7 +152,11 @@ export class PortfolioController {
       }
     }
 
-    return { accounts, hasError, holdings };
+    const isBasicUser =
+      this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION') &&
+      this.request.user.subscription.type === 'Basic';
+
+    return { accounts, hasError, holdings: isBasicUser ? {} : holdings };
   }
 
   @Get('investments')
@@ -277,7 +271,7 @@ export class PortfolioController {
     }
 
     const { holdings } = await this.portfolioServiceStrategy
-      .get()
+      .get(true)
       .getDetails(access.userId, access.userId);
 
     const portfolioPublicDetails: PortfolioPublicDetails = {
@@ -304,6 +298,7 @@ export class PortfolioController {
           allocationCurrent: portfolioPosition.allocationCurrent,
           countries: hasDetails ? portfolioPosition.countries : [],
           currency: portfolioPosition.currency,
+          markets: portfolioPosition.markets,
           name: portfolioPosition.name,
           sectors: hasDetails ? portfolioPosition.sectors : [],
           value: portfolioPosition.value / totalValue
@@ -319,6 +314,16 @@ export class PortfolioController {
   public async getSummary(
     @Headers('impersonation-id') impersonationId
   ): Promise<PortfolioSummary> {
+    if (
+      this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION') &&
+      this.request.user.subscription.type === 'Basic'
+    ) {
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.FORBIDDEN),
+        StatusCodes.FORBIDDEN
+      );
+    }
+
     let summary = await this.portfolioServiceStrategy
       .get()
       .getSummary(impersonationId);

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

@@ -40,6 +40,7 @@ import { InvestmentItem } from '@ghostfolio/common/interfaces/investment-item.in
 import type {
   AccountWithValue,
   DateRange,
+  Market,
   OrderWithAccount,
   RequestWithUser
 } from '@ghostfolio/common/types';
@@ -71,6 +72,9 @@ import {
 import { PortfolioCalculatorNew } from './portfolio-calculator-new';
 import { RulesService } from './rules.service';
 
+const developedMarkets = require('../../assets/countries/developed-markets.json');
+const emergingMarkets = require('../../assets/countries/emerging-markets.json');
+
 @Injectable()
 export class PortfolioServiceNew {
   public constructor(
@@ -107,21 +111,21 @@ export class PortfolioServiceNew {
         }
       }
 
-      const value = details.accounts[account.id]?.current ?? 0;
+      const valueInBaseCurrency = details.accounts[account.id]?.current ?? 0;
 
       const result = {
         ...account,
         transactionCount,
-        value,
+        valueInBaseCurrency,
         balanceInBaseCurrency: this.exchangeRateDataService.toCurrency(
           account.balance,
           account.currency,
           userCurrency
         ),
-        valueInBaseCurrency: this.exchangeRateDataService.toCurrency(
-          value,
-          account.currency,
-          userCurrency
+        value: this.exchangeRateDataService.toCurrency(
+          valueInBaseCurrency,
+          userCurrency,
+          account.currency
         )
       };
 
@@ -307,7 +311,10 @@ export class PortfolioServiceNew {
     const emergencyFund = new Big(
       (user.Settings?.settings as UserSettings)?.emergencyFund ?? 0
     );
-    const userCurrency = this.request.user?.Settings?.currency ?? baseCurrency;
+    const userCurrency =
+      this.request.user?.Settings?.currency ??
+      user.Settings?.currency ??
+      baseCurrency;
 
     const { orders, portfolioOrders, transactionPoints } =
       await this.getTransactionPoints({
@@ -377,7 +384,31 @@ export class PortfolioServiceNew {
       const value = item.quantity.mul(item.marketPrice);
       const symbolProfile = symbolProfileMap[item.symbol];
       const dataProviderResponse = dataProviderResponses[item.symbol];
+
+      const markets: { [key in Market]: number } = {
+        developedMarkets: 0,
+        emergingMarkets: 0,
+        otherMarkets: 0
+      };
+
+      for (const country of symbolProfile.countries) {
+        if (developedMarkets.includes(country.code)) {
+          markets.developedMarkets = new Big(markets.developedMarkets)
+            .plus(country.weight)
+            .toNumber();
+        } else if (emergingMarkets.includes(country.code)) {
+          markets.emergingMarkets = new Big(markets.emergingMarkets)
+            .plus(country.weight)
+            .toNumber();
+        } else {
+          markets.otherMarkets = new Big(markets.otherMarkets)
+            .plus(country.weight)
+            .toNumber();
+        }
+      }
+
       holdings[item.symbol] = {
+        markets,
         allocationCurrent: value.div(totalValue).toNumber(),
         allocationInvestment: item.investment.div(totalInvestment).toNumber(),
         assetClass: symbolProfile.assetClass,
@@ -779,23 +810,33 @@ export class PortfolioServiceNew {
 
     const hasErrors = currentPositions.hasErrors;
     const currentValue = currentPositions.currentValue.toNumber();
-    const currentGrossPerformance =
-      currentPositions.grossPerformance.toNumber();
-    const currentGrossPerformancePercent =
-      currentPositions.grossPerformancePercentage.toNumber();
-    const currentNetPerformance = currentPositions.netPerformance.toNumber();
-    const currentNetPerformancePercent =
-      currentPositions.netPerformancePercentage.toNumber();
+    const currentGrossPerformance = currentPositions.grossPerformance;
+    let currentGrossPerformancePercent =
+      currentPositions.grossPerformancePercentage;
+    const currentNetPerformance = currentPositions.netPerformance;
+    let currentNetPerformancePercent =
+      currentPositions.netPerformancePercentage;
+
+    if (currentGrossPerformance.mul(currentGrossPerformancePercent).lt(0)) {
+      // If algebraic sign is different, harmonize it
+      currentGrossPerformancePercent = currentGrossPerformancePercent.mul(-1);
+    }
+
+    if (currentNetPerformance.mul(currentNetPerformancePercent).lt(0)) {
+      // If algebraic sign is different, harmonize it
+      currentNetPerformancePercent = currentNetPerformancePercent.mul(-1);
+    }
 
     return {
       errors: currentPositions.errors,
       hasErrors: currentPositions.hasErrors || hasErrors,
       performance: {
-        currentGrossPerformance,
-        currentGrossPerformancePercent,
-        currentNetPerformance,
-        currentNetPerformancePercent,
-        currentValue
+        currentValue,
+        currentGrossPerformance: currentGrossPerformance.toNumber(),
+        currentGrossPerformancePercent:
+          currentGrossPerformancePercent.toNumber(),
+        currentNetPerformance: currentNetPerformance.toNumber(),
+        currentNetPerformancePercent: currentNetPerformancePercent.toNumber()
       }
     };
   }

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

@@ -106,21 +106,21 @@ export class PortfolioService {
         }
       }
 
-      const value = details.accounts[account.id]?.current ?? 0;
+      const valueInBaseCurrency = details.accounts[account.id]?.current ?? 0;
 
       const result = {
         ...account,
         transactionCount,
-        value,
+        valueInBaseCurrency,
         balanceInBaseCurrency: this.exchangeRateDataService.toCurrency(
           account.balance,
           account.currency,
           userCurrency
         ),
-        valueInBaseCurrency: this.exchangeRateDataService.toCurrency(
-          value,
-          account.currency,
-          userCurrency
+        value: this.exchangeRateDataService.toCurrency(
+          valueInBaseCurrency,
+          userCurrency,
+          account.currency
         )
       };
 
@@ -298,7 +298,10 @@ export class PortfolioService {
     const emergencyFund = new Big(
       (user.Settings?.settings as UserSettings)?.emergencyFund ?? 0
     );
-    const userCurrency = this.request.user?.Settings?.currency ?? baseCurrency;
+    const userCurrency =
+      this.request.user?.Settings?.currency ??
+      user.Settings?.currency ??
+      baseCurrency;
     const portfolioCalculator = new PortfolioCalculator(
       this.currentRateService,
       userCurrency

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

@@ -45,7 +45,7 @@ export class SubscriptionService {
       payment_method_types: ['card'],
       success_url: `${this.configurationService.get(
         'ROOT_URL'
-      )}/api/subscription/stripe/callback?checkoutSessionId={CHECKOUT_SESSION_ID}`
+      )}/api/v1/subscription/stripe/callback?checkoutSessionId={CHECKOUT_SESSION_ID}`
     };
 
     if (couponId) {

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

@@ -1,5 +1,6 @@
 export interface UserSettings {
   emergencyFund?: number;
+  locale?: string;
   isNewCalculationEngine?: boolean;
   isRestrictedView?: boolean;
 }

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

@@ -1,4 +1,4 @@
-import { IsBoolean, IsNumber, IsOptional } from 'class-validator';
+import { IsBoolean, IsNumber, IsOptional, IsString } from 'class-validator';
 
 export class UpdateUserSettingDto {
   @IsNumber()
@@ -12,4 +12,8 @@ export class UpdateUserSettingDto {
   @IsBoolean()
   @IsOptional()
   isRestrictedView?: boolean;
+
+  @IsString()
+  @IsOptional()
+  locale?: string;
 }

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

@@ -2,17 +2,14 @@ import { ConfigurationService } from '@ghostfolio/api/services/configuration.ser
 import { PropertyService } from '@ghostfolio/api/services/property/property.service';
 import { PROPERTY_IS_READ_ONLY_MODE } from '@ghostfolio/common/config';
 import { User } from '@ghostfolio/common/interfaces';
-import {
-  hasPermission,
-  hasRole,
-  permissions
-} from '@ghostfolio/common/permissions';
+import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import type { RequestWithUser } from '@ghostfolio/common/types';
 import {
   Body,
   Controller,
   Delete,
   Get,
+  Headers,
   HttpException,
   Inject,
   Param,
@@ -63,8 +60,13 @@ export class UserController {
 
   @Get()
   @UseGuards(AuthGuard('jwt'))
-  public async getUser(@Param('id') id: string): Promise<User> {
-    return this.userService.getUser(this.request.user);
+  public async getUser(
+    @Headers('accept-language') acceptLanguage: string
+  ): Promise<User> {
+    return this.userService.getUser(
+      this.request.user,
+      acceptLanguage?.split(',')?.[0]
+    );
   }
 
   @Post()
@@ -118,7 +120,7 @@ export class UserController {
     };
 
     for (const key in userSettings) {
-      if (userSettings[key] === false) {
+      if (userSettings[key] === false || userSettings[key] === null) {
         delete userSettings[key];
       }
     }

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

@@ -33,14 +33,17 @@ export class UserService {
     private readonly subscriptionService: SubscriptionService
   ) {}
 
-  public async getUser({
-    Account,
-    alias,
-    id,
-    permissions,
-    Settings,
-    subscription
-  }: UserWithSettings): Promise<IUser> {
+  public async getUser(
+    {
+      Account,
+      alias,
+      id,
+      permissions,
+      Settings,
+      subscription
+    }: UserWithSettings,
+    aLocale = locale
+  ): Promise<IUser> {
     const access = await this.prismaService.access.findMany({
       include: {
         User: true
@@ -63,8 +66,8 @@ export class UserService {
       accounts: Account,
       settings: {
         ...(<UserSettings>Settings.settings),
-        locale,
         baseCurrency: Settings?.currency ?? UserService.DEFAULT_CURRENCY,
+        locale: (<UserSettings>Settings.settings)?.locale ?? aLocale,
         viewMode: Settings?.viewMode ?? ViewMode.DEFAULT
       }
     };
@@ -144,13 +147,6 @@ export class UserService {
       user.subscription = this.subscriptionService.getSubscription(
         userFromDatabase?.Subscription
       );
-
-      if (user.subscription.type === SubscriptionType.Basic) {
-        user.permissions = user.permissions.filter((permission) => {
-          return permission !== permissions.updateViewMode;
-        });
-        user.Settings.viewMode = ViewMode.ZEN;
-      }
     }
 
     return user;

apps/api/src/assets/countries/developed-markets.json

@@ -0,0 +1,26 @@
+[
+  "AT",
+  "AU",
+  "BE",
+  "CA",
+  "CH",
+  "DE",
+  "DK",
+  "ES",
+  "FI",
+  "FR",
+  "GB",
+  "HK",
+  "IE",
+  "IL",
+  "IT",
+  "JP",
+  "LU",
+  "NL",
+  "NO",
+  "NZ",
+  "PT",
+  "SE",
+  "SG",
+  "US"
+]

apps/api/src/assets/countries/emerging-markets.json

@@ -0,0 +1,28 @@
+[
+  "AE",
+  "BR",
+  "CL",
+  "CN",
+  "CO",
+  "CY",
+  "CZ",
+  "EG",
+  "GR",
+  "HK",
+  "HU",
+  "ID",
+  "IN",
+  "KR",
+  "KW",
+  "MX",
+  "MY",
+  "PE",
+  "PH",
+  "PL",
+  "QA",
+  "SA",
+  "TH",
+  "TR",
+  "TW",
+  "ZA"
+]

apps/api/src/main.ts

@@ -1,4 +1,4 @@
-import { Logger, ValidationPipe } from '@nestjs/common';
+import { Logger, ValidationPipe, VersioningType } from '@nestjs/common';
 import { NestFactory } from '@nestjs/core';
 
 import { AppModule } from './app/app.module';
@@ -7,8 +7,11 @@ import { environment } from './environments/environment';
 async function bootstrap() {
   const app = await NestFactory.create(AppModule);
   app.enableCors();
-  const globalPrefix = 'api';
-  app.setGlobalPrefix(globalPrefix);
+  app.enableVersioning({
+    defaultVersion: '1',
+    type: VersioningType.URI
+  });
+  app.setGlobalPrefix('api');
   app.useGlobalPipes(
     new ValidationPipe({
       forbidNonWhitelisted: true,

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

@@ -1,10 +1,10 @@
 import { RuleSettings } from '@ghostfolio/api/models/interfaces/rule-settings.interface';
 import { UserSettings } from '@ghostfolio/api/models/interfaces/user-settings.interface';
+import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
 import {
   PortfolioDetails,
   PortfolioPosition
 } from '@ghostfolio/common/interfaces';
-import { ExchangeRateDataService } from 'apps/api/src/services/exchange-rate-data.service';
 
 import { Rule } from '../../rule';
 

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

@@ -1,7 +1,7 @@
 import { RuleSettings } from '@ghostfolio/api/models/interfaces/rule-settings.interface';
 import { UserSettings } from '@ghostfolio/api/models/interfaces/user-settings.interface';
+import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
 import { PortfolioDetails } from '@ghostfolio/common/interfaces';
-import { ExchangeRateDataService } from 'apps/api/src/services/exchange-rate-data.service';
 
 import { Rule } from '../../rule';
 

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

@@ -1,7 +1,7 @@
 import { CurrentPositions } from '@ghostfolio/api/app/portfolio/interfaces/current-positions.interface';
 import { RuleSettings } from '@ghostfolio/api/models/interfaces/rule-settings.interface';
 import { UserSettings } from '@ghostfolio/api/models/interfaces/user-settings.interface';
-import { ExchangeRateDataService } from 'apps/api/src/services/exchange-rate-data.service';
+import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
 
 import { Rule } from '../../rule';
 

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

@@ -1,7 +1,7 @@
 import { CurrentPositions } from '@ghostfolio/api/app/portfolio/interfaces/current-positions.interface';
 import { RuleSettings } from '@ghostfolio/api/models/interfaces/rule-settings.interface';
 import { UserSettings } from '@ghostfolio/api/models/interfaces/user-settings.interface';
-import { ExchangeRateDataService } from 'apps/api/src/services/exchange-rate-data.service';
+import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
 
 import { Rule } from '../../rule';
 

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

@@ -1,7 +1,7 @@
 import { CurrentPositions } from '@ghostfolio/api/app/portfolio/interfaces/current-positions.interface';
 import { RuleSettings } from '@ghostfolio/api/models/interfaces/rule-settings.interface';
 import { UserSettings } from '@ghostfolio/api/models/interfaces/user-settings.interface';
-import { ExchangeRateDataService } from 'apps/api/src/services/exchange-rate-data.service';
+import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
 
 import { Rule } from '../../rule';
 

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

@@ -1,6 +1,6 @@
 import { RuleSettings } from '@ghostfolio/api/models/interfaces/rule-settings.interface';
 import { UserSettings } from '@ghostfolio/api/models/interfaces/user-settings.interface';
-import { ExchangeRateDataService } from 'apps/api/src/services/exchange-rate-data.service';
+import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
 
 import { Rule } from '../../rule';
 

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

@@ -13,7 +13,7 @@ import { Injectable, Logger } from '@nestjs/common';
 import { DataSource, SymbolProfile } from '@prisma/client';
 import * as bent from 'bent';
 import * as cheerio from 'cheerio';
-import { format } from 'date-fns';
+import { addDays, format, isBefore } from 'date-fns';
 
 @Injectable()
 export class GhostfolioScraperApiService implements DataProviderInterface {
@@ -50,9 +50,27 @@ export class GhostfolioScraperApiService implements DataProviderInterface {
       const [symbolProfile] = await this.symbolProfileService.getSymbolProfiles(
         [symbol]
       );
-      const { selector, url } = symbolProfile.scraperConfiguration;
+      const { defaultMarketPrice, selector, url } =
+        symbolProfile.scraperConfiguration;
 
-      if (selector === undefined || url === undefined) {
+      if (defaultMarketPrice) {
+        const historical: {
+          [symbol: string]: { [date: string]: IDataProviderHistoricalResponse };
+        } = {
+          [symbol]: {}
+        };
+        let date = from;
+
+        while (isBefore(date, to)) {
+          historical[symbol][format(date, DATE_FORMAT)] = {
+            marketPrice: defaultMarketPrice
+          };
+
+          date = addDays(date, 1);
+        }
+
+        return historical;
+      } else if (selector === undefined || url === undefined) {
         return {};
       }
 

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

@@ -1,4 +1,5 @@
 export interface ScraperConfiguration {
+  defaultMarketPrice?: number;
   selector: string;
   url: string;
 }

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

@@ -79,6 +79,7 @@ export class SymbolProfileService {
 
     if (scraperConfiguration) {
       return {
+        defaultMarketPrice: scraperConfiguration.defaultMarketPrice as number,
         selector: scraperConfiguration.selector as string,
         url: scraperConfiguration.url as string
       };

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

@@ -1,16 +1,14 @@
-import {
-  DEFAULT_DATE_FORMAT,
-  DEFAULT_DATE_FORMAT_MONTH_YEAR
-} from '@ghostfolio/common/config';
+import { DEFAULT_DATE_FORMAT_MONTH_YEAR } from '@ghostfolio/common/config';
+import { getDateFormatString } from '@ghostfolio/common/helper';
 
 export const DateFormats = {
   display: {
-    dateInput: DEFAULT_DATE_FORMAT,
+    dateInput: getDateFormatString(),
     monthYearLabel: DEFAULT_DATE_FORMAT_MONTH_YEAR,
-    dateA11yLabel: DEFAULT_DATE_FORMAT,
+    dateA11yLabel: getDateFormatString(),
     monthYearA11yLabel: DEFAULT_DATE_FORMAT_MONTH_YEAR
   },
   parse: {
-    dateInput: DEFAULT_DATE_FORMAT
+    dateInput: getDateFormatString()
   }
 };

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

@@ -113,6 +113,13 @@ const routes: Routes = [
         (m) => m.AnalysisPageModule
       )
   },
+  {
+    path: 'portfolio/fire',
+    loadChildren: () =>
+      import('./pages/portfolio/fire/fire-page.module').then(
+        (m) => m.FirePageModule
+      )
+  },
   {
     path: 'portfolio/report',
     loadChildren: () =>

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

@@ -78,10 +78,19 @@
   </ng-container>
 
   <ng-container matColumnDef="balance">
-    <th *matHeaderCellDef class="px-1 text-right" i18n mat-header-cell>
+    <th
+      *matHeaderCellDef
+      class="d-none d-lg-table-cell px-1 text-right"
+      i18n
+      mat-header-cell
+    >
       Cash Balance
     </th>
-    <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+    <td
+      *matCellDef="let element"
+      class="d-none d-lg-table-cell px-1 text-right"
+      mat-cell
+    >
       <gf-value
         class="d-inline-block justify-content-end"
         [isCurrency]="true"
@@ -89,7 +98,11 @@
         [value]="element.balance"
       ></gf-value>
     </td>
-    <td *matFooterCellDef class="px-1 text-right" mat-footer-cell>
+    <td
+      *matFooterCellDef
+      class="d-none d-lg-table-cell px-1 text-right"
+      mat-footer-cell
+    >
       <gf-value
         class="d-inline-block justify-content-end"
         [isCurrency]="true"
@@ -100,10 +113,19 @@
   </ng-container>
 
   <ng-container matColumnDef="value">
-    <th *matHeaderCellDef class="px-1 text-right" i18n mat-header-cell>
+    <th
+      *matHeaderCellDef
+      class="d-none d-lg-table-cell px-1 text-right"
+      i18n
+      mat-header-cell
+    >
       Value
     </th>
-    <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+    <td
+      *matCellDef="let element"
+      class="d-none d-lg-table-cell px-1 text-right"
+      mat-cell
+    >
       <gf-value
         class="d-inline-block justify-content-end"
         [isCurrency]="true"
@@ -111,7 +133,46 @@
         [value]="element.value"
       ></gf-value>
     </td>
-    <td *matFooterCellDef class="px-1 text-right" mat-footer-cell>
+    <td
+      *matFooterCellDef
+      class="d-none d-lg-table-cell px-1 text-right"
+      mat-footer-cell
+    >
+      <gf-value
+        class="d-inline-block justify-content-end"
+        [isCurrency]="true"
+        [locale]="locale"
+        [value]="totalValueInBaseCurrency"
+      ></gf-value>
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="valueInBaseCurrency">
+    <th
+      *matHeaderCellDef
+      class="d-lg-none d-xl-none px-1 text-right"
+      i18n
+      mat-header-cell
+    >
+      Value
+    </th>
+    <td
+      *matCellDef="let element"
+      class="d-lg-none d-xl-none px-1 text-right"
+      mat-cell
+    >
+      <gf-value
+        class="d-inline-block justify-content-end"
+        [isCurrency]="true"
+        [locale]="locale"
+        [value]="element.valueInBaseCurrency"
+      ></gf-value>
+    </td>
+    <td
+      *matFooterCellDef
+      class="d-lg-none d-xl-none px-1 text-right"
+      mat-footer-cell
+    >
       <gf-value
         class="d-inline-block justify-content-end"
         [isCurrency]="true"

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

@@ -50,7 +50,8 @@ export class AccountsTableComponent implements OnChanges, OnDestroy, OnInit {
       'transactions',
       'balance',
       'value',
-      'currency'
+      'currency',
+      'valueInBaseCurrency'
     ];
 
     if (this.showActions) {

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

@@ -8,8 +8,11 @@ import {
   Output
 } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { DEFAULT_DATE_FORMAT } from '@ghostfolio/common/config';
-import { DATE_FORMAT } from '@ghostfolio/common/helper';
+import {
+  DATE_FORMAT,
+  getDateFormatString,
+  getLocale
+} from '@ghostfolio/common/helper';
 import { LineChartItem } from '@ghostfolio/ui/line-chart/interfaces/line-chart.interface';
 import { DataSource, MarketData } from '@prisma/client';
 import {
@@ -35,13 +38,14 @@ import { MarketDataDetailDialog } from './market-data-detail-dialog/market-data-
 export class AdminMarketDataDetailComponent implements OnChanges, OnInit {
   @Input() dataSource: DataSource;
   @Input() dateOfFirstActivity: string;
+  @Input() locale = getLocale();
   @Input() marketData: MarketData[];
   @Input() symbol: string;
 
   @Output() marketDataChanged = new EventEmitter<boolean>();
 
   public days = Array(31);
-  public defaultDateFormat = DEFAULT_DATE_FORMAT;
+  public defaultDateFormat: string;
   public deviceType: string;
   public historicalDataItems: LineChartItem[];
   public marketDataByMonth: {
@@ -62,6 +66,8 @@ export class AdminMarketDataDetailComponent implements OnChanges, OnInit {
   public ngOnInit() {}
 
   public ngOnChanges() {
+    this.defaultDateFormat = getDateFormatString(this.locale);
+
     this.historicalDataItems = this.marketData.map((marketDataItem) => {
       return {
         date: format(marketDataItem.date, DATE_FORMAT),

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

@@ -7,8 +7,9 @@ import {
 } from '@angular/core';
 import { AdminService } from '@ghostfolio/client/services/admin.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
-import { DEFAULT_DATE_FORMAT } from '@ghostfolio/common/config';
-import { UniqueAsset } from '@ghostfolio/common/interfaces';
+import { UserService } from '@ghostfolio/client/services/user/user.service';
+import { getDateFormatString } from '@ghostfolio/common/helper';
+import { UniqueAsset, User } from '@ghostfolio/common/interfaces';
 import { AdminMarketDataItem } from '@ghostfolio/common/interfaces/admin-market-data.interface';
 import { DataSource, MarketData } from '@prisma/client';
 import { Subject } from 'rxjs';
@@ -23,9 +24,10 @@ import { takeUntil } from 'rxjs/operators';
 export class AdminMarketDataComponent implements OnDestroy, OnInit {
   public currentDataSource: DataSource;
   public currentSymbol: string;
-  public defaultDateFormat = DEFAULT_DATE_FORMAT;
+  public defaultDateFormat: string;
   public marketData: AdminMarketDataItem[] = [];
   public marketDataDetails: MarketData[] = [];
+  public user: User;
 
   private unsubscribeSubject = new Subject<void>();
 
@@ -35,8 +37,21 @@ export class AdminMarketDataComponent implements OnDestroy, OnInit {
   public constructor(
     private adminService: AdminService,
     private changeDetectorRef: ChangeDetectorRef,
-    private dataService: DataService
-  ) {}
+    private dataService: DataService,
+    private userService: UserService
+  ) {
+    this.userService.stateChanged
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((state) => {
+        if (state?.user) {
+          this.user = state.user;
+
+          this.defaultDateFormat = getDateFormatString(
+            this.user.settings.locale
+          );
+        }
+      });
+  }
 
   /**
    * Initializes the controller

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

@@ -65,6 +65,7 @@
                 <gf-admin-market-data-detail
                   [dataSource]="item.dataSource"
                   [dateOfFirstActivity]="item.date"
+                  [locale]="user?.settings?.locale"
                   [marketData]="marketDataDetails"
                   [symbol]="item.symbol"
                   (marketDataChanged)="onMarketDataChanged($event)"

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

@@ -5,7 +5,6 @@ import { CacheService } from '@ghostfolio/client/services/cache.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import {
-  DEFAULT_DATE_FORMAT,
   PROPERTY_COUPONS,
   PROPERTY_CURRENCIES,
   PROPERTY_IS_READ_ONLY_MODE,
@@ -35,7 +34,6 @@ export class AdminOverviewComponent implements OnDestroy, OnInit {
   public customCurrencies: string[];
   public dataGatheringInProgress: boolean;
   public dataGatheringProgress: number;
-  public defaultDateFormat = DEFAULT_DATE_FORMAT;
   public exchangeRates: { label1: string; label2: string; value: number }[];
   public hasPermissionForSubscription: boolean;
   public hasPermissionForSystemMessage: boolean;

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

@@ -180,6 +180,8 @@
                       [value]="couponDuration"
                       (selectionChange)="onChangeCouponDuration($event.value)"
                     >
+                      <mat-option value="7 days">7 Days</mat-option>
+                      <mat-option value="14 days">14 Days</mat-option>
                       <mat-option value="30 days">30 Days</mat-option>
                       <mat-option value="1 year">1 Year</mat-option>
                     </mat-select>

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

@@ -8,7 +8,7 @@
   <div>
     <ng-container *ngIf="data.hasPermissionToUseSocialLogin">
       <div class="text-center">
-        <a color="accent" href="/api/auth/google" mat-flat-button
+        <a color="accent" href="/api/v1/auth/google" mat-flat-button
           ><ion-icon class="mr-1" name="logo-google"></ion-icon
           ><span i18n>Sign in with Google</span></a
         >

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

@@ -7,6 +7,10 @@ import {
   OnInit,
   ViewChild
 } from '@angular/core';
+import {
+  getNumberFormatDecimal,
+  getNumberFormatGroup
+} from '@ghostfolio/common/helper';
 import {
   PortfolioPerformance,
   ResponseError
@@ -50,13 +54,14 @@ export class PortfolioPerformanceComponent implements OnChanges, OnInit {
         this.unit = this.baseCurrency;
 
         new CountUp('value', this.performance?.currentValue, {
+          decimal: getNumberFormatDecimal(this.locale),
           decimalPlaces:
             this.deviceType === 'mobile' &&
             this.performance?.currentValue >= 100000
               ? 0
               : 2,
           duration: 1,
-          separator: `'`
+          separator: getNumberFormatGroup(this.locale)
         }).start();
       } else if (this.performance?.currentValue === null) {
         this.unit = '%';
@@ -65,9 +70,10 @@ export class PortfolioPerformanceComponent implements OnChanges, OnInit {
           'value',
           this.performance?.currentNetPerformancePercent * 100,
           {
+            decimal: getNumberFormatDecimal(this.locale),
             decimalPlaces: 2,
-            duration: 0.75,
-            separator: `'`
+            duration: 1,
+            separator: getNumberFormatGroup(this.locale)
           }
         ).start();
       }

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

@@ -21,7 +21,7 @@
 
     <gf-line-chart
       class="mb-4"
-      benchmarkLabel="Buy Price"
+      benchmarkLabel="Average Unit Price"
       [benchmarkDataItems]="benchmarkDataItems"
       [historicalDataItems]="historicalDataItems"
       [showGradient]="true"
@@ -53,7 +53,7 @@
       </div>
       <div class="col-6 mb-3">
         <gf-value
-          label="Ø Buy Price"
+          label="Average Unit Price"
           size="medium"
           [currency]="SymbolProfile?.currency"
           [locale]="data.locale"
@@ -111,6 +111,8 @@
         <gf-value
           label="First Buy Date"
           size="medium"
+          [isDate]="true"
+          [locale]="data.locale"
           [value]="firstBuyDate"
         ></gf-value>
       </div>

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

@@ -123,17 +123,6 @@
   }"
 ></ngx-skeleton-loader>
 
-<div
-  *ngIf="
-    dataSource.data.length === 0 && hasPermissionToCreateOrder && !isLoading
-  "
-  class="p-3 text-center"
->
-  <gf-no-transactions-info-indicator
-    [hasBorder]="false"
-  ></gf-no-transactions-info-indicator>
-</div>
-
 <div
   *ngIf="dataSource.data.length > pageSize && !isLoading"
   class="my-3 text-center"

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

@@ -27,7 +27,6 @@ import { Subject, Subscription } from 'rxjs';
 export class PositionsTableComponent implements OnChanges, OnDestroy, OnInit {
   @Input() baseCurrency: string;
   @Input() deviceType: string;
-  @Input() hasPermissionToCreateOrder: boolean;
   @Input() locale: string;
   @Input() positions: PortfolioPosition[];
 

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

@@ -17,12 +17,14 @@ import { DataService } from '@ghostfolio/client/services/data.service';
 import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service';
 import { WebAuthnService } from '@ghostfolio/client/services/web-authn.service';
 import { InfoItem } from '@ghostfolio/common/interfaces';
+import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { StatusCodes } from 'http-status-codes';
 import { Observable, throwError } from 'rxjs';
 import { catchError, tap } from 'rxjs/operators';
 
 @Injectable()
 export class HttpResponseInterceptor implements HttpInterceptor {
+  public hasPermissionForSubscription: boolean;
   public info: InfoItem;
   public snackBarRef: MatSnackBarRef<TextOnlySnackBar>;
 
@@ -34,6 +36,11 @@ export class HttpResponseInterceptor implements HttpInterceptor {
     private webAuthnService: WebAuthnService
   ) {
     this.info = this.dataService.fetchInfo();
+
+    this.hasPermissionForSubscription = hasPermission(
+      this.info?.globalPermissions,
+      permissions.enableSubscription
+    );
   }
 
   public intercept(
@@ -56,7 +63,7 @@ export class HttpResponseInterceptor implements HttpInterceptor {
             } else {
               this.snackBarRef = this.snackBar.open(
                 'This feature requires a subscription.',
-                'Upgrade Plan',
+                this.hasPermissionForSubscription ? 'Upgrade Plan' : undefined,
                 { duration: 6000 }
               );
             }

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

@@ -20,9 +20,11 @@ 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 { WebAuthnService } from '@ghostfolio/client/services/web-authn.service';
-import { DEFAULT_DATE_FORMAT, baseCurrency } from '@ghostfolio/common/config';
+import { baseCurrency } from '@ghostfolio/common/config';
+import { getDateFormatString } from '@ghostfolio/common/helper';
 import { Access, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
+import { uniq } from 'lodash';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { StripeService } from 'ngx-stripe';
 import { EMPTY, Subject } from 'rxjs';
@@ -45,13 +47,14 @@ export class AccountPageComponent implements OnDestroy, OnInit {
   public coupon: number;
   public couponId: string;
   public currencies: string[] = [];
-  public defaultDateFormat = DEFAULT_DATE_FORMAT;
+  public defaultDateFormat: string;
   public deviceType: string;
   public hasPermissionForSubscription: boolean;
   public hasPermissionToCreateAccess: boolean;
   public hasPermissionToDeleteAccess: boolean;
   public hasPermissionToUpdateViewMode: boolean;
   public hasPermissionToUpdateUserSettings: boolean;
+  public locales = ['de', 'de-CH', 'en-GB', 'en-US'];
   public price: number;
   public priceId: string;
   public snackBarRef: MatSnackBarRef<TextOnlySnackBar>;
@@ -101,6 +104,10 @@ export class AccountPageComponent implements OnDestroy, OnInit {
         if (state?.user) {
           this.user = state.user;
 
+          this.defaultDateFormat = getDateFormatString(
+            this.user.settings.locale
+          );
+
           this.hasPermissionToCreateAccess = hasPermission(
             this.user.permissions,
             permissions.createAccess
@@ -121,6 +128,9 @@ export class AccountPageComponent implements OnDestroy, OnInit {
             permissions.updateViewMode
           );
 
+          this.locales.push(this.user.settings.locale);
+          this.locales = uniq(this.locales.sort());
+
           this.changeDetectorRef.markForCheck();
         }
       });
@@ -143,6 +153,24 @@ export class AccountPageComponent implements OnDestroy, OnInit {
     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();
+          });
+      });
+  }
+
   public onChangeUserSettings(aKey: string, aValue: string) {
     const settings = { ...this.user.settings, [aKey]: aValue };
 

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

@@ -27,26 +27,28 @@
                 Valid until {{ user?.subscription?.expiresAt | date:
                 defaultDateFormat }}
               </div>
-              <div
-                *ngIf="hasPermissionForSubscription && user?.subscription?.type === 'Basic'"
-              >
-                <button
-                  color="primary"
-                  i18n
-                  mat-flat-button
-                  (click)="onCheckout(priceId)"
-                >
-                  Upgrade
-                </button>
-                <div *ngIf="price" class="mt-1">
-                  {{ baseCurrency }}
-                  <ng-container *ngIf="coupon"
-                    >{{ price - coupon | number : '1.2-2' }}
-                    <del>{{ price }}</del>
-                  </ng-container>
-                  <ng-container *ngIf="!coupon">{{ price }}</ng-container>
-                  <span i18n> per year</span>
-                </div>
+              <div *ngIf="user?.subscription?.type === 'Basic'">
+                <ng-container *ngIf="hasPermissionForSubscription">
+                  <button
+                    color="primary"
+                    i18n
+                    mat-flat-button
+                    (click)="onCheckout(priceId)"
+                  >
+                    Upgrade
+                  </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"
@@ -109,14 +111,34 @@
                   </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" i18n>
+                    Date and number format
+                  </div>
+                </div>
+                <div class="pl-1 w-50">
+                  <mat-form-field appearance="outline" class="w-100">
+                    <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" i18n>
                   View Mode
-                  <ion-icon
-                    *ngIf="!hasPermissionToUpdateViewMode"
-                    class="mx-1 text-muted"
-                    name="diamond-outline"
-                  ></ion-icon>
                 </div>
                 <div class="pl-1 w-50">
                   <div class="align-items-center d-flex overflow-hidden">

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

@@ -10,6 +10,7 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { RouterModule } from '@angular/router';
 import { GfPortfolioAccessTableModule } from '@ghostfolio/client/components/access-table/access-table.module';
+import { GfValueModule } from '@ghostfolio/ui/value';
 
 import { AccountPageRoutingModule } from './account-page-routing.module';
 import { AccountPageComponent } from './account-page.component';
@@ -24,6 +25,7 @@ import { GfCreateOrUpdateAccessDialogModule } from './create-or-update-access-di
     FormsModule,
     GfCreateOrUpdateAccessDialogModule,
     GfPortfolioAccessTableModule,
+    GfValueModule,
     MatButtonModule,
     MatCardModule,
     MatDialogModule,

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

@@ -29,6 +29,12 @@
         color: rgba(var(--palette-primary-500), 1);
         opacity: 1;
       }
+
+      .mat-tab-link {
+        &:hover {
+          opacity: 0.75;
+        }
+      }
     }
   }
 }

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

@@ -32,6 +32,17 @@
             </div>
           </mat-card>
         </div>
+        <div class="col-xs-12 col-md-4 mb-3">
+          <mat-card class="d-flex flex-column h-100">
+            <div class="flex-grow-1">
+              <h4 i18n>Bonds</h4>
+              <p class="m-0">
+                Manage your investment in bonds and other assets with fixed
+                income.
+              </p>
+            </div>
+          </mat-card>
+        </div>
         <div class="col-xs-12 col-md-4 mb-3">
           <mat-card class="d-flex flex-column h-100">
             <div class="flex-grow-1">
@@ -64,6 +75,17 @@
             </div>
           </mat-card>
         </div>
+        <div class="col-xs-12 col-md-4 mb-3">
+          <mat-card class="d-flex flex-column h-100">
+            <div class="flex-grow-1">
+              <h4 class="align-items-center d-flex" i18n>Emergency Fund</h4>
+              <p class="m-0">
+                Define your emergency fund you are comfortable with for
+                difficult times.
+              </p>
+            </div>
+          </mat-card>
+        </div>
         <div class="col-xs-12 col-md-4 mb-3">
           <mat-card class="d-flex flex-column h-100">
             <div class="flex-grow-1">

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

@@ -30,6 +30,12 @@
         color: rgba(var(--palette-primary-500), 1);
         opacity: 1;
       }
+
+      .mat-tab-link {
+        &:hover {
+          opacity: 0.75;
+        }
+      }
     }
   }
 }

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

@@ -13,8 +13,7 @@ import {
   UniqueAsset,
   User
 } from '@ghostfolio/common/interfaces';
-import { hasPermission, permissions } from '@ghostfolio/common/permissions';
-import { ToggleOption } from '@ghostfolio/common/types';
+import { Market, ToggleOption } from '@ghostfolio/common/types';
 import { Account, AssetClass, DataSource } from '@prisma/client';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject, Subscription } from 'rxjs';
@@ -41,7 +40,9 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
   };
   public deviceType: string;
   public hasImpersonationId: boolean;
-  public hasPermissionToCreateOrder: boolean;
+  public markets: {
+    [key in Market]: { name: string; value: number };
+  };
   public period = 'current';
   public periodOptions: ToggleOption[] = [
     { label: 'Initial', value: 'original' },
@@ -136,11 +137,6 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
         if (state?.user) {
           this.user = state.user;
 
-          this.hasPermissionToCreateOrder = hasPermission(
-            this.user.permissions,
-            permissions.createOrder
-          );
-
           this.changeDetectorRef.markForCheck();
         }
       });
@@ -160,6 +156,20 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
         value: 0
       }
     };
+    this.markets = {
+      developedMarkets: {
+        name: 'developedMarkets',
+        value: 0
+      },
+      emergingMarkets: {
+        name: 'emergingMarkets',
+        value: 0
+      },
+      otherMarkets: {
+        name: 'otherMarkets',
+        value: 0
+      }
+    };
     this.positions = {};
     this.positionsArray = [];
     this.sectors = {
@@ -219,6 +229,16 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
         // Prepare analysis data by continents, countries and sectors except for cash
 
         if (position.countries.length > 0) {
+          this.markets.developedMarkets.value +=
+            position.markets.developedMarkets *
+            (aPeriod === 'original' ? position.investment : position.value);
+          this.markets.emergingMarkets.value +=
+            position.markets.emergingMarkets *
+            (aPeriod === 'original' ? position.investment : position.value);
+          this.markets.otherMarkets.value +=
+            position.markets.otherMarkets *
+            (aPeriod === 'original' ? position.investment : position.value);
+
           for (const country of position.countries) {
             const { code, continent, name, weight } = country;
 
@@ -294,6 +314,18 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
         };
       }
     }
+
+    const marketsTotal =
+      this.markets.developedMarkets.value +
+      this.markets.emergingMarkets.value +
+      this.markets.otherMarkets.value;
+
+    this.markets.developedMarkets.value =
+      this.markets.developedMarkets.value / marketsTotal;
+    this.markets.emergingMarkets.value =
+      this.markets.emergingMarkets.value / marketsTotal;
+    this.markets.otherMarkets.value =
+      this.markets.otherMarkets.value / marketsTotal;
   }
 
   public onChangePeriod(aValue: string) {

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

@@ -30,33 +30,14 @@
     <div class="col-md-4">
       <mat-card class="mb-3">
         <mat-card-header class="overflow-hidden w-100">
-          <mat-card-title class="text-truncate" i18n
-            >By Asset Class</mat-card-title
-          >
-          <gf-toggle
-            [defaultValue]="period"
-            [isLoading]="false"
-            [options]="periodOptions"
-            (change)="onChangePeriod($event.value)"
-          ></gf-toggle>
-        </mat-card-header>
-        <mat-card-content>
-          <gf-portfolio-proportion-chart
-            [baseCurrency]="user?.settings?.baseCurrency"
-            [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
-            [keys]="['assetClass', 'assetSubClass']"
-            [locale]="user?.settings?.locale"
-            [positions]="positions"
-          ></gf-portfolio-proportion-chart>
-        </mat-card-content>
-      </mat-card>
-    </div>
-    <div class="col-md-4">
-      <mat-card class="mb-3">
-        <mat-card-header class="overflow-hidden w-100">
-          <mat-card-title class="text-truncate" i18n
-            >By Currency</mat-card-title
-          >
+          <mat-card-title class="align-items-center d-flex text-truncate"
+            ><span i18n>By Currency</span
+            ><ion-icon
+              *ngIf="user?.subscription?.type === 'Basic'"
+              class="ml-1 text-muted"
+              name="diamond-outline"
+            ></ion-icon
+          ></mat-card-title>
           <gf-toggle
             [defaultValue]="period"
             [isLoading]="false"
@@ -75,10 +56,46 @@
         </mat-card-content>
       </mat-card>
     </div>
+    <div class="col-md-4">
+      <mat-card class="mb-3">
+        <mat-card-header class="overflow-hidden w-100">
+          <mat-card-title class="align-items-center d-flex text-truncate"
+            ><span i18n>By Asset Class</span
+            ><ion-icon
+              *ngIf="user?.subscription?.type === 'Basic'"
+              class="ml-1 text-muted"
+              name="diamond-outline"
+            ></ion-icon
+          ></mat-card-title>
+          <gf-toggle
+            [defaultValue]="period"
+            [isLoading]="false"
+            [options]="periodOptions"
+            (change)="onChangePeriod($event.value)"
+          ></gf-toggle>
+        </mat-card-header>
+        <mat-card-content>
+          <gf-portfolio-proportion-chart
+            [baseCurrency]="user?.settings?.baseCurrency"
+            [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
+            [keys]="['assetClass', 'assetSubClass']"
+            [locale]="user?.settings?.locale"
+            [positions]="positions"
+          ></gf-portfolio-proportion-chart>
+        </mat-card-content>
+      </mat-card>
+    </div>
     <div class="col-md-12 allocations-by-symbol">
       <mat-card class="mb-3">
         <mat-card-header class="overflow-hidden w-100">
-          <mat-card-title class="text-truncate" i18n>By Symbol</mat-card-title>
+          <mat-card-title class="align-items-center d-flex text-truncate"
+            ><span i18n>By Symbol</span
+            ><ion-icon
+              *ngIf="user?.subscription?.type === 'Basic'"
+              class="ml-1 text-muted"
+              name="diamond-outline"
+            ></ion-icon
+          ></mat-card-title>
           <gf-toggle
             [defaultValue]="period"
             [isLoading]="false"
@@ -104,7 +121,14 @@
     <div class="col-md-4">
       <mat-card class="mb-3">
         <mat-card-header class="overflow-hidden w-100">
-          <mat-card-title class="text-truncate" i18n>By Sector</mat-card-title>
+          <mat-card-title class="align-items-center d-flex text-truncate"
+            ><span i18n>By Sector</span
+            ><ion-icon
+              *ngIf="user?.subscription?.type === 'Basic'"
+              class="ml-1 text-muted"
+              name="diamond-outline"
+            ></ion-icon
+          ></mat-card-title>
           <gf-toggle
             [defaultValue]="period"
             [isLoading]="false"
@@ -127,9 +151,14 @@
     <div class="col-md-4">
       <mat-card class="mb-3">
         <mat-card-header class="overflow-hidden w-100">
-          <mat-card-title class="text-truncate" i18n
-            >By Continent</mat-card-title
-          >
+          <mat-card-title class="align-items-center d-flex text-truncate"
+            ><span i18n>By Continent</span
+            ><ion-icon
+              *ngIf="user?.subscription?.type === 'Basic'"
+              class="ml-1 text-muted"
+              name="diamond-outline"
+            ></ion-icon
+          ></mat-card-title>
           <gf-toggle
             [defaultValue]="period"
             [isLoading]="false"
@@ -151,7 +180,14 @@
     <div class="col-md-4">
       <mat-card class="mb-3">
         <mat-card-header class="overflow-hidden w-100">
-          <mat-card-title class="text-truncate" i18n>By Country</mat-card-title>
+          <mat-card-title class="align-items-center d-flex text-truncate"
+            ><span i18n>By Country</span
+            ><ion-icon
+              *ngIf="user?.subscription?.type === 'Basic'"
+              class="ml-1 text-muted"
+              name="diamond-outline"
+            ></ion-icon
+          ></mat-card-title>
           <gf-toggle
             [defaultValue]="period"
             [isLoading]="false"
@@ -176,7 +212,14 @@
     <div class="col-lg">
       <mat-card class="mb-3">
         <mat-card-header class="overflow-hidden w-100">
-          <mat-card-title class="text-truncate" i18n>Regions</mat-card-title>
+          <mat-card-title class="align-items-center d-flex text-truncate"
+            ><span i18n>Regions</span
+            ><ion-icon
+              *ngIf="user?.subscription?.type === 'Basic'"
+              class="ml-1 text-muted"
+              name="diamond-outline"
+            ></ion-icon
+          ></mat-card-title>
           <gf-toggle
             [defaultValue]="period"
             [isLoading]="false"
@@ -190,6 +233,32 @@
             [countries]="countries"
             [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
           ></gf-world-map-chart>
+          <div class="row">
+            <div class="col-xs-12 col-md-4 my-2">
+              <gf-value
+                label="Developed Markets"
+                size="large"
+                [isPercent]="true"
+                [value]="markets?.developedMarkets?.value"
+              ></gf-value>
+            </div>
+            <div class="col-xs-12 col-md-4 my-2">
+              <gf-value
+                label="Emerging Markets"
+                size="large"
+                [isPercent]="true"
+                [value]="markets?.emergingMarkets?.value"
+              ></gf-value>
+            </div>
+            <div class="col-xs-12 col-md-4 my-2">
+              <gf-value
+                label="Other Markets"
+                size="large"
+                [isPercent]="true"
+                [value]="markets?.otherMarkets?.value"
+              ></gf-value>
+            </div>
+          </div>
         </mat-card-content>
       </mat-card>
     </div>
@@ -199,7 +268,6 @@
       <gf-positions-table
         [baseCurrency]="user?.settings?.baseCurrency"
         [deviceType]="deviceType"
-        [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
         [locale]="user?.settings?.locale"
         [positions]="positionsArray"
       ></gf-positions-table>

apps/client/src/app/pages/portfolio/allocations/allocations-page.module.ts

@@ -5,6 +5,7 @@ import { GfPositionsTableModule } from '@ghostfolio/client/components/positions-
 import { GfToggleModule } from '@ghostfolio/client/components/toggle/toggle.module';
 import { GfWorldMapChartModule } from '@ghostfolio/client/components/world-map-chart/world-map-chart.module';
 import { GfPortfolioProportionChartModule } from '@ghostfolio/ui/portfolio-proportion-chart/portfolio-proportion-chart.module';
+import { GfValueModule } from '@ghostfolio/ui/value';
 
 import { AllocationsPageRoutingModule } from './allocations-page-routing.module';
 import { AllocationsPageComponent } from './allocations-page.component';
@@ -19,6 +20,7 @@ import { AllocationsPageComponent } from './allocations-page.component';
     GfPositionsTableModule,
     GfToggleModule,
     GfWorldMapChartModule,
+    GfValueModule,
     MatCardModule
   ],
   providers: [],

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

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

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

@@ -0,0 +1,86 @@
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { DataService } from '@ghostfolio/client/services/data.service';
+import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
+import { UserService } from '@ghostfolio/client/services/user/user.service';
+import { User } from '@ghostfolio/common/interfaces';
+import Big from 'big.js';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+  host: { class: 'page' },
+  selector: 'gf-fire-page',
+  styleUrls: ['./fire-page.scss'],
+  templateUrl: './fire-page.html'
+})
+export class FirePageComponent implements OnDestroy, OnInit {
+  public fireWealth: number;
+  public hasImpersonationId: boolean;
+  public isLoading = false;
+  public user: User;
+  public withdrawalRatePerMonth: number;
+  public withdrawalRatePerYear: number;
+
+  private unsubscribeSubject = new Subject<void>();
+
+  /**
+   * @constructor
+   */
+  public constructor(
+    private changeDetectorRef: ChangeDetectorRef,
+    private dataService: DataService,
+    private impersonationStorageService: ImpersonationStorageService,
+    private userService: UserService
+  ) {}
+
+  /**
+   * Initializes the controller
+   */
+  public ngOnInit() {
+    this.isLoading = true;
+
+    this.impersonationStorageService
+      .onChangeHasImpersonation()
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((aId) => {
+        this.hasImpersonationId = !!aId;
+      });
+
+    this.dataService
+      .fetchPortfolioSummary()
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(({ cash, currentValue }) => {
+        if (cash === null || currentValue === null) {
+          return;
+        }
+
+        this.fireWealth = new Big(currentValue).plus(cash).toNumber();
+        this.withdrawalRatePerYear = new Big(this.fireWealth)
+          .mul(4)
+          .div(100)
+          .toNumber();
+        this.withdrawalRatePerMonth = new Big(this.withdrawalRatePerYear)
+          .div(12)
+          .toNumber();
+
+        this.isLoading = false;
+
+        this.changeDetectorRef.markForCheck();
+      });
+
+    this.userService.stateChanged
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((state) => {
+        if (state?.user) {
+          this.user = state.user;
+
+          this.changeDetectorRef.markForCheck();
+        }
+      });
+  }
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+}

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

@@ -0,0 +1,53 @@
+<div class="container">
+  <div class="row">
+    <div class="col-lg">
+      <h3 class="d-flex justify-content-center mb-3" i18n>FIRE</h3>
+      <div class="mb-4">
+        <h4 i18n>4% Rule</h4>
+        <div *ngIf="isLoading">
+          <ngx-skeleton-loader
+            animation="pulse"
+            class="my-1"
+            [theme]="{
+              height: '1rem',
+              width: '100%'
+            }"
+          ></ngx-skeleton-loader>
+          <ngx-skeleton-loader
+            animation="pulse"
+            [theme]="{
+              height: '1rem',
+              width: '10rem'
+            }"
+          ></ngx-skeleton-loader>
+        </div>
+        <div *ngIf="!isLoading">
+          If you retire today, you would be able to withdraw
+          <span class="font-weight-bold"
+            ><gf-value
+              class="d-inline-block"
+              [currency]="user?.settings?.baseCurrency"
+              [value]="withdrawalRatePerYear"
+            ></gf-value>
+            per year</span
+          >
+          or
+          <span class="font-weight-bold"
+            ><gf-value
+              class="d-inline-block"
+              [currency]="user?.settings?.baseCurrency"
+              [value]="withdrawalRatePerMonth"
+            ></gf-value>
+            per month</span
+          >, based on your net worth of
+          <gf-value
+            class="d-inline-block"
+            [currency]="user?.settings?.baseCurrency"
+            [value]="fireWealth"
+          ></gf-value>
+          (excluding emergency fund) and a withdrawal rate of 4%.
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,19 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { GfValueModule } from '@ghostfolio/ui/value';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+
+import { FirePageRoutingModule } from './fire-page-routing.module';
+import { FirePageComponent } from './fire-page.component';
+
+@NgModule({
+  declarations: [FirePageComponent],
+  imports: [
+    CommonModule,
+    FirePageRoutingModule,
+    GfValueModule,
+    NgxSkeletonLoaderModule
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class FirePageModule {}

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

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

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

@@ -25,7 +25,7 @@
         <h4 class="align-items-center d-flex">
           <span i18n>Allocations</span>
           <ion-icon
-            *ngIf="hasPermissionForSubscription"
+            *ngIf="user?.subscription?.type === 'Basic'"
             class="ml-1 text-muted"
             name="diamond-outline"
           ></ion-icon>
@@ -38,7 +38,6 @@
           <a
             color="primary"
             mat-button
-            [disabled]="hasPermissionForSubscription && user?.settings?.viewMode !== 'DEFAULT'"
             [routerLink]="['/portfolio', 'allocations']"
           >
             <span i18n>Open Allocations</span>
@@ -52,7 +51,7 @@
         <h4 class="align-items-center d-flex">
           <span i18n>Analysis</span>
           <ion-icon
-            *ngIf="hasPermissionForSubscription"
+            *ngIf="user?.subscription?.type === 'Basic'"
             class="ml-1 text-muted"
             name="diamond-outline"
           ></ion-icon>
@@ -65,7 +64,6 @@
           <a
             color="primary"
             mat-button
-            [disabled]="hasPermissionForSubscription && user?.settings?.viewMode !== 'DEFAULT'"
             [routerLink]="['/portfolio', 'analysis']"
           >
             <span i18n>Open Analysis</span>
@@ -79,7 +77,7 @@
         <h4 class="align-items-center d-flex">
           <span i18n>X-ray</span>
           <ion-icon
-            *ngIf="hasPermissionForSubscription"
+            *ngIf="user?.subscription?.type === 'Basic'"
             class="ml-1 text-muted"
             name="diamond-outline"
           ></ion-icon>
@@ -89,17 +87,34 @@
           risks in your portfolio.
         </div>
         <div class="mt-2 text-right">
-          <a
-            color="primary"
-            mat-button
-            [disabled]="hasPermissionForSubscription && user?.settings?.viewMode !== 'DEFAULT'"
-            [routerLink]="['/portfolio', 'report']"
-          >
+          <a color="primary" mat-button [routerLink]="['/portfolio', 'report']">
             <span i18n>Open X-ray</span>
             <ion-icon class="ml-1" name="arrow-forward-outline"></ion-icon>
           </a>
         </div>
       </mat-card>
     </div>
+    <div class="col-xs-12 col-md-6 mb-3">
+      <mat-card class="d-flex flex-column h-100">
+        <h4 class="align-items-center d-flex">
+          <span i18n>FIRE</span>
+          <ion-icon
+            *ngIf="user?.subscription?.type === 'Basic'"
+            class="ml-1 text-muted"
+            name="diamond-outline"
+          ></ion-icon>
+        </h4>
+        <div class="flex-grow-1">
+          Ghostfolio FIRE calculates metrics for the
+          <i>Financial Independence, Retire Early</i> lifestyle.
+        </div>
+        <div class="mt-2 text-right">
+          <a color="primary" mat-button [routerLink]="['/portfolio', 'fire']">
+            <span i18n>Open FIRE</span>
+            <ion-icon class="ml-1" name="arrow-forward-outline"></ion-icon>
+          </a>
+        </div>
+      </mat-card>
+    </div>
   </div>
 </div>

apps/client/src/app/pages/portfolio/transactions/import-transaction-dialog/import-transaction-dialog.component.ts

@@ -27,12 +27,12 @@ export class ImportTransactionDialog implements OnDestroy {
 
   public ngOnInit() {
     for (const message of this.data.messages) {
-      if (message.includes('orders.')) {
+      if (message.includes('activities.')) {
         let [index] = message.split(' ');
-        index = index.replace('orders.', '');
+        index = index.replace('activities.', '');
         [index] = index.split('.');
 
-        this.details.push(this.data.orders[index]);
+        this.details.push(this.data.activities[index]);
       } else {
         this.details.push('');
       }

apps/client/src/app/pages/portfolio/transactions/import-transaction-dialog/interfaces/interfaces.ts

@@ -1,5 +1,5 @@
 export interface ImportTransactionDialogParams {
+  activities: any[];
   deviceType: string;
   messages: string[];
-  orders: any[];
 }

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

@@ -185,19 +185,31 @@ export class TransactionsPageComponent implements OnDestroy, OnInit {
           if (file.name.endsWith('.json')) {
             const content = JSON.parse(fileContent);
 
-            if (!isArray(content.orders)) {
-              throw new Error();
+            if (!isArray(content.activities)) {
+              if (isArray(content.orders)) {
+                this.handleImportError({
+                  activities: [],
+                  error: {
+                    error: {
+                      message: [`orders needs to be renamed to activities`]
+                    }
+                  }
+                });
+                return;
+              } else {
+                throw new Error();
+              }
             }
 
             try {
               await this.importTransactionsService.importJson({
-                content: content.orders
+                content: content.activities
               });
 
               this.handleImportSuccess();
             } catch (error) {
               console.error(error);
-              this.handleImportError({ error, orders: content.orders });
+              this.handleImportError({ error, activities: content.activities });
             }
 
             return;
@@ -212,10 +224,10 @@ export class TransactionsPageComponent implements OnDestroy, OnInit {
             } catch (error) {
               console.error(error);
               this.handleImportError({
+                activities: error?.activities ?? [],
                 error: {
                   error: { message: error?.error?.message ?? [error?.message] }
-                },
-                orders: error?.orders ?? []
+                }
               });
             }
 
@@ -226,8 +238,8 @@ export class TransactionsPageComponent implements OnDestroy, OnInit {
         } catch (error) {
           console.error(error);
           this.handleImportError({
-            error: { error: { message: ['Unexpected format'] } },
-            orders: []
+            activities: [],
+            error: { error: { message: ['Unexpected format'] } }
           });
         }
       };
@@ -281,12 +293,18 @@ export class TransactionsPageComponent implements OnDestroy, OnInit {
     this.unsubscribeSubject.complete();
   }
 
-  private handleImportError({ error, orders }: { error: any; orders: any[] }) {
+  private handleImportError({
+    activities,
+    error
+  }: {
+    activities: any[];
+    error: any;
+  }) {
     this.snackBar.dismiss();
 
     this.dialog.open(ImportTransactionDialog, {
       data: {
-        orders,
+        activities,
         deviceType: this.deviceType,
         messages: error?.error?.message
       },

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

@@ -178,16 +178,19 @@
             </div>
             <p>Fully managed <strong>Ghostfolio</strong> cloud offering.</p>
             <p class="h5 text-right" [hidden]="!price">
-              <span class="font-weight-normal"
-                >{{ baseCurrency }}
+              <span class="font-weight-normal">
                 <ng-container *ngIf="coupon"
-                  ><strong>{{ price - coupon | number : '1.2-2' }} </strong>
-                  <del>{{ price }}</del>
+                  ><del class="text-muted"
+                    >{{ baseCurrency }}&nbsp;{{ price }}</del
+                  >&nbsp;{{ baseCurrency }}&nbsp;<strong
+                    >{{ price - coupon }}</strong
+                  >
                 </ng-container>
                 <ng-container *ngIf="!coupon"
-                  ><strong>{{ price }}</strong></ng-container
-                >
-                <span i18n> per year</span></span
+                  >{{ baseCurrency }}&nbsp;<strong
+                    >{{ price }}</strong
+                  ></ng-container
+                >&nbsp;<span i18n>per year</span></span
               >
             </p>
           </mat-card>

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

@@ -7,6 +7,7 @@ import {
   PortfolioPosition,
   PortfolioPublicDetails
 } from '@ghostfolio/common/interfaces';
+import { Market } from '@ghostfolio/common/types';
 import { StatusCodes } from 'http-status-codes';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { EMPTY, Subject } from 'rxjs';
@@ -26,6 +27,9 @@ export class PublicPageComponent implements OnInit {
     [code: string]: { name: string; value: number };
   };
   public deviceType: string;
+  public markets: {
+    [key in Market]: { name: string; value: number };
+  };
   public portfolioPublicDetails: PortfolioPublicDetails;
   public positions: {
     [symbol: string]: Pick<PortfolioPosition, 'currency' | 'name' | 'value'>;
@@ -96,6 +100,20 @@ export class PublicPageComponent implements OnInit {
         value: 0
       }
     };
+    this.markets = {
+      developedMarkets: {
+        name: 'developedMarkets',
+        value: 0
+      },
+      emergingMarkets: {
+        name: 'emergingMarkets',
+        value: 0
+      },
+      otherMarkets: {
+        name: 'otherMarkets',
+        value: 0
+      }
+    };
     this.positions = {};
     this.sectors = {
       [UNKNOWN_KEY]: {
@@ -123,6 +141,13 @@ export class PublicPageComponent implements OnInit {
       };
 
       if (position.countries.length > 0) {
+        this.markets.developedMarkets.value +=
+          position.markets.developedMarkets * position.value;
+        this.markets.emergingMarkets.value +=
+          position.markets.emergingMarkets * position.value;
+        this.markets.otherMarkets.value +=
+          position.markets.otherMarkets * position.value;
+
         for (const country of position.countries) {
           const { code, continent, name, weight } = country;
 
@@ -176,6 +201,18 @@ export class PublicPageComponent implements OnInit {
         value: position.value
       };
     }
+
+    const marketsTotal =
+      this.markets.developedMarkets.value +
+      this.markets.emergingMarkets.value +
+      this.markets.otherMarkets.value;
+
+    this.markets.developedMarkets.value =
+      this.markets.developedMarkets.value / marketsTotal;
+    this.markets.emergingMarkets.value =
+      this.markets.emergingMarkets.value / marketsTotal;
+    this.markets.otherMarkets.value =
+      this.markets.otherMarkets.value / marketsTotal;
   }
 
   public ngOnDestroy() {

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

@@ -79,12 +79,38 @@
             [countries]="countries"
             [isInPercent]="true"
           ></gf-world-map-chart>
+          <div class="row">
+            <div class="col-xs-12 col-md-4 my-2">
+              <gf-value
+                label="Developed Markets"
+                size="large"
+                [isPercent]="true"
+                [value]="markets?.developedMarkets?.value"
+              ></gf-value>
+            </div>
+            <div class="col-xs-12 col-md-4 my-2">
+              <gf-value
+                label="Emerging Markets"
+                size="large"
+                [isPercent]="true"
+                [value]="markets?.emergingMarkets?.value"
+              ></gf-value>
+            </div>
+            <div class="col-xs-12 col-md-4 my-2">
+              <gf-value
+                label="Other Markets"
+                size="large"
+                [isPercent]="true"
+                [value]="markets?.otherMarkets?.value"
+              ></gf-value>
+            </div>
+          </div>
         </mat-card-content>
       </mat-card>
     </div>
   </div>
   <div class="row my-5">
-    <div class="col-md-8 offset-md-2">
+    <div class="col-md-10 offset-md-1">
       <h2 class="h4 mb-1 text-center">
         Would you like to <strong>refine</strong> your
         <strong>personal investment strategy</strong>?

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

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { GfWorldMapChartModule } from '@ghostfolio/client/components/world-map-chart/world-map-chart.module';
 import { GfPortfolioProportionChartModule } from '@ghostfolio/ui/portfolio-proportion-chart/portfolio-proportion-chart.module';
+import { GfValueModule } from '@ghostfolio/ui/value';
 
 import { PublicPageRoutingModule } from './public-page-routing.module';
 import { PublicPageComponent } from './public-page.component';
@@ -14,6 +15,7 @@ import { PublicPageComponent } from './public-page.component';
   imports: [
     CommonModule,
     GfPortfolioProportionChartModule,
+    GfValueModule,
     GfWorldMapChartModule,
     MatButtonModule,
     MatCardModule,

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

@@ -35,7 +35,7 @@
           >
             or
           </div>
-          <a color="accent" href="/api/auth/google" mat-flat-button
+          <a color="accent" href="/api/v1/auth/google" mat-flat-button
             ><ion-icon class="mr-1" name="logo-google"></ion-icon
             ><span i18n>Continue with Google</span></a
           >

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

@@ -28,6 +28,12 @@
         color: rgba(var(--palette-primary-500), 1);
         opacity: 1;
       }
+
+      .mat-tab-link {
+        &:hover {
+          opacity: 0.75;
+        }
+      }
     }
   }
 }

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

@@ -19,7 +19,7 @@ export class AdminService {
 
   public deleteProfileData({ dataSource, symbol }: UniqueAsset) {
     return this.http.delete<void>(
-      `/api/admin/profile-data/${dataSource}/${symbol}`
+      `/api/v1/admin/profile-data/${dataSource}/${symbol}`
     );
   }
 
@@ -31,7 +31,7 @@ export class AdminService {
     symbol: string;
   }): Observable<AdminMarketDataDetails> {
     return this.http
-      .get<any>(`/api/admin/market-data/${dataSource}/${symbol}`)
+      .get<any>(`/api/v1/admin/market-data/${dataSource}/${symbol}`)
       .pipe(
         map((data) => {
           for (const item of data.marketData) {
@@ -43,16 +43,16 @@ export class AdminService {
   }
 
   public gatherMax() {
-    return this.http.post<void>(`/api/admin/gather/max`, {});
+    return this.http.post<void>(`/api/v1/admin/gather/max`, {});
   }
 
   public gatherProfileData() {
-    return this.http.post<void>(`/api/admin/gather/profile-data`, {});
+    return this.http.post<void>(`/api/v1/admin/gather/profile-data`, {});
   }
 
   public gatherProfileDataBySymbol({ dataSource, symbol }: UniqueAsset) {
     return this.http.post<void>(
-      `/api/admin/gather/profile-data/${dataSource}/${symbol}`,
+      `/api/v1/admin/gather/profile-data/${dataSource}/${symbol}`,
       {}
     );
   }
@@ -64,7 +64,7 @@ export class AdminService {
   }: UniqueAsset & {
     date?: Date;
   }) {
-    let url = `/api/admin/gather/${dataSource}/${symbol}`;
+    let url = `/api/v1/admin/gather/${dataSource}/${symbol}`;
 
     if (date) {
       url = `${url}/${format(date, DATE_FORMAT)}`;
@@ -82,7 +82,7 @@ export class AdminService {
     date: Date;
     symbol: string;
   }) {
-    const url = `/api/symbol/${dataSource}/${symbol}/${format(
+    const url = `/api/v1/symbol/${dataSource}/${symbol}/${format(
       date,
       DATE_FORMAT
     )}`;
@@ -101,7 +101,7 @@ export class AdminService {
     marketData: UpdateMarketDataDto;
     symbol: string;
   }) {
-    const url = `/api/admin/market-data/${dataSource}/${symbol}/${format(
+    const url = `/api/v1/admin/market-data/${dataSource}/${symbol}/${format(
       date,
       DATE_FORMAT
     )}`;

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

@@ -8,6 +8,6 @@ export class CacheService {
   public constructor(private http: HttpClient) {}
 
   public flush() {
-    return this.http.post<any>(`/api/cache/flush`, {});
+    return this.http.post<any>(`/api/v1/cache/flush`, {});
   }
 }

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

@@ -23,12 +23,10 @@ import {
   PortfolioChart,
   PortfolioDetails,
   PortfolioInvestments,
-  PortfolioPerformance,
   PortfolioPerformanceResponse,
   PortfolioPublicDetails,
   PortfolioReport,
   PortfolioSummary,
-  UniqueAsset,
   User
 } from '@ghostfolio/common/interfaces';
 import { permissions } from '@ghostfolio/common/permissions';
@@ -52,46 +50,46 @@ export class DataService {
     couponId?: string;
     priceId: string;
   }) {
-    return this.http.post('/api/subscription/stripe/checkout-session', {
+    return this.http.post('/api/v1/subscription/stripe/checkout-session', {
       couponId,
       priceId
     });
   }
 
   public fetchAccounts() {
-    return this.http.get<Accounts>('/api/account');
+    return this.http.get<Accounts>('/api/v1/account');
   }
 
   public fetchAdminData() {
-    return this.http.get<AdminData>('/api/admin');
+    return this.http.get<AdminData>('/api/v1/admin');
   }
 
   public fetchAdminMarketData() {
-    return this.http.get<AdminMarketData>('/api/admin/market-data');
+    return this.http.get<AdminMarketData>('/api/v1/admin/market-data');
   }
 
   public deleteAccess(aId: string) {
-    return this.http.delete<any>(`/api/access/${aId}`);
+    return this.http.delete<any>(`/api/v1/access/${aId}`);
   }
 
   public deleteAccount(aId: string) {
-    return this.http.delete<any>(`/api/account/${aId}`);
+    return this.http.delete<any>(`/api/v1/account/${aId}`);
   }
 
   public deleteOrder(aId: string) {
-    return this.http.delete<any>(`/api/order/${aId}`);
+    return this.http.delete<any>(`/api/v1/order/${aId}`);
   }
 
   public deleteUser(aId: string) {
-    return this.http.delete<any>(`/api/user/${aId}`);
+    return this.http.delete<any>(`/api/v1/user/${aId}`);
   }
 
   public fetchAccesses() {
-    return this.http.get<Access[]>('/api/access');
+    return this.http.get<Access[]>('/api/v1/access');
   }
 
   public fetchChart({ range }: { range: DateRange }) {
-    return this.http.get<PortfolioChart>('/api/portfolio/chart', {
+    return this.http.get<PortfolioChart>('/api/v1/portfolio/chart', {
       params: { range }
     });
   }
@@ -103,7 +101,7 @@ export class DataService {
       params = params.append('activityIds', activityIds.join(','));
     }
 
-    return this.http.get<Export>('/api/export', {
+    return this.http.get<Export>('/api/v1/export', {
       params
     });
   }
@@ -121,7 +119,7 @@ export class DataService {
   }
 
   public fetchInvestments(): Observable<PortfolioInvestments> {
-    return this.http.get<any>('/api/portfolio/investments').pipe(
+    return this.http.get<any>('/api/v1/portfolio/investments').pipe(
       map((response) => {
         if (response.firstOrderDate) {
           response.firstOrderDate = parseISO(response.firstOrderDate);
@@ -147,7 +145,7 @@ export class DataService {
       params = params.append('includeHistoricalData', includeHistoricalData);
     }
 
-    return this.http.get<SymbolItem>(`/api/symbol/${dataSource}/${symbol}`, {
+    return this.http.get<SymbolItem>(`/api/v1/symbol/${dataSource}/${symbol}`, {
       params
     });
   }
@@ -157,14 +155,14 @@ export class DataService {
   }: {
     range: DateRange;
   }): Observable<PortfolioPositions> {
-    return this.http.get<PortfolioPositions>('/api/portfolio/positions', {
+    return this.http.get<PortfolioPositions>('/api/v1/portfolio/positions', {
       params: { range }
     });
   }
 
   public fetchSymbols(aQuery: string) {
     return this.http
-      .get<{ items: LookupItem[] }>(`/api/symbol/lookup?query=${aQuery}`)
+      .get<{ items: LookupItem[] }>(`/api/v1/symbol/lookup?query=${aQuery}`)
       .pipe(
         map((respose) => {
           return respose.items;
@@ -173,7 +171,7 @@ export class DataService {
   }
 
   public fetchOrders(): Observable<Activities> {
-    return this.http.get<any>('/api/order').pipe(
+    return this.http.get<any>('/api/v1/order').pipe(
       map(({ activities }) => {
         for (const activity of activities) {
           activity.createdAt = parseISO(activity.createdAt);
@@ -185,14 +183,14 @@ export class DataService {
   }
 
   public fetchPortfolioDetails(aParams: { [param: string]: any }) {
-    return this.http.get<PortfolioDetails>('/api/portfolio/details', {
+    return this.http.get<PortfolioDetails>('/api/v1/portfolio/details', {
       params: aParams
     });
   }
 
   public fetchPortfolioPerformance(params: { [param: string]: any }) {
     return this.http.get<PortfolioPerformanceResponse>(
-      '/api/portfolio/performance',
+      '/api/v1/portfolio/performance',
       {
         params
       }
@@ -201,16 +199,16 @@ export class DataService {
 
   public fetchPortfolioPublic(aId: string) {
     return this.http.get<PortfolioPublicDetails>(
-      `/api/portfolio/public/${aId}`
+      `/api/v1/portfolio/public/${aId}`
     );
   }
 
   public fetchPortfolioReport() {
-    return this.http.get<PortfolioReport>('/api/portfolio/report');
+    return this.http.get<PortfolioReport>('/api/v1/portfolio/report');
   }
 
   public fetchPortfolioSummary(): Observable<PortfolioSummary> {
-    return this.http.get<any>('/api/portfolio/summary').pipe(
+    return this.http.get<any>('/api/v1/portfolio/summary').pipe(
       map((summary) => {
         if (summary.firstOrderDate) {
           summary.firstOrderDate = parseISO(summary.firstOrderDate);
@@ -229,7 +227,7 @@ export class DataService {
     symbol: string;
   }) {
     return this.http
-      .get<any>(`/api/portfolio/position/${dataSource}/${symbol}`)
+      .get<any>(`/api/v1/portfolio/position/${dataSource}/${symbol}`)
       .pipe(
         map((data) => {
           if (data.orders) {
@@ -245,47 +243,47 @@ export class DataService {
   }
 
   public loginAnonymous(accessToken: string) {
-    return this.http.get<any>(`/api/auth/anonymous/${accessToken}`);
+    return this.http.get<any>(`/api/v1/auth/anonymous/${accessToken}`);
   }
 
   public postAccess(aAccess: CreateAccessDto) {
-    return this.http.post<OrderModel>(`/api/access`, aAccess);
+    return this.http.post<OrderModel>(`/api/v1/access`, aAccess);
   }
 
   public postAccount(aAccount: CreateAccountDto) {
-    return this.http.post<OrderModel>(`/api/account`, aAccount);
+    return this.http.post<OrderModel>(`/api/v1/account`, aAccount);
   }
 
   public postOrder(aOrder: CreateOrderDto) {
-    return this.http.post<OrderModel>(`/api/order`, aOrder);
+    return this.http.post<OrderModel>(`/api/v1/order`, aOrder);
   }
 
   public postUser() {
-    return this.http.post<UserItem>(`/api/user`, {});
+    return this.http.post<UserItem>(`/api/v1/user`, {});
   }
 
   public putAccount(aAccount: UpdateAccountDto) {
-    return this.http.put<UserItem>(`/api/account/${aAccount.id}`, aAccount);
+    return this.http.put<UserItem>(`/api/v1/account/${aAccount.id}`, aAccount);
   }
 
   public putAdminSetting(key: string, aData: PropertyDto) {
-    return this.http.put<void>(`/api/admin/settings/${key}`, aData);
+    return this.http.put<void>(`/api/v1/admin/settings/${key}`, aData);
   }
 
   public putOrder(aOrder: UpdateOrderDto) {
-    return this.http.put<UserItem>(`/api/order/${aOrder.id}`, aOrder);
+    return this.http.put<UserItem>(`/api/v1/order/${aOrder.id}`, aOrder);
   }
 
   public putUserSetting(aData: UpdateUserSettingDto) {
-    return this.http.put<User>(`/api/user/setting`, aData);
+    return this.http.put<User>(`/api/v1/user/setting`, aData);
   }
 
   public putUserSettings(aData: UpdateUserSettingsDto) {
-    return this.http.put<User>(`/api/user/settings`, aData);
+    return this.http.put<User>(`/api/v1/user/settings`, aData);
   }
 
   public redeemCoupon(couponCode: string) {
-    return this.http.post('/api/subscription/redeem-coupon', {
+    return this.http.post('/api/v1/subscription/redeem-coupon', {
       couponCode
     });
   }

apps/client/src/app/services/import-transactions.service.ts

@@ -37,9 +37,9 @@ export class ImportTransactionsService {
       skipEmptyLines: true
     }).data;
 
-    const orders: CreateOrderDto[] = [];
+    const activities: CreateOrderDto[] = [];
     for (const [index, item] of content.entries()) {
-      orders.push({
+      activities.push({
         accountId: this.parseAccount({ item, userAccounts }),
         currency: this.parseCurrency({ content, index, item }),
         dataSource: this.parseDataSource({ item }),
@@ -52,13 +52,13 @@ export class ImportTransactionsService {
       });
     }
 
-    await this.importJson({ content: orders });
+    await this.importJson({ content: activities });
   }
 
   public importJson({ content }: { content: CreateOrderDto[] }): Promise<void> {
     return new Promise((resolve, reject) => {
       this.postImport({
-        orders: content
+        activities: content
       })
         .pipe(
           catchError((error) => {
@@ -121,7 +121,10 @@ export class ImportTransactionsService {
       }
     }
 
-    throw { message: `orders.${index}.currency is not valid`, orders: content };
+    throw {
+      activities: content,
+      message: `activities.${index}.currency is not valid`
+    };
   }
 
   private parseDataSource({ item }: { item: any }) {
@@ -164,7 +167,10 @@ export class ImportTransactionsService {
       }
     }
 
-    throw { message: `orders.${index}.date is not valid`, orders: content };
+    throw {
+      activities: content,
+      message: `activities.${index}.date is not valid`
+    };
   }
 
   private parseFee({
@@ -184,7 +190,10 @@ export class ImportTransactionsService {
       }
     }
 
-    throw { message: `orders.${index}.fee is not valid`, orders: content };
+    throw {
+      activities: content,
+      message: `activities.${index}.fee is not valid`
+    };
   }
 
   private parseQuantity({
@@ -204,7 +213,10 @@ export class ImportTransactionsService {
       }
     }
 
-    throw { message: `orders.${index}.quantity is not valid`, orders: content };
+    throw {
+      activities: content,
+      message: `activities.${index}.quantity is not valid`
+    };
   }
 
   private parseSymbol({
@@ -224,7 +236,10 @@ export class ImportTransactionsService {
       }
     }
 
-    throw { message: `orders.${index}.symbol is not valid`, orders: content };
+    throw {
+      activities: content,
+      message: `activities.${index}.symbol is not valid`
+    };
   }
 
   private parseType({
@@ -255,7 +270,10 @@ export class ImportTransactionsService {
       }
     }
 
-    throw { message: `orders.${index}.type is not valid`, orders: content };
+    throw {
+      activities: content,
+      message: `activities.${index}.type is not valid`
+    };
   }
 
   private parseUnitPrice({
@@ -276,12 +294,12 @@ export class ImportTransactionsService {
     }
 
     throw {
-      message: `orders.${index}.unitPrice is not valid`,
-      orders: content
+      activities: content,
+      message: `activities.${index}.unitPrice is not valid`
     };
   }
 
-  private postImport(aImportData: { orders: CreateOrderDto[] }) {
-    return this.http.post<void>('/api/import', aImportData);
+  private postImport(aImportData: { activities: CreateOrderDto[] }) {
+    return this.http.post<void>('/api/v1/import', aImportData);
   }
 }

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

@@ -36,7 +36,7 @@ export class UserService extends ObservableStore<UserStoreState> {
   }
 
   private fetchUser() {
-    return this.http.get<User>('/api/user').pipe(
+    return this.http.get<User>('/api/v1/user').pipe(
       map((user) => {
         this.setState({ user }, UserStoreActions.GetUser);
         return user;

apps/client/src/app/services/web-authn.service.ts

@@ -35,7 +35,7 @@ export class WebAuthnService {
   public register() {
     return this.http
       .get<PublicKeyCredentialCreationOptionsJSON>(
-        `/api/auth/webauthn/generate-registration-options`,
+        `/api/v1/auth/webauthn/generate-registration-options`,
         {}
       )
       .pipe(
@@ -48,7 +48,7 @@ export class WebAuthnService {
         }),
         switchMap((attResp) => {
           return this.http.post<AuthDeviceDto>(
-            `/api/auth/webauthn/verify-attestation`,
+            `/api/v1/auth/webauthn/verify-attestation`,
             {
               credential: attResp
             }
@@ -65,31 +65,33 @@ export class WebAuthnService {
 
   public deregister() {
     const deviceId = this.getDeviceId();
-    return this.http.delete<AuthDeviceDto>(`/api/auth-device/${deviceId}`).pipe(
-      catchError((error) => {
-        console.warn(`Could not deregister device ${deviceId}`, error);
-        return of(null);
-      }),
-      tap(() =>
-        this.settingsStorageService.removeSetting(
-          WebAuthnService.WEB_AUTH_N_DEVICE_ID
+    return this.http
+      .delete<AuthDeviceDto>(`/api/v1/auth-device/${deviceId}`)
+      .pipe(
+        catchError((error) => {
+          console.warn(`Could not deregister device ${deviceId}`, error);
+          return of(null);
+        }),
+        tap(() =>
+          this.settingsStorageService.removeSetting(
+            WebAuthnService.WEB_AUTH_N_DEVICE_ID
+          )
         )
-      )
-    );
+      );
   }
 
   public login() {
     const deviceId = this.getDeviceId();
     return this.http
       .post<PublicKeyCredentialRequestOptionsJSON>(
-        `/api/auth/webauthn/generate-assertion-options`,
+        `/api/v1/auth/webauthn/generate-assertion-options`,
         { deviceId }
       )
       .pipe(
         switchMap(startAuthentication),
         switchMap((assertionResponse) => {
           return this.http.post<{ authToken: string }>(
-            `/api/auth/webauthn/verify-assertion`,
+            `/api/v1/auth/webauthn/verify-assertion`,
             {
               credential: assertionResponse,
               deviceId

apps/client/src/main.ts

@@ -1,6 +1,7 @@
 import { enableProdMode } from '@angular/core';
 import { LOCALE_ID } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { locale } from '@ghostfolio/common/config';
 import { InfoItem } from '@ghostfolio/common/interfaces';
 import { permissions } from '@ghostfolio/common/permissions';
 
@@ -8,7 +9,7 @@ import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
 
 (async () => {
-  const response = await fetch('/api/info');
+  const response = await fetch('/api/v1/info');
   const info: InfoItem = await response.json();
 
   if (window.localStorage.getItem('utm_source') === 'trusted-web-activity') {
@@ -27,7 +28,7 @@ import { environment } from './environments/environment';
 
   platformBrowserDynamic()
     .bootstrapModule(AppModule, {
-      providers: [{ provide: LOCALE_ID, useValue: 'de-CH' }]
+      providers: [{ provide: LOCALE_ID, useValue: locale }]
     })
     .catch((error) => console.error(error));
 })();

apps/client/src/styles/table.scss

@@ -11,20 +11,22 @@
 
   .mat-row {
     &:nth-child(even) {
-      background-color: rgba(
-        var(--palette-foreground-base),
-        var(--palette-background-hover-alpha)
-      );
+      background-color: rgba(var(--palette-foreground-base), 0.02);
+    }
+
+    &:hover {
+      background-color: rgba(var(--palette-foreground-base), 0.05);
     }
   }
 
   @if $darkTheme {
     .mat-row {
       &:nth-child(even) {
-        background-color: rgba(
-          var(--palette-foreground-base-dark),
-          var(--palette-background-hover-alpha)
-        );
+        background-color: rgba(var(--palette-foreground-base-dark), 0.02);
+      }
+
+      &:hover {
+        background-color: rgba(var(--palette-foreground-base-dark), 0.05);
       }
     }
   }

docker/docker-compose.yml

@@ -1,7 +1,7 @@
 version: '3.7'
 services:
   ghostfolio:
-    image: ghostfolio/ghostfolio
+    image: ghostfolio/ghostfolio:latest
     env_file:
       - ../.env
     environment:

libs/common/src/lib/config.ts

@@ -19,7 +19,7 @@ export const ghostfolioCashSymbol = `${ghostfolioScraperApiSymbolPrefix}CASH`;
 export const ghostfolioFearAndGreedIndexDataSource = DataSource.RAKUTEN;
 export const ghostfolioFearAndGreedIndexSymbol = `${ghostfolioScraperApiSymbolPrefix}FEAR_AND_GREED_INDEX`;
 
-export const locale = 'de-CH';
+export const locale = 'en-US';
 
 export const primaryColorHex = '#36cfcc';
 export const primaryColorRgb = {
@@ -44,7 +44,6 @@ export const warnColorRgb = {
 
 export const ASSET_SUB_CLASS_EMERGENCY_FUND = 'EMERGENCY_FUND';
 
-export const DEFAULT_DATE_FORMAT = 'dd.MM.yyyy';
 export const DEFAULT_DATE_FORMAT_MONTH_YEAR = 'MMM yyyy';
 
 export const PROPERTY_COUPONS = 'COUPONS';

libs/common/src/lib/helper.ts

@@ -2,7 +2,7 @@ import * as currencies from '@dinero.js/currencies';
 import { DataSource } from '@prisma/client';
 import { getDate, getMonth, getYear, parse, subDays } from 'date-fns';
 
-import { ghostfolioScraperApiSymbolPrefix } from './config';
+import { ghostfolioScraperApiSymbolPrefix, locale } from './config';
 
 export function capitalize(aString: string) {
   return aString.charAt(0).toUpperCase() + aString.slice(1).toLowerCase();
@@ -44,6 +44,49 @@ export function getCssVariable(aCssVariable: string) {
   );
 }
 
+export function getDateFormatString(aLocale?: string) {
+  const formatObject = new Intl.DateTimeFormat(aLocale).formatToParts(
+    new Date()
+  );
+
+  return formatObject
+    .map((object) => {
+      switch (object.type) {
+        case 'day':
+          return 'dd';
+        case 'month':
+          return 'MM';
+        case 'year':
+          return 'yyyy';
+        default:
+          return object.value;
+      }
+    })
+    .join('');
+}
+
+export function getLocale() {
+  return navigator.languages?.length
+    ? navigator.languages[0]
+    : navigator.language ?? locale;
+}
+
+export function getNumberFormatDecimal(aLocale?: string) {
+  const formatObject = new Intl.NumberFormat(aLocale).formatToParts(9999.99);
+
+  return formatObject.find((object) => {
+    return object.type === 'decimal';
+  }).value;
+}
+
+export function getNumberFormatGroup(aLocale?: string) {
+  const formatObject = new Intl.NumberFormat(aLocale).formatToParts(9999.99);
+
+  return formatObject.find((object) => {
+    return object.type === 'group';
+  }).value;
+}
+
 export function getTextColor() {
   const cssVariable = getCssVariable(
     window.matchMedia('(prefers-color-scheme: dark)').matches

libs/common/src/lib/interfaces/export.interface.ts

@@ -5,5 +5,5 @@ export interface Export {
     date: string;
     version: string;
   };
-  orders: Partial<Order>[];
+  activities: Partial<Order>[];
 }

libs/common/src/lib/interfaces/portfolio-position.interface.ts

@@ -1,6 +1,7 @@
 import { MarketState } from '@ghostfolio/api/services/interfaces/interfaces';
 import { AssetClass, AssetSubClass, DataSource } from '@prisma/client';
 
+import { Market } from '../types';
 import { Country } from './country.interface';
 import { Sector } from './sector.interface';
 
@@ -19,6 +20,7 @@ export interface PortfolioPosition {
   marketChange?: number;
   marketChangePercent?: number;
   marketPrice: number;
+  markets?: { [key in Market]: number };
   marketState: MarketState;
   name: string;
   netPerformance: number;

libs/common/src/lib/interfaces/portfolio-public-details.interface.ts

@@ -8,6 +8,7 @@ export interface PortfolioPublicDetails {
       | 'allocationCurrent'
       | 'countries'
       | 'currency'
+      | 'markets'
       | 'name'
       | 'sectors'
       | 'value'

libs/common/src/lib/types/index.ts

@@ -2,6 +2,7 @@ import type { AccessWithGranteeUser } from './access-with-grantee-user.type';
 import { AccountWithValue } from './account-with-value.type';
 import type { DateRange } from './date-range.type';
 import type { Granularity } from './granularity.type';
+import { Market } from './market.type';
 import type { OrderWithAccount } from './order-with-account.type';
 import type { RequestWithUser } from './request-with-user.type';
 import { ToggleOption } from './toggle-option.type';
@@ -11,6 +12,7 @@ export type {
   AccountWithValue,
   DateRange,
   Granularity,
+  Market,
   OrderWithAccount,
   RequestWithUser,
   ToggleOption

libs/common/src/lib/types/market.type.ts

@@ -0,0 +1 @@
+export type Market = 'developedMarkets' | 'emergingMarkets' | 'otherMarkets';

libs/ui/src/lib/activities-table/activities-table.component.html

@@ -248,14 +248,18 @@
     <ng-container matColumnDef="value">
       <th
         *matHeaderCellDef
-        class="justify-content-end px-1"
+        class="d-none d-lg-table-cell justify-content-end px-1"
         i18n
         mat-header-cell
         mat-sort-header
       >
         Value
       </th>
-      <td *matCellDef="let element" class="px-1" mat-cell>
+      <td
+        *matCellDef="let element"
+        class="d-none d-lg-table-cell px-1"
+        mat-cell
+      >
         <div class="d-flex justify-content-end">
           <gf-value
             [isCurrency]="true"
@@ -264,7 +268,38 @@
           ></gf-value>
         </div>
       </td>
-      <td *matFooterCellDef class="px-1" mat-footer-cell>
+      <td *matFooterCellDef class="d-none d-lg-table-cell px-1" mat-footer-cell>
+        <div class="d-flex justify-content-end">
+          <gf-value
+            [isAbsolute]="true"
+            [isCurrency]="true"
+            [locale]="locale"
+            [value]="isLoading ? undefined : totalValue"
+          ></gf-value>
+        </div>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="valueInBaseCurrency">
+      <th
+        *matHeaderCellDef
+        class="d-lg-none d-xl-none justify-content-end px-1"
+        i18n
+        mat-header-cell
+        mat-sort-header
+      >
+        Value
+      </th>
+      <td *matCellDef="let element" class="d-lg-none d-xl-none px-1" mat-cell>
+        <div class="d-flex justify-content-end">
+          <gf-value
+            [isCurrency]="true"
+            [locale]="locale"
+            [value]="isLoading ? undefined : element.valueInBaseCurrency"
+          ></gf-value>
+        </div>
+      </td>
+      <td *matFooterCellDef class="d-lg-none d-xl-none px-1" mat-footer-cell>
         <div class="d-flex justify-content-end">
           <gf-value
             [isAbsolute]="true"

libs/ui/src/lib/activities-table/activities-table.component.ts

@@ -20,10 +20,9 @@ import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { Router } from '@angular/router';
 import { Activity } from '@ghostfolio/api/app/order/interfaces/activities.interface';
-import { DEFAULT_DATE_FORMAT } from '@ghostfolio/common/config';
+import { getDateFormatString } from '@ghostfolio/common/helper';
 import { UniqueAsset } from '@ghostfolio/common/interfaces';
 import { OrderWithAccount } from '@ghostfolio/common/types';
-import { DataSource } from '@prisma/client';
 import Big from 'big.js';
 import { isUUID } from 'class-validator';
 import { endOfToday, format, isAfter } from 'date-fns';
@@ -64,7 +63,7 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
   @ViewChild(MatSort) sort: MatSort;
 
   public dataSource: MatTableDataSource<Activity> = new MatTableDataSource();
-  public defaultDateFormat = DEFAULT_DATE_FORMAT;
+  public defaultDateFormat: string;
   public displayedColumns = [];
   public endOfToday = endOfToday();
   public filters$: Subject<string[]> = new BehaviorSubject([]);
@@ -141,6 +140,7 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
       'fee',
       'value',
       'currency',
+      'valueInBaseCurrency',
       'account',
       'actions'
     ];
@@ -153,6 +153,8 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
 
     this.isLoading = true;
 
+    this.defaultDateFormat = getDateFormatString(this.locale);
+
     if (this.activities) {
       this.dataSource = new MatTableDataSource(this.activities);
       this.dataSource.filterPredicate = (data, filter) => {

libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts

@@ -246,6 +246,12 @@ export class PortfolioProportionChartComponent
       labels = labelSubCategory.concat(labels);
     }
 
+    if (datasets[0]?.data?.length === 0 || datasets[0]?.data?.[0] === 0) {
+      labels = [''];
+      datasets[0].backgroundColor = [this.colorMap[UNKNOWN_KEY]];
+      datasets[0].data[0] = Number.MAX_SAFE_INTEGER;
+    }
+
     const data = {
       datasets,
       labels
@@ -323,7 +329,9 @@ export class PortfolioProportionChartComponent
 
                     const percentage = (context.parsed * 100) / sum;
 
-                    if (this.isInPercent) {
+                    if (<number>context.raw === Number.MAX_SAFE_INTEGER) {
+                      return 'No data available';
+                    } else if (this.isInPercent) {
                       return [`${name ?? symbol}`, `${percentage.toFixed(2)}%`];
                     } else {
                       const value = <number>context.raw;

libs/ui/src/lib/value/value.component.html

@@ -43,9 +43,14 @@
       </div>
     </ng-container>
   </div>
-  <small *ngIf="label">
-    {{ label }}
-  </small>
+  <ng-container *ngIf="label">
+    <div *ngIf="size === 'large'">
+      {{ label }}
+    </div>
+    <small *ngIf="size !== 'large'">
+      {{ label }}
+    </small>
+  </ng-container>
 </ng-container>
 
 <ngx-skeleton-loader

libs/ui/src/lib/value/value.component.ts

@@ -4,8 +4,7 @@ import {
   Input,
   OnChanges
 } from '@angular/core';
-import { DEFAULT_DATE_FORMAT } from '@ghostfolio/common/config';
-import { format, isDate, parseISO } from 'date-fns';
+import { getLocale } from '@ghostfolio/common/helper';
 import { isNumber } from 'lodash';
 
 @Component({
@@ -19,9 +18,10 @@ export class ValueComponent implements OnChanges {
   @Input() currency = '';
   @Input() isAbsolute = false;
   @Input() isCurrency = false;
+  @Input() isDate = false;
   @Input() isPercent = false;
   @Input() label = '';
-  @Input() locale = '';
+  @Input() locale = getLocale();
   @Input() position = '';
   @Input() precision: number | undefined;
   @Input() size: 'large' | 'medium' | 'small' = 'small';
@@ -100,14 +100,16 @@ export class ValueComponent implements OnChanges {
         this.isNumber = false;
         this.isString = true;
 
-        try {
-          if (isDate(parseISO(this.value))) {
-            this.formattedValue = format(
-              new Date(<string>this.value),
-              DEFAULT_DATE_FORMAT
-            );
-          }
-        } catch {
+        if (this.isDate) {
+          this.formattedValue = new Date(<string>this.value).toLocaleDateString(
+            this.locale,
+            {
+              day: '2-digit',
+              month: '2-digit',
+              year: 'numeric'
+            }
+          );
+        } else {
           this.formattedValue = this.value;
         }
       }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ghostfolio",
-  "version": "1.127.0",
+  "version": "1.133.0",
   "homepage": "https://ghostfol.io",
   "license": "AGPL-3.0",
   "scripts": {
@@ -71,7 +71,7 @@
     "@nestjs/schedule": "1.0.2",
     "@nestjs/serve-static": "2.2.2",
     "@nrwl/angular": "13.8.5",
-    "@prisma/client": "3.10.0",
+    "@prisma/client": "3.11.1",
     "@simplewebauthn/browser": "4.1.0",
     "@simplewebauthn/server": "4.1.0",
     "@simplewebauthn/typescript-types": "4.0.0",
@@ -109,7 +109,7 @@
     "passport": "0.4.1",
     "passport-google-oauth20": "2.0.0",
     "passport-jwt": "4.0.0",
-    "prisma": "3.10.0",
+    "prisma": "3.11.1",
     "reflect-metadata": "0.1.13",
     "round-to": "5.0.0",
     "rxjs": "7.4.0",
@@ -118,7 +118,7 @@
     "tslib": "2.0.0",
     "twitter-api-v2": "1.10.3",
     "uuid": "8.3.2",
-    "yahoo-finance2": "2.2.0",
+    "yahoo-finance2": "2.3.0",
     "zone.js": "0.11.4"
   },
   "devDependencies": {

test/import/invalid-date.json

@@ -3,7 +3,7 @@
     "date": "2021-01-01T00:00:00.000Z",
     "version": "dev"
   },
-  "orders": [
+  "activities": [
     {
       "currency": "USD",
       "dataSource": "YAHOO",

test/import/invalid-symbol.json

@@ -3,7 +3,7 @@
     "date": "2021-01-01T00:00:00.000Z",
     "version": "dev"
   },
-  "orders": [
+  "activities": [
     {
       "currency": "USD",
       "dataSource": "YAHOO",

test/import/ok.json

@@ -0,0 +1,39 @@
+{
+  "meta": {
+    "date": "2022-04-01T00:00:00.000Z",
+    "version": "dev"
+  },
+  "activities": [
+    {
+      "accountId": null,
+      "date": "2021-12-31T23:00:00.000Z",
+      "fee": 0,
+      "quantity": 1,
+      "type": "ITEM",
+      "unitPrice": 500000,
+      "currency": "USD",
+      "dataSource": "MANUAL",
+      "symbol": "Penthouse Apartment"
+    },
+    {
+      "date": "2021-11-16T23:00:00.000Z",
+      "fee": 0,
+      "quantity": 5,
+      "type": "DIVIDEND",
+      "unitPrice": 0.62,
+      "currency": "USD",
+      "dataSource": "YAHOO",
+      "symbol": "MSFT"
+    },
+    {
+      "date": "2021-09-15T22:00:00.000Z",
+      "fee": 19,
+      "quantity": 5,
+      "type": "BUY",
+      "unitPrice": 298.58,
+      "currency": "USD",
+      "dataSource": "YAHOO",
+      "symbol": "MSFT"
+    }
+  ]
+}

yarn.lock

@@ -3487,22 +3487,22 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.10.1.tgz#728ecd95ab207aab8a9a4e421f0422db329232be"
   integrity sha512-HnUhk1Sy9IuKrxEMdIRCxpIqPw6BFsbYSEUO9p/hNw5sMld/+3OLMWQP80F8/db9qsv3qUjs7ZR5bS/R+iinXw==
 
-"@prisma/client@3.10.0":
-  version "3.10.0"
-  resolved "https://registry.yarnpkg.com/@prisma/client/-/client-3.10.0.tgz#4782fe6f1b0e43c2a11a75ad4bb1098599d1dfb1"
-  integrity sha512-6P4sV7WFuODSfSoSEzCH1qfmWMrCUBk1LIIuTbQf6m1LI/IOpLN4lnqGDmgiBGprEzuWobnGLfe9YsXLn0inrg==
+"@prisma/client@3.11.1":
+  version "3.11.1"
+  resolved "https://registry.yarnpkg.com/@prisma/client/-/client-3.11.1.tgz#bde6dec71ae133d04ce1c6658e3d76627a3c6dc7"
+  integrity sha512-B3C7zQG4HbjJzUr2Zg9UVkBJutbqq9/uqkl1S138+keZCubJrwizx3RuIvGwI+s+pm3qbsyNqXiZgL3Ir0fSng==
   dependencies:
-    "@prisma/engines-version" "3.10.0-50.73e60b76d394f8d37d8ebd1f8918c79029f0db86"
+    "@prisma/engines-version" "3.11.1-1.1a2506facaf1a4727b7c26850735e88ec779dee9"
 
-"@prisma/engines-version@3.10.0-50.73e60b76d394f8d37d8ebd1f8918c79029f0db86":
-  version "3.10.0-50.73e60b76d394f8d37d8ebd1f8918c79029f0db86"
-  resolved "https://registry.yarnpkg.com/@prisma/engines-version/-/engines-version-3.10.0-50.73e60b76d394f8d37d8ebd1f8918c79029f0db86.tgz#82750856fa637dd89b8f095d2dcc6ac0631231c6"
-  integrity sha512-cVYs5gyQH/qyut24hUvDznCfPrWiNMKNfPb9WmEoiU6ihlkscIbCfkmuKTtspVLWRdl0LqjYEC7vfnPv17HWhw==
+"@prisma/engines-version@3.11.1-1.1a2506facaf1a4727b7c26850735e88ec779dee9":
+  version "3.11.1-1.1a2506facaf1a4727b7c26850735e88ec779dee9"
+  resolved "https://registry.yarnpkg.com/@prisma/engines-version/-/engines-version-3.11.1-1.1a2506facaf1a4727b7c26850735e88ec779dee9.tgz#81a1835b495ad287ad7824dbd62f74e9eee90fb9"
+  integrity sha512-HkcsDniA4iNb/gi0iuyOJNAM7nD/LwQ0uJm15v360O5dee3TM4lWdSQiTYBMK6FF68ACUItmzSur7oYuUZ2zkQ==
 
-"@prisma/engines@3.10.0-50.73e60b76d394f8d37d8ebd1f8918c79029f0db86":
-  version "3.10.0-50.73e60b76d394f8d37d8ebd1f8918c79029f0db86"
-  resolved "https://registry.yarnpkg.com/@prisma/engines/-/engines-3.10.0-50.73e60b76d394f8d37d8ebd1f8918c79029f0db86.tgz#2964113729a78b8b21e186b5592affd1fde73c16"
-  integrity sha512-LjRssaWu9w2SrXitofnutRIyURI7l0veQYIALz7uY4shygM9nMcK3omXcObRm7TAcw3Z+9ytfK1B+ySOsOesxQ==
+"@prisma/engines@3.11.1-1.1a2506facaf1a4727b7c26850735e88ec779dee9":
+  version "3.11.1-1.1a2506facaf1a4727b7c26850735e88ec779dee9"
+  resolved "https://registry.yarnpkg.com/@prisma/engines/-/engines-3.11.1-1.1a2506facaf1a4727b7c26850735e88ec779dee9.tgz#09ac23f8f615a8586d8d44538060ada199fe872c"
+  integrity sha512-MILbsGnvmnhCbFGa2/iSnsyGyazU3afzD7ldjCIeLIGKkNBMSZgA2IvpYsAXl+6qFHKGrS3B2otKfV31dwMSQw==
 
 "@samverschueren/stream-to-observable@^0.3.0":
   version "0.3.1"
@@ -15334,12 +15334,12 @@ pretty-hrtime@^1.0.3:
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
   integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=
 
-prisma@3.10.0:
-  version "3.10.0"
-  resolved "https://registry.yarnpkg.com/prisma/-/prisma-3.10.0.tgz#872d87afbeb1cbcaa77c3d6a63c125e0d704b04d"
-  integrity sha512-dAld12vtwdz9Rz01nOjmnXe+vHana5PSog8t0XGgLemKsUVsaupYpr74AHaS3s78SaTS5s2HOghnJF+jn91ZrA==
+prisma@3.11.1:
+  version "3.11.1"
+  resolved "https://registry.yarnpkg.com/prisma/-/prisma-3.11.1.tgz#fff9c0bcf83cb30c2e1d650882d5eb3c5565e028"
+  integrity sha512-aYn8bQwt1xwR2oSsVNHT4PXU7EhsThIwmpNB/MNUaaMx5OPLTro6VdNJe/sJssXFLxhamfWeMjwmpXjljo6xkg==
   dependencies:
-    "@prisma/engines" "3.10.0-50.73e60b76d394f8d37d8ebd1f8918c79029f0db86"
+    "@prisma/engines" "3.11.1-1.1a2506facaf1a4727b7c26850735e88ec779dee9"
 
 prismjs@^1.21.0, prismjs@~1.24.0:
   version "1.24.1"
@@ -18836,10 +18836,10 @@ y18n@^5.0.5:
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
   integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
 
-yahoo-finance2@2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/yahoo-finance2/-/yahoo-finance2-2.2.0.tgz#8694b04e69f4a79996812b6d082e5b738c51cee6"
-  integrity sha512-ZxLCcoh+J51F7Tol1jpVBmy50IBQSoxsECWYDToBxjZwPloFNHtEVOXNqJlyzTysnzVbPA5TeCNT6G0DoaJnNQ==
+yahoo-finance2@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/yahoo-finance2/-/yahoo-finance2-2.3.0.tgz#81bd76732dfd38aa5d7019a97caf0f938c0127c2"
+  integrity sha512-7oj8n/WJH9MtX+q99WbHdjEVPdobTX8IyYjg7v4sDOh4f9ByT2Frxmp+Uj+rctrO0EiiD9QWTuwV4h8AemGuCg==
   dependencies:
     ajv "8.10.0"
     ajv-formats "2.1.1"