Mobile - Add cleared and uncleared Balances in Account Details (#2056)

* - Added Mobile Account Cleared and Uncleared
  Balanced

* Changed font size

* Add release notes

* Changed Visibility

* Centered the different Values

* Updated VRT

* Fix merge Conflict?!

packages/desktop-client/src/components/accounts/MobileAccount.jsx

@@ -190,6 +190,8 @@ export function Account(props) {
   };
 
   const balance = queries.accountBalance(account);
+  const balanceCleared = queries.accountBalanceCleared(account);
+  const balanceUncleared = queries.accountBalanceUncleared(account);
   const numberFormat = state.prefs.numberFormat || 'comma-dot';
   const hideFraction = state.prefs.hideFraction || false;
 
@@ -213,6 +215,8 @@ export function Account(props) {
               transactions={transactions}
               prependTransactions={prependTransactions || []}
               balance={balance}
+              balanceCleared={balanceCleared}
+              balanceUncleared={balanceUncleared}
               isNewTransaction={isNewTransaction}
               onLoadMore={() => {
                 paged?.fetchNext();

packages/desktop-client/src/components/accounts/MobileAccountDetails.jsx

@@ -12,6 +12,7 @@ import { MobileBackButton } from '../MobileBackButton';
 import { Page } from '../Page';
 import { PullToRefresh } from '../responsive/PullToRefresh';
 import { CellValue } from '../spreadsheet/CellValue';
+import { useSheetValue } from '../spreadsheet/useSheetValue';
 import { TransactionList } from '../transactions/MobileTransaction';
 
 function TransactionSearchInput({ accountName, onSearch }) {
@@ -69,6 +70,8 @@ export function AccountDetails({
   categories,
   payees,
   balance,
+  balanceCleared,
+  balanceUncleared,
   isNewTransaction,
   onLoadMore,
   onSearch,
@@ -120,19 +123,75 @@ export function AccountDetails({
           marginTop: 10,
         }}
       >
-        <Label title="BALANCE" />
-        <CellValue
-          binding={balance}
-          type="financial"
+        <View
           style={{
-            fontSize: 18,
-            fontWeight: '500',
+            flexDirection: 'row',
+            boxSizing: 'content-box',
+            width: '100%',
+            justifyContent: 'space-evenly',
           }}
-          getStyle={value => ({
-            color: value < 0 ? theme.errorText : theme.pillTextHighlighted,
-          })}
-          data-testid="account-balance"
-        />
+        >
+          <View
+            style={{
+              visibility:
+                useSheetValue(balanceUncleared) === 0 ? 'hidden' : 'visible',
+              width: '33%',
+            }}
+          >
+            <Label
+              title="CLEARED"
+              style={{ textAlign: 'center', fontSize: 12 }}
+            />
+            <CellValue
+              binding={balanceCleared}
+              type="financial"
+              style={{
+                fontSize: 12,
+                textAlign: 'center',
+                fontWeight: '500',
+              }}
+              data-testid="account-balance-cleared"
+            />
+          </View>
+          <View style={{ width: '33%' }}>
+            <Label title="BALANCE" style={{ textAlign: 'center' }} />
+            <CellValue
+              binding={balance}
+              type="financial"
+              style={{
+                fontSize: 18,
+                textAlign: 'center',
+                fontWeight: '500',
+              }}
+              getStyle={value => ({
+                color: value < 0 ? theme.errorText : theme.pillTextHighlighted,
+              })}
+              data-testid="account-balance"
+            />
+          </View>
+          <View
+            style={{
+              visibility:
+                useSheetValue(balanceUncleared) === 0 ? 'hidden' : 'visible',
+              width: '33%',
+            }}
+          >
+            <Label
+              title="UNCLEARED"
+              style={{ textAlign: 'center', fontSize: 12 }}
+            />
+            <CellValue
+              binding={balanceUncleared}
+              type="financial"
+              style={{
+                fontSize: 12,
+                textAlign: 'center',
+                fontWeight: '500',
+              }}
+              data-testid="account-balance-uncleared"
+            />
+          </View>
+        </View>
         <TransactionSearchInput
           accountName={account.name}
           onSearch={onSearch}

packages/loot-core/src/client/queries.ts

@@ -103,6 +103,26 @@ export function accountBalance(acct) {
   };
 }
 
+export function accountBalanceCleared(acct) {
+  return {
+    name: `balanceCleared-${acct.id}`,
+    query: q('transactions')
+      .filter({ account: acct.id, cleared: true })
+      .options({ splits: 'none' })
+      .calculate({ $sum: '$amount' }),
+  };
+}
+
+export function accountBalanceUncleared(acct) {
+  return {
+    name: `balanceUncleared-${acct.id}`,
+    query: q('transactions')
+      .filter({ account: acct.id, cleared: false })
+      .options({ splits: 'none' })
+      .calculate({ $sum: '$amount' }),
+  };
+}
+
 export function allAccountBalance() {
   return {
     query: q('transactions')

upcoming-release-notes/2056.md

+---
+category: Enhancements
+authors: [HansiWursti]
+---
+
+Added cleared and uncleared Balances to Account Mobile View
\ No newline at end of file