Release 0.97.0 (#59)

* Migrate transaction table
* Add accounts page
* Add account page logic

CHANGELOG.md

@@ -5,6 +5,54 @@ 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).
 
+## 0.97.0 - 01.05.2021
+
+### Added
+
+- Added an account page as a preparation for the multi accounts support
+
+## 0.96.0 - 30.04.2021
+
+### Added
+
+- Added the absolute change to the position detail dialog
+- Added the number of transactions to the position detail dialog
+
+### Changed
+
+- Harmonized the slogan to "Open Source Portfolio Tracker"
+
+## 0.95.0 - 28.04.2021
+
+### Added
+
+- Added a data source attribute to the transactions model
+
+## 0.94.0 - 27.04.2021
+
+### Added
+
+- Added the generic scraper symbols to the symbol lookup results
+
+## 0.93.0 - 26.04.2021
+
+### Changed
+
+- Improved the user table styling of the admin control panel
+- Improved the background colors in the dark mode
+
+## 0.92.0 - 25.04.2021
+
+### Added
+
+- Prepared further for multi accounts support: store account for new transactions
+- Added a horizontal scrollbar to the user table of the admin control panel
+
+### Fixed
+
+- Fixed an issue in the header with outdated data
+- Fixed an issue on the about page with outdated data
+
 ## 0.91.0 - 25.04.2021
 
 ### Added

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

@@ -0,0 +1,213 @@
+import { RequestWithUser } from '@ghostfolio/api/app/interfaces/request-with-user.type';
+import { nullifyValuesInObjects } from '@ghostfolio/api/helper/object.helper';
+import { ImpersonationService } from '@ghostfolio/api/services/impersonation.service';
+import { getPermissions, hasPermission, permissions } from '@ghostfolio/helper';
+import {
+  Body,
+  Controller,
+  Delete,
+  Get,
+  Headers,
+  HttpException,
+  Inject,
+  Param,
+  Post,
+  Put,
+  UseGuards
+} from '@nestjs/common';
+import { REQUEST } from '@nestjs/core';
+import { AuthGuard } from '@nestjs/passport';
+import { Account as AccountModel } from '@prisma/client';
+import { StatusCodes, getReasonPhrase } from 'http-status-codes';
+
+import { AccountService } from './account.service';
+import { CreateAccountDto } from './create-account.dto';
+import { UpdateAccountDto } from './update-account.dto';
+
+@Controller('account')
+export class AccountController {
+  public constructor(
+    private readonly accountService: AccountService,
+    private readonly impersonationService: ImpersonationService,
+    @Inject(REQUEST) private readonly request: RequestWithUser
+  ) {}
+
+  @Delete(':id')
+  @UseGuards(AuthGuard('jwt'))
+  public async deleteAccount(@Param('id') id: string): Promise<AccountModel> {
+    if (
+      !hasPermission(
+        getPermissions(this.request.user.role),
+        permissions.deleteAccount
+      )
+    ) {
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.FORBIDDEN),
+        StatusCodes.FORBIDDEN
+      );
+    }
+
+    return this.accountService.deleteAccount(
+      {
+        id_userId: {
+          id,
+          userId: this.request.user.id
+        }
+      },
+      this.request.user.id
+    );
+  }
+
+  @Get()
+  @UseGuards(AuthGuard('jwt'))
+  public async getAllAccounts(
+    @Headers('impersonation-id') impersonationId
+  ): Promise<AccountModel[]> {
+    const impersonationUserId = await this.impersonationService.validateImpersonationId(
+      impersonationId,
+      this.request.user.id
+    );
+
+    let accounts = await this.accountService.accounts({
+      include: { Platform: true },
+      orderBy: { name: 'desc' },
+      where: { userId: impersonationUserId || this.request.user.id }
+    });
+
+    if (
+      impersonationUserId &&
+      !hasPermission(
+        getPermissions(this.request.user.role),
+        permissions.readForeignPortfolio
+      )
+    ) {
+      accounts = nullifyValuesInObjects(accounts, [
+        'fee',
+        'quantity',
+        'unitPrice'
+      ]);
+    }
+
+    return accounts;
+  }
+
+  @Get(':id')
+  @UseGuards(AuthGuard('jwt'))
+  public async getAccountById(@Param('id') id: string): Promise<AccountModel> {
+    return this.accountService.account({
+      id_userId: {
+        id,
+        userId: this.request.user.id
+      }
+    });
+  }
+
+  @Post()
+  @UseGuards(AuthGuard('jwt'))
+  public async createAccount(
+    @Body() data: CreateAccountDto
+  ): Promise<AccountModel> {
+    if (
+      !hasPermission(
+        getPermissions(this.request.user.role),
+        permissions.createAccount
+      )
+    ) {
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.FORBIDDEN),
+        StatusCodes.FORBIDDEN
+      );
+    }
+
+    if (data.platformId) {
+      const platformId = data.platformId;
+      delete data.platformId;
+
+      return this.accountService.createAccount(
+        {
+          ...data,
+          Platform: { connect: { id: platformId } },
+          User: { connect: { id: this.request.user.id } }
+        },
+        this.request.user.id
+      );
+    } else {
+      delete data.platformId;
+
+      return this.accountService.createAccount(
+        {
+          ...data,
+          User: { connect: { id: this.request.user.id } }
+        },
+        this.request.user.id
+      );
+    }
+  }
+
+  @Put(':id')
+  @UseGuards(AuthGuard('jwt'))
+  public async update(@Param('id') id: string, @Body() data: UpdateAccountDto) {
+    if (
+      !hasPermission(
+        getPermissions(this.request.user.role),
+        permissions.updateAccount
+      )
+    ) {
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.FORBIDDEN),
+        StatusCodes.FORBIDDEN
+      );
+    }
+
+    const originalAccount = await this.accountService.account({
+      id_userId: {
+        id,
+        userId: this.request.user.id
+      }
+    });
+
+    if (data.platformId) {
+      const platformId = data.platformId;
+      delete data.platformId;
+
+      return this.accountService.updateAccount(
+        {
+          data: {
+            ...data,
+            Platform: { connect: { id: platformId } },
+            User: { connect: { id: this.request.user.id } }
+          },
+          where: {
+            id_userId: {
+              id,
+              userId: this.request.user.id
+            }
+          }
+        },
+        this.request.user.id
+      );
+    } else {
+      // platformId is null, remove it
+      delete data.platformId;
+
+      return this.accountService.updateAccount(
+        {
+          data: {
+            ...data,
+            Platform: originalAccount.platformId
+              ? { disconnect: true }
+              : undefined,
+            User: { connect: { id: this.request.user.id } }
+          },
+          where: {
+            id_userId: {
+              id,
+              userId: this.request.user.id
+            }
+          }
+        },
+        this.request.user.id
+      );
+    }
+  }
+}

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

@@ -0,0 +1,30 @@
+import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
+import { DataProviderService } from '@ghostfolio/api/services/data-provider.service';
+import { AlphaVantageService } from '@ghostfolio/api/services/data-provider/alpha-vantage/alpha-vantage.service';
+import { GhostfolioScraperApiService } from '@ghostfolio/api/services/data-provider/ghostfolio-scraper-api/ghostfolio-scraper-api.service';
+import { RakutenRapidApiService } from '@ghostfolio/api/services/data-provider/rakuten-rapid-api/rakuten-rapid-api.service';
+import { YahooFinanceService } from '@ghostfolio/api/services/data-provider/yahoo-finance/yahoo-finance.service';
+import { ImpersonationService } from '@ghostfolio/api/services/impersonation.service';
+import { PrismaService } from '@ghostfolio/api/services/prisma.service';
+import { Module } from '@nestjs/common';
+
+import { RedisCacheModule } from '../redis-cache/redis-cache.module';
+import { AccountController } from './account.controller';
+import { AccountService } from './account.service';
+
+@Module({
+  imports: [RedisCacheModule],
+  controllers: [AccountController],
+  providers: [
+    AccountService,
+    AlphaVantageService,
+    ConfigurationService,
+    DataProviderService,
+    GhostfolioScraperApiService,
+    ImpersonationService,
+    PrismaService,
+    RakutenRapidApiService,
+    YahooFinanceService
+  ]
+})
+export class AccountModule {}

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

@@ -0,0 +1,75 @@
+import { PrismaService } from '@ghostfolio/api/services/prisma.service';
+import { Injectable } from '@nestjs/common';
+import { Account, Prisma } from '@prisma/client';
+
+import { RedisCacheService } from '../redis-cache/redis-cache.service';
+
+@Injectable()
+export class AccountService {
+  public constructor(
+    private readonly redisCacheService: RedisCacheService,
+    private prisma: PrismaService
+  ) {}
+
+  public async account(
+    accountWhereUniqueInput: Prisma.AccountWhereUniqueInput
+  ): Promise<Account | null> {
+    return this.prisma.account.findUnique({
+      where: accountWhereUniqueInput
+    });
+  }
+
+  public async accounts(params: {
+    include?: Prisma.AccountInclude;
+    skip?: number;
+    take?: number;
+    cursor?: Prisma.AccountWhereUniqueInput;
+    where?: Prisma.AccountWhereInput;
+    orderBy?: Prisma.AccountOrderByInput;
+  }): Promise<Account[]> {
+    const { include, skip, take, cursor, where, orderBy } = params;
+
+    return this.prisma.account.findMany({
+      cursor,
+      include,
+      orderBy,
+      skip,
+      take,
+      where
+    });
+  }
+
+  public async createAccount(
+    data: Prisma.AccountCreateInput,
+    aUserId: string
+  ): Promise<Account> {
+    return this.prisma.account.create({
+      data
+    });
+  }
+
+  public async deleteAccount(
+    where: Prisma.AccountWhereUniqueInput,
+    aUserId: string
+  ): Promise<Account> {
+    this.redisCacheService.remove(`${aUserId}.portfolio`);
+
+    return this.prisma.account.delete({
+      where
+    });
+  }
+
+  public async updateAccount(
+    params: {
+      where: Prisma.AccountWhereUniqueInput;
+      data: Prisma.AccountUpdateInput;
+    },
+    aUserId: string
+  ): Promise<Account> {
+    const { data, where } = params;
+    return this.prisma.account.update({
+      data,
+      where
+    });
+  }
+}

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

@@ -0,0 +1,35 @@
+import { Currency, DataSource, Type } from '@prisma/client';
+import { IsISO8601, IsNumber, IsString, ValidateIf } from 'class-validator';
+
+export class CreateAccountDto {
+  @IsString()
+  accountId: string;
+
+  @IsString()
+  currency: Currency;
+
+  @IsString()
+  dataSource: DataSource;
+
+  @IsISO8601()
+  date: string;
+
+  @IsNumber()
+  fee: number;
+
+  @IsString()
+  @ValidateIf((object, value) => value !== null)
+  platformId: string | null;
+
+  @IsNumber()
+  quantity: number;
+
+  @IsString()
+  symbol: string;
+
+  @IsString()
+  type: Type;
+
+  @IsNumber()
+  unitPrice: number;
+}

apps/api/src/app/account/interfaces/order-with-platform.type.ts

@@ -0,0 +1,3 @@
+import { Order, Platform } from '@prisma/client';
+
+export type OrderWithPlatform = Order & { Platform?: Platform };

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

@@ -0,0 +1,38 @@
+import { Currency, DataSource, Type } from '@prisma/client';
+import { IsISO8601, IsNumber, IsString, ValidateIf } from 'class-validator';
+
+export class UpdateAccountDto {
+  @IsString()
+  accountId: string;
+
+  @IsString()
+  currency: Currency;
+
+  @IsString()
+  dataSource: DataSource;
+
+  @IsISO8601()
+  date: string;
+
+  @IsNumber()
+  fee: number;
+
+  @IsString()
+  @ValidateIf((object, value) => value !== null)
+  platformId: string | null;
+
+  @IsString()
+  id: string;
+
+  @IsNumber()
+  quantity: number;
+
+  @IsString()
+  symbol: string;
+
+  @IsString()
+  type: Type;
+
+  @IsNumber()
+  unitPrice: number;
+}

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

