Release 1.241.0 (#1760)

* Filter ITEM activities from search results

* Update changelog

.github/workflows/docker-image.yml

@@ -41,7 +41,7 @@ jobs:
         uses: docker/build-push-action@v3
         with:
           context: .
-          platforms: linux/amd64,linux/arm64
+          platforms: linux/amd64,linux/arm/v7,linux/arm64
           push: ${{ github.event_name != 'pull_request' }}
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.output.labels }}

.gitignore

@@ -25,6 +25,7 @@
 
 # misc
 /.angular/cache
+.env
 .env.prod
 /.sass-cache
 /connect.lock

.storybook/main.js

@@ -1,10 +1,7 @@
 module.exports = {
-  stories: [],
-  addons: ['@storybook/addon-essentials']
   // uncomment the property below if you want to apply some webpack config globally
   // webpackFinal: async (config, { configType }) => {
   //   // Make whatever fine-grained changes you need that should apply to all storybook configs
-
   //   // Return the altered config
   //   return config;
   // },

CHANGELOG.md

@@ -5,6 +5,175 @@ 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.241.0 - 2023-03-01
+
+### Changed
+
+- Filtered activities with type `ITEM` from search results
+- Considered the user's language in the _Stripe_ checkout
+- Upgraded the _Stripe_ dependencies
+- Upgraded `twitter-api-v2` from version `1.10.3` to `1.14.2`
+
+## 1.240.0 - 2023-02-26
+
+### Added
+
+- Supported a manual currency for the activity unit price
+
+### Fixed
+
+- Fixed the feature graphic of the _Ghostfolio meets Umbrel_ blog post
+
+## 1.239.0 - 2023-02-25
+
+### Added
+
+- Added a blog post: _Ghostfolio meets Umbrel_
+
+### Changed
+
+- Removed the dependency `rimraf`
+
+## 1.238.0 - 2023-02-25
+
+### Added
+
+- Added `COINGECKO` as a new data source type
+- Added support for data provider information to the position detail dialog
+- Added the configuration to publish a `linux/arm/v7` docker image
+- Added _Reddit_ to the _As seen in_ section on the landing page
+- Added _Umbrel_ to the _As seen in_ section on the landing page
+
+### Changed
+
+- Renamed the example environment variable file from `.env` to `.env.example`
+- Upgraded `zone.js` from version `0.11.8` to `0.12.0`
+
+### Fixed
+
+- Fixed `RangeError: Maximum call stack size exceeded` for values of type `Big` in the value redaction interceptor for the impersonation mode
+- Reset the letter spacing in buttons
+
+### Todo
+
+- Ensure that you still have a `.env` file in your project
+
+## 1.237.0 - 2023-02-19
+
+### Added
+
+- Added the support details to the pricing page
+
+### Changed
+
+- Increased the file size limit for the activities import
+- Improved the style of the search results for symbols
+- Migrated the style of `GfHeaderModule` to `@angular/material` `15` (mdc)
+- Upgraded `angular` from version `15.1.2` to `15.1.5`
+- Upgraded `Nx` from version `15.6.3` to `15.7.2`
+
+### Fixed
+
+- Fixed an issue with exact matches in the activities table filter (`VT` vs. `VTI`)
+- Fixed an issue in the data gathering service (do not skip `MANUAL` data source)
+
+## 1.236.0 - 2023-02-17
+
+### Changed
+
+- Beautified the ETF names in the asset profile
+- Removed the data source type `GHOSTFOLIO`
+
+### Fixed
+
+- Fixed an issue in the data gathering service (do not skip `MANUAL` data source)
+- Fixed the buying power calculation if no emergency fund is set but an activity is tagged as _Emergency Fund_
+- Fixed the url on logout during the local development
+
+## 1.235.0 - 2023-02-16
+
+### Changed
+
+- Improved the styles on the about page
+- Eliminated the `GhostfolioScraperApiService`
+
+## 1.234.0 - 2023-02-15
+
+### Added
+
+- Added the data import and export feature to the pricing page
+
+### Changed
+
+- Copy the logic of `GhostfolioScraperApiService` to `ManualService`
+- Improved the content of the landing page
+- Improved the content of the Frequently Asked Questions (FAQ) page
+- Improved the usability of the _Import Activities..._ action
+- Eliminated the permission `enableImport`
+- Set the exposed port as an environment variable (`PORT`) in `Dockerfile`
+- Migrated the style of `AboutPageModule` to `@angular/material` `15` (mdc)
+- Migrated the style of `BlogPageModule` to `@angular/material` `15` (mdc)
+- Migrated the style of `ChangelogPageModule` to `@angular/material` `15` (mdc)
+- Migrated the style of `ResourcesPageModule` to `@angular/material` `15` (mdc)
+- Upgraded `chart.js` from version `4.0.1` to `4.2.0`
+- Upgraded `ionicons` from version `6.0.4` to `6.1.2`
+- Upgraded `prettier` from version `2.8.1` to `2.8.4`
+- Upgraded `prisma` from version `4.9.0` to `4.10.1`
+
+### Fixed
+
+- Fixed an issue on the landing page caused by the global heat map of subscribers
+- Fixed the links in the interstitial for the subscription
+
+### Todo
+
+- Remove the environment variable `ENABLE_FEATURE_IMPORT`
+- Rename the `dataSource` from `GHOSTFOLIO` to `MANUAL`
+- Eliminate `GhostfolioScraperApiService`
+
+## 1.233.0 - 2023-02-09
+
+### Added
+
+- Added support to export accounts
+- Added suport to import accounts
+
+### Changed
+
+- Improved the styling in the admin control panel
+- Removed the _Google Play_ badge from the landing page
+- Upgraded `eslint` dependencies
+
+## 1.232.0 - 2023-02-05
+
+### Changed
+
+- Improved the language localization for German (`de`)
+- Migrated the style of `ActivitiesPageModule` to `@angular/material` `15` (mdc)
+- Migrated the style of `GfCreateOrUpdateActivityDialogModule` to `@angular/material` `15` (mdc)
+- Migrated the style of `GfMarketDataDetailDialogModule` to `@angular/material` `15` (mdc)
+- Upgraded `ng-extract-i18n-merge` from version `2.1.2` to `2.5.0`
+- Upgraded `ngx-markdown` from version `14.0.1` to `15.1.0`
+
+### Fixed
+
+- Fixed the `Upgrade Plan` button of the interstitial for the subscription
+
+## 1.231.0 - 2023-02-04
+
+### Added
+
+- Added the dividend and fees to the position detail dialog
+- Added support to link a (wealth) item to an account
+
+### Changed
+
+- Relaxed the validation rule of the _Redis_ host environment variable (`REDIS_HOST`)
+- Improved the language localization for German (`de`)
+- Eliminated `angular-material-css-vars`
+- Upgraded `angular` from version `14.2.0` to `15.1.2`
+- Upgraded `Nx` from version `15.0.13` to `15.6.3`
+
 ## 1.230.0 - 2023-01-29
 
 ### Added
@@ -641,7 +810,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Added the alias to the `Access` database schema
 - Added support for translated time distances
-- Added a _GitHub Action_ to create an `arm64` docker image
+- Added a _GitHub Action_ to create an `linux/arm64` docker image
 
 ### Changed
 
@@ -1254,7 +1423,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
-- Beautified the ETF names in the symbol profile
+- Beautified the ETF names in the asset profile
 
 ### Fixed
 
@@ -1679,7 +1848,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Extended the historical data view in the admin control panel
-- Upgraded _Stripe_ dependencies
+- Upgraded the _Stripe_ dependencies
 - Upgraded `prisma` from version `3.7.0` to `3.8.1`
 
 ### Fixed

DEVELOPMENT.md

@@ -0,0 +1,25 @@
+# Ghostfolio Development Guide
+
+## Git
+
+### Rebase
+
+`git rebase -i --autosquash main`
+
+## Dependencies
+
+### Nx
+
+#### Upgrade
+
+1. Run `yarn nx migrate latest`
+1. Make sure `package.json` changes make sense and then run `yarn install`
+1. Run `yarn nx migrate --run-migrations`
+
+### Prisma
+
+#### Create schema migration (local)
+
+Run `yarn prisma migrate dev --name added_job_title`
+
+https://www.prisma.io/docs/concepts/components/prisma-migrate#getting-started-with-prisma-migrate

Dockerfile

@@ -57,5 +57,5 @@ RUN apt update && apt install -y \
 
 COPY --from=builder /ghostfolio/dist/apps /ghostfolio/apps
 WORKDIR /ghostfolio/apps/api
-EXPOSE 3333
+EXPOSE ${PORT:-3333}
 CMD [  "yarn", "start:prod" ]

README.md

@@ -40,7 +40,7 @@ Ghostfolio is for you if you are...
 - 🧘 into minimalism
 - 🧺 caring about diversifying your financial resources
 - 🆓 interested in financial independence
-- 🙅 saying no to spreadsheets in 2023
+- 🙅 saying no to spreadsheets
 - 😎 still reading this list
 
 ## Features
@@ -75,7 +75,7 @@ The frontend is built with [Angular](https://angular.io) and uses [Angular Mater
 
 ## Self-hosting
 
-We provide official container images hosted on [Docker Hub](https://hub.docker.com/r/ghostfolio/ghostfolio) for `linux/amd64` and `linux/arm64`.
+We provide official container images hosted on [Docker Hub](https://hub.docker.com/r/ghostfolio/ghostfolio) for `linux/amd64`, `linux/arm/v7` and `linux/arm64`.
 
 <div align="center">
 
@@ -106,7 +106,8 @@ We provide official container images hosted on [Docker Hub](https://hub.docker.c
 
 - Basic knowledge of Docker
 - Installation of [Docker](https://www.docker.com/products/docker-desktop)
-- Local copy of this Git repository (clone)
+- Create a local copy of this Git repository (clone)
+- Copy the file `.env.example` to `.env` and populate it with your data (`cp .env.example .env`)
 
 #### a. Run environment
 
@@ -150,7 +151,8 @@ Please follow the instructions of the Ghostfolio [Unraid Community App](https://
 - [Docker](https://www.docker.com/products/docker-desktop)
 - [Node.js](https://nodejs.org/en/download) (version 16)
 - [Yarn](https://yarnpkg.com/en/docs/install)
-- A local copy of this Git repository (clone)
+- Create a local copy of this Git repository (clone)
+- Copy the file `.env.example` to `.env` and populate it with your data (`cp .env.example .env`)
 
 ### Setup
 
@@ -175,7 +177,7 @@ Run `yarn start:server`
 
 ### Start Client
 
-Run `yarn start:client`
+Run `yarn start:client` and open http://localhost:4200/en in your browser
 
 ### Start _Storybook_
 

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

@@ -1,5 +1,4 @@
 import { PortfolioService } from '@ghostfolio/api/app/portfolio/portfolio.service';
-import { UserService } from '@ghostfolio/api/app/user/user.service';
 import { RedactValuesInResponseInterceptor } from '@ghostfolio/api/interceptors/redact-values-in-response.interceptor';
 import { ImpersonationService } from '@ghostfolio/api/services/impersonation.service';
 import { Accounts } from '@ghostfolio/common/interfaces';
@@ -37,8 +36,7 @@ export class AccountController {
     private readonly accountService: AccountService,
     private readonly impersonationService: ImpersonationService,
     private readonly portfolioService: PortfolioService,
-    @Inject(REQUEST) private readonly request: RequestWithUser,
+    @Inject(REQUEST) private readonly request: RequestWithUser
-    private readonly userService: UserService
   ) {}
 
   @Delete(':id')

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

@@ -17,6 +17,10 @@ export class CreateAccountDto {
   @IsString()
   currency: string;
 
+  @IsOptional()
+  @IsString()
+  id?: string;
+
   @IsBoolean()
   @IsOptional()
   isExcluded?: boolean;

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

@@ -244,6 +244,7 @@ export class AdminService {
         Analytics: {
           select: {
             activityCount: true,
+            country: true,
             updatedAt: true
           }
         },
@@ -277,6 +278,7 @@ export class AdminService {
           id,
           subscription,
           accountCount: _count.Account || 0,
+          country: Analytics.country,
           lastActivity: Analytics.updatedAt,
           transactionCount: _count.Order || 0
         };

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

@@ -1,24 +1,23 @@
 import { join } from 'path';
 
-import { AuthDeviceModule } from '@ghostfolio/api/app/auth-device/auth-device.module';
-import { RedisCacheModule } from '@ghostfolio/api/app/redis-cache/redis-cache.module';
-import { ConfigurationModule } from '@ghostfolio/api/services/configuration.module';
-import { CronService } from '@ghostfolio/api/services/cron.service';
-import { DataGatheringModule } from '@ghostfolio/api/services/data-gathering.module';
-import { DataProviderModule } from '@ghostfolio/api/services/data-provider/data-provider.module';
-import { ExchangeRateDataModule } from '@ghostfolio/api/services/exchange-rate-data.module';
-import { PrismaModule } from '@ghostfolio/api/services/prisma.module';
-import { TwitterBotModule } from '@ghostfolio/api/services/twitter-bot/twitter-bot.module';
 import { BullModule } from '@nestjs/bull';
 import { MiddlewareConsumer, Module, RequestMethod } from '@nestjs/common';
 import { ConfigModule } from '@nestjs/config';
 import { ScheduleModule } from '@nestjs/schedule';
 import { ServeStaticModule } from '@nestjs/serve-static';
 
+import { ConfigurationModule } from '../services/configuration.module';
+import { CronService } from '../services/cron.service';
+import { DataGatheringModule } from '../services/data-gathering.module';
+import { DataProviderModule } from '../services/data-provider/data-provider.module';
+import { ExchangeRateDataModule } from '../services/exchange-rate-data.module';
+import { PrismaModule } from '../services/prisma.module';
+import { TwitterBotModule } from '../services/twitter-bot/twitter-bot.module';
 import { AccessModule } from './access/access.module';
 import { AccountModule } from './account/account.module';
 import { AdminModule } from './admin/admin.module';
 import { AppController } from './app.controller';
+import { AuthDeviceModule } from './auth-device/auth-device.module';
 import { AuthModule } from './auth/auth.module';
 import { BenchmarkModule } from './benchmark/benchmark.module';
 import { CacheModule } from './cache/cache.module';
@@ -30,6 +29,7 @@ import { InfoModule } from './info/info.module';
 import { LogoModule } from './logo/logo.module';
 import { OrderModule } from './order/order.module';
 import { PortfolioModule } from './portfolio/portfolio.module';
+import { RedisCacheModule } from './redis-cache/redis-cache.module';
 import { SubscriptionModule } from './subscription/subscription.module';
 import { SymbolModule } from './symbol/symbol.module';
 import { UserModule } from './user/user.module';
@@ -45,7 +45,7 @@ import { UserModule } from './user/user.module';
     BullModule.forRoot({
       redis: {
         host: process.env.REDIS_HOST,
-        port: parseInt(process.env.REDIS_PORT, 10),
+        port: parseInt(process.env.REDIS_PORT ?? '6379', 10),
         password: process.env.REDIS_PASSWORD
       }
     }),

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

@@ -61,8 +61,10 @@ export class AuthService {
 
         // Create new user if not found
         user = await this.userService.createUser({
+          data: {
             provider,
             thirdPartyId: principalId
+          }
         });
       }
 
@@ -96,8 +98,10 @@ export class AuthService {
 
         // Create new user if not found
         user = await this.userService.createUser({
+          data: {
             provider,
             thirdPartyId
+          }
         });
       }
 

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

@@ -14,6 +14,22 @@ export class ExportService {
     activityIds?: string[];
     userId: string;
   }): Promise<Export> {
+    const accounts = await this.prismaService.account.findMany({
+      orderBy: {
+        name: 'asc'
+      },
+      select: {
+        accountType: true,
+        balance: true,
+        currency: true,
+        id: true,
+        isExcluded: true,
+        name: true,
+        platformId: true
+      },
+      where: { userId }
+    });
+
     let activities = await this.prismaService.order.findMany({
       orderBy: { date: 'desc' },
       select: {
@@ -38,6 +54,7 @@ export class ExportService {
 
     return {
       meta: { date: new Date().toISOString(), version: environment.version },
+      accounts,
       activities: activities.map(
         ({
           accountId,

apps/api/src/app/frontend.middleware.ts

@@ -90,6 +90,11 @@ export class FrontendMiddleware implements NestMiddleware {
     ) {
       featureGraphicPath = 'assets/images/blog/ghostfolio-x-sackgeld.png';
       title = `Ghostfolio auf Sackgeld.com vorgestellt - ${title}`;
+    } else if (
+      request.path.startsWith('/en/blog/2023/02/ghostfolio-meets-umbrel')
+    ) {
+      featureGraphicPath = 'assets/images/blog/ghostfolio-x-umbrel.png';
+      title = `Ghostfolio meets Umbrel - ${title}`;
     }
 
     if (

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

@@ -1,8 +1,15 @@
+import { CreateAccountDto } from '@ghostfolio/api/app/account/create-account.dto';
 import { CreateOrderDto } from '@ghostfolio/api/app/order/create-order.dto';
 import { Type } from 'class-transformer';
-import { IsArray, ValidateNested } from 'class-validator';
+import { IsArray, IsOptional, ValidateNested } from 'class-validator';
 
 export class ImportDataDto {
+  @IsOptional()
+  @IsArray()
+  @Type(() => CreateAccountDto)
+  @ValidateNested({ each: true })
+  accounts: CreateAccountDto[];
+
   @IsArray()
   @Type(() => CreateOrderDto)
   @ValidateNested({ each: true })

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

@@ -2,6 +2,7 @@ import { TransformDataSourceInRequestInterceptor } from '@ghostfolio/api/interce
 import { TransformDataSourceInResponseInterceptor } from '@ghostfolio/api/interceptors/transform-data-source-in-response.interceptor';
 import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
 import { ImportResponse } from '@ghostfolio/common/interfaces';
+import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import type { RequestWithUser } from '@ghostfolio/common/types';
 import {
   Body,
@@ -38,7 +39,13 @@ export class ImportController {
     @Body() importData: ImportDataDto,
     @Query('dryRun') isDryRun?: boolean
   ): Promise<ImportResponse> {
-    if (!this.configurationService.get('ENABLE_FEATURE_IMPORT')) {
+    if (
+      !hasPermission(
+        this.request.user.permissions,
+        permissions.createAccount
+      ) ||
+      !hasPermission(this.request.user.permissions, permissions.createOrder)
+    ) {
       throw new HttpException(
         getReasonPhrase(StatusCodes.FORBIDDEN),
         StatusCodes.FORBIDDEN
@@ -60,9 +67,10 @@ export class ImportController {
 
     try {
       const activities = await this.importService.import({
-        maxActivitiesToImport,
         isDryRun,
+        maxActivitiesToImport,
         userCurrency,
+        accountsDto: importData.accounts ?? [],
         activitiesDto: importData.activities,
         userId: this.request.user.id
       });

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

@@ -1,4 +1,5 @@
 import { AccountService } from '@ghostfolio/api/app/account/account.service';
+import { CreateAccountDto } from '@ghostfolio/api/app/account/create-account.dto';
 import { CreateOrderDto } from '@ghostfolio/api/app/order/create-order.dto';
 import { Activity } from '@ghostfolio/api/app/order/interfaces/activities.interface';
 import { OrderService } from '@ghostfolio/api/app/order/order.service';
@@ -100,18 +101,75 @@ export class ImportService {
   }
 
   public async import({
+    accountsDto,
     activitiesDto,
     isDryRun = false,
     maxActivitiesToImport,
     userCurrency,
     userId
   }: {
+    accountsDto: Partial<CreateAccountDto>[];
     activitiesDto: Partial<CreateOrderDto>[];
     isDryRun?: boolean;
     maxActivitiesToImport: number;
     userCurrency: string;
     userId: string;
   }): Promise<Activity[]> {
+    const accountIdMapping: { [oldAccountId: string]: string } = {};
+
+    if (!isDryRun && accountsDto?.length) {
+      const existingAccounts = await this.accountService.accounts({
+        where: {
+          id: {
+            in: accountsDto.map(({ id }) => {
+              return id;
+            })
+          }
+        }
+      });
+
+      for (const account of accountsDto) {
+        // Check if there is any existing account with the same ID
+        const accountWithSameId = existingAccounts.find(
+          (existingAccount) => existingAccount.id === account.id
+        );
+
+        // If there is no account or if the account belongs to a different user then create a new account
+        if (!accountWithSameId || accountWithSameId.userId !== userId) {
+          let oldAccountId: string;
+          const platformId = account.platformId;
+
+          delete account.platformId;
+
+          if (accountWithSameId) {
+            oldAccountId = account.id;
+            delete account.id;
+          }
+
+          const newAccountObject = {
+            ...account,
+            User: { connect: { id: userId } }
+          };
+
+          if (platformId) {
+            Object.assign(newAccountObject, {
+              Platform: { connect: { id: platformId } }
+            });
+          }
+
+          const newAccount = await this.accountService.createAccount(
+            newAccountObject,
+            userId
+          );
+
+          // Store the new to old account ID mappings for updating activities
+          if (accountWithSameId && oldAccountId) {
+            accountIdMapping[oldAccountId] = newAccount.id;
+          }
+        }
+      }
+    }
+
     for (const activity of activitiesDto) {
       if (!activity.dataSource) {
         if (activity.type === 'ITEM') {
@@ -120,6 +178,13 @@ export class ImportService {
           activity.dataSource = this.dataProviderService.getPrimaryDataSource();
         }
       }
+
+      // If a new account is created, then update the accountId in all activities
+      if (!isDryRun) {
+        if (Object.keys(accountIdMapping).includes(activity.accountId)) {
+          activity.accountId = accountIdMapping[activity.accountId];
+        }
+      }
     }
 
     const assetProfiles = await this.validateActivities({
@@ -128,12 +193,18 @@ export class ImportService {
       userId
     });
 
-    const accountIds = (await this.accountService.getAccounts(userId)).map(
+    const accounts = (await this.accountService.getAccounts(userId)).map(
       (account) => {
-        return account.id;
+        return { id: account.id, name: account.name };
       }
     );
 
+    if (isDryRun) {
+      accountsDto.forEach(({ id, name }) => {
+        accounts.push({ id, name });
+      });
+    }
+
     const activities: Activity[] = [];
 
     for (const {
@@ -149,11 +220,15 @@ export class ImportService {
       unitPrice
     } of activitiesDto) {
       const date = parseISO(<string>(<unknown>dateString));
-      const validatedAccountId = accountIds.includes(accountId)
+      const validatedAccount = accounts.find(({ id }) => {
-        ? accountId
+        return id === accountId;
-        : undefined;
+      });
 
-      let order: OrderWithAccount;
+      let order:
+        | OrderWithAccount
+        | (Omit<OrderWithAccount, 'Account'> & {
+            Account?: { id: string; name: string };
+          });
 
       if (isDryRun) {
         order = {
@@ -164,7 +239,7 @@ export class ImportService {
           type,
           unitPrice,
           userId,
-          accountId: validatedAccountId,
+          accountId: validatedAccount?.id,
           accountUserId: undefined,
           createdAt: new Date(),
           id: uuidv4(),
@@ -187,6 +262,7 @@ export class ImportService {
             url: null,
             ...assetProfiles[symbol]
           },
+          Account: validatedAccount,
           symbolProfileId: undefined,
           updatedAt: new Date()
         };
@@ -199,7 +275,7 @@ export class ImportService {
           type,
           unitPrice,
           userId,
-          accountId: validatedAccountId,
+          accountId: validatedAccount?.id,
           SymbolProfile: {
             connectOrCreate: {
               create: {
@@ -221,6 +297,7 @@ export class ImportService {
 
       const value = new Big(quantity).mul(unitPrice).toNumber();
 
+      //@ts-ignore
       activities.push({
         ...order,
         value,

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

@@ -72,10 +72,6 @@ export class InfoService {
       globalPermissions.push(permissions.enableFearAndGreedIndex);
     }
 
-    if (this.configurationService.get('ENABLE_FEATURE_IMPORT')) {
-      globalPermissions.push(permissions.enableImport);
-    }
-
     if (this.configurationService.get('ENABLE_FEATURE_READ_ONLY_MODE')) {
       isReadOnlyMode = (await this.propertyService.getByKey(
         PROPERTY_IS_READ_ONLY_MODE

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

@@ -76,22 +76,20 @@ export class OrderService {
       userId: string;
     }
   ): Promise<Order> {
-    const defaultAccount = (
+    let Account;
-      await this.accountService.getAccounts(data.userId)
-    ).find((account) => {
-      return account.isDefault === true;
-    });
 
-    const tags = data.tags ?? [];
+    if (data.accountId) {
-
+      Account = {
-    let Account = {
         connect: {
           id_userId: {
             userId: data.userId,
-          id: data.accountId ?? defaultAccount?.id
+            id: data.accountId
           }
         }
       };
+    }
+
+    const tags = data.tags ?? [];
 
     if (data.type === 'ITEM') {
       const assetClass = data.assetClass;
@@ -101,7 +99,6 @@ export class OrderService {
       const id = uuidv4();
       const name = data.SymbolProfile.connectOrCreate.create.symbol;
 
-      Account = undefined;
       data.id = id;
       data.SymbolProfile.connectOrCreate.create.assetClass = assetClass;
       data.SymbolProfile.connectOrCreate.create.assetSubClass = assetSubClass;
@@ -113,9 +110,6 @@ export class OrderService {
         dataSource,
         symbol: id
       };
-    } else {
-      data.SymbolProfile.connectOrCreate.create.symbol =
-        data.SymbolProfile.connectOrCreate.create.symbol.toUpperCase();
     }
 
     await this.dataGatheringService.addJobToQueue(

apps/api/src/app/portfolio/current-rate.service.mock.ts

@@ -1,4 +1,5 @@
 import { parseDate, resetHours } from '@ghostfolio/common/helper';
+import { DataProviderInfo } from '@ghostfolio/common/interfaces';
 import { addDays, endOfDay, isBefore, isSameDay } from 'date-fns';
 
 import { GetValueObject } from './interfaces/get-value-object.interface';
@@ -48,8 +49,11 @@ export const CurrentRateServiceMock = {
   getValues: ({
     dataGatheringItems,
     dateQuery
-  }: GetValuesParams): Promise<GetValueObject[]> => {
+  }: GetValuesParams): Promise<{
-    const result: GetValueObject[] = [];
+    dataProviderInfos: DataProviderInfo[];
+    values: GetValueObject[];
+  }> => {
+    const values: GetValueObject[] = [];
     if (dateQuery.lt) {
       for (
         let date = resetHours(dateQuery.gte);
@@ -57,7 +61,7 @@ export const CurrentRateServiceMock = {
         date = addDays(date, 1)
       ) {
         for (const dataGatheringItem of dataGatheringItems) {
-          result.push({
+          values.push({
             date,
             marketPriceInBaseCurrency: mockGetValue(
               dataGatheringItem.symbol,
@@ -70,7 +74,7 @@ export const CurrentRateServiceMock = {
     } else {
       for (const date of dateQuery.in) {
         for (const dataGatheringItem of dataGatheringItems) {
-          result.push({
+          values.push({
             date,
             marketPriceInBaseCurrency: mockGetValue(
               dataGatheringItem.symbol,
@@ -81,6 +85,6 @@ export const CurrentRateServiceMock = {
         }
       }
     }
-    return Promise.resolve(result);
+    return Promise.resolve({ values, dataProviderInfos: [] });
   }
 };

apps/api/src/app/portfolio/current-rate.service.spec.ts

@@ -1,6 +1,7 @@
 import { DataProviderService } from '@ghostfolio/api/services/data-provider/data-provider.service';
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
 import { MarketDataService } from '@ghostfolio/api/services/market-data.service';
+import { DataProviderInfo } from '@ghostfolio/common/interfaces';
 import { DataSource, MarketData } from '@prisma/client';
 
 import { CurrentRateService } from './current-rate.service';
@@ -103,7 +104,12 @@ describe('CurrentRateService', () => {
         },
         userCurrency: 'CHF'
       })
-    ).toMatchObject<GetValueObject[]>([
+    ).toMatchObject<{
+      dataProviderInfos: DataProviderInfo[];
+      values: GetValueObject[];
+    }>({
+      dataProviderInfos: [],
+      values: [
         {
           date: undefined,
           marketPriceInBaseCurrency: 1841.823902,
@@ -114,6 +120,7 @@ describe('CurrentRateService', () => {
           marketPriceInBaseCurrency: 1847.839966,
           symbol: 'AMZN'
         }
-    ]);
+      ]
+    });
   });
 });

apps/api/src/app/portfolio/current-rate.service.ts

@@ -2,6 +2,7 @@ import { DataProviderService } from '@ghostfolio/api/services/data-provider/data
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
 import { MarketDataService } from '@ghostfolio/api/services/market-data.service';
 import { resetHours } from '@ghostfolio/common/helper';
+import { DataProviderInfo } from '@ghostfolio/common/interfaces';
 import { Injectable } from '@nestjs/common';
 import { isBefore, isToday } from 'date-fns';
 import { flatten } from 'lodash';
@@ -22,7 +23,11 @@ export class CurrentRateService {
     dataGatheringItems,
     dateQuery,
     userCurrency
-  }: GetValuesParams): Promise<GetValueObject[]> {
+  }: GetValuesParams): Promise<{
+    dataProviderInfos: DataProviderInfo[];
+    values: GetValueObject[];
+  }> {
+    const dataProviderInfos: DataProviderInfo[] = [];
     const includeToday =
       (!dateQuery.lt || isBefore(new Date(), dateQuery.lt)) &&
       (!dateQuery.gte || isBefore(dateQuery.gte, new Date())) &&
@@ -38,6 +43,14 @@ export class CurrentRateService {
           .then((dataResultProvider) => {
             const result: GetValueObject[] = [];
             for (const dataGatheringItem of dataGatheringItems) {
+              if (
+                dataResultProvider?.[dataGatheringItem.symbol]?.dataProviderInfo
+              ) {
+                dataProviderInfos.push(
+                  dataResultProvider[dataGatheringItem.symbol].dataProviderInfo
+                );
+              }
+
               result.push({
                 date: today,
                 marketPriceInBaseCurrency:
@@ -81,7 +94,10 @@ export class CurrentRateService {
         })
     );
 
-    return flatten(await Promise.all(promises));
+    return {
+      dataProviderInfos,
+      values: flatten(await Promise.all(promises))
+    };
   }
 
   private containsToday(dates: Date[]): boolean {

apps/api/src/app/portfolio/interfaces/portfolio-position-detail.interface.ts

@@ -1,4 +1,5 @@
 import {
+  DataProviderInfo,
   EnhancedSymbolProfile,
   HistoricalDataItem
 } from '@ghostfolio/common/interfaces';
@@ -7,6 +8,9 @@ import { Tag } from '@prisma/client';
 
 export interface PortfolioPositionDetail {
   averagePrice: number;
+  dataProviderInfo: DataProviderInfo;
+  dividendInBaseCurrency: number;
+  feeInBaseCurrency: number;
   firstBuyDate: string;
   grossPerformance: number;
   grossPerformancePercent: number;

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

@@ -82,6 +82,7 @@ describe('PortfolioCalculator', () => {
             averagePrice: new Big('0'),
             currency: 'CHF',
             dataSource: 'YAHOO',
+            fee: new Big('3.2'),
             firstBuyDate: '2021-11-22',
             grossPerformance: new Big('-12.6'),
             grossPerformancePercentage: new Big('-0.0440867739678096571'),

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

@@ -71,6 +71,7 @@ describe('PortfolioCalculator', () => {
             averagePrice: new Big('136.6'),
             currency: 'CHF',
             dataSource: 'YAHOO',
+            fee: new Big('1.55'),
             firstBuyDate: '2021-11-30',
             grossPerformance: new Big('24.6'),
             grossPerformancePercentage: new Big('0.09004392386530014641'),

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

@@ -82,6 +82,7 @@ describe('PortfolioCalculator', () => {
             averagePrice: new Big('320.43'),
             currency: 'CHF',
             dataSource: 'YAHOO',
+            fee: new Big('0'),
             firstBuyDate: '2015-01-01',
             grossPerformance: new Big('27172.74'),
             grossPerformancePercentage: new Big('42.40043067128546016291'),

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

@@ -82,6 +82,7 @@ describe('PortfolioCalculator', () => {
             averagePrice: new Big('75.80'),
             currency: 'CHF',
             dataSource: 'YAHOO',
+            fee: new Big('4.25'),
             firstBuyDate: '2022-03-07',
             grossPerformance: new Big('21.93'),
             grossPerformancePercentage: new Big('0.14465699208443271768'),

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

@@ -102,6 +102,7 @@ describe('PortfolioCalculator', () => {
             averagePrice: new Big('0'),
             currency: 'CHF',
             dataSource: 'YAHOO',
+            fee: new Big('0'),
             firstBuyDate: '2022-03-07',
             grossPerformance: new Big('19.86'),
             grossPerformancePercentage: new Big('0.13100263852242744063'),

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

@@ -1,7 +1,11 @@
 import { TimelineInfoInterface } from '@ghostfolio/api/app/portfolio/interfaces/timeline-info.interface';
 import { IDataGatheringItem } from '@ghostfolio/api/services/interfaces/interfaces';
 import { DATE_FORMAT, parseDate, resetHours } from '@ghostfolio/common/helper';
-import { ResponseError, TimelinePosition } from '@ghostfolio/common/interfaces';
+import {
+  DataProviderInfo,
+  ResponseError,
+  TimelinePosition
+} from '@ghostfolio/common/interfaces';
 import { GroupBy } from '@ghostfolio/common/types';
 import { Logger } from '@nestjs/common';
 import { Type as TypeOfOrder } from '@prisma/client';
@@ -45,6 +49,7 @@ export class PortfolioCalculator {
 
   private currency: string;
   private currentRateService: CurrentRateService;
+  private dataProviderInfos: DataProviderInfo[];
   private orders: PortfolioOrder[];
   private transactionPoints: TransactionPoint[];
 
@@ -202,7 +207,8 @@ export class PortfolioCalculator {
       symbols[item.symbol] = true;
     }
 
-    const marketSymbols = await this.currentRateService.getValues({
+    const { dataProviderInfos, values: marketSymbols } =
+      await this.currentRateService.getValues({
         currencies,
         dataGatheringItems,
         dateQuery: {
@@ -211,6 +217,8 @@ export class PortfolioCalculator {
         userCurrency: this.currency
       });
 
+    this.dataProviderInfos = dataProviderInfos;
+
     const marketSymbolMap: {
       [date: string]: { [symbol: string]: Big };
     } = {};
@@ -368,7 +376,8 @@ export class PortfolioCalculator {
 
     dates.push(resetHours(end));
 
-    const marketSymbols = await this.currentRateService.getValues({
+    const { dataProviderInfos, values: marketSymbols } =
+      await this.currentRateService.getValues({
         currencies,
         dataGatheringItems,
         dateQuery: {
@@ -377,6 +386,8 @@ export class PortfolioCalculator {
         userCurrency: this.currency
       });
 
+    this.dataProviderInfos = dataProviderInfos;
+
     const marketSymbolMap: {
       [date: string]: { [symbol: string]: Big };
     } = {};
@@ -431,6 +442,7 @@ export class PortfolioCalculator {
           : item.investment.div(item.quantity),
         currency: item.currency,
         dataSource: item.dataSource,
+        fee: item.fee,
         firstBuyDate: item.firstBuyDate,
         grossPerformance: !hasErrors ? grossPerformance ?? null : null,
         grossPerformancePercentage: !hasErrors
@@ -462,6 +474,10 @@ export class PortfolioCalculator {
     };
   }
 
+  public getDataProviderInfos() {
+    return this.dataProviderInfos;
+  }
+
   public getInvestments(): { date: string; investment: Big }[] {
     if (this.transactionPoints.length === 0) {
       return [];
@@ -747,7 +763,7 @@ export class PortfolioCalculator {
       let marketSymbols: GetValueObject[] = [];
       if (dataGatheringItems.length > 0) {
         try {
-          marketSymbols = await this.currentRateService.getValues({
+          const { values } = await this.currentRateService.getValues({
             currencies,
             dataGatheringItems,
             dateQuery: {
@@ -756,6 +772,7 @@ export class PortfolioCalculator {
             },
             userCurrency: this.currency
           });
+          marketSymbols = values;
         } catch (error) {
           Logger.error(
             `Failed to fetch info for date ${startDate} with exception`,

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

@@ -24,7 +24,7 @@ import {
   MAX_CHART_ITEMS,
   UNKNOWN_KEY
 } from '@ghostfolio/common/config';
-import { DATE_FORMAT, parseDate } from '@ghostfolio/common/helper';
+import { DATE_FORMAT, getSum, parseDate } from '@ghostfolio/common/helper';
 import {
   Accounts,
   EnhancedSymbolProfile,
@@ -573,7 +573,6 @@ export class PortfolioService {
       const cashPositions = await this.getCashPositions({
         cashDetails,
         userCurrency,
-        investment: totalInvestmentInBaseCurrency,
         value: filteredValueInBaseCurrency
       });
 
@@ -599,7 +598,6 @@ export class PortfolioService {
       const cashPositions = await this.getCashPositions({
         cashDetails,
         userCurrency,
-        investment: totalInvestmentInBaseCurrency,
         value: filteredValueInBaseCurrency
       });
 
@@ -680,6 +678,9 @@ export class PortfolioService {
       return {
         tags,
         averagePrice: undefined,
+        dataProviderInfo: undefined,
+        dividendInBaseCurrency: undefined,
+        feeInBaseCurrency: undefined,
         firstBuyDate: undefined,
         grossPerformance: undefined,
         grossPerformancePercent: undefined,
@@ -746,12 +747,23 @@ export class PortfolioService {
         averagePrice,
         currency,
         dataSource,
+        fee,
         firstBuyDate,
         marketPrice,
         quantity,
         transactionCount
       } = position;
 
+      const dividendInBaseCurrency = getSum(
+        orders
+          .filter(({ type }) => {
+            return type === 'DIVIDEND';
+          })
+          .map(({ valueInBaseCurrency }) => {
+            return new Big(valueInBaseCurrency);
+          })
+      );
+
       // Convert investment, gross and net performance to currency of user
       const investment = this.exchangeRateDataService.toCurrency(
         position.investment?.toNumber(),
@@ -838,6 +850,13 @@ export class PortfolioService {
         tags,
         transactionCount,
         averagePrice: averagePrice.toNumber(),
+        dataProviderInfo: portfolioCalculator.getDataProviderInfos()?.[0],
+        dividendInBaseCurrency: dividendInBaseCurrency.toNumber(),
+        feeInBaseCurrency: this.exchangeRateDataService.toCurrency(
+          fee.toNumber(),
+          SymbolProfile.currency,
+          userCurrency
+        ),
         grossPerformancePercent:
           position.grossPerformancePercentage?.toNumber(),
         historicalData: historicalDataArray,
@@ -894,6 +913,9 @@ export class PortfolioService {
         SymbolProfile,
         tags,
         averagePrice: 0,
+        dataProviderInfo: undefined,
+        dividendInBaseCurrency: 0,
+        feeInBaseCurrency: 0,
         firstBuyDate: undefined,
         grossPerformance: undefined,
         grossPerformancePercent: undefined,
@@ -1209,12 +1231,10 @@ export class PortfolioService {
 
   private async getCashPositions({
     cashDetails,
-    investment,
     userCurrency,
     value
   }: {
     cashDetails: CashDetails;
-    investment: Big;
     userCurrency: string;
     value: Big;
   }) {
@@ -1533,7 +1553,10 @@ export class PortfolioService {
       userCurrency
     }).toNumber();
     const emergencyFund = new Big(
+      Math.max(
+        emergencyFundPositionsValueInBaseCurrency,
         (user.Settings?.settings as UserSettings)?.emergencyFund ?? 0
+      )
     );
     const fees = this.getFees({ activities, userCurrency }).toNumber();
     const firstOrderDate = activities[0]?.date;
@@ -1692,6 +1715,14 @@ export class PortfolioService {
     userId: string;
     withExcludedAccounts?: boolean;
   }) {
+    const ordersOfTypeItem = await this.orderService.getOrders({
+      filters,
+      userCurrency,
+      userId,
+      withExcludedAccounts,
+      types: ['ITEM']
+    });
+
     const accounts: PortfolioDetails['accounts'] = {};
 
     let currentAccounts: (Account & {
@@ -1722,10 +1753,18 @@ export class PortfolioService {
     });
 
     for (const account of currentAccounts) {
-      const ordersByAccount = orders.filter(({ accountId }) => {
+      let ordersByAccount = orders.filter(({ accountId }) => {
         return accountId === account.id;
       });
 
+      const ordersOfTypeItemByAccount = ordersOfTypeItem.filter(
+        ({ accountId }) => {
+          return accountId === account.id;
+        }
+      );
+
+      ordersByAccount = ordersByAccount.concat(ordersOfTypeItemByAccount);
+
       accounts[account.id] = {
         balance: account.balance,
         currency: account.currency,
@@ -1745,7 +1784,9 @@ export class PortfolioService {
       for (const order of ordersByAccount) {
         let currentValueOfSymbolInBaseCurrency =
           order.quantity *
-            portfolioItemsNow[order.SymbolProfile.symbol]?.marketPrice ?? 0;
+          (portfolioItemsNow[order.SymbolProfile.symbol]?.marketPrice ??
+            order.unitPrice ??
+            0);
         let originalValueOfSymbolInBaseCurrency =
           this.exchangeRateDataService.toCurrency(
             order.quantity * order.unitPrice,

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

@@ -117,7 +117,7 @@ export class SubscriptionController {
       return await this.subscriptionService.createCheckoutSession({
         couponId,
         priceId,
-        userId: this.request.user.id
+        user: this.request.user
       });
     } catch (error) {
       Logger.error(error, 'SubscriptionController');

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

@@ -4,6 +4,7 @@ import {
   DEFAULT_LANGUAGE_CODE,
   PROPERTY_STRIPE_CONFIG
 } from '@ghostfolio/common/config';
+import { UserWithSettings } from '@ghostfolio/common/interfaces';
 import { Subscription as SubscriptionInterface } from '@ghostfolio/common/interfaces/subscription.interface';
 import { SubscriptionType } from '@ghostfolio/common/types/subscription.type';
 import { Injectable, Logger } from '@nestjs/common';
@@ -23,7 +24,7 @@ export class SubscriptionService {
     this.stripe = new Stripe(
       this.configurationService.get('STRIPE_SECRET_KEY'),
       {
-        apiVersion: '2020-08-27'
+        apiVersion: '2022-11-15'
       }
     );
   }
@@ -31,17 +32,17 @@ export class SubscriptionService {
   public async createCheckoutSession({
     couponId,
     priceId,
-    userId
+    user
   }: {
     couponId?: string;
     priceId: string;
-    userId: string;
+    user: UserWithSettings;
   }) {
     const checkoutSessionCreateParams: Stripe.Checkout.SessionCreateParams = {
-      cancel_url: `${this.configurationService.get(
+      cancel_url: `${this.configurationService.get('ROOT_URL')}/${
-        'ROOT_URL'
+        user.Settings?.settings?.language ?? DEFAULT_LANGUAGE_CODE
-      )}/${DEFAULT_LANGUAGE_CODE}/account`,
+      }/account`,
-      client_reference_id: userId,
+      client_reference_id: user.id,
       line_items: [
         {
           price: priceId,
@@ -116,10 +117,6 @@ export class SubscriptionService {
         userId: session.client_reference_id
       });
 
-      await this.stripe.customers.update(session.customer as string, {
-        description: session.client_reference_id
-      });
-
       return session.client_reference_id;
     } catch (error) {
       Logger.error(error, 'SubscriptionService');

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

@@ -0,0 +1,7 @@
+import { IsOptional, IsString } from 'class-validator';
+
+export class CreateUserDto {
+  @IsString()
+  @IsOptional()
+  country?: string;
+}

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

@@ -22,6 +22,7 @@ import { User as UserModel } from '@prisma/client';
 import { StatusCodes, getReasonPhrase } from 'http-status-codes';
 import { size } from 'lodash';
 
+import { CreateUserDto } from './create-user.dto';
 import { UserItem } from './interfaces/user-item.interface';
 import { UpdateUserSettingDto } from './update-user-setting.dto';
 import { UserService } from './user.service';
@@ -65,7 +66,7 @@ export class UserController {
   }
 
   @Post()
-  public async signupUser(): Promise<UserItem> {
+  public async signupUser(@Body() data: CreateUserDto): Promise<UserItem> {
     const isUserSignupEnabled =
       await this.propertyService.isUserSignupEnabled();
 
@@ -79,7 +80,8 @@ export class UserController {
     const hasAdmin = await this.userService.hasAdmin();
 
     const { accessToken, id, role } = await this.userService.createUser({
-      role: hasAdmin ? 'USER' : 'ADMIN'
+      country: data.country,
+      data: { role: hasAdmin ? 'USER' : 'ADMIN' }
     });
 
     return {

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

@@ -18,6 +18,8 @@ import { Injectable } from '@nestjs/common';
 import { Prisma, Role, User } from '@prisma/client';
 import { sortBy } from 'lodash';
 
+import { CreateUserDto } from './create-user.dto';
+
 const crypto = require('crypto');
 
 @Injectable()
@@ -231,7 +233,10 @@ export class UserService {
     return hash.digest('hex');
   }
 
-  public async createUser(data: Prisma.UserCreateInput): Promise<User> {
+  public async createUser({
+    country,
+    data
+  }: CreateUserDto & { data: Prisma.UserCreateInput }): Promise<User> {
     if (!data?.provider) {
       data.provider = 'ANONYMOUS';
     }
@@ -256,6 +261,15 @@ export class UserService {
       }
     });
 
+    if (this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION')) {
+      await this.prismaService.analytics.create({
+        data: {
+          country,
+          User: { connect: { id: user.id } }
+        }
+      });
+    }
+
     if (data.provider === 'ANONYMOUS') {
       const accessToken = this.createAccessToken(
         user.id,

apps/api/src/helper/object.helper.ts

@@ -1,3 +1,4 @@
+import Big from 'big.js';
 import { cloneDeep, isArray, isObject } from 'lodash';
 
 export function hasNotDefinedValuesInObject(aObject: Object): boolean {
@@ -59,7 +60,10 @@ export function redactAttributes({
               return redactAttributes({ options, object: currentObject });
             }
           );
-        } else if (isObject(redactedObject[property])) {
+        } else if (
+          isObject(redactedObject[property]) &&
+          !(redactedObject[property] instanceof Big)
+        ) {
           // Recursively call the function on the nested object
           redactedObject[property] = redactAttributes({
             options,

apps/api/src/interceptors/redact-values-in-response.interceptor.ts

@@ -35,6 +35,7 @@ export class RedactValuesInResponseInterceptor<T>
               'balanceInBaseCurrency',
               'comment',
               'convertedBalance',
+              'dividendInBaseCurrency',
               'fee',
               'feeInBaseCurrency',
               'filteredValueInBaseCurrency',

apps/api/src/main.ts

@@ -1,6 +1,7 @@
 import { Logger, ValidationPipe, VersioningType } from '@nestjs/common';
 import { ConfigService } from '@nestjs/config';
 import { NestFactory } from '@nestjs/core';
+import * as bodyParser from 'body-parser';
 
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
@@ -33,6 +34,9 @@ async function bootstrap() {
     })
   );
 
+  // Support 10mb csv/json files for importing activities
+  app.use(bodyParser.json({ limit: '10mb' }));
+
   const HOST = configService.get<string>('HOST') || '0.0.0.0';
   const PORT = configService.get<number>('PORT') || 3333;
   await app.listen(PORT, HOST, () => {

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

@@ -19,12 +19,11 @@ export class ConfigurationService {
       CACHE_TTL: num({ default: 1 }),
       DATA_SOURCE_PRIMARY: str({ default: DataSource.YAHOO }),
       DATA_SOURCES: json({
-        default: [DataSource.GHOSTFOLIO, DataSource.MANUAL, DataSource.YAHOO]
+        default: [DataSource.MANUAL, DataSource.YAHOO]
       }),
       ENABLE_FEATURE_BLOG: bool({ default: false }),
       ENABLE_FEATURE_CUSTOM_SYMBOLS: bool({ default: false }),
       ENABLE_FEATURE_FEAR_AND_GREED_INDEX: bool({ default: false }),
-      ENABLE_FEATURE_IMPORT: bool({ default: true }),
       ENABLE_FEATURE_READ_ONLY_MODE: bool({ default: false }),
       ENABLE_FEATURE_SOCIAL_LOGIN: bool({ default: false }),
       ENABLE_FEATURE_STATISTICS: bool({ default: false }),
@@ -42,7 +41,7 @@ export class ConfigurationService {
       MAX_ITEM_IN_CACHE: num({ default: 9999 }),
       PORT: port({ default: 3333 }),
       RAPID_API_API_KEY: str({ default: '' }),
-      REDIS_HOST: host({ default: 'localhost' }),
+      REDIS_HOST: str({ default: 'localhost' }),
       REDIS_PASSWORD: str({ default: '' }),
       REDIS_PORT: port({ default: 6379 }),
       ROOT_URL: str({ default: 'http://localhost:4200' }),

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

@@ -207,10 +207,6 @@ export class DataGatheringService {
 
   public async gatherSymbols(aSymbolsWithStartDate: IDataGatheringItem[]) {
     for (const { dataSource, date, symbol } of aSymbolsWithStartDate) {
-      if (dataSource === 'MANUAL') {
-        continue;
-      }
-
       await this.addJobToQueue(
         GATHER_HISTORICAL_MARKET_DATA_PROCESS,
         {
@@ -253,11 +249,6 @@ export class DataGatheringService {
           },
           scraperConfiguration: true,
           symbol: true
-        },
-        where: {
-          dataSource: {
-            not: 'MANUAL'
-          }
         }
       })
     ).map((symbolProfile) => {
@@ -278,7 +269,6 @@ export class DataGatheringService {
     return symbolProfiles
       .filter(({ dataSource }) => {
         return (
-          dataSource !== DataSource.GHOSTFOLIO &&
           dataSource !== DataSource.MANUAL &&
           dataSource !== DataSource.RAPID_API
         );
@@ -300,11 +290,6 @@ export class DataGatheringService {
         dataSource: true,
         scraperConfiguration: true,
         symbol: true
-      },
-      where: {
-        dataSource: {
-          not: 'MANUAL'
-        }
       }
     });
 

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

@@ -0,0 +1,200 @@
+import { LookupItem } from '@ghostfolio/api/app/symbol/interfaces/lookup-item.interface';
+import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
+import { DataProviderInterface } from '@ghostfolio/api/services/data-provider/interfaces/data-provider.interface';
+import {
+  IDataProviderHistoricalResponse,
+  IDataProviderResponse
+} from '@ghostfolio/api/services/interfaces/interfaces';
+import { DATE_FORMAT } from '@ghostfolio/common/helper';
+import { DataProviderInfo } from '@ghostfolio/common/interfaces';
+import { Granularity } from '@ghostfolio/common/types';
+import { Injectable, Logger } from '@nestjs/common';
+import {
+  AssetClass,
+  AssetSubClass,
+  DataSource,
+  SymbolProfile
+} from '@prisma/client';
+import bent from 'bent';
+import { format, fromUnixTime, getUnixTime } from 'date-fns';
+
+@Injectable()
+export class CoinGeckoService implements DataProviderInterface {
+  private baseCurrency: string;
+  private readonly URL = 'https://api.coingecko.com/api/v3';
+
+  public constructor(
+    private readonly configurationService: ConfigurationService
+  ) {
+    this.baseCurrency = this.configurationService.get('BASE_CURRENCY');
+  }
+
+  public canHandle(symbol: string) {
+    return true;
+  }
+
+  public async getAssetProfile(
+    aSymbol: string
+  ): Promise<Partial<SymbolProfile>> {
+    const response: Partial<SymbolProfile> = {
+      assetClass: AssetClass.CASH,
+      assetSubClass: AssetSubClass.CRYPTOCURRENCY,
+      currency: this.baseCurrency,
+      dataSource: this.getName(),
+      symbol: aSymbol
+    };
+
+    try {
+      const get = bent(`${this.URL}/coins/${aSymbol}`, 'GET', 'json', 200);
+      const { name } = await get();
+
+      response.name = name;
+    } catch (error) {
+      Logger.error(error, 'CoinGeckoService');
+    }
+
+    return response;
+  }
+
+  public async getDividends({
+    from,
+    granularity = 'day',
+    symbol,
+    to
+  }: {
+    from: Date;
+    granularity: Granularity;
+    symbol: string;
+    to: Date;
+  }) {
+    return {};
+  }
+
+  public async getHistorical(
+    aSymbol: string,
+    aGranularity: Granularity = 'day',
+    from: Date,
+    to: Date
+  ): Promise<{
+    [symbol: string]: { [date: string]: IDataProviderHistoricalResponse };
+  }> {
+    try {
+      const get = bent(
+        `${
+          this.URL
+        }/coins/${aSymbol}/market_chart/range?vs_currency=${this.baseCurrency.toLowerCase()}&from=${getUnixTime(
+          from
+        )}&to=${getUnixTime(to)}`,
+        'GET',
+        'json',
+        200
+      );
+      const { prices } = await get();
+
+      const result: {
+        [symbol: string]: { [date: string]: IDataProviderHistoricalResponse };
+      } = {
+        [aSymbol]: {}
+      };
+
+      for (const [timestamp, marketPrice] of prices) {
+        result[aSymbol][format(fromUnixTime(timestamp / 1000), DATE_FORMAT)] = {
+          marketPrice
+        };
+      }
+
+      return result;
+    } catch (error) {
+      throw new Error(
+        `Could not get historical market data for ${aSymbol} (${this.getName()}) from ${format(
+          from,
+          DATE_FORMAT
+        )} to ${format(to, DATE_FORMAT)}: [${error.name}] ${error.message}`
+      );
+    }
+  }
+
+  public getMaxNumberOfSymbolsPerRequest() {
+    return 50;
+  }
+
+  public getName(): DataSource {
+    return DataSource.COINGECKO;
+  }
+
+  public async getQuotes(
+    aSymbols: string[]
+  ): Promise<{ [symbol: string]: IDataProviderResponse }> {
+    const results: { [symbol: string]: IDataProviderResponse } = {};
+
+    if (aSymbols.length <= 0) {
+      return {};
+    }
+
+    try {
+      const get = bent(
+        `${this.URL}/simple/price?ids=${aSymbols.join(
+          ','
+        )}&vs_currencies=${this.baseCurrency.toLowerCase()}`,
+        'GET',
+        'json',
+        200
+      );
+      const response = await get();
+
+      for (const symbol in response) {
+        if (Object.prototype.hasOwnProperty.call(response, symbol)) {
+          results[symbol] = {
+            currency: this.baseCurrency,
+            dataProviderInfo: this.getDataProviderInfo(),
+            dataSource: DataSource.COINGECKO,
+            marketPrice: response[symbol][this.baseCurrency.toLowerCase()],
+            marketState: 'open'
+          };
+        }
+      }
+    } catch (error) {
+      Logger.error(error, 'CoinGeckoService');
+    }
+
+    return results;
+  }
+
+  public async search(aQuery: string): Promise<{ items: LookupItem[] }> {
+    let items: LookupItem[] = [];
+
+    if (aQuery.length <= 2) {
+      return { items };
+    }
+
+    try {
+      const get = bent(
+        `${this.URL}/search?query=${aQuery}`,
+        'GET',
+        'json',
+        200
+      );
+      const { coins } = await get();
+
+      items = coins.map(({ id: symbol, name }) => {
+        return {
+          name,
+          symbol,
+          currency: this.baseCurrency,
+          dataSource: this.getName()
+        };
+      });
+    } catch (error) {
+      Logger.error(error, 'CoinGeckoService');
+    }
+
+    return { items };
+  }
+
+  private getDataProviderInfo(): DataProviderInfo {
+    return {
+      name: 'CoinGecko',
+      url: 'https://coingecko.com'
+    };
+  }
+}

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

@@ -1,8 +1,8 @@
 import { ConfigurationModule } from '@ghostfolio/api/services/configuration.module';
 import { CryptocurrencyModule } from '@ghostfolio/api/services/cryptocurrency/cryptocurrency.module';
 import { AlphaVantageService } from '@ghostfolio/api/services/data-provider/alpha-vantage/alpha-vantage.service';
+import { CoinGeckoService } from '@ghostfolio/api/services/data-provider/coingecko/coingecko.service';
 import { EodHistoricalDataService } from '@ghostfolio/api/services/data-provider/eod-historical-data/eod-historical-data.service';
-import { GhostfolioScraperApiService } from '@ghostfolio/api/services/data-provider/ghostfolio-scraper-api/ghostfolio-scraper-api.service';
 import { GoogleSheetsService } from '@ghostfolio/api/services/data-provider/google-sheets/google-sheets.service';
 import { ManualService } from '@ghostfolio/api/services/data-provider/manual/manual.service';
 import { RapidApiService } from '@ghostfolio/api/services/data-provider/rapid-api/rapid-api.service';
@@ -22,9 +22,9 @@ import { DataProviderService } from './data-provider.service';
   ],
   providers: [
     AlphaVantageService,
+    CoinGeckoService,
     DataProviderService,
     EodHistoricalDataService,
-    GhostfolioScraperApiService,
     GoogleSheetsService,
     ManualService,
     RapidApiService,
@@ -32,8 +32,8 @@ import { DataProviderService } from './data-provider.service';
     {
       inject: [
         AlphaVantageService,
+        CoinGeckoService,
         EodHistoricalDataService,
-        GhostfolioScraperApiService,
         GoogleSheetsService,
         ManualService,
         RapidApiService,
@@ -42,16 +42,16 @@ import { DataProviderService } from './data-provider.service';
       provide: 'DataProviderInterfaces',
       useFactory: (
         alphaVantageService,
+        coinGeckoService,
         eodHistoricalDataService,
-        ghostfolioScraperApiService,
         googleSheetsService,
         manualService,
         rapidApiService,
         yahooFinanceService
       ) => [
         alphaVantageService,
+        coinGeckoService,
         eodHistoricalDataService,
-        ghostfolioScraperApiService,
         googleSheetsService,
         manualService,
         rapidApiService,
@@ -59,10 +59,6 @@ import { DataProviderService } from './data-provider.service';
       ]
     }
   ],
-  exports: [
+  exports: [DataProviderService, YahooFinanceService]
-    DataProviderService,
-    GhostfolioScraperApiService,
-    YahooFinanceService
-  ]
 })
 export class DataProviderModule {}

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

@@ -1,194 +0,0 @@
-import { LookupItem } from '@ghostfolio/api/app/symbol/interfaces/lookup-item.interface';
-import { DataProviderInterface } from '@ghostfolio/api/services/data-provider/interfaces/data-provider.interface';
-import {
-  IDataProviderHistoricalResponse,
-  IDataProviderResponse
-} from '@ghostfolio/api/services/interfaces/interfaces';
-import { PrismaService } from '@ghostfolio/api/services/prisma.service';
-import { SymbolProfileService } from '@ghostfolio/api/services/symbol-profile.service';
-import {
-  DATE_FORMAT,
-  extractNumberFromString,
-  getYesterday
-} from '@ghostfolio/common/helper';
-import { Granularity } from '@ghostfolio/common/types';
-import { Injectable, Logger } from '@nestjs/common';
-import { DataSource, SymbolProfile } from '@prisma/client';
-import bent from 'bent';
-import * as cheerio from 'cheerio';
-import { addDays, format, isBefore } from 'date-fns';
-
-@Injectable()
-export class GhostfolioScraperApiService implements DataProviderInterface {
-  public constructor(
-    private readonly prismaService: PrismaService,
-    private readonly symbolProfileService: SymbolProfileService
-  ) {}
-
-  public canHandle(symbol: string) {
-    return true;
-  }
-
-  public async getAssetProfile(
-    aSymbol: string
-  ): Promise<Partial<SymbolProfile>> {
-    return {
-      dataSource: this.getName()
-    };
-  }
-
-  public async getDividends({
-    from,
-    granularity = 'day',
-    symbol,
-    to
-  }: {
-    from: Date;
-    granularity: Granularity;
-    symbol: string;
-    to: Date;
-  }) {
-    return {};
-  }
-
-  public async getHistorical(
-    aSymbol: string,
-    aGranularity: Granularity = 'day',
-    from: Date,
-    to: Date
-  ): Promise<{
-    [symbol: string]: { [date: string]: IDataProviderHistoricalResponse };
-  }> {
-    try {
-      const symbol = aSymbol;
-
-      const [symbolProfile] =
-        await this.symbolProfileService.getSymbolProfilesBySymbols([symbol]);
-      const { defaultMarketPrice, selector, url } =
-        symbolProfile.scraperConfiguration;
-
-      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 {};
-      }
-
-      const get = bent(url, 'GET', 'string', 200, {});
-
-      const html = await get();
-      const $ = cheerio.load(html);
-
-      const value = extractNumberFromString($(selector).text());
-
-      return {
-        [symbol]: {
-          [format(getYesterday(), DATE_FORMAT)]: {
-            marketPrice: value
-          }
-        }
-      };
-    } catch (error) {
-      throw new Error(
-        `Could not get historical market data for ${aSymbol} (${this.getName()}) from ${format(
-          from,
-          DATE_FORMAT
-        )} to ${format(to, DATE_FORMAT)}: [${error.name}] ${error.message}`
-      );
-    }
-  }
-
-  public getName(): DataSource {
-    return DataSource.GHOSTFOLIO;
-  }
-
-  public async getQuotes(
-    aSymbols: string[]
-  ): Promise<{ [symbol: string]: IDataProviderResponse }> {
-    const response: { [symbol: string]: IDataProviderResponse } = {};
-
-    if (aSymbols.length <= 0) {
-      return response;
-    }
-
-    try {
-      const symbolProfiles =
-        await this.symbolProfileService.getSymbolProfilesBySymbols(aSymbols);
-
-      const marketData = await this.prismaService.marketData.findMany({
-        distinct: ['symbol'],
-        orderBy: {
-          date: 'desc'
-        },
-        take: aSymbols.length,
-        where: {
-          symbol: {
-            in: aSymbols
-          }
-        }
-      });
-
-      for (const symbolProfile of symbolProfiles) {
-        response[symbolProfile.symbol] = {
-          currency: symbolProfile.currency,
-          dataSource: this.getName(),
-          marketPrice: marketData.find((marketDataItem) => {
-            return marketDataItem.symbol === symbolProfile.symbol;
-          }).marketPrice,
-          marketState: 'delayed'
-        };
-      }
-
-      return response;
-    } catch (error) {
-      Logger.error(error, 'GhostfolioScraperApiService');
-    }
-
-    return {};
-  }
-
-  public async search(aQuery: string): Promise<{ items: LookupItem[] }> {
-    const items = await this.prismaService.symbolProfile.findMany({
-      select: {
-        currency: true,
-        dataSource: true,
-        name: true,
-        symbol: true
-      },
-      where: {
-        OR: [
-          {
-            dataSource: this.getName(),
-            name: {
-              mode: 'insensitive',
-              startsWith: aQuery
-            }
-          },
-          {
-            dataSource: this.getName(),
-            symbol: {
-              mode: 'insensitive',
-              startsWith: aQuery
-            }
-          }
-        ]
-      }
-    });
-
-    return { items };
-  }
-}

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

@@ -6,9 +6,18 @@ import {
 } from '@ghostfolio/api/services/interfaces/interfaces';
 import { PrismaService } from '@ghostfolio/api/services/prisma.service';
 import { SymbolProfileService } from '@ghostfolio/api/services/symbol-profile.service';
+import {
+  DATE_FORMAT,
+  extractNumberFromString,
+  getYesterday
+} from '@ghostfolio/common/helper';
 import { Granularity } from '@ghostfolio/common/types';
 import { Injectable, Logger } from '@nestjs/common';
 import { DataSource, SymbolProfile } from '@prisma/client';
+import bent from 'bent';
+import * as cheerio from 'cheerio';
+import { isUUID } from 'class-validator';
+import { addDays, format, isBefore } from 'date-fns';
 
 @Injectable()
 export class ManualService implements DataProviderInterface {
@@ -18,7 +27,7 @@ export class ManualService implements DataProviderInterface {
   ) {}
 
   public canHandle(symbol: string) {
-    return false;
+    return true;
   }
 
   public async getAssetProfile(
@@ -51,9 +60,59 @@ export class ManualService implements DataProviderInterface {
   ): Promise<{
     [symbol: string]: { [date: string]: IDataProviderHistoricalResponse };
   }> {
+    try {
+      const symbol = aSymbol;
+
+      const [symbolProfile] =
+        await this.symbolProfileService.getSymbolProfilesBySymbols([symbol]);
+      const { defaultMarketPrice, selector, url } =
+        symbolProfile.scraperConfiguration ?? {};
+
+      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 {};
       }
 
+      const get = bent(url, 'GET', 'string', 200, {});
+
+      const html = await get();
+      const $ = cheerio.load(html);
+
+      const value = extractNumberFromString($(selector).text());
+
+      return {
+        [symbol]: {
+          [format(getYesterday(), DATE_FORMAT)]: {
+            marketPrice: value
+          }
+        }
+      };
+    } catch (error) {
+      throw new Error(
+        `Could not get historical market data for ${aSymbol} (${this.getName()}) from ${format(
+          from,
+          DATE_FORMAT
+        )} to ${format(to, DATE_FORMAT)}: [${error.name}] ${error.message}`
+      );
+    }
+  }
+
   public getName(): DataSource {
     return DataSource.MANUAL;
   }
@@ -88,10 +147,9 @@ export class ManualService implements DataProviderInterface {
         response[symbolProfile.symbol] = {
           currency: symbolProfile.currency,
           dataSource: this.getName(),
-          marketPrice:
+          marketPrice: marketData.find((marketDataItem) => {
-            marketData.find((marketDataItem) => {
             return marketDataItem.symbol === symbolProfile.symbol;
-            })?.marketPrice ?? 0,
+          })?.marketPrice,
           marketState: 'delayed'
         };
       }
@@ -105,7 +163,7 @@ export class ManualService implements DataProviderInterface {
   }
 
   public async search(aQuery: string): Promise<{ items: LookupItem[] }> {
-    const items = await this.prismaService.symbolProfile.findMany({
+    let items = await this.prismaService.symbolProfile.findMany({
       select: {
         currency: true,
         dataSource: true,
@@ -132,6 +190,11 @@ export class ManualService implements DataProviderInterface {
       }
     });
 
+    items = items.filter(({ symbol }) => {
+      // Remove UUID symbols (activities of type ITEM)
+      return !isUUID(symbol);
+    });
+
     return { items };
   }
 }

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

@@ -441,8 +441,10 @@ export class YahooFinanceService implements DataProviderInterface {
     let name = longName;
 
     if (name) {
+      name = name.replace('Amundi Index Solutions - ', '');
       name = name.replace('iShares ETF (CH) - ', '');
       name = name.replace('iShares III Public Limited Company - ', '');
+      name = name.replace('iShares V PLC - ', '');
       name = name.replace('iShares VI Public Limited Company - ', '');
       name = name.replace('iShares VII PLC - ', '');
       name = name.replace('Multi Units Luxembourg - ', '');

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

@@ -10,7 +10,6 @@ export interface Environment extends CleanedEnvAccessors {
   ENABLE_FEATURE_BLOG: boolean;
   ENABLE_FEATURE_CUSTOM_SYMBOLS: boolean;
   ENABLE_FEATURE_FEAR_AND_GREED_INDEX: boolean;
-  ENABLE_FEATURE_IMPORT: boolean;
   ENABLE_FEATURE_READ_ONLY_MODE: boolean;
   ENABLE_FEATURE_SOCIAL_LOGIN: boolean;
   ENABLE_FEATURE_STATISTICS: boolean;

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

@@ -1,4 +1,4 @@
-import { UniqueAsset } from '@ghostfolio/common/interfaces';
+import { DataProviderInfo, UniqueAsset } from '@ghostfolio/common/interfaces';
 import { MarketState } from '@ghostfolio/common/types';
 import {
   Account,
@@ -28,6 +28,7 @@ export interface IDataProviderHistoricalResponse {
 
 export interface IDataProviderResponse {
   currency: string;
+  dataProviderInfo?: DataProviderInfo;
   dataSource: DataSource;
   marketPrice: number;
   marketState: MarketState;

apps/client/.browserslistrc

@@ -1,18 +0,0 @@
-# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
-# For additional information regarding the format and rule options, please see:
-# https://github.com/browserslist/browserslist#queries
-
-# For the full list of supported browsers by the Angular framework, please see:
-# https://angular.io/guide/browser-support
-
-# You can see what browsers were selected by your queries by running:
-#   npx browserslist
-
-last 1 Chrome version
-last 1 Firefox version
-last 2 Edge major versions
-last 2 Safari major versions
-last 2 iOS major versions
-Firefox ESR
-not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line.
-not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

apps/client/project.json

@@ -65,7 +65,10 @@
             "output": "./../assets/"
           }
         ],
-        "styles": ["apps/client/src/styles.scss"],
+        "styles": [
+          "apps/client/src/styles/theme.scss",
+          "apps/client/src/styles.scss"
+        ],
         "scripts": ["node_modules/marked/marked.min.js"],
         "vendorChunk": true,
         "extractLicenses": false,

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

@@ -123,6 +123,13 @@ const routes: Routes = [
         './pages/blog/2023/01/ghostfolio-auf-sackgeld-vorgestellt/ghostfolio-auf-sackgeld-vorgestellt-page.module'
       ).then((m) => m.GhostfolioAufSackgeldVorgestelltPageModule)
   },
+  {
+    path: 'blog/2023/02/ghostfolio-meets-umbrel',
+    loadChildren: () =>
+      import(
+        './pages/blog/2023/02/ghostfolio-meets-umbrel/ghostfolio-meets-umbrel-page.module'
+      ).then((m) => m.GhostfolioMeetsUmbrelPageModule)
+  },
   {
     path: 'demo',
     loadChildren: () =>
@@ -222,9 +229,8 @@ const routes: Routes = [
       // Preload all lazy loaded modules with the attribute preload === true
       {
         anchorScrolling: 'enabled',
-        preloadingStrategy: ModulePreloadService,
+        preloadingStrategy: ModulePreloadService
         // enableTracing: true // <-- debugging purposes only
-        relativeLinkResolution: 'legacy'
       }
     )
   ],

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

@@ -1,26 +1,17 @@
+import { DOCUMENT } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  Inject,
   OnDestroy,
   OnInit
 } from '@angular/core';
 import { Title } from '@angular/platform-browser';
-import {
+import { NavigationEnd, PRIMARY_OUTLET, Router } from '@angular/router';
-  ActivatedRoute,
-  NavigationEnd,
-  PRIMARY_OUTLET,
-  Router
-} from '@angular/router';
-import {
-  primaryColorHex,
-  secondaryColorHex,
-  warnColorHex
-} from '@ghostfolio/common/config';
 import { InfoItem, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { ColorScheme } from '@ghostfolio/common/types';
-import { MaterialCssVarsService } from 'angular-material-css-vars';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
@@ -52,7 +43,7 @@ export class AppComponent implements OnDestroy, OnInit {
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
     private deviceService: DeviceDetectorService,
-    private materialCssVarsService: MaterialCssVarsService,
+    @Inject(DOCUMENT) private document: Document,
     private router: Router,
     private title: Title,
     private tokenStorageService: TokenStorageService,
@@ -113,7 +104,7 @@ export class AppComponent implements OnDestroy, OnInit {
     this.tokenStorageService.signOut();
     this.userService.remove();
 
-    document.location.href = '/';
+    document.location.href = `/${document.documentElement.lang}`;
   }
 
   public ngOnDestroy() {
@@ -126,16 +117,20 @@ export class AppComponent implements OnDestroy, OnInit {
       ? userPreferredColorScheme === 'DARK'
       : window.matchMedia('(prefers-color-scheme: dark)').matches;
 
-    this.materialCssVarsService.setDarkTheme(isDarkTheme);
+    this.toggleThemeStyleClass(isDarkTheme);
 
     window.matchMedia('(prefers-color-scheme: dark)').addListener((event) => {
       if (!this.user?.settings.colorScheme) {
-        this.materialCssVarsService.setDarkTheme(event.matches);
+        this.toggleThemeStyleClass(event.matches);
       }
     });
+  }
 
-    this.materialCssVarsService.setPrimaryColor(primaryColorHex);
+  private toggleThemeStyleClass(isDarkTheme: boolean) {
-    this.materialCssVarsService.setAccentColor(secondaryColorHex);
+    if (isDarkTheme) {
-    this.materialCssVarsService.setWarnColor(warnColorHex);
+      this.document.body.classList.add('is-dark-theme');
+    } else {
+      this.document.body.classList.remove('is-dark-theme');
+    }
   }
 }

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

@@ -1,20 +1,19 @@
 import { Platform } from '@angular/cdk/platform';
 import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatChipsModule } from '@angular/material/chips';
 import {
   DateAdapter,
   MAT_DATE_FORMATS,
   MAT_DATE_LOCALE,
   MatNativeDateModule
 } from '@angular/material/core';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/material/legacy-autocomplete';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
+import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
+import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ServiceWorkerModule } from '@angular/service-worker';
-import { MaterialCssVarsModule } from 'angular-material-css-vars';
 import { MarkdownModule } from 'ngx-markdown';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { NgxStripeModule, STRIPE_PUBLISHABLE_KEY } from 'ngx-stripe';
@@ -46,11 +45,6 @@ export function NgxStripeFactory(): string {
     MarkdownModule.forRoot(),
     MatAutocompleteModule,
     MatChipsModule,
-    MaterialCssVarsModule.forRoot({
-      darkThemeClass: 'is-dark-theme',
-      isAutoContrast: true,
-      lightThemeClass: 'is-light-theme'
-    }),
     MatNativeDateModule,
     MatSnackBarModule,
     MatTooltipModule,

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

@@ -7,7 +7,7 @@ import {
   OnInit,
   Output
 } from '@angular/core';
-import { MatTableDataSource } from '@angular/material/table';
+import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
 import { DEFAULT_LANGUAGE_CODE } from '@ghostfolio/common/config';
 import { Access } from '@ghostfolio/common/interfaces';
 

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

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatMenuModule } from '@angular/material/menu';
+import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
-import { MatTableModule } from '@angular/material/table';
+import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
 
 import { AccessTableComponent } from './access-table.component';
 

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

@@ -6,7 +6,10 @@ import {
   OnDestroy,
   OnInit
 } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import {
+  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
+  MatLegacyDialogRef as MatDialogRef
+} from '@angular/material/legacy-dialog';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { downloadAsFile } from '@ghostfolio/common/helper';

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

@@ -40,7 +40,6 @@
           [hasPermissionToCreateActivity]="false"
           [hasPermissionToExportActivities]="true"
           [hasPermissionToFilter]="false"
-          [hasPermissionToImportActivities]="false"
           [hasPermissionToOpenDetails]="false"
           [locale]="user?.settings?.locale"
           [showActions]="false"

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

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatDialogModule } from '@angular/material/dialog';
+import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module';
 import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module';
 import { GfActivitiesTableModule } from '@ghostfolio/ui/activities-table/activities-table.module';

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

@@ -9,8 +9,8 @@ import {
   Output,
   ViewChild
 } from '@angular/core';
+import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
 import { MatSort } from '@angular/material/sort';
-import { MatTableDataSource } from '@angular/material/table';
 import { Router } from '@angular/router';
 import { Account as AccountModel } from '@prisma/client';
 import { get } from 'lodash';

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

@@ -1,10 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatInputModule } from '@angular/material/input';
+import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
-import { MatMenuModule } from '@angular/material/menu';
+import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
 import { MatSortModule } from '@angular/material/sort';
-import { MatTableModule } from '@angular/material/table';
 import { RouterModule } from '@angular/router';
 import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module';
 import { GfValueModule } from '@ghostfolio/ui/value';
@@ -20,7 +19,6 @@ import { AccountsTableComponent } from './accounts-table.component';
     GfSymbolIconModule,
     GfValueModule,
     MatButtonModule,
-    MatInputModule,
     MatMenuModule,
     MatSortModule,
     MatTableModule,

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

@@ -1,9 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatMenuModule } from '@angular/material/menu';
+import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
-import { MatSelectModule } from '@angular/material/select';
+import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 
 import { AdminJobsComponent } from './admin-jobs.component';
 

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

@@ -7,7 +7,7 @@ import {
   OnInit,
   Output
 } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import {
   DATE_FORMAT,

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

@@ -6,7 +6,10 @@ import {
   OnDestroy
 } from '@angular/core';
 import { DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import {
+  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
+  MatLegacyDialogRef as MatDialogRef
+} from '@angular/material/legacy-dialog';
 import { AdminService } from '@ghostfolio/client/services/admin.service';
 import { Subject, takeUntil } from 'rxjs';
 

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

@@ -1,6 +1,6 @@
 <form class="d-flex flex-column h-100">
   <h1 i18n mat-dialog-title>Details for {{ data.symbol }}</h1>
-  <div class="flex-grow-1" mat-dialog-content>
+  <div class="flex-grow-1 pt-3" mat-dialog-content>
     <div class="mb-3">
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Date</mat-label>
@@ -11,7 +11,7 @@
           [matDatepicker]="date"
           [(ngModel)]="data.date"
         />
-        <mat-datepicker-toggle matSuffix [for]="date">
+        <mat-datepicker-toggle class="mr-2" matSuffix [for]="date">
           <ion-icon
             class="text-muted"
             matDatepickerToggleIcon
@@ -21,7 +21,7 @@
         <mat-datepicker #date disabled="true"></mat-datepicker>
       </mat-form-field>
     </div>
-    <div>
+    <div class="align-items-start d-flex">
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Market Price</mat-label>
         <input
@@ -30,16 +30,16 @@
           type="number"
           [(ngModel)]="data.marketPrice"
         />
-        <span class="ml-2" matSuffix>{{ data.currency }}</span>
+        <span class="ml-2" matTextSuffix>{{ data.currency }}</span>
+      </mat-form-field>
       <button
-          mat-icon-button
+        class="apply-current-market-price ml-2 no-min-width"
-          matSuffix
+        mat-button
         title="Fetch market price"
         (click)="onFetchSymbolForDate()"
       >
         <ion-icon class="text-muted" name="refresh-outline"></ion-icon>
       </button>
-      </mat-form-field>
     </div>
   </div>
   <div class="justify-content-end" mat-dialog-actions>

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

@@ -1,9 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatDialogModule } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 

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

@@ -4,19 +4,9 @@
   .mat-dialog-content {
     max-height: unset;
 
-    .mat-form-field-appearance-outline {
+    .mat-mdc-button {
-      ::ng-deep {
+      &.apply-current-market-price {
-        .mat-form-field-suffix {
+        height: 56px;
-          top: -0.3rem;
-        }
-
-        .mat-form-field-wrapper {
-          padding-bottom: 0;
-        }
-      }
-
-      ion-icon {
-        font-size: 130%;
       }
     }
   }

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

@@ -6,9 +6,9 @@ import {
   OnInit,
   ViewChild
 } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
 import { MatSort } from '@angular/material/sort';
-import { MatTableDataSource } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
 import { AdminService } from '@ghostfolio/client/services/admin.service';
 import { DataService } from '@ghostfolio/client/services/data.service';

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

@@ -1,13 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatMenuModule } from '@angular/material/menu';
+import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
+import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
 import { MatSortModule } from '@angular/material/sort';
-import { MatTableModule } from '@angular/material/table';
 import { GfActivitiesFilterModule } from '@ghostfolio/ui/activities-filter/activities-filter.module';
 
 import { AdminMarketDataComponent } from './admin-market-data.component';
-import { GfAssetProfileDialogModule } from './asset-profile-dialog/assset-profile-dialog.module';
+import { GfAssetProfileDialogModule } from './asset-profile-dialog/asset-profile-dialog.module';
 
 @NgModule({
   declarations: [AdminMarketDataComponent],

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

@@ -7,7 +7,10 @@ import {
   OnInit
 } from '@angular/core';
 import { FormBuilder } from '@angular/forms';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import {
+  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
+  MatLegacyDialogRef as MatDialogRef
+} from '@angular/material/legacy-dialog';
 import { UpdateAssetProfileDto } from '@ghostfolio/api/app/admin/update-asset-profile.dto';
 import { AdminService } from '@ghostfolio/client/services/admin.service';
 import {

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

@@ -2,10 +2,10 @@ import { TextFieldModule } from '@angular/cdk/text-field';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatDialogModule } from '@angular/material/dialog';
+import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatInputModule } from '@angular/material/input';
+import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
-import { MatMenuModule } from '@angular/material/menu';
+import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
 import { GfAdminMarketDataDetailModule } from '@ghostfolio/client/components/admin-market-data-detail/admin-market-data-detail.module';
 import { GfPortfolioProportionChartModule } from '@ghostfolio/ui/portfolio-proportion-chart/portfolio-proportion-chart.module';
 import { GfValueModule } from '@ghostfolio/ui/value';

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

@@ -1,5 +1,5 @@
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
-import { MatSlideToggleChange } from '@angular/material/slide-toggle';
+import { MatLegacySlideToggleChange as MatSlideToggleChange } from '@angular/material/legacy-slide-toggle';
 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';
@@ -29,7 +29,7 @@ import { takeUntil } from 'rxjs/operators';
   templateUrl: './admin-overview.html'
 })
 export class AdminOverviewComponent implements OnDestroy, OnInit {
-  public couponDuration: StringValue = '30 days';
+  public couponDuration: StringValue = '14 days';
   public coupons: Coupon[];
   public customCurrencies: string[];
   public exchangeRates: { label1: string; label2: string; value: number }[];

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

@@ -151,8 +151,13 @@
           >
             <div class="w-50" i18n>Coupons</div>
             <div class="w-50">
-              <div *ngFor="let coupon of coupons">
+              <table>
-                <span>{{ coupon.code }} ({{ coupon.duration }})</span>
+                <tr *ngFor="let coupon of coupons">
+                  <td class="text-monospace">{{ coupon.code }}</td>
+                  <td class="d-flex justify-content-end pl-2">
+                    {{ coupon.duration }}
+                  </td>
+                  <td>
                     <button
                       class="mini-icon mx-1 no-min-width px-2"
                       mat-button
@@ -160,7 +165,9 @@
                     >
                       <ion-icon name="trash-outline"></ion-icon>
                     </button>
-              </div>
+                  </td>
+                </tr>
+              </table>
               <div class="mt-2">
                 <form #couponForm="ngForm" class="align-items-center d-flex">
                   <mat-form-field

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

@@ -1,10 +1,10 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatCardModule } from '@angular/material/card';
+import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
-import { MatSelectModule } from '@angular/material/select';
+import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatLegacySlideToggleModule as MatSlideToggleModule } from '@angular/material/legacy-slide-toggle';
 import { CacheService } from '@ghostfolio/client/services/cache.service';
 import { GfValueModule } from '@ghostfolio/ui/value';
 

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

@@ -1,7 +1,9 @@
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
-import { AdminData, User } from '@ghostfolio/common/interfaces';
+import { getEmojiFlag } from '@ghostfolio/common/helper';
+import { AdminData, InfoItem, User } from '@ghostfolio/common/interfaces';
+import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import {
   differenceInSeconds,
   formatDistanceToNowStrict,
@@ -16,6 +18,9 @@ import { takeUntil } from 'rxjs/operators';
   templateUrl: './admin-users.html'
 })
 export class AdminUsersComponent implements OnDestroy, OnInit {
+  public getEmojiFlag = getEmojiFlag;
+  public hasPermissionForSubscription: boolean;
+  public info: InfoItem;
   public user: User;
   public users: AdminData['users'];
 
@@ -26,6 +31,13 @@ export class AdminUsersComponent implements OnDestroy, OnInit {
     private dataService: DataService,
     private userService: UserService
   ) {
+    this.info = this.dataService.fetchInfo();
+
+    this.hasPermissionForSubscription = hasPermission(
+      this.info?.globalPermissions,
+      permissions.enableSubscription
+    );
+
     this.userService.stateChanged
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((state) => {

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

@@ -7,7 +7,13 @@
             <tr class="mat-header-row">
               <th class="mat-header-cell px-1 py-2 text-right">#</th>
               <th class="mat-header-cell px-1 py-2" i18n>User</th>
-              <th class="mat-header-cell px-1 py-2 text-right">
+              <th
+                *ngIf="hasPermissionForSubscription"
+                class="mat-header-cell px-1 py-2"
+              >
+                <ng-container i18n>Country</ng-container>
+              </th>
+              <th class="mat-header-cell px-1 py-2">
                 <ng-container i18n>Registration</ng-container>
               </th>
               <th class="mat-header-cell px-1 py-2 text-right">
@@ -16,7 +22,10 @@
               <th class="mat-header-cell px-1 py-2 text-right">
                 <ng-container i18n>Activities</ng-container>
               </th>
-              <th class="mat-header-cell px-1 py-2 text-right">
+              <th
+                *ngIf="hasPermissionForSubscription"
+                class="mat-header-cell px-1 py-2 text-right"
+              >
                 <ng-container i18n>Engagement per Day</ng-container>
               </th>
               <th class="mat-header-cell px-1 py-2" i18n>Last Request</th>
@@ -28,10 +37,10 @@
               <td class="mat-cell px-1 py-2 text-right">{{ i + 1 }}</td>
               <td class="mat-cell px-1 py-2">
                 <div class="d-flex align-items-center">
-                  <span class="d-none d-sm-inline-block"
+                  <span class="d-none d-sm-inline-block text-monospace"
                     >{{ userItem.id }}</span
                   >
-                  <span class="d-inline-block d-sm-none"
+                  <span class="d-inline-block d-sm-none text-monospace"
                     >{{ (userItem.id | slice:0:5) + '...' }}</span
                   >
                   <gf-premium-indicator
@@ -41,7 +50,15 @@
                   ></gf-premium-indicator>
                 </div>
               </td>
-              <td class="mat-cell px-1 py-2 text-right">
+              <td
+                *ngIf="hasPermissionForSubscription"
+                class="mat-cell px-1 py-2"
+              >
+                <span class="h5" [title]="userItem.country"
+                  >{{ getEmojiFlag(userItem.country) }}</span
+                >
+              </td>
+              <td class="mat-cell px-1 py-2">
                 {{ formatDistanceToNow(userItem.createdAt) }}
               </td>
               <td class="mat-cell px-1 py-2 text-right">
@@ -58,7 +75,10 @@
                   [value]="userItem.transactionCount"
                 ></gf-value>
               </td>
-              <td class="mat-cell px-1 py-2 text-right">
+              <td
+                *ngIf="hasPermissionForSubscription"
+                class="mat-cell px-1 py-2 text-right"
+              >
                 <gf-value
                   class="d-inline-block justify-content-end"
                   [locale]="user?.settings?.locale"

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

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatMenuModule } from '@angular/material/menu';
+import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
 import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
 import { GfValueModule } from '@ghostfolio/ui/value';
 

apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts

@@ -27,6 +27,7 @@ import { ColorScheme } from '@ghostfolio/common/types';
 import { SymbolProfile } from '@prisma/client';
 import {
   Chart,
+  ChartData,
   LineController,
   LineElement,
   LinearScale,
@@ -57,7 +58,7 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
 
   @ViewChild('chartCanvas') chartCanvas;
 
-  public chart: Chart<any>;
+  public chart: Chart<'line'>;
 
   public constructor() {
     Chart.register(
@@ -89,14 +90,14 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
   }
 
   private initialize() {
-    const data = {
+    const data: ChartData<'line'> = {
       datasets: [
         {
           backgroundColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`,
           borderColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`,
           borderWidth: 2,
           data: this.performanceDataItems.map(({ date, value }) => {
-            return { x: parseDate(date), y: value };
+            return { x: parseDate(date).getTime(), y: value };
           }),
           label: $localize`Portfolio`
         },
@@ -105,7 +106,7 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
           borderColor: `rgb(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b})`,
           borderWidth: 2,
           data: this.benchmarkDataItems.map(({ date, value }) => {
-            return { x: parseDate(date), y: value };
+            return { x: parseDate(date).getTime(), y: value };
           }),
           label: $localize`Benchmark`
         }

apps/client/src/app/components/benchmark-comparator/benchmark-comparator.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatSelectModule } from '@angular/material/select';
+import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 

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

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 
 import { DialogFooterComponent } from './dialog-footer.component';
 

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

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 
 import { DialogHeaderComponent } from './dialog-header.component';
 

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

@@ -110,11 +110,7 @@
     </button>
     <mat-menu #accountMenu="matMenu" xPosition="before">
       <ng-container *ngIf="user?.access?.length > 0">
-        <button
+        <button mat-menu-item (click)="impersonateAccount(null)">
-          class="align-items-center d-flex"
-          mat-menu-item
-          (click)="impersonateAccount(null)"
-        >
           <ion-icon
             *ngIf="user?.access?.length > 0"
             class="mr-2"
@@ -128,7 +124,6 @@
         </button>
         <button
           *ngFor="let accessItem of user?.access"
-          class="align-items-center d-flex"
           mat-menu-item
           (click)="impersonateAccount(accessItem.id)"
         >
@@ -147,7 +142,7 @@
         <hr class="m-0" />
       </ng-container>
       <a
-        class="d-block d-sm-none"
+        class="d-flex d-sm-none"
         i18n
         mat-menu-item
         [ngClass]="{
@@ -157,7 +152,7 @@
         >Overview</a
       >
       <a
-        class="d-block d-sm-none"
+        class="d-flex d-sm-none"
         i18n
         mat-menu-item
         [ngClass]="{
@@ -167,7 +162,7 @@
         >Portfolio</a
       >
       <a
-        class="d-block d-sm-none"
+        class="d-flex d-sm-none"
         i18n
         mat-menu-item
         [ngClass]="{ 'font-weight-bold': currentRoute === 'accounts' }"
@@ -175,7 +170,6 @@
         >Accounts</a
       >
       <a
-        class="align-items-center d-flex"
         i18n
         mat-menu-item
         [ngClass]="{ 'font-weight-bold': currentRoute === 'account' }"
@@ -184,7 +178,7 @@
       >
       <a
         *ngIf="hasPermissionToAccessAdminControl"
-        class="d-block d-sm-none"
+        class="d-flex d-sm-none"
         i18n
         mat-menu-item
         [ngClass]="{ 'font-weight-bold': currentRoute === 'admin' }"
@@ -193,7 +187,7 @@
       >
       <hr class="m-0" />
       <a
-        class="d-block d-sm-none"
+        class="d-flex d-sm-none"
         i18n
         mat-menu-item
         [ngClass]="{
@@ -206,7 +200,7 @@
         *ngIf="
           hasPermissionForSubscription && user?.subscription?.type === 'Basic'
         "
-        class="d-block d-sm-none"
+        class="d-flex d-sm-none"
         i18n
         mat-menu-item
         [ngClass]="{ 'font-weight-bold': currentRoute === 'pricing' }"
@@ -214,14 +208,14 @@
         >Pricing</a
       >
       <a
-        class="d-block d-sm-none"
+        class="d-flex d-sm-none"
         i18n
         mat-menu-item
         [ngClass]="{ 'font-weight-bold': currentRoute === 'about' }"
         [routerLink]="['/about']"
         >About Ghostfolio</a
       >
-      <hr class="d-block d-sm-none m-0" />
+      <hr class="d-flex d-sm-none m-0" />
       <button mat-menu-item (click)="onSignOut()">Logout</button>
     </mat-menu>
   </ng-container>
@@ -283,9 +277,9 @@
       >Markets</a
     >
     <a
-      class="d-none d-sm-block mx-1 no-min-width px-1"
+      class="d-none d-sm-block no-min-width"
       href="https://github.com/ghostfolio/ghostfolio"
-      mat-flat-button
+      mat-icon-button
       ><ion-icon name="logo-github"></ion-icon
     ></a>
     <button class="mx-1" mat-flat-button (click)="openLoginDialog()">

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

@@ -11,7 +11,9 @@
       flex: 1 1 auto;
     }
 
-    .mat-flat-button {
+    .mdc-button {
+      height: unset;
+
       &:not(.mat-primary) {
         background-color: transparent;
         text-decoration-color: rgba(var(--palette-primary-500), 1) !important;

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

@@ -6,7 +6,7 @@ import {
   OnChanges,
   Output
 } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { Router } from '@angular/router';
 import { LoginWithAccessTokenDialog } from '@ghostfolio/client/components/login-with-access-token-dialog/login-with-access-token-dialog.component';
 import { DataService } from '@ghostfolio/client/services/data.service';

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

@@ -1,5 +1,5 @@
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 import { PositionDetailDialog } from '@ghostfolio/client/components/position/position-detail-dialog/position-detail-dialog.component';
 import { ToggleComponent } from '@ghostfolio/client/components/toggle/toggle.component';

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

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatCardModule } from '@angular/material/card';
+import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { RouterModule } from '@angular/router';
 import { GfPositionDetailDialogModule } from '@ghostfolio/client/components/position/position-detail-dialog/position-detail-dialog.module';
 import { GfPositionsModule } from '@ghostfolio/client/components/positions/positions.module';

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

@@ -1,9 +1,9 @@
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import {
-  MatSnackBar,
+  MatLegacySnackBar as MatSnackBar,
-  MatSnackBarRef,
+  MatLegacySnackBarRef as MatSnackBarRef,
-  TextOnlySnackBar
+  LegacyTextOnlySnackBar as TextOnlySnackBar
-} from '@angular/material/snack-bar';
+} from '@angular/material/legacy-snack-bar';
 import { Router } from '@angular/router';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';

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

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatCardModule } from '@angular/material/card';
+import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { RouterModule } from '@angular/router';
 import { GfPortfolioSummaryModule } from '@ghostfolio/client/components/portfolio-summary/portfolio-summary.module';
 

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

@@ -29,6 +29,7 @@ import {
   BarController,
   BarElement,
   Chart,
+  ChartData,
   LineController,
   LineElement,
   LinearScale,
@@ -62,7 +63,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
 
   @ViewChild('chartCanvas') chartCanvas;
 
-  public chart: Chart<any>;
+  public chart: Chart<'bar' | 'line'>;
   private investments: InvestmentItem[];
   private values: LineChartItem[];
 
@@ -142,7 +143,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
       });
     }
 
-    const chartData = {
+    const chartData: ChartData<'line'> = {
       labels: this.historicalDataItems.map(({ date }) => {
         return parseDate(date);
       }),
@@ -153,7 +154,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
           borderWidth: this.groupBy ? 0 : 1,
           data: this.investments.map(({ date, investment }) => {
             return {
-              x: parseDate(date),
+              x: parseDate(date).getTime(),
               y: this.isInPercent ? investment * 100 : investment
             };
           }),
@@ -173,7 +174,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
           borderWidth: 2,
           data: this.values.map(({ date, value }) => {
             return {
-              x: parseDate(date),
+              x: parseDate(date).getTime(),
               y: this.isInPercent ? value * 100 : value
             };
           }),

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

@@ -1,6 +1,9 @@
 import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
-import { MatCheckboxChange } from '@angular/material/checkbox';
+import { MatLegacyCheckboxChange as MatCheckboxChange } from '@angular/material/legacy-checkbox';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import {
+  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
+  MatLegacyDialogRef as MatDialogRef
+} from '@angular/material/legacy-dialog';
 import { Router } from '@angular/router';
 import { InternetIdentityService } from '@ghostfolio/client/services/internet-identity.service';
 import {

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

@@ -2,11 +2,11 @@ import { TextFieldModule } from '@angular/cdk/text-field';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
-import { MatDialogModule } from '@angular/material/dialog';
+import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatInputModule } from '@angular/material/input';
+import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
 
 import { GfDialogHeaderModule } from '../dialog-header/dialog-header.module';
 import { LoginWithAccessTokenDialog } from './login-with-access-token-dialog.component';

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

@@ -50,7 +50,7 @@ export class PortfolioSummaryComponent implements OnChanges, OnInit {
   public onEditEmergencyFund() {
     const emergencyFundInput = prompt(
       $localize`Please enter the amount of your emergency fund:`,
-      this.summary.emergencyFund.toString()
+      this.summary.emergencyFund?.toString() ?? '0'
     );
     const emergencyFund = parseFloat(emergencyFundInput?.trim());
 

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

@@ -6,10 +6,14 @@ import {
   OnDestroy,
   OnInit
 } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import {
+  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
+  MatLegacyDialogRef as MatDialogRef
+} from '@angular/material/legacy-dialog';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { DATE_FORMAT, downloadAsFile } from '@ghostfolio/common/helper';
 import {
+  DataProviderInfo,
   EnhancedSymbolProfile,
   LineChartItem
 } from '@ghostfolio/common/interfaces';
@@ -37,6 +41,9 @@ export class PositionDetailDialog implements OnDestroy, OnInit {
   public countries: {
     [code: string]: { name: string; value: number };
   };
+  public dataProviderInfo: DataProviderInfo;
+  public dividendInBaseCurrency: number;
+  public feeInBaseCurrency: number;
   public firstBuyDate: string;
   public grossPerformance: number;
   public grossPerformancePercent: number;
@@ -78,6 +85,9 @@ export class PositionDetailDialog implements OnDestroy, OnInit {
       .subscribe(
         ({
           averagePrice,
+          dataProviderInfo,
+          dividendInBaseCurrency,
+          feeInBaseCurrency,
           firstBuyDate,
           grossPerformance,
           grossPerformancePercent,
@@ -98,7 +108,9 @@ export class PositionDetailDialog implements OnDestroy, OnInit {
           this.averagePrice = averagePrice;
           this.benchmarkDataItems = [];
           this.countries = {};
-          this.reportDataGlitchMail = `mailto:hi@ghostfol.io?Subject=Ghostfolio Data Glitch Report&body=Hello%0D%0DI would like to report a data glitch for%0D%0DSymbol: ${SymbolProfile?.symbol}%0DData Source: ${SymbolProfile?.dataSource}%0D%0DAdditional notes:%0D%0DCan you please take a look?%0D%0DKind regards`;
+          this.dataProviderInfo = dataProviderInfo;
+          this.dividendInBaseCurrency = dividendInBaseCurrency;
+          this.feeInBaseCurrency = feeInBaseCurrency;
           this.firstBuyDate = firstBuyDate;
           this.grossPerformance = grossPerformance;
           this.grossPerformancePercent = grossPerformancePercent;
@@ -123,6 +135,7 @@ export class PositionDetailDialog implements OnDestroy, OnInit {
           this.netPerformancePercent = netPerformancePercent;
           this.orders = orders;
           this.quantity = quantity;
+          this.reportDataGlitchMail = `mailto:hi@ghostfol.io?Subject=Ghostfolio Data Glitch Report&body=Hello%0D%0DI would like to report a data glitch for%0D%0DSymbol: ${SymbolProfile?.symbol}%0DData Source: ${SymbolProfile?.dataSource}%0D%0DAdditional notes:%0D%0DCan you please take a look?%0D%0DKind regards`;
           this.sectors = {};
           this.SymbolProfile = SymbolProfile;
           this.tags = tags.map(({ id, name }) => {

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

@@ -119,6 +119,26 @@
           >Investment</gf-value
         >
       </div>
+      <div class="col-6 mb-3">
+        <gf-value
+          i18n
+          size="medium"
+          [currency]="data.baseCurrency"
+          [locale]="data.locale"
+          [value]="dividendInBaseCurrency"
+          >Dividend</gf-value
+        >
+      </div>
+      <div class="col-6 mb-3">
+        <gf-value
+          i18n
+          size="medium"
+          [currency]="data.baseCurrency"
+          [locale]="data.locale"
+          [value]="feeInBaseCurrency"
+          >Fees</gf-value
+        >
+      </div>
       <div class="col-6 mb-3">
         <gf-value
           i18n
@@ -207,6 +227,12 @@
           </div>
         </ng-template>
       </ng-container>
+      <div *ngIf="dataProviderInfo" class="col-md-12 mb-3 text-center">
+        <hr />
+        <gf-data-provider-credits [dataProviderInfos]="[dataProviderInfo]">
+        </gf-data-provider-credits>
+        <hr />
+      </div>
     </div>
 
     <div class="row" [ngClass]="{ 'd-none': !orders?.length }">
@@ -219,7 +245,6 @@
           [hasPermissionToCreateActivity]="false"
           [hasPermissionToExportActivities]="true"
           [hasPermissionToFilter]="false"
-          [hasPermissionToImportActivities]="false"
           [hasPermissionToOpenDetails]="false"
           [locale]="data.locale"
           [showActions]="false"
@@ -230,7 +255,7 @@
     </div>
 
     <div *ngIf="tags?.length > 0" class="row">
-      <div class="col mb-3">
+      <div class="col">
         <div class="h5" i18n>Tags</div>
         <mat-chip-list>
           <mat-chip *ngFor="let tag of tags">{{ tag.name }}</mat-chip>
@@ -242,7 +267,7 @@
       *ngIf="data.hasPermissionToReportDataGlitch === true && orders?.length > 0"
       class="row"
     >
-      <div class="col mb-3">
+      <div class="col">
         <hr />
         <a color="warn" mat-stroked-button [href]="reportDataGlitchMail"
           ><ion-icon class="mr-1" name="flag-outline"></ion-icon

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

@@ -1,11 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatChipsModule } from '@angular/material/chips';
+import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
-import { MatDialogModule } from '@angular/material/dialog';
+import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module';
 import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module';
 import { GfActivitiesTableModule } from '@ghostfolio/ui/activities-table/activities-table.module';
+import { GfDataProviderCreditsModule } from '@ghostfolio/ui/data-provider-credits/data-provider-credits.module';
 import { GfLineChartModule } from '@ghostfolio/ui/line-chart/line-chart.module';
 import { GfPortfolioProportionChartModule } from '@ghostfolio/ui/portfolio-proportion-chart/portfolio-proportion-chart.module';
 import { GfValueModule } from '@ghostfolio/ui/value';
@@ -18,6 +19,7 @@ import { PositionDetailDialog } from './position-detail-dialog.component';
   imports: [
     CommonModule,
     GfActivitiesTableModule,
+    GfDataProviderCreditsModule,
     GfDialogFooterModule,
     GfDialogHeaderModule,
     GfLineChartModule,

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

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatDialogModule } from '@angular/material/dialog';
+import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { RouterModule } from '@angular/router';
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
 import { GfTrendIndicatorModule } from '@ghostfolio/ui/trend-indicator';

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

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';
 
 import { GfPositionModule } from '../position/position.module';

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

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatCardModule } from '@angular/material/card';
+import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { GfRuleModule } from '@ghostfolio/client/components/rule/rule.module';
 import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';
 

apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.component.ts

@@ -1,5 +1,8 @@
 import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import {
+  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
+  MatLegacyDialogRef as MatDialogRef
+} from '@angular/material/legacy-dialog';
 
 import { SubscriptionInterstitialDialogParams } from './interfaces/interfaces';
 
@@ -16,7 +19,7 @@ export class SubscriptionInterstitialDialog {
     public dialogRef: MatDialogRef<SubscriptionInterstitialDialog>
   ) {}
 
-  public onCancel() {
+  public closeDialog() {
     this.dialogRef.close({});
   }
 }

apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.html

@@ -1,6 +1,9 @@
 <h1 class="align-items-center d-flex" mat-dialog-title>
   <span>Ghostfolio Premium</span>
-  <gf-premium-indicator class="ml-1"></gf-premium-indicator>
+  <gf-premium-indicator
+    class="ml-1"
+    [enableLink]="false"
+  ></gf-premium-indicator>
 </h1>
 <div class="flex-grow-1" mat-dialog-content>
   <p class="h5" i18n>
@@ -28,14 +31,19 @@
     </li>
     <li class="align-items-center d-flex mb-1">
       <ion-icon class="mr-1" name="checkmark-circle-outline"></ion-icon>
-      <a i18n [routerLink]="['/features']">and more Features...</a>
+      <span i18n>and more Features...</span>
     </li>
   </ul>
   <p>Refine your personal investment strategy now.</p>
 </div>
 <div class="justify-content-end" mat-dialog-actions>
-  <button i18n mat-button (click)="onCancel()">Skip</button>
+  <button i18n mat-button (click)="closeDialog()">Skip</button>
-  <a color="primary" mat-flat-button [routerLink]="['/pricing']">
+  <a
+    color="primary"
+    mat-flat-button
+    [routerLink]="['/pricing']"
+    (click)="closeDialog()"
+  >
     <span i18n>Upgrade Plan</span>
     <ion-icon class="ml-1" name="arrow-forward-outline"></ion-icon>
   </a>

apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatDialogModule } from '@angular/material/dialog';
+import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { RouterModule } from '@angular/router';
 import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';