Timeline Filter For Transactions

[predrag-babic]

Value Proposition

As a user I want to filter transactions by specific time periods In order to view and analyze transactions within a chosen timeframe.

Description

Acceptance Criteria

• The timeline filter options are accessible within the transaction list view.
• Only one filter is selectable at a time.
• The buttons allow the user to toggle between activated/deactivated.
• Users can choose from predefined timeframes such as: 7 Days 30 Days Half Year Full Year
• The transaction list updates in real-time based on the selected timeframe.
• If no transactions fall within the selected timeframe, a message appears stating, “No transactions found within this timeframe.”
• The selected timeframe is visually indicated, ensuring users are aware of the active filter.

  Tasks

• [ ] Create feature branch feature/timeline-filter.
• [ ] Define the UI structure and layout for the Timeline Filter in the TransactionList component.
• [ ] Add buttons or dropdown options for common timeframes.
• [ ] Define functions to calculate date ranges for each predefined option.
• [ ] Set the transaction list to re-render based on the active date range.
• [ ] Add a filter function in the TransactionList component that checks each transaction’s date against the selected timeframe.
• [ ] Update the displayed transactions in real-time based on the filter.
• [ ] If no transactions are found in the selected timeframe, display a message: “No transactions found within this timeframe.”

[ahohnsen]

Hi there!

I have a few small suggestions:

In my opinion, it would be helpful to mention explicitly that only one filter can be selected at a time.

Also, it’s not clear from the wireframes or the acceptance criteria how the user can reset the timeframe filter to view all entries again. Please add this detail so that users know how to clear the filter.