From d7075ae551af282f032ea9c0248251dd8ef92c4a Mon Sep 17 00:00:00 2001
From: Joel Jeremy Marquez <joeljeremy.marquez@gmail.com>
Date: Sat, 13 Apr 2024 20:51:56 -0700
Subject: [PATCH] Balance menu modal enhancement (#2598)

* Balance menu modal enhancement

* Release notes

* Fix typecheck error
---
 .../budget/BalanceWithCarryover.tsx           |  4 +--
 .../modals/ReportBalanceMenuModal.tsx         | 32 +++++++++++++++++++
 .../modals/RolloverBalanceMenuModal.tsx       | 32 +++++++++++++++++++
 upcoming-release-notes/2598.md                |  6 ++++
 4 files changed, 72 insertions(+), 2 deletions(-)
 create mode 100644 upcoming-release-notes/2598.md

diff --git a/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx b/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx
index a20dea15d..f42220a16 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 788d9e19d..8d2d94dd0 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 247fb0526..1b66aac34 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 000000000..a842d3443
--- /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.
-- 
GitLab