The /components/TransactionsTab folder contains the following four component files:

• ConfirmationModal.js
• TransactionModal.js
• TransactionsTab.js
• TransactionsTable.js

The TransactionsTab component contains the TransactionsTable and TransactionsModal components, as well as a button used to add new transactions. Changes and additions are done through the TransactionModal component. The TransactionsTable contains all of the current transactions with buttons on each row to either edit or delete the transaction. If the user presses the Delete button, the ConfirmationModal component appears and prompts the user to proceed. If the user presses Yes, the transaction is deleted. The following snippet, taken from the methods property in the TransactionsTable component, demonstrates how display values are formatted:

getFormattedTransactions() {
  const getDisplayAmount = (type, amount) => {
    if (amount === 0) return accounting.formatMoney(amount);
    return accounting.formatMoney(amount, {
      format: { pos: '%s %v', neg: '%s (%v)' }
    });
  };

  const getDisplayDate = transactionDate => {
    if (!transactionDate) return '';
    const parsedTime = d3.timeParse('%Y-%m-%d')(transactionDate);
    return d3.timeFormat('%m/%d/%Y')(parsedTime);
  };

  return $store.state.transactions.map(
    ({
      type,
      rawAmount,
      cookedAmount,
      transactionDate,
      ...transaction
    }) => ({
      ...transaction,
      type,
      rawAmount: getDisplayAmount(type, rawAmount),
      cookedAmount: getDisplayAmount(type, cookedAmount),
      transactionDate: getDisplayDate(transactionDate)
    })
  );
}

The preceding getFormattedTransactions() function shown applies formatting to the rawAmount, cookedAmount, and transactionDate fields within each transaction record. This is done to ensure the value being displayed includes a dollar sign (for amounts) and is presented in a user-friendly format.