[F4:TF1] Build Transaction Form & Actions

[timebox: , complexity: 4 ]

As a user, when I am looking at the expense detail view, I would like to click/tap a plus icon that opens a “New Transaction” form so that once I fill it out, my transaction is associated with the expense, the expense balance is updated and the account total or extra money values are updated.

As a developer, I need to create a form and actions to add/edit a Transaction that is associated with an existing Expense, so that when the form is submitted, the Expense and the account total or extra money values are updated.

User Expectations

• As a user I expect to have a plus button
• When the plus button is clicked a modal should pop up prompting me to add a transaction to a expense
• When a new transaction is added, the transaction should affect the expense value
  • A transaction that shows that money was spent should reduce the value of the expense saved amount, and the total amount balance
  • A transaction that shows that money was added to the expense should increase the expense saved account, and reduce the extra money balance
• The form should either be in add or edit mode depending on if I selected to add a new transaction or edit an existing transaction

Developer Dependencies

• refer to ExpenseDetailView.tsx
• refer to ExpenseCard.tsx
• Add a a TransactionType interface toTypes.ts with these values { id: string (UUID), label: string, value: number, startingExpenseValue: number }
  • Add TransactionType[] to ExpenseType definition
• Update each existing expense function to include the transaction array
• Create new add and edit reducers/actions to a new transactionsSlice.ts and add the slice to the store
• Add transaction modal visibility boolean to appSlice.tsx & Types.ts
• Add TransactionModal.tsx form
  • Import appData mode and modal visibility state values
  • Import add and edit actions from transactionsSlice.ts
  • Props: Expense ID, and an optional transaction for edit mode
  • Input fields:
    • label and value with form validation functions (prefill if in edit mode)
  • Save the transaction object to the Expense object when the form is submitted
    • format { id; string, label: string, value: number, startingExpenseValue: number }
    • Retrieve expense saved value from Global State using the Expense ID prop passed into the component

Start with ExpenseDetailView.tsx and ExpenseCard.tsx, then inspect Types.ts and the existing expense state updates. Add the transaction types, transaction reducers/actions, modal state, and TransactionModal.tsx as described, wiring the slice into the store. Done means users can add or edit a transaction from the expense detail view and the expense and account totals update correctly.