[Draft][Frontend] Create a "Savings Goals" feature

[FelipePSoares]

To complete the Savings Goals feature for EconoFlow, we need to implement the front-end functionality that will allow users to interact with savings goals and manage their reserved funds. The back-end and category CRUD functionality are already in place, so this issue focuses on the front-end integration.

Requirements:

1. UI for Savings Goal Setup:

   • Add a Savings Goal toggle in the category creation/edit screen.
   • If the Savings Goal option is enabled, display additional fields:
     • TargetAmount (optional): A field for users to input their savings target amount.
     • TargetDate (optional): A date picker for users to set a goal completion date.

2. CRUD Integration

   • Integrate the front-end with the existing back-end CRUD operations for savings goals:
   • Allow users to create, update, and delete savings goals within the category management screen.
   • Display a list of all savings entries (Saves) under the relevant category, with options to view, edit, or delete individual savings records.

3. Progress Display

   • On the dashboard or a designated financial overview page, display a savings goals progress bar:
     • Show the percentage of progress toward each savings goal.
     • Highlight goals that are nearing completion or past their target date.

4. User-Friendly Notifications

   • Add user feedback and notifications for actions such as:
     • Savings goal creation.
     • Progress updates (e.g., “You’ve saved 50% of your goal!”).
     • Goal completion or cancelation.

5.Testing & Validation

• Implement form validation to ensure that users cannot input negative amounts or invalid dates.
• Test the UI responsiveness and ensure a smooth experience across different devices and screen sizes.