Implement the Dashboard Page for Financial Overview
The Dashboard Page serves as the central hub for users to get an overview of their financial activities. It will display key metrics, such as total expenses, total income, and budget status, as well as trends and upcoming expenses. The page will allow users to quickly access detailed information about their spending habits, including visualisations of spending by category and insights into their financial health. Additionally, users will be able to monitor their current budget, track income, and receive notifications for upcoming recurring expenses, making it easier to stay on top of their finances.
Tasks:
- Design and implement the frontend UI for the dashboard page.
- Display total expenses for the current month and year-to-date (YTD).
- Show total income for the current month and YTD.
- Display budgeting information, including the current budget status and remaining budget.
- Show a chart visualising spending by category (pie/bar chart).
- List the most recent transactions with details (date, category, amount).
- Add alerts/notifications for upcoming recurring expenses or bills.
- Allow users to quickly access detailed breakdowns of their expenses, income, and budget.
- Fetch data from the API to update the dashboard metrics and charts in real-time.
- Ensure only authenticated users can access the dashboard page.
Acceptance Criteria:
- The dashboard displays key financial metrics, including total expenses, YTD expenses, and remaining budget.
- A calendar view of upcoming expenses is visible, with expense details on hover or click.
- A chart (pie or bar) visualises spending by category.
- The most recent transactions are listed, with the ability to quickly add new expenses.
- Alerts and notifications are displayed for upcoming recurring expenses or bills.
- Ensure only authenticated users can access the dashboard page.
Designs
Is blocked by
- #10Personal Finance Tracker Web App Project5
- #9Personal Finance Tracker Web App Project5
