From 36ae83e61cc95dd14ba89fe581327c357ac24e07 Mon Sep 17 00:00:00 2001
From: Thomas <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 1 May 2021 11:34:16 +0200
Subject: [PATCH] Add accounts page

---
 .../api/src/app/account/account.controller.ts | 250 ++++++++++++++++++
 apps/api/src/app/account/account.module.ts    |  34 +++
 apps/api/src/app/account/account.service.ts   | 105 ++++++++
 .../api/src/app/account/create-account.dto.ts |  35 +++
 .../interfaces/order-with-platform.type.ts    |   3 +
 .../api/src/app/account/update-account.dto.ts |  38 +++
 apps/api/src/app/app.module.ts                |   2 +
 .../ghostfolio-scraper-api.service.ts         |   2 +-
 .../interfaces/scraper-config.interface.ts    |   2 +-
 .../rakuten-rapid-api.service.ts              |   2 +-
 .../yahoo-finance/yahoo-finance.service.ts    |   2 +-
 apps/client/src/app/app-routing.module.ts     |  17 +-
 .../accounts-table.component.html             |  91 +++++++
 .../accounts-table.component.scss             |  71 +++++
 .../accounts-table.component.ts               |  87 ++++++
 .../accounts-table/accounts-table.module.ts   |  33 +++
 .../components/header/header.component.html   |  16 ++
 .../pages/account/account-page.component.ts   |   3 +-
 .../accounts/accounts-page-routing.module.ts  |  15 ++
 .../pages/accounts/accounts-page.component.ts | 215 +++++++++++++++
 .../src/app/pages/accounts/accounts-page.html |  31 +++
 .../pages/accounts/accounts-page.module.ts    |  25 ++
 .../src/app/pages/accounts/accounts-page.scss |   8 +
 ...eate-or-update-account-dialog.component.ts | 104 ++++++++
 .../create-or-update-account-dialog.html      | 163 ++++++++++++
 .../create-or-update-account-dialog.module.ts |  35 +++
 .../create-or-update-account-dialog.scss      |  43 +++
 .../interfaces/interfaces.ts                  |   9 +
 .../accounts/interfaces/order.interface.ts    |  15 ++
 .../interfaces/order.interface.ts             |   2 +-
 apps/client/src/app/services/data.service.ts  |  17 ++
 31 files changed, 1463 insertions(+), 12 deletions(-)
 create mode 100644 apps/api/src/app/account/account.controller.ts
 create mode 100644 apps/api/src/app/account/account.module.ts
 create mode 100644 apps/api/src/app/account/account.service.ts
 create mode 100644 apps/api/src/app/account/create-account.dto.ts
 create mode 100644 apps/api/src/app/account/interfaces/order-with-platform.type.ts
 create mode 100644 apps/api/src/app/account/update-account.dto.ts
 create mode 100644 apps/client/src/app/components/accounts-table/accounts-table.component.html
 create mode 100644 apps/client/src/app/components/accounts-table/accounts-table.component.scss
 create mode 100644 apps/client/src/app/components/accounts-table/accounts-table.component.ts
 create mode 100644 apps/client/src/app/components/accounts-table/accounts-table.module.ts
 create mode 100644 apps/client/src/app/pages/accounts/accounts-page-routing.module.ts
 create mode 100644 apps/client/src/app/pages/accounts/accounts-page.component.ts
 create mode 100644 apps/client/src/app/pages/accounts/accounts-page.html
 create mode 100644 apps/client/src/app/pages/accounts/accounts-page.module.ts
 create mode 100644 apps/client/src/app/pages/accounts/accounts-page.scss
 create mode 100644 apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.component.ts
 create mode 100644 apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.html
 create mode 100644 apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.module.ts
 create mode 100644 apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.scss
 create mode 100644 apps/client/src/app/pages/accounts/create-or-update-account-dialog/interfaces/interfaces.ts
 create mode 100644 apps/client/src/app/pages/accounts/interfaces/order.interface.ts

