diff --git a/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx b/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx
index 7fd7b20944..1b406e64f5 100644
--- a/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx
+++ b/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx
@@ -523,6 +523,7 @@ export function IncomeCategoryMonth({
className={css({
cursor: 'pointer',
':hover': { textDecoration: 'underline' },
+ ...makeAmountGrey(props.value),
})}
/>
)}
diff --git a/packages/desktop-client/src/components/mobile/budget/IncomeCategoryList.tsx b/packages/desktop-client/src/components/mobile/budget/IncomeCategoryList.tsx
index cde9ffedcd..e2324cb6eb 100644
--- a/packages/desktop-client/src/components/mobile/budget/IncomeCategoryList.tsx
+++ b/packages/desktop-client/src/components/mobile/budget/IncomeCategoryList.tsx
@@ -1,4 +1,4 @@
-import { type ComponentPropsWithoutRef, useRef } from 'react';
+import { type ComponentPropsWithoutRef, useCallback, useRef } from 'react';
import { type DragItem } from 'react-aria';
import {
DropIndicator,
@@ -22,14 +22,16 @@ import { moveCategory } from 'loot-core/client/queries/queriesSlice';
import * as monthUtils from 'loot-core/shared/months';
import { type CategoryEntity } from 'loot-core/types/models';
+import { useNavigate } from '../../../hooks/useNavigate';
import { useSyncedPref } from '../../../hooks/useSyncedPref';
import { useDispatch } from '../../../redux';
+import { makeAmountGrey } from '../../budget/util';
import { PrivacyFilter } from '../../PrivacyFilter';
import { CellValue } from '../../spreadsheet/CellValue';
import { useFormat } from '../../spreadsheet/useFormat';
import { BudgetCell } from './BudgetCell';
-import { getColumnWidth } from './BudgetTable';
+import { getColumnWidth, PILL_STYLE } from './BudgetTable';
type IncomeCategoryListProps = {
categories: CategoryEntity[];
@@ -225,6 +227,11 @@ function IncomeCategoryCells({
? trackingBudget.catSumAmount(category.id)
: envelopeBudget.catSumAmount(category.id);
+ const navigate = useNavigate();
+ const onShowActivity = useCallback(() => {
+ navigate(`/categories/${category.id}?month=${month}`);
+ }, [category.id, month, navigate]);
+
return (
)}
-
- binding={balance}
- type="financial"
- aria-label={t('Balance for {{categoryName}} category', {
- categoryName: category.name,
- })} // Translated aria-label
+
- {({ type, value }) => (
-
-
-
- {format(value, type)}
-
-
-
- )}
-
+
+ binding={balance}
+ type="financial"
+ aria-label={t('Balance for {{categoryName}} category', {
+ categoryName: category.name,
+ })} // Translated aria-label
+ >
+ {({ type, value }) => (
+
+ )}
+
+
);
}
diff --git a/upcoming-release-notes/4621.md b/upcoming-release-notes/4621.md
new file mode 100644
index 0000000000..13f41cf717
--- /dev/null
+++ b/upcoming-release-notes/4621.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [joel-jeremy]
+---
+
+[Mobile] Click on income category balance to show transactions
\ No newline at end of file