✨feature: Initial commit

js/app.js

@@ -0,0 +1,58 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const form = document.getElementById('billForm');
+  const billList = document.getElementById('billList');
+
+  // Add new bill
+  form.addEventListener('submit', async (e) => {
+    e.preventDefault();
+
+    const formData = new FormData(form);
+    const response = await fetch('/includes/api.php?action=add', {
+      method: 'POST',
+      body: formData
+    });
+
+    if (response.ok) {
+      form.reset();
+      loadBills();
+      updateChart();
+    }
+  });
+
+  // Load bills via AJAX
+  async function loadBills() {
+    const response = await fetch('/includes/api.php?action=getAll');
+    const bills = await response.json();
+
+    billList.innerHTML = bills.map(bill => `
+      <tr class="border-t">
+        <td class="px-4 py-2">${new Date(bill.billDate).toISOString().split('T')[0]}</td>
+        <td class="px-4 py-2">${bill.billName}</td>
+        <td class="px-4 py-2">$${parseFloat(bill.amount).toFixed(2)}</td>
+        <td class="px-4 py-2">${bill.paymentId}</td>
+      </tr>
+    `).join('');
+  }
+
+  // Initialize chart
+  let chart;
+  async function updateChart() {
+    const response = await fetch('/includes/api.php?action=getTotals');
+    const data = await response.json();
+
+    if (chart) chart.destroy();
+
+    chart = new Chart(document.getElementById('chart'), {
+      type: 'bar',
+      data: {
+        labels: [...new Set(data.map(item => item.year))],
+        datasets: Object.groupBy(data, ({ billName }) => billName).map(([name, values]) => ({
+          label: name,
+          data: values.map(v => v.total)
+        }))
+      }
+    });
+  }
+
+  updateChart();
+});