diff --git a/packages/desktop-client/src/components/accounts/Account.js b/packages/desktop-client/src/components/accounts/Account.js index b7e0361a19de83f0903b28d74f1dda52eeaa7fa3..1a240eb165ab7837b8c5eca7daf15e289114ff9e 100644 --- a/packages/desktop-client/src/components/accounts/Account.js +++ b/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}