Add expense creation to frontend

mft/static/app.js

@@ -58,11 +58,48 @@ document.getElementById('logout-btn').addEventListener('click', () => {
     document.getElementById('token-form').reset();
 });
 
-// Handle expense form submission (no-op for now)
-document.getElementById('expense-form').addEventListener('submit', (e) => {
+// Handle expense form submission
+document.getElementById('expense-form').addEventListener('submit', async (e) => {
     e.preventDefault();
-    // TODO: Implement expense submission
-    console.log('Expense form submitted (no-op)');
+
+    const token = localStorage.getItem(TOKEN_KEY);
+    const categoryId = parseInt(document.getElementById('category').value);
+    const valueInDollars = parseFloat(document.getElementById('value').value);
+    const note = document.getElementById('note').value.trim() || null;
+
+    // Convert dollars to cents
+    const valueInCents = Math.round(valueInDollars * 100);
+
+    try {
+        const response = await fetch('/api/expenses', {
+            method: 'POST',
+            headers: {
+                'Authorization': `Bearer ${token}`,
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                cid: categoryId,
+                value: valueInCents,
+                note: note
+            })
+        });
+
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.detail || 'Failed to add expense');
+        }
+
+        const expense = await response.json();
+        console.log('Expense created:', expense);
+
+        // Reset form
+        document.getElementById('expense-form').reset();
+
+        // TODO: Update local expense view with the new expense
+    } catch (error) {
+        console.error('Error adding expense:', error);
+        alert(`Failed to add expense: ${error.message}`);
+    }
 });
 
 function showLogin() {