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.

changed milestone to %Personal Finance Tracker Web App Project

added Backend Frontend High Priority To Do labels

set weight to 5

assigned to @eo00599

marked this issue as blocked by #10 (closed)

marked the checklist item Implement backend API endpoints to fetch transaction data for a logged-in user. as completed

marked the checklist item Ensure the ability to filter transactions by date range and category (income, expense). as completed

marked the checklist item Handle cases where there are no transactions to display. as completed

marked the checklist item Show appropriate error messages if the API request fails or returns no data. as completed

marked the checklist item Make sure the user interface aligns with the overall design of the application. as completed

marked the checklist item Ensure the page is responsive and looks good on both desktop and mobile devices. as completed

marked the checklist item Verify that filters and pagination work as expected. as completed

marked the checklist item Ensure the frontend displays transaction data correctly by fetching it from the API. as completed

marked the checklist item Users should be able to navigate through pages of transactions. as completed

marked the checklist item Create a clean, user-friendly interface to display transactions in a table. as completed

marked the checklist item Include columns for date, amount, category, description, and status (pending/completed). as completed

marked the checklist item Implement a filter to allow users to select transaction categories (e.g., income, expense). as completed

marked the checklist item Implement a date range filter (e.g., last 7 days, last 30 days). as completed

marked the checklist item Ensure that if there are more than 10 transactions, pagination is available. as completed

marked the checklist item Implement backend API endpoints to fetch transaction data for a logged-in user. as incomplete