Auto stash before merge of "main" and "origin/main"

public/assets/js/app.js

@@ -0,0 +1,79 @@
+// main.js
+
+document.addEventListener('DOMContentLoaded', function() {
+    const addBillForm = document.getElementById('addBillForm');
+    if (addBillForm) {
+        addBillForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+            const formData = new FormData(this);
+            axios.post('/api/add-bill', formData)
+                .then(function(response) {
+                    // Handle success, e.g., close modal, refresh bill list
+                    console.log('Bill added successfully');
+                    loadBills(); // Reload the bills list
+                })
+                .catch(function(error) {
+                    // Handle error, e.g., display error message
+                    console.error('Error adding bill:', error);
+                });
+            
+            document.querySelectorAll('.edit-bill-btn').forEach(button => {
+                button.addEventListener('click', function() {
+                    const billId = this.getAttribute('data-bill-id');
+                    // Fetch bill details and populate the form in the modal
+                    // Then, handle the form submission similar to the add bill form
+                });
+            });
+            document.querySelectorAll('.delete-bill-btn').forEach(button => {
+                button.addEventListener('click', function() {
+                    const billId = this.getAttribute('data-bill-id');
+                    axios.post('/api/delete-bill', { id: billId })
+                        .then(function(response) {
+                            // Handle success
+                            console.log('Bill deleted successfully');
+                            loadBills(); // Reload the bills list
+                        })
+                        .catch(function(error) {
+                            // Handle error
+                            console.error('Error deleting bill:', error);
+                        });
+                });
+            });
+        });
+    }
+
+    // Load bills if on the dashboard page
+    if (document.getElementById('billsTable')) {
+        loadBills();
+    }
+});
+
+
+function loadBills() {
+    const billsTableBody = document.querySelector('#billsTable tbody');
+    billsTableBody.innerHTML = '<tr><td colspan="4" class="text-center">Loading bills...</td></tr>'; // Loading indicator
+
+    axios.get('/api/bills')
+        .then(function(response) {
+            const bills = response.data;
+            billsTableBody.innerHTML = ''; // Clear loading indicator
+
+            bills.forEach(function(bill) {
+                const row = `
+                    <tr>
+                        <td>${bill.description}</td>
+                        <td>$${parseFloat(bill.amount).toFixed(2)}</td>
+                        <td>${bill.due_date}</td>
+                        <td>
+                            <!-- Add action buttons here -->
+                        </td>
+                    </tr>
+                `;
+                billsTableBody.innerHTML += row;
+            });
+        })
+        .catch(function(error) {
+            console.error('Error loading bills:', error);
+            billsTableBody.innerHTML = '<tr><td colspan="4" class="text-center">Error loading bills.</td></tr>'; // Error message
+        });
+}