Add payee management

js/app.js

@@ -4,6 +4,8 @@ document.addEventListener('DOMContentLoaded', () => {
   const billList = document.getElementById('billList');
   const form = document.getElementById('billForm');
   const currentYear = new Date().getFullYear();
+  const payeeList = document.getElementById('payeeList');
+  const payeeListEmpty = document.getElementById('payeeListEmpty');
   const importModal = document.getElementById('importModal');
   const openImportButton = document.getElementById('openImportModal');
   const importCancelButton = document.getElementById('importCancel');
@@ -57,6 +59,28 @@ document.addEventListener('DOMContentLoaded', () => {
       option.textContent = payee.name; // Display payee name
       payeeSelect.appendChild(option);
     });
+
+    if (payeeList) {
+      payeeList.innerHTML = '';
+
+      if (payees.length === 0) {
+        if (payeeListEmpty) payeeListEmpty.classList.remove('hidden');
+      } else {
+        if (payeeListEmpty) payeeListEmpty.classList.add('hidden');
+        payees.forEach((payee) => {
+          const li = document.createElement('li');
+          li.className = 'flex items-center justify-between border rounded px-3 py-2 bg-white shadow-sm';
+          li.innerHTML = `
+            <span>${payee.name}</span>
+            <div class="space-x-2">
+              <button type="button" class="text-white px-3 py-1 rounded text-xs shadow hover:opacity-90" style="background-color:#16a34a" data-action="edit-payee" data-id="${payee.id}" data-name="${payee.name}">Edit</button>
+              <button type="button" class="text-white px-3 py-1 rounded text-xs shadow hover:opacity-90" style="background-color:#dc2626" data-action="delete-payee" data-id="${payee.id}" data-name="${payee.name}">Delete</button>
+            </div>
+          `;
+          payeeList.appendChild(li);
+        });
+      }
+    }
   }
 
   // Fetch and display bills
@@ -248,6 +272,13 @@ document.addEventListener('DOMContentLoaded', () => {
     e.preventDefault();
 
     const formData = new FormData(e.target);
+    const payeeName = (formData.get('payeeName') || '').toString().trim();
+    if (payeeName === '') {
+      alert('Please enter a payee name.');
+      return;
+    }
+    formData.set('payeeName', payeeName);
+
     const response = await fetch('/includes/api.php?action=addPayee', {
       method: 'POST',
       body: formData
@@ -261,6 +292,63 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   });
 
+  // Edit/Delete payees
+  if (payeeList) {
+    payeeList.addEventListener('click', async (e) => {
+      const action = e.target.getAttribute('data-action');
+      const payeeId = e.target.getAttribute('data-id');
+      const currentName = e.target.getAttribute('data-name');
+
+      if (!action || !payeeId) return;
+
+      if (action === 'edit-payee') {
+        const newName = prompt('Enter the new payee name:', currentName || '');
+        if (!newName || newName.trim() === '') {
+          return;
+        }
+
+        const formData = new FormData();
+        formData.append('id', payeeId);
+        formData.append('payeeName', newName.trim());
+
+        const response = await fetch('/includes/api.php?action=editPayee', {
+          method: 'POST',
+          body: formData
+        });
+
+        const data = await response.json();
+        if (!response.ok || data.error) {
+          alert(data.error || 'Failed to update payee.');
+          return;
+        }
+
+        await loadPayees('payeeId');
+        await loadBills(yearSelect.value, sortSelect.value); // refresh displayed names
+      }
+
+      if (action === 'delete-payee') {
+        const confirmed = confirm(`Delete payee "${currentName}"? This cannot be undone.`);
+        if (!confirmed) return;
+
+        const formData = new FormData();
+        formData.append('id', payeeId);
+
+        const response = await fetch('/includes/api.php?action=deletePayee', {
+          method: 'POST',
+          body: formData
+        });
+
+        const data = await response.json();
+        if (!response.ok || data.error) {
+          alert(data.error || 'Failed to delete payee.');
+          return;
+        }
+
+        await loadPayees('payeeId');
+      }
+    });
+  }
+
   // Event listener for edit buttons within bill items
   billList.addEventListener('click', (e) => {
     if (e.target.tagName === 'BUTTON' && e.target.textContent === 'Edit') {