Income/Expense View

[melanie-adler]

Value Proposition

As a user

I want to view my transactions separated by income and expenses,

so that I can better analyse my financial activities.

Description

Acceptance Criteria

• The transactions list includes a section with filter options.
• Users can filter transactions by:
  • Income
  • Expense
  • All transactions (default view)
• Only one filter option can be selected at a time.
• Selecting a new filter automatically deselects the previously selected filter.
• The applied filter is clearly displayed on the transactions list, allowing users to see which filter is currently active.
• Users can clear all filters with a single click by selecting “Total”, returning the list to its unfiltered state.
• The transactions list updates in real-time as filters are applied or removed.
• The account balance updates in real-time to reflect the sum of the filtered transactions:
  • Sum of all incomes when filtered by income.
  • Sum of all expenses when filtered by expense.
  • Total balance when showing all transactions.
• When a filter is selected, the current balance is still displayed on the account balance card.
• If no transactions match the selected filter criteria, a message is displayed indicating that no transactions were found.
• The filter interface is intuitive and easy to use, ensuring that new users can easily understand how to apply and clear filters.

Tasks

• [ ] Create feature branch feature/income-expense-view.
• [ ] Add buttons for the following tabs: "Total (All Transactions)", "Income", "Expense". Ensure only one tab can be selected at a time.
• [ ] Highlight selected tab.
• [ ] Set "Total (All Transactions)" as default.
• [ ] Create a state to track the currently selected tab. Use useState to store the selected tab.
• [ ] Use the filter method on the transactions array to return the relevant transactions for each tab.
• [ ] Update the account balance to reflect only the filtered transactions. Recalculate the balance whenever the tab changes.
• [ ] Changing tabs should not affect a selected category filter.
• [ ] Display message "No transactions found." when the filtered array is empty. (If a filter is applied show "No matches found." message instead).

[F-Kirchhoff]

you don't need any useEffects for this user story. please update your tasks.

[NikRoe]

LGTM

[JessicaLoers]

I just noticed a small detail 🤏 in one of the acceptance criteria. According to the wireframes, this option should be labeled “Total” instead of “All transactions.”

• Users can clear all filters with a single click by selecting ~“All transactions”– "Total", returning the list to its unfiltered state.