Release/1.90.0 (#544)

* Update stage labels

* Release 1.90.0

.gitignore

@@ -23,6 +23,7 @@
 !.vscode/settings.json
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

.travis.yml

@@ -3,9 +3,28 @@ git:
   depth: false
 node_js:
   - 14
-before_script:
-  - yarn
-script:
-  - yarn format:check
-  - yarn test
-  - yarn build:all
+
+services:
+  - docker
+
+cache: yarn
+
+if: (type = pull_request) OR (tag IS present)
+
+jobs:
+  include:
+    - stage: Install dependencies
+      if: type = pull_request
+      script: yarn --frozen-lockfile
+    - stage: Check formatting
+      if: type = pull_request
+      script: yarn format:check
+    - stage: Execute tests
+      if: type = pull_request
+      script: yarn test
+    - stage: Build application
+      if: type = pull_request
+      script: yarn build:all
+    - stage: Build and publish docker image
+      if: tag IS present
+      script: ./publish-docker-image.sh

CHANGELOG.md

@@ -5,6 +5,123 @@ 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.90.0 - 14.12.2021
+
+### Added
+
+- Extended the validation in the import functionality for transactions by checking the currency of the data provider service
+- Added support for cryptocurrency _Uniswap_
+- Set up pipeline for docker build
+
+### Changed
+
+- Removed the default transactions import limit
+- Improved the landing page in dark mode
+
+### Fixed
+
+- Fixed `/bin/sh: prisma: not found` in docker build
+- Added `apk` in `Dockerfile` (`python3 g++ make openssl`)
+
+## 1.89.0 - 11.12.2021
+
+### Added
+
+- Extended the data gathering by symbol endpoint with an optional date
+
+### Changed
+
+- Upgraded `Nx` from version `13.2.2` to `13.3.0`
+- Upgraded `storybook` from version `6.4.0-rc.3` to `6.4.9`
+
+## 1.88.0 - 09.12.2021
+
+### Added
+
+- Added a coupon system
+
+## 1.87.0 - 07.12.2021
+
+### Added
+
+- Supported the management of additional currencies in the admin control panel
+- Introduced the system message
+- Introduced the read only mode
+
+### Changed
+
+- Increased the historical data chart of the _Fear & Greed Index_ (market mood) to 10 days
+- Upgraded `prisma` from version `2.30.2` to `3.6.0`
+
+## 1.86.0 - 04.12.2021
+
+### Added
+
+- Added the historical data chart of the _Fear & Greed Index_ (market mood)
+
+### Changed
+
+- Improved the historical data view in the admin control panel (hide invalid and future dates)
+- Enabled the import functionality for transactions by default
+- Converted the symbols to uppercase to avoid case-sensitive duplicates in the symbol profile model
+
+### Fixed
+
+- Improved the allocations by currency in combination with cash balances
+
+## 1.85.0 - 01.12.2021
+
+### Fixed
+
+- Fixed the data gathering of the _Fear & Greed Index_ (market mood)
+
+## 1.84.0 - 30.11.2021
+
+### Added
+
+- Exposed the data gathering by symbol as an endpoint
+
+## 1.83.0 - 29.11.2021
+
+### Changed
+
+- Removed the experimental API
+
+### Fixed
+
+- Eliminated the redundant storage of historical exchange rates
+
+## 1.82.0 - 28.11.2021
+
+### Added
+
+- Added tabs with routing to the admin control panel
+- Added a new tab to manage historical data to the admin control panel
+
+### Changed
+
+- Introduced tabs with routing to the home page
+
+## 1.81.0 - 27.11.2021
+
+### Added
+
+- Added the value to the position detail dialog
+
+### Changed
+
+- Upgraded `angular` from version `12.2.4` to `13.0.2`
+- Upgraded `angular-material-css-vars` from version `2.1.2` to `3.0.0`
+- Upgraded `nestjs` from version `7.6.18` to `8.2.3`
+- Upgraded `Nx` from version `12.8.0` to `13.2.2`
+- Upgraded `rxjs` from version `6.6.7` to `7.4.0`
+- Upgraded `storybook` from version `6.3.8` to `6.4.0-rc.3`
+
+### Fixed
+
+- Fixed the broken line charts showing value labels if openend from the allocations page
+- Fixed the click event for drafts in the transactions table
+
 ## 1.80.0 - 23.11.2021
 
 ### Added

Dockerfile

@@ -12,7 +12,8 @@ COPY ./package.json package.json
 COPY ./yarn.lock yarn.lock
 COPY ./prisma/schema.prisma prisma/schema.prisma
 
-RUN yarn
+RUN apk add --no-cache python3 g++ make openssl
+RUN yarn install
 
 # See https://github.com/nrwl/nx/issues/6586 for further details
 COPY ./decorate-angular-cli.js decorate-angular-cli.js

angular.json

@@ -1,22 +1,5 @@
 {
   "version": 1,
-  "cli": {
-    "defaultCollection": "@nrwl/nest"
-  },
-  "defaultProject": "api",
-  "schematics": {
-    "@nrwl/angular:application": {
-      "linter": "eslint",
-      "unitTestRunner": "jest",
-      "e2eTestRunner": "cypress"
-    },
-    "@nrwl/angular:library": {
-      "linter": "eslint",
-      "unitTestRunner": "jest"
-    },
-    "@nrwl/nest": {},
-    "@nrwl/angular:component": {}
-  },
   "projects": {
     "api": {
       "root": "apps/api",
@@ -69,7 +52,8 @@
           },
           "outputs": ["coverage/apps/api"]
         }
-      }
+      },
+      "tags": []
     },
     "client": {
       "projectType": "application",
@@ -201,7 +185,8 @@
           },
           "outputs": ["coverage/apps/client"]
         }
-      }
+      },
+      "tags": []
     },
     "client-e2e": {
       "root": "apps/client-e2e",
@@ -221,7 +206,9 @@
             }
           }
         }
-      }
+      },
+      "tags": [],
+      "implicitDependencies": ["client"]
     },
     "common": {
       "root": "libs/common",
@@ -242,7 +229,8 @@
             "passWithNoTests": true
           }
         }
-      }
+      },
+      "tags": []
     },
     "ui": {
       "projectType": "library",
@@ -300,7 +288,8 @@
             }
           }
         }
-      }
+      },
+      "tags": []
     },
     "ui-e2e": {
       "root": "apps/ui-e2e",
@@ -326,7 +315,9 @@
             "lintFilePatterns": ["apps/ui-e2e/**/*.{js,ts}"]
           }
         }
-      }
+      },
+      "tags": [],
+      "implicitDependencies": ["ui"]
     }
   }
 }

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

@@ -1,9 +1,5 @@
 import { Access } from '@ghostfolio/common/interfaces';
