Translation: desktop-client/components/budget/report (#3280)

packages/desktop-client/src/components/budget/report/BalanceMenu.tsx

 import React, { type ComponentPropsWithoutRef } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { reportBudget } from 'loot-core/src/client/queries';
 
@@ -19,6 +20,7 @@ export function BalanceMenu({
   onCarryover,
   ...props
 }: BalanceMenuProps) {
+  const { t } = useTranslation();
   const carryover = useReportSheetValue(reportBudget.catCarryover(categoryId));
   return (
     <Menu
@@ -36,8 +38,8 @@ export function BalanceMenu({
         {
           name: 'carryover',
           text: carryover
-            ? 'Remove overspending rollover'
-            : 'Rollover overspending',
+            ? t('Remove overspending rollover')
+            : t('Rollover overspending'),
         },
       ]}
     />

packages/desktop-client/src/components/budget/report/BudgetMenu.tsx

 import React, { type ComponentPropsWithoutRef } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useFeatureFlag } from '../../../hooks/useFeatureFlag';
 import { Menu } from '../../common/Menu';
@@ -17,6 +18,7 @@ export function BudgetMenu({
   onApplyBudgetTemplate,
   ...props
 }: BudgetMenuProps) {
+  const { t } = useTranslation();
   const isGoalTemplatesEnabled = useFeatureFlag('goalTemplatesEnabled');
   const onMenuSelect = (name: string) => {
     switch (name) {
@@ -47,25 +49,25 @@ export function BudgetMenu({
       items={[
         {
           name: 'copy-single-last',
-          text: 'Copy last month’s budget',
+          text: t('Copy last month’s budget'),
         },
         {
           name: 'set-single-3-avg',
-          text: 'Set to 3 month average',
+          text: t('Set to 3 month average'),
         },
         {
           name: 'set-single-6-avg',
-          text: 'Set to 6 month average',
+          text: t('Set to 6 month average'),
         },
         {
           name: 'set-single-12-avg',
-          text: 'Set to yearly average',
+          text: t('Set to yearly average'),
         },
         ...(isGoalTemplatesEnabled
           ? [
               {
                 name: 'apply-single-category-template',
-                text: 'Apply budget template',
+                text: t('Apply budget template'),
               },
             ]
           : []),

packages/desktop-client/src/components/budget/report/ReportComponents.tsx

 // @ts-strict-ignore
 import React, { memo, useRef, useState } from 'react';
+import { Trans } from 'react-i18next';
 
 import { reportBudget } from 'loot-core/src/client/queries';
 import { evalArithmetic } from 'loot-core/src/shared/arithmetic';
@@ -61,7 +62,9 @@ export const BudgetTotalsMonth = memo(function BudgetTotalsMonth() {
       }}
     >
       <View style={headerLabelStyle}>
-        <Text style={{ color: theme.pageTextLight }}>Budgeted</Text>
+        <Text style={{ color: theme.pageTextLight }}>
+          <Trans>Budgeted</Trans>
+        </Text>
         <ReportCellValue
           binding={reportBudget.totalBudgetedExpense}
           type="financial"
@@ -72,7 +75,9 @@ export const BudgetTotalsMonth = memo(function BudgetTotalsMonth() {
         />
       </View>
       <View style={headerLabelStyle}>
-        <Text style={{ color: theme.pageTextLight }}>Spent</Text>
+        <Text style={{ color: theme.pageTextLight }}>
+          <Trans>Spent</Trans>
+        </Text>
         <ReportCellValue
           binding={reportBudget.totalSpent}
           type="financial"
@@ -80,7 +85,9 @@ export const BudgetTotalsMonth = memo(function BudgetTotalsMonth() {
         />
       </View>
       <View style={headerLabelStyle}>
-        <Text style={{ color: theme.pageTextLight }}>Balance</Text>
+        <Text style={{ color: theme.pageTextLight }}>
+          <Trans>Balance</Trans>
+        </Text>
         <ReportCellValue
           binding={reportBudget.totalLeftover}
           type="financial"
@@ -101,10 +108,14 @@ export function IncomeHeaderMonth() {
       }}
     >
       <View style={headerLabelStyle}>
-        <Text style={{ color: theme.pageTextLight }}>Budgeted</Text>
+        <Text style={{ color: theme.pageTextLight }}>
+          <Trans>Budgeted</Trans>
+        </Text>
       </View>
       <View style={headerLabelStyle}>
-        <Text style={{ color: theme.pageTextLight }}>Received</Text>
+        <Text style={{ color: theme.pageTextLight }}>
+          <Trans>Received</Trans>
+        </Text>
       </View>
     </View>
   );

packages/desktop-client/src/components/budget/report/budgetsummary/BudgetMonthMenu.tsx

 import React, { type ComponentPropsWithoutRef } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useFeatureFlag } from '../../../../hooks/useFeatureFlag';
 import { Menu } from '../../../common/Menu';
@@ -24,6 +25,7 @@ export function BudgetMonthMenu({
   onOverwriteWithBudgetTemplates,
   ...props
 }: BudgetMonthMenuProps) {
+  const { t } = useTranslation();
   const isGoalTemplatesEnabled = useFeatureFlag('goalTemplatesEnabled');
   return (
     <Menu
@@ -51,25 +53,25 @@ export function BudgetMonthMenu({
         }
       }}
       items={[
-        { name: 'copy-last', text: 'Copy last month’s budget' },
-        { name: 'set-zero', text: 'Set budgets to zero' },
+        { name: 'copy-last', text: t('Copy last month’s budget') },
+        { name: 'set-zero', text: t('Set budgets to zero') },
         {
           name: 'set-3-avg',
-          text: 'Set budgets to 3 month average',
+          text: t('Set budgets to 3 month average'),
         },
         ...(isGoalTemplatesEnabled
           ? [
               {
                 name: 'check-templates',
-                text: 'Check templates',
+                text: t('Check templates'),
               },
               {
                 name: 'apply-goal-template',
-                text: 'Apply budget template',
+                text: t('Apply budget template'),
               },
               {
                 name: 'overwrite-goal-template',
-                text: 'Overwrite with budget template',
+                text: t('Overwrite with budget template'),
               },
             ]
           : []),

packages/desktop-client/src/components/budget/report/budgetsummary/BudgetSummary.tsx

 // @ts-strict-ignore
 import React, { useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { css } from 'glamor';
 
@@ -25,6 +26,7 @@ type BudgetSummaryProps = {
   month?: string;
 };
 export function BudgetSummary({ month }: BudgetSummaryProps) {
+  const { t } = useTranslation();
   const {
     currentMonth,
     summaryCollapsed: collapsed,
@@ -88,7 +90,11 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
           >
             <Button
               variant="bare"
-              aria-label={`${collapsed ? 'Expand' : 'Collapse'} month summary`}
+              aria-label={
+                collapsed
+                  ? t('Expand month summary')
+                  : t('Collapse month summary')
+              }
               className="hover-visible"
               onPress={onToggleSummaryCollapse}
             >
@@ -137,7 +143,7 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
               <Button
                 ref={triggerRef}
                 variant="bare"
-                aria-label="Menu"
+                aria-label={t('Menu')}
                 onPress={onMenuOpen}
               >
                 <SvgDotsHorizontalTriple

packages/desktop-client/src/components/budget/report/budgetsummary/BudgetTotal.tsx

@@ -4,6 +4,7 @@ import React, {
   type ComponentType,
   type ReactNode,
 } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { theme, styles } from '../../../../style';
 import { Text } from '../../../common/Text';
@@ -31,6 +32,7 @@ export function BudgetTotal<
   ProgressComponent,
   style,
 }: BudgetTotalProps<CurrentField, TargetField>) {
+  const { t } = useTranslation();
   return (
     <View
       style={{
@@ -51,7 +53,8 @@ export function BudgetTotal<
         <Text>
           <CellValue binding={current} type="financial" />
           <Text style={{ color: theme.pageTextSubdued, fontStyle: 'italic' }}>
-            {' of '}
+            {' '}
+            {t('of')}{' '}
             <CellValue
               binding={target}
               type="financial"

packages/desktop-client/src/components/budget/report/budgetsummary/ExpenseTotal.tsx

 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { reportBudget } from 'loot-core/src/client/queries';
 
@@ -11,9 +12,10 @@ type ExpenseTotalProps = {
   style?: CSSProperties;
 };
 export function ExpenseTotal({ style }: ExpenseTotalProps) {
+  const { t } = useTranslation();
   return (
     <BudgetTotal
-      title="Expenses"
+      title={t('Expenses')}
       current={reportBudget.totalSpent}
       target={reportBudget.totalBudgetedExpense}
       ProgressComponent={ExpenseProgress}

packages/desktop-client/src/components/budget/report/budgetsummary/IncomeTotal.tsx

 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { reportBudget } from 'loot-core/src/client/queries';
 
@@ -11,9 +12,10 @@ type IncomeTotalProps = {
   style?: CSSProperties;
 };
 export function IncomeTotal({ style }: IncomeTotalProps) {
+  const { t } = useTranslation();
   return (
     <BudgetTotal
-      title="Income"
+      title={t('Income')}
       current={reportBudget.totalIncome}
       target={reportBudget.totalBudgetedIncome}
       ProgressComponent={IncomeProgress}

packages/desktop-client/src/components/budget/report/budgetsummary/Saved.tsx

 import React from 'react';
+import { Trans, useTranslation } from 'react-i18next';
 
 import { css } from 'glamor';
 
@@ -19,6 +20,7 @@ type SavedProps = {
   style?: CSSProperties;
 };
 export function Saved({ projected, style }: SavedProps) {
+  const { t } = useTranslation();
   const budgetedSaved =
     useReportSheetValue(reportBudget.totalBudgetedSaved) || 0;
   const totalSaved = useReportSheetValue(reportBudget.totalSaved) || 0;
@@ -30,10 +32,12 @@ export function Saved({ projected, style }: SavedProps) {
   return (
     <View style={{ alignItems: 'center', fontSize: 14, ...style }}>
       {projected ? (
-        <Text style={{ color: theme.pageTextLight }}>Projected Savings:</Text>
+        <Text style={{ color: theme.pageTextLight }}>
+          <Trans>Projected Savings:</Trans>
+        </Text>
       ) : (
         <View style={{ color: theme.pageTextLight }}>
-          {isNegative ? 'Overspent:' : 'Saved:'}
+          {isNegative ? t('Overspent:') : t('Saved:')}
         </View>
       )}
 
@@ -42,7 +46,7 @@ export function Saved({ projected, style }: SavedProps) {
         content={
           <>
             <AlignedText
-              left="Projected Savings:"
+              left={t('Projected Savings:')}
               right={
                 <Text
                   style={{
@@ -55,7 +59,7 @@ export function Saved({ projected, style }: SavedProps) {
               }
             />
             <AlignedText
-              left="Difference:"
+              left={t('Difference:')}
               right={
                 <Text style={{ ...makeAmountFullStyle(diff), ...styles.tnum }}>
                   {format(diff, 'financial-with-sign')}

upcoming-release-notes/3280.md

+---
+category: Enhancements
+authors: [psybers]
+---
+
+Support translations in desktop-client/components/budget/report.