Implement Budgeting Page

Implement the Budgeting Page to allow users to set and manage their monthly or yearly budgets. Users will be able to track their spending in different categories (e.g., groceries, entertainment) and compare it with their budget limits. This feature will help users stay within their financial limits and gain insight into their spending habits.

Tasks:

• Implement backend API endpoints for setting and fetching user budgets.
• Ensure users can set budget limits for different categories (e.g., groceries, entertainment).
• Create a user-friendly interface to display current budget limits and actual spending.
• Provide input fields for users to set or update their budget limits per category.
• Calculate the total spending in each category for the user and display it alongside their budget.
• Highlight categories where the user has exceeded their budget limit.
• Notify users if they are nearing or exceeding their budget for a specific category.
• Provide visual indicators (e.g., red for exceeding the budget) to show where they are overspending.
• Provide a summary of the user's overall spending vs. budget across all categories.
• Include graphs or charts to visualise how much of their budget has been used.
• Ensure the frontend fetches the user’s budget and spending data correctly from the API.
• Enable users to update their budgets, and reflect these changes in real-time.
• Ensure the page is easy to navigate and visually appealing.

Acceptance Criteria:

• Users can view their budget limits for different categories (e.g., groceries, entertainment, etc.).
• Users can input and update their budget limits for each category.
• Users can see the amount they’ve spent in each category, compared to their budget.
• The system calculates and displays the spending for each category in real-time.
• If a user exceeds or nears their budget, the system should notify them.
• Alerts should be clear and prominent (e.g., red or yellow highlighting).
• Users should see a clear summary of how much of their budget has been used across categories.
• A visual graph or chart should represent the spending vs. budget in an easy-to-understand way.
• The page must be responsive and visually consistent with the rest of the application.
• The budgeting interface must be easy to use and provide users with clear feedback on their budget status.
• If there is an issue saving or fetching the budget data, users should see a user-friendly error message.
• If no data is found (e.g., user has not set a budget), the page should display a relevant message.