Balance menu modal enhancement (#2598)

* Balance menu modal enhancement

* Release notes

* Fix typecheck error

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

@@ -70,8 +70,8 @@ export function BalanceWithCarryover({
           }}
         >
           <SvgArrowThinRight
-            width={7}
+            width={carryoverStyle?.width || 7}
-            height={7}
+            height={carryoverStyle?.height || 7}
             style={makeAmountStyle(balanceValue, goalValue, budgetedValue)}
           />
         </View>

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}

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}

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.