From 80f575782d58817fc3e981cde7091fc87b3539b0 Mon Sep 17 00:00:00 2001
From: Ahmed Elbohoty <a.ramzielbohoty@gmail.com>
Date: Wed, 23 Oct 2024 22:41:33 +0300
Subject: [PATCH] Translation:
 desktop-client/src/components/reports/reports/CustomReport.tsx

---
 .../reports/reports/CustomReport.tsx          | 19 +++++++++++++------
 upcoming-release-notes/3722.md                |  6 ++++++
 2 files changed, 19 insertions(+), 6 deletions(-)
 create mode 100644 upcoming-release-notes/3722.md

diff --git a/packages/desktop-client/src/components/reports/reports/CustomReport.tsx b/packages/desktop-client/src/components/reports/reports/CustomReport.tsx
index a3a438b0909..8a31f038061 100644
--- a/packages/desktop-client/src/components/reports/reports/CustomReport.tsx
+++ b/packages/desktop-client/src/components/reports/reports/CustomReport.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 
 import * as d from 'date-fns';
@@ -102,6 +103,7 @@ function useSelectedCategories(
 }
 
 export function CustomReport() {
+  const { t } = useTranslation();
   const categories = useCategories();
   const { isNarrowWidth } = useResponsive();
   const [_firstDayOfWeekIdx] = useSyncedPref('firstDayOfWeekIdx');
@@ -644,16 +646,20 @@ export function CustomReport() {
       header={
         isNarrowWidth ? (
           <MobilePageHeader
-            title={`Custom Report: ${report.name || 'Unsaved report'}`}
+            title={
+              report.name
+                ? t('Custom Report: {{name}}', { name: report.name })
+                : t('Custom Report: Unsaved report')
+            }
             leftContent={<MobileBackButton onPress={onBackClick} />}
           />
         ) : (
           <PageHeader
             title={
               <>
-                <Text>Custom Report:</Text>
+                <Text>{t('Custom Report:')}</Text>
                 <Text style={{ marginLeft: 5, color: theme.pageTextPositive }}>
-                  {report.name || 'Unsaved report'}
+                  {report.name || t('Unsaved report')}
                 </Text>
               </>
             }
@@ -766,8 +772,9 @@ export function CustomReport() {
 
               {hasWarning && (
                 <Warning style={{ paddingTop: 5, paddingBottom: 5 }}>
-                  This report is configured to use a non-existing filter value
-                  (i.e. category/account/payee).
+                  {t(
+                    'This report is configured to use a non-existing filter value (i.e. category/account/payee).',
+                  )}
                 </Warning>
               )}
             </View>
@@ -830,7 +837,7 @@ export function CustomReport() {
                     intervalsCount={intervals.length}
                   />
                 ) : (
-                  <LoadingIndicator message="Loading report..." />
+                  <LoadingIndicator message={t('Loading report...')} />
                 )}
               </View>
             </View>
diff --git a/upcoming-release-notes/3722.md b/upcoming-release-notes/3722.md
new file mode 100644
index 00000000000..708b67c9269
--- /dev/null
+++ b/upcoming-release-notes/3722.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [AhmedElbohoty]
+---
+
+Translation support for desktop-client/src/components/reports/reports/CustomReport.tsx