feat: Implement Budget functionality

[archa8]

Problem or Need

Currently, the app can track and visualize past financial activity. However, it lacks a key feature for proactive financial planning: the ability to set spending limits. Users can see where their money went, but they cannot set goals or track their spending against a predefined plan for different categories.

Proposed Solution

Introduce a comprehensive "Budgets" feature. This will allow users to create monthly spending budgets for any of their categories. The application will track spending against these budgets in real-time and provide a clear visual representation of their progress.

Expected Behavior

1. A user navigates to a new "Budgets" page via the main navigation bar.
2. The user sees an option to "Create New Budget."
3. A form allows the user to select a category, enter a monthly budget amount, and specify the month and year.
4. Once created, the Budgets page will display a list of all their budgets for the selected month.
5. Each budget listed will clearly show the category, the total budget amount, the amount spent so far, the amount remaining, and a visual progress bar.
6. The data should automatically update as new transactions are added.

Benefits

• Proactive Financial Management: Transforms the app from a reactive tracker into a proactive financial planning tool.
• Drives User Engagement: Gives users a compelling reason to return to the app regularly to monitor their progress.
• Actionable Insights: Helps users actively control their spending and achieve their savings goals.
• Core Feature Addition: This is a major, high-impact feature that significantly increases the value and competitiveness of the application.

Possible Implementation

• Backend:

  • Create a new Mongoose Budget schema with fields: user (ref), category (string), amount (number), month (number, 1-12), and year (number).
  • Create a new budgetRoutes.js file and budgetController.js with full CRUD API endpoints for budgets (e.g., POST /api/budgets, GET /api/budgets, etc.).
  • The GET endpoint for budgets should be particularly smart. For each budget it retrieves, it should also run an aggregation on the IncomeExpense collection to calculate the total amount spent in that budget's category and month, then return the combined data.

• Frontend:

  • Create a new BudgetsPage.jsx component.
  • Add a link to the new page in the Layout.jsx navigation bar.
  • Build the UI to display a list of budgets with progress bars.
  • Create a new modal (BudgetModal.jsx) for adding and editing budgets.

Alternatives Considered

• A simpler, single overall spending budget could be implemented first. However, per-category budgeting is far more useful for users and provides more granular control, so it is the preferred approach.

Additional Notes

• This is a substantial feature and could be broken down into smaller, more manageable issues.

[pranjalarora98]

@archa8 can you please assign me this issue? i want to actively work on it.
Thanks

[archa8]

@pranjalarora98 assigned to you
Good luck!

[akshatxq]

Hi @archa8, I’d like to work on the Budgets feature.
I can implement the backend schema and API endpoints, as well as the frontend BudgetsPage with progress tracking and CRUD functionality. Could you please assign this issue to me?

[Harishchandra-26]

Assign this to me .