@@ -97,7 +97,7 @@ export class AdminService {
       },
       select: {
         _count: {
-          select: { Order: true }
+          select: { Account: true, Order: true }
         },
         alias: true,
         Analytics: {

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

@@ -16,6 +16,7 @@ import { YahooFinanceService } from '../services/data-provider/yahoo-finance/yah
 import { ExchangeRateDataService } from '../services/exchange-rate-data.service';
 import { PrismaService } from '../services/prisma.service';
 import { AccessModule } from './access/access.module';
+import { AccountModule } from './account/account.module';
 import { AdminModule } from './admin/admin.module';
 import { AppController } from './app.controller';
 import { AuthModule } from './auth/auth.module';
@@ -32,6 +33,7 @@ import { UserModule } from './user/user.module';
   imports: [
     AdminModule,
     AccessModule,
+    AccountModule,
     AuthModule,
     CacheModule,
     ConfigModule.forRoot(),

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

@@ -36,7 +36,10 @@ export class ExperimentalService {
     const ordersWithPlatform: OrderWithPlatform[] = aOrders.map((order) => {
       return {
         ...order,
+        accountId: undefined,
+        accountUserId: undefined,
         createdAt: new Date(),
+        dataSource: undefined,
         date: parseISO(order.date),
         fee: 0,
         id: undefined,

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

@@ -1,3 +1,6 @@
-import { Settings, User } from '@prisma/client';
+import { Account, Settings, User } from '@prisma/client';
 
-export type UserWithSettings = User & { Settings: Settings };
+export type UserWithSettings = User & {
+  Account: Account[];
+  Settings: Settings;
+};

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

@@ -1,10 +1,16 @@
-import { Currency, Type } from '@prisma/client';
+import { Currency, DataSource, Type } from '@prisma/client';
 import { IsISO8601, IsNumber, IsString, ValidateIf } from 'class-validator';
 
 export class CreateOrderDto {
+  @IsString()
+  accountId: string;
+
   @IsString()
   currency: Currency;
 
+  @IsString()
+  dataSource: DataSource;
+
   @IsISO8601()
   date: string;
 

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

@@ -71,7 +71,11 @@ export class OrderController {
 
     let orders = await this.orderService.orders({
       include: {
-        Platform: true
+        Account: {
+          include: {
+            Platform: true
+          }
+        }
       },
       orderBy: { date: 'desc' },
       where: { userId: impersonationUserId || this.request.user.id }
@@ -118,6 +122,9 @@ export class OrderController {
 
     const date = parseISO(data.date);
 
+    const accountId = data.accountId;
+    delete data.accountId;
+
     if (data.platformId) {
       const platformId = data.platformId;
       delete data.platformId;
@@ -126,6 +133,11 @@ export class OrderController {
         {
           ...data,
           date,
+          Account: {
+            connect: {
+              id_userId: { id: accountId, userId: this.request.user.id }
+            }
+          },
           Platform: { connect: { id: platformId } },
           User: { connect: { id: this.request.user.id } }
         },
@@ -138,6 +150,11 @@ export class OrderController {
         {
           ...data,
           date,
+          Account: {
+            connect: {
+              id_userId: { id: accountId, userId: this.request.user.id }
+            }
+          },
           User: { connect: { id: this.request.user.id } }
         },
         this.request.user.id
@@ -169,6 +186,9 @@ export class OrderController {
 
     const date = parseISO(data.date);
 
+    const accountId = data.accountId;
+    delete data.accountId;
+
     if (data.platformId) {
       const platformId = data.platformId;
       delete data.platformId;
@@ -178,6 +198,11 @@ export class OrderController {
           data: {
             ...data,
             date,
+            Account: {
+              connect: {
+                id_userId: { id: accountId, userId: this.request.user.id }
+              }
+            },
             Platform: { connect: { id: platformId } },
             User: { connect: { id: this.request.user.id } }
           },
@@ -199,6 +224,11 @@ export class OrderController {
           data: {
             ...data,
             date,
+            Account: {
+              connect: {
+                id_userId: { id: accountId, userId: this.request.user.id }
+              }
+            },
             Platform: originalOrder.platformId
               ? { disconnect: true }
               : undefined,

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

@@ -1,10 +1,16 @@
-import { Currency, Type } from '@prisma/client';
+import { Currency, DataSource, Type } from '@prisma/client';
 import { IsISO8601, IsNumber, IsString, ValidateIf } from 'class-validator';
 
 export class UpdateOrderDto {
+  @IsString()
+  accountId: string;
+
   @IsString()
   currency: Currency;
 
+  @IsString()
+  dataSource: DataSource;
+
   @IsISO8601()
   date: string;
 

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

@@ -16,4 +16,5 @@ export interface Position {
   investmentInOriginalCurrency?: number;
   marketPrice?: number;
   quantity: number;
+  transactionCount: number;
 }

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

@@ -1,6 +1,8 @@
+import { Currency } from '@prisma/client';
+
 export interface PortfolioPositionDetail {
   averagePrice: number;
-  currency: string;
+  currency: Currency;
   firstBuyDate: string;
   grossPerformance: number;
   grossPerformancePercent: number;
@@ -11,6 +13,7 @@ export interface PortfolioPositionDetail {
   minPrice: number;
   quantity: number;
   symbol: string;
+  transactionCount: number;
 }
 
 export interface HistoricalDataItem {

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

@@ -20,6 +20,7 @@ export interface PortfolioPosition {
   sector?: string;
   shareCurrent: number;
   shareInvestment: number;
+  transactionCount: number;
   symbol: string;
   type?: string;
   url?: string;

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

@@ -209,7 +209,8 @@ export class PortfolioService {
         firstBuyDate,
         investment,
         marketPrice,
-        quantity
+        quantity,
+        transactionCount
       } = portfolio.getPositions(new Date())[aSymbol];
 
       const historicalData = await this.dataProviderService.getHistorical(
@@ -262,6 +263,7 @@ export class PortfolioService {
         maxPrice,
         minPrice,
         quantity,
+        transactionCount,
         grossPerformance: this.exchangeRateDataService.toCurrency(
           marketPrice - averagePrice,
           currency,
@@ -315,7 +317,8 @@ export class PortfolioService {
         maxPrice: undefined,
         minPrice: undefined,
         quantity: undefined,
-        symbol: aSymbol
+        symbol: aSymbol,
+        transactionCount: undefined
       };
     }
 
@@ -331,7 +334,8 @@ export class PortfolioService {
       maxPrice: undefined,
       minPrice: undefined,
       quantity: undefined,
-      symbol: aSymbol
+      symbol: aSymbol,
+      transactionCount: undefined
     };
   }
 

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

@@ -1,6 +1,7 @@
-import { Currency } from '@prisma/client';
+import { Currency, DataSource } from '@prisma/client';
 
 export interface SymbolItem {
   currency: Currency;
+  dataSource: DataSource;
   marketPrice: number;
 }

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

@@ -1,4 +1,6 @@
+import { DataGatheringService } from '@ghostfolio/api/services/data-gathering.service';
 import { DataProviderService } from '@ghostfolio/api/services/data-provider.service';
+import { GhostfolioScraperApiService } from '@ghostfolio/api/services/data-provider/ghostfolio-scraper-api/ghostfolio-scraper-api.service';
 import { convertFromYahooSymbol } from '@ghostfolio/api/services/data-provider/yahoo-finance/yahoo-finance.service';
 import { Injectable } from '@nestjs/common';
 import { Currency } from '@prisma/client';
@@ -10,31 +12,51 @@ import { SymbolItem } from './interfaces/symbol-item.interface';
 @Injectable()
 export class SymbolService {
   public constructor(
-    private readonly dataProviderService: DataProviderService
+    private readonly dataProviderService: DataProviderService,
+    private readonly ghostfolioScraperApiService: GhostfolioScraperApiService
   ) {}
 
   public async get(aSymbol: string): Promise<SymbolItem> {
     const response = await this.dataProviderService.get([aSymbol]);
-    const { currency, marketPrice } = response[aSymbol];
+    const { currency, dataSource, marketPrice } = response[aSymbol];
 
     return {
+      dataSource,
       marketPrice,
       currency: <Currency>(<unknown>currency)
     };
   }
 
-  public async lookup(aQuery: string): Promise<LookupItem[]> {
+  public async lookup(aQuery = ''): Promise<LookupItem[]> {
+    const query = aQuery.toLowerCase();
+    const results: LookupItem[] = [];
+
+    if (!query) {
+      return results;
+    }
+
     const get = bent(
-      `https://query1.finance.yahoo.com/v1/finance/search?q=${aQuery}&lang=en-US&region=US&quotesCount=8&newsCount=0&enableFuzzyQuery=false&quotesQueryId=tss_match_phrase_query&multiQuoteQueryId=multi_quote_single_token_query&newsQueryId=news_cie_vespa&enableCb=true&enableNavLinks=false&enableEnhancedTrivialQuery=true`,
+      `https://query1.finance.yahoo.com/v1/finance/search?q=${query}&lang=en-US&region=US&quotesCount=8&newsCount=0&enableFuzzyQuery=false&quotesQueryId=tss_match_phrase_query&multiQuoteQueryId=multi_quote_single_token_query&newsQueryId=news_cie_vespa&enableCb=true&enableNavLinks=false&enableEnhancedTrivialQuery=true`,
       'GET',
       'json',
       200
     );
 
+    // Add custom symbols
+    const scraperConfigurations = await this.ghostfolioScraperApiService.getScraperConfigurations();
+    scraperConfigurations.forEach((scraperConfiguration) => {
+      if (scraperConfiguration.name.toLowerCase().startsWith(query)) {
+        results.push({
+          name: scraperConfiguration.name,
+          symbol: scraperConfiguration.symbol
+        });
+      }
+    });
+
     try {
       const { quotes } = await get();
 
-      return quotes
+      const searchResult = quotes
         .filter(({ isYahooFinance }) => {
           return isYahooFinance;
         })
@@ -59,6 +81,8 @@ export class SymbolService {
             symbol: convertFromYahooSymbol(symbol)
           };
         });
+
+      return results.concat(searchResult);
     } catch (error) {
       console.error(error);
 

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

@@ -1,9 +1,10 @@
-import { Currency } from '@prisma/client';
+import { Account, Currency } from '@prisma/client';
 
 import { Access } from './access.interface';
 
 export interface User {
   access: Access[];
+  accounts: Account[];
   alias?: string;
   id: string;
   permissions: string[];

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

@@ -25,6 +25,7 @@ export class UserService {
   ) {}
 
   public async getUser({
+    Account,
     alias,
     id,
     role,
@@ -53,6 +54,7 @@ export class UserService {
           id: accessItem.id
         };
       }),
+      accounts: Account,
       permissions: currentPermissions,
       settings: {
         baseCurrency: Settings?.currency || UserService.DEFAULT_CURRENCY,
@@ -69,7 +71,7 @@ export class UserService {
     userWhereUniqueInput: Prisma.UserWhereUniqueInput
   ): Promise<UserWithSettings | null> {
     const user = await this.prisma.user.findUnique({
-      include: { Settings: true },
+      include: { Account: true, Settings: true },
       where: userWhereUniqueInput
     });
 

apps/api/src/models/portfolio.spec.ts

@@ -1,6 +1,6 @@
 import { baseCurrency, getUtc, getYesterday } from '@ghostfolio/helper';
 import { Test } from '@nestjs/testing';
-import { Currency, Role, Type } from '@prisma/client';
+import { AccountType, Currency, DataSource, Role, Type } from '@prisma/client';
 
 import { ConfigurationService } from '../services/configuration.service';
 import { DataProviderService } from '../services/data-provider.service';
@@ -14,6 +14,9 @@ import { PrismaService } from '../services/prisma.service';
 import { RulesService } from '../services/rules.service';
 import { Portfolio } from './portfolio';
 
+const DEFAULT_ACCOUNT_ID = '693a834b-eb89-42c9-ae47-35196c25d269';
+const USER_ID = 'ca6ce867-5d31-495a-bce9-5942bbca9237';
+
 describe('Portfolio', () => {
   let alphaVantageService: AlphaVantageService;
   let configurationService: ConfigurationService;
@@ -67,15 +70,27 @@ describe('Portfolio', () => {
     );
     portfolio.setUser({
       accessToken: null,
+      Account: [
+        {
+          accountType: AccountType.SECURITIES,
+          createdAt: new Date(),
+          id: DEFAULT_ACCOUNT_ID,
+          isDefault: true,
+          name: 'Default Account',
+          platformId: null,
+          updatedAt: new Date(),
+          userId: USER_ID
+        }
+      ],
       alias: 'Test',
       createdAt: new Date(),
-      id: '',
+      id: USER_ID,
       provider: null,
       role: Role.USER,
       Settings: {
         currency: Currency.CHF,
         updatedAt: new Date(),
-        userId: ''
+        userId: USER_ID
       },
       thirdPartyId: null,
       updatedAt: new Date()
@@ -126,8 +141,11 @@ describe('Portfolio', () => {
     it('should return ["BTC"]', async () => {
       await portfolio.setOrders([
         {
+          accountId: DEFAULT_ACCOUNT_ID,
+          accountUserId: USER_ID,
           createdAt: null,
           currency: Currency.USD,
+          dataSource: DataSource.YAHOO,
           fee: 0,
           date: new Date(),
           id: '8d999347-dee2-46ee-88e1-26b344e71fcc',
@@ -137,7 +155,7 @@ describe('Portfolio', () => {
           type: Type.BUY,
           unitPrice: 49631.24,
           updatedAt: null,
-          userId: null
+          userId: USER_ID
         }
       ]);
 
@@ -182,6 +200,7 @@ describe('Portfolio', () => {
           // shareCurrent: 0.9999999559148652,
           shareInvestment: 1,
           symbol: 'BTCUSD',
+          transactionCount: 0,
           type: 'Cryptocurrency'
         }
       });
@@ -224,8 +243,11 @@ describe('Portfolio', () => {
     it('should return ["ETHUSD"]', async () => {
       await portfolio.setOrders([
         {
+          accountId: DEFAULT_ACCOUNT_ID,
+          accountUserId: USER_ID,
           createdAt: null,
           currency: Currency.USD,
+          dataSource: DataSource.YAHOO,
           fee: 0,
           date: new Date(getUtc('2018-01-05')),
           id: '4a5a5c6e-659d-45cc-9fd4-fd6c873b50fb',
@@ -235,7 +257,7 @@ describe('Portfolio', () => {
           type: Type.BUY,
           unitPrice: 991.49,
           updatedAt: null,
-          userId: null
+          userId: USER_ID
         }
       ]);
 
@@ -276,8 +298,9 @@ describe('Portfolio', () => {
             }
           },
           quantity: 0.2,
-          shareCurrent: 1,
+          // shareCurrent: 1,
           shareInvestment: 1,
+          transactionCount: 1,
           symbol: 'ETHUSD',
           type: 'Cryptocurrency'
         }
@@ -316,8 +339,11 @@ describe('Portfolio', () => {
     it('should return ["ETHUSD"]', async () => {
       await portfolio.setOrders([
         {
+          accountId: DEFAULT_ACCOUNT_ID,
+          accountUserId: USER_ID,
           createdAt: null,
           currency: Currency.USD,
+          dataSource: DataSource.YAHOO,
           fee: 0,
           date: new Date(getUtc('2018-01-05')),
           id: '4a5a5c6e-659d-45cc-9fd4-fd6c873b50fb',
@@ -327,11 +353,14 @@ describe('Portfolio', () => {
           type: Type.BUY,
           unitPrice: 991.49,
           updatedAt: null,
-          userId: null
+          userId: USER_ID
         },
         {
+          accountId: DEFAULT_ACCOUNT_ID,
+          accountUserId: USER_ID,
           createdAt: null,
           currency: Currency.USD,
+          dataSource: DataSource.YAHOO,
           fee: 0,
           date: new Date(getUtc('2018-01-28')),
           id: '4a5a5c6e-659d-45cc-9fd4-fd6c873b50fc',
@@ -341,7 +370,7 @@ describe('Portfolio', () => {
           type: Type.BUY,
           unitPrice: 1050,
           updatedAt: null,
-          userId: null
+          userId: USER_ID
         }
       ]);
 
@@ -388,8 +417,11 @@ describe('Portfolio', () => {
     it('should return ["BTCUSD", "ETHUSD"]', async () => {
       await portfolio.setOrders([
         {
+          accountId: DEFAULT_ACCOUNT_ID,
+          accountUserId: USER_ID,
           createdAt: null,
           currency: Currency.EUR,
+          dataSource: DataSource.YAHOO,
           date: new Date(getUtc('2017-08-16')),
           fee: 2.99,
           id: 'd96795b2-6ae6-420e-aa21-fabe5e45d475',
@@ -399,11 +431,14 @@ describe('Portfolio', () => {
           type: Type.BUY,
           unitPrice: 3562.089535970158,
           updatedAt: null,
-          userId: null
+          userId: USER_ID
         },
         {
+          accountId: DEFAULT_ACCOUNT_ID,
+          accountUserId: USER_ID,
           createdAt: null,
           currency: Currency.USD,
+          dataSource: DataSource.YAHOO,
           fee: 2.99,
           date: new Date(getUtc('2018-01-05')),
           id: '4a5a5c6e-659d-45cc-9fd4-fd6c873b50fb',
@@ -413,7 +448,7 @@ describe('Portfolio', () => {
           type: Type.BUY,
           unitPrice: 991.49,
           updatedAt: null,
-          userId: null
+          userId: USER_ID
         }
       ]);
 
@@ -473,8 +508,11 @@ describe('Portfolio', () => {
     it('should work with buy and sell', async () => {
       await portfolio.setOrders([
         {
+          accountId: DEFAULT_ACCOUNT_ID,
+          accountUserId: USER_ID,
           createdAt: null,
           currency: Currency.USD,
+          dataSource: DataSource.YAHOO,
           fee: 1.0,
           date: new Date(getUtc('2018-01-05')),
           id: '4a5a5c6e-659d-45cc-9fd4-fd6c873b50fb',
@@ -484,11 +522,14 @@ describe('Portfolio', () => {
           type: Type.BUY,
           unitPrice: 991.49,
           updatedAt: null,
-          userId: null
+          userId: USER_ID
         },
         {
+          accountId: DEFAULT_ACCOUNT_ID,
+          accountUserId: USER_ID,
           createdAt: null,
           currency: Currency.USD,
+          dataSource: DataSource.YAHOO,
           fee: 1.0,
           date: new Date(getUtc('2018-01-28')),
           id: '4a5a5c6e-659d-45cc-9fd4-fd6c873b50fc',
@@ -498,11 +539,14 @@ describe('Portfolio', () => {
           type: Type.SELL,
           unitPrice: 1050,
           updatedAt: null,
-          userId: null
+          userId: USER_ID
         },
         {
+          accountId: DEFAULT_ACCOUNT_ID,
+          accountUserId: USER_ID,
           createdAt: null,
           currency: Currency.USD,
+          dataSource: DataSource.YAHOO,
           fee: 1.0,
           date: new Date(getUtc('2018-01-31')),
           id: '4a5a5c6e-659d-45cc-9fd4-fd6c873b50fc',
@@ -512,7 +556,7 @@ describe('Portfolio', () => {
           type: Type.BUY,
           unitPrice: 1050,
           updatedAt: null,
-          userId: null
+          userId: USER_ID
         }
       ]);
 

apps/api/src/models/portfolio.ts

@@ -57,7 +57,7 @@ export class Portfolio implements PortfolioInterface {
   public async addCurrentPortfolioItems() {
     const currentData = await this.dataProviderService.get(this.getSymbols());
 
-    let currentDate = new Date();
+    const currentDate = new Date();
 
     const year = getYear(currentDate);
     const month = getMonth(currentDate);
@@ -82,7 +82,9 @@ export class Portfolio implements PortfolioInterface {
         marketPrice:
           currentData[symbol]?.marketPrice ??
           portfolioItemsYesterday.positions[symbol]?.marketPrice,
-        quantity: portfolioItemsYesterday?.positions[symbol]?.quantity
+        quantity: portfolioItemsYesterday?.positions[symbol]?.quantity,
+        transactionCount:
+          portfolioItemsYesterday?.positions[symbol]?.transactionCount
       };
     });
 
@@ -289,7 +291,9 @@ export class Portfolio implements PortfolioInterface {
             data[symbol]?.currency,
             this.user.Settings.currency
           ) / value,
-        shareInvestment: portfolioItem.positions[symbol].investment / investment
+        shareInvestment:
+          portfolioItem.positions[symbol].investment / investment,
+        transactionCount: portfolioItem.positions[symbol].transactionCount
       };
     });
 
@@ -582,7 +586,8 @@ export class Portfolio implements PortfolioInterface {
           marketPrice:
             historicalData[symbol]?.[format(currentDate, 'yyyy-MM-dd')]
               ?.marketPrice || 0,
-          quantity: 0
+          quantity: 0,
+          transactionCount: 0
         };
       });
 
@@ -623,7 +628,8 @@ export class Portfolio implements PortfolioInterface {
           marketPrice:
             historicalData[symbol]?.[format(yesterday, 'yyyy-MM-dd')]
               ?.marketPrice || 0,
-          quantity: 0
+          quantity: 0,
+          transactionCount: 0
         };
       });
 
@@ -730,6 +736,10 @@ export class Portfolio implements PortfolioInterface {
           order.getSymbol()
         ].currency = order.getCurrency();
 
+        this.portfolioItems[i].positions[
+          order.getSymbol()
+        ].transactionCount += 1;
+
         if (order.getType() === 'BUY') {
           if (
             !this.portfolioItems[i].positions[order.getSymbol()].firstBuyDate

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

@@ -18,6 +18,7 @@ import {
 
 import { ConfigurationService } from './configuration.service';
 import { DataProviderService } from './data-provider.service';
+import { GhostfolioScraperApiService } from './data-provider/ghostfolio-scraper-api/ghostfolio-scraper-api.service';
 import { PrismaService } from './prisma.service';
 
 @Injectable()
@@ -25,6 +26,7 @@ export class DataGatheringService {
   public constructor(
     private readonly configurationService: ConfigurationService,
     private readonly dataProviderService: DataProviderService,
+    private readonly ghostfolioScraperApi: GhostfolioScraperApiService,
     private prisma: PrismaService
   ) {}
 
@@ -183,6 +185,17 @@ export class DataGatheringService {
     }
   }
 
+  public async getCustomSymbolsToGather(startDate?: Date) {
+    const scraperConfigurations = await this.ghostfolioScraperApi.getScraperConfigurations();
+
+    return scraperConfigurations.map((scraperConfiguration) => {
+      return {
+        date: startDate,
+        symbol: scraperConfiguration.symbol
+      };
+    });
+  }
+
   private getBenchmarksToGather(startDate: Date) {
     const benchmarksToGather = benchmarks.map((symbol) => {
       return {
@@ -201,32 +214,6 @@ export class DataGatheringService {
     return benchmarksToGather;
   }
 
-  private async getCustomSymbolsToGather(startDate: Date) {
-    const customSymbolsToGather = [];
-
-    if (this.configurationService.get('ENABLE_FEATURE_CUSTOM_SYMBOLS')) {
-      try {
-        const {
-          value: scraperConfigString
-        } = await this.prisma.property.findFirst({
-          select: {
-            value: true
-          },
-          where: { key: 'SCRAPER_CONFIG' }
-        });
-
-        JSON.parse(scraperConfigString).forEach((item) => {
-          customSymbolsToGather.push({
-            date: startDate,
-            symbol: item.symbol
-          });
-        });
-      } catch {}
-    }
-
-    return customSymbolsToGather;
-  }
-
   private async getSymbols7D(): Promise<{ date: Date; symbol: string }[]> {
     const startDate = subDays(resetHours(new Date()), 7);
 

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

@@ -1,5 +1,6 @@
 import { getYesterday } from '@ghostfolio/helper';
 import { Injectable } from '@nestjs/common';
+import { DataSource } from '@prisma/client';
 import * as bent from 'bent';
 import * as cheerio from 'cheerio';
 import { format } from 'date-fns';
@@ -12,6 +13,7 @@ import {
   MarketState
 } from '../../interfaces/interfaces';
 import { PrismaService } from '../../prisma.service';
+import { ScraperConfig } from './interfaces/scraper-config.interface';
 
 @Injectable()
 export class GhostfolioScraperApiService implements DataProviderInterface {
@@ -29,7 +31,7 @@ export class GhostfolioScraperApiService implements DataProviderInterface {
     try {
       const symbol = aSymbols[0];
 
-      const scraperConfig = await this.getScraperConfig(symbol);
+      const scraperConfig = await this.getScraperConfigurationBySymbol(symbol);
 
       const { marketPrice } = await this.prisma.marketData.findFirst({
         orderBy: {
@@ -44,6 +46,7 @@ export class GhostfolioScraperApiService implements DataProviderInterface {
         [symbol]: {
           marketPrice,
           currency: scraperConfig?.currency,
+          dataSource: DataSource.GHOSTFOLIO,
           marketState: MarketState.delayed,
           name: scraperConfig?.name
         }
@@ -70,15 +73,17 @@ export class GhostfolioScraperApiService implements DataProviderInterface {
     try {
       const symbol = aSymbols[0];
 
-      const scraperConfig = await this.getScraperConfig(symbol);
+      const scraperConfiguration = await this.getScraperConfigurationBySymbol(
+        symbol
+      );
 
-      const get = bent(scraperConfig?.url, 'GET', 'string', 200, {});
+      const get = bent(scraperConfiguration?.url, 'GET', 'string', 200, {});
 
       const html = await get();
       const $ = cheerio.load(html);
 
       const value = this.extractNumberFromString(
-        $(scraperConfig?.selector).text()
+        $(scraperConfiguration?.selector).text()
       );
 
       return {
@@ -95,6 +100,23 @@ export class GhostfolioScraperApiService implements DataProviderInterface {
     return {};
   }
 
+  public async getScraperConfigurations(): Promise<ScraperConfig[]> {
+    try {
+      const {
+        value: scraperConfigString
+      } = await this.prisma.property.findFirst({
+        select: {
+          value: true
+        },
+        where: { key: 'SCRAPER_CONFIG' }
+      });
+
+      return JSON.parse(scraperConfigString);
+    } catch {}
+
+    return [];
+  }
+
   private extractNumberFromString(aString: string): number {
     try {
       const [numberString] = aString.match(
@@ -106,22 +128,10 @@ export class GhostfolioScraperApiService implements DataProviderInterface {
     }
   }
 
-  private async getScraperConfig(aSymbol: string) {
-    try {
-      const {
-        value: scraperConfigString
-      } = await this.prisma.property.findFirst({
-        select: {
-          value: true
-        },
-        where: { key: 'SCRAPER_CONFIG' }
-      });
-
-      return JSON.parse(scraperConfigString).find((item) => {
-        return item.symbol === aSymbol;
-      });
-    } catch {}
-
-    return {};
+  private async getScraperConfigurationBySymbol(aSymbol: string) {
+    const scraperConfigurations = await this.getScraperConfigurations();
+    return scraperConfigurations.find((scraperConfiguration) => {
+      return scraperConfiguration.symbol === aSymbol;
+    });
   }
 }

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

@@ -0,0 +1,9 @@
+import { Currency } from '@prisma/client';
+
+export interface ScraperConfig {
+  currency: Currency;
+  name: string;
+  selector: string;
+  symbol: string;
+  url: string;
+}

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

@@ -1,5 +1,6 @@
 import { getToday, getYesterday } from '@ghostfolio/helper';
 import { Injectable } from '@nestjs/common';
+import { DataSource } from '@prisma/client';
 import * as bent from 'bent';
 import { format, subMonths, subWeeks, subYears } from 'date-fns';
 
@@ -39,6 +40,7 @@ export class RakutenRapidApiService implements DataProviderInterface {
         return {
           'GF.FEAR_AND_GREED_INDEX': {
             currency: undefined,
+            dataSource: DataSource.RAKUTEN,
             marketPrice: fgi.now.value,
             marketState: MarketState.open,
             name: RakutenRapidApiService.FEAR_AND_GREED_INDEX_NAME

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

@@ -1,5 +1,6 @@
 import { isCrypto, isCurrency, parseCurrency } from '@ghostfolio/helper';
 import { Injectable } from '@nestjs/common';
+import { DataSource } from '@prisma/client';
 import { format } from 'date-fns';
 import * as yahooFinance from 'yahoo-finance';
 
@@ -49,6 +50,7 @@ export class YahooFinanceService implements DataProviderInterface {
 
         response[symbol] = {
           currency: parseCurrency(value.price?.currency),
+          dataSource: DataSource.YAHOO,
           exchange: this.parseExchange(value.price?.exchangeName),
           marketState:
             value.price?.marketState === 'REGULAR' || isCrypto(symbol)

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

@@ -1,4 +1,4 @@
-import { Currency, Platform } from '@prisma/client';
+import { Currency, DataSource, Platform } from '@prisma/client';
 
 import { OrderType } from '../../models/order-type';
 
@@ -51,6 +51,7 @@ export interface IDataProviderHistoricalResponse {
 
 export interface IDataProviderResponse {
   currency: Currency;
+  dataSource: DataSource;
   exchange?: string;
   industry?: Industry;
   marketChange?: number;

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

@@ -9,11 +9,6 @@ const routes: Routes = [
     loadChildren: () =>
       import('./pages/about/about-page.module').then((m) => m.AboutPageModule)
   },
-  {
-    path: 'admin',
-    loadChildren: () =>
-      import('./pages/admin/admin-page.module').then((m) => m.AdminPageModule)
-  },
   {
     path: 'account',
     loadChildren: () =>
@@ -21,6 +16,18 @@ const routes: Routes = [
         (m) => m.AccountPageModule
       )
   },
+  {
+    path: 'accounts',
+    loadChildren: () =>
+      import('./pages/accounts/accounts-page.module').then(
+        (m) => m.AccountsPageModule
+      )
+  },
+  {
+    path: 'admin',
+    loadChildren: () =>
+      import('./pages/admin/admin-page.module').then((m) => m.AdminPageModule)
+  },
   {
     path: 'auth',
     loadChildren: () =>

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

@@ -74,7 +74,7 @@ export class AppComponent implements OnDestroy, OnInit {
 
             this.canCreateAccount = hasPermission(
               this.user.permissions,
-              permissions.createAccount
+              permissions.createUserAccount
             );
 
             this.cd.markForCheck();

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

@@ -0,0 +1,86 @@
+<table
+  class="w-100"
+  matSort
+  matSortActive="account"
+  matSortDirection="desc"
+  mat-table
+  [dataSource]="dataSource"
+>
+  <ng-container matColumnDef="account">
+    <th *matHeaderCellDef i18n mat-header-cell mat-sort-header>Name</th>
+    <td *matCellDef="let element" mat-cell>
+      {{ element.name }}
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="type">
+    <th
+      *matHeaderCellDef
+      class="d-none d-lg-table-cell justify-content-center"
+      i18n
+      mat-header-cell
+      mat-sort-header
+    >
+      Type
+    </th>
+    <td
+      mat-cell
+      *matCellDef="let element"
+      class="d-none d-lg-table-cell text-center"
+    >
+      <div class="d-inline-flex justify-content-center px-2 py-1 type-badge">
+        <span>{{ element.accountType }}</span>
+      </div>
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="platform">
+    <th *matHeaderCellDef i18n mat-header-cell mat-sort-header>Platform</th>
+    <td mat-cell *matCellDef="let element">
+      <div class="d-flex">
+        <gf-symbol-icon
+          *ngIf="element.Platform?.url"
+          class="mr-1"
+          [tooltip]=""
+          [url]="element.Platform?.url"
+        ></gf-symbol-icon>
+        <span>{{ element.Platform?.name }}</span>
+      </div>
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="actions">
+    <th *matHeaderCellDef class="px-0 text-center" i18n mat-header-cell></th>
+    <td *matCellDef="let element" class="px-0 text-center" mat-cell>
+      <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)="onUpdateAccount(element)">
+          Edit
+        </button>
+        <button i18n mat-menu-item (click)="onDeleteAccount(element.id)">
+          Delete
+        </button>
+      </mat-menu>
+    </td>
+  </ng-container>
+
+  <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
+  <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
+</table>
+
+<ngx-skeleton-loader
+  *ngIf="isLoading"
+  animation="pulse"
+  class="px-4 py-3"
+  [theme]="{
+    height: '1.5rem',
+    width: '100%'
+  }"
+></ngx-skeleton-loader>

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

@@ -0,0 +1,59 @@
+:host {
+  display: block;
+
+  ::ng-deep {
+    .mat-form-field-infix {
+      border-top: 0 solid transparent !important;
+    }
+  }
+
+  .mat-table {
+    td {
+      border: 0;
+    }
+
+    th {
+      ::ng-deep {
+        .mat-sort-header-container {
+          justify-content: inherit;
+        }
+      }
+    }
+
+    .mat-row {
+      &:nth-child(even) {
+        background-color: rgba(
+          var(--dark-primary-text),
+          var(--palette-background-hover-alpha)
+        );
+      }
+
+      .type-badge {
+        background-color: rgba(var(--dark-primary-text), 0.05);
+        border-radius: 1rem;
+        line-height: 1em;
+      }
+    }
+  }
+}
+
+:host-context(.is-dark-theme) {
+  .mat-form-field {
+    color: rgba(var(--light-primary-text));
+  }
+
+  .mat-table {
+    .mat-row {
+      &:nth-child(even) {
+        background-color: rgba(
+          var(--light-primary-text),
+          var(--palette-background-hover-alpha)
+        );
+      }
+
+      .type-badge {
+        background-color: rgba(var(--light-primary-text), 0.1);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,85 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  Output,
+  ViewChild
+} from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Order as OrderModel } from '@prisma/client';
+import { Subject, Subscription } from 'rxjs';
+
+@Component({
+  selector: 'gf-accounts-table',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './accounts-table.component.html',
+  styleUrls: ['./accounts-table.component.scss']
+})
+export class AccountsTableComponent implements OnChanges, OnDestroy, OnInit {
+  @Input() accounts: OrderModel[];
+  @Input() baseCurrency: string;
+  @Input() deviceType: string;
+  @Input() locale: string;
+  @Input() showActions: boolean;
+
+  @Output() accountDeleted = new EventEmitter<string>();
+  @Output() accountToUpdate = new EventEmitter<OrderModel>();
+
+  @ViewChild(MatSort) sort: MatSort;
+
+  public dataSource: MatTableDataSource<OrderModel> = new MatTableDataSource();
+  public displayedColumns = [];
+  public isLoading = true;
+  public routeQueryParams: Subscription;
+
+  private unsubscribeSubject = new Subject<void>();
+
+  public constructor(
+    private dialog: MatDialog,
+    private route: ActivatedRoute,
+    private router: Router
+  ) {}
+
+  public ngOnInit() {}
+
+  public ngOnChanges() {
+    this.displayedColumns = ['account', 'type', 'platform'];
+
+    this.isLoading = true;
+
+    if (this.showActions) {
+      this.displayedColumns.push('actions');
+    }
+
+    if (this.accounts) {
+      this.dataSource = new MatTableDataSource(this.accounts);
+      this.dataSource.sort = this.sort;
+
+      this.isLoading = false;
+    }
+  }
+
+  public onDeleteAccount(aId: string) {
+    const confirmation = confirm('Do you really want to delete this account?');
+
+    if (confirmation) {
+      this.accountDeleted.emit(aId);
+    }
+  }
+
+  public onUpdateAccount(aAccount: OrderModel) {
+    this.accountToUpdate.emit(aAccount);
+  }
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+}

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

@@ -0,0 +1,33 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { RouterModule } from '@angular/router';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+
+import { GfSymbolIconModule } from '../symbol-icon/symbol-icon.module';
+import { GfValueModule } from '../value/value.module';
+import { AccountsTableComponent } from './accounts-table.component';
+
+@NgModule({
+  declarations: [AccountsTableComponent],
+  exports: [AccountsTableComponent],
+  imports: [
+    CommonModule,
+    GfSymbolIconModule,
+    GfValueModule,
+    MatButtonModule,
+    MatInputModule,
+    MatMenuModule,
+    MatSortModule,
+    MatTableModule,
+    NgxSkeletonLoaderModule,
+    RouterModule
+  ],
+  providers: [],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class GfAccountsTableModule {}

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

@@ -36,6 +36,14 @@
       [color]="currentRoute === 'transactions' ? 'primary' : null"
       >Transactions</a
     >
+    <a
+      class="d-none d-sm-block mx-1"
+      [routerLink]="['/accounts']"
+      i18n
+      mat-flat-button
+      [color]="currentRoute === 'accounts' ? 'primary' : null"
+      >Accounts</a
+    >
     <a
       *ngIf="hasPermissionToAccessAdminControl"
       class="d-none d-sm-block mx-1"
@@ -141,6 +149,14 @@
         [ngClass]="{ 'font-weight-bold': currentRoute === 'transactions' }"
         >Transactions</a
       >
+      <a
+        class="d-block d-sm-none"
+        [routerLink]="['/accounts']"
+        i18n
+        mat-menu-item
+        [ngClass]="{ 'font-weight-bold': currentRoute === 'accounts' }"
+        >Accounts</a
+      >
       <a
         class="align-items-center d-flex"
         [routerLink]="['/account']"
@@ -150,7 +166,7 @@
         >Account</a
       >
       <a
-        *ngIf="hasPermissionForAdminControl"
+        *ngIf="hasPermissionToAccessAdminControl"
         class="d-block d-sm-none"
         [routerLink]="['/admin']"
         i18n

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

@@ -34,16 +34,16 @@
   <div *ngIf="showDetails" class="row">
     <div class="d-flex col justify-content-end">
       <gf-value
-        colorizeSign="true"
-        isCurrency="true"
+        [colorizeSign]="true"
+        [isCurrency]="true"
         [locale]="locale"
         [value]="isLoading ? undefined : performance?.currentNetPerformance"
       ></gf-value>
     </div>
     <div class="col">
       <gf-value
-        colorizeSign="true"
-        isPercent="true"
+        [colorizeSign]="true"
+        [isPercent]="true"
         [locale]="locale"
         [value]="
           isLoading ? undefined : performance?.currentNetPerformancePercent

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

@@ -16,17 +16,17 @@
     <div class="d-flex flex-column flex-wrap justify-content-end">
       <gf-value
         class="justify-content-end mb-2"
-        colorizeSign="true"
         position="end"
+        [colorizeSign]="true"
         [currency]="baseCurrency"
         [locale]="locale"
         [value]="isLoading ? undefined : performance?.currentGrossPerformance"
       ></gf-value>
       <gf-value
         class="justify-content-end"
-        colorizeSign="true"
-        isPercent="true"
         position="end"
+        [colorizeSign]="true"
+        [isPercent]="true"
         [locale]="locale"
         [value]="
           isLoading ? undefined : performance?.currentGrossPerformancePercent
@@ -39,17 +39,17 @@
     <div class="d-flex flex-column flex-wrap justify-content-end">
       <gf-value
         class="justify-content-end mb-2"
-        colorizeSign="true"
         position="end"
+        [colorizeSign]="true"
         [currency]="baseCurrency"
         [locale]="locale"
         [value]="isLoading ? undefined : performance?.currentNetPerformance"
       ></gf-value>
       <gf-value
         class="justify-content-end"
-        colorizeSign="true"
-        isPercent="true"
         position="end"
+        [colorizeSign]="true"
+        [isPercent]="true"
         [locale]="locale"
         [value]="
           isLoading ? undefined : performance?.currentNetPerformancePercent

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

@@ -23,6 +23,7 @@ export class PositionDetailDialog {
   public benchmarkDataItems: LineChartItem[];
   public currency: string;
   public firstBuyDate: string;
+  public grossPerformance: number;
   public grossPerformancePercent: number;
   public historicalDataItems: LineChartItem[];
   public investment: number;
@@ -30,6 +31,7 @@ export class PositionDetailDialog {
   public maxPrice: number;
   public minPrice: number;
   public quantity: number;
+  public transactionCount: number;
 
   public constructor(
     private cd: ChangeDetectorRef,
@@ -44,18 +46,21 @@ export class PositionDetailDialog {
           averagePrice,
           currency,
           firstBuyDate,
+          grossPerformance,
           grossPerformancePercent,
           historicalData,
           investment,
           marketPrice,
           maxPrice,
           minPrice,
-          quantity
+          quantity,
+          transactionCount
         }) => {
           this.averagePrice = averagePrice;
           this.benchmarkDataItems = [];
           this.currency = currency;
           this.firstBuyDate = firstBuyDate;
+          this.grossPerformance = quantity * grossPerformance;
           this.grossPerformancePercent = grossPerformancePercent;
           this.historicalDataItems = historicalData.map(
             (historicalDataItem) => {
@@ -75,6 +80,7 @@ export class PositionDetailDialog {
           this.maxPrice = maxPrice;
           this.minPrice = minPrice;
           this.quantity = quantity;
+          this.transactionCount = transactionCount;
 
           if (isToday(parseISO(this.firstBuyDate))) {
             // Add average price

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

@@ -21,19 +21,22 @@
     <div class="row">
       <div class="col-6 mb-3">
         <gf-value
-          colorizeSign="true"
-          isPercent="true"
-          label="Performance"
+          label="Change"
           size="medium"
+          [colorizeSign]="true"
+          [currency]="data.baseCurrency"
           [locale]="data.locale"
-          [value]="grossPerformancePercent"
+          [value]="grossPerformance"
         ></gf-value>
       </div>
       <div class="col-6 mb-3">
         <gf-value
-          label="First Buy Date"
+          label="Performance"
           size="medium"
-          [value]="firstBuyDate"
+          [colorizeSign]="true"
+          [isPercent]="true"
+          [locale]="data.locale"
+          [value]="grossPerformancePercent"
         ></gf-value>
       </div>
       <div class="col-6 mb-3">
@@ -76,9 +79,9 @@
       </div>
       <div class="col-6 mb-3">
         <gf-value
-          isCurrency="true"
           label="Quantity"
           size="medium"
+          [isCurrency]="true"
           [value]="quantity"
         ></gf-value>
       </div>
@@ -91,6 +94,22 @@
           [value]="investment"
         ></gf-value>
       </div>
+      <div class="col-6 mb-3">
+        <gf-value
+          label="First Buy Date"
+          size="medium"
+          [value]="firstBuyDate"
+        ></gf-value>
+      </div>
+      <div class="col-6 mb-3">
+        <gf-value
+          label="Transactions"
+          size="medium"
+          [isCurrency]="true"
+          [locale]="data.locale"
+          [value]="transactionCount"
+        ></gf-value>
+      </div>
     </div>
   </div>
 </div>

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

@@ -42,14 +42,14 @@
         <div class="d-flex mt-1">
           <gf-value
             class="mr-3"
-            colorizeSign="true"
+            [colorizeSign]="true"
             [currency]="position?.currency"
             [locale]="locale"
             [value]="position?.grossPerformance"
           ></gf-value>
           <gf-value
-            colorizeSign="true"
-            isPercent="true"
+            [colorizeSign]="true"
+            [isPercent]="true"
             [locale]="locale"
             [value]="position?.grossPerformancePercent"
           ></gf-value>

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

@@ -28,8 +28,8 @@
     <td class="d-none d-lg-table-cell" mat-cell *matCellDef="let element">
       <div class="d-flex justify-content-end">
         <gf-value
-          colorizeSign="true"
-          isPercent="true"
+          [colorizeSign]="true"
+          [isPercent]="true"
           [locale]="locale"
           [value]="isLoading ? undefined : element.grossPerformancePercent"
         ></gf-value>
@@ -50,7 +50,7 @@
     <td mat-cell *matCellDef="let element">
       <div class="d-flex justify-content-end">
         <gf-value
-          isPercent="true"
+          [isPercent]="true"
           [locale]="locale"
           [value]="isLoading ? undefined : element.shareInvestment"
         ></gf-value>
@@ -71,7 +71,7 @@
     <td mat-cell *matCellDef="let element">
       <div class="d-flex justify-content-end">
         <gf-value
-          isPercent="true"
+          [isPercent]="true"
           [locale]="locale"
           [value]="isLoading ? undefined : element.shareCurrent"
         ></gf-value>

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

@@ -17,25 +17,21 @@
   mat-table
   [dataSource]="dataSource"
 >
-  <ng-container matColumnDef="platform">
-    <th
-      *matHeaderCellDef
-      class="d-none d-lg-table-cell text-center px-0"
-      i18n
-      mat-header-cell
-    >
-      Platform
-    </th>
-    <td *matCellDef="let element" class="d-none d-lg-table-cell px-0" mat-cell>
-      <div class="d-flex justify-content-center">
+  <ng-container matColumnDef="account">
+    <th *matHeaderCellDef i18n mat-header-cell mat-sort-header>Account</th>
+    <td *matCellDef="let element" mat-cell>
+      <div class="d-flex">
         <gf-symbol-icon
-          *ngIf="element.Platform?.url"
-          [tooltip]="element.Platform?.name"
-          [url]="element.Platform?.url"
+          *ngIf="element.Account?.Platform?.url"
+          class="mr-1"
+          [tooltip]="element.Account?.Platform?.name"
+          [url]="element.Account?.Platform?.url"
         ></gf-symbol-icon>
+        <span class="d-none d-lg-block">{{ element.Account?.name }}</span>
       </div>
     </td>
   </ng-container>
+
   <ng-container matColumnDef="date">
     <th
       *matHeaderCellDef
@@ -116,7 +112,7 @@
     <td *matCellDef="let element" class="d-none d-lg-table-cell" mat-cell>
       <div class="d-flex justify-content-end">
         <gf-value
-          isCurrency="true"
+          [isCurrency]="true"
           [locale]="locale"
           [value]="isLoading ? undefined : element.quantity"
         ></gf-value>
@@ -137,7 +133,7 @@
     <td *matCellDef="let element" class="d-none d-lg-table-cell" mat-cell>
       <div class="d-flex justify-content-end">
         <gf-value
-          isCurrency="true"
+          [isCurrency]="true"
           [locale]="locale"
           [value]="isLoading ? undefined : element.unitPrice"
         ></gf-value>
@@ -158,7 +154,7 @@
     <td class="d-none d-lg-table-cell" mat-cell *matCellDef="let element">
       <div class="d-flex justify-content-end">
         <gf-value
-          isCurrency="true"
+          [isCurrency]="true"
           [locale]="locale"
           [value]="isLoading ? undefined : element.fee"
         ></gf-value>

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

@@ -68,7 +68,7 @@ export class TransactionsTableComponent
 
   public ngOnChanges() {
     this.displayedColumns = [
-      'platform',
+      'account',
       'date',
       'type',
       'symbol',

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

@@ -42,6 +42,8 @@ export class AboutPageComponent implements OnInit {
         info.globalPermissions,
         permissions.enableSubscription
       );
+
+      this.cd.markForCheck();
     });
 
     this.isLoggedIn = !!this.tokenStorageService.getToken();

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

@@ -8,11 +8,10 @@ import {
   hasPermission,
   permissions
 } from '@ghostfolio/helper';
+import { Currency } from '@prisma/client';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
-import { Currency } from '.prisma/client';
-
 @Component({
   selector: 'gf-account-page',
   templateUrl: './account-page.html',

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

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

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

@@ -0,0 +1,215 @@
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { ActivatedRoute, Router } from '@angular/router';
+import { UpdateOrderDto } from '@ghostfolio/api/app/order/update-order.dto';
+import { User } from '@ghostfolio/api/app/user/interfaces/user.interface';
+import { DataService } from '@ghostfolio/client/services/data.service';
+import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
+import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service';
+import { hasPermission, permissions } from '@ghostfolio/helper';
+import { Order as OrderModel } from '@prisma/client';
+import { DeviceDetectorService } from 'ngx-device-detector';
+import { Subject, Subscription } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import { CreateOrUpdateAccountDialog } from './create-or-update-account-dialog/create-or-update-account-dialog.component';
+
+@Component({
+  selector: 'gf-accounts-page',
+  templateUrl: './accounts-page.html',
+  styleUrls: ['./accounts-page.scss']
+})
+export class AccountsPageComponent implements OnInit {
+  public accounts: OrderModel[];
+  public deviceType: string;
+  public hasImpersonationId: boolean;
+  public hasPermissionToCreateAccount: boolean;
+  public hasPermissionToDeleteAccount: boolean;
+  public routeQueryParams: Subscription;
+  public user: User;
+
+  private unsubscribeSubject = new Subject<void>();
+
+  /**
+   * @constructor
+   */
+  public constructor(
+    private cd: ChangeDetectorRef,
+    private dataService: DataService,
+    private deviceService: DeviceDetectorService,
+    private dialog: MatDialog,
+    private impersonationStorageService: ImpersonationStorageService,
+    private route: ActivatedRoute,
+    private router: Router,
+    private tokenStorageService: TokenStorageService
+  ) {
+    this.routeQueryParams = route.queryParams
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((params) => {
+        if (params['createDialog']) {
+          this.openCreateAccountDialog();
+        } else if (params['editDialog']) {
+          if (this.accounts) {
+            const account = this.accounts.find((account) => {
+              return account.id === params['transactionId'];
+            });
+
+            this.openUpdateAccountDialog(account);
+          } else {
+            this.router.navigate(['.'], { relativeTo: this.route });
+          }
+        }
+      });
+  }
+
+  /**
+   * Initializes the controller
+   */
+  public ngOnInit() {
+    this.deviceType = this.deviceService.getDeviceInfo().deviceType;
+
+    this.impersonationStorageService
+      .onChangeHasImpersonation()
+      .subscribe((aId) => {
+        this.hasImpersonationId = !!aId;
+      });
+
+    this.tokenStorageService
+      .onChangeHasToken()
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(() => {
+        this.dataService.fetchUser().subscribe((user) => {
+          this.user = user;
+          this.hasPermissionToCreateAccount = hasPermission(
+            user.permissions,
+            permissions.createAccount
+          );
+          this.hasPermissionToDeleteAccount = hasPermission(
+            user.permissions,
+            permissions.deleteAccount
+          );
+
+          this.cd.markForCheck();
+        });
+      });
+
+    this.fetchAccounts();
+  }
+
+  public fetchAccounts() {
+    this.dataService.fetchAccounts().subscribe((response) => {
+      this.accounts = response;
+
+      if (this.accounts?.length <= 0) {
+        this.router.navigate([], { queryParams: { createDialog: true } });
+      }
+
+      this.cd.markForCheck();
+    });
+  }
+
+  public onDeleteAccount(aId: string) {
+    this.dataService.deleteAccount(aId).subscribe({
+      next: () => {
+        this.fetchAccounts();
+      }
+    });
+  }
+
+  public onUpdateAccount(aAccount: OrderModel) {
+    this.router.navigate([], {
+      queryParams: { editDialog: true, transactionId: aAccount.id }
+    });
+  }
+
+  public openUpdateAccountDialog({
+    accountId,
+    currency,
+    dataSource,
+    date,
+    fee,
+    id,
+    platformId,
+    quantity,
+    symbol,
+    type,
+    unitPrice
+  }: OrderModel): void {
+    const dialogRef = this.dialog.open(CreateOrUpdateAccountDialog, {
+      data: {
+        accounts: this.user.accounts,
+        transaction: {
+          accountId,
+          currency,
+          dataSource,
+          date,
+          fee,
+          id,
+          platformId,
+          quantity,
+          symbol,
+          type,
+          unitPrice
+        }
+      },
+      height: this.deviceType === 'mobile' ? '97.5vh' : '80vh',
+      width: this.deviceType === 'mobile' ? '100vw' : '50rem'
+    });
+
+    dialogRef.afterClosed().subscribe((data: any) => {
+      const transaction: UpdateOrderDto = data?.transaction;
+
+      if (transaction) {
+        this.dataService.putAccount(transaction).subscribe({
+          next: () => {
+            this.fetchAccounts();
+          }
+        });
+      }
+
+      this.router.navigate(['.'], { relativeTo: this.route });
+    });
+  }
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+
+  private openCreateAccountDialog(): void {
+    const dialogRef = this.dialog.open(CreateOrUpdateAccountDialog, {
+      data: {
+        accounts: this.user?.accounts,
+        transaction: {
+          accountId: this.user?.accounts.find((account) => {
+            return account.isDefault;
+          })?.id,
+          currency: null,
+          date: new Date(),
+          fee: 0,
+          platformId: null,
+          quantity: null,
+          symbol: null,
+          type: 'BUY',
+          unitPrice: null
+        }
+      },
+      height: this.deviceType === 'mobile' ? '97.5vh' : '80vh',
+      width: this.deviceType === 'mobile' ? '100vw' : '50rem'
+    });
+
+    dialogRef.afterClosed().subscribe((data: any) => {
+      const transaction: UpdateOrderDto = data?.transaction;
+
+      if (transaction) {
+        this.dataService.postAccount(transaction).subscribe({
+          next: () => {
+            this.fetchAccounts();
+          }
+        });
+      }
+
+      this.router.navigate(['.'], { relativeTo: this.route });
+    });
+  }
+}

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

@@ -0,0 +1,31 @@
+<div class="container">
+  <div class="row mb-3">
+    <div class="col">
+      <h3 class="d-flex justify-content-center mb-3" i18n>Accounts</h3>
+      <gf-accounts-table
+        [accounts]="accounts"
+        [baseCurrency]="user?.settings?.baseCurrency"
+        [deviceType]="deviceType"
+        [locale]="user?.settings?.locale"
+        [showActions]="!hasImpersonationId && hasPermissionToDeleteAccount"
+        (accountDeleted)="onDeleteAccount($event)"
+        (accountToUpdate)="onUpdateAccount($event)"
+      ></gf-accounts-table>
+    </div>
+  </div>
+
+  <div
+    *ngIf="!hasImpersonationId && hasPermissionToCreateAccount"
+    class="fab-container"
+  >
+    <a
+      class="align-items-center d-flex justify-content-center"
+      color="primary"
+      mat-fab
+      [routerLink]="[]"
+      [queryParams]="{ createDialog: true }"
+    >
+      <ion-icon name="add-outline" size="large"></ion-icon>
+    </a>
+  </div>
+</div>

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

@@ -0,0 +1,25 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { RouterModule } from '@angular/router';
+import { GfAccountsTableModule } from '@ghostfolio/client/components/accounts-table/accounts-table.module';
+
+import { AccountsPageRoutingModule } from './accounts-page-routing.module';
+import { AccountsPageComponent } from './accounts-page.component';
+import { CreateOrUpdateAccountDialogModule } from './create-or-update-account-dialog/create-or-update-account-dialog.module';
+
+@NgModule({
+  declarations: [AccountsPageComponent],
+  exports: [],
+  imports: [
+    AccountsPageRoutingModule,
+    CommonModule,
+    CreateOrUpdateAccountDialogModule,
+    GfAccountsTableModule,
+    MatButtonModule,
+    RouterModule
+  ],
+  providers: [],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class AccountsPageModule {}

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

@@ -0,0 +1,8 @@
+:host {
+  .fab-container {
+    position: fixed;
+    right: 2rem;
+    bottom: 2rem;
+    z-index: 999;
+  }
+}

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

@@ -0,0 +1,104 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Inject
+} from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
+import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { LookupItem } from '@ghostfolio/api/app/symbol/interfaces/lookup-item.interface';
+import { Currency } from '@prisma/client';
+import { Observable, Subject } from 'rxjs';
+import {
+  debounceTime,
+  distinctUntilChanged,
+  startWith,
+  switchMap,
+  takeUntil
+} from 'rxjs/operators';
+
+import { DataService } from '../../../services/data.service';
+import { CreateOrUpdateAccountDialogParams } from './interfaces/interfaces';
+
+@Component({
+  host: { class: 'h-100' },
+  selector: 'create-or-update-account-dialog',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styleUrls: ['./create-or-update-account-dialog.scss'],
+  templateUrl: 'create-or-update-account-dialog.html'
+})
+export class CreateOrUpdateAccountDialog {
+  public currencies: Currency[] = [];
+  public filteredLookupItems: Observable<LookupItem[]>;
+  public isLoading = false;
+  public platforms: { id: string; name: string }[];
+  public searchSymbolCtrl = new FormControl(
+    this.data.transaction.symbol,
+    Validators.required
+  );
+
+  private unsubscribeSubject = new Subject<void>();
+
+  public constructor(
+    private cd: ChangeDetectorRef,
+    private dataService: DataService,
+    public dialogRef: MatDialogRef<CreateOrUpdateAccountDialog>,
+    @Inject(MAT_DIALOG_DATA) public data: CreateOrUpdateAccountDialogParams
+  ) {}
+
+  ngOnInit() {
+    this.dataService.fetchInfo().subscribe(({ currencies, platforms }) => {
+      this.currencies = currencies;
+      this.platforms = platforms;
+    });
+
+    this.filteredLookupItems = this.searchSymbolCtrl.valueChanges.pipe(
+      startWith(''),
+      debounceTime(400),
+      distinctUntilChanged(),
+      switchMap((aQuery: string) => {
+        if (aQuery) {
+          return this.dataService.fetchSymbols(aQuery);
+        }
+
+        return [];
+      })
+    );
+  }
+
+  public onCancel(): void {
+    this.dialogRef.close();
+  }
+
+  public onUpdateSymbol(event: MatAutocompleteSelectedEvent) {
+    this.isLoading = true;
+    this.data.transaction.symbol = event.option.value;
+
+    this.dataService
+      .fetchSymbolItem(this.data.transaction.symbol)
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(({ currency, dataSource, marketPrice }) => {
+        this.data.transaction.currency = currency;
+        this.data.transaction.dataSource = dataSource;
+        this.data.transaction.unitPrice = marketPrice;
+
+        this.isLoading = false;
+
+        this.cd.markForCheck();
+      });
+  }
+
+  public onUpdateSymbolByTyping(value: string) {
+    this.data.transaction.currency = null;
+    this.data.transaction.dataSource = null;
+    this.data.transaction.unitPrice = null;
+
+    this.data.transaction.symbol = value;
+  }
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+}

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

@@ -0,0 +1,163 @@
+<form #addAccountForm="ngForm" class="d-flex flex-column h-100">
+  <h1 *ngIf="data.transaction.id" mat-dialog-title i18n>Update account</h1>
+  <h1 *ngIf="!data.transaction.id" mat-dialog-title i18n>Add account</h1>
+  <div class="flex-grow-1" mat-dialog-content>
+    <div>
+      <mat-form-field appearance="outline" class="w-100">
+        <mat-label i18n>Symbol or ISIN</mat-label>
+        <input
+          autocapitalize="off"
+          autocomplete="off"
+          autocorrect="off"
+          matInput
+          required
+          [formControl]="searchSymbolCtrl"
+          [matAutocomplete]="auto"
+          (change)="onUpdateSymbolByTyping($event.target.value)"
+        />
+        <mat-autocomplete
+          #auto="matAutocomplete"
+          (optionSelected)="onUpdateSymbol($event)"
+        >
+          <ng-container>
+            <mat-option
+              *ngFor="let lookupItem of filteredLookupItems | async"
+              class="autocomplete"
+              [value]="lookupItem.symbol"
+            >
+              <span class="mr-2 symbol">{{ lookupItem.symbol | gfSymbol }}</span
+              ><span><b>{{ lookupItem.name }}</b></span>
+            </mat-option>
+          </ng-container>
+        </mat-autocomplete>
+        <mat-spinner *ngIf="isLoading" matSuffix [diameter]="20"></mat-spinner>
+      </mat-form-field>
+    </div>
+    <div>
+      <mat-form-field appearance="outline" class="w-100">
+        <mat-label i18n>Type</mat-label>
+        <mat-select name="type" required [(value)]="data.transaction.type">
+          <mat-option value="BUY" i18n> BUY </mat-option>
+          <mat-option value="SELL" i18n> SELL </mat-option>
+        </mat-select>
+      </mat-form-field>
+    </div>
+    <div>
+      <mat-form-field appearance="outline" class="w-100">
+        <mat-label i18n>Currency</mat-label>
+        <mat-select
+          class="no-arrow"
+          disabled
+          name="currency"
+          required
+          [(value)]="data.transaction.currency"
+        >
+          <mat-option *ngFor="let currency of currencies" [value]="currency"
+            >{{ currency }}</mat-option
+          >
+        </mat-select>
+      </mat-form-field>
+    </div>
+    <div class="d-none">
+      <mat-form-field appearance="outline" class="w-100">
+        <mat-label i18n>Data Source</mat-label>
+        <input
+          disabled
+          matInput
+          name="dataSource"
+          required
+          [(ngModel)]="data.transaction.dataSource"
+        />
+      </mat-form-field>
+    </div>
+    <div>
+      <mat-form-field appearance="outline" class="w-100">
+        <mat-label i18n>Date</mat-label>
+        <input
+          disabled
+          matInput
+          name="date"
+          required
+          [matDatepicker]="date"
+          [(ngModel)]="data.transaction.date"
+        />
+        <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
+        <mat-datepicker #date disabled="false"></mat-datepicker>
+      </mat-form-field>
+    </div>
+    <div>
+      <mat-form-field appearance="outline" class="w-100">
+        <mat-label i18n>Fee</mat-label>
+        <input
+          matInput
+          name="fee"
+          required
+          type="number"
+          [(ngModel)]="data.transaction.fee"
+        />
+      </mat-form-field>
+    </div>
+    <div>
+      <mat-form-field appearance="outline" class="w-100">
+        <mat-label i18n>Quantity</mat-label>
+        <input
+          matInput
+          name="quantity"
+          required
+          type="number"
+          [(ngModel)]="data.transaction.quantity"
+        />
+      </mat-form-field>
+    </div>
+    <div>
+      <mat-form-field appearance="outline" class="w-100">
+        <mat-label i18n>Unit Price</mat-label>
+        <input
+          matInput
+          name="unitPrice"
+          required
+          type="number"
+          [(ngModel)]="data.transaction.unitPrice"
+        />
+      </mat-form-field>
+    </div>
+    <div class="d-none">
+      <mat-form-field appearance="outline" class="w-100">
+        <mat-label i18n>Account</mat-label>
+        <mat-select
+          disabled
+          name="accountId"
+          required
+          [(value)]="data.transaction.accountId"
+        >
+          <mat-option *ngFor="let account of data.accounts" [value]="account.id"
+            >{{ account.name }}</mat-option
+          >
+        </mat-select>
+      </mat-form-field>
+    </div>
+    <div>
+      <mat-form-field appearance="outline" class="w-100">
+        <mat-label i18n>Platform</mat-label>
+        <mat-select name="platformId" [(value)]="data.transaction.platformId">
+          <mat-option [value]="null"></mat-option>
+          <mat-option *ngFor="let platform of platforms" [value]="platform.id"
+            >{{ platform.name }}</mat-option
+          >
+        </mat-select>
+      </mat-form-field>
+    </div>
+  </div>
+  <div class="justify-content-end" mat-dialog-actions>
+    <button i18n mat-button (click)="onCancel()">Cancel</button>
+    <button
+      color="primary"
+      i18n
+      mat-flat-button
+      [disabled]="!(addAccountForm.form.valid && data.transaction.symbol)"
+      [mat-dialog-close]="data"
+    >
+      Save
+    </button>
+  </div>
+</form>

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

@@ -0,0 +1,35 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+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 { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
+import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
+
+import { CreateOrUpdateAccountDialog } from './create-or-update-account-dialog.component';
+
+@NgModule({
+  declarations: [CreateOrUpdateAccountDialog],
+  exports: [],
+  imports: [
+    CommonModule,
+    GfSymbolModule,
+    FormsModule,
+    MatAutocompleteModule,
+    MatButtonModule,
+    MatDatepickerModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatProgressSpinnerModule,
+    MatSelectModule,
+    ReactiveFormsModule
+  ],
+  providers: []
+})
+export class CreateOrUpdateAccountDialogModule {}

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

@@ -0,0 +1,43 @@
+:host {
+  display: block;
+
+  .mat-dialog-content {
+    max-height: unset;
+
+    .autocomplete {
+      font-size: 90%;
+      height: 2.5rem;
+
+      .symbol {
+        display: inline-block;
+        min-width: 4rem;
+      }
+    }
+
+    .mat-select {
+      &.no-arrow {
+        ::ng-deep {
+          .mat-select-arrow {
+            opacity: 0;
+          }
+        }
+      }
+    }
+
+    .mat-datepicker-input {
+      &.mat-input-element:disabled {
+        color: var(--dark-primary-text);
+      }
+    }
+  }
+}
+
+:host-context(.is-dark-theme) {
+  .mat-dialog-content {
+    .mat-datepicker-input {
+      &.mat-input-element:disabled {
+        color: var(--light-primary-text);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+import { Account } from '@prisma/client';
+
+import { Order } from '../../interfaces/order.interface';
+
+export interface CreateOrUpdateAccountDialogParams {
+  accountId: string;
+  accounts: Account[];
+  transaction: Order;
+}

apps/client/src/app/pages/accounts/interfaces/order.interface.ts

@@ -0,0 +1,15 @@
+import { Currency, DataSource } from '@prisma/client';
+
+export interface Order {
+  accountId: string;
+  currency: Currency;
+  dataSource: DataSource;
+  date: Date;
+  fee: number;
+  id: string;
+  quantity: number;
+  platformId: string;
+  symbol: string;
+  type: string;
+  unitPrice: number;
+}

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

@@ -70,42 +70,36 @@
     <div class="col">
       <h3 class="mb-3 text-center" i18n>Users</h3>
       <mat-card class="px-0">
-        <mat-card-content>
-          <table class="users w-100">
+        <mat-card-content class="users">
+          <table>
             <thead>
               <tr class="mat-header-row">
-                <th class="mat-header-cell pl-2 py-2 text-truncate" i18n>
-                  User
-                </th>
-                <th class="mat-header-cell pr-2 py-2 text-truncate" i18n>
+                <th class="mat-header-cell pl-3 py-2" i18n>User</th>
+                <th class="mat-header-cell pr-2 py-2" i18n>
                   Registration Date
                 </th>
-                <th class="mat-header-cell pr-2 py-2 text-truncate" i18n>
-                  Transactions
-                </th>
-                <th class="mat-header-cell pr-2 py-2 text-truncate" i18n>
-                  Engagement
-                </th>
-                <th class="mat-header-cell pr-2 py-2 text-truncate" i18n>
-                  Last Activitiy
-                </th>
+                <th class="mat-header-cell pr-2 py-2" i18n>Accounts</th>
+                <th class="mat-header-cell pr-2 py-2" i18n>Transactions</th>
+                <th class="mat-header-cell pr-2 py-2" i18n>Engagement</th>
+                <th class="mat-header-cell pr-3 py-2" i18n>Last Activitiy</th>
               </tr>
             </thead>
             <tbody>
               <tr *ngFor="let userItem of users" class="mat-row">
-                <td class="mat-cell pl-2 py-2 text-truncate">
+                <td class="mat-cell pl-3 py-2">
                   {{ userItem.alias || userItem.id }}
                 </td>
-                <td class="mat-cell pr-2 py-2 text-truncate">
+                <td class="mat-cell pr-2 py-2">
                   {{ userItem.createdAt | date: defaultDateFormat }}
                 </td>
-                <td class="mat-cell pr-2 py-2 text-truncate">
-                  {{ userItem._count?.Order }}
+                <td class="mat-cell pr-2 py-2">
+                  {{ userItem._count?.Account }}
                 </td>
-                <td class="mat-cell pr-2 py-2 text-truncate">
+                <td class="mat-cell pr-2 py-2">{{ userItem._count?.Order }}</td>
+                <td class="mat-cell pr-2 py-2">
                   {{ userItem.Analytics?.activityCount }}
                 </td>
-                <td class="mat-cell pr-2 py-2 text-truncate">
+                <td class="mat-cell pr-3 py-2">
                   {{ formatDistanceToNow(userItem.Analytics?.updatedAt) }}
                 </td>
               </tr>

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

@@ -2,16 +2,25 @@
   color: rgb(var(--dark-primary-text));
   display: block;
 
-  table {
+  .mat-card-content {
     &.users {
-      table-layout: fixed;
+      overflow-x: auto;
 
-      tr {
-        &:nth-child(even) {
-          background-color: rgba(
-            var(--dark-primary-text),
-            var(--palette-background-hover-alpha)
-          );
+      table {
+        min-width: 100%;
+
+        tr {
+          &:nth-child(even) {
+            background-color: rgba(
+              var(--dark-primary-text),
+              var(--palette-background-hover-alpha)
+            );
+          }
+        }
+
+        .mat-row,
+        .mat-header-row {
+          width: 100%;
         }
       }
     }

apps/client/src/app/pages/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.component.ts

@@ -8,7 +8,7 @@ import { FormControl, Validators } from '@angular/forms';
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { LookupItem } from '@ghostfolio/api/app/symbol/interfaces/lookup-item.interface';
-import { Currency, Order as OrderModel } from '@prisma/client';
+import { Currency } from '@prisma/client';
 import { Observable, Subject } from 'rxjs';
 import {
   debounceTime,
@@ -19,6 +19,7 @@ import {
 } from 'rxjs/operators';
 
 import { DataService } from '../../../services/data.service';
+import { CreateOrUpdateTransactionDialogParams } from './interfaces/interfaces';
 
 @Component({
   host: { class: 'h-100' },
@@ -33,7 +34,7 @@ export class CreateOrUpdateTransactionDialog {
   public isLoading = false;
   public platforms: { id: string; name: string }[];
   public searchSymbolCtrl = new FormControl(
-    this.data.symbol,
+    this.data.transaction.symbol,
     Validators.required
   );
 
@@ -43,7 +44,7 @@ export class CreateOrUpdateTransactionDialog {
     private cd: ChangeDetectorRef,
     private dataService: DataService,
     public dialogRef: MatDialogRef<CreateOrUpdateTransactionDialog>,
-    @Inject(MAT_DIALOG_DATA) public data: OrderModel
+    @Inject(MAT_DIALOG_DATA) public data: CreateOrUpdateTransactionDialogParams
   ) {}
 
   ngOnInit() {
@@ -72,14 +73,15 @@ export class CreateOrUpdateTransactionDialog {
 
   public onUpdateSymbol(event: MatAutocompleteSelectedEvent) {
     this.isLoading = true;
-    this.data.symbol = event.option.value;
+    this.data.transaction.symbol = event.option.value;
 
     this.dataService
-      .fetchSymbolItem(this.data.symbol)
+      .fetchSymbolItem(this.data.transaction.symbol)
       .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(({ currency, marketPrice }) => {
-        this.data.currency = currency;
-        this.data.unitPrice = marketPrice;
+      .subscribe(({ currency, dataSource, marketPrice }) => {
+        this.data.transaction.currency = currency;
+        this.data.transaction.dataSource = dataSource;
+        this.data.transaction.unitPrice = marketPrice;
 
         this.isLoading = false;
 
@@ -88,10 +90,11 @@ export class CreateOrUpdateTransactionDialog {
   }
 
   public onUpdateSymbolByTyping(value: string) {
-    this.data.currency = null;
-    this.data.unitPrice = null;
+    this.data.transaction.currency = null;
+    this.data.transaction.dataSource = null;
+    this.data.transaction.unitPrice = null;
 
-    this.data.symbol = value;
+    this.data.transaction.symbol = value;
   }
 
   public ngOnDestroy() {

apps/client/src/app/pages/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.html

@@ -1,6 +1,6 @@
 <form #addTransactionForm="ngForm" class="d-flex flex-column h-100">
-  <h1 *ngIf="data.id" mat-dialog-title i18n>Update transaction</h1>
-  <h1 *ngIf="!data.id" mat-dialog-title i18n>Add transaction</h1>
+  <h1 *ngIf="data.transaction.id" mat-dialog-title i18n>Update transaction</h1>
+  <h1 *ngIf="!data.transaction.id" mat-dialog-title i18n>Add transaction</h1>
   <div class="flex-grow-1" mat-dialog-content>
     <div>
       <mat-form-field appearance="outline" class="w-100">
@@ -25,7 +25,7 @@
               class="autocomplete"
               [value]="lookupItem.symbol"
             >
-              <span class="mr-2 symbol">{{ lookupItem.symbol }}</span
+              <span class="mr-2 symbol">{{ lookupItem.symbol | gfSymbol }}</span
               ><span><b>{{ lookupItem.name }}</b></span>
             </mat-option>
           </ng-container>
@@ -36,7 +36,7 @@
     <div>
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Type</mat-label>
-        <mat-select name="type" required [(value)]="data.type">
+        <mat-select name="type" required [(value)]="data.transaction.type">
           <mat-option value="BUY" i18n> BUY </mat-option>
           <mat-option value="SELL" i18n> SELL </mat-option>
         </mat-select>
@@ -50,7 +50,7 @@
           disabled
           name="currency"
           required
-          [(value)]="data.currency"
+          [(value)]="data.transaction.currency"
         >
           <mat-option *ngFor="let currency of currencies" [value]="currency"
             >{{ currency }}</mat-option
@@ -58,6 +58,18 @@
         </mat-select>
       </mat-form-field>
     </div>
+    <div class="d-none">
+      <mat-form-field appearance="outline" class="w-100">
+        <mat-label i18n>Data Source</mat-label>
+        <input
+          disabled
+          matInput
+          name="dataSource"
+          required
+          [(ngModel)]="data.transaction.dataSource"
+        />
+      </mat-form-field>
+    </div>
     <div>
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Date</mat-label>
@@ -67,7 +79,7 @@
           name="date"
           required
           [matDatepicker]="date"
-          [(ngModel)]="data.date"
+          [(ngModel)]="data.transaction.date"
         />
         <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
         <mat-datepicker #date disabled="false"></mat-datepicker>
@@ -81,7 +93,7 @@
           name="fee"
           required
           type="number"
-          [(ngModel)]="data.fee"
+          [(ngModel)]="data.transaction.fee"
         />
       </mat-form-field>
     </div>
@@ -93,7 +105,7 @@
           name="quantity"
           required
           type="number"
-          [(ngModel)]="data.quantity"
+          [(ngModel)]="data.transaction.quantity"
         />
       </mat-form-field>
     </div>
@@ -105,14 +117,29 @@
           name="unitPrice"
           required
           type="number"
-          [(ngModel)]="data.unitPrice"
+          [(ngModel)]="data.transaction.unitPrice"
         />
       </mat-form-field>
     </div>
+    <div class="d-none">
+      <mat-form-field appearance="outline" class="w-100">
+        <mat-label i18n>Account</mat-label>
+        <mat-select
+          disabled
+          name="accountId"
+          required
+          [(value)]="data.transaction.accountId"
+        >
+          <mat-option *ngFor="let account of data.accounts" [value]="account.id"
+            >{{ account.name }}</mat-option
+          >
+        </mat-select>
+      </mat-form-field>
+    </div>
     <div>
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Platform</mat-label>
-        <mat-select name="platformId" [(value)]="data.platformId">
+        <mat-select name="platformId" [(value)]="data.transaction.platformId">
           <mat-option [value]="null"></mat-option>
           <mat-option *ngFor="let platform of platforms" [value]="platform.id"
             >{{ platform.name }}</mat-option
@@ -127,7 +154,7 @@
       color="primary"
       i18n
       mat-flat-button
-      [disabled]="!(addTransactionForm.form.valid && data.symbol)"
+      [disabled]="!(addTransactionForm.form.valid && data.transaction.symbol)"
       [mat-dialog-close]="data"
     >
       Save

apps/client/src/app/pages/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.module.ts

@@ -9,6 +9,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSelectModule } from '@angular/material/select';
+import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
 
 import { CreateOrUpdateTransactionDialog } from './create-or-update-transaction-dialog.component';
 
@@ -17,6 +18,7 @@ import { CreateOrUpdateTransactionDialog } from './create-or-update-transaction-
   exports: [],
   imports: [
     CommonModule,
+    GfSymbolModule,
     FormsModule,
     MatAutocompleteModule,
     MatButtonModule,

apps/client/src/app/pages/transactions/create-or-update-transaction-dialog/interfaces/interfaces.ts

@@ -0,0 +1,9 @@
+import { Account } from '@prisma/client';
+
+import { Order } from '../../interfaces/order.interface';
+
+export interface CreateOrUpdateTransactionDialogParams {
+  accountId: string;
+  accounts: Account[];
+  transaction: Order;
+}

apps/client/src/app/pages/transactions/interfaces/order.interface.ts

@@ -1,8 +1,14 @@
+import { Currency, DataSource } from '@prisma/client';
+
 export interface Order {
-  currency: string;
+  accountId: string;
+  currency: Currency;
+  dataSource: DataSource;
   date: Date;
   fee: number;
+  id: string;
   quantity: number;
+  platformId: string;
   symbol: string;
   type: string;
   unitPrice: number;

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

@@ -122,37 +122,10 @@ export class TransactionsPageComponent implements OnInit {
     });
   }
 
-  private openCreateTransactionDialog(): void {
-    const dialogRef = this.dialog.open(CreateOrUpdateTransactionDialog, {
-      data: {
-        currency: null,
-        date: new Date(),
-        fee: 0,
-        platformId: null,
-        quantity: null,
-        symbol: null,
-        type: 'BUY',
-        unitPrice: null
-      },
-      height: this.deviceType === 'mobile' ? '97.5vh' : '80vh',
-      width: this.deviceType === 'mobile' ? '100vw' : '50rem'
-    });
-
-    dialogRef.afterClosed().subscribe((order: UpdateOrderDto) => {
-      if (order) {
-        this.dataService.postOrder(order).subscribe({
-          next: () => {
-            this.fetchOrders();
-          }
-        });
-      }
-
-      this.router.navigate(['.'], { relativeTo: this.route });
-    });
-  }
-
   public openUpdateTransactionDialog({
+    accountId,
     currency,
+    dataSource,
     date,
     fee,
     id,
@@ -164,23 +137,30 @@ export class TransactionsPageComponent implements OnInit {
   }: OrderModel): void {
     const dialogRef = this.dialog.open(CreateOrUpdateTransactionDialog, {
       data: {
-        currency,
-        date,
-        fee,
-        id,
-        platformId,
-        quantity,
-        symbol,
-        type,
-        unitPrice
+        accounts: this.user.accounts,
+        transaction: {
+          accountId,
+          currency,
+          dataSource,
+          date,
+          fee,
+          id,
+          platformId,
+          quantity,
+          symbol,
+          type,
+          unitPrice
+        }
       },
       height: this.deviceType === 'mobile' ? '97.5vh' : '80vh',
       width: this.deviceType === 'mobile' ? '100vw' : '50rem'
     });
 
-    dialogRef.afterClosed().subscribe((order: UpdateOrderDto) => {
-      if (order) {
-        this.dataService.putOrder(order).subscribe({
+    dialogRef.afterClosed().subscribe((data: any) => {
+      const transaction: UpdateOrderDto = data?.transaction;
+
+      if (transaction) {
+        this.dataService.putOrder(transaction).subscribe({
           next: () => {
             this.fetchOrders();
           }
@@ -195,4 +175,41 @@ export class TransactionsPageComponent implements OnInit {
     this.unsubscribeSubject.next();
     this.unsubscribeSubject.complete();
   }
+
+  private openCreateTransactionDialog(): void {
+    const dialogRef = this.dialog.open(CreateOrUpdateTransactionDialog, {
+      data: {
+        accounts: this.user?.accounts,
+        transaction: {
+          accountId: this.user?.accounts.find((account) => {
+            return account.isDefault;
+          })?.id,
+          currency: null,
+          date: new Date(),
+          fee: 0,
+          platformId: null,
+          quantity: null,
+          symbol: null,
+          type: 'BUY',
+          unitPrice: null
+        }
+      },
+      height: this.deviceType === 'mobile' ? '97.5vh' : '80vh',
+      width: this.deviceType === 'mobile' ? '100vw' : '50rem'
+    });
+
+    dialogRef.afterClosed().subscribe((data: any) => {
+      const transaction: UpdateOrderDto = data?.transaction;
+
+      if (transaction) {
+        this.dataService.postOrder(transaction).subscribe({
+          next: () => {
+            this.fetchOrders();
+          }
+        });
+      }
+
+      this.router.navigate(['.'], { relativeTo: this.route });
+    });
+  }
 }

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

@@ -1,6 +1,7 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Access } from '@ghostfolio/api/app/access/interfaces/access.interface';
+import { UpdateAccountDto } from '@ghostfolio/api/app/account/update-account.dto';
 import { AdminData } from '@ghostfolio/api/app/admin/interfaces/admin-data.interface';
 import { InfoItem } from '@ghostfolio/api/app/info/interfaces/info-item.interface';
 import { UpdateOrderDto } from '@ghostfolio/api/app/order/update-order.dto';
@@ -28,10 +29,18 @@ export class DataService {
 
   public constructor(private http: HttpClient) {}
 
+  public fetchAccounts() {
+    return this.http.get<OrderModel[]>('/api/account');
+  }
+
   public fetchAdminData() {
     return this.http.get<AdminData>('/api/admin');
   }
 
+  public deleteAccount(aId: string) {
+    return this.http.delete<any>(`/api/account/${aId}`);
+  }
+
   public deleteOrder(aId: string) {
     return this.http.delete<any>(`/api/order/${aId}`);
   }
@@ -108,6 +117,10 @@ export class DataService {
     return this.http.get<any>(`/api/auth/anonymous/${accessToken}`);
   }
 
+  public postAccount(aAccount: UpdateAccountDto) {
+    return this.http.post<OrderModel>(`/api/account`, aAccount);
+  }
+
   public postOrder(aOrder: UpdateOrderDto) {
     return this.http.post<OrderModel>(`/api/order`, aOrder);
   }
@@ -116,6 +129,10 @@ export class DataService {
     return this.http.post<UserItem>(`/api/user`, {});
   }
 
+  public putAccount(aAccount: UpdateAccountDto) {
+    return this.http.put<UserItem>(`/api/account/${aAccount.id}`, aAccount);
+  }
+
   public putOrder(aOrder: UpdateOrderDto) {
     return this.http.put<UserItem>(`/api/order/${aOrder.id}`, aOrder);
   }

apps/client/src/assets/site.webmanifest

@@ -1,7 +1,7 @@
 {
   "background_color": "transparent",
   "categories": ["finance", "utilities"],
-  "description": "Privacy-first Portfolio Tracker",
+  "description": "Open Source Portfolio Tracker",
   "display": "standalone",
   "icons": [
     {

apps/client/src/index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>Ghostfolio – Privacy-first Portfolio Tracker</title>
+    <title>Ghostfolio – Open Source Portfolio Tracker</title>
     <base href="/" />
     <meta charset="utf-8" />
     <meta content="yes" name="apple-mobile-web-app-capable" />
@@ -25,13 +25,13 @@
     />
     <meta
       name="twitter:title"
-      content="Ghostfolio – Privacy-first Portfolio Tracker"
+      content="Ghostfolio – Open Source Portfolio Tracker"
     />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta property="og:description" content="" />
     <meta
       property="og:title"
-      content="Ghostfolio – Privacy-first Portfolio Tracker"
+      content="Ghostfolio – Open Source Portfolio Tracker"
     />
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://www.ghostfol.io" />
@@ -42,7 +42,7 @@
     <meta property="og:updated_time" content="2021-03-20T00:00:00+00:00" />
     <meta
       property="og:site_name"
-      content="Ghostfolio – Privacy-first Portfolio Tracker"
+      content="Ghostfolio – Open Source Portfolio Tracker"
     />
 
     <link

apps/client/src/styles.scss

@@ -57,11 +57,20 @@ body {
       }
     }
 
-    .mat-card:not([class*='mat-elevation-z']) {
-      border-color: rgba(
-        var(--light-primary-text),
-        var(--palette-foreground-divider-alpha)
-      );
+    .mat-card {
+      background: var(--dark-background);
+
+      &:not([class*='mat-elevation-z']) {
+        border-color: rgba(
+          var(--light-primary-text),
+          var(--palette-foreground-divider-alpha)
+        );
+        box-shadow: none;
+      }
+    }
+
+    .mat-dialog-container {
+      background: var(--dark-background);
     }
 
     .mat-fab,

apps/client/tsconfig.json

@@ -12,5 +12,9 @@
     {
       "path": "./tsconfig.editor.json"
     }
-  ]
+  ],
+  "angularCompilerOptions": {
+    "strictInjectionParameters": true,
+    "strictTemplates": false
+  }
 }

libs/helper/src/lib/permissions.ts

@@ -9,10 +9,13 @@ export const permissions = {
   accessFearAndGreedIndex: 'accessFearAndGreedIndex',
   createAccount: 'createAccount',
   createOrder: 'createOrder',
+  createUserAccount: 'createUserAccount',
+  deleteAccount: 'deleteAcccount',
   deleteOrder: 'deleteOrder',
   enableSocialLogin: 'enableSocialLogin',
   enableSubscription: 'enableSubscription',
   readForeignPortfolio: 'readForeignPortfolio',
+  updateAccount: 'updateAccount',
   updateOrder: 'updateOrder',
   updateUserSettings: 'updateUserSettings'
 };
@@ -37,7 +40,7 @@ export function getPermissions(aRole: Role): string[] {
       ];
 
     case 'DEMO':
-      return [permissions.createAccount];
+      return [permissions.createUserAccount];
 
     case 'USER':
       return [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ghostfolio",
-  "version": "0.91.0",
+  "version": "0.97.0",
   "homepage": "https://ghostfol.io",
   "license": "AGPL-3.0",
   "scripts": {

prisma/schema.prisma

@@ -59,22 +59,23 @@ model MarketData {
 }
 
 model Order {
-  Account       Account?  @relation(fields: [accountId, accountUserId], references: [id, userId])
+  Account       Account?   @relation(fields: [accountId, accountUserId], references: [id, userId])
   accountId     String?
   accountUserId String?
-  createdAt     DateTime  @default(now())
+  createdAt     DateTime   @default(now())
   currency      Currency
+  dataSource    DataSource @default(YAHOO)
   date          DateTime
   fee           Float
-  id            String    @default(uuid())
-  Platform      Platform? @relation(fields: [platformId], references: [id])
+  id            String     @default(uuid())
+  Platform      Platform?  @relation(fields: [platformId], references: [id])
   platformId    String?
   quantity      Float
   symbol        String
   type          Type
   unitPrice     Float
-  updatedAt     DateTime  @updatedAt
-  User          User      @relation(fields: [userId], references: [id])
+  updatedAt     DateTime   @updatedAt
+  User          User       @relation(fields: [userId], references: [id])
   userId        String
 
   @@id([id, userId])
@@ -128,6 +129,12 @@ enum Currency {
   USD
 }
 
+enum DataSource {
+  GHOSTFOLIO
+  RAKUTEN
+  YAHOO
+}
+
 enum Provider {
   ANONYMOUS
   GOOGLE

prisma/seed.ts

@@ -82,6 +82,16 @@ async function main() {
     create: {
       accessToken:
         'c689bcc894e4a420cb609ee34271f3e07f200594f7d199c50d75add7102889eb60061a04cd2792ebc853c54e37308271271e7bf588657c9e0c37faacbc28c3c6',
+      Account: {
+        create: [
+          {
+            accountType: AccountType.SECURITIES,
+            id: 'f4425b66-9ba9-4ac4-93d7-fdf9a145e8cb',
+            isDefault: true,
+            name: 'Default Account'
+          }
+        ]
+      },
       alias: 'Admin',
       id: '4e1af723-95f6-44f8-92a7-464df17f6ec3',
       role: Role.ADMIN