feat: Enhance account management by adding current balance field and loading indicators in balance component

Author: PhantomDave

.github/copilot-instructions.md

@@ -1,54 +1,48 @@
-You are an expert in TypeScript, Angular, and scalable web application development. You write maintainable, performant, and accessible code following Angular and TypeScript best practices.
-
-## TypeScript Best Practices
-
-- Use strict type checking
-- Prefer type inference when the type is obvious
-- Avoid the `any` type; use `unknown` when type is uncertain
-
-## Angular Best Practices
-
-- Always use standalone components over NgModules
-- Must NOT set `standalone: true` inside Angular decorators. It's the default.
-- Use signals for state management
-- Implement lazy loading for feature routes
-- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead
-- Use `NgOptimizedImage` for all static images.
-  - `NgOptimizedImage` does not work for inline base64 images.
-
-## Components
-
-- Keep components small and focused on a single responsibility
-- Use `input()` and `output()` functions instead of decorators
-- Use `computed()` for derived state
-- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator
-- Prefer inline templates for small components
-- Prefer Reactive forms instead of Template-driven ones
-- Do NOT use `ngClass`, use `class` bindings instead
-- Do NOT use `ngStyle`, use `style` bindings instead
-- Use Angular Material components, avoid custom UI components when possible
-- Avoid CSS when a custom component is provided by Angular Material or us (e.g., app-flex)
-
-## State Management
-
-- Use signals for local component state
-- Use `computed()` for derived state
-- Keep state transformations pure and predictable
-- Do NOT use `mutate` on signals, use `update` or `set` instead
-
-## Templates
-
-- Keep templates simple and avoid complex logic
-- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`
-- Use the async pipe to handle observables
-
-## Services
-
-- Design services around a single responsibility
-- Use the `providedIn: 'root'` option for singleton services
-- Use the `inject()` function instead of constructor injection
-
-## Styling
-- Use Angular's built-in styling capabilities (e.g., component styles)
-- Prefer Angular Material CSS variables for theming
-- Avoid global styles; scope styles to components
+You are GitHub Copilot working in the BankTracker GraphQL monorepo. Follow the patterns already in the codebase before introducing new approaches.
+
+Keep in mind the basics of programming like 
+
+YAGNI, DRY2, NEVER RESORT TO USE SOLID
+
+## Architecture
+- GraphQL backend (`PhantomDave.BankTracking.Api`) exposes accounts and finance records via HotChocolate; schema is composed from `Types/Queries|Mutations|Inputs|ObjectTypes` with `ExtendObjectType` partials.
+- Data layer (`PhantomDave.BankTracking.Data`) wraps EF Core against PostgreSQL with a repository + unit-of-work abstraction registered through `AddDataAccess`.
+- Domain models live in `PhantomDave.BankTracking.Library` and are shared by API, data, and background jobs.
+- Angular 20 frontend (`frontend/`) uses Apollo Angular with generated GQL services, Angular Material, and signals; state is mostly managed inside `models/*-service.ts` files.
+- A hosted service (`RecurringFinanceRecordService`) materializes recurring finance records by cloning templates on a timed loop, so new recurrence features must remain idempotent.
+
+## Backend (ASP.NET + HotChocolate)
+- Prefer throwing `GraphQLException` built via `ErrorBuilder` with explicit `SetCode` values; clients rely on codes like `BAD_USER_INPUT`, `UNAUTHENTICATED`, and `NOT_FOUND` for UX.
+- Retrieve the authenticated account id by calling `httpContextAccessor.GetAccountIdFromContext()`; the JWT must contain `ClaimTypes.NameIdentifier` or mutations will fail.
+- Keep service logic inside `Services/*Service.cs` and reuse the injected `IUnitOfWork`; call `SaveChangesAsync` on the unit of work to commit changes.
+- Normalize and validate inputs (e.g., currency via `NormalizeCurrency`, description length trimming) before persistence to keep recurring job assumptions intact.
+- New GraphQL types should extend the root via `[ExtendObjectType(OperationTypeNames.Query|Mutation)]` and convert entities using `From*` factory helpers in `Types/ObjectTypes`.
+- Database migrations live in `PhantomDave.BankTracking.Data/Migrations`; ensure Postgres is running (`docker compose -f compose.dev.yaml up -d database`) before applying or updating schema.
+
+## Frontend (Angular + Apollo)
+- App uses `provideZonelessChangeDetection` and signals; prefer `signal()`, `computed()`, and `effect()` over RxJS state unless bridging to Apollo streams.
+- Components are standalone by default—do not add `standalone: true` manually—but always list dependencies in `imports` and lean on Angular Material before custom UI.
+- Use the generated Apollo classes (e.g., `CreateAccountGQL`, `GetFinanceRecordsGQL`) with `firstValueFrom` or `.watch().valueChanges`; match operation names with `refetchQueries` strings (`'getFinanceRecords'`).
+- Local auth state is stored in `localStorage` as `sessionData`; guards and the `unauthorizedInterceptor` expect `SessionData` to stay in sync with backend `verifyToken` responses.
+- Prefer signals over component-level Observables; when you must bridge, update signals in a `tap` and remember to set/reset `_loading` and `_error` signals like existing services do.
+- UI feedback goes through `SnackbarService`; reuse `snackbar.success/error` rather than opening `MatSnackBar` manually for consistent styling.
+
+## GraphQL Workflow
+- Add operations as `.graphql` files near the feature (see `frontend/src/app/models/finance-record/gql/*.graphql`); keep operation names unique and PascalCase or camelCase that matches existing usage.
+- Run `npm run codegen` (auto-runs on `npm start` via the `prestart` script) to refresh `src/generated/graphql.ts` and `schema.graphql`; the script reads the backend JWT secret from `appsettings.Development.json` or environment variables.
+- If the backend schema changes, run `./update-schema.sh` after starting the API (`cd PhantomDave.BankTracking.Api && dotnet run`) so the codegen script can reach `http://localhost:5095/graphql`.
+- When adding scalar fields, update the `scalars` mapping in `frontend/codegen.ts` only if the backend type is new; clients currently assume `DateTime` → `string` converted to `Date` in services.
+
+## Developer Workflow
+- Backend: `dotnet run` (or VS Code task `build`) from `PhantomDave.BankTracking.Api`; the app auto-migrates the database on startup.
+- Frontend: `npm run start` in `frontend/` (triggers codegen). Fix the failing command first if schema generation fails—usually missing backend or JWT secret.
+- Tests: there are no automated tests yet; verify critical flows manually (login, recurring creation) after impactful changes.
+- Docker: the root `Dockerfile` builds the API only; run `docker compose -f compose.dev.yaml up -d database` for a local Postgres instance.
+
+## Conventions & Pitfalls
+- Stick to ASCII in code and messages; existing Italian copy in snackbars is unintentional, translate them to english.
+- Avoid `@HostBinding`/`@HostListener`; register host styles via the `host` object (see `FlexComponent`).
+- Signals should not call `.mutate`; use `.set`/`.update` as in `AccountService` and `FinanceRecordService` to keep change detection predictable without zones.
+- Background service creates non-recurring instances by copying template records; new fields must populate both the recurring template and cloned instance to avoid drift.
+- Currency values are persisted as `numeric(18,2)`; always send numbers (not strings) from the frontend and uppercase 3-letter codes to satisfy backend validation.
+- Keep GraphQL error codes stable—UI interceptors look specifically for `UNAUTHENTICATED` to trigger logout and route redirects.

PhantomDave.BankTracking.Api/Types/Mutations/AccountMutations.cs

@@ -29,6 +29,7 @@ public async Task<AccountType> CreateAccount(
                     .SetExtension("field", "email")
                     .SetExtension("reason", "required")
                     .Build());
+
         }
 
         if (string.IsNullOrWhiteSpace(password))
@@ -90,6 +91,7 @@ public async Task<AccountType> CreateAccount(
                     .SetExtension("field", "email")
                     .SetExtension("reason", "invalid_credentials")
                     .Build());
+                    
         return AccountType.FromAccount(account);
     }
 

PhantomDave.BankTracking.Api/Types/ObjectTypes/AccountType.cs

@@ -1,3 +1,4 @@
+using HotChocolate.Types;
 using PhantomDave.BankTracking.Library.Models;
 
 namespace PhantomDave.BankTracking.Api.Types.ObjectTypes;
@@ -7,6 +8,8 @@ public class AccountType
     public int Id { get; set; }
 
     public string Email { get; set; } = string.Empty;
+
+    [GraphQLType(typeof(DecimalType))]
     public decimal CurrentBalance { get; set; }
 
     public DateTime CreatedAt { get; set; }
@@ -20,7 +23,7 @@ public class AccountType
     {
         Id = account.Id,
         Email = account.Email,
-        CurrentBalance = account.CurrentBalance ?? 0,
+    CurrentBalance = account.CurrentBalance ?? 0,
         CreatedAt = account.CreatedAt,
         UpdatedAt = account.UpdatedAt,
     };

frontend/schema.graphql

@@ -15,7 +15,7 @@ directive @cost(
 
 type AccountType {
   createdAt: DateTime!
-  currentBalance: Decimal!
+  currentBalance: Decimal
   email: String!
   id: Int!
   updatedAt: DateTime

frontend/src/app/balance/balance-component/balance-component.css

@@ -1,5 +1,23 @@
 .balance-card {
 	display: block;
+	position: relative;
+}
+
+.loading-overlay {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 12px;
+	background-color: rgba(0, 0, 0, 0.05);
+	z-index: 1;
+	pointer-events: all;
+}
+
+.loading-text {
+	font: var(--mat-sys-title-small);
+	color: var(--mat-sys-on-surface);
 }
 
 [mat-card-avatar] {

frontend/src/app/balance/balance-component/balance-component.html

@@ -1,4 +1,19 @@
-<mat-card appearance="outlined" class="balance-card" aria-label="Account balance summary">
+<mat-card
+  appearance="outlined"
+  class="balance-card"
+  aria-label="Account balance summary"
+  [attr.aria-busy]="loading()"
+>
+  <div *ngIf="loading()" class="loading-overlay" aria-live="polite">
+    <mat-progress-spinner
+      mode="indeterminate"
+      diameter="48"
+      strokeWidth="4"
+      aria-label="Loading account balance"
+    ></mat-progress-spinner>
+  <span class="loading-text">Loading balance...</span>
+  </div>
+
   <mat-card-header>
     <mat-icon mat-card-avatar aria-hidden="true">account_balance_wallet</mat-icon>
     <mat-card-title>Account Balance</mat-card-title>

frontend/src/app/balance/balance-component/balance-component.ts

@@ -1,66 +1,82 @@
-import { CurrencyPipe, DatePipe } from '@angular/common';
-import { Component, computed, effect, inject, OnInit, signal } from '@angular/core';
+import { CurrencyPipe, DatePipe, NgIf } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  inject,
+  OnInit,
+  signal,
+} from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
-import { MatIconModule } from '@angular/material/icon';
 import { MatDividerModule } from '@angular/material/divider';
-import { FinanceRecordService } from '../../models/finance-record/finance-record-service';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatIconModule } from '@angular/material/icon';
+import { AccountService } from '../../models/account/account-service';
 import { FinanceRecord } from '../../models/finance-record/finance-record';
+import { FinanceRecordService } from '../../models/finance-record/finance-record-service';
 
 @Component({
   selector: 'app-balance-component',
-  imports: [CurrencyPipe, DatePipe, MatCardModule, MatIconModule, MatDividerModule],
+  imports: [
+    CurrencyPipe,
+    DatePipe,
+    NgIf,
+    MatCardModule,
+    MatIconModule,
+    MatDividerModule,
+    MatProgressSpinnerModule,
+  ],
   templateUrl: './balance-component.html',
   styleUrl: './balance-component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BalanceComponent implements OnInit {
   private readonly financeRecordService = inject(FinanceRecordService);
-  private readonly records = signal<readonly FinanceRecord[]>(
+  private readonly accountService = inject(AccountService);
+  private readonly records = computed<readonly FinanceRecord[]>(() =>
     this.financeRecordService.financeRecords(),
   );
+  private readonly currentMonthRecords = computed(() => {
+    const today = this.today;
+    return this.records().filter((record) => {
+      const recordDate = new Date(record.date);
+      return (
+        recordDate.getMonth() === today.getMonth() &&
+        recordDate.getFullYear() === today.getFullYear()
+      );
+    });
+  });
+
+  readonly loading = computed(
+    () => this.financeRecordService.loading() || this.accountService.loading(),
+  );
+  private readonly account = computed(() => this.accountService.selectedAccount());
 
   readonly defaultCurrency = 'EUR';
 
-  readonly balance = computed(() => {
-    const records = this.records();
-    const total = records.reduce((sum, record) => sum + record.amount, 0);
-    return total;
-  });
+  readonly balance = computed(() => this.account()?.currentBalance ?? 0);
 
-  today = new Date();
-  daysPassed = this.today.getDate();
+  readonly today = new Date();
+  private readonly daysInMonth = new Date(
+    this.today.getFullYear(),
+    this.today.getMonth() + 1,
+    0,
+  ).getDate();
+  private readonly daysElapsed = Math.max(1, Math.min(this.daysInMonth, this.today.getDate()));
 
   readonly averageDailyExpense = computed(() => {
-    return (
-      this.records()
-        .filter((record) => {
-          const recordDate = new Date(record.date);
-          return (
-            recordDate.getMonth() === this.today.getMonth() &&
-            recordDate.getFullYear() === this.today.getFullYear()
-          );
-        })
-        .reduce((sum, record) => {
-          if (record.amount < 0) return sum + record.amount;
-          return sum;
-        }, 0) / this.daysPassed
-    );
+    const totalExpenses = this.currentMonthRecords()
+      .filter((record) => record.amount < 0)
+      .reduce((sum, record) => sum + record.amount, 0);
+    return totalExpenses / this.daysElapsed;
   });
 
   readonly averageDailyIncome = computed(() => {
-    return (
-      this.records()
-        .filter((record) => {
-          const recordDate = new Date(record.date);
-          return (
-            recordDate.getMonth() === this.today.getMonth() &&
-            recordDate.getFullYear() === this.today.getFullYear()
-          );
-        })
-        .reduce((sum, record) => {
-          if (record.amount > 0) return sum + record.amount;
-          return sum;
-        }, 0) / 31
-    );
+    const totalIncome = this.currentMonthRecords()
+      .filter((record) => record.amount > 0)
+      .reduce((sum, record) => sum + record.amount, 0);
+    return totalIncome / this.daysElapsed;
   });
 
   readonly totalRecurringExpenses = computed(() => {
@@ -73,17 +89,20 @@ export class BalanceComponent implements OnInit {
 
   constructor() {
     effect(() => {
+      this.records();
+      this.account();
       this.lastUpdated.set(new Date());
     });
   }
 
   readonly endOfMonthPrediction = computed(() => {
-    const daysInMonth = new Date(this.today.getFullYear(), this.today.getMonth() + 1, 0).getDate();
-    const remainingDays = daysInMonth - this.daysPassed;
-    return this.averageDailyExpense() * remainingDays + this.balance();
+    const remainingDays = Math.max(0, this.daysInMonth - this.daysElapsed);
+    const projectedDailyNet = this.averageDailyIncome() + this.averageDailyExpense();
+    return this.balance() + projectedDailyNet * remainingDays;
   });
 
   async ngOnInit(): Promise<void> {
     await this.financeRecordService.getFinanceRecords();
+    await this.accountService.getUserAccount();
   }
 }

frontend/src/app/components/settings-component/settings-component.html

@@ -31,7 +31,7 @@
 					@let emailControl = accountForm.controls.email;
 					<mat-form-field appearance="outline" class="form-field">
 						<mat-label>Email</mat-label>
-						<input matInput type="email" formControlName="email" required autocomplete="email" />
+						<input matInput type="email" formControlName="email" required autocomplete="email" [value]="account()?.email"/>
 						@if (emailControl.hasError('required') && (emailControl.dirty || emailControl.touched)) {
 							<mat-error>Email is required.</mat-error>
 						}
@@ -62,7 +62,7 @@
 							mat-flat-button
 							color="primary"
 							type="submit"
-							[disabled]="accountForm.invalid || loading()"
+							[disabled]="loading()"
 						>
 							Save changes
 						</button>