From 34b8368e9b0e495901525ff908a4f10a4a4b0e80 Mon Sep 17 00:00:00 2001
From: ydb5755 <yisroel.d.baum@gmail.com>
Date: Sun, 13 Oct 2024 14:42:42 +0300
Subject: [PATCH] html and js for monthly budget summary

---
 app/static/monthly_budget_summary.js      | 10 +++++
 app/templates/monthly_budget_summary.html | 47 +++++++++++++++++++++++
 2 files changed, 57 insertions(+)
 create mode 100644 app/static/monthly_budget_summary.js
 create mode 100644 app/templates/monthly_budget_summary.html

diff --git a/app/static/monthly_budget_summary.js b/app/static/monthly_budget_summary.js
new file mode 100644
index 0000000..32fae99
--- /dev/null
+++ b/app/static/monthly_budget_summary.js
@@ -0,0 +1,10 @@
+const monthSelector = document.getElementById('month-selector');
+const tableBody = document.getElementById('table-body');
+
+
+document.addEventListener("DOMContentLoaded", (event) => {
+    displayMonthLineItems(monthSelector.value);
+    monthSelector.addEventListener('change', (e) => {
+        displayMonthLineItems(e.target.value);
+    })
+  });
\ No newline at end of file
diff --git a/app/templates/monthly_budget_summary.html b/app/templates/monthly_budget_summary.html
new file mode 100644
index 0000000..b19b103
--- /dev/null
+++ b/app/templates/monthly_budget_summary.html
@@ -0,0 +1,47 @@
+{% extends 'base.html' %}
+{% block title %}Monthly Budget Summary{% endblock title %}
+
+{% block content %}
+<main>
+    <div class="container mt-5">
+        <div class="card">
+            <div class="card-header bg-primary text-white">
+                Monthly Budget Summary
+                <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">Parent LineItem ID</th>
+                                <th scope="col">Amount</th>
+                                <th scope="col">Currency Type</th>
+                                <th scope="col">Vendor</th>
+                                <th scope="col">Date</th>
+                                <th scope="col">Confirmation Code</th>
+                                <th scope="col">Note</th>
+                                <th scope="col">Reassign Vendor</th>
+                                <th scope="col">Split Line?</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='monthly_budget_summary.js')}}"></script>
+
+{% endblock content %}
\ No newline at end of file