diff --git a/packages/desktop-client/src/components/budget/report/BalanceMenu.tsx b/packages/desktop-client/src/components/budget/report/BalanceMenu.tsx
index 5917be96f451feff0ec2232cbe251df1f00f0dfc..fb5945ac2cdb9d1caf412acd72612dfcf3971809 100644
--- a/packages/desktop-client/src/components/budget/report/BalanceMenu.tsx
+++ b/packages/desktop-client/src/components/budget/report/BalanceMenu.tsx
@@ -1,4 +1,5 @@
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'),
},
]}
/>
diff --git a/packages/desktop-client/src/components/budget/report/BudgetMenu.tsx b/packages/desktop-client/src/components/budget/report/BudgetMenu.tsx
index aeed3cddd88c1f867b6b5b7bb41ff4b664eeb49a..b5f2f38c265141a10a507aafd4d4ea1db2071ab3 100644
--- a/packages/desktop-client/src/components/budget/report/BudgetMenu.tsx
+++ b/packages/desktop-client/src/components/budget/report/BudgetMenu.tsx
@@ -1,4 +1,5 @@
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'),
},
]
: []),
diff --git a/packages/desktop-client/src/components/budget/report/ReportComponents.tsx b/packages/desktop-client/src/components/budget/report/ReportComponents.tsx
index ff9f429b3a81205501be6144b96f064550a0f53c..fa77bc00260f744a937cf014ac4d7834e0cc1823 100644
--- a/packages/desktop-client/src/components/budget/report/ReportComponents.tsx
+++ b/packages/desktop-client/src/components/budget/report/ReportComponents.tsx
@@ -1,5 +1,6 @@
// @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>
);
diff --git a/packages/desktop-client/src/components/budget/report/budgetsummary/BudgetMonthMenu.tsx b/packages/desktop-client/src/components/budget/report/budgetsummary/BudgetMonthMenu.tsx
index aa5c379369a72675cc6e38b8d19c65b3c3e0d85f..2afd2497e52ef630d0c99e4d998bcd2716e17451 100644
--- a/packages/desktop-client/src/components/budget/report/budgetsummary/BudgetMonthMenu.tsx
+++ b/packages/desktop-client/src/components/budget/report/budgetsummary/BudgetMonthMenu.tsx
@@ -1,4 +1,5 @@
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'),
},
]
: []),
diff --git a/packages/desktop-client/src/components/budget/report/budgetsummary/BudgetSummary.tsx b/packages/desktop-client/src/components/budget/report/budgetsummary/BudgetSummary.tsx
index 282db62978169f75eac8a9a1440e1b7790233a92..fc64d8153e29f25c06abbc18d38638377acbfcf5 100644
--- a/packages/desktop-client/src/components/budget/report/budgetsummary/BudgetSummary.tsx
+++ b/packages/desktop-client/src/components/budget/report/budgetsummary/BudgetSummary.tsx
@@ -1,5 +1,6 @@
// @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
diff --git a/packages/desktop-client/src/components/budget/report/budgetsummary/BudgetTotal.tsx b/packages/desktop-client/src/components/budget/report/budgetsummary/BudgetTotal.tsx
index a19c936f17331def40b7c03a12212c86f95ba988..2f3966d0fd46b9310de4a9aa6764b5816cd4318d 100644
--- a/packages/desktop-client/src/components/budget/report/budgetsummary/BudgetTotal.tsx
+++ b/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"
diff --git a/packages/desktop-client/src/components/budget/report/budgetsummary/ExpenseTotal.tsx b/packages/desktop-client/src/components/budget/report/budgetsummary/ExpenseTotal.tsx
index cd64acafa22b0e201ffac45255f1dc00709246ae..9b82f9a6828c92199326b7924aa3934191096624 100644
--- a/packages/desktop-client/src/components/budget/report/budgetsummary/ExpenseTotal.tsx
+++ b/packages/desktop-client/src/components/budget/report/budgetsummary/ExpenseTotal.tsx
@@ -1,4 +1,5 @@
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}
diff --git a/packages/desktop-client/src/components/budget/report/budgetsummary/IncomeTotal.tsx b/packages/desktop-client/src/components/budget/report/budgetsummary/IncomeTotal.tsx
index 5d41c5cb5122a89c414d39109956f35ab44d3746..1c897f35f75551360980535c697129fbfbd9d9a7 100644
--- a/packages/desktop-client/src/components/budget/report/budgetsummary/IncomeTotal.tsx
+++ b/packages/desktop-client/src/components/budget/report/budgetsummary/IncomeTotal.tsx
@@ -1,4 +1,5 @@
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}
diff --git a/packages/desktop-client/src/components/budget/report/budgetsummary/Saved.tsx b/packages/desktop-client/src/components/budget/report/budgetsummary/Saved.tsx
index 142f9b4772156d0d4ee4640683cb64a79bfe6232..dec539c6e750e0f1f1e82abbad928e6d60288896 100644
--- a/packages/desktop-client/src/components/budget/report/budgetsummary/Saved.tsx
+++ b/packages/desktop-client/src/components/budget/report/budgetsummary/Saved.tsx
@@ -1,4 +1,5 @@
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')}
diff --git a/upcoming-release-notes/3280.md b/upcoming-release-notes/3280.md
new file mode 100644
index 0000000000000000000000000000000000000000..b71a90deeef1605090e1073cd3b178e6288302a6
--- /dev/null
+++ b/upcoming-release-notes/3280.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [psybers]
+---
+
+Support translations in desktop-client/components/budget/report.