Feature/create budget transaction forms

[Aditya-JOSH]

Description

This PR introduces reusable components for managing budgets on the frontend, updates the budget forms with validations, and enhances the backend to support the latest frontend changes.

Type of Change

• Bug fix
• New feature
• Breaking change
• Documentation update

Changes Made

Backend

• BudgetsController#update: Updated to render serialized budget data on update for consistent API responses.
• Budget model: Added validations for name (presence) and financial_goal (presence and numericality > 0).
• Added helper methods total_spent and remaining_amount for budget calculations.
• BudgetSerializer: Extended to include spent and remaining attributes and associated transactions, plus user relationships.

Frontend

• Removed the old monolithic Budgets component and introduced a modular structure with reusable components:
  • Budgets.js: Container managing state, fetching budgets, and handling edit/delete operations.
  • BudgetForm.js: Controlled form with validation for creating and updating budgets.
  • BudgetsGrid.js: Grid rendering budget cards or showing empty state.
  • BudgetCard.js: Individual budget card display showing goals, spent, remaining amounts, progress bar, and action buttons.
  • LoadingSpinner.js: Reusable loading state UI.
• Implemented robust form validation including max limit on financial goals.
• Updated UI interaction flows for better user experience and consistency between frontend and backend data.

Testing

Describe how you tested these changes:

• Unit tests added/updated
• Integration tests pass
• Manual testing performed

Screenshots (if applicable)

Related Issues

Closes #9