I need help fixing my savings-goals.html(purpose: Setting and tracking of various saving objectives with progress reports.). It should record the input and display it in the page and in dashboard.html in the part w/ its name. savings-goals.html:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Add Savings Goal</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
    <nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
        <a class="navbar-brand" href="dashboard.html">Dashboard</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
                aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink1" role="button"
                       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Financials
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink1">
                        <a class="dropdown-item" href="transaction-history.html">Transaction History</a>
                        <a class="dropdown-item" href="/dashboard/budgets">Budget Management</a>
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink2" role="button"
                       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Goals
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink2">
                        <a class="dropdown-item" href="savings-goals.html">Savings Goals</a>
                        <a class="dropdown-item" href="/dashboard/debt">Debt Overview</a>
                    </div>
                </li>
            </ul>
        </div>
    </nav>
    <div class="row">
        <div class="col-md-6 offset-md-3">
            <div class="card">
                <div class="card-body">
                    <h3 class="card-title">Add Savings Goal</h3>
                    <form id="savingsGoalForm">
                        <div class="form-group">
                            <label for="goalName">Goal Name</label>
                            <input type="text" class="form-control" id="goalName" name="goalName" required>
                        </div>
                        <div class="form-group">
                            <label for="amount">Amount</label>
                            <input type="number" class="form-control" id="amount" name="amount" required>
                        </div>
                        <button type="submit" class="btn btn-primary">Save Goal</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function () {
        $('#savingsGoalForm').submit(function (event) {
            event.preventDefault();

            var goalName = $('#goalName').val();
            var amount = $('#amount').val();

            // Make AJAX POST request to save the savings goal
            $.ajax({
                type: "POST",
                url: "/dashboard/save-savings-goal",
                data: JSON.stringify({ goalName: goalName, amount: amount }),
                contentType: "application/json",
                success: function () {
                    alert("Savings goal saved successfully!");
                    // Redirect to dashboard or update dashboard content
                    window.location.href = "/dashboard";
                },
                error: function (error) {
                    console.error("Error saving savings goal:", error);
                    alert("Failed to save savings goal.");
                }
            });
        });
    });
</script>
</body>
</html>
dashboard.html:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard</title>
    <link rel="stylesheet" href="../css/styles.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <!-- Navigation bar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
        <a class="navbar-brand" href="dashboard.html">Dashboard</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
                aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink1" role="button"
                       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Financials
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink1">
                        <a class="dropdown-item" href="transaction-history.html">Transaction History</a>
                        <a class="dropdown-item" href="/dashboard/budgets">Budget Management</a>
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink2" role="button"
                       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Goals
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink2">
                        <a class="dropdown-item" href="savings-goals.html">Savings Goals</a>
                        <a class="dropdown-item" href="/dashboard/debt">Debt Overview</a>
                    </div>
                </li>
            </ul>
        </div>
    </nav>

    <!-- Main content -->
    <div class="page-content">
        <div class="row mb-4">
            <div class="col">
                <h1 class="welcome-message">Welcome to WealthGuardian<span th:text="${currentUser.name}"></span>!</h1>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6 mb-4">
                <div class="card">
                    <div class="card-body">
                        <h3 class="section-title">Recent Transactions</h3>
                        <div class="table-responsive">
                            <table class="table table-striped transactions-table">
                                <thead>
                                <tr>
                                    <th>Date</th>
                                    <th>Description</th>
                                    <th>Amount</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="transaction : ${transactions}">
                                    <td th:text="${transaction.date}"></td>
                                    <td th:text="${transaction.description}"></td>
                                    <td th:text="${transaction.amount}"></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card mb-4">
                    <div class="card-body">
                        <h3 class="section-title">Budget Overview</h3>
                        <p>Budget Status: <span th:text="${budgetStatus}"></span></p>
                        <p>Remaining Budget: <span th:text="${remainingBudget}"></span></p>
                    </div>
                </div>


                <!-- Savings Goals Section -->
                <div class="card mb-4">
                    <div class="card-body">
                        <h3 class="section-title">Savings Goals</h3>
                        <!-- List of Savings Goals -->
                        <ul class="list-group savings-goals-list">
                            <li th:each="goal : ${savingsGoals}" class="list-group-item">
                                <span th:text="${goal.goalName}"></span>: <span th:text="${goal.amount}"></span>
                            </li>
                        </ul>

                        <!-- Form for Updating Savings Goal -->
                        <form action="/dashboard/update-savings-goal" method="post">
                            <div class="form-group">
                                <label for="goalName">Goal Name</label>
                                <input type="text" class="form-control" id="goalName" name="goalName" placeholder="Enter goal name">
                            </div>
                            <div class="form-group">
                                <label for="amount">Amount</label>
                                <input type="number" class="form-control" id="amount" name="amount" placeholder="Enter amount">
                            </div>
                            <button type="submit" class="btn btn-primary">Update Savings Goal</button>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>
BudgetController.java:
package com.weathGuardian.controller;

import com.weathGuardian.models.Budget;
import com.weathGuardian.Service.BudgetService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/api/budgets")
public class BudgetController {

    private final BudgetService budgetService;

