Merge pull request #260 from MatissJanis/feat-reconciliation-updates

feat(account): button to create reconciliation balance updates

packages/desktop-client/src/components/accounts/Account.js

@@ -13,9 +13,11 @@ import {
 import * as queries from 'loot-core/src/client/queries';
 import q, { runQuery, pagedQuery } from 'loot-core/src/client/query-helpers';
 import { send, listen } from 'loot-core/src/platform/client/fetch';
+import { currentDay } from 'loot-core/src/shared/months';
 import {
   deleteTransaction,
   updateTransaction,
+  realizeTempTransactions,
   ungroupTransactions
 } from 'loot-core/src/shared/transactions';
 import {
@@ -104,7 +106,12 @@ function EmptyMessage({ onAdd }) {
   );
 }
 
-function ReconcilingMessage({ balanceQuery, targetBalance, onDone }) {
+function ReconcilingMessage({
+  balanceQuery,
+  targetBalance,
+  onDone,
+  onCreateTransaction
+}) {
   let cleared = useSheetValue({
     name: balanceQuery.name + '-cleared',
     value: 0,
@@ -167,6 +174,13 @@ function ReconcilingMessage({ balanceQuery, targetBalance, onDone }) {
             Done Reconciling
           </Button>
         </View>
+        {targetDiff !== 0 && (
+          <View style={{ marginLeft: 15 }}>
+            <Button onClick={() => onCreateTransaction(targetDiff)}>
+              Create Reconciliation Transation
+            </Button>
+          </View>
+        )}
       </View>
     </View>
   );
@@ -601,6 +615,7 @@ const AccountHeader = React.memo(
     onAddTransaction,
     onShowTransactions,
     onDoneReconciling,
+    onCreateReconciliationTransaction,
     onToggleExtraBalances,
     onSaveName,
     onExposeName,
@@ -894,6 +909,7 @@ const AccountHeader = React.memo(
             targetBalance={reconcileAmount}
             balanceQuery={balanceQuery}
             onDone={onDoneReconciling}
+            onCreateTransaction={onCreateReconciliationTransaction}
           />
         )}
       </>
@@ -1404,6 +1420,31 @@ class AccountInternal extends React.PureComponent {
     this.setState({ reconcileAmount: null });
   };
 
+  onCreateReconciliationTransaction = async diff => {
+    // Create a new reconciliation transaction
+    const reconciliationTransactions = realizeTempTransactions([
+      {
+        id: 'temp',
+        account: this.props.accountId,
+        cleared: true,
+        amount: diff,
+        date: currentDay(),
+        notes: 'Reconciliation balance adjustment'
+      }
+    ]);
+
+    // Optimistic UI: update the transaction list before sending the data to the database
+    this.setState({
+      transactions: [...this.state.transactions, ...reconciliationTransactions]
+    });
+
+    // sync the reconciliation transaction
+    await send('transactions-batch-update', {
+      added: reconciliationTransactions
+    });
+    await this.refetchTransactions();
+  };
+
   onShowTransactions = async ids => {
     this.onApplyFilter({
       customName: 'Selected transactions',
@@ -1672,6 +1713,9 @@ class AccountInternal extends React.PureComponent {
                   onExposeName={this.onExposeName}
                   onReconcile={this.onReconcile}
                   onDoneReconciling={this.onDoneReconciling}
+                  onCreateReconciliationTransaction={
+                    this.onCreateReconciliationTransaction
+                  }
                   onSync={this.onSync}
                   onImport={this.onImport}
                   onBatchDelete={this.onBatchDelete}