feat: enhance form validation in AddTransactionForm and improve error handling in transactions API

src/components/AddTransactionForm.astro

@@ -153,7 +153,7 @@
 
         // Check required fields
         const description = formData.get('description') as string;
-        const amount = formData.get('amount');
+        const amount = formData.get('amount') as string;
         const date = formData.get('date');
 
         if (!description || description.trim().length < 2) {
@@ -162,10 +162,22 @@
 
         if (!amount) {
             errors.push('Amount is required');
+        } else {
+            const amountNum = parseFloat(amount);
+            if (isNaN(amountNum)) {
+                errors.push('Amount must be a valid number');
+            } else if (amountNum === 0) {
+                errors.push('Amount cannot be zero');
+            }
         }
 
         if (!date) {
             errors.push('Date is required');
+        } else {
+            const dateObj = new Date(date as string);
+            if (isNaN(dateObj.getTime())) {
+                errors.push('Invalid date format');
+            }
         }
 
         return errors.length > 0 ? errors : null;
@@ -226,7 +238,7 @@
                     amount: amount
                 };
 
-                const transactionId = formData.get('id');
+                const transactionId = txnIdInput.value;
                 const method = transactionId ? 'PUT' : 'POST';
                 const url = transactionId 
                     ? `/api/transactions/${transactionId}`
@@ -250,14 +262,17 @@
 
                 // Update UI
                 const eventName = isEditMode ? 'transactionUpdated' : 'transactionCreated';
-                const event = new CustomEvent(eventName, {
+                document.dispatchEvent(new CustomEvent(eventName, {
                     detail: { transaction: savedTransaction }
-                });
+                }));
-                document.dispatchEvent(event);
 
                 // Clear and collapse form
                 clearForm();
                 form.classList.add('collapsed');
+                if (toggleBtn) {
+                    toggleBtn.setAttribute('aria-expanded', 'false');
+                    toggleBtn.textContent = 'Add Transaction +';
+                }
 
             } catch (error) {
                 showError(error instanceof Error ? error.message : 'An unexpected error occurred');

src/pages/api/transactions/index.ts

@@ -1,25 +1,29 @@
-// TODO: Security Improvements
+/**
-// - Add input validation and sanitization
+ * TODO: Security Improvements
-// - Implement rate limiting for API endpoints
+ * - Add input validation and sanitization
-// - Add request authentication
+ * - Implement rate limiting for API endpoints
-// - Implement CSRF protection
+ * - Add request authentication
-// - Add request logging and monitoring
+ * - Implement CSRF protection
-// - Implement secure session management
+ * - Add request logging and monitoring
-// - Add API versioning
+ * - Implement secure session management
-// - Set up proper CORS configuration
+ * - Add API versioning
+ * - Set up proper CORS configuration
+ */
 
 import type { APIRoute } from "astro";
 import { transactions, accounts } from "../../../data/store";
 import type { Transaction } from "../../../types";
 
-// TODO: API Improvements
+/**
-// - Add request rate limiting
+ * TODO: API Improvements
-// - Implement proper API authentication
+ * - Add request rate limiting
-// - Add input sanitization
+ * - Implement proper API authentication
-// - Implement request validation middleware
+ * - Add input sanitization
-// - Add API versioning
+ * - Implement request validation middleware
-// - Consider implementing GraphQL for more flexible queries
+ * - Add API versioning
-// - Add proper logging and monitoring
+ * - Consider implementing GraphQL for more flexible queries
+ * - Add proper logging and monitoring
+ */
 
 export const POST: APIRoute = async ({ request }) => {
   try {

src/pages/index.astro

@@ -4,23 +4,6 @@ import Sidebar from '../components/Sidebar.astro';
 import MainContent from '../components/MainContent.astro';
 import type { Account, Transaction } from '../types';
 
-// TODO: State Management Improvements
-// - Consider implementing Nano Stores for better state management
-// - Add more robust error handling and user feedback
-// - Implement loading states for all async operations
-// - Add offline support with data synchronization
-// - Consider implementing optimistic updates for better UX
-
-// TODO: Performance & Monitoring
-// - Implement client-side error tracking
-// - Add performance metrics collection
-// - Set up monitoring for API response times
-// - Implement request caching strategy
-// - Add lazy loading for transaction history
-// - Optimize bundle size
-// - Add performance budgets
-// - Implement progressive loading
-
 // Fetch accounts from API
 const accountsResponse = await fetch('http://localhost:4321/api/accounts');
 const accounts: Account[] = await accountsResponse.json();
@@ -40,6 +23,28 @@ if (initialAccount.id) {
     initialTransactions = await transactionsResponse.json();
 }
 ---
+
+<!--
+TODO: State Management Improvements
+- Consider implementing Nano Stores for better state management
+- Add more robust error handling and user feedback
+- Implement loading states for all async operations
+- Add offline support with data synchronization
+- Consider implementing optimistic updates for better UX
+-->
+
+<!--
+TODO: Performance & Monitoring
+- Implement client-side error tracking
+- Add performance metrics collection
+- Set up monitoring for API response times
+- Implement request caching strategy
+- Add lazy loading for transaction history
+- Optimize bundle size
+- Add performance budgets
+- Implement progressive loading
+-->
+
 <BaseLayout title="Bank Transactions Dashboard">
     <div class="dashboard-layout">
         <Sidebar accounts={accounts} initialAccount={initialAccount} />