diff --git a/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx b/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx index a20dea15d0a6fd3dc26cb8662a9b9bb6af5e821e..f42220a16bfeb08f3b7854b243d73ff4bb671c87 100644 --- a/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx +++ b/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx @@ -70,8 +70,8 @@ export function BalanceWithCarryover({ }} > <SvgArrowThinRight - width={7} - height={7} + width={carryoverStyle?.width || 7} + height={carryoverStyle?.height || 7} style={makeAmountStyle(balanceValue, goalValue, budgetedValue)} /> </View> diff --git a/packages/desktop-client/src/components/modals/ReportBalanceMenuModal.tsx b/packages/desktop-client/src/components/modals/ReportBalanceMenuModal.tsx index 788d9e19d588aca0cb2e1b28cd860348c9de2227..8d2d94dd0afcc6f606b847484a626f9120a33b4d 100644 --- a/packages/desktop-client/src/components/modals/ReportBalanceMenuModal.tsx +++ b/packages/desktop-client/src/components/modals/ReportBalanceMenuModal.tsx @@ -1,8 +1,13 @@ import React, { type ComponentPropsWithoutRef } from 'react'; +import { reportBudget } from 'loot-core/client/queries'; + +import { useCategory } from '../../hooks/useCategory'; import { type CSSProperties, theme, styles } from '../../style'; +import { BalanceWithCarryover } from '../budget/BalanceWithCarryover'; import { BalanceMenu } from '../budget/report/BalanceMenu'; import { Modal } from '../common/Modal'; +import { View } from '../common/View'; import { type CommonModalProps } from '../Modals'; type ReportBalanceMenuModalProps = ComponentPropsWithoutRef< @@ -23,8 +28,15 @@ export function ReportBalanceMenuModal({ borderTop: `1px solid ${theme.pillBorder}`, }; + const category = useCategory(categoryId); + + if (!category) { + return null; + } + return ( <Modal + title={`Balance: ${category.name}`} showHeader focusAfterClose={false} {...modalProps} @@ -36,6 +48,26 @@ export function ReportBalanceMenuModal({ borderRadius: '6px', }} > + <View + style={{ + justifyContent: 'center', + alignItems: 'center', + marginBottom: 20, + }} + > + <BalanceWithCarryover + disabled + balanceStyle={{ + textAlign: 'center', + ...styles.veryLargeText, + }} + carryoverStyle={{ right: -20, width: 15, height: 15 }} + carryover={reportBudget.catCarryover(categoryId)} + balance={reportBudget.catBalance(categoryId)} + goal={reportBudget.catGoal(categoryId)} + budgeted={reportBudget.catBudgeted(categoryId)} + /> + </View> <BalanceMenu categoryId={categoryId} getItemStyle={() => defaultMenuItemStyle} diff --git a/packages/desktop-client/src/components/modals/RolloverBalanceMenuModal.tsx b/packages/desktop-client/src/components/modals/RolloverBalanceMenuModal.tsx index 247fb0526f44c54fcd275000114907adae9190e0..1b66aac343b3614aef7ca38285ea328476b134ef 100644 --- a/packages/desktop-client/src/components/modals/RolloverBalanceMenuModal.tsx +++ b/packages/desktop-client/src/components/modals/RolloverBalanceMenuModal.tsx @@ -1,8 +1,13 @@ import React, { type ComponentPropsWithoutRef } from 'react'; +import { rolloverBudget } from 'loot-core/client/queries'; + +import { useCategory } from '../../hooks/useCategory'; import { type CSSProperties, theme, styles } from '../../style'; +import { BalanceWithCarryover } from '../budget/BalanceWithCarryover'; import { BalanceMenu } from '../budget/rollover/BalanceMenu'; import { Modal } from '../common/Modal'; +import { View } from '../common/View'; import { type CommonModalProps } from '../Modals'; type RolloverBalanceMenuModalProps = ComponentPropsWithoutRef< @@ -25,8 +30,15 @@ export function RolloverBalanceMenuModal({ borderTop: `1px solid ${theme.pillBorder}`, }; + const category = useCategory(categoryId); + + if (!category) { + return null; + } + return ( <Modal + title={`Balance: ${category.name}`} showHeader focusAfterClose={false} {...modalProps} @@ -38,6 +50,26 @@ export function RolloverBalanceMenuModal({ borderRadius: '6px', }} > + <View + style={{ + justifyContent: 'center', + alignItems: 'center', + marginBottom: 20, + }} + > + <BalanceWithCarryover + disabled + balanceStyle={{ + textAlign: 'center', + ...styles.veryLargeText, + }} + carryoverStyle={{ right: -20, width: 15, height: 15 }} + carryover={rolloverBudget.catCarryover(categoryId)} + balance={rolloverBudget.catBalance(categoryId)} + goal={rolloverBudget.catGoal(categoryId)} + budgeted={rolloverBudget.catBudgeted(categoryId)} + /> + </View> <BalanceMenu categoryId={categoryId} getItemStyle={() => defaultMenuItemStyle} diff --git a/upcoming-release-notes/2598.md b/upcoming-release-notes/2598.md new file mode 100644 index 0000000000000000000000000000000000000000..a842d3443024a08606bdfa78d6fd4596a00988e9 --- /dev/null +++ b/upcoming-release-notes/2598.md @@ -0,0 +1,6 @@ +--- +category: Enhancements +authors: [joel-jeremy] +--- + +Update balance menu modal title and add balance amount in the modal.