Front end View and back end logic for "Budget Form"

[austin-carnahan]

As a user, I want to input and submit my budget information, so that I can track my finances effectively.

Frontend View:

• See a form with fields for income, expenses, and savings goals
• Input financial data into clearly labeled fields
• Submit the form to save my budget
• View a summary of my budget after submission
• Receive visual feedback for any input errors

Backend Logic:

• Create an API endpoint to receive budget form data
• Validate all incoming data for completeness and correctness
• Store the validated budget data in a database
• Calculate totals and percentages for income, expenses, and savings
• Return a success response with a budget summary or error messages

Acceptance Criteria:

1. Form displays all required fields, marked with an asterisk (*)
2. Numeric fields only accept valid numbers
3. Savings goal is expressed as a percentage
4. Form prevents submission if required fields are empty
5. Error messages appear next to relevant fields
6. Loading indicator displays during form submission
7. API responds with appropriate status codes (400 for errors, 201 for success)
8. Database record includes timestamp of budget creation
9. Calculations are accurate to two decimal places
10. User receives a budget summary within 3 seconds of successful submission
11. System handles concurrent requests without data corruption