Merge branch 'main' into task/upgrade-nx-to-version-22.7.1

CHANGELOG.md

@@ -7,15 +7,26 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Changed
+
+- Upgraded `Nx` from version `22.6.5` to `22.7.1`
+
+## 3.2.0 - 2026-05-03
+
 ### Added
 
 - Added `angular-developer` skills
 
 ### Changed
 
-- Upgraded `Nx` from version `22.6.5` to `22.7.1`
+- Harmonized the unit styling in the value component
 - Upgraded `stripe` from version `20.4.1` to `21.0.1`
 
+### Fixed
+
+- Resolved a validation error with an empty URL in the asset profile details dialog of the admin control panel
+- Resolved an issue where charts and components defaulted to _Roboto_ instead of the preconfigured _Inter_ font family
+
 ## 3.1.0 - 2026-04-29
 
 ### Added

apps/client/src/app/app.component.ts

@@ -28,6 +28,7 @@ import {
   RouterOutlet
 } from '@angular/router';
 import { DataSource } from '@prisma/client';
+import { Chart } from 'chart.js';
 import { addIcons } from 'ionicons';
 import { openOutline } from 'ionicons/icons';
 import { DeviceDetectorService } from 'ngx-device-detector';
@@ -255,6 +256,9 @@ export class GfAppComponent implements OnInit {
 
     this.toggleTheme(isDarkTheme);
 
+    // Default chart styles
+    Chart.defaults.font.family = getCssVariable('--font-family-sans-serif');
+
     window.matchMedia('(prefers-color-scheme: dark)').addListener((event) => {
       if (!this.user?.settings.colorScheme) {
         this.toggleTheme(event.matches);

apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.component.ts

@@ -575,13 +575,13 @@ export class GfAssetProfileDialogComponent implements OnInit {
       assetClass: this.assetProfileForm.controls.assetClass.value ?? undefined,
       assetSubClass:
         this.assetProfileForm.controls.assetSubClass.value ?? undefined,
-      comment: this.assetProfileForm.controls.comment.value ?? undefined,
+      comment: this.assetProfileForm.controls.comment.value || undefined,
       currency: this.assetProfileForm.controls.currency.value ?? undefined,
       isActive: isBoolean(this.assetProfileForm.controls.isActive.value)
         ? this.assetProfileForm.controls.isActive.value
         : undefined,
-      name: this.assetProfileForm.controls.name.value ?? undefined,
-      url: this.assetProfileForm.controls.url.value ?? undefined
+      name: this.assetProfileForm.controls.name.value || undefined,
+      url: this.assetProfileForm.controls.url.value || undefined
     };
 
     try {

apps/client/src/app/pages/portfolio/fire/fire-page.component.ts

@@ -16,7 +16,9 @@ import { CommonModule, NgStyle } from '@angular/common';
 import {
   ChangeDetectorRef,
   Component,
+  computed,
   DestroyRef,
+  inject,
   OnInit
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -42,33 +44,40 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
   templateUrl: './fire-page.html'
 })
 export class GfFirePageComponent implements OnInit {
-  public deviceType: string;
-  public fireWealth: FireWealth;
-  public hasImpersonationId: boolean;
-  public hasPermissionToUpdateUserSettings: boolean;
-  public isLoading = false;
-  public projectedTotalAmount: number;
-  public retirementDate: Date;
-  public safeWithdrawalRateControl = new FormControl<number>(undefined);
-  public safeWithdrawalRateOptions = [0.025, 0.03, 0.035, 0.04, 0.045];
-  public user: User;
-  public withdrawalRatePerMonth: Big;
-  public withdrawalRatePerMonthProjected: Big;
-  public withdrawalRatePerYear: Big;
-  public withdrawalRatePerYearProjected: Big;
-
-  public constructor(
-    private changeDetectorRef: ChangeDetectorRef,
-    private dataService: DataService,
-    private destroyRef: DestroyRef,
-    private deviceService: DeviceDetectorService,
-    private impersonationStorageService: ImpersonationStorageService,
-    private userService: UserService
-  ) {}
+  protected readonly deviceType = computed(
+    () => this.deviceDetectorService.deviceInfo().deviceType
+  );
+
+  protected fireWealth: FireWealth;
+  protected hasImpersonationId: boolean;
+  protected hasPermissionToUpdateUserSettings: boolean;
+  protected isLoading = false;
+  protected retirementDate: Date;
+  protected readonly safeWithdrawalRateControl = new FormControl<
+    number | undefined
+  >(undefined);
+  protected readonly safeWithdrawalRateOptions = [
+    0.025, 0.03, 0.035, 0.04, 0.045
+  ] as const;
+  protected user: User;
+  protected withdrawalRatePerMonth: Big;
+  protected withdrawalRatePerMonthProjected: Big;
+  protected withdrawalRatePerYear: Big;
+  protected withdrawalRatePerYearProjected: Big;
+
+  private projectedTotalAmount: number;
+
+  private readonly changeDetectorRef = inject(ChangeDetectorRef);
+  private readonly dataService = inject(DataService);
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly deviceDetectorService = inject(DeviceDetectorService);
+  private readonly impersonationStorageService = inject(
+    ImpersonationStorageService
+  );
+  private readonly userService = inject(UserService);
 
   public ngOnInit() {
     this.isLoading = true;
-    this.deviceType = this.deviceService.getDeviceInfo().deviceType;
 
     this.dataService
       .fetchPortfolioDetails()
@@ -76,7 +85,7 @@ export class GfFirePageComponent implements OnInit {
       .subscribe(({ summary }) => {
         this.fireWealth = {
           today: {
-            valueInBaseCurrency: summary.fireWealth
+            valueInBaseCurrency: summary?.fireWealth
               ? summary.fireWealth.today.valueInBaseCurrency
               : 0
           }
@@ -104,7 +113,7 @@ export class GfFirePageComponent implements OnInit {
     this.safeWithdrawalRateControl.valueChanges
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((value) => {
-        this.onSafeWithdrawalRateChange(Number(value));
+        this.updateSafeWithdrawalRate(Number(value));
       });
 
     this.userService.stateChanged
@@ -133,7 +142,7 @@ export class GfFirePageComponent implements OnInit {
       });
   }
 
-  public onAnnualInterestRateChange(annualInterestRate: number) {
+  protected onAnnualInterestRateChange(annualInterestRate: number) {
     this.dataService
       .putUserSetting({ annualInterestRate })
       .pipe(takeUntilDestroyed(this.destroyRef))
@@ -149,7 +158,7 @@ export class GfFirePageComponent implements OnInit {
       });
   }
 
-  public onCalculationComplete({
+  protected onCalculationComplete({
     projectedTotalAmount,
     retirementDate
   }: FireCalculationCompleteEvent) {
@@ -161,11 +170,11 @@ export class GfFirePageComponent implements OnInit {
     this.isLoading = false;
   }
 
-  public onRetirementDateChange(retirementDate: Date) {
+  protected onProjectedTotalAmountChange(projectedTotalAmount: number) {
     this.dataService
       .putUserSetting({
-        retirementDate: retirementDate.toISOString(),
-        projectedTotalAmount: null
+        projectedTotalAmount,
+        retirementDate: null
       })
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(() => {
@@ -180,9 +189,12 @@ export class GfFirePageComponent implements OnInit {
       });
   }
 
-  public onSafeWithdrawalRateChange(safeWithdrawalRate: number) {
+  protected onRetirementDateChange(retirementDate: Date) {
     this.dataService
-      .putUserSetting({ safeWithdrawalRate })
+      .putUserSetting({
+        projectedTotalAmount: null,
+        retirementDate: retirementDate.toISOString()
+      })
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(() => {
         this.userService
@@ -191,15 +203,12 @@ export class GfFirePageComponent implements OnInit {
           .subscribe((user) => {
             this.user = user;
 
-            this.calculateWithdrawalRates();
-            this.calculateWithdrawalRatesProjected();
-
             this.changeDetectorRef.markForCheck();
           });
       });
   }
 
-  public onSavingsRateChange(savingsRate: number) {
+  protected onSavingsRateChange(savingsRate: number) {
     this.dataService
       .putUserSetting({ savingsRate })
       .pipe(takeUntilDestroyed(this.destroyRef))
@@ -215,25 +224,6 @@ export class GfFirePageComponent implements OnInit {
       });
   }
 
-  public onProjectedTotalAmountChange(projectedTotalAmount: number) {
-    this.dataService
-      .putUserSetting({
-        projectedTotalAmount,
-        retirementDate: null
-      })
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(() => {
-        this.userService
-          .get(true)
-          .pipe(takeUntilDestroyed(this.destroyRef))
-          .subscribe((user) => {
-            this.user = user;
-
-            this.changeDetectorRef.markForCheck();
-          });
-      });
-  }
-
   private calculateWithdrawalRates() {
     if (this.fireWealth && this.user?.settings?.safeWithdrawalRate) {
       this.withdrawalRatePerYear = new Big(
@@ -258,4 +248,23 @@ export class GfFirePageComponent implements OnInit {
         this.withdrawalRatePerYearProjected.div(12);
     }
   }
+
+  private updateSafeWithdrawalRate(safeWithdrawalRate: number) {
+    this.dataService
+      .putUserSetting({ safeWithdrawalRate })
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(() => {
+        this.userService
+          .get(true)
+          .pipe(takeUntilDestroyed(this.destroyRef))
+          .subscribe((user) => {
+            this.user = user;
+
+            this.calculateWithdrawalRates();
+            this.calculateWithdrawalRatesProjected();
+
+            this.changeDetectorRef.markForCheck();
+          });
+      });
+  }
 }

apps/client/src/app/pages/portfolio/fire/fire-page.html

@@ -13,7 +13,7 @@
           [annualInterestRate]="user?.settings?.annualInterestRate"
           [colorScheme]="user?.settings?.colorScheme"
           [currency]="user?.settings?.baseCurrency"
-          [deviceType]="deviceType"
+          [deviceType]="deviceType()"
           [fireWealth]="fireWealth?.today.valueInBaseCurrency"
           [hasPermissionToUpdateUserSettings]="
             !hasImpersonationId && hasPermissionToUpdateUserSettings

apps/client/src/styles/theme.scss

@@ -139,20 +139,28 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
 @include mat.elevation-classes();
 @include mat.table-density(-1);
 
-// $gf-typography: mat.m2-define-typography-config();
+$gf-typography: (
+  // Font families
+  brand-family: var(--font-family-sans-serif),
+  plain-family: var(--font-family-sans-serif),
+  // Font weights
+  bold-weight: 700,
+  medium-weight: 500,
+  regular-weight: 400
+);
 
 .theme-light {
   $gf-theme-default: mat.define-theme(
     (
       color: (
         primary: $_primary,
-        theme-type: light,
-        tertiary: $_tertiary
+        tertiary: $_tertiary,
+        theme-type: light
       ),
       density: (
         scale: -3
       ),
-      // typography: $gf-typography
+      typography: $gf-typography
     )
   );
 
@@ -229,13 +237,13 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
     (
       color: (
         primary: $_primary,
-        theme-type: dark,
-        tertiary: $_tertiary
+        tertiary: $_tertiary,
+        theme-type: dark
       ),
       density: (
         scale: -3
       ),
-      // typography: $gf-typography
+      typography: $gf-typography
     )
   );
 

libs/common/src/lib/dtos/update-user-setting.dto.ts

@@ -96,13 +96,21 @@ export class UpdateUserSettingDto {
   @IsOptional()
   locale?: string;
 
+  /**
+   * The target financial amount the user aims to reach before retiring.
+   * Can be explicitly set to null to clear the value and calculate it dynamically.
+   */
   @IsNumber()
   @IsOptional()
-  projectedTotalAmount?: number;
+  projectedTotalAmount?: number | null;
 
+  /**
+   * The target date when the user plans to retire.
+   * Can be explicitly set to null to clear the value and calculate it dynamically.
+   */
   @IsISO8601()
   @IsOptional()
-  retirementDate?: string;
+  retirementDate?: string | null;
 
   @IsNumber()
   @IsOptional()

libs/ui/src/lib/value/value.component.html

@@ -38,21 +38,6 @@
             <div class="mr-1 text-danger">-</div>
           }
         }
-        @if (isPercent) {
-          <div
-            class="mb-0 value"
-            [ngClass]="{
-              'font-weight-bold h2': size === 'large',
-              h4: size === 'medium'
-            }"
-          >
-            @if (value === null) {
-              <span class="text-monospace text-muted">*****</span>%
-            } @else {
-              {{ formattedValue }}%
-            }
-          </div>
-        } @else {
         <div
           class="mb-0 value"
           [ngClass]="{
@@ -66,19 +51,12 @@
             {{ formattedValue }}
           }
         </div>
-        }
-        @if (unit) {
-          @if (size === 'medium') {
-            <small class="ml-1">
-              {{ unit }}
-            </small>
-          } @else {
+        @if (isPercent || unit) {
           <div class="ml-1">
-              {{ unit }}
+            {{ isPercent ? '%' : unit }}
           </div>
         }
       }
-      }
       @if (isString) {
         <div
           class="mb-0 text-truncate value"

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ghostfolio",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ghostfolio",
-      "version": "3.1.0",
+      "version": "3.2.0",
       "hasInstallScript": true,
       "license": "AGPL-3.0",
       "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ghostfolio",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "homepage": "https://ghostfol.io",
   "license": "AGPL-3.0",
   "repository": "https://github.com/ghostfolio/ghostfolio",