monthly budget analysis page

app/static/budget_monthly_analysis.js

@@ -0,0 +1,32 @@
+const monthSelector = document.getElementById('month-selector');
+const tableBody = document.getElementById('table-body');
+
+
+
+async function displayMonthLineItems(dateString){
+    const [month, year] = dateString.split(' ');
+    var result = await fetch(`/get_budget_details_for_month/${month}/${year}`, {method:'POST'});
+    var data = await result.json();
+    tableBody.innerHTML = ''
+    data.forEach(budget_category => {
+        const row = `
+            <tr id="${budget_category.id}-row">
+                <th scope="row">${budget_category.id}</th>
+                <th scope="row">${budget_category.name}</th>
+                <th scope="row">${budget_category.month_cost}</th>
+            </tr>
+        `;
+
+        // Insert the row into the table body
+        tableBody.insertAdjacentHTML('beforeend', row);
+
+    });
+    addListenersToReassignButtons();
+}
+
+document.addEventListener("DOMContentLoaded", (event) => {
+    displayMonthLineItems(monthSelector.value);
+    monthSelector.addEventListener('change', (e) => {
+        displayMonthLineItems(e.target.value);
+    })
+  });

app/templates/budget_monthly_analysis.html

@@ -0,0 +1,40 @@
+{% extends 'base.html' %}
+{% block title %}Budget Monthly Analysis{% endblock title %}
+
+{% block content %}
+<main>
+    <div class="container mt-5">
+        <div class="card">
+            <div class="card-header bg-primary text-white">
+                Budget Categories
+                <br/>
+                <label for="month-selector">Choose a month:</label>
+
+                <select name="month-selector" id="month-selector">
+                    {% for month in all_months %}
+                        <option value="{{month}}">{{month}}</option>
+                    {% endfor %}
+                </select>
+            </div>
+            <div class="card-body">
+                
+                <div class="table-responsive">
+                    <table class="table table-bordered">
+                        <thead>
+                            <tr>
+                                <th scope="col">ID</th>
+                                <th scope="col">Name</th>
+                                <th scope="col">Total Month Cost</th>
+                            </tr>
+                        </thead>
+                        <tbody id="table-body">
+                            <tr><td>Loading...</td></tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+</main>
+<script src="{{url_for('.static', filename='budget_monthly_analysis.js')}}"></script>
+{% endblock content %}