-
+
-
+
- Cash Balance
+ Cash Balance
- Equity
+ Equity
- Activities
+ Activities
Platform
-
+
+
+
+
+
+
+
+
-
+
\ No newline at end of file
diff --git a/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.module.ts b/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.module.ts
index c3d45b6ce..93b5649bb 100644
--- a/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.module.ts
+++ b/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]
diff --git a/apps/client/src/app/services/data.service.ts b/apps/client/src/app/services/data.service.ts
index a83c423fe..9901048bd 100644
--- a/apps/client/src/app/services/data.service.ts
+++ b/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
('/api/v1/account');
}
+ public fetchAccountBalances(accountId: string) {
+ return this.http.get(
+ `/api/v1/account/${accountId}/balances`
+ );
+ }
+
public fetchActivities({
filters
}: {
diff --git a/libs/common/src/lib/interfaces/account-balance.interface.ts b/libs/common/src/lib/interfaces/account-balance.interface.ts
new file mode 100644
index 000000000..05f3407a3
--- /dev/null
+++ b/libs/common/src/lib/interfaces/account-balance.interface.ts
@@ -0,0 +1,5 @@
+export interface AccountBalance {
+ date: Date;
+ id: string;
+ value: number;
+}
diff --git a/libs/common/src/lib/interfaces/index.ts b/libs/common/src/lib/interfaces/index.ts
index 7d76c419e..b57b6abf9 100644
--- a/libs/common/src/lib/interfaces/index.ts
+++ b/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,
diff --git a/libs/ui/src/lib/account-balances/account-balances.component.html b/libs/ui/src/lib/account-balances/account-balances.component.html
new file mode 100644
index 000000000..c9c5966d4
--- /dev/null
+++ b/libs/ui/src/lib/account-balances/account-balances.component.html
@@ -0,0 +1,15 @@
+
+
+
+ | Date |
+ {{balance.date}} |
+
+
+
+ Value |
+ {{balance.value}} |
+
+
+ |
+ |
+
\ No newline at end of file
diff --git a/libs/ui/src/lib/account-balances/account-balances.component.scss b/libs/ui/src/lib/account-balances/account-balances.component.scss
new file mode 100644
index 000000000..ea3dad292
--- /dev/null
+++ b/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;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/libs/ui/src/lib/account-balances/account-balances.component.ts b/libs/ui/src/lib/account-balances/account-balances.component.ts
new file mode 100644
index 000000000..104dab886
--- /dev/null
+++ b/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();
+
+ 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();
+ }
+}
diff --git a/libs/ui/src/lib/account-balances/account-balances.module.ts b/libs/ui/src/lib/account-balances/account-balances.module.ts
new file mode 100644
index 000000000..eb4a994f6
--- /dev/null
+++ b/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 {}