From d10e815a3dd5c68e11415f4972fc4bed8efd2658 Mon Sep 17 00:00:00 2001
From: Kenrick Tandrian <60643640+KenTandrian@users.noreply.github.com>
Date: Fri, 10 Jul 2026 14:52:16 +0700
Subject: [PATCH] Task/improve type safety in portfolio summary component
 (#7293)

* fix(client): resolve type errors

* feat(client): enforce encapsulation

* feat(client): replace constructor based DI with inject functions

* feat(client): implement output signal
---
 .../portfolio-summary.component.ts            | 32 ++++++++++---------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.ts b/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.ts
index 3d2760202..b1e32c6c3 100644
--- a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.ts
+++ b/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.ts
@@ -8,10 +8,10 @@ import { GfValueComponent } from '@ghostfolio/ui/value';
 import {
   ChangeDetectionStrategy,
   Component,
-  EventEmitter,
+  inject,
   Input,
   OnChanges,
-  Output
+  output
 } from '@angular/core';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { IonIcon } from '@ionic/angular/standalone';
@@ -40,44 +40,46 @@ export class GfPortfolioSummaryComponent implements OnChanges {
   @Input() summary: PortfolioSummary;
   @Input() user: User;
 
-  @Output() emergencyFundChanged = new EventEmitter<number>();
+  public emergencyFundChanged = output<number>();
 
-  public buyAndSellActivitiesTooltip = translate(
+  protected readonly buyAndSellActivitiesTooltip = translate(
     'BUY_AND_SELL_ACTIVITIES_TOOLTIP'
   );
 
-  public precision = 2;
-  public timeInMarket: string;
+  protected precision = 2;
+  protected timeInMarket: string | undefined;
 
-  public get buyingPowerPercentage() {
+  private readonly notificationService = inject(NotificationService);
+
+  public constructor() {
+    addIcons({ ellipsisHorizontalCircleOutline, informationCircleOutline });
+  }
+
+  protected get buyingPowerPercentage() {
     return this.summary?.totalValueInBaseCurrency
       ? this.summary.cash / this.summary.totalValueInBaseCurrency
       : 0;
   }
 
-  public get emergencyFundPercentage() {
+  protected get emergencyFundPercentage() {
     return this.summary?.totalValueInBaseCurrency
       ? (this.summary.emergencyFund?.total || 0) /
           this.summary.totalValueInBaseCurrency
       : 0;
   }
 
-  public get excludedFromAnalysisPercentage() {
+  protected get excludedFromAnalysisPercentage() {
     return this.summary?.totalValueInBaseCurrency
       ? this.summary.excludedAccountsAndActivities /
           this.summary.totalValueInBaseCurrency
       : 0;
   }
 
-  public constructor(private notificationService: NotificationService) {
-    addIcons({ ellipsisHorizontalCircleOutline, informationCircleOutline });
-  }
-
   public ngOnChanges() {
     if (this.summary) {
       if (
         this.deviceType === 'mobile' &&
-        this.summary.totalValueInBaseCurrency >=
+        (this.summary.totalValueInBaseCurrency ?? 0) >=
           NUMERICAL_PRECISION_THRESHOLD_6_FIGURES
       ) {
         this.precision = 0;
@@ -98,7 +100,7 @@ export class GfPortfolioSummaryComponent implements OnChanges {
     }
   }
 
-  public onEditEmergencyFund() {
+  protected onEditEmergencyFund() {
     this.notificationService.prompt({
       confirmFn: (value) => {
         const emergencyFund = parseFloat(value.trim()) || 0;