diff --git a/apps/api/src/app/account/account.controller.ts b/apps/api/src/app/account/account.controller.ts
new file mode 100644
index 000000000..6b3152712
--- /dev/null
+++ b/apps/api/src/app/account/account.controller.ts
@@ -0,0 +1,250 @@
+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 { Order as OrderModel } from '@prisma/client';
+import { parseISO } from 'date-fns';
+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 deleteOrder(@Param('id') id: string): Promise<OrderModel> {
+    if (
+      !hasPermission(
+        getPermissions(this.request.user.role),
+        permissions.deleteOrder
+      )
+    ) {
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.FORBIDDEN),
+        StatusCodes.FORBIDDEN
+      );
+    }
+
+    return this.accountService.deleteOrder(
+      {
+        id_userId: {
+          id,
+          userId: this.request.user.id
+        }
+      },
+      this.request.user.id
+    );
+  }
+
+  @Get()
+  @UseGuards(AuthGuard('jwt'))
+  public async getAllOrders(
+    @Headers('impersonation-id') impersonationId
+  ): Promise<OrderModel[]> {
+    const impersonationUserId = await this.impersonationService.validateImpersonationId(
+      impersonationId,
+      this.request.user.id
+    );
+
+    let orders = await this.accountService.orders({
+      include: {
+        Account: {
+          include: {
+            Platform: true
+          }
+        }
+      },
+      orderBy: { date: 'desc' },
+      where: { userId: impersonationUserId || this.request.user.id }
+    });
+
+    if (
+      impersonationUserId &&
+      !hasPermission(
+        getPermissions(this.request.user.role),
+        permissions.readForeignPortfolio
+      )
+    ) {
+      orders = nullifyValuesInObjects(orders, ['fee', 'quantity', 'unitPrice']);
+    }
+
+    return orders;
+  }
+
+  @Get(':id')
+  @UseGuards(AuthGuard('jwt'))
+  public async getOrderById(@Param('id') id: string): Promise<OrderModel> {
+    return this.accountService.order({
+      id_userId: {
+        id,
+        userId: this.request.user.id
+      }
+    });
+  }
+
+  @Post()
+  @UseGuards(AuthGuard('jwt'))
+  public async createOrder(
+    @Body() data: CreateAccountDto
+  ): Promise<OrderModel> {
+    if (
+      !hasPermission(
+        getPermissions(this.request.user.role),
+        permissions.createOrder
+      )
+    ) {
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.FORBIDDEN),
+        StatusCodes.FORBIDDEN
+      );
+    }
+
+    const date = parseISO(data.date);
+
+    const accountId = data.accountId;
+    delete data.accountId;
+
+    if (data.platformId) {
+      const platformId = data.platformId;
+      delete data.platformId;
+
+      return this.accountService.createOrder(
+        {
+          ...data,
+          date,
+          Account: {
+            connect: {
+              id_userId: { id: accountId, userId: this.request.user.id }
+            }
+          },
+          Platform: { connect: { id: platformId } },
+          User: { connect: { id: this.request.user.id } }
+        },
+        this.request.user.id
+      );
+    } else {
+      delete data.platformId;
+
+      return this.accountService.createOrder(
+        {
+          ...data,
+          date,
+          Account: {
+            connect: {
+              id_userId: { id: accountId, userId: this.request.user.id }
+            }
+          },
+          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.updateOrder
+      )
+    ) {
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.FORBIDDEN),
+        StatusCodes.FORBIDDEN
+      );
+    }
+
+    const originalOrder = await this.accountService.order({
+      id_userId: {
+        id,
+        userId: this.request.user.id
+      }
+    });
+
+    const date = parseISO(data.date);
+
+    const accountId = data.accountId;
+    delete data.accountId;
+
+    if (data.platformId) {
+      const platformId = data.platformId;
+      delete data.platformId;
+
+      return this.accountService.updateOrder(
+        {
+          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 } }
+          },
+          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.updateOrder(
+        {
+          data: {
+            ...data,
+            date,
+            Account: {
+              connect: {
+                id_userId: { id: accountId, userId: this.request.user.id }
+              }
+            },
+            Platform: originalOrder.platformId
+              ? { disconnect: true }
+              : undefined,
+            User: { connect: { id: this.request.user.id } }
+          },
+          where: {
+            id_userId: {
+              id,
+              userId: this.request.user.id
+            }
+          }
+        },
+        this.request.user.id
+      );
+    }
+  }
+}
diff --git a/apps/api/src/app/account/account.module.ts b/apps/api/src/app/account/account.module.ts
new file mode 100644
index 000000000..89d088022
--- /dev/null
+++ b/apps/api/src/app/account/account.module.ts
@@ -0,0 +1,34 @@
+import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
+import { DataGatheringService } from '@ghostfolio/api/services/data-gathering.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 { CacheService } from '../cache/cache.service';
+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,
+    CacheService,
+    ConfigurationService,
+    DataGatheringService,
+    DataProviderService,
+    GhostfolioScraperApiService,
+    ImpersonationService,
+    PrismaService,
+    RakutenRapidApiService,
+    YahooFinanceService
+  ]
+})
+export class AccountModule {}
diff --git a/apps/api/src/app/account/account.service.ts b/apps/api/src/app/account/account.service.ts
new file mode 100644
index 000000000..cb3812856
--- /dev/null
+++ b/apps/api/src/app/account/account.service.ts
@@ -0,0 +1,105 @@
+import { DataGatheringService } from '@ghostfolio/api/services/data-gathering.service';
+import { PrismaService } from '@ghostfolio/api/services/prisma.service';
+import { Injectable } from '@nestjs/common';
+import { Order, Prisma } from '@prisma/client';
+
+import { CacheService } from '../cache/cache.service';
+import { RedisCacheService } from '../redis-cache/redis-cache.service';
+import { OrderWithPlatform } from './interfaces/order-with-platform.type';
+
+@Injectable()
+export class AccountService {
+  public constructor(
+    private readonly cacheService: CacheService,
+    private readonly dataGatheringService: DataGatheringService,
+    private readonly redisCacheService: RedisCacheService,
+    private prisma: PrismaService
+  ) {}
+
+  public async order(
+    orderWhereUniqueInput: Prisma.OrderWhereUniqueInput
+  ): Promise<Order | null> {
+    return this.prisma.order.findUnique({
+      where: orderWhereUniqueInput
+    });
+  }
+
+  public async orders(params: {
+    include?: Prisma.OrderInclude;
+    skip?: number;
+    take?: number;
+    cursor?: Prisma.OrderWhereUniqueInput;
+    where?: Prisma.OrderWhereInput;
+    orderBy?: Prisma.OrderOrderByInput;
+  }): Promise<OrderWithPlatform[]> {
+    const { include, skip, take, cursor, where, orderBy } = params;
+
+    return this.prisma.order.findMany({
+      cursor,
+      include,
+      orderBy,
+      skip,
+      take,
+      where
+    });
+  }
+
+  public async createOrder(
+    data: Prisma.OrderCreateInput,
+    aUserId: string
+  ): Promise<Order> {
+    this.redisCacheService.remove(`${aUserId}.portfolio`);
+
+    // Gather symbol data of order in the background
+    this.dataGatheringService.gatherSymbols([
+      {
+        date: <Date>data.date,
+        symbol: data.symbol
+      }
+    ]);
+
+    await this.cacheService.flush(aUserId);
+
+    return this.prisma.order.create({
+      data
+    });
+  }
+
+  public async deleteOrder(
+    where: Prisma.OrderWhereUniqueInput,
+    aUserId: string
+  ): Promise<Order> {
+    this.redisCacheService.remove(`${aUserId}.portfolio`);
+
+    return this.prisma.order.delete({
+      where
+    });
+  }
+
+  public async updateOrder(
+    params: {
+      where: Prisma.OrderWhereUniqueInput;
+      data: Prisma.OrderUpdateInput;
+    },
+    aUserId: string
+  ): Promise<Order> {
+    const { data, where } = params;
+
+    this.redisCacheService.remove(`${aUserId}.portfolio`);
+
+    // Gather symbol data of order in the background
+    this.dataGatheringService.gatherSymbols([
+      {
+        date: <Date>data.date,
+        symbol: <string>data.symbol
+      }
+    ]);
+
+    await this.cacheService.flush(aUserId);
+
+    return this.prisma.order.update({
+      data,
+      where
+    });
+  }
+}
diff --git a/apps/api/src/app/account/create-account.dto.ts b/apps/api/src/app/account/create-account.dto.ts
new file mode 100644
index 000000000..9134a3f1d
--- /dev/null
+++ b/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;
+}
diff --git a/apps/api/src/app/account/interfaces/order-with-platform.type.ts b/apps/api/src/app/account/interfaces/order-with-platform.type.ts
new file mode 100644
index 000000000..10cc70e1a
--- /dev/null
+++ b/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 };
diff --git a/apps/api/src/app/account/update-account.dto.ts b/apps/api/src/app/account/update-account.dto.ts
new file mode 100644
index 000000000..9c31ed5df
--- /dev/null
+++ b/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;
+}
diff --git a/apps/api/src/app/app.module.ts b/apps/api/src/app/app.module.ts
index 8f3f41564..20f0b3103 100644
--- a/apps/api/src/app/app.module.ts
+++ b/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(),
diff --git a/apps/api/src/services/data-provider/ghostfolio-scraper-api/ghostfolio-scraper-api.service.ts b/apps/api/src/services/data-provider/ghostfolio-scraper-api/ghostfolio-scraper-api.service.ts
index be3c961b2..c1856b29c 100644
--- a/apps/api/src/services/data-provider/ghostfolio-scraper-api/ghostfolio-scraper-api.service.ts
+++ b/apps/api/src/services/data-provider/ghostfolio-scraper-api/ghostfolio-scraper-api.service.ts
@@ -1,6 +1,6 @@
-import { DataSource } from '.prisma/client';
 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';
