Implement Transactions Page

Implement the Transactions Page to display a list of the user's financial transactions, allowing them to view details, filter by categories (income/expenses), and set custom date ranges. This page will help users keep track of their financial activities and provide insights into their spending and income patterns.

Tasks:

• Implement backend API endpoints to fetch transaction data for a logged-in user.
• Ensure the ability to filter transactions by date range and category (income, expense).
• Create a clean, user-friendly interface to display transactions in a table.
• Include columns for date, amount, category/description.
• Implement a filter to allow users to select transaction categories (e.g., income, expense).
• Implement a date range filter (e.g., last 7 days, last 30 days).
• Ensure that if there are more than 10 transactions, pagination is available.
• Users should be able to navigate through pages of transactions.
• Ensure the frontend displays transaction data correctly by fetching it from the API.
• Verify that filters and pagination work as expected.
• Ensure the page is responsive and looks good on both desktop and mobile devices.
• Make sure the user interface aligns with the overall design of the application.
• Show appropriate error messages if the API request fails or returns no data.
• Handle cases where there are no transactions to display.

Acceptance Criteria: Transactions Display

• The Transactions Page must show a list of the user's transactions with the following details:
  • Date of transaction
  • Amount (formatted correctly as currency)
  • Category (e.g., income, expense)
  • Description (if available)
• Filters
  • Users must be able to filter transactions by category (income, expense).
  • Users must be able to specify a date range (e.g., last 7 days, last 30 days).
• Pagination
  • If the user has more than 10 transactions, pagination should be visible to navigate through multiple pages of transactions.
  • The user should be able to move between pages using next/previous buttons.
• Data Accuracy
  • Transaction data fetched from the backend must be displayed accurately on the page.
  • Filters must update the displayed transactions correctly based on the selected category and date range.