Add support for creating account cash balances from the account detail dialogue tab

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

@@ -5,6 +5,8 @@ import type { RequestWithUser } from '@ghostfolio/common/types';
 
 import {
   Controller,
+  Body,
+  Post,
   Delete,
   HttpException,
   Inject,
@@ -46,4 +48,26 @@ export class AccountBalanceController {
       id
     });
   }
+
+  @HasPermission(permissions.createAccountBalance)
+  @Post()
+  @UseGuards(AuthGuard('jwt'), HasPermissionGuard)
+  public async createAccountBalance(
+    @Body() body: any
+  ): Promise<AccountBalance> {
+    const account = body.Account.connect.id_userId;
+    const data = {
+      Account: {
+        connect: {
+          id_userId: {
+            id: account.id,
+            userId: account.userId
+          }
+        }
+      },
+      value: body.balance,
+      date: body.date
+    };
+    return this.accountBalanceService.createAccountBalance(data);
+  }
 }

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

@@ -140,6 +140,31 @@ export class AccountDetailDialog implements OnDestroy, OnInit {
     this.dialogRef.close();
   }
 
+  public onAddAccountBalance({
+    date,
+    balance
+  }: {
+    date: string;
+    balance: number;
+  }) {
+    const formattedDate = new Date(date);
+    this.dataService
+      .postAccountBalance({
+        userId: this.user.id,
+        accountId: this.data.accountId,
+        balance: balance,
+        currency: this.currency,
+        date: formattedDate
+      })
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe({
+        next: () => {
+          this.fetchAccountBalances();
+          this.fetchPortfolioPerformance();
+        }
+      });
+  }
+
   public onDeleteAccountBalance(aId: string) {
     this.dataService
       .deleteAccountBalance(aId)

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

@@ -122,6 +122,7 @@
             hasPermissionToDeleteAccountBalance &&
             !user.settings.isRestrictedView
           "
+          (accountBalanceCreated)="onAddAccountBalance($event)"
           (accountBalanceDeleted)="onDeleteAccountBalance($event)"
         />
       </mat-tab>

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

@@ -611,6 +611,34 @@ export class DataService {
     return this.http.post<OrderModel>(`/api/v1/account`, aAccount);
   }
 
+  public postAccountBalance({
+    date,
+    accountId,
+    balance,
+    currency,
+    userId
+  }: {
+    date: Date;
+    accountId: string;
+    balance: number;
+    currency: string;
+    userId: string;
+  }) {
+    return this.http.post<any>(`/api/v1/account-balance`, {
+      Account: {
+        connect: {
+          id_userId: {
+            id: accountId,
+            userId
+          }
+        }
+      },
+      currency,
+      date,
+      balance: balance
+    });
+  }
+
   public postBenchmark(benchmark: UniqueAsset) {
     return this.http.post(`/api/v1/benchmark`, benchmark);
   }

libs/common/src/lib/permissions.ts

@@ -7,6 +7,7 @@ export const permissions = {
   accessAssistant: 'accessAssistant',
   createAccess: 'createAccess',
   createAccount: 'createAccount',
+  createAccountBalance: 'createAccountBalance',
   createOrder: 'createOrder',
   createPlatform: 'createPlatform',
   createTag: 'createTag',
@@ -47,6 +48,7 @@ export function getPermissions(aRole: Role): string[] {
         permissions.accessAssistant,
         permissions.createAccess,
         permissions.createAccount,
+        permissions.createAccountBalance,
         permissions.deleteAccountBalance,
         permissions.createOrder,
         permissions.createPlatform,
@@ -75,6 +77,7 @@ export function getPermissions(aRole: Role): string[] {
         permissions.accessAssistant,
         permissions.createAccess,
         permissions.createAccount,
+        permissions.createAccountBalance,
         permissions.createOrder,
         permissions.deleteAccess,
         permissions.deleteAccount,

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

@@ -1,60 +1,101 @@
-<table
+<form [formGroup]="accountBalanceForm" (ngSubmit)="onSubmitAccountBalance()">
-  class="gf-table w-100"
+  <table
-  mat-table
+    class="gf-table w-100"
-  matSort
+    mat-table
-  matSortActive="date"
+    matSort
-  matSortDirection="desc"
+    matSortActive="date"
-  [dataSource]="dataSource"
+    matSortDirection="desc"
->
+    [dataSource]="dataSource"
-  <ng-container matColumnDef="date">
+  >
-    <th *matHeaderCellDef class="px-2" mat-header-cell mat-sort-header>
+    <ng-container matColumnDef="date">
-      <ng-container i18n>Date</ng-container>
+      <th *matHeaderCellDef class="px-2" mat-header-cell mat-sort-header>
-    </th>
+        <ng-container i18n>Date</ng-container>
-    <td *matCellDef="let element" class="px-2" mat-cell>
+      </th>
-      <gf-value [isDate]="true" [locale]="locale" [value]="element?.date" />
+      <td *matCellDef="let element" class="px-2" mat-cell>
-    </td>
+        <gf-value [isDate]="true" [locale]="locale" [value]="element?.date" />
-  </ng-container>
+      </td>
+      <td *matFooterCellDef class="px-2" mat-footer-cell>
+        <mat-form-field appearance="outline">
+          <mat-label i18n>Date</mat-label>
+          <input formControlName="date" matInput [matDatepicker]="date" />
+          <mat-datepicker-toggle matSuffix [for]="date">
+            <ion-icon
+              class="text-muted"
+              matDatepickerToggleIcon
+              name="calendar-clear-outline"
+            />
+          </mat-datepicker-toggle>
+          <mat-datepicker #date disabled="false" />
+        </mat-form-field>
+      </td>
+    </ng-container>
 
-  <ng-container matColumnDef="value">
+    <ng-container matColumnDef="value">
-    <th *matHeaderCellDef class="px-2 text-right" mat-header-cell>
+      <th *matHeaderCellDef class="px-2 text-right" mat-header-cell>
-      <ng-container i18n>Value</ng-container>
+        <ng-container i18n>Value</ng-container>
-    </th>
+      </th>
-    <td *matCellDef="let element" class="px-2" mat-cell>
+      <td *matCellDef="let element" class="px-2" mat-cell>
-      <div class="d-flex justify-content-end">
+        <div class="d-flex justify-content-end">
-        <gf-value
+          <gf-value
-          [isCurrency]="true"
+            [isCurrency]="true"
-          [locale]="locale"
+            [locale]="locale"
-          [unit]="element?.Account?.currency"
+            [unit]="element?.Account?.currency"
-          [value]="element?.value"
+            [value]="element?.value"
-        />
+          />
-      </div>
+        </div>
-    </td>
+      </td>
-  </ng-container>
+      <td *matFooterCellDef class="px-2" mat-footer-cell>
+        <div class="d-flex justify-content-end">
+          <mat-form-field apperance="outline">
+            <input
+              formControlName="balance"
+              matInput
+              placeholder="Value"
+              type="number"
+            />
+          </mat-form-field>
+        </div>
+      </td>
+    </ng-container>
 
-  <ng-container matColumnDef="actions" stickyEnd>
+    <ng-container matColumnDef="actions" stickyEnd>
-    <th *matHeaderCellDef class="px-1 text-center" mat-header-cell></th>
+      <th *matHeaderCellDef class="px-1 text-center" mat-header-cell></th>
-    <td *matCellDef="let element" class="px-1 text-center" mat-cell>
+      <td *matCellDef="let element" class="px-1 text-center" mat-cell>
-      @if (showActions) {
+        @if (showActions) {
+          <button
+            class="mx-1 no-min-width px-2"
+            mat-button
+            [matMenuTriggerFor]="accountBalanceMenu"
+            (click)="$event.stopPropagation()"
+          >
+            <ion-icon name="ellipsis-horizontal" />
+          </button>
+        }
+        <mat-menu #accountBalanceMenu="matMenu" xPosition="before">
+          <button mat-menu-item (click)="onDeleteAccountBalance(element.id)">
+            <span class="align-items-center d-flex">
+              <ion-icon class="mr-2" name="trash-outline" />
+              <span i18n>Delete</span>
+            </span>
+          </button>
+        </mat-menu>
+      </td>
+      <td *matFooterCellDef class="px-1 text-center" mat-footer-cell>
         <button
           class="mx-1 no-min-width px-2"
-          mat-button
+          color="primary"
-          [matMenuTriggerFor]="accountBalanceMenu"
+          mat-flat-button
-          (click)="$event.stopPropagation()"
+          type="submit"
+          [disabled]="accountBalanceForm.invalid"
         >
-          <ion-icon name="ellipsis-horizontal" />
+          <ion-icon name="add" />
+          <span i18n>Add</span>
         </button>
-      }
+      </td>
-      <mat-menu #accountBalanceMenu="matMenu" xPosition="before">
+    </ng-container>
-        <button mat-menu-item (click)="onDeleteAccountBalance(element.id)">
-          <span class="align-items-center d-flex">
-            <ion-icon class="mr-2" name="trash-outline" />
-            <span i18n>Delete</span>
-          </span>
-        </button>
-      </mat-menu>
-    </td>
-  </ng-container>
 
-  <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
+    <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
-  <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
+    <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
-</table>
+    <tr *matFooterRowDef="displayedColumns" mat-footer-row></tr>
+  </table>
+</form>

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

@@ -1,3 +1,10 @@
 :host {
   display: block;
 }
+
+:host-context(.is-dark-theme) {
+  input {
+    color: rgb(var(--light-primary-text));
+    background-color: rgb(var(--palette-foreground-text-light));
+  }
+}

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

@@ -14,7 +14,17 @@ import {
   Output,
   ViewChild
 } from '@angular/core';
+import {
+  FormGroup,
+  FormControl,
+  Validators,
+  ReactiveFormsModule
+} from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
+import { DateAdapter } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
@@ -29,9 +39,13 @@ import { GfValueComponent } from '../value';
     CommonModule,
     GfValueComponent,
     MatButtonModule,
+    MatDatepickerModule,
+    MatFormFieldModule,
+    MatInputModule,
     MatMenuModule,
     MatSortModule,
-    MatTableModule
+    MatTableModule,
+    ReactiveFormsModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-account-balances',
@@ -47,10 +61,16 @@ export class GfAccountBalancesComponent
   @Input() locale = getLocale();
   @Input() showActions = true;
 
+  @Output() accountBalanceCreated = new EventEmitter<{
+    balance: number;
+    date: string;
+  }>();
   @Output() accountBalanceDeleted = new EventEmitter<string>();
 
   @ViewChild(MatSort) sort: MatSort;
 
+  public Validators = Validators;
+
   public dataSource: MatTableDataSource<
     AccountBalancesResponse['balances'][0]
   > = new MatTableDataSource();
@@ -58,9 +78,16 @@ export class GfAccountBalancesComponent
 
   private unsubscribeSubject = new Subject<void>();
 
-  public constructor() {}
+  public constructor(private dateAdapter: DateAdapter<any>) {}
+
+  public accountBalanceForm = new FormGroup({
+    balance: new FormControl(0, Validators.required),
+    date: new FormControl(new Date().toISOString(), Validators.required)
+  });
 
-  public ngOnInit() {}
+  public ngOnInit() {
+    this.dateAdapter.setLocale(this.locale);
+  }
 
   public ngOnChanges() {
     if (this.accountBalances) {
@@ -81,6 +108,10 @@ export class GfAccountBalancesComponent
     }
   }
 
+  public onSubmitAccountBalance() {
+    this.accountBalanceCreated.emit(this.accountBalanceForm.getRawValue());
+  }
+
   public ngOnDestroy() {
     this.unsubscribeSubject.next();
     this.unsubscribeSubject.complete();