Translation: desktop-client/src/components/budget/BalanceWithCarryover.tsx (#3352)

packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx

 // @ts-strict-ignore
 import React, { type ComponentPropsWithoutRef } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useFeatureFlag } from '../../hooks/useFeatureFlag';
 import { SvgArrowThinRight } from '../../icons/v1';
@@ -77,6 +78,7 @@ export function BalanceWithCarryover({
   carryoverIndicator = DefaultCarryoverIndicator,
   ...props
 }: BalanceWithCarryoverProps) {
+  const { t } = useTranslation();
   const carryoverValue = useSheetValue(carryover);
   const balanceValue = useSheetValue(balance);
   const goalValue = useSheetValue(goal);
@@ -132,34 +134,40 @@ export function BalanceWithCarryover({
             <View style={{ padding: 10 }}>
               <span style={{ fontWeight: 'bold' }}>
                 {differenceToGoal === 0 ? (
-                  <span style={{ color: theme.noticeText }}>Fully funded</span>
+                  <span style={{ color: theme.noticeText }}>
+                    {t('Fully funded')}
+                  </span>
                 ) : differenceToGoal > 0 ? (
                   <span style={{ color: theme.noticeText }}>
-                    Overfunded ({format(differenceToGoal, 'financial')})
+                    {t('Overfunded ({{amount}})', {
+                      amount: format(differenceToGoal, 'financial'),
+                    })}
                   </span>
                 ) : (
                   <span style={{ color: theme.errorText }}>
-                    Underfunded ({format(differenceToGoal, 'financial')})
+                    {t('Underfunded ({{amount}})', {
+                      amount: format(differenceToGoal, 'financial'),
+                    })}
                   </span>
                 )}
               </span>
               <GoalTooltipRow>
-                <div>Goal Type:</div>
+                <div>{t('Goal Type:')}</div>
                 <div>{longGoalValue === 1 ? 'Long' : 'Template'}</div>
               </GoalTooltipRow>
               <GoalTooltipRow>
-                <div>Goal:</div>
+                <div>{t('Goal:')}</div>
                 <div>{format(goalValue, 'financial')}</div>
               </GoalTooltipRow>
               <GoalTooltipRow>
                 {longGoalValue !== 1 ? (
                   <>
-                    <div>Budgeted:</div>
+                    <div>{t('Budgeted:')}</div>
                     <div>{format(budgetedValue, 'financial')}</div>
                   </>
                 ) : (
                   <>
-                    <div>Balance:</div>
+                    <div>{t('Balance:')}</div>
                     <div>{format(balanceValue, 'financial')}</div>
                   </>
                 )}

upcoming-release-notes/3352.md

+---
+category: Maintenance
+authors: [nmathey]
+---
+
+Support translations in Translation support for desktop-client/src/components/budget/BalanceWithCarryover.tsx
\ No newline at end of file