#1454 - Show projected balance when adding new transaction (#1455)

* 1454 - Show projected balance when adding new transaction

* Release note

* Rename 1455.md to 1454.md

* Update release notes category

packages/desktop-client/src/components/transactions/TransactionsTable.js

@@ -768,6 +768,7 @@ const Transaction = memo(function Transaction(props) {
 
   let {
     id,
+    amount,
     debit,
     credit,
     payee: payeeId,
@@ -806,6 +807,9 @@ const Transaction = memo(function Transaction(props) {
   let amountStyle = hideFraction ? { letterSpacing: -0.5 } : null;
 
   let statusProps = getStatusProps(notes);
+  let runningBalance = !isTemporaryId(id)
+    ? balance
+    : balance + (_inverse ? -1 : 1) * amount;
 
   return (
     <Row
@@ -1219,9 +1223,13 @@ const Transaction = memo(function Transaction(props) {
         <Cell
           /* Balance field for all transactions */
           name="balance"
-          value={balance == null || isChild ? '' : integerToCurrency(balance)}
+          value={
+            runningBalance == null || isChild
+              ? ''
+              : integerToCurrency(runningBalance)
+          }
           valueStyle={{
-            color: balance < 0 ? theme.errorText : theme.noticeText,
+            color: runningBalance < 0 ? theme.errorText : theme.noticeText,
           }}
           style={[styles.tnum, amountStyle]}
           width={88}
@@ -1339,6 +1347,7 @@ function NewTransaction({
   onCreatePayee,
   onNavigateToTransferAccount,
   onNavigateToSchedule,
+  balance,
 }) {
   const error = transactions[0].error;
   const isDeposit = transactions[0].amount > 0;
@@ -1357,7 +1366,7 @@ function NewTransaction({
         }
       }}
     >
-      {transactions.map((transaction, idx) => (
+      {transactions.map(transaction => (
         <Transaction
           isNew
           key={transaction.id}
@@ -1385,6 +1394,7 @@ function NewTransaction({
           style={{ marginTop: -1 }}
           onNavigateToTransferAccount={onNavigateToTransferAccount}
           onNavigateToSchedule={onNavigateToSchedule}
+          balance={balance}
         />
       ))}
       <View
@@ -1607,6 +1617,11 @@ function TransactionTableInner({
               onCreatePayee={props.onCreatePayee}
               onNavigateToTransferAccount={onNavigateToTransferAccount}
               onNavigateToSchedule={onNavigateToTransferAccount}
+              balance={
+                props.transactions?.length > 0
+                  ? props.balances?.[props.transactions[0]?.id]?.balance
+                  : 0
+              }
             />
           </View>
         )}

upcoming-release-notes/1455.md

@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [joel-jeremy]
+---
+
+Show projected balance when creating a new transaction