From 6d1c10d1c2bbb8f3ce909120f3255b5caa628a6c Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Thu, 20 Nov 2025 20:13:00 +0100
Subject: [PATCH] Feature/extend portfolio summary by percentage values (#5964)

* Extend summary by percentage values

* Update changelog
---
 CHANGELOG.md                                  |  1 +
 .../components/home-summary/home-summary.html |  1 +
 .../portfolio-summary.component.html          | 54 ++++++++++++++++---
 .../portfolio-summary.component.ts            | 21 ++++++++
 4 files changed, 70 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8b4f7f7c7..1b43275e1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Extended the accounts table menu with a _View Details_ item
+- Extended the portfolio summary tab on the home page by percentage values (experimental)
 - Added the _OSS Gallery_ logo to the logo carousel on the landing page
 
 ### Changed
diff --git a/apps/client/src/app/components/home-summary/home-summary.html b/apps/client/src/app/components/home-summary/home-summary.html
index a9e016c92..064923a04 100644
--- a/apps/client/src/app/components/home-summary/home-summary.html
+++ b/apps/client/src/app/components/home-summary/home-summary.html
@@ -7,6 +7,7 @@
           <gf-portfolio-summary
             [baseCurrency]="user?.settings?.baseCurrency"
             [deviceType]="deviceType"
+            [hasImpersonationId]="hasImpersonationId"
             [hasPermissionToUpdateUserSettings]="
               !hasImpersonationId && hasPermissionToUpdateUserSettings
             "
diff --git a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html b/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html
index 0b2a9ea47..ed9507f89 100644
--- a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html
+++ b/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html
@@ -160,7 +160,21 @@
     </div>
   </div>
   <div class="flex-nowrap px-3 py-1 row">
-    <div class="flex-grow-1 text-truncate" i18n>Emergency Fund</div>
+    <div class="align-items-center d-flex flex-grow-1">
+      <ng-container i18n>Emergency Fund</ng-container>
+      @if (
+        !hasImpersonationId &&
+        summary?.totalValueInBaseCurrency > 0 &&
+        user?.settings?.isExperimentalFeatures
+      ) {
+        <gf-value
+          class="d-lg-inline-block d-none ml-2 small text-muted"
+          [isPercent]="true"
+          [locale]="locale"
+          [value]="isLoading ? undefined : emergencyFundPercentage"
+        />
+      }
+    </div>
     <div
       class="align-items-center d-flex justify-content-end"
       [ngClass]="{
@@ -223,10 +237,23 @@
     </div>
   </div>
   <div class="flex-nowrap px-3 py-1 row">
-    <div class="flex-grow-1 text-truncate" i18n>Buying Power</div>
-    <div class="justify-content-end">
+    <div class="align-items-center d-flex flex-grow-1">
+      <ng-container i18n>Buying Power</ng-container>
+      @if (
+        !hasImpersonationId &&
+        summary?.totalValueInBaseCurrency > 0 &&
+        user?.settings?.isExperimentalFeatures
+      ) {
+        <gf-value
+          class="d-lg-inline-block d-none ml-2 small text-muted"
+          [isPercent]="true"
+          [locale]="locale"
+          [value]="isLoading ? undefined : buyingPowerPercentage"
+        />
+      }
+    </div>
+    <div class="align-items-center d-flex justify-content-end">
       <gf-value
-        class="justify-content-end"
         [isCurrency]="true"
         [locale]="locale"
         [precision]="precision"
@@ -236,10 +263,23 @@
     </div>
   </div>
   <div class="flex-nowrap px-3 py-1 row">
-    <div class="flex-grow-1 text-truncate" i18n>Excluded from Analysis</div>
-    <div class="justify-content-end">
+    <div class="align-items-center d-flex flex-grow-1">
+      <ng-container i18n>Excluded from Analysis</ng-container>
+      @if (
+        !hasImpersonationId &&
+        summary?.totalValueInBaseCurrency > 0 &&
+        user?.settings?.isExperimentalFeatures
+      ) {
+        <gf-value
+          class="d-lg-inline-block d-none ml-2 small text-muted"
+          [isPercent]="true"
+          [locale]="locale"
+          [value]="isLoading ? undefined : excludedFromAnalysisPercentage"
+        />
+      }
+    </div>
+    <div class="align-items-center d-flex justify-content-end">
       <gf-value
-        class="justify-content-end"
         [isCurrency]="true"
         [locale]="locale"
         [precision]="precision"
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 1719b20af..7eab9172e 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
@@ -33,6 +33,7 @@ import {
 export class GfPortfolioSummaryComponent implements OnChanges {
   @Input() baseCurrency: string;
   @Input() deviceType: string;
+  @Input() hasImpersonationId: boolean;
   @Input() hasPermissionToUpdateUserSettings: boolean;
   @Input() isLoading: boolean;
   @Input() language: string;
@@ -49,6 +50,26 @@ export class GfPortfolioSummaryComponent implements OnChanges {
   public precision = 2;
   public timeInMarket: string;
 
+  public get buyingPowerPercentage() {
+    return this.summary?.totalValueInBaseCurrency
+      ? this.summary.cash / this.summary.totalValueInBaseCurrency
+      : 0;
+  }
+
+  public get emergencyFundPercentage() {
+    return this.summary?.totalValueInBaseCurrency
+      ? (this.summary.emergencyFund?.total || 0) /
+          this.summary.totalValueInBaseCurrency
+      : 0;
+  }
+
+  public get excludedFromAnalysisPercentage() {
+    return this.summary?.totalValueInBaseCurrency
+      ? this.summary.excludedAccountsAndActivities /
+          this.summary.totalValueInBaseCurrency
+      : 0;
+  }
+
   public constructor(private notificationService: NotificationService) {
     addIcons({ ellipsisHorizontalCircleOutline, informationCircleOutline });
   }