-import {
-  getPermissions,
-  hasPermission,
-  permissions
-} from '@ghostfolio/common/permissions';
+import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import type { RequestWithUser } from '@ghostfolio/common/types';
 import {
   Body,
@@ -66,10 +62,7 @@ export class AccessController {
     @Body() data: CreateAccessDto
   ): Promise<AccessModel> {
     if (
-      !hasPermission(
-        getPermissions(this.request.user.role),
-        permissions.createAccess
-      )
+      !hasPermission(this.request.user.permissions, permissions.createAccess)
     ) {
       throw new HttpException(
         getReasonPhrase(StatusCodes.FORBIDDEN),
@@ -86,10 +79,7 @@ export class AccessController {
   @UseGuards(AuthGuard('jwt'))
   public async deleteAccess(@Param('id') id: string): Promise<AccessModule> {
     if (
-      !hasPermission(
-        getPermissions(this.request.user.role),
-        permissions.deleteAccess
-      )
+      !hasPermission(this.request.user.permissions, permissions.deleteAccess)
     ) {
       throw new HttpException(
         getReasonPhrase(StatusCodes.FORBIDDEN),

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

@@ -24,7 +24,7 @@ export class AccessService {
     take?: number;
     cursor?: Prisma.AccessWhereUniqueInput;
     where?: Prisma.AccessWhereInput;
-    orderBy?: Prisma.AccessOrderByInput;
+    orderBy?: Prisma.AccessOrderByWithRelationInput;
   }): Promise<AccessWithGranteeUser[]> {
     const { include, skip, take, cursor, where, orderBy } = params;
 

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

@@ -6,11 +6,7 @@ import {
 } from '@ghostfolio/api/helper/object.helper';
 import { ImpersonationService } from '@ghostfolio/api/services/impersonation.service';
 import { Accounts } from '@ghostfolio/common/interfaces';
-import {
-  getPermissions,
-  hasPermission,
-  permissions
-} from '@ghostfolio/common/permissions';
+import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import type { RequestWithUser } from '@ghostfolio/common/types';
 import {
   Body,
@@ -48,10 +44,7 @@ export class AccountController {
   @UseGuards(AuthGuard('jwt'))
   public async deleteAccount(@Param('id') id: string): Promise<AccountModel> {
     if (
-      !hasPermission(
-        getPermissions(this.request.user.role),
-        permissions.deleteAccount
-      )
+      !hasPermission(this.request.user.permissions, permissions.deleteAccount)
     ) {
       throw new HttpException(
         getReasonPhrase(StatusCodes.FORBIDDEN),
@@ -143,10 +136,7 @@ export class AccountController {
     @Body() data: CreateAccountDto
   ): Promise<AccountModel> {
     if (
-      !hasPermission(
-        getPermissions(this.request.user.role),
-        permissions.createAccount
-      )
+      !hasPermission(this.request.user.permissions, permissions.createAccount)
     ) {
       throw new HttpException(
         getReasonPhrase(StatusCodes.FORBIDDEN),
@@ -183,10 +173,7 @@ export class AccountController {
   @UseGuards(AuthGuard('jwt'))
   public async update(@Param('id') id: string, @Body() data: UpdateAccountDto) {
     if (
-      !hasPermission(
-        getPermissions(this.request.user.role),
-        permissions.updateAccount
-      )
+      !hasPermission(this.request.user.permissions, permissions.updateAccount)
     ) {
       throw new HttpException(
         getReasonPhrase(StatusCodes.FORBIDDEN),

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

@@ -40,7 +40,7 @@ export class AccountService {
     take?: number;
     cursor?: Prisma.AccountWhereUniqueInput;
     where?: Prisma.AccountWhereInput;
-    orderBy?: Prisma.AccountOrderByInput;
+    orderBy?: Prisma.AccountOrderByWithRelationInput;
   }): Promise<
     (Account & {
       Order?: Order[];

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

@@ -1,21 +1,28 @@
 import { DataGatheringService } from '@ghostfolio/api/services/data-gathering.service';
-import { AdminData } from '@ghostfolio/common/interfaces';
+import { PropertyDto } from '@ghostfolio/api/services/property/property.dto';
+import { PropertyService } from '@ghostfolio/api/services/property/property.service';
 import {
-  getPermissions,
-  hasPermission,
-  permissions
-} from '@ghostfolio/common/permissions';
+  AdminData,
+  AdminMarketData,
+  AdminMarketDataDetails
+} from '@ghostfolio/common/interfaces';
+import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import type { RequestWithUser } from '@ghostfolio/common/types';
 import {
+  Body,
   Controller,
   Get,
   HttpException,
   Inject,
+  Param,
   Post,
+  Put,
   UseGuards
 } from '@nestjs/common';
 import { REQUEST } from '@nestjs/core';
 import { AuthGuard } from '@nestjs/passport';
+import { DataSource, MarketData } from '@prisma/client';
+import { isDate, isValid } from 'date-fns';
 import { StatusCodes, getReasonPhrase } from 'http-status-codes';
 
 import { AdminService } from './admin.service';
@@ -33,7 +40,7 @@ export class AdminController {
   public async getAdminData(): Promise<AdminData> {
     if (
       !hasPermission(
-        getPermissions(this.request.user.role),
+        this.request.user.permissions,
         permissions.accessAdminControl
       )
     ) {
@@ -51,7 +58,7 @@ export class AdminController {
   public async gatherMax(): Promise<void> {
     if (
       !hasPermission(
-        getPermissions(this.request.user.role),
+        this.request.user.permissions,
         permissions.accessAdminControl
       )
     ) {
@@ -72,7 +79,7 @@ export class AdminController {
   public async gatherProfileData(): Promise<void> {
     if (
       !hasPermission(
-        getPermissions(this.request.user.role),
+        this.request.user.permissions,
         permissions.accessAdminControl
       )
     ) {
@@ -86,4 +93,121 @@ export class AdminController {
 
     return;
   }
+
+  @Post('gather/:dataSource/:symbol')
+  @UseGuards(AuthGuard('jwt'))
+  public async gatherSymbol(
+    @Param('dataSource') dataSource: DataSource,
+    @Param('symbol') symbol: string
+  ): Promise<void> {
+    if (
+      !hasPermission(
+        this.request.user.permissions,
+        permissions.accessAdminControl
+      )
+    ) {
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.FORBIDDEN),
+        StatusCodes.FORBIDDEN
+      );
+    }
+
+    this.dataGatheringService.gatherSymbol({ dataSource, symbol });
+
+    return;
+  }
+
+  @Post('gather/:dataSource/:symbol/:dateString')
+  @UseGuards(AuthGuard('jwt'))
+  public async gatherSymbolForDate(
+    @Param('dataSource') dataSource: DataSource,
+    @Param('dateString') dateString: string,
+    @Param('symbol') symbol: string
+  ): Promise<MarketData> {
+    if (
+      !hasPermission(
+        this.request.user.permissions,
+        permissions.accessAdminControl
+      )
+    ) {
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.FORBIDDEN),
+        StatusCodes.FORBIDDEN
+      );
+    }
+
+    const date = new Date(dateString);
+
+    if (!isDate(date)) {
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.BAD_REQUEST),
+        StatusCodes.BAD_REQUEST
+      );
+    }
+
+    return this.dataGatheringService.gatherSymbolForDate({
+      dataSource,
+      date,
+      symbol
+    });
+  }
+
+  @Get('market-data')
+  @UseGuards(AuthGuard('jwt'))
+  public async getMarketData(): Promise<AdminMarketData> {
+    if (
+      !hasPermission(
+        this.request.user.permissions,
+        permissions.accessAdminControl
+      )
+    ) {
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.FORBIDDEN),
+        StatusCodes.FORBIDDEN
+      );
+    }
+
+    return this.adminService.getMarketData();
+  }
+
+  @Get('market-data/:symbol')
+  @UseGuards(AuthGuard('jwt'))
+  public async getMarketDataBySymbol(
+    @Param('symbol') symbol
+  ): Promise<AdminMarketDataDetails> {
+    if (
+      !hasPermission(
+        this.request.user.permissions,
+        permissions.accessAdminControl
+      )
+    ) {
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.FORBIDDEN),
+        StatusCodes.FORBIDDEN
+      );
+    }
+
+    return this.adminService.getMarketDataBySymbol(symbol);
+  }
+
+  @Put('settings/:key')
+  @UseGuards(AuthGuard('jwt'))
+  public async updateProperty(
+    @Param('key') key: string,
+    @Body() data: PropertyDto
+  ) {
+    if (
+      !hasPermission(
+        this.request.user.permissions,
+        permissions.accessAdminControl
+      )
+    ) {
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.FORBIDDEN),
+        StatusCodes.FORBIDDEN
+      );
+    }
+
+    return await this.adminService.putSetting(key, data.value);
+  }
 }

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

@@ -3,7 +3,9 @@ import { ConfigurationModule } from '@ghostfolio/api/services/configuration.modu
 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 { MarketDataModule } from '@ghostfolio/api/services/market-data.module';
 import { PrismaModule } from '@ghostfolio/api/services/prisma.module';
+import { PropertyModule } from '@ghostfolio/api/services/property/property.module';
 import { Module } from '@nestjs/common';
 
 import { AdminController } from './admin.controller';
@@ -15,7 +17,9 @@ import { AdminService } from './admin.service';
     DataGatheringModule,
     DataProviderModule,
     ExchangeRateDataModule,
+    MarketDataModule,
     PrismaModule,
+    PropertyModule,
     SubscriptionModule
   ],
   controllers: [AdminController],

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

@@ -2,10 +2,17 @@ import { SubscriptionService } from '@ghostfolio/api/app/subscription/subscripti
 import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
 import { DataGatheringService } from '@ghostfolio/api/services/data-gathering.service';
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
+import { MarketDataService } from '@ghostfolio/api/services/market-data.service';
 import { PrismaService } from '@ghostfolio/api/services/prisma.service';
-import { baseCurrency } from '@ghostfolio/common/config';
-import { AdminData } from '@ghostfolio/common/interfaces';
+import { PropertyService } from '@ghostfolio/api/services/property/property.service';
+import { PROPERTY_CURRENCIES, baseCurrency } from '@ghostfolio/common/config';
+import {
+  AdminData,
+  AdminMarketData,
+  AdminMarketDataDetails
+} from '@ghostfolio/common/interfaces';
 import { Injectable } from '@nestjs/common';
+import { Property } from '@prisma/client';
 import { differenceInDays } from 'date-fns';
 
 @Injectable()
@@ -14,7 +21,9 @@ export class AdminService {
     private readonly configurationService: ConfigurationService,
     private readonly dataGatheringService: DataGatheringService,
     private readonly exchangeRateDataService: ExchangeRateDataService,
+    private readonly marketDataService: MarketDataService,
     private readonly prismaService: PrismaService,
+    private readonly propertyService: PropertyService,
     private readonly subscriptionService: SubscriptionService
   ) {}
 
@@ -39,12 +48,55 @@ export class AdminService {
           };
         }),
       lastDataGathering: await this.getLastDataGathering(),
+      settings: await this.propertyService.get(),
       transactionCount: await this.prismaService.order.count(),
       userCount: await this.prismaService.user.count(),
       users: await this.getUsersWithAnalytics()
     };
   }
 
+  public async getMarketData(): Promise<AdminMarketData> {
+    return {
+      marketData: await (
+        await this.dataGatheringService.getSymbolsMax()
+      ).map((symbol) => {
+        return symbol;
+      })
+    };
+  }
+
+  public async getMarketDataBySymbol(
+    aSymbol: string
+  ): Promise<AdminMarketDataDetails> {
+    return {
+      marketData: await this.marketDataService.marketDataItems({
+        orderBy: {
+          date: 'asc'
+        },
+        where: {
+          symbol: aSymbol
+        }
+      })
+    };
+  }
+
+  public async putSetting(key: string, value: string) {
+    let response: Property;
+
+    if (value === '') {
+      response = await this.propertyService.delete({ key });
+    } else {
+      response = await this.propertyService.put({ key, value });
+    }
+
+    if (key === PROPERTY_CURRENCIES) {
+      await this.exchangeRateDataService.initialize();
+      await this.dataGatheringService.reset();
+    }
+
+    return response;
+  }
+
   private async getLastDataGathering() {
     const lastDataGathering =
       await this.dataGatheringService.getLastDataGathering();

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

@@ -19,7 +19,6 @@ import { AdminModule } from './admin/admin.module';
 import { AppController } from './app.controller';
 import { AuthModule } from './auth/auth.module';
 import { CacheModule } from './cache/cache.module';
-import { ExperimentalModule } from './experimental/experimental.module';
 import { ExportModule } from './export/export.module';
 import { ImportModule } from './import/import.module';
 import { InfoModule } from './info/info.module';
@@ -42,7 +41,6 @@ import { UserModule } from './user/user.module';
     DataGatheringModule,
     DataProviderModule,
     ExchangeRateDataModule,
-    ExperimentalModule,
     ExportModule,
     ImportModule,
     InfoModule,

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

@@ -1,9 +1,5 @@
 import { AuthDeviceService } from '@ghostfolio/api/app/auth-device/auth-device.service';
-import {
-  getPermissions,
-  hasPermission,
-  permissions
-} from '@ghostfolio/common/permissions';
+import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import type { RequestWithUser } from '@ghostfolio/common/types';
 import {
   Controller,
@@ -29,7 +25,7 @@ export class AuthDeviceController {
   public async deleteAuthDevice(@Param('id') id: string): Promise<void> {
     if (
       !hasPermission(
-        getPermissions(this.request.user.role),
+        this.request.user.permissions,
         permissions.deleteAuthDevice
       )
     ) {

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

@@ -23,7 +23,7 @@ export class AuthDeviceService {
     take?: number;
     cursor?: Prisma.AuthDeviceWhereUniqueInput;
     where?: Prisma.AuthDeviceWhereInput;
-    orderBy?: Prisma.AuthDeviceOrderByInput;
+    orderBy?: Prisma.AuthDeviceOrderByWithRelationInput;
   }): Promise<AuthDevice[]> {
     const { skip, take, cursor, where, orderBy } = params;
     return this.prismaService.authDevice.findMany({

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

@@ -1,7 +1,7 @@
 import { AuthDeviceService } from '@ghostfolio/api/app/auth-device/auth-device.service';
 import { WebAuthService } from '@ghostfolio/api/app/auth/web-auth.service';
 import { SubscriptionModule } from '@ghostfolio/api/app/subscription/subscription.module';
-import { UserService } from '@ghostfolio/api/app/user/user.service';
+import { UserModule } from '@ghostfolio/api/app/user/user.module';
 import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
 import { PrismaService } from '@ghostfolio/api/services/prisma.service';
 import { Module } from '@nestjs/common';
@@ -19,7 +19,8 @@ import { JwtStrategy } from './jwt.strategy';
       secret: process.env.JWT_SECRET_KEY,
       signOptions: { expiresIn: '180 days' }
     }),
-    SubscriptionModule
+    SubscriptionModule,
+    UserModule
   ],
   providers: [
     AuthDeviceService,
@@ -28,7 +29,6 @@ import { JwtStrategy } from './jwt.strategy';
     GoogleStrategy,
     JwtStrategy,
     PrismaService,
-    UserService,
     WebAuthService
   ]
 })

apps/api/src/app/experimental/create-order.dto.ts

@@ -1,22 +0,0 @@
-import { Type } from '@prisma/client';
-import { IsISO8601, IsNumber, IsString } from 'class-validator';
-
-export class CreateOrderDto {
-  @IsString()
-  currency: string;
-
-  @IsISO8601()
-  date: string;
-
-  @IsNumber()
-  quantity: number;
-
-  @IsString()
-  symbol: string;
-
-  @IsString()
-  type: Type;
-
-  @IsNumber()
-  unitPrice: number;
-}

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

@@ -1,69 +0,0 @@
-import { baseCurrency, benchmarks } from '@ghostfolio/common/config';
-import { DATE_FORMAT } from '@ghostfolio/common/helper';
-import { isApiTokenAuthorized } from '@ghostfolio/common/permissions';
-import type { RequestWithUser } from '@ghostfolio/common/types';
-import {
-  Body,
-  Controller,
-  Get,
-  Headers,
-  HttpException,
-  Inject,
-  Param,
-  Post
-} from '@nestjs/common';
-import { REQUEST } from '@nestjs/core';
-import { parse } from 'date-fns';
-import { StatusCodes, getReasonPhrase } from 'http-status-codes';
-
-import { CreateOrderDto } from './create-order.dto';
-import { ExperimentalService } from './experimental.service';
-import { Data } from './interfaces/data.interface';
-
-@Controller('experimental')
-export class ExperimentalController {
-  public constructor(
-    private readonly experimentalService: ExperimentalService,
-    @Inject(REQUEST) private readonly request: RequestWithUser
-  ) {}
-
-  @Get('benchmarks')
-  public async getBenchmarks(
-    @Headers('Authorization') apiToken: string
-  ): Promise<string[]> {
-    if (!isApiTokenAuthorized(apiToken)) {
-      throw new HttpException(
-        getReasonPhrase(StatusCodes.FORBIDDEN),
-        StatusCodes.FORBIDDEN
-      );
-    }
-
-    return benchmarks.map(({ symbol }) => {
-      return symbol;
-    });
-  }
-
-  @Get('benchmarks/:symbol')
-  public async getBenchmark(
-    @Headers('Authorization') apiToken: string,
-    @Param('symbol') symbol: string
-  ): Promise<{ date: Date; marketPrice: number }[]> {
-    if (!isApiTokenAuthorized(apiToken)) {
-      throw new HttpException(
-        getReasonPhrase(StatusCodes.FORBIDDEN),
-        StatusCodes.FORBIDDEN
-      );
-    }
-
-    const marketData = await this.experimentalService.getBenchmark(symbol);
-
-    if (marketData?.length === 0) {
-      throw new HttpException(
-        getReasonPhrase(StatusCodes.NOT_FOUND),
-        StatusCodes.NOT_FOUND
-      );
-    }
-
-    return marketData;
-  }
-}

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

@@ -1,23 +0,0 @@
-import { AccountService } from '@ghostfolio/api/app/account/account.service';
-import { RedisCacheModule } from '@ghostfolio/api/app/redis-cache/redis-cache.module';
-import { ConfigurationModule } from '@ghostfolio/api/services/configuration.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 { Module } from '@nestjs/common';
-
-import { ExperimentalController } from './experimental.controller';
-import { ExperimentalService } from './experimental.service';
-
-@Module({
-  imports: [
-    ConfigurationModule,
-    DataProviderModule,
-    ExchangeRateDataModule,
-    RedisCacheModule,
-    PrismaModule
-  ],
-  controllers: [ExperimentalController],
-  providers: [AccountService, ExperimentalService]
-})
-export class ExperimentalModule {}

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

@@ -1,23 +0,0 @@
-import { AccountService } from '@ghostfolio/api/app/account/account.service';
-import { DataProviderService } from '@ghostfolio/api/services/data-provider/data-provider.service';
-import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
-import { PrismaService } from '@ghostfolio/api/services/prisma.service';
-import { Injectable } from '@nestjs/common';
-
-@Injectable()
-export class ExperimentalService {
-  public constructor(
-    private readonly accountService: AccountService,
-    private readonly dataProviderService: DataProviderService,
-    private readonly exchangeRateDataService: ExchangeRateDataService,
-    private readonly prismaService: PrismaService
-  ) {}
-
-  public async getBenchmark(aSymbol: string) {
-    return this.prismaService.marketData.findMany({
-      orderBy: { date: 'asc' },
-      select: { date: true, marketPrice: true },
-      where: { symbol: aSymbol }
-    });
-  }
-}

apps/api/src/app/experimental/interfaces/data.interface.ts

@@ -1,4 +0,0 @@
-export interface Data {
-  currency: string;
-  value: number;
-}

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

@@ -1,4 +1,5 @@
 import { OrderService } from '@ghostfolio/api/app/order/order.service';
+import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
 import { DataProviderService } from '@ghostfolio/api/services/data-provider/data-provider.service';
 import { Injectable } from '@nestjs/common';
 import { Order } from '@prisma/client';
@@ -6,9 +7,8 @@ import { isSameDay, parseISO } from 'date-fns';
 
 @Injectable()
 export class ImportService {
-  private static MAX_ORDERS_TO_IMPORT = 20;
-
   public constructor(
+    private readonly configurationService: ConfigurationService,
     private readonly dataProviderService: DataProviderService,
     private readonly orderService: OrderService
   ) {}
@@ -59,8 +59,14 @@ export class ImportService {
     orders: Partial<Order>[];
     userId: string;
   }) {
-    if (orders?.length > ImportService.MAX_ORDERS_TO_IMPORT) {
-      throw new Error('Too many transactions');
+    if (
+      orders?.length > this.configurationService.get('MAX_ORDERS_TO_IMPORT')
+    ) {
+      throw new Error(
+        `Too many transactions (${this.configurationService.get(
+          'MAX_ORDERS_TO_IMPORT'
+        )} at most)`
+      );
     }
 
     const existingOrders = await this.orderService.orders({
@@ -98,6 +104,12 @@ export class ImportService {
           `orders.${index}.symbol ("${symbol}") is not valid for the specified data source ("${dataSource}")`
         );
       }
+
+      if (result[symbol].currency !== currency) {
+        throw new Error(
+          `orders.${index}.currency ("${currency}") does not match with "${result[symbol].currency}"`
+        );
+      }
     }
   }
 }

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

@@ -5,6 +5,7 @@ import { DataGatheringService } from '@ghostfolio/api/services/data-gathering.se
 import { DataProviderModule } from '@ghostfolio/api/services/data-provider/data-provider.module';
 import { ExchangeRateDataModule } from '@ghostfolio/api/services/exchange-rate-data.module';
 import { PrismaService } from '@ghostfolio/api/services/prisma.service';
+import { PropertyModule } from '@ghostfolio/api/services/property/property.module';
 import { SymbolProfileModule } from '@ghostfolio/api/services/symbol-profile.module';
 import { Module } from '@nestjs/common';
 import { JwtModule } from '@nestjs/jwt';
@@ -21,6 +22,7 @@ import { InfoService } from './info.service';
       secret: process.env.JWT_SECRET_KEY,
       signOptions: { expiresIn: '30 days' }
     }),
+    PropertyModule,
     RedisCacheModule,
     SymbolProfileModule
   ],

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

@@ -4,6 +4,12 @@ import { DataGatheringService } from '@ghostfolio/api/services/data-gathering.se
 import { DataProviderService } from '@ghostfolio/api/services/data-provider/data-provider.service';
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
 import { PrismaService } from '@ghostfolio/api/services/prisma.service';
+import { PropertyService } from '@ghostfolio/api/services/property/property.service';
+import {
+  PROPERTY_IS_READ_ONLY_MODE,
+  PROPERTY_STRIPE_CONFIG,
+  PROPERTY_SYSTEM_MESSAGE
+} from '@ghostfolio/common/config';
 import { InfoItem } from '@ghostfolio/common/interfaces';
 import { Statistics } from '@ghostfolio/common/interfaces/statistics.interface';
 import { Subscription } from '@ghostfolio/common/interfaces/subscription.interface';
@@ -15,8 +21,8 @@ import { subDays } from 'date-fns';
 
 @Injectable()
 export class InfoService {
-  private static DEMO_USER_ID = '9b112b4d-3b7d-4bad-9bdd-3b0f7b4dac2f';
   private static CACHE_KEY_STATISTICS = 'STATISTICS';
+  private static DEMO_USER_ID = '9b112b4d-3b7d-4bad-9bdd-3b0f7b4dac2f';
 
   public constructor(
     private readonly configurationService: ConfigurationService,
@@ -25,15 +31,18 @@ export class InfoService {
     private readonly dataGatheringService: DataGatheringService,
     private readonly jwtService: JwtService,
     private readonly prismaService: PrismaService,
+    private readonly propertyService: PropertyService,
     private readonly redisCacheService: RedisCacheService
   ) {}
 
   public async get(): Promise<InfoItem> {
     const info: Partial<InfoItem> = {};
+    let isReadOnlyMode: boolean;
     const platforms = await this.prismaService.platform.findMany({
       orderBy: { name: 'asc' },
       select: { id: true, name: true }
     });
+    let systemMessage: string;
 
     const globalPermissions: string[] = [];
 
@@ -45,6 +54,12 @@ export class InfoService {
       globalPermissions.push(permissions.enableImport);
     }
 
+    if (this.configurationService.get('ENABLE_FEATURE_READ_ONLY_MODE')) {
+      isReadOnlyMode = (await this.propertyService.getByKey(
+        PROPERTY_IS_READ_ONLY_MODE
+      )) as boolean;
+    }
+
     if (this.configurationService.get('ENABLE_FEATURE_SOCIAL_LOGIN')) {
       globalPermissions.push(permissions.enableSocialLogin);
     }
@@ -59,10 +74,20 @@ export class InfoService {
       info.stripePublicKey = this.configurationService.get('STRIPE_PUBLIC_KEY');
     }
 
+    if (this.configurationService.get('ENABLE_FEATURE_SYSTEM_MESSAGE')) {
+      globalPermissions.push(permissions.enableSystemMessage);
+
+      systemMessage = (await this.propertyService.getByKey(
+        PROPERTY_SYSTEM_MESSAGE
+      )) as string;
+    }
+
     return {
       ...info,
       globalPermissions,
+      isReadOnlyMode,
       platforms,
+      systemMessage,
       currencies: this.exchangeRateDataService.getCurrencies(),
       demoAuthToken: this.getDemoAuthToken(),
       lastDataGathering: await this.getLastDataGathering(),
@@ -222,7 +247,7 @@ export class InfoService {
     }
 
     const stripeConfig = await this.prismaService.property.findUnique({
-      where: { key: 'STRIPE_CONFIG' }
+      where: { key: PROPERTY_STRIPE_CONFIG }
     });
 
     if (stripeConfig) {

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

@@ -1,11 +1,7 @@
 import { UserService } from '@ghostfolio/api/app/user/user.service';
 import { nullifyValuesInObjects } from '@ghostfolio/api/helper/object.helper';
 import { ImpersonationService } from '@ghostfolio/api/services/impersonation.service';
-import {
-  getPermissions,
-  hasPermission,
-  permissions
-} from '@ghostfolio/common/permissions';
+import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import type { RequestWithUser } from '@ghostfolio/common/types';
 import {
   Body,
@@ -43,10 +39,7 @@ export class OrderController {
   @UseGuards(AuthGuard('jwt'))
   public async deleteOrder(@Param('id') id: string): Promise<OrderModel> {
     if (
-      !hasPermission(
-        getPermissions(this.request.user.role),
-        permissions.deleteOrder
-      )
+      !hasPermission(this.request.user.permissions, permissions.deleteOrder)
     ) {
       throw new HttpException(
         getReasonPhrase(StatusCodes.FORBIDDEN),
@@ -115,10 +108,7 @@ export class OrderController {
   @UseGuards(AuthGuard('jwt'))
   public async createOrder(@Body() data: CreateOrderDto): Promise<OrderModel> {
     if (
-      !hasPermission(
-        getPermissions(this.request.user.role),
-        permissions.createOrder
-      )
+      !hasPermission(this.request.user.permissions, permissions.createOrder)
     ) {
       throw new HttpException(
         getReasonPhrase(StatusCodes.FORBIDDEN),
@@ -161,10 +151,7 @@ export class OrderController {
   @UseGuards(AuthGuard('jwt'))
   public async update(@Param('id') id: string, @Body() data: UpdateOrderDto) {
     if (
-      !hasPermission(
-        getPermissions(this.request.user.role),
-        permissions.updateOrder
-      )
+      !hasPermission(this.request.user.permissions, permissions.updateOrder)
     ) {
       throw new HttpException(
         getReasonPhrase(StatusCodes.FORBIDDEN),

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

@@ -28,7 +28,7 @@ export class OrderService {
     take?: number;
     cursor?: Prisma.OrderWhereUniqueInput;
     where?: Prisma.OrderWhereInput;
-    orderBy?: Prisma.OrderOrderByInput;
+    orderBy?: Prisma.OrderOrderByWithRelationInput;
   }): Promise<OrderWithAccount[]> {
     const { include, skip, take, cursor, where, orderBy } = params;
 
@@ -45,19 +45,22 @@ export class OrderService {
   public async createOrder(data: Prisma.OrderCreateInput): Promise<Order> {
     const isDraft = isAfter(data.date as Date, endOfToday());
 
+    // Convert the symbol to uppercase to avoid case-sensitive duplicates
+    const symbol = data.symbol.toUpperCase();
+
     if (!isDraft) {
       // Gather symbol data of order in the background, if not draft
       this.dataGatheringService.gatherSymbols([
         {
+          symbol,
           dataSource: data.dataSource,
-          date: <Date>data.date,
-          symbol: data.symbol
+          date: <Date>data.date
         }
       ]);
     }
 
     this.dataGatheringService.gatherProfileData([
-      { dataSource: data.dataSource, symbol: data.symbol }
+      { symbol, dataSource: data.dataSource }
     ]);
 
     await this.cacheService.flush();
@@ -65,7 +68,8 @@ export class OrderService {
     return this.prismaService.order.create({
       data: {
         ...data,
-        isDraft
+        isDraft,
+        symbol
       }
     });
   }

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

@@ -1,11 +1,11 @@
 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 { DataSource, MarketData } from '@prisma/client';
 
 import { CurrentRateService } from './current-rate.service';
-import { MarketDataService } from './market-data.service';
 
-jest.mock('./market-data.service', () => {
+jest.mock('@ghostfolio/api/services/market-data.service', () => {
   return {
     MarketDataService: jest.fn().mockImplementation(() => {
       return {
@@ -73,7 +73,7 @@ describe('CurrentRateService', () => {
 
   beforeAll(async () => {
     dataProviderService = new DataProviderService(null, [], null);
-    exchangeRateDataService = new ExchangeRateDataService(null, null);
+    exchangeRateDataService = new ExchangeRateDataService(null, null, null);
     marketDataService = new MarketDataService(null);
 
     await exchangeRateDataService.initialize();

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

@@ -1,5 +1,6 @@
 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 { resetHours } from '@ghostfolio/common/helper';
 import { Injectable } from '@nestjs/common';
 import { isBefore, isToday } from 'date-fns';
@@ -8,7 +9,6 @@ import { flatten } from 'lodash';
 import { GetValueObject } from './interfaces/get-value-object.interface';
 import { GetValueParams } from './interfaces/get-value-params.interface';
 import { GetValuesParams } from './interfaces/get-values-params.interface';
-import { MarketDataService } from './market-data.service';
 
 @Injectable()
 export class CurrentRateService {

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

@@ -19,6 +19,7 @@ export interface PortfolioPositionDetail {
   quantity: number;
   symbol: string;
   transactionCount: number;
+  value: number;
 }
 
 export interface HistoricalDataContainer {

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

@@ -516,7 +516,7 @@ export class PortfolioCalculator {
         );
       } else if (!currentPosition.quantity.eq(0)) {
         Logger.error(
-          `Initial value is missing for symbol ${currentPosition.symbol}`
+          `Missing initial value for symbol ${currentPosition.symbol} at ${currentPosition.firstBuyDate}`
         );
         hasErrors = true;
       }

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

@@ -370,7 +370,8 @@ export class PortfolioController {
           'grossPerformance',
           'investment',
           'netPerformance',
-          'quantity'
+          'quantity',
+          'value'
         ]);
       }
 

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

@@ -7,12 +7,12 @@ import { DataGatheringModule } from '@ghostfolio/api/services/data-gathering.mod
 import { DataProviderModule } from '@ghostfolio/api/services/data-provider/data-provider.module';
 import { ExchangeRateDataModule } from '@ghostfolio/api/services/exchange-rate-data.module';
 import { ImpersonationModule } from '@ghostfolio/api/services/impersonation.module';
+import { MarketDataModule } from '@ghostfolio/api/services/market-data.module';
 import { PrismaModule } from '@ghostfolio/api/services/prisma.module';
 import { SymbolProfileModule } from '@ghostfolio/api/services/symbol-profile.module';
 import { Module } from '@nestjs/common';
 
 import { CurrentRateService } from './current-rate.service';
-import { MarketDataService } from './market-data.service';
 import { PortfolioController } from './portfolio.controller';
 import { PortfolioService } from './portfolio.service';
 import { RulesService } from './rules.service';
@@ -26,6 +26,7 @@ import { RulesService } from './rules.service';
     DataProviderModule,
     ExchangeRateDataModule,
     ImpersonationModule,
+    MarketDataModule,
     OrderModule,
     PrismaModule,
     SymbolProfileModule,
@@ -35,7 +36,6 @@ import { RulesService } from './rules.service';
   providers: [
     AccountService,
     CurrentRateService,
-    MarketDataService,
     PortfolioService,
     RulesService
   ]

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

@@ -347,13 +347,17 @@ export class PortfolioService {
       };
     }
 
-    // TODO: Add a cash position for each currency
-    holdings[ghostfolioCashSymbol] = await this.getCashPosition({
+    const cashPositions = await this.getCashPositions({
       cashDetails,
+      userCurrency,
       investment: totalInvestment,
       value: totalValue
     });
 
+    for (const symbol of Object.keys(cashPositions)) {
+      holdings[symbol] = cashPositions[symbol];
+    }
+
     const accounts = await this.getValueOfAccounts(
       orders,
       portfolioItemsNow,
@@ -391,7 +395,8 @@ export class PortfolioService {
         netPerformancePercent: undefined,
         quantity: undefined,
         symbol: aSymbol,
-        transactionCount: undefined
+        transactionCount: undefined,
+        value: undefined
       };
     }
 
@@ -527,7 +532,12 @@ export class PortfolioService {
         historicalData: historicalDataArray,
         netPerformancePercent: position.netPerformancePercentage.toNumber(),
         quantity: quantity.toNumber(),
-        symbol: aSymbol
+        symbol: aSymbol,
+        value: this.exchangeRateDataService.toCurrency(
+          quantity.mul(marketPrice).toNumber(),
+          currency,
+          userCurrency
+        )
       };
     } else {
       const currentData = await this.dataProviderService.get([
@@ -584,7 +594,8 @@ export class PortfolioService {
         netPerformancePercent: undefined,
         quantity: 0,
         symbol: aSymbol,
-        transactionCount: undefined
+        transactionCount: undefined,
+        value: 0
       };
     }
   }
@@ -718,8 +729,8 @@ export class PortfolioService {
         currentNetPerformance,
         currentNetPerformancePercent,
         currentValue,
-        isAllTimeHigh: true, // TODO
-        isAllTimeLow: false // TODO
+        isAllTimeHigh: true,
+        isAllTimeLow: false
       }
     };
   }
@@ -865,39 +876,74 @@ export class PortfolioService {
     };
   }
 
-  private async getCashPosition({
+  private async getCashPositions({
     cashDetails,
     investment,
+    userCurrency,
     value
   }: {
     cashDetails: CashDetails;
     investment: Big;
     value: Big;
+    userCurrency: string;
   }) {
-    const cashValue = new Big(cashDetails.balance);
+    const cashPositions = {};
 
-    return {
-      allocationCurrent: cashValue.div(value).toNumber(),
-      allocationInvestment: cashValue.div(investment).toNumber(),
+    for (const account of cashDetails.accounts) {
+      const convertedBalance = this.exchangeRateDataService.toCurrency(
+        account.balance,
+        account.currency,
+        userCurrency
+      );
+
+      if (convertedBalance === 0) {
+        continue;
+      }
+
+      if (cashPositions[account.currency]) {
+        cashPositions[account.currency].investment += convertedBalance;
+        cashPositions[account.currency].value += convertedBalance;
+      } else {
+        cashPositions[account.currency] = {
+          allocationCurrent: 0,
+          allocationInvestment: 0,
           assetClass: AssetClass.CASH,
           assetSubClass: AssetClass.CASH,
           countries: [],
-      currency: 'CHF',
+          currency: account.currency,
           grossPerformance: 0,
           grossPerformancePercent: 0,
-      investment: cashValue.toNumber(),
+          investment: convertedBalance,
           marketPrice: 0,
           marketState: MarketState.open,
-      name: 'Cash',
+          name: account.currency,
           netPerformance: 0,
           netPerformancePercent: 0,
           quantity: 0,
           sectors: [],
-      symbol: ghostfolioCashSymbol,
+          symbol: account.currency,
           transactionCount: 0,
-      value: cashValue.toNumber()
+          value: convertedBalance
         };
       }
+    }
+
+    for (const symbol of Object.keys(cashPositions)) {
+      // Calculate allocations for each currency
+      cashPositions[symbol].allocationCurrent = new Big(
+        cashPositions[symbol].value
+      )
+        .div(value)
+        .toNumber();
+      cashPositions[symbol].allocationInvestment = new Big(
+        cashPositions[symbol].investment
+      )
+        .div(investment)
+        .toNumber();
+    }
+
+    return cashPositions;
+  }
 
   private getStartDate(aDateRange: DateRange, portfolioStart: Date) {
     switch (aDateRange) {
@@ -990,6 +1036,8 @@ export class PortfolioService {
         userCurrency
       );
       accounts[account.name] = {
+        balance: convertedBalance,
+        currency: account.currency,
         current: convertedBalance,
         original: convertedBalance
       };
@@ -1011,6 +1059,8 @@ export class PortfolioService {
             originalValueOfSymbol;
         } else {
           accounts[order.Account?.name || UNKNOWN_KEY] = {
+            balance: 0,
+            currency: order.Account?.currency,
             current: currentValueOfSymbol,
             original: originalValueOfSymbol
           };

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

@@ -1,4 +1,7 @@
 import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
+import { PropertyService } from '@ghostfolio/api/services/property/property.service';
+import { PROPERTY_COUPONS } from '@ghostfolio/common/config';
+import { Coupon } from '@ghostfolio/common/interfaces';
 import type { RequestWithUser } from '@ghostfolio/common/types';
 import {
   Body,
@@ -14,6 +17,7 @@ import {
 } from '@nestjs/common';
 import { REQUEST } from '@nestjs/core';
 import { AuthGuard } from '@nestjs/passport';
+import { Response } from 'express';
 import { StatusCodes, getReasonPhrase } from 'http-status-codes';
 
 import { SubscriptionService } from './subscription.service';
@@ -22,16 +26,70 @@ import { SubscriptionService } from './subscription.service';
 export class SubscriptionController {
   public constructor(
     private readonly configurationService: ConfigurationService,
+    private readonly propertyService: PropertyService,
     @Inject(REQUEST) private readonly request: RequestWithUser,
     private readonly subscriptionService: SubscriptionService
   ) {}
 
+  @Post('redeem-coupon')
+  @UseGuards(AuthGuard('jwt'))
+  public async redeemCoupon(
+    @Body() { couponCode }: { couponCode: string },
+    @Res() res: Response
+  ) {
+    if (!this.request.user) {
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.FORBIDDEN),
+        StatusCodes.FORBIDDEN
+      );
+    }
+
+    let coupons =
+      ((await this.propertyService.getByKey(PROPERTY_COUPONS)) as Coupon[]) ??
+      [];
+
+    const isValid = coupons.some((coupon) => {
+      return coupon.code === couponCode;
+    });
+
+    if (!isValid) {
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.BAD_REQUEST),
+        StatusCodes.BAD_REQUEST
+      );
+    }
+
+    await this.subscriptionService.createSubscription(this.request.user.id);
+
+    // Destroy coupon
+    coupons = coupons.filter((coupon) => {
+      return coupon.code !== couponCode;
+    });
+    await this.propertyService.put({
+      key: PROPERTY_COUPONS,
+      value: JSON.stringify(coupons)
+    });
+
+    Logger.log(
+      `Subscription for user '${this.request.user.id}' has been created with coupon`
+    );
+
+    res.status(StatusCodes.OK);
+
+    return <any>res.json({
+      message: getReasonPhrase(StatusCodes.OK),
+      statusCode: StatusCodes.OK
+    });
+  }
+
   @Get('stripe/callback')
   public async stripeCallback(@Req() req, @Res() res) {
-    await this.subscriptionService.createSubscription(
+    const userId = await this.subscriptionService.createSubscriptionViaStripe(
       req.query.checkoutSessionId
     );
 
+    Logger.log(`Subscription for user '${userId}' has been created via Stripe`);
+
     res.redirect(`${this.configurationService.get('ROOT_URL')}/account`);
   }
 

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

@@ -1,12 +1,13 @@
 import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
 import { PrismaService } from '@ghostfolio/api/services/prisma.service';
+import { PropertyModule } from '@ghostfolio/api/services/property/property.module';
 import { Module } from '@nestjs/common';
 
 import { SubscriptionController } from './subscription.controller';
 import { SubscriptionService } from './subscription.service';
 
 @Module({
-  imports: [],
+  imports: [PropertyModule],
   controllers: [SubscriptionController],
   providers: [ConfigurationService, PrismaService, SubscriptionService],
   exports: [SubscriptionService]

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

@@ -2,7 +2,7 @@ import { ConfigurationService } from '@ghostfolio/api/services/configuration.ser
 import { PrismaService } from '@ghostfolio/api/services/prisma.service';
 import { SubscriptionType } from '@ghostfolio/common/types/subscription.type';
 import { Injectable, Logger } from '@nestjs/common';
-import { Subscription } from '@prisma/client';
+import { Subscription, User } from '@prisma/client';
 import { addDays, isBefore } from 'date-fns';
 import Stripe from 'stripe';
 
@@ -64,26 +64,32 @@ export class SubscriptionService {
     };
   }
 
-  public async createSubscription(aCheckoutSessionId: string) {
-    try {
-      const session = await this.stripe.checkout.sessions.retrieve(
-        aCheckoutSessionId
-      );
-
+  public async createSubscription(aUserId: string) {
     await this.prismaService.subscription.create({
       data: {
         expiresAt: addDays(new Date(), 365),
         User: {
           connect: {
-              id: session.client_reference_id
+            id: aUserId
           }
         }
       }
     });
+  }
+
+  public async createSubscriptionViaStripe(aCheckoutSessionId: string) {
+    try {
+      const session = await this.stripe.checkout.sessions.retrieve(
+        aCheckoutSessionId
+      );
+
+      await this.createSubscription(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);
     }

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

@@ -1,7 +1,9 @@
+import { HistoricalDataItem } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-position-detail.interface';
 import { DataSource } from '@prisma/client';
 
 export interface SymbolItem {
   currency: string;
   dataSource: DataSource;
+  historicalData: HistoricalDataItem[];
   marketPrice: number;
 }

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

@@ -1,10 +1,12 @@
 import type { RequestWithUser } from '@ghostfolio/common/types';
 import {
   Controller,
+  DefaultValuePipe,
   Get,
   HttpException,
   Inject,
   Param,
+  ParseBoolPipe,
   Query,
   UseGuards
 } from '@nestjs/common';
@@ -51,7 +53,9 @@ export class SymbolController {
   @UseGuards(AuthGuard('jwt'))
   public async getSymbolData(
     @Param('dataSource') dataSource: DataSource,
-    @Param('symbol') symbol: string
+    @Param('symbol') symbol: string,
+    @Query('includeHistoricalData', new DefaultValuePipe(false), ParseBoolPipe)
+    includeHistoricalData: boolean
   ): Promise<SymbolItem> {
     if (!DataSource[dataSource]) {
       throw new HttpException(
@@ -60,7 +64,10 @@ export class SymbolController {
       );
     }
 
-    const result = await this.symbolService.get({ dataSource, symbol });
+    const result = await this.symbolService.get({
+      includeHistoricalData,
+      dataGatheringItem: { dataSource, symbol }
+    });
 
     if (!result || isEmpty(result)) {
       throw new HttpException(

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

@@ -1,5 +1,6 @@
 import { ConfigurationModule } from '@ghostfolio/api/services/configuration.module';
 import { DataProviderModule } from '@ghostfolio/api/services/data-provider/data-provider.module';
+import { MarketDataModule } from '@ghostfolio/api/services/market-data.module';
 import { PrismaModule } from '@ghostfolio/api/services/prisma.module';
 import { Module } from '@nestjs/common';
 
@@ -7,7 +8,12 @@ import { SymbolController } from './symbol.controller';
 import { SymbolService } from './symbol.service';
 
 @Module({
-  imports: [ConfigurationModule, DataProviderModule, PrismaModule],
+  imports: [
+    ConfigurationModule,
+    DataProviderModule,
+    MarketDataModule,
+    PrismaModule
+  ],
   controllers: [SymbolController],
   providers: [SymbolService]
 })

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

@@ -1,8 +1,11 @@
+import { HistoricalDataItem } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-position-detail.interface';
 import { DataProviderService } from '@ghostfolio/api/services/data-provider/data-provider.service';
 import { IDataGatheringItem } from '@ghostfolio/api/services/interfaces/interfaces';
+import { MarketDataService } from '@ghostfolio/api/services/market-data.service';
 import { PrismaService } from '@ghostfolio/api/services/prisma.service';
 import { Injectable, Logger } from '@nestjs/common';
 import { DataSource } from '@prisma/client';
+import { subDays } from 'date-fns';
 
 import { LookupItem } from './interfaces/lookup-item.interface';
 import { SymbolItem } from './interfaces/symbol-item.interface';
@@ -11,16 +14,42 @@ import { SymbolItem } from './interfaces/symbol-item.interface';
 export class SymbolService {
   public constructor(
     private readonly dataProviderService: DataProviderService,
+    private readonly marketDataService: MarketDataService,
     private readonly prismaService: PrismaService
   ) {}
 
-  public async get(dataGatheringItem: IDataGatheringItem): Promise<SymbolItem> {
+  public async get({
+    dataGatheringItem,
+    includeHistoricalData = false
+  }: {
+    dataGatheringItem: IDataGatheringItem;
+    includeHistoricalData?: boolean;
+  }): Promise<SymbolItem> {
     const response = await this.dataProviderService.get([dataGatheringItem]);
     const { currency, marketPrice } = response[dataGatheringItem.symbol] ?? {};
 
     if (dataGatheringItem.dataSource && marketPrice) {
+      let historicalData: HistoricalDataItem[];
+
+      if (includeHistoricalData) {
+        const days = 10;
+
+        const marketData = await this.marketDataService.getRange({
+          dateQuery: { gte: subDays(new Date(), days) },
+          symbols: [dataGatheringItem.symbol]
+        });
+
+        historicalData = marketData.map(({ date, marketPrice }) => {
+          return {
+            date: date.toISOString(),
+            value: marketPrice
+          };
+        });
+      }
+
       return {
         currency,
+        historicalData,
         marketPrice,
         dataSource: dataGatheringItem.dataSource
       };

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

@@ -1,7 +1,10 @@
+import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
+import { PropertyService } from '@ghostfolio/api/services/property/property.service';
+import { PROPERTY_IS_READ_ONLY_MODE } from '@ghostfolio/common/config';
 import { User } from '@ghostfolio/common/interfaces';
 import {
-  getPermissions,
   hasPermission,
+  hasRole,
   permissions
 } from '@ghostfolio/common/permissions';
 import type { RequestWithUser } from '@ghostfolio/common/types';
@@ -20,7 +23,7 @@ import {
 import { REQUEST } from '@nestjs/core';
 import { JwtService } from '@nestjs/jwt';
 import { AuthGuard } from '@nestjs/passport';
-import { Provider } from '@prisma/client';
+import { Provider, Role } from '@prisma/client';
 import { User as UserModel } from '@prisma/client';
 import { StatusCodes, getReasonPhrase } from 'http-status-codes';
 
@@ -34,7 +37,9 @@ import { UserService } from './user.service';
 @Controller('user')
 export class UserController {
   public constructor(
+    private readonly configurationService: ConfigurationService,
     private jwtService: JwtService,
+    private readonly propertyService: PropertyService,
     @Inject(REQUEST) private readonly request: RequestWithUser,
     private readonly userService: UserService
   ) {}
@@ -43,10 +48,7 @@ export class UserController {
   @UseGuards(AuthGuard('jwt'))
   public async deleteUser(@Param('id') id: string): Promise<UserModel> {
     if (
-      !hasPermission(
-        getPermissions(this.request.user.role),
-        permissions.deleteUser
-      ) ||
+      !hasPermission(this.request.user.permissions, permissions.deleteUser) ||
       id === this.request.user.id
     ) {
       throw new HttpException(
@@ -68,6 +70,19 @@ export class UserController {
 
   @Post()
   public async signupUser(): Promise<UserItem> {
+    if (this.configurationService.get('ENABLE_FEATURE_READ_ONLY_MODE')) {
+      const isReadOnlyMode = (await this.propertyService.getByKey(
+        PROPERTY_IS_READ_ONLY_MODE
+      )) as boolean;
+
+      if (isReadOnlyMode) {
+        throw new HttpException(
+          getReasonPhrase(StatusCodes.FORBIDDEN),
+          StatusCodes.FORBIDDEN
+        );
+      }
+    }
+
     const { accessToken, id } = await this.userService.createUser({
       provider: Provider.ANONYMOUS
     });
@@ -85,7 +100,7 @@ export class UserController {
   public async updateUserSetting(@Body() data: UpdateUserSettingDto) {
     if (
       !hasPermission(
-        getPermissions(this.request.user.role),
+        this.request.user.permissions,
         permissions.updateUserSettings
       )
     ) {
@@ -111,7 +126,7 @@ export class UserController {
   public async updateUserSettings(@Body() data: UpdateUserSettingsDto) {
     if (
       !hasPermission(
-        getPermissions(this.request.user.role),
+        this.request.user.permissions,
         permissions.updateUserSettings
       )
     ) {
@@ -127,10 +142,7 @@ export class UserController {
     };
 
     if (
-      hasPermission(
-        getPermissions(this.request.user.role),
-        permissions.updateViewMode
-      )
+      hasPermission(this.request.user.permissions, permissions.updateViewMode)
     ) {
       userSettings.viewMode = data.viewMode;
     }

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

@@ -1,6 +1,7 @@
 import { SubscriptionModule } from '@ghostfolio/api/app/subscription/subscription.module';
 import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
 import { PrismaService } from '@ghostfolio/api/services/prisma.service';
+import { PropertyModule } from '@ghostfolio/api/services/property/property.module';
 import { Module } from '@nestjs/common';
 import { JwtModule } from '@nestjs/jwt';
 
@@ -13,6 +14,7 @@ import { UserService } from './user.service';
       secret: process.env.JWT_SECRET_KEY,
       signOptions: { expiresIn: '30 days' }
     }),
+    PropertyModule,
     SubscriptionModule
   ],
   controllers: [UserController],

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

@@ -1,12 +1,21 @@
 import { SubscriptionService } from '@ghostfolio/api/app/subscription/subscription.service';
 import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
 import { PrismaService } from '@ghostfolio/api/services/prisma.service';
-import { baseCurrency, locale } from '@ghostfolio/common/config';
+import { PropertyService } from '@ghostfolio/api/services/property/property.service';
+import {
+  PROPERTY_IS_READ_ONLY_MODE,
+  baseCurrency,
+  locale
+} from '@ghostfolio/common/config';
 import { User as IUser, UserWithSettings } from '@ghostfolio/common/interfaces';
-import { getPermissions, permissions } from '@ghostfolio/common/permissions';
+import {
+  getPermissions,
+  hasRole,
+  permissions
+} from '@ghostfolio/common/permissions';
 import { SubscriptionType } from '@ghostfolio/common/types/subscription.type';
 import { Injectable } from '@nestjs/common';
-import { Prisma, Provider, User, ViewMode } from '@prisma/client';
+import { Prisma, Provider, Role, User, ViewMode } from '@prisma/client';
 
 import { UserSettingsParams } from './interfaces/user-settings-params.interface';
 import { UserSettings } from './interfaces/user-settings.interface';
@@ -20,6 +29,7 @@ export class UserService {
   public constructor(
     private readonly configurationService: ConfigurationService,
     private readonly prismaService: PrismaService,
+    private readonly propertyService: PropertyService,
     private readonly subscriptionService: SubscriptionService
   ) {}
 
@@ -74,12 +84,32 @@ export class UserService {
 
     const user: UserWithSettings = userFromDatabase;
 
-    const currentPermissions = getPermissions(userFromDatabase.role);
+    let currentPermissions = getPermissions(userFromDatabase.role);
 
     if (this.configurationService.get('ENABLE_FEATURE_FEAR_AND_GREED_INDEX')) {
       currentPermissions.push(permissions.accessFearAndGreedIndex);
     }
 
+    if (this.configurationService.get('ENABLE_FEATURE_READ_ONLY_MODE')) {
+      if (hasRole(user, Role.ADMIN)) {
+        currentPermissions.push(permissions.toggleReadOnlyMode);
+      }
+
+      const isReadOnlyMode = (await this.propertyService.getByKey(
+        PROPERTY_IS_READ_ONLY_MODE
+      )) as boolean;
+
+      if (isReadOnlyMode) {
+        currentPermissions = currentPermissions.filter((permission) => {
+          return !(
+            permission.startsWith('create') ||
+            permission.startsWith('delete') ||
+            permission.startsWith('update')
+          );
+        });
+      }
+    }
+
     user.permissions = currentPermissions;
 
     if (userFromDatabase?.Settings) {
@@ -119,7 +149,7 @@ export class UserService {
     take?: number;
     cursor?: Prisma.UserWhereUniqueInput;
     where?: Prisma.UserWhereInput;
-    orderBy?: Prisma.UserOrderByInput;
+    orderBy?: Prisma.UserOrderByWithRelationInput;
   }): Promise<User[]> {
     const { skip, take, cursor, where, orderBy } = params;
     return this.prismaService.user.findMany({

apps/api/src/main.ts

@@ -20,22 +20,20 @@ async function bootstrap() {
   const port = process.env.PORT || 3333;
   await app.listen(port, () => {
     logLogo();
-    Logger.log(`Listening at http://localhost:${port}`, '', false);
-    Logger.log('', '', false);
+    Logger.log(`Listening at http://localhost:${port}`);
+    Logger.log('');
   });
 }
 
 function logLogo() {
-  Logger.log('   ________               __  ____      ___', '', false);
-  Logger.log('  / ____/ /_  ____  _____/ /_/ __/___  / (_)___', '', false);
-  Logger.log(' / / __/ __ \\/ __ \\/ ___/ __/ /_/ __ \\/ / / __ \\', '', false);
-  Logger.log('/ /_/ / / / / /_/ (__  ) /_/ __/ /_/ / / / /_/ /', '', false);
+  Logger.log('   ________               __  ____      ___');
+  Logger.log('  / ____/ /_  ____  _____/ /_/ __/___  / (_)___');
+  Logger.log(' / / __/ __ \\/ __ \\/ ___/ __/ /_/ __ \\/ / / __ \\');
+  Logger.log('/ /_/ / / / / /_/ (__  ) /_/ __/ /_/ / / / /_/ /');
   Logger.log(
-    `\\____/_/ /_/\\____/____/\\__/_/  \\____/_/_/\\____/ ${environment.version}`,
-    '',
-    false
+    `\\____/_/ /_/\\____/____/\\__/_/  \\____/_/_/\\____/ ${environment.version}`
   );
-  Logger.log('', '', false);
+  Logger.log('');
 }
 
 bootstrap();

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

@@ -2,7 +2,6 @@ import { Injectable } from '@nestjs/common';
 import { DataSource } from '@prisma/client';
 import { bool, cleanEnv, host, json, num, port, str } from 'envalid';
 
-import { environment } from '../environments/environment';
 import { Environment } from './interfaces/environment.interface';
 
 @Injectable()
@@ -18,14 +17,17 @@ export class ConfigurationService {
       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: !environment.production }),
+      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 }),
       ENABLE_FEATURE_SUBSCRIPTION: bool({ default: false }),
+      ENABLE_FEATURE_SYSTEM_MESSAGE: bool({ default: false }),
       GOOGLE_CLIENT_ID: str({ default: 'dummyClientId' }),
       GOOGLE_SECRET: str({ default: 'dummySecret' }),
       JWT_SECRET_KEY: str({}),
       MAX_ITEM_IN_CACHE: num({ default: 9999 }),
+      MAX_ORDERS_TO_IMPORT: num({ default: Number.MAX_SAFE_INTEGER }),
       PORT: port({ default: 3333 }),
       RAKUTEN_RAPID_API_KEY: str({ default: '' }),
       REDIS_HOST: str({ default: 'localhost' }),

apps/api/src/services/cryptocurrency/custom-cryptocurrencies.json

@@ -3,5 +3,6 @@
   "ALGO": "Algorand",
   "AVAX": "Avalanche",
   "MATIC": "Polygon",
-  "SHIB": "Shiba Inu"
+  "SHIB": "Shiba Inu",
+  "UNI3": "Uniswap"
 }

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

@@ -1,11 +1,12 @@
 import { SymbolProfileService } from '@ghostfolio/api/services/symbol-profile.service';
 import {
-  benchmarks,
+  PROPERTY_LAST_DATA_GATHERING,
+  PROPERTY_LOCKED_DATA_GATHERING,
   ghostfolioFearAndGreedIndexSymbol
 } from '@ghostfolio/common/config';
 import { DATE_FORMAT, resetHours } from '@ghostfolio/common/helper';
 import { Inject, Injectable, Logger } from '@nestjs/common';
-import { DataSource } from '@prisma/client';
+import { DataSource, MarketData } from '@prisma/client';
 import {
   differenceInHours,
   format,
@@ -46,7 +47,7 @@ export class DataGatheringService {
 
       await this.prismaService.property.create({
         data: {
-          key: 'LOCKED_DATA_GATHERING',
+          key: PROPERTY_LOCKED_DATA_GATHERING,
           value: new Date().toISOString()
         }
       });
@@ -58,11 +59,11 @@ export class DataGatheringService {
 
         await this.prismaService.property.upsert({
           create: {
-            key: 'LAST_DATA_GATHERING',
+            key: PROPERTY_LAST_DATA_GATHERING,
             value: new Date().toISOString()
           },
           update: { value: new Date().toISOString() },
-          where: { key: 'LAST_DATA_GATHERING' }
+          where: { key: PROPERTY_LAST_DATA_GATHERING }
         });
       } catch (error) {
         Logger.error(error);
@@ -70,7 +71,7 @@ export class DataGatheringService {
 
       await this.prismaService.property.delete({
         where: {
-          key: 'LOCKED_DATA_GATHERING'
+          key: PROPERTY_LOCKED_DATA_GATHERING
         }
       });
 
@@ -81,7 +82,7 @@ export class DataGatheringService {
 
   public async gatherMax() {
     const isDataGatheringLocked = await this.prismaService.property.findUnique({
-      where: { key: 'LOCKED_DATA_GATHERING' }
+      where: { key: PROPERTY_LOCKED_DATA_GATHERING }
     });
 
     if (!isDataGatheringLocked) {
@@ -90,7 +91,7 @@ export class DataGatheringService {
 
       await this.prismaService.property.create({
         data: {
-          key: 'LOCKED_DATA_GATHERING',
+          key: PROPERTY_LOCKED_DATA_GATHERING,
           value: new Date().toISOString()
         }
       });
@@ -102,11 +103,11 @@ export class DataGatheringService {
 
         await this.prismaService.property.upsert({
           create: {
-            key: 'LAST_DATA_GATHERING',
+            key: PROPERTY_LAST_DATA_GATHERING,
             value: new Date().toISOString()
           },
           update: { value: new Date().toISOString() },
-          where: { key: 'LAST_DATA_GATHERING' }
+          where: { key: PROPERTY_LAST_DATA_GATHERING }
         });
       } catch (error) {
         Logger.error(error);
@@ -114,7 +115,7 @@ export class DataGatheringService {
 
       await this.prismaService.property.delete({
         where: {
-          key: 'LOCKED_DATA_GATHERING'
+          key: PROPERTY_LOCKED_DATA_GATHERING
         }
       });
 
@@ -123,6 +124,101 @@ export class DataGatheringService {
     }
   }
 
+  public async gatherSymbol({
+    dataSource,
+    symbol
+  }: {
+    dataSource: DataSource;
+    symbol: string;
+  }) {
+    const isDataGatheringLocked = await this.prismaService.property.findUnique({
+      where: { key: PROPERTY_LOCKED_DATA_GATHERING }
+    });
+
+    if (!isDataGatheringLocked) {
+      Logger.log(`Symbol data gathering for ${symbol} has been started.`);
+      console.time('data-gathering-symbol');
+
+      await this.prismaService.property.create({
+        data: {
+          key: PROPERTY_LOCKED_DATA_GATHERING,
+          value: new Date().toISOString()
+        }
+      });
+
+      const symbols = (await this.getSymbolsMax()).filter(
+        (dataGatheringItem) => {
+          return (
+            dataGatheringItem.dataSource === dataSource &&
+            dataGatheringItem.symbol === symbol
+          );
+        }
+      );
+
+      try {
+        await this.gatherSymbols(symbols);
+
+        await this.prismaService.property.upsert({
+          create: {
+            key: PROPERTY_LAST_DATA_GATHERING,
+            value: new Date().toISOString()
+          },
+          update: { value: new Date().toISOString() },
+          where: { key: PROPERTY_LAST_DATA_GATHERING }
+        });
+      } catch (error) {
+        Logger.error(error);
+      }
+
+      await this.prismaService.property.delete({
+        where: {
+          key: PROPERTY_LOCKED_DATA_GATHERING
+        }
+      });
+
+      Logger.log(`Symbol data gathering for ${symbol} has been completed.`);
+      console.timeEnd('data-gathering-symbol');
+    }
+  }
+
+  public async gatherSymbolForDate({
+    dataSource,
+    date,
+    symbol
+  }: {
+    dataSource: DataSource;
+    date: Date;
+    symbol: string;
+  }) {
+    try {
+      const historicalData = await this.dataProviderService.getHistoricalRaw(
+        [{ dataSource, symbol }],
+        date,
+        date
+      );
+
+      const marketPrice =
+        historicalData[symbol][format(date, DATE_FORMAT)].marketPrice;
+
+      if (marketPrice) {
+        return await this.prismaService.marketData.upsert({
+          create: {
+            dataSource,
+            date,
+            marketPrice,
+            symbol
+          },
+          update: { marketPrice },
+          where: { date_symbol: { date, symbol } }
+        });
+      }
+    } catch (error) {
+      Logger.error(error);
+    } finally {
+      return undefined;
+    }
+  }
+
   public async gatherProfileData(aDataGatheringItems?: IDataGatheringItem[]) {
     Logger.log('Profile data gathering has been started.');
     console.time('data-gathering-profile');
@@ -297,13 +393,13 @@ export class DataGatheringService {
 
   public async getIsInProgress() {
     return await this.prismaService.property.findUnique({
-      where: { key: 'LOCKED_DATA_GATHERING' }
+      where: { key: PROPERTY_LOCKED_DATA_GATHERING }
     });
   }
 
   public async getLastDataGathering() {
     const lastDataGathering = await this.prismaService.property.findUnique({
-      where: { key: 'LAST_DATA_GATHERING' }
+      where: { key: PROPERTY_LAST_DATA_GATHERING }
     });
 
     if (lastDataGathering?.value) {
@@ -313,18 +409,17 @@ export class DataGatheringService {
     return undefined;
   }
 
-  public async reset() {
-    Logger.log('Data gathering has been reset.');
+  public async getSymbolsMax(): Promise<IDataGatheringItem[]> {
+    const startDate =
+      (
+        await this.prismaService.order.findFirst({
+          orderBy: [{ date: 'asc' }]
+        })
+      )?.date ?? new Date();
 
-    await this.prismaService.property.deleteMany({
-      where: {
-        OR: [{ key: 'LAST_DATA_GATHERING' }, { key: 'LOCKED_DATA_GATHERING' }]
-      }
-    });
-  }
-
-  private getBenchmarksToGather(startDate: Date): IDataGatheringItem[] {
-    const benchmarksToGather = benchmarks.map(({ dataSource, symbol }) => {
+    const currencyPairsToGather = this.exchangeRateDataService
+      .getCurrencyPairs()
+      .map(({ dataSource, symbol }) => {
         return {
           dataSource,
           symbol,
@@ -332,6 +427,50 @@ export class DataGatheringService {
         };
       });
 
+    const symbolProfilesToGather = (
+      await this.prismaService.symbolProfile.findMany({
+        orderBy: [{ symbol: 'asc' }],
+        select: {
+          dataSource: true,
+          Order: {
+            orderBy: [{ date: 'asc' }],
+            select: { date: true },
+            take: 1
+          },
+          scraperConfiguration: true,
+          symbol: true
+        }
+      })
+    ).map((symbolProfile) => {
+      return {
+        ...symbolProfile,
+        date: symbolProfile.Order?.[0]?.date ?? startDate
+      };
+    });
+
+    return [
+      ...this.getBenchmarksToGather(startDate),
+      ...currencyPairsToGather,
+      ...symbolProfilesToGather
+    ];
+  }
+
+  public async reset() {
+    Logger.log('Data gathering has been reset.');
+
+    await this.prismaService.property.deleteMany({
+      where: {
+        OR: [
+          { key: PROPERTY_LAST_DATA_GATHERING },
+          { key: PROPERTY_LOCKED_DATA_GATHERING }
+        ]
+      }
+    });
+  }
+
+  private getBenchmarksToGather(startDate: Date): IDataGatheringItem[] {
+    const benchmarksToGather: IDataGatheringItem[] = [];
+
     if (this.configurationService.get('ENABLE_FEATURE_FEAR_AND_GREED_INDEX')) {
       benchmarksToGather.push({
         dataSource: DataSource.RAKUTEN,
@@ -379,52 +518,6 @@ export class DataGatheringService {
     ];
   }
 
-  private async getSymbolsMax(): Promise<IDataGatheringItem[]> {
-    const startDate =
-      (
-        await this.prismaService.order.findFirst({
-          orderBy: [{ date: 'asc' }]
-        })
-      )?.date ?? new Date();
-
-    const currencyPairsToGather = this.exchangeRateDataService
-      .getCurrencyPairs()
-      .map(({ dataSource, symbol }) => {
-        return {
-          dataSource,
-          symbol,
-          date: startDate
-        };
-      });
-
-    const symbolProfilesToGather = (
-      await this.prismaService.symbolProfile.findMany({
-        orderBy: [{ symbol: 'asc' }],
-        select: {
-          dataSource: true,
-          Order: {
-            orderBy: [{ date: 'asc' }],
-            select: { date: true },
-            take: 1
-          },
-          scraperConfiguration: true,
-          symbol: true
-        }
-      })
-    ).map((symbolProfile) => {
-      return {
-        ...symbolProfile,
-        date: symbolProfile.Order?.[0]?.date ?? startDate
-      };
-    });
-
-    return [
-      ...this.getBenchmarksToGather(startDate),
-      ...currencyPairsToGather,
-      ...symbolProfilesToGather
-    ];
-  }
-
   private async getSymbolsProfileData(): Promise<IDataGatheringItem[]> {
     const startDate = subDays(resetHours(new Date()), 7);
 
@@ -448,7 +541,7 @@ export class DataGatheringService {
     const lastDataGathering = await this.getLastDataGathering();
 
     const isDataGatheringLocked = await this.prismaService.property.findUnique({
-      where: { key: 'LOCKED_DATA_GATHERING' }
+      where: { key: PROPERTY_LOCKED_DATA_GATHERING }
     });
 
     const diffInHours = differenceInHours(new Date(), lastDataGathering);

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

@@ -11,7 +11,7 @@ import { DATE_FORMAT } from '@ghostfolio/common/helper';
 import { Granularity } from '@ghostfolio/common/types';
 import { Inject, Injectable, Logger } from '@nestjs/common';
 import { DataSource, MarketData } from '@prisma/client';
-import { format } from 'date-fns';
+import { format, isValid } from 'date-fns';
 import { isEmpty } from 'lodash';
 
 @Injectable()
@@ -62,7 +62,7 @@ export class DataProviderService {
       [symbol: string]: { [date: string]: IDataProviderHistoricalResponse };
     } = {};
 
-    if (isEmpty(aItems)) {
+    if (isEmpty(aItems) || !isValid(from) || !isValid(to)) {
       return response;
     }
 
@@ -96,7 +96,7 @@ export class DataProviderService {
                         ORDER BY date;`;
 
       const marketDataByGranularity: MarketData[] =
-        await this.prismaService.$queryRaw(queryRaw);
+        await this.prismaService.$queryRawUnsafe(queryRaw);
 
       response = marketDataByGranularity.reduce((r, marketData) => {
         const { date, marketPrice, symbol } = marketData;

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

@@ -2,12 +2,7 @@ import { LookupItem } from '@ghostfolio/api/app/symbol/interfaces/lookup-item.in
 import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
 import { PrismaService } from '@ghostfolio/api/services/prisma.service';
 import { ghostfolioFearAndGreedIndexSymbol } from '@ghostfolio/common/config';
-import {
-  DATE_FORMAT,
-  getToday,
-  getYesterday,
-  isRakutenRapidApiSymbol
-} from '@ghostfolio/common/helper';
+import { DATE_FORMAT, getToday, getYesterday } from '@ghostfolio/common/helper';
 import { Granularity } from '@ghostfolio/common/types';
 import { Injectable, Logger } from '@nestjs/common';
 import { DataSource } from '@prisma/client';
@@ -31,10 +26,7 @@ export class RakutenRapidApiService implements DataProviderInterface {
   ) {}
 
   public canHandle(symbol: string) {
-    return (
-      isRakutenRapidApiSymbol(symbol) &&
-      !!this.configurationService.get('RAKUTEN_RAPID_API_KEY')
-    );
+    return !!this.configurationService.get('RAKUTEN_RAPID_API_KEY');
   }
 
   public async get(

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

@@ -8,7 +8,7 @@ import { AssetClass, AssetSubClass, DataSource } from '@prisma/client';
 import * as bent from 'bent';
 import Big from 'big.js';
 import { countries } from 'countries-list';
-import { format } from 'date-fns';
+import { addDays, format, isSameDay } from 'date-fns';
 import * as yahooFinance from 'yahoo-finance';
 
 import {
@@ -135,6 +135,10 @@ export class YahooFinanceService implements DataProviderInterface {
       return {};
     }
 
+    if (isSameDay(from, to)) {
+      to = addDays(to, 1);
+    }
+
     const yahooFinanceSymbols = aSymbols.map((symbol) => {
       return this.convertToYahooFinanceSymbol(symbol);
     });

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

@@ -3,9 +3,10 @@ import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-
 import { Module } from '@nestjs/common';
 
 import { PrismaModule } from './prisma.module';
+import { PropertyModule } from './property/property.module';
 
 @Module({
-  imports: [DataProviderModule, PrismaModule],
+  imports: [DataProviderModule, PrismaModule, PropertyModule],
   providers: [ExchangeRateDataService],
   exports: [ExchangeRateDataService]
 })

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

@@ -1,13 +1,13 @@
-import { baseCurrency } from '@ghostfolio/common/config';
+import { PROPERTY_CURRENCIES, baseCurrency } from '@ghostfolio/common/config';
 import { DATE_FORMAT, getYesterday } from '@ghostfolio/common/helper';
 import { Injectable, Logger } from '@nestjs/common';
-import { DataSource } from '@prisma/client';
 import { format } from 'date-fns';
 import { isEmpty, isNumber, uniq } from 'lodash';
 
 import { DataProviderService } from './data-provider/data-provider.service';
 import { IDataGatheringItem } from './interfaces/interfaces';
 import { PrismaService } from './prisma.service';
+import { PropertyService } from './property/property.service';
 
 @Injectable()
 export class ExchangeRateDataService {
@@ -17,7 +17,8 @@ export class ExchangeRateDataService {
 
   public constructor(
     private readonly dataProviderService: DataProviderService,
-    private readonly prismaService: PrismaService
+    private readonly prismaService: PrismaService,
+    private readonly propertyService: PropertyService
   ) {
     this.initialize();
   }
@@ -40,7 +41,10 @@ export class ExchangeRateDataService {
       currency2,
       dataSource
     } of this.prepareCurrencyPairs(this.currencies)) {
-      this.addCurrencyPairs({ currency1, currency2, dataSource });
+      this.currencyPairs.push({
+        dataSource,
+        symbol: `${currency1}${currency2}`
+      });
     }
 
     await this.loadCurrencies();
@@ -86,7 +90,7 @@ export class ExchangeRateDataService {
       };
     });
 
-    this.currencyPairs.forEach(({ symbol }) => {
+    Object.keys(resultExtended).forEach((symbol) => {
       const [currency1, currency2] = symbol.match(/.{1,3}/g);
       const date = format(getYesterday(), DATE_FORMAT);
 
@@ -146,27 +150,8 @@ export class ExchangeRateDataService {
     return aValue;
   }
 
-  private addCurrencyPairs({
-    currency1,
-    currency2,
-    dataSource
-  }: {
-    currency1: string;
-    currency2: string;
-    dataSource: DataSource;
-  }) {
-    this.currencyPairs.push({
-      dataSource,
-      symbol: `${currency1}${currency2}`
-    });
-    this.currencyPairs.push({
-      dataSource,
-      symbol: `${currency2}${currency1}`
-    });
-  }
-
   private async prepareCurrencies(): Promise<string[]> {
-    const currencies: string[] = [];
+    let currencies: string[] = [];
 
     (
       await this.prismaService.account.findMany({
@@ -198,6 +183,14 @@ export class ExchangeRateDataService {
       currencies.push(symbolProfile.currency);
     });
 
+    const customCurrencies = (await this.propertyService.getByKey(
+      PROPERTY_CURRENCIES
+    )) as string[];
+
+    if (customCurrencies?.length > 0) {
+      currencies = currencies.concat(customCurrencies);
+    }
+
     return uniq(currencies).sort();
   }
 

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

@@ -9,13 +9,16 @@ export interface Environment extends CleanedEnvAccessors {
   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;
   ENABLE_FEATURE_SUBSCRIPTION: boolean;
+  ENABLE_FEATURE_SYSTEM_MESSAGE: boolean;
   GOOGLE_CLIENT_ID: string;
   GOOGLE_SECRET: string;
   JWT_SECRET_KEY: string;
   MAX_ITEM_IN_CACHE: number;
+  MAX_ORDERS_TO_IMPORT: number;
   PORT: number;
   RAKUTEN_RAPID_API_KEY: string;
   REDIS_HOST: string;

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

@@ -0,0 +1,11 @@
+import { PrismaModule } from '@ghostfolio/api/services/prisma.module';
+import { Module } from '@nestjs/common';
+
+import { MarketDataService } from './market-data.service';
+
+@Module({
+  exports: [MarketDataService],
+  imports: [PrismaModule],
+  providers: [MarketDataService]
+})
+export class MarketDataModule {}

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

@@ -1,9 +1,8 @@
+import { DateQuery } from '@ghostfolio/api/app/portfolio/interfaces/date-query.interface';
 import { PrismaService } from '@ghostfolio/api/services/prisma.service';
 import { resetHours } from '@ghostfolio/common/helper';
 import { Injectable } from '@nestjs/common';
-import { MarketData } from '@prisma/client';
-
-import { DateQuery } from './interfaces/date-query.interface';
+import { MarketData, Prisma } from '@prisma/client';
 
 @Injectable()
 export class MarketDataService {
@@ -48,4 +47,22 @@ export class MarketDataService {
       }
     });
   }
+
+  public async marketDataItems(params: {
+    skip?: number;
+    take?: number;
+    cursor?: Prisma.MarketDataWhereUniqueInput;
+    where?: Prisma.MarketDataWhereInput;
+    orderBy?: Prisma.MarketDataOrderByWithRelationInput;
+  }): Promise<MarketData[]> {
+    const { skip, take, cursor, where, orderBy } = params;
+
+    return this.prismaService.marketData.findMany({
+      cursor,
+      orderBy,
+      skip,
+      take,
+      where
+    });
+  }
 }

apps/api/src/services/property/property.dto.ts

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

apps/api/src/services/property/property.module.ts

@@ -0,0 +1,11 @@
+import { PrismaModule } from '@ghostfolio/api/services/prisma.module';
+import { Module } from '@nestjs/common';
+
+import { PropertyService } from './property.service';
+
+@Module({
+  exports: [PropertyService],
+  imports: [PrismaModule],
+  providers: [PropertyService]
+})
+export class PropertyModule {}

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

@@ -0,0 +1,49 @@
+import { PrismaService } from '@ghostfolio/api/services/prisma.service';
+import { PROPERTY_CURRENCIES } from '@ghostfolio/common/config';
+import { Injectable } from '@nestjs/common';
+
+@Injectable()
+export class PropertyService {
+  public constructor(private readonly prismaService: PrismaService) {}
+
+  public async delete({ key }: { key: string }) {
+    return this.prismaService.property.delete({
+      where: { key }
+    });
+  }
+
+  public async get() {
+    const response: {
+      [key: string]: boolean | object | string | string[];
+    } = {
+      [PROPERTY_CURRENCIES]: []
+    };
+
+    const properties = await this.prismaService.property.findMany();
+
+    for (const property of properties) {
+      let value = property.value;
+
+      try {
+        value = JSON.parse(property.value);
+      } catch {}
+
+      response[property.key] = value;
+    }
+
+    return response;
+  }
+
+  public async getByKey(aKey: string) {
+    const properties = await this.get();
+    return properties?.[aKey];
+  }
+
+  public async put({ key, value }: { key: string; value: string }) {
+    return this.prismaService.property.upsert({
+      create: { key, value },
+      update: { value },
+      where: { key }
+    });
+  }
+}

apps/api/tsconfig.app.json

@@ -6,6 +6,6 @@
     "emitDecoratorMetadata": true,
     "target": "es2015"
   },
-  "exclude": ["**/*.spec.ts"],
+  "exclude": ["**/*.spec.ts", "**/*.test.ts"],
   "include": ["**/*.ts"]
 }

apps/api/tsconfig.spec.json

@@ -5,5 +5,5 @@
     "module": "commonjs",
     "types": ["jest", "node"]
   },
-  "include": ["**/*.spec.ts", "**/*.d.ts"]
+  "include": ["**/*.spec.ts", "**/*.test.ts", "**/*.d.ts"]
 }

apps/client/jest.config.js

@@ -14,5 +14,8 @@ module.exports = {
     'jest-preset-angular/build/serializers/ng-snapshot',
     'jest-preset-angular/build/serializers/html-comment'
   ],
-  transform: { '^.+\\.(ts|js|html)$': 'jest-preset-angular' }
+  transform: {
+    '^.+.(ts|mjs|js|html)$': 'jest-preset-angular'
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*.mjs$)']
 };

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

@@ -9,18 +9,27 @@
 </header>
 
 <main role="main">
-  <div *ngIf="canCreateAccount" class="container create-account-container">
+  <div
+    *ngIf="canCreateAccount || (info?.systemMessage && user)"
+    class="container info-message-container"
+  >
     <div class="row">
       <div class="col-md-8 offset-md-2 text-center">
-        <a class="text-center" [routerLink]="['/']">
+        <a *ngIf="canCreateAccount" class="text-center" [routerLink]="['/']">
           <div
-            class="create-account-box d-inline-block px-3 py-2"
+            class="cursor-pointer d-inline-block info-message px-3 py-2"
             (click)="onCreateAccount()"
           >
             <span i18n>You are using the Live Demo.</span>
             <a class="ml-2" href="#" i18n>Create Account</a>
           </div></a
         >
+        <div
+          *ngIf="!canCreateAccount && info?.systemMessage && user"
+          class="d-inline-block info-message px-3 py-2"
+        >
+          {{ info.systemMessage }}
+        </div>
       </div>
     </div>
   </div>

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

@@ -8,14 +8,13 @@
     min-height: 100vh;
     padding-top: 5rem;
 
-    .create-account-container {
+    .info-message-container {
       height: 3.5rem;
       margin-top: -0.5rem;
 
-      .create-account-box {
+      .info-message {
         background-color: rgba(0, 0, 0, $alpha-hover);
         border-radius: 2rem;
-        cursor: pointer;
         font-size: 80%;
 
         a {

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

@@ -0,0 +1,31 @@
+<div class="py-2">
+  <div *ngFor="let itemByMonth of marketDataByMonth | keyvalue" class="d-flex">
+    <div class="date px-1 text-nowrap">{{ itemByMonth.key }}</div>
+    <div class="align-items-center d-flex flex-grow-1 px-1">
+      <div
+        *ngFor="let dayItem of days; let i = index"
+        class="day"
+        [ngClass]="{
+          'cursor-pointer valid': isDateOfInterest(
+            itemByMonth.key + '-' + (i + 1 < 10 ? '0' + (i + 1) : i + 1)
+          ),
+          available:
+            marketDataByMonth[itemByMonth.key][
+              i + 1 < 10 ? '0' + (i + 1) : i + 1
+            ]?.day ===
+            i + 1
+        }"
+        [title]="
+          (itemByMonth.key + '-' + (i + 1 < 10 ? '0' + (i + 1) : i + 1)
+            | date: defaultDateFormat) ?? ''
+        "
+        (click)="
+          onOpenMarketDataDetail({
+            day: i + 1 < 10 ? '0' + (i + 1) : i + 1,
+            yearMonth: itemByMonth.key
+          })
+        "
+      ></div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,25 @@
+@import '~apps/client/src/styles/ghostfolio-style';
+
+:host {
+  display: block;
+  font-size: 0.9rem;
+
+  .date {
+    font-feature-settings: 'tnum';
+    font-variant-numeric: tabular-nums;
+  }
+
+  .day {
+    height: 0.5rem;
+    margin-right: 0.25rem;
+    width: 0.5rem;
+
+    &.valid {
+      background-color: var(--danger);
+    }
+
+    &.available {
+      background-color: var(--success);
+    }
+  }
+}

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

@@ -0,0 +1,103 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+  OnInit
+} from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { DEFAULT_DATE_FORMAT } from '@ghostfolio/common/config';
+import { DATE_FORMAT } from '@ghostfolio/common/helper';
+import { DataSource, MarketData } from '@prisma/client';
+import { format, isBefore, isValid, parse } from 'date-fns';
+import { DeviceDetectorService } from 'ngx-device-detector';
+import { Subject, takeUntil } from 'rxjs';
+
+import { MarketDataDetailDialog } from './market-data-detail-dialog/market-data-detail-dialog.component';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'gf-admin-market-data-detail',
+  styleUrls: ['./admin-market-data-detail.component.scss'],
+  templateUrl: './admin-market-data-detail.component.html'
+})
+export class AdminMarketDataDetailComponent implements OnChanges, OnInit {
+  @Input() dataSource: DataSource;
+  @Input() marketData: MarketData[];
+  @Input() symbol: string;
+
+  public days = Array(31);
+  public defaultDateFormat = DEFAULT_DATE_FORMAT;
+  public deviceType: string;
+  public marketDataByMonth: {
+    [yearMonth: string]: { [day: string]: MarketData & { day: number } };
+  } = {};
+
+  private unsubscribeSubject = new Subject<void>();
+
+  public constructor(
+    private deviceService: DeviceDetectorService,
+    private dialog: MatDialog
+  ) {
+    this.deviceType = this.deviceService.getDeviceInfo().deviceType;
+  }
+
+  public ngOnInit() {}
+
+  public ngOnChanges() {
+    this.marketDataByMonth = {};
+
+    for (const marketDataItem of this.marketData) {
+      const currentDay = parseInt(format(marketDataItem.date, 'd'), 10);
+      const key = format(marketDataItem.date, 'yyyy-MM');
+
+      if (!this.marketDataByMonth[key]) {
+        this.marketDataByMonth[key] = {};
+      }
+
+      this.marketDataByMonth[key][
+        currentDay < 10 ? `0${currentDay}` : currentDay
+      ] = {
+        ...marketDataItem,
+        day: currentDay
+      };
+    }
+  }
+
+  public isDateOfInterest(aDateString: string) {
+    // Date is valid and in the past
+    const date = parse(aDateString, DATE_FORMAT, new Date());
+    return isValid(date) && isBefore(date, new Date());
+  }
+
+  public onOpenMarketDataDetail({
+    day,
+    yearMonth
+  }: {
+    day: string;
+    yearMonth: string;
+  }) {
+    const marketPrice = this.marketDataByMonth[yearMonth]?.[day]?.marketPrice;
+
+    const dialogRef = this.dialog.open(MarketDataDetailDialog, {
+      data: {
+        marketPrice,
+        dataSource: this.dataSource,
+        date: new Date(`${yearMonth}-${day}`),
+        symbol: this.symbol
+      },
+      height: this.deviceType === 'mobile' ? '97.5vh' : '80vh',
+      width: this.deviceType === 'mobile' ? '100vw' : '50rem'
+    });
+
+    dialogRef
+      .afterClosed()
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(() => {});
+  }
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+}

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

@@ -0,0 +1,14 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+
+import { AdminMarketDataDetailComponent } from './admin-market-data-detail.component';
+import { GfMarketDataDetailDialogModule } from './market-data-detail-dialog/market-data-detail-dialog.module';
+
+@NgModule({
+  declarations: [AdminMarketDataDetailComponent],
+  exports: [AdminMarketDataDetailComponent],
+  imports: [CommonModule, GfMarketDataDetailDialogModule],
+  providers: [],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class GfAdminMarketDataDetailModule {}

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

@@ -0,0 +1,8 @@
+import { DataSource } from '@prisma/client';
+
+export interface MarketDataDetailDialogParams {
+  dataSource: DataSource;
+  date: Date;
+  marketPrice: number;
+  symbol: string;
+}

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

@@ -0,0 +1,57 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Inject,
+  OnDestroy
+} from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { AdminService } from '@ghostfolio/client/services/admin.service';
+import { MarketData } from '@prisma/client';
+import { Subject, takeUntil } from 'rxjs';
+
+import { MarketDataDetailDialogParams } from './interfaces/interfaces';
+
+@Component({
+  host: { class: 'h-100' },
+  selector: 'gf-market-data-detail-dialog',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styleUrls: ['./market-data-detail-dialog.scss'],
+  templateUrl: 'market-data-detail-dialog.html'
+})
+export class MarketDataDetailDialog implements OnDestroy {
+  private unsubscribeSubject = new Subject<void>();
+
+  public constructor(
+    private adminService: AdminService,
+    private changeDetectorRef: ChangeDetectorRef,
+    public dialogRef: MatDialogRef<MarketDataDetailDialog>,
+    @Inject(MAT_DIALOG_DATA) public data: MarketDataDetailDialogParams
+  ) {}
+
+  public ngOnInit() {}
+
+  public onCancel(): void {
+    this.dialogRef.close();
+  }
+
+  public onGatherData() {
+    this.adminService
+      .gatherSymbol({
+        dataSource: this.data.dataSource,
+        date: this.data.date,
+        symbol: this.data.symbol
+      })
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((marketData: MarketData) => {
+        this.data.marketPrice = marketData.marketPrice;
+
+        this.changeDetectorRef.markForCheck();
+      });
+  }
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+}

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

@@ -0,0 +1,42 @@
+<form class="d-flex flex-column h-100">
+  <h1 mat-dialog-title i18n>Details for {{ data.symbol }}</h1>
+  <div class="flex-grow-1" mat-dialog-content>
+    <div class="mb-3">
+      <mat-form-field appearance="outline" class="w-100">
+        <mat-label i18n>Date</mat-label>
+        <input
+          disabled
+          matInput
+          name="date"
+          [matDatepicker]="date"
+          [(ngModel)]="data.date"
+        />
+        <mat-datepicker-toggle matSuffix [for]="date">
+          <ion-icon
+            class="text-muted"
+            matDatepickerToggleIcon
+            name="calendar-clear-outline"
+          ></ion-icon>
+        </mat-datepicker-toggle>
+        <mat-datepicker #date disabled="true"></mat-datepicker>
+      </mat-form-field>
+    </div>
+    <div class="align-items-center d-flex">
+      <mat-form-field appearance="outline" class="flex-grow-1 mr-2">
+        <mat-label i18n>Market Price</mat-label>
+        <input
+          matInput
+          name="marketPrice"
+          readonly
+          [(ngModel)]="data.marketPrice"
+        />
+      </mat-form-field>
+      <button color="accent" i18n mat-flat-button (click)="onGatherData()">
+        Gather Data
+      </button>
+    </div>
+  </div>
+  <div class="justify-content-end" mat-dialog-actions>
+    <button i18n mat-button (click)="onCancel()">Cancel</button>
+  </div>
+</form>

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

@@ -0,0 +1,28 @@
+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 { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+
+import { MarketDataDetailDialog } from './market-data-detail-dialog.component';
+
+@NgModule({
+  declarations: [MarketDataDetailDialog],
+  exports: [],
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatButtonModule,
+    MatDatepickerModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatInputModule,
+    ReactiveFormsModule
+  ],
+  providers: [],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class GfMarketDataDetailDialogModule {}

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

@@ -0,0 +1,23 @@
+:host {
+  display: block;
+
+  .mat-dialog-content {
+    max-height: unset;
+
+    .mat-form-field-appearance-outline {
+      ::ng-deep {
+        .mat-form-field-suffix {
+          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

@@ -0,0 +1,97 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  OnDestroy,
+  OnInit
+} from '@angular/core';
+import { AdminService } from '@ghostfolio/client/services/admin.service';
+import { DataService } from '@ghostfolio/client/services/data.service';
+import { DEFAULT_DATE_FORMAT } from '@ghostfolio/common/config';
+import { AdminMarketDataItem } from '@ghostfolio/common/interfaces/admin-market-data.interface';
+import { DataSource, MarketData } from '@prisma/client';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'gf-admin-market-data',
+  styleUrls: ['./admin-market-data.scss'],
+  templateUrl: './admin-market-data.html'
+})
+export class AdminMarketDataComponent implements OnDestroy, OnInit {
+  public currentSymbol: string;
+  public defaultDateFormat = DEFAULT_DATE_FORMAT;
+  public marketData: AdminMarketDataItem[] = [];
+  public marketDataDetails: MarketData[] = [];
+
+  private unsubscribeSubject = new Subject<void>();
+
+  /**
+   * @constructor
+   */
+  public constructor(
+    private adminService: AdminService,
+    private changeDetectorRef: ChangeDetectorRef,
+    private dataService: DataService
+  ) {}
+
+  /**
+   * Initializes the controller
+   */
+  public ngOnInit() {
+    this.fetchAdminMarketData();
+  }
+
+  public onGatherSymbol({
+    dataSource,
+    symbol
+  }: {
+    dataSource: DataSource;
+    symbol: string;
+  }) {
+    this.adminService
+      .gatherSymbol({ dataSource, symbol })
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(() => {});
+  }
+
+  public setCurrentSymbol(aSymbol: string) {
+    this.marketDataDetails = [];
+
+    if (this.currentSymbol === aSymbol) {
+      this.currentSymbol = '';
+    } else {
+      this.currentSymbol = aSymbol;
+
+      this.fetchAdminMarketDataBySymbol(this.currentSymbol);
+    }
+  }
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+
+  private fetchAdminMarketData() {
+    this.dataService
+      .fetchAdminMarketData()
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(({ marketData }) => {
+        this.marketData = marketData;
+
+        this.changeDetectorRef.markForCheck();
+      });
+  }
+
+  private fetchAdminMarketDataBySymbol(aSymbol: string) {
+    this.dataService
+      .fetchAdminMarketDataBySymbol(aSymbol)
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(({ marketData }) => {
+        this.marketDataDetails = marketData;
+
+        this.changeDetectorRef.markForCheck();
+      });
+  }
+}

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

@@ -0,0 +1,61 @@
+<div class="container">
+  <div class="row">
+    <div class="col">
+      <table class="gf-table w-100">
+        <thead>
+          <tr class="mat-header-row">
+            <th class="mat-header-cell px-1 py-2 text-right" i18n>#</th>
+            <th class="mat-header-cell px-1 py-2" i18n>Symbol</th>
+            <th class="mat-header-cell px-1 py-2" i18n>Data Source</th>
+            <th class="mat-header-cell px-1 py-2" i18n>First Transaction</th>
+            <th class="mat-header-cell px-1 py-2"></th>
+          </tr>
+        </thead>
+        <tbody>
+          <ng-container *ngFor="let item of marketData; let i = index">
+            <tr
+              class="cursor-pointer mat-row"
+              (click)="setCurrentSymbol(item.symbol)"
+            >
+              <td class="mat-cell px-1 py-2 text-right">{{ i + 1 }}</td>
+              <td class="mat-cell px-1 py-2">{{ item.symbol }}</td>
+              <td class="mat-cell px-1 py-2">{{ item.dataSource}}</td>
+              <td class="mat-cell px-1 py-2">
+                {{ (item.date | date: defaultDateFormat) ?? '' }}
+              </td>
+              <td class="mat-cell px-1 py-2">
+                <button
+                  class="mx-1 no-min-width px-2"
+                  mat-button
+                  [matMenuTriggerFor]="accountMenu"
+                  (click)="$event.stopPropagation()"
+                >
+                  <ion-icon name="ellipsis-vertical"></ion-icon>
+                </button>
+                <mat-menu #accountMenu="matMenu" xPosition="before">
+                  <button
+                    i18n
+                    mat-menu-item
+                    (click)="onGatherSymbol({dataSource: item.dataSource, symbol: item.symbol})"
+                  >
+                    Gather Data
+                  </button>
+                </mat-menu>
+              </td>
+            </tr>
+            <tr *ngIf="currentSymbol === item.symbol" class="mat-row">
+              <td></td>
+              <td colspan="4">
+                <gf-admin-market-data-detail
+                  [dataSource]="item.dataSource"
+                  [marketData]="marketDataDetails"
+                  [symbol]="item.symbol"
+                ></gf-admin-market-data-detail>
+              </td>
+            </tr>
+          </ng-container>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,19 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
+import { GfAdminMarketDataDetailModule } from '@ghostfolio/client/components/admin-market-data-detail/admin-market-data-detail.module';
+
+import { AdminMarketDataComponent } from './admin-market-data.component';
+
+@NgModule({
+  declarations: [AdminMarketDataComponent],
+  imports: [
+    CommonModule,
+    GfAdminMarketDataDetailModule,
+    MatButtonModule,
+    MatMenuModule
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class GfAdminMarketDataModule {}

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

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

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

@@ -0,0 +1,302 @@
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { MatSlideToggleChange } from '@angular/material/slide-toggle';
+import { AdminService } from '@ghostfolio/client/services/admin.service';
+import { CacheService } from '@ghostfolio/client/services/cache.service';
+import { DataService } from '@ghostfolio/client/services/data.service';
+import { UserService } from '@ghostfolio/client/services/user/user.service';
+import {
+  DEFAULT_DATE_FORMAT,
+  PROPERTY_COUPONS,
+  PROPERTY_CURRENCIES,
+  PROPERTY_IS_READ_ONLY_MODE,
+  PROPERTY_SYSTEM_MESSAGE
+} from '@ghostfolio/common/config';
+import { Coupon, InfoItem, User } from '@ghostfolio/common/interfaces';
+import { hasPermission, permissions } from '@ghostfolio/common/permissions';
+import {
+  differenceInSeconds,
+  formatDistanceToNowStrict,
+  isValid,
+  parseISO
+} from 'date-fns';
+import { uniq } from 'lodash';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+  selector: 'gf-admin-overview',
+  styleUrls: ['./admin-overview.scss'],
+  templateUrl: './admin-overview.html'
+})
+export class AdminOverviewComponent implements OnDestroy, OnInit {
+  public coupons: Coupon[];
+  public customCurrencies: string[];
+  public dataGatheringInProgress: boolean;
+  public dataGatheringProgress: number;
+  public defaultDateFormat = DEFAULT_DATE_FORMAT;
+  public exchangeRates: { label1: string; label2: string; value: number }[];
+  public hasPermissionForSubscription: boolean;
+  public hasPermissionForSystemMessage: boolean;
+  public hasPermissionToToggleReadOnlyMode: boolean;
+  public info: InfoItem;
+  public lastDataGathering: string;
+  public transactionCount: number;
+  public userCount: number;
+  public user: User;
+
+  private unsubscribeSubject = new Subject<void>();
+
+  /**
+   * @constructor
+   */
+  public constructor(
+    private adminService: AdminService,
+    private cacheService: CacheService,
+    private changeDetectorRef: ChangeDetectorRef,
+    private dataService: DataService,
+    private userService: UserService
+  ) {
+    this.info = this.dataService.fetchInfo();
+
+    this.userService.stateChanged
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((state) => {
+        if (state?.user) {
+          this.user = state.user;
+
+          this.hasPermissionForSubscription = hasPermission(
+            this.info.globalPermissions,
+            permissions.enableSubscription
+          );
+
+          this.hasPermissionForSystemMessage = hasPermission(
+            this.info.globalPermissions,
+            permissions.enableSystemMessage
+          );
+
+          this.hasPermissionToToggleReadOnlyMode = hasPermission(
+            this.user.permissions,
+            permissions.toggleReadOnlyMode
+          );
+        }
+      });
+  }
+
+  /**
+   * Initializes the controller
+   */
+  public ngOnInit() {
+    this.fetchAdminData();
+  }
+
+  public formatDistanceToNow(aDateString: string) {
+    if (aDateString) {
+      const distanceString = formatDistanceToNowStrict(parseISO(aDateString), {
+        addSuffix: true
+      });
+
+      return Math.abs(differenceInSeconds(parseISO(aDateString), new Date())) <
+        60
+        ? 'just now'
+        : distanceString;
+    }
+
+    return '';
+  }
+
+  public onAddCoupon() {
+    const coupons = [...this.coupons, { code: this.generateCouponCode(16) }];
+    this.putCoupons(coupons);
+  }
+
+  public onAddCurrency() {
+    const currency = prompt('Please add a currency:');
+
+    if (currency) {
+      const currencies = uniq([...this.customCurrencies, currency]);
+      this.putCurrencies(currencies);
+    }
+  }
+
+  public onDeleteCoupon(aCouponCode: string) {
+    const confirmation = confirm('Do you really want to delete this coupon?');
+
+    if (confirmation) {
+      const coupons = this.coupons.filter((coupon) => {
+        return coupon.code !== aCouponCode;
+      });
+      this.putCoupons(coupons);
+    }
+  }
+
+  public onDeleteCurrency(aCurrency: string) {
+    const confirmation = confirm('Do you really want to delete this currency?');
+
+    if (confirmation) {
+      const currencies = this.customCurrencies.filter((currency) => {
+        return currency !== aCurrency;
+      });
+      this.putCurrencies(currencies);
+    }
+  }
+
+  public onDeleteSystemMessage() {
+    this.putSystemMessage('');
+  }
+
+  public onFlushCache() {
+    this.cacheService
+      .flush()
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(() => {
+        setTimeout(() => {
+          window.location.reload();
+        }, 300);
+      });
+  }
+
+  public onGatherMax() {
+    const confirmation = confirm(
+      'This action may take some time. Do you want to proceed?'
+    );
+
+    if (confirmation === true) {
+      this.adminService
+        .gatherMax()
+        .pipe(takeUntil(this.unsubscribeSubject))
+        .subscribe(() => {
+          setTimeout(() => {
+            window.location.reload();
+          }, 300);
+        });
+    }
+  }
+
+  public onGatherProfileData() {
+    this.adminService
+      .gatherProfileData()
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(() => {});
+  }
+
+  public onReadOnlyModeChange(aEvent: MatSlideToggleChange) {
+    this.setReadOnlyMode(aEvent.checked);
+  }
+
+  public onSetSystemMessage() {
+    const systemMessage = prompt('Please set your system message:');
+
+    if (systemMessage) {
+      this.putSystemMessage(systemMessage);
+    }
+  }
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+
+  private fetchAdminData() {
+    this.dataService
+      .fetchAdminData()
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(
+        ({
+          dataGatheringProgress,
+          exchangeRates,
+          lastDataGathering,
+          settings,
+          transactionCount,
+          userCount
+        }) => {
+          this.coupons = (settings[PROPERTY_COUPONS] as Coupon[]) ?? [];
+          this.customCurrencies = settings[PROPERTY_CURRENCIES] as string[];
+          this.dataGatheringProgress = dataGatheringProgress;
+          this.exchangeRates = exchangeRates;
+
+          if (isValid(parseISO(lastDataGathering?.toString()))) {
+            this.lastDataGathering = formatDistanceToNowStrict(
+              new Date(lastDataGathering),
+              {
+                addSuffix: true
+              }
+            );
+          } else if (lastDataGathering === 'IN_PROGRESS') {
+            this.dataGatheringInProgress = true;
+          } else {
+            this.lastDataGathering = 'Starting soon...';
+          }
+
+          this.transactionCount = transactionCount;
+          this.userCount = userCount;
+
+          this.changeDetectorRef.markForCheck();
+        }
+      );
+  }
+
+  private generateCouponCode(aLength: number) {
+    const characters = 'ABCDEFGHJKLMNPQRSTUVWXYZ123456789';
+    let couponCode = '';
+
+    for (let i = 0; i < aLength; i++) {
+      couponCode += characters.charAt(
+        Math.floor(Math.random() * characters.length)
+      );
+    }
+
+    return couponCode;
+  }
+
+  private putCoupons(aCoupons: Coupon[]) {
+    this.dataService
+      .putAdminSetting(PROPERTY_COUPONS, {
+        value: JSON.stringify(aCoupons)
+      })
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(() => {
+        setTimeout(() => {
+          window.location.reload();
+        }, 300);
+      });
+  }
+
+  private putCurrencies(aCurrencies: string[]) {
+    this.dataService
+      .putAdminSetting(PROPERTY_CURRENCIES, {
+        value: JSON.stringify(aCurrencies)
+      })
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(() => {
+        setTimeout(() => {
+          window.location.reload();
+        }, 300);
+      });
+  }
+
+  private putSystemMessage(aSystemMessage: string) {
+    this.dataService
+      .putAdminSetting(PROPERTY_SYSTEM_MESSAGE, {
+        value: aSystemMessage
+      })
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(() => {
+        setTimeout(() => {
+          window.location.reload();
+        }, 300);
+      });
+  }
+
+  private setReadOnlyMode(aValue: boolean) {
+    this.dataService
+      .putAdminSetting(PROPERTY_IS_READ_ONLY_MODE, {
+        value: aValue ? 'true' : ''
+      })
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(() => {
+        setTimeout(() => {
+          window.location.reload();
+        }, 300);
+      });
+  }
+}

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

@@ -0,0 +1,184 @@
+<div class="container">
+  <div class="mb-5 row">
+    <div class="col">
+      <mat-card class="mb-3">
+        <mat-card-content>
+          <div class="d-flex my-3">
+            <div class="w-50" i18n>User Count</div>
+            <div class="w-50">{{ userCount }}</div>
+          </div>
+          <div class="d-flex my-3">
+            <div class="w-50" i18n>Transaction Count</div>
+            <div class="w-50">
+              <ng-container *ngIf="transactionCount">
+                {{ transactionCount }} ({{ transactionCount / userCount | number
+                : '1.2-2' }} <span i18n>per User</span>)
+              </ng-container>
+            </div>
+          </div>
+          <div class="d-flex my-3">
+            <div class="w-50" i18n>Data Gathering</div>
+            <div class="w-50">
+              <div>
+                <ng-container *ngIf="lastDataGathering"
+                  >{{ lastDataGathering }}</ng-container
+                >
+                <ng-container *ngIf="dataGatheringInProgress" i18n
+                  >In Progress ({{ dataGatheringProgress | percent : '1.2-2'
+                  }})</ng-container
+                >
+              </div>
+              <div class="mt-2 overflow-hidden">
+                <div class="mb-2">
+                  <button
+                    color="accent"
+                    mat-flat-button
+                    (click)="onFlushCache()"
+                  >
+                    <ion-icon
+                      class="mr-1"
+                      name="close-circle-outline"
+                    ></ion-icon>
+                    <span i18n>Reset Data Gathering</span>
+                  </button>
+                </div>
+                <div class="mb-2">
+                  <button
+                    color="warn"
+                    mat-flat-button
+                    [disabled]="dataGatheringInProgress"
+                    (click)="onGatherMax()"
+                  >
+                    <ion-icon class="mr-1" name="warning-outline"></ion-icon>
+                    <span i18n>Gather All Data</span>
+                  </button>
+                </div>
+                <div>
+                  <button
+                    class="mb-2 mr-2"
+                    color="accent"
+                    mat-flat-button
+                    [disabled]="dataGatheringInProgress"
+                    (click)="onGatherProfileData()"
+                  >
+                    <ion-icon
+                      class="mr-1"
+                      name="cloud-download-outline"
+                    ></ion-icon>
+                    <span i18n>Gather Profile Data</span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="align-items-start d-flex my-3">
+            <div class="w-50" i18n>Exchange Rates</div>
+            <div class="w-50">
+              <table>
+                <tr *ngFor="let exchangeRate of exchangeRates">
+                  <td class="d-flex">
+                    <gf-value
+                      [locale]="user?.settings?.locale"
+                      [value]="1"
+                    ></gf-value>
+                  </td>
+                  <td class="pl-1">{{ exchangeRate.label1 }}</td>
+                  <td class="px-1">=</td>
+                  <td class="d-flex justify-content-end">
+                    <gf-value
+                      [locale]="user?.settings?.locale"
+                      [precision]="4"
+                      [value]="exchangeRate.value"
+                    ></gf-value>
+                  </td>
+                  <td class="pl-1">{{ exchangeRate.label2 }}</td>
+                  <td>
+                    <button
+                      *ngIf="customCurrencies.includes(exchangeRate.label2)"
+                      class="mini-icon mx-1 no-min-width px-2"
+                      mat-button
+                      [disabled]="dataGatheringInProgress"
+                      (click)="onDeleteCurrency(exchangeRate.label2)"
+                    >
+                      <ion-icon name="trash-outline"></ion-icon>
+                    </button>
+                  </td>
+                </tr>
+              </table>
+              <div class="mt-2">
+                <button
+                  color="primary"
+                  mat-flat-button
+                  [disabled]="dataGatheringInProgress"
+                  (click)="onAddCurrency()"
+                >
+                  <ion-icon class="mr-1" name="add-outline"></ion-icon>
+                  <span i18n>Add Currency</span>
+                </button>
+              </div>
+            </div>
+          </div>
+          <div *ngIf="hasPermissionForSystemMessage" class="d-flex my-3">
+            <div class="w-50" i18n>System Message</div>
+            <div class="w-50">
+              <div *ngIf="info.systemMessage">
+                <span>{{ info.systemMessage }}</span>
+                <button
+                  class="mini-icon mx-1 no-min-width px-2"
+                  mat-button
+                  [disabled]="dataGatheringInProgress"
+                  (click)="onDeleteSystemMessage()"
+                >
+                  <ion-icon name="trash-outline"></ion-icon>
+                </button>
+              </div>
+              <button
+                *ngIf="!info.systemMessage"
+                color="accent"
+                mat-flat-button
+                (click)="onSetSystemMessage()"
+              >
+                <ion-icon
+                  class="mr-1"
+                  name="information-circle-outline"
+                ></ion-icon>
+                <span i18n>Set Message</span>
+              </button>
+            </div>
+          </div>
+          <div *ngIf="hasPermissionToToggleReadOnlyMode" class="d-flex my-3">
+            <div class="w-50" i18n>Read-only Mode</div>
+            <div class="w-50">
+              <mat-slide-toggle
+                color="primary"
+                [checked]="info?.isReadOnlyMode"
+                (change)="onReadOnlyModeChange($event)"
+              ></mat-slide-toggle>
+            </div>
+          </div>
+          <div *ngIf="hasPermissionForSubscription" class="d-flex my-3">
+            <div class="w-50" i18n>Coupons</div>
+            <div class="w-50">
+              <div *ngFor="let coupon of coupons">
+                <span>{{ coupon.code }}</span>
+                <button
+                  class="mini-icon mx-1 no-min-width px-2"
+                  mat-button
+                  (click)="onDeleteCoupon(coupon.code)"
+                >
+                  <ion-icon name="trash-outline"></ion-icon>
+                </button>
+              </div>
+              <div class="mt-2">
+                <button color="primary" mat-flat-button (click)="onAddCoupon()">
+                  <ion-icon class="mr-1" name="add-outline"></ion-icon>
+                  <span i18n>Add Coupon</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </mat-card-content>
+      </mat-card>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,24 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { CacheService } from '@ghostfolio/client/services/cache.service';
+import { GfValueModule } from '@ghostfolio/ui/value';
+
+import { AdminOverviewComponent } from './admin-overview.component';
+
+@NgModule({
+  declarations: [AdminOverviewComponent],
+  exports: [],
+  imports: [
+    CommonModule,
+    GfValueModule,
+    MatButtonModule,
+    MatCardModule,
+    MatSlideToggleModule
+  ],
+  providers: [CacheService],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class GfAdminOverviewModule {}

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

@@ -0,0 +1,23 @@
+@import '~apps/client/src/styles/ghostfolio-style';
+
+:host {
+  display: block;
+
+  .mat-button {
+    &.mini-icon {
+      line-height: 1.5;
+    }
+  }
+
+  .mat-flat-button {
+    ::ng-deep {
+      .mat-button-wrapper {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        width: 100%;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,82 @@
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { DataService } from '@ghostfolio/client/services/data.service';
+import { AdminData } from '@ghostfolio/common/interfaces';
+import {
+  differenceInSeconds,
+  formatDistanceToNowStrict,
+  parseISO
+} from 'date-fns';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+  selector: 'gf-admin-users',
+  styleUrls: ['./admin-users.scss'],
+  templateUrl: './admin-users.html'
+})
+export class AdminUsersComponent implements OnDestroy, OnInit {
+  public users: AdminData['users'];
+
+  private unsubscribeSubject = new Subject<void>();
+
+  /**
+   * @constructor
+   */
+  public constructor(
+    private changeDetectorRef: ChangeDetectorRef,
+    private dataService: DataService
+  ) {}
+
+  /**
+   * Initializes the controller
+   */
+  public ngOnInit() {
+    this.fetchAdminData();
+  }
+
+  public formatDistanceToNow(aDateString: string) {
+    if (aDateString) {
+      const distanceString = formatDistanceToNowStrict(parseISO(aDateString), {
+        addSuffix: true
+      });
+
+      return Math.abs(differenceInSeconds(parseISO(aDateString), new Date())) <
+        60
+        ? 'just now'
+        : distanceString;
+    }
+
+    return '';
+  }
+
+  public onDeleteUser(aId: string) {
+    const confirmation = confirm('Do you really want to delete this user?');
+
+    if (confirmation) {
+      this.dataService
+        .deleteUser(aId)
+        .pipe(takeUntil(this.unsubscribeSubject))
+        .subscribe({
+          next: () => {
+            this.fetchAdminData();
+          }
+        });
+    }
+  }
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+
+  private fetchAdminData() {
+    this.dataService
+      .fetchAdminData()
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(({ users }) => {
+        this.users = users;
+
+        this.changeDetectorRef.markForCheck();
+      });
+  }
+}

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

@@ -0,0 +1,86 @@
+<div class="container">
+  <div class="row">
+    <div class="col">
+      <div class="users">
+        <table class="gf-table">
+          <thead>
+            <tr class="mat-header-row">
+              <th class="mat-header-cell px-1 py-2 text-right" i18n>#</th>
+              <th class="mat-header-cell px-1 py-2" i18n>User</th>
+              <th class="mat-header-cell px-1 py-2 text-right" i18n>
+                Registration
+              </th>
+              <th class="mat-header-cell px-1 py-2 text-right" i18n>
+                Accounts
+              </th>
+              <th class="mat-header-cell px-1 py-2 text-right" i18n>
+                Transactions
+              </th>
+              <th class="mat-header-cell px-1 py-2 text-right" i18n>
+                Engagement per Day
+              </th>
+              <th class="mat-header-cell px-1 py-2" i18n>Last Activitiy</th>
+              <th class="mat-header-cell px-1 py-2"></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr *ngFor="let userItem of users; let i = index" class="mat-row">
+              <td class="mat-cell px-1 py-2 text-right">{{ i + 1 }}</td>
+              <td class="mat-cell px-1 py-2">
+                <div class="d-flex align-items-center">
+                  <span class="d-none d-sm-inline-block"
+                    >{{ userItem.alias || userItem.id }}</span
+                  >
+                  <span class="d-inline-block d-sm-none"
+                    >{{ userItem.alias || (userItem.id | slice:0:5) +
+                    '...' }}</span
+                  >
+                  <ion-icon
+                    *ngIf="userItem?.subscription?.type === 'Premium'"
+                    class="ml-1 text-muted"
+                    name="diamond-outline"
+                  ></ion-icon>
+                </div>
+              </td>
+              <td class="mat-cell px-1 py-2 text-right">
+                {{ formatDistanceToNow(userItem.createdAt) }}
+              </td>
+              <td class="mat-cell px-1 py-2 text-right">
+                {{ userItem.accountCount }}
+              </td>
+              <td class="mat-cell px-1 py-2 text-right">
+                {{ userItem.transactionCount }}
+              </td>
+              <td class="mat-cell px-1 py-2 text-right">
+                {{ userItem.engagement | number: '1.0-0' }}
+              </td>
+              <td class="mat-cell px-1 py-2">
+                {{ formatDistanceToNow(userItem.lastActivity) }}
+              </td>
+              <td class="mat-cell px-1 py-2">
+                <button
+                  class="mx-1 no-min-width px-2"
+                  mat-button
+                  [matMenuTriggerFor]="accountMenu"
+                  (click)="$event.stopPropagation()"
+                >
+                  <ion-icon name="ellipsis-vertical"></ion-icon>
+                </button>
+                <mat-menu #accountMenu="matMenu" xPosition="before">
+                  <button
+                    i18n
+                    mat-menu-item
+                    [disabled]="userItem.id === user?.id"
+                    (click)="onDeleteUser(userItem.id)"
+                  >
+                    Delete
+                  </button>
+                </mat-menu>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,14 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
+
+import { AdminUsersComponent } from './admin-users.component';
+
+@NgModule({
+  declarations: [AdminUsersComponent],
+  exports: [],
+  imports: [CommonModule, MatButtonModule, MatMenuModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class GfAdminUsersModule {}

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

@@ -0,0 +1,18 @@
+@import '~apps/client/src/styles/ghostfolio-style';
+
+:host {
+  display: block;
+
+  .users {
+    overflow-x: auto;
+
+    table {
+      min-width: 100%;
+
+      .mat-row,
+      .mat-header-row {
+        width: 100%;
+      }
+    }
+  }
+}

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

@@ -1,4 +1,8 @@
-<span class="flex-grow-1 text-truncate">{{ title }}</span>
+<span
+  class="flex-grow-1 text-truncate"
+  [ngClass]="{ 'text-center': position === 'center' }"
+  >{{ title }}</span
+>
 <button
   *ngIf="deviceType !== 'mobile'"
   class="no-min-width px-0"

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

@@ -16,6 +16,7 @@ import {
 })
 export class DialogHeaderComponent implements OnInit {
   @Input() deviceType: string;
+  @Input() position: 'center' | 'left' = 'left';
   @Input() title: string;
 
   @Output() closeButtonClicked = new EventEmitter<void>();

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

@@ -1,13 +1,13 @@
 <div class="align-items-center d-flex flex-row">
-  <div class="h3 mb-0 mr-2">{{ fearAndGreedIndexEmoji }}</div>
+  <div class="h2 mb-0 mr-2">{{ fearAndGreedIndexEmoji }}</div>
   <div>
-    <div class="h3 mb-0">
+    <div class="h4 mb-0">
       <span class="mr-2">{{ fearAndGreedIndexText }}</span>
       <small class="text-muted"
         ><strong>{{ fearAndGreedIndex }}</strong
         >/100</small
       >
     </div>
-    <small class="d-block" i18n>Market Mood</small>
+    <small class="d-block" i18n>Current Market Mood</small>
   </div>
 </div>

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

@@ -2,7 +2,7 @@
   <ng-container *ngIf="user">
     <a
       [routerLink]="['/']"
-      class="align-items-center d-flex h-100 mx-2 no-min-width px-2 rounded-0"
+      class="align-items-center d-flex h-100 no-min-width px-2 rounded-0"
       mat-button
     >
       <gf-logo></gf-logo>
@@ -270,7 +270,7 @@
       Sign In
     </button>
     <a
-      *ngIf="currentRoute !== 'register'"
+      *ngIf="currentRoute !== 'register' && !info?.isReadOnlyMode"
       class="d-none d-sm-block"
       color="primary"
       i18n

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

@@ -0,0 +1,84 @@
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { DataService } from '@ghostfolio/client/services/data.service';
+import {
+  RANGE,
+  SettingsStorageService
+} from '@ghostfolio/client/services/settings-storage.service';
+import { UserService } from '@ghostfolio/client/services/user/user.service';
+import { Position, User } from '@ghostfolio/common/interfaces';
+import { hasPermission, permissions } from '@ghostfolio/common/permissions';
+import { DateRange } from '@ghostfolio/common/types';
+import { DeviceDetectorService } from 'ngx-device-detector';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+  selector: 'gf-home-holdings',
+  styleUrls: ['./home-holdings.scss'],
+  templateUrl: './home-holdings.html'
+})
+export class HomeHoldingsComponent implements OnDestroy, OnInit {
+  public dateRange: DateRange;
+  public deviceType: string;
+  public hasPermissionToCreateOrder: boolean;
+  public positions: Position[];
+  public user: User;
+
+  private unsubscribeSubject = new Subject<void>();
+
+  /**
+   * @constructor
+   */
+  public constructor(
+    private changeDetectorRef: ChangeDetectorRef,
+    private dataService: DataService,
+    private deviceService: DeviceDetectorService,
+    private settingsStorageService: SettingsStorageService,
+    private userService: UserService
+  ) {
+    this.userService.stateChanged
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((state) => {
+        if (state?.user) {
+          this.user = state.user;
+
+          this.hasPermissionToCreateOrder = hasPermission(
+            this.user.permissions,
+            permissions.createOrder
+          );
+
+          this.changeDetectorRef.markForCheck();
+        }
+      });
+  }
+
+  /**
+   * Initializes the controller
+   */
+  public ngOnInit() {
+    this.deviceType = this.deviceService.getDeviceInfo().deviceType;
+
+    this.dateRange =
+      <DateRange>this.settingsStorageService.getSetting(RANGE) || 'max';
+
+    this.update();
+  }
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+
+  private update() {
+    this.dataService
+      .fetchPositions({ range: this.dateRange })
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((response) => {
+        this.positions = response.positions;
+
+        this.changeDetectorRef.markForCheck();
+      });
+
+    this.changeDetectorRef.markForCheck();
+  }
+}

apps/client/src/app/components/home-holdings/home-holdings.html

@@ -0,0 +1,26 @@
+<div class="container justify-content-center pb-3 px-3">
+  <div class="row">
+    <div class="align-items-center col-xs-12 col-md-8 offset-md-2">
+      <mat-card class="p-0">
+        <mat-card-content>
+          <gf-positions
+            [baseCurrency]="user?.settings?.baseCurrency"
+            [deviceType]="deviceType"
+            [locale]="user?.settings?.locale"
+            [positions]="positions"
+            [range]="dateRange"
+          ></gf-positions>
+        </mat-card-content>
+      </mat-card>
+      <div *ngIf="hasPermissionToCreateOrder" class="text-center">
+        <a
+          class="mt-3"
+          i18n
+          mat-button
+          [routerLink]="['/portfolio', 'transactions']"
+          >Manage Transactions...</a
+        >
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,23 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { RouterModule } from '@angular/router';
+import { GfPositionsModule } from '@ghostfolio/client/components/positions/positions.module';
+
+import { HomeHoldingsComponent } from './home-holdings.component';
+
+@NgModule({
+  declarations: [HomeHoldingsComponent],
+  exports: [],
+  imports: [
+    CommonModule,
+    GfPositionsModule,
+    MatButtonModule,
+    MatCardModule,
+    RouterModule
+  ],
+  providers: [],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class GfHomeHoldingsModule {}

apps/client/src/app/components/home-holdings/home-holdings.scss

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

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

@@ -0,0 +1,85 @@
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { HistoricalDataItem } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-position-detail.interface';
+import { DataService } from '@ghostfolio/client/services/data.service';
+import { UserService } from '@ghostfolio/client/services/user/user.service';
+import { ghostfolioFearAndGreedIndexSymbol } from '@ghostfolio/common/config';
+import { resetHours } from '@ghostfolio/common/helper';
+import { User } from '@ghostfolio/common/interfaces';
+import { hasPermission, permissions } from '@ghostfolio/common/permissions';
+import { DataSource } from '@prisma/client';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+  selector: 'gf-home-market',
+  styleUrls: ['./home-market.scss'],
+  templateUrl: './home-market.html'
+})
+export class HomeMarketComponent implements OnDestroy, OnInit {
+  public fearAndGreedIndex: number;
+  public hasPermissionToAccessFearAndGreedIndex: boolean;
+  public historicalData: HistoricalDataItem[];
+  public isLoading = true;
+  public user: User;
+
+  private unsubscribeSubject = new Subject<void>();
+
+  /**
+   * @constructor
+   */
+  public constructor(
+    private changeDetectorRef: ChangeDetectorRef,
+    private dataService: DataService,
+    private userService: UserService
+  ) {
+    this.isLoading = true;
+
+    this.userService.stateChanged
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((state) => {
+        if (state?.user) {
+          this.user = state.user;
+
+          this.hasPermissionToAccessFearAndGreedIndex = hasPermission(
+            this.user.permissions,
+            permissions.accessFearAndGreedIndex
+          );
+
+          if (this.hasPermissionToAccessFearAndGreedIndex) {
+            this.dataService
+              .fetchSymbolItem({
+                dataSource: DataSource.RAKUTEN,
+                includeHistoricalData: true,
+                symbol: ghostfolioFearAndGreedIndexSymbol
+              })
+              .pipe(takeUntil(this.unsubscribeSubject))
+              .subscribe(({ historicalData, marketPrice }) => {
+                this.fearAndGreedIndex = marketPrice;
+                this.historicalData = [
+                  ...historicalData,
+                  {
+                    date: resetHours(new Date()).toISOString(),
+                    value: marketPrice
+                  }
+                ];
+                this.isLoading = false;
+
+                this.changeDetectorRef.markForCheck();
+              });
+          }
+
+          this.changeDetectorRef.markForCheck();
+        }
+      });
+  }
+
+  /**
+   * Initializes the controller
+   */
+  public ngOnInit() {}
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+}

apps/client/src/app/components/home-market/home-market.html

@@ -0,0 +1,34 @@
+<div
+  class="
+    align-items-center
+    container
+    d-flex
+    flex-grow-1
+    h-100
+    justify-content-center
+    w-100
+  "
+>
+  <div class="no-gutters row w-100">
+    <div class="col-xs-12 col-md-8 offset-md-2">
+      <div class="mb-2 text-center text-muted">
+        <small i18n>Last 10 Days</small>
+      </div>
+      <gf-line-chart
+        class="mb-5"
+        yMax="100"
+        yMaxLabel="Greed"
+        yMin="0"
+        yMinLabel="Fear"
+        [historicalDataItems]="historicalData"
+        [showXAxis]="true"
+        [showYAxis]="true"
+      ></gf-line-chart>
+      <gf-fear-and-greed-index
+        class="d-flex justify-content-center"
+        [fearAndGreedIndex]="fearAndGreedIndex"
+        [hidden]="isLoading"
+      ></gf-fear-and-greed-index>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { GfFearAndGreedIndexModule } from '@ghostfolio/client/components/fear-and-greed-index/fear-and-greed-index.module';
+import { GfLineChartModule } from '@ghostfolio/ui/line-chart/line-chart.module';
+
+import { HomeMarketComponent } from './home-market.component';
+
+@NgModule({
+  declarations: [HomeMarketComponent],
+  exports: [],
+  imports: [CommonModule, GfFearAndGreedIndexModule, GfLineChartModule],
+  providers: [],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class GfHomeMarketModule {}

apps/client/src/app/components/home-market/home-market.scss

@@ -0,0 +1,9 @@
+@import '~apps/client/src/styles/ghostfolio-style';
+
+:host {
+  display: block;
+
+  gf-line-chart {
+    aspect-ratio: 16 / 9;
+  }
+}

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

@@ -0,0 +1,127 @@
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { ToggleOption } from '@ghostfolio/client/components/toggle/interfaces/toggle-option.type';
+import { DataService } from '@ghostfolio/client/services/data.service';
+import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
+import {
+  RANGE,
+  SettingsStorageService
+} from '@ghostfolio/client/services/settings-storage.service';
+import { UserService } from '@ghostfolio/client/services/user/user.service';
+import { PortfolioPerformance, User } from '@ghostfolio/common/interfaces';
+import { DateRange } from '@ghostfolio/common/types';
+import { LineChartItem } from '@ghostfolio/ui/line-chart/interfaces/line-chart.interface';
+import { DeviceDetectorService } from 'ngx-device-detector';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+  selector: 'gf-home-overview',
+  styleUrls: ['./home-overview.scss'],
+  templateUrl: './home-overview.html'
+})
+export class HomeOverviewComponent implements OnDestroy, OnInit {
+  public dateRange: DateRange;
+  public dateRangeOptions: ToggleOption[] = [
+    { label: 'Today', value: '1d' },
+    { label: 'YTD', value: 'ytd' },
+    { label: '1Y', value: '1y' },
+    { label: '5Y', value: '5y' },
+    { label: 'Max', value: 'max' }
+  ];
+  public deviceType: string;
+  public hasImpersonationId: boolean;
+  public historicalDataItems: LineChartItem[];
+  public isAllTimeHigh: boolean;
+  public isAllTimeLow: boolean;
+  public isLoadingPerformance = true;
+  public performance: PortfolioPerformance;
+  public user: User;
+
+  private unsubscribeSubject = new Subject<void>();
+
+  /**
+   * @constructor
+   */
+  public constructor(
+    private changeDetectorRef: ChangeDetectorRef,
+    private dataService: DataService,
+    private deviceService: DeviceDetectorService,
+    private impersonationStorageService: ImpersonationStorageService,
+    private settingsStorageService: SettingsStorageService,
+    private userService: UserService
+  ) {
+    this.userService.stateChanged
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((state) => {
+        if (state?.user) {
+          this.user = state.user;
+
+          this.changeDetectorRef.markForCheck();
+        }
+      });
+  }
+
+  /**
+   * Initializes the controller
+   */
+  public ngOnInit() {
+    this.deviceType = this.deviceService.getDeviceInfo().deviceType;
+
+    this.impersonationStorageService
+      .onChangeHasImpersonation()
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((aId) => {
+        this.hasImpersonationId = !!aId;
+
+        this.changeDetectorRef.markForCheck();
+      });
+
+    this.dateRange =
+      <DateRange>this.settingsStorageService.getSetting(RANGE) || 'max';
+
+    this.update();
+  }
+
+  public onChangeDateRange(aDateRange: DateRange) {
+    this.dateRange = aDateRange;
+    this.settingsStorageService.setSetting(RANGE, this.dateRange);
+    this.update();
+  }
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+
+  private update() {
+    this.isLoadingPerformance = true;
+
+    this.dataService
+      .fetchChart({ range: this.dateRange })
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((chartData) => {
+        this.historicalDataItems = chartData.chart.map((chartDataItem) => {
+          return {
+            date: chartDataItem.date,
+            value: chartDataItem.value
+          };
+        });
+        this.isAllTimeHigh = chartData.isAllTimeHigh;
+        this.isAllTimeLow = chartData.isAllTimeLow;
+
+        this.changeDetectorRef.markForCheck();
+      });
+
+    this.dataService
+      .fetchPortfolioPerformance({ range: this.dateRange })
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((response) => {
+        this.performance = response;
+        this.isLoadingPerformance = false;
+
+        this.changeDetectorRef.markForCheck();
+      });
+
+    this.changeDetectorRef.markForCheck();
+  }
+}

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

@@ -0,0 +1,57 @@
+<div
+  class="
+    align-items-center
+    container
+    d-flex
+    flex-column
+    h-100
+    justify-content-center
+    overview
+    p-0
+    position-relative
+  "
+>
+  <div class="row w-100">
+    <div class="chart-container col">
+      <gf-line-chart
+        symbol="Performance"
+        [historicalDataItems]="historicalDataItems"
+        [ngClass]="{ 'pr-3': deviceType === 'mobile' }"
+        [showGradient]="true"
+        [showLoader]="false"
+        [showXAxis]="false"
+        [showYAxis]="false"
+      ></gf-line-chart>
+      <div
+        *ngIf="historicalDataItems?.length === 0"
+        class="align-items-center d-flex h-100 justify-content-center w-100"
+      >
+        <div class="d-flex justify-content-center">
+          <gf-no-transactions-info-indicator></gf-no-transactions-info-indicator>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="overview-container row mt-1">
+    <div class="col">
+      <gf-portfolio-performance
+        class="pb-4"
+        [baseCurrency]="user?.settings?.baseCurrency"
+        [isAllTimeHigh]="isAllTimeHigh"
+        [isAllTimeLow]="isAllTimeLow"
+        [isLoading]="isLoadingPerformance"
+        [locale]="user?.settings?.locale"
+        [performance]="performance"
+        [showDetails]="!hasImpersonationId && !user.settings.isRestrictedView"
+      ></gf-portfolio-performance>
+      <div class="text-center">
+        <gf-toggle
+          [defaultValue]="dateRange"
+          [isLoading]="isLoadingPerformance"
+          [options]="dateRangeOptions"
+          (change)="onChangeDateRange($event.value)"
+        ></gf-toggle>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,25 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { GfPortfolioPerformanceModule } from '@ghostfolio/client/components/portfolio-performance/portfolio-performance.module';
+import { GfToggleModule } from '@ghostfolio/client/components/toggle/toggle.module';
+import { GfLineChartModule } from '@ghostfolio/ui/line-chart/line-chart.module';
+import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';
+
+import { HomeOverviewComponent } from './home-overview.component';
+
+@NgModule({
+  declarations: [HomeOverviewComponent],
+  exports: [],
+  imports: [
+    CommonModule,
+    GfLineChartModule,
+    GfNoTransactionsInfoModule,
+    GfPortfolioPerformanceModule,
+    GfToggleModule,
+    RouterModule
+  ],
+  providers: [],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class GfHomeOverviewModule {}

apps/client/src/app/components/home-overview/home-overview.scss

@@ -0,0 +1,34 @@
+@import '~apps/client/src/styles/ghostfolio-style';
+
+:host {
+  display: block;
+
+  .chart-container {
+    aspect-ratio: 16 / 9;
+    max-height: 50vh;
+
+    // Fallback for aspect-ratio (using padding hack)
+    @supports not (aspect-ratio: 16 / 9) {
+      &::before {
+        float: left;
+        padding-top: 56.25%;
+        content: '';
+      }
+
+      &::after {
+        display: block;
+        content: '';
+        clear: both;
+      }
+    }
+
+    gf-line-chart {
+      bottom: 0;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+      z-index: -1;
+    }
+  }
+}