diff --git a/apps/api/src/services/data-provider/ghostfolio-scraper-api/interfaces/scraper-config.interface.ts b/apps/api/src/services/data-provider/ghostfolio-scraper-api/interfaces/scraper-config.interface.ts
index 989594169..c6900ecf3 100644
--- a/apps/api/src/services/data-provider/ghostfolio-scraper-api/interfaces/scraper-config.interface.ts
+++ b/apps/api/src/services/data-provider/ghostfolio-scraper-api/interfaces/scraper-config.interface.ts
@@ -1,4 +1,4 @@
-import { Currency } from '.prisma/client';
+import { Currency } from '@prisma/client';
 
 export interface ScraperConfig {
   currency: Currency;
diff --git a/apps/api/src/services/data-provider/rakuten-rapid-api/rakuten-rapid-api.service.ts b/apps/api/src/services/data-provider/rakuten-rapid-api/rakuten-rapid-api.service.ts
index f45e85fc7..addcd685e 100644
--- a/apps/api/src/services/data-provider/rakuten-rapid-api/rakuten-rapid-api.service.ts
+++ b/apps/api/src/services/data-provider/rakuten-rapid-api/rakuten-rapid-api.service.ts
@@ -1,6 +1,6 @@
-import { DataSource } from '.prisma/client';
 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';
 
diff --git a/apps/api/src/services/data-provider/yahoo-finance/yahoo-finance.service.ts b/apps/api/src/services/data-provider/yahoo-finance/yahoo-finance.service.ts
index 90f9da459..8d53a6bfe 100644
--- a/apps/api/src/services/data-provider/yahoo-finance/yahoo-finance.service.ts
+++ b/apps/api/src/services/data-provider/yahoo-finance/yahoo-finance.service.ts
@@ -1,6 +1,6 @@
-import { DataSource } from '.prisma/client';
 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';
 
diff --git a/apps/client/src/app/app-routing.module.ts b/apps/client/src/app/app-routing.module.ts
index 145744e91..920565529 100644
--- a/apps/client/src/app/app-routing.module.ts
+++ b/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: () =>
diff --git a/apps/client/src/app/components/accounts-table/accounts-table.component.html b/apps/client/src/app/components/accounts-table/accounts-table.component.html
new file mode 100644
index 000000000..6f4deab5e
--- /dev/null
+++ b/apps/client/src/app/components/accounts-table/accounts-table.component.html
@@ -0,0 +1,91 @@
+<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>
+      <div class="d-flex">
+        <gf-symbol-icon
+          *ngIf="element.Account?.Platform?.url"
+          class="mr-2"
+          [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="type">
+    <th
+      *matHeaderCellDef
+      class="justify-content-center"
+      i18n
+      mat-header-cell
+      mat-sort-header
+    >
+      Type
+    </th>
+    <td mat-cell *matCellDef="let element" class="text-center">
+      <div
+        class="d-inline-flex justify-content-center pl-1 pr-2 py-1 type-badge"
+        [ngClass]="element.type == 'BUY' ? 'buy' : 'sell'"
+      >
+        <ion-icon
+          class="mr-1"
+          [name]="
+            element.type === 'BUY'
+              ? 'arrow-forward-circle-outline'
+              : 'arrow-back-circle-outline'
+          "
+        ></ion-icon>
+        <span>{{ element.type }}</span>
+      </div>
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="symbol">
+    <th *matHeaderCellDef i18n mat-header-cell mat-sort-header>Platform</th>
+    <td mat-cell *matCellDef="let element">{{ element.symbol }}</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)="onUpdateTransaction(element)">
+          Edit
+        </button>
+        <button i18n mat-menu-item (click)="onDeleteTransaction(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>
diff --git a/apps/client/src/app/components/accounts-table/accounts-table.component.scss b/apps/client/src/app/components/accounts-table/accounts-table.component.scss
new file mode 100644
index 000000000..447c0152a
--- /dev/null
+++ b/apps/client/src/app/components/accounts-table/accounts-table.component.scss
@@ -0,0 +1,71 @@
+: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;
+
+        ion-icon {
+          font-size: 1rem;
+        }
+
+        &.buy {
+          color: var(--green);
+        }
+
+        &.sell {
+          color: var(--orange);
+        }
+      }
+    }
+  }
+}
+
+: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);
+      }
+    }
+  }
+}
diff --git a/apps/client/src/app/components/accounts-table/accounts-table.component.ts b/apps/client/src/app/components/accounts-table/accounts-table.component.ts
new file mode 100644
index 000000000..9c3009819
--- /dev/null
+++ b/apps/client/src/app/components/accounts-table/accounts-table.component.ts
@@ -0,0 +1,87 @@
+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() transactionDeleted = new EventEmitter<string>();
+  @Output() transactionToUpdate = 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', 'symbol'];
+
+    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 onDeleteTransaction(aId: string) {
+    const confirmation = confirm(
+      'Do you really want to delete this transaction?'
+    );
+
+    if (confirmation) {
+      this.transactionDeleted.emit(aId);
+    }
+  }
+
+  public onUpdateTransaction(aTransaction: OrderModel) {
+    this.transactionToUpdate.emit(aTransaction);
+  }
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+}
diff --git a/apps/client/src/app/components/accounts-table/accounts-table.module.ts b/apps/client/src/app/components/accounts-table/accounts-table.module.ts
new file mode 100644
index 000000000..3855c5175
--- /dev/null
+++ b/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 {}
diff --git a/apps/client/src/app/components/header/header.component.html b/apps/client/src/app/components/header/header.component.html
index 130dc9754..d48791d07 100644
--- a/apps/client/src/app/components/header/header.component.html
+++ b/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']"
diff --git a/apps/client/src/app/pages/account/account-page.component.ts b/apps/client/src/app/pages/account/account-page.component.ts
index e905973c6..e1bd78000 100644
--- a/apps/client/src/app/pages/account/account-page.component.ts
+++ b/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',
diff --git a/apps/client/src/app/pages/accounts/accounts-page-routing.module.ts b/apps/client/src/app/pages/accounts/accounts-page-routing.module.ts
new file mode 100644
index 000000000..7cb67a39b
--- /dev/null
+++ b/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 {}
diff --git a/apps/client/src/app/pages/accounts/accounts-page.component.ts b/apps/client/src/app/pages/accounts/accounts-page.component.ts
new file mode 100644
index 000000000..1ff8fdf9e
--- /dev/null
+++ b/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 hasPermissionToCreateOrder: boolean;
+  public hasPermissionToDeleteOrder: 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.openCreateTransactionDialog();
+        } else if (params['editDialog']) {
+          if (this.accounts) {
+            const transaction = this.accounts.find((transaction) => {
+              return transaction.id === params['transactionId'];
+            });
+
+            this.openUpdateTransactionDialog(transaction);
+          } 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.hasPermissionToCreateOrder = hasPermission(
+            user.permissions,
+            permissions.createOrder
+          );
+          this.hasPermissionToDeleteOrder = hasPermission(
+            user.permissions,
+            permissions.deleteOrder
+          );
+
+          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 onDeleteTransaction(aId: string) {
+    this.dataService.deleteAccount(aId).subscribe({
+      next: () => {
+        this.fetchAccounts();
+      }
+    });
+  }
+
+  public onUpdateTransaction(aTransaction: OrderModel) {
+    this.router.navigate([], {
+      queryParams: { editDialog: true, transactionId: aTransaction.id }
+    });
+  }
+
+  public openUpdateTransactionDialog({
+    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 openCreateTransactionDialog(): 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 });
+    });
+  }
+}
diff --git a/apps/client/src/app/pages/accounts/accounts-page.html b/apps/client/src/app/pages/accounts/accounts-page.html
new file mode 100644
index 000000000..c8bfabfd6
--- /dev/null
+++ b/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 && hasPermissionToDeleteOrder"
+        (transactionDeleted)="onDeleteTransaction($event)"
+        (transactionToUpdate)="onUpdateTransaction($event)"
+      ></gf-accounts-table>
+    </div>
+  </div>
+
+  <div
+    *ngIf="!hasImpersonationId && hasPermissionToCreateOrder"
+    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>
diff --git a/apps/client/src/app/pages/accounts/accounts-page.module.ts b/apps/client/src/app/pages/accounts/accounts-page.module.ts
new file mode 100644
index 000000000..ec0212ed5
--- /dev/null
+++ b/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 {}
diff --git a/apps/client/src/app/pages/accounts/accounts-page.scss b/apps/client/src/app/pages/accounts/accounts-page.scss
new file mode 100644
index 000000000..31c10a3d7
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.component.ts b/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.component.ts
new file mode 100644
index 000000000..24a7df79b
--- /dev/null
+++ b/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();
+  }
+}
diff --git a/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.html b/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.html
new file mode 100644
index 000000000..58fcf3772
--- /dev/null
+++ b/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.html
@@ -0,0 +1,163 @@
+<form #addTransactionForm="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]="!(addTransactionForm.form.valid && data.transaction.symbol)"
+      [mat-dialog-close]="data"
+    >
+      Save
+    </button>
+  </div>
+</form>
diff --git a/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.module.ts b/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.module.ts
new file mode 100644
index 000000000..f0990f4a7
--- /dev/null
+++ b/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 {}
diff --git a/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.scss b/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.scss
new file mode 100644
index 000000000..0ce226588
--- /dev/null
+++ b/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);
+      }
+    }
+  }
+}
diff --git a/apps/client/src/app/pages/accounts/create-or-update-account-dialog/interfaces/interfaces.ts b/apps/client/src/app/pages/accounts/create-or-update-account-dialog/interfaces/interfaces.ts
new file mode 100644
index 000000000..51cb3bdda
--- /dev/null
+++ b/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;
+}
diff --git a/apps/client/src/app/pages/accounts/interfaces/order.interface.ts b/apps/client/src/app/pages/accounts/interfaces/order.interface.ts
new file mode 100644
index 000000000..12f6626a2
--- /dev/null
+++ b/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;
+}
diff --git a/apps/client/src/app/pages/transactions/interfaces/order.interface.ts b/apps/client/src/app/pages/transactions/interfaces/order.interface.ts
index fcdf273b1..12f6626a2 100644
--- a/apps/client/src/app/pages/transactions/interfaces/order.interface.ts
+++ b/apps/client/src/app/pages/transactions/interfaces/order.interface.ts
@@ -1,4 +1,4 @@
-import { Currency, DataSource } from '.prisma/client';
+import { Currency, DataSource } from '@prisma/client';
 
 export interface Order {
   accountId: string;
diff --git a/apps/client/src/app/services/data.service.ts b/apps/client/src/app/services/data.service.ts
index b29807df7..fec978c49 100644
--- a/apps/client/src/app/services/data.service.ts
+++ b/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);
   }