From c31ce24f206f854dd71a17e36b4132cd4ef99680 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Thu, 23 Jul 2026 19:54:35 +0200
Subject: [PATCH] Fix localization of FIRE page

---
 .../portfolio/fire/fire-page.component.ts     |  9 ++-
 .../app/pages/portfolio/fire/fire-page.html   | 76 ++++++++-----------
 libs/common/src/lib/helper.ts                 | 13 ++++
 .../fire-calculator.component.ts              | 10 +--
 4 files changed, 56 insertions(+), 52 deletions(-)

diff --git a/apps/client/src/app/pages/portfolio/fire/fire-page.component.ts b/apps/client/src/app/pages/portfolio/fire/fire-page.component.ts
index 76ca47d017..b7ef8b302b 100644
--- a/apps/client/src/app/pages/portfolio/fire/fire-page.component.ts
+++ b/apps/client/src/app/pages/portfolio/fire/fire-page.component.ts
@@ -1,6 +1,7 @@
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { SubscriptionType } from '@ghostfolio/common/enums';
+import { formatMonthAndYear } from '@ghostfolio/common/helper';
 import {
   FireCalculationCompleteEvent,
   FireWealth,
@@ -85,10 +86,10 @@ export class GfFirePageComponent implements OnInit {
       return '';
     }
 
-    return new Intl.DateTimeFormat(this.user?.settings?.locale, {
-      month: 'long',
-      year: 'numeric'
-    }).format(new Date(retirementDate));
+    return formatMonthAndYear({
+      date: new Date(retirementDate),
+      locale: this.user?.settings?.locale
+    });
   }
 
   public ngOnInit() {
diff --git a/apps/client/src/app/pages/portfolio/fire/fire-page.html b/apps/client/src/app/pages/portfolio/fire/fire-page.html
index 97f63f3db6..3bc62dd95f 100644
--- a/apps/client/src/app/pages/portfolio/fire/fire-page.html
+++ b/apps/client/src/app/pages/portfolio/fire/fire-page.html
@@ -128,50 +128,40 @@
 
         @if (user?.settings?.isExperimentalFeatures) {
           <div>
-            <ng-container i18n>By</ng-container>
-            <ng-container>&nbsp;</ng-container>
-            <span class="font-weight-bold">{{ retirementDateLabel }}</span>
-            <ng-container i18n="@@page.fire.projected.1">,</ng-container>
-            <ng-container>&nbsp;</ng-container>
-            <ng-container i18n>this is projected to increase to</ng-container>
-            <ng-container>&nbsp;</ng-container>
-            <span class="font-weight-bold"
-              ><gf-value
-                class="d-inline-block"
-                [isCurrency]="true"
-                [locale]="user?.settings?.locale"
-                [unit]="user?.settings?.baseCurrency"
-                [value]="withdrawalRatePerYearProjected?.toNumber()"
-              />
-              <ng-container>&nbsp;</ng-container>
-              <ng-container i18n>per year</ng-container></span
-            >
-            <ng-container>&nbsp;</ng-container>
-            <ng-container i18n>or</ng-container>
-            <ng-container>&nbsp;</ng-container>
-            <span class="font-weight-bold"
-              ><gf-value
-                class="d-inline-block"
-                [isCurrency]="true"
-                [locale]="user?.settings?.locale"
-                [unit]="user?.settings?.baseCurrency"
-                [value]="withdrawalRatePerMonthProjected?.toNumber()"
-              />
-              <ng-container>&nbsp;</ng-container>
-              <ng-container i18n>per month</ng-container></span
+            <ng-container i18n
+              >By <span class="font-weight-bold">{{ retirementDateLabel }}</span
+              >, this is projected to increase to
+              <span class="font-weight-bold"
+                ><gf-value
+                  class="d-inline-block"
+                  [isCurrency]="true"
+                  [locale]="user?.settings?.locale"
+                  [unit]="user?.settings?.baseCurrency"
+                  [value]="withdrawalRatePerYearProjected?.toNumber()"
+                />
+                per year</span
+              >
+              or
+              <span class="font-weight-bold"
+                ><gf-value
+                  class="d-inline-block"
+                  [isCurrency]="true"
+                  [locale]="user?.settings?.locale"
+                  [unit]="user?.settings?.baseCurrency"
+                  [value]="withdrawalRatePerMonthProjected?.toNumber()"
+                />
+                per month</span
+              >, assuming a
+              <span class="font-weight-bold"
+                ><gf-value
+                  class="d-inline-block"
+                  [isPercent]="true"
+                  [locale]="user?.settings?.locale"
+                  [precision]="2"
+                  [value]="user?.settings?.annualInterestRate / 100"
+              /></span>
+              annual interest rate.</ng-container
             >
-            <ng-container i18n>, assuming a</ng-container>
-            <ng-container>&nbsp;</ng-container>
-            <span class="font-weight-bold"
-              ><gf-value
-                class="d-inline-block"
-                [isPercent]="true"
-                [locale]="user?.settings?.locale"
-                [precision]="2"
-                [value]="user?.settings?.annualInterestRate / 100"
-            /></span>
-            <ng-container>&nbsp;</ng-container>
-            <ng-container i18n>annual interest rate</ng-container>.
           </div>
         }
       </div>
diff --git a/libs/common/src/lib/helper.ts b/libs/common/src/lib/helper.ts
index 7787b2a97b..5d1ff538e5 100644
--- a/libs/common/src/lib/helper.ts
+++ b/libs/common/src/lib/helper.ts
@@ -233,6 +233,19 @@ export function extractNumberFromString({
   }
 }
 
+export function formatMonthAndYear({
+  date,
+  locale
+}: {
+  date: Date;
+  locale?: string;
+}) {
+  return new Intl.DateTimeFormat(locale, {
+    month: 'long',
+    year: 'numeric'
+  }).format(date);
+}
+
 export function getAllActivityTypes(): ActivityType[] {
   return Object.values(ActivityType);
 }
diff --git a/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts b/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts
index 475f5b0e76..cfa2ee5cd2 100644
--- a/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts
+++ b/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts
@@ -3,7 +3,7 @@ import {
   transformTickToAbbreviation
 } from '@ghostfolio/common/chart-helper';
 import { primaryColorRgb } from '@ghostfolio/common/config';
-import { getLocale } from '@ghostfolio/common/helper';
+import { formatMonthAndYear, getLocale } from '@ghostfolio/common/helper';
 import { FireCalculationCompleteEvent } from '@ghostfolio/common/interfaces';
 import { ColorScheme } from '@ghostfolio/common/types';
 
@@ -215,10 +215,10 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy {
       return '';
     }
 
-    return new Intl.DateTimeFormat(this.locale, {
-      month: 'long',
-      year: 'numeric'
-    }).format(retirementDate);
+    return formatMonthAndYear({
+      date: retirementDate,
+      locale: this.locale
+    });
   }
 
   public ngOnChanges() {