    @Autowired
    public BudgetController(BudgetService budgetService) {
        this.budgetService = budgetService;
    }

    @PostMapping
    public ResponseEntity<Budget> createBudget(@RequestBody Budget budget) {
        budgetService.createBudget(budget);
        return new ResponseEntity<>(budget, HttpStatus.CREATED);
    }

    @GetMapping("/{id}")
    public ResponseEntity<Budget> getBudgetById(@PathVariable Long id) {
        Budget budget = budgetService.getBudgetById(id);
        if (budget != null) {
            return new ResponseEntity<>(budget, HttpStatus.OK);
        } else {
            return new ResponseEntity<>(HttpStatus.NOT_FOUND);
        }
    }

    @GetMapping
    public ResponseEntity<List<Budget>> getAllBudgets() {
        List<Budget> budgets = budgetService.getAllBudgets();
        return new ResponseEntity<>(budgets, HttpStatus.OK);
    }

    @DeleteMapping("/{id}")
    public ResponseEntity<Void> deleteBudget(@PathVariable Long id) {
        budgetService.deleteBudget(id);
        return new ResponseEntity<>(HttpStatus.NO_CONTENT);
    }
}
TransactionController.java:
package com.weathGuardian.controller;

import com.weathGuardian.models.Transaction;
import com.weathGuardian.models.User;
import com.weathGuardian.Service.TransactionService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;

import java.util.ArrayList;
import java.util.List;

@Controller
@RequestMapping("/dashboard")
public class TransactionController {

    private final TransactionService transactionService;

    @Autowired
    public TransactionController(TransactionService transactionService) {
        this.transactionService = transactionService;
    }

    @GetMapping
    public String dashboard(Model model) {
        User currentUser = getCurrentUser();
        List<Transaction> transactions = transactionService.getAllTransactions();
        String budgetStatus = calculateBudgetStatus();
        String remainingBudget = calculateRemainingBudget();
        List<SavingsGoal> savingsGoals = getSavingsGoals();

        model.addAttribute("currentUser", currentUser);
        model.addAttribute("transactions", transactions);
        model.addAttribute("budgetStatus", budgetStatus);
        model.addAttribute("remainingBudget", remainingBudget);
        model.addAttribute("savingsGoals", savingsGoals);

        return "dashboard"; // Corresponds to dashboard.html in templates directory
    }

    @PostMapping("/update-savings-goal")
    public String updateSavingsGoal(@RequestParam("goalName") String goalName,
                                    @RequestParam("amount") double amount,
                                    Model model) {
        // Logic to update savings goal - you can integrate this with your existing service
        // For demonstration, let's assume updating a mock savings goal
        SavingsGoal updatedGoal = new SavingsGoal(goalName, amount);
        model.addAttribute("updatedGoal", updatedGoal);

        // Refresh dashboard with updated data
        return "redirect:/dashboard";
    }

    // Replace with actual logic to get current user
    private User getCurrentUser() {
        return new User(); // Example return
    }

    // Example methods to calculate budget status and remaining budget
    private String calculateBudgetStatus() {
        return "Good"; // Example return
    }

    private String calculateRemainingBudget() {
        return "$1000"; // Example return
    }

    // Example method to get savings goals
    private List<SavingsGoal> getSavingsGoals() {
        List<SavingsGoal> goals = new ArrayList<>();
        goals.add(new SavingsGoal("Goal 1", 500));
        goals.add(new SavingsGoal("Goal 2", 1000));
        return goals;
    }

    // Static inner class for mock savings goal
    private static class SavingsGoal {
        private String goalName;
        private double amount;

        public SavingsGoal(String goalName, double amount) {
            this.goalName = goalName;
            this.amount = amount;
        }

        public String getGoalName() {
            return goalName;
        }

        public void setGoalName(String goalName) {
            this.goalName = goalName;
        }

        public double getAmount() {
            return amount;
        }

        public void setAmount(double amount) {
            this.amount = amount;
        }
    }
}
UserController.java:
package com.weathGuardian.controller;

import com.weathGuardian.models.User;
import com.weathGuardian.Service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;

import java.util.List;
import java.util.Optional;

@RestController
@RequestMapping("/api/users")
public class UserController {

    private final UserService userService;

    @Autowired
    public UserController(UserService userService) {
        this.userService = userService;
    }

    @PostMapping
    public ResponseEntity<User> createUser(@RequestBody User user) {
        try {
            User createdUser = userService.saveUser(user);
            return new ResponseEntity<>(createdUser, HttpStatus.CREATED);
        } catch (Exception e) {
            return new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);
        }
    }

    @GetMapping("/{id}")
    public ResponseEntity<User> getUserById(@PathVariable Long id) {
        try {
            Optional<User> user = userService.getUserById(id);
            return user.map(ResponseEntity::ok)
                    .orElse(ResponseEntity.notFound().build());
        } catch (Exception e) {
            return new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);
        }
    }

    @GetMapping
    public ResponseEntity<List<User>> getAllUsers() {
        try {
            List<User> users = userService.getAllUsers();
            return new ResponseEntity<>(users, HttpStatus.OK);
        } catch (Exception e) {
            return new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);
        }
    }
}