feat: show account balances

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

@@ -1,91 +1,50 @@
-<gf-dialog-header
-  mat-dialog-title
-  position="center"
-  [deviceType]="data.deviceType"
-  [title]="name"
-  (closeButtonClicked)="onClose()"
-></gf-dialog-header>
+<gf-dialog-header mat-dialog-title position="center" [deviceType]="data.deviceType" [title]="name"
+  (closeButtonClicked)="onClose()"></gf-dialog-header>
 
 <div class="flex-grow-1" mat-dialog-content>
   <div class="container p-0">
     <div class="row">
       <div class="col-12 d-flex justify-content-center mb-3">
-        <gf-value
-          size="large"
-          [isCurrency]="true"
-          [locale]="user?.settings?.locale"
-          [unit]="user?.settings?.baseCurrency"
-          [value]="valueInBaseCurrency"
-        ></gf-value>
+        <gf-value size="large" [isCurrency]="true" [locale]="user?.settings?.locale"
+          [unit]="user?.settings?.baseCurrency" [value]="valueInBaseCurrency"></gf-value>
       </div>
     </div>
 
     <div class="chart-container mb-3">
-      <gf-investment-chart
-        class="h-100"
-        [currency]="user?.settings?.baseCurrency"
-        [historicalDataItems]="historicalDataItems"
-        [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
-        [isLoading]="isLoadingChart"
-        [locale]="user?.settings?.locale"
-      ></gf-investment-chart>
+      <gf-investment-chart class="h-100" [currency]="user?.settings?.baseCurrency"
+        [historicalDataItems]="historicalDataItems" [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
+        [isLoading]="isLoadingChart" [locale]="user?.settings?.locale"></gf-investment-chart>
     </div>
 
-    <div class="row">
+    <div class="row mb-3">
       <div class="col-6 mb-3">
-        <gf-value
-          i18n
-          size="medium"
-          [isCurrency]="true"
-          [locale]="user?.settings?.locale"
-          [unit]="currency"
-          [value]="balance"
-          >Cash Balance</gf-value
-        >
+        <gf-value i18n size="medium" [isCurrency]="true" [locale]="user?.settings?.locale" [unit]="currency"
+          [value]="balance">Cash Balance</gf-value>
       </div>
       <div class="col-6 mb-3">
-        <gf-value
-          i18n
-          size="medium"
-          [isCurrency]="true"
-          [locale]="user?.settings?.locale"
-          [unit]="currency"
-          [value]="equity"
-          >Equity</gf-value
-        >
+        <gf-value i18n size="medium" [isCurrency]="true" [locale]="user?.settings?.locale" [unit]="currency"
+          [value]="equity">Equity</gf-value>
       </div>
       <div class="col-6 mb-3">
-        <gf-value i18n size="medium" [value]="transactionCount"
-          >Activities</gf-value
-        >
+        <gf-value i18n size="medium" [value]="transactionCount">Activities</gf-value>
       </div>
       <div class="col-6 mb-3">
         <gf-value i18n size="medium" [value]="platformName">Platform</gf-value>
       </div>
     </div>
 
-    <div class="row" [ngClass]="{ 'd-none': !orders?.length }">
-      <div class="col mb-3">
-        <div class="h5 mb-0" i18n>Activities</div>
-        <gf-activities-table
-          [activities]="orders"
-          [baseCurrency]="user?.settings?.baseCurrency"
-          [deviceType]="data.deviceType"
-          [hasPermissionToCreateActivity]="false"
-          [hasPermissionToExportActivities]="true"
-          [hasPermissionToFilter]="false"
-          [hasPermissionToOpenDetails]="false"
-          [locale]="user?.settings?.locale"
-          [showActions]="false"
-          (export)="onExport()"
-        ></gf-activities-table>
-      </div>
-    </div>
+    <mat-tab-group>
+      <mat-tab label="Activities">
+        <gf-activities-table [activities]="orders" [baseCurrency]="user?.settings?.baseCurrency"
+          [deviceType]="data.deviceType" [hasPermissionToCreateActivity]="false"
+          [hasPermissionToExportActivities]="true" [hasPermissionToFilter]="false" [hasPermissionToOpenDetails]="false"
+          [locale]="user?.settings?.locale" [showActions]="false" (export)="onExport()"></gf-activities-table>
+      </mat-tab>
+      <mat-tab label="Balances">
+        <gf-account-balances [accountId]="data.accountId"></gf-account-balances>
+      </mat-tab>
+    </mat-tab-group>
   </div>
 </div>
 
-<gf-dialog-footer
-  mat-dialog-actions
-  [deviceType]="data.deviceType"
-  (closeButtonClicked)="onClose()"
-></gf-dialog-footer>
+<gf-dialog-footer mat-dialog-actions [deviceType]="data.deviceType" (closeButtonClicked)="onClose()"></gf-dialog-footer>

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

@@ -2,10 +2,12 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
+import { MatTabsModule } from '@angular/material/tabs';
 import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module';
 import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module';
 import { GfInvestmentChartModule } from '@ghostfolio/client/components/investment-chart/investment-chart.module';
 import { GfActivitiesTableModule } from '@ghostfolio/ui/activities-table/activities-table.module';
+import { GfAccountBalancesModule } from '@ghostfolio/ui/account-balances/account-balances.module';
 import { GfValueModule } from '@ghostfolio/ui/value';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
@@ -15,6 +17,7 @@ import { AccountDetailDialog } from './account-detail-dialog.component';
   declarations: [AccountDetailDialog],
   imports: [
     CommonModule,
+    GfAccountBalancesModule,
     GfActivitiesTableModule,
     GfDialogFooterModule,
     GfDialogHeaderModule,
@@ -22,6 +25,7 @@ import { AccountDetailDialog } from './account-detail-dialog.component';
     GfValueModule,
     MatButtonModule,
     MatDialogModule,
+    MatTabsModule,
     NgxSkeletonLoaderModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]

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

@@ -18,6 +18,7 @@ import { PropertyDto } from '@ghostfolio/api/services/property/property.dto';
 import { DATE_FORMAT } from '@ghostfolio/common/helper';
 import {
   Access,
+  AccountBalancesResponse,
   Accounts,
   BenchmarkMarketDataDetails,
   BenchmarkResponse,
@@ -141,6 +142,12 @@ export class DataService {
     return this.http.get<Accounts>('/api/v1/account');
   }
 
+  public fetchAccountBalances(accountId: string) {
+    return this.http.get<AccountBalancesResponse>(
+      `/api/v1/account/${accountId}/balances`
+    );
+  }
+
   public fetchActivities({
     filters
   }: {

libs/common/src/lib/interfaces/account-balance.interface.ts

@@ -0,0 +1,5 @@
+export interface AccountBalance {
+  date: Date;
+  id: string;
+  value: number;
+}

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

@@ -1,5 +1,6 @@
 import type { Access } from './access.interface';
 import type { Accounts } from './accounts.interface';
+import type { AccountBalance } from './account-balance.interface';
 import type { AdminData } from './admin-data.interface';
 import type { AdminJobs } from './admin-jobs.interface';
 import type { AdminMarketDataDetails } from './admin-market-data-details.interface';
@@ -51,6 +52,7 @@ import type { User } from './user.interface';
 
 export {
   Access,
+  AccountBalance,
   AccountBalancesResponse,
   Accounts,
   AdminData,

libs/ui/src/lib/account-balances/account-balances.component.html

@@ -0,0 +1,15 @@
+<table mat-table [dataSource]="balances" class="mat-elevation-z8">
+
+  <ng-container matColumnDef="date">
+    <th mat-header-cell *matHeaderCellDef> Date </th>
+    <td mat-cell *matCellDef="let balance"> {{balance.date}} </td>
+  </ng-container>
+
+  <ng-container matColumnDef="value">
+    <th mat-header-cell *matHeaderCellDef> Value </th>
+    <td mat-cell *matCellDef="let balance"> {{balance.value}} </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+</table>

libs/ui/src/lib/account-balances/account-balances.component.scss

@@ -0,0 +1,19 @@
+@import 'apps/client/src/styles/ghostfolio-style';
+
+:host {
+  display: block;
+
+  .activities {
+    overflow-x: auto;
+
+    .mat-mdc-table {
+      th {
+        ::ng-deep {
+          .mat-sort-header-container {
+            justify-content: inherit;
+          }
+        }
+      }
+    }
+  }
+}

libs/ui/src/lib/account-balances/account-balances.component.ts

@@ -0,0 +1,46 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnDestroy,
+  OnInit
+} from '@angular/core';
+import { DataService } from '@ghostfolio/client/services/data.service';
+import { AccountBalance } from '@ghostfolio/common/interfaces';
+import { Subject, takeUntil } from 'rxjs';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'gf-account-balances',
+  styleUrls: ['./account-balances.component.scss'],
+  templateUrl: './account-balances.component.html'
+})
+export class AccountBalancesComponent implements OnDestroy, OnInit {
+  @Input() accountId: string;
+
+  public balances: AccountBalance[];
+  public displayedColumns: string[] = ['date', 'value'];
+
+  private unsubscribeSubject = new Subject<void>();
+
+  public constructor(private dataService: DataService) {}
+
+  public fetchBalances() {
+    this.dataService
+      .fetchAccountBalances(this.accountId)
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(({ balances }) => {
+        console.log({ balances });
+        this.balances = balances;
+      });
+  }
+
+  public ngOnInit() {
+    this.fetchBalances();
+  }
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+}

libs/ui/src/lib/account-balances/account-balances.module.ts

@@ -0,0 +1,44 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { RouterModule } from '@angular/router';
+import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module';
+import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
+import { GfActivitiesFilterModule } from '@ghostfolio/ui/activities-filter/activities-filter.module';
+import { GfActivityTypeModule } from '@ghostfolio/ui/activity-type';
+import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';
+import { GfValueModule } from '@ghostfolio/ui/value';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+
+import { AccountBalancesComponent } from './account-balances.component';
+
+@NgModule({
+  declarations: [AccountBalancesComponent],
+  exports: [AccountBalancesComponent],
+  imports: [
+    CommonModule,
+    GfActivitiesFilterModule,
+    GfActivityTypeModule,
+    GfNoTransactionsInfoModule,
+    GfSymbolIconModule,
+    GfSymbolModule,
+    GfValueModule,
+    MatButtonModule,
+    MatCheckboxModule,
+    MatMenuModule,
+    MatPaginatorModule,
+    MatSortModule,
+    MatTableModule,
+    MatTooltipModule,
+    NgxSkeletonLoaderModule,
+    RouterModule
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class GfAccountBalancesModule {}