Refactor transaction components and styles

- Updated imports to use absolute paths for types and utilities.
- Enhanced TransactionTable component with mobile responsiveness and card-based layout.
- Improved loading and error handling in transaction fetching logic.
- Refactored transaction update API to streamline validation and data preparation.
- Added new styles for Radix UI components and improved global styles for better mobile experience.
- Implemented collapsible sections and improved button interactions in the UI.
- Updated tests to reflect changes in component structure and imports.

src/components/TransactionTable.astro

@@ -1,6 +1,5 @@
 ---
-import type { Transaction } from '../types';
-import { formatCurrency, formatDate } from '../utils';
+import type { Transaction } from '@types';
 
 interface Props {
   transactions: Transaction[];
@@ -21,6 +20,7 @@ const sortedTransactions = [...transactions].sort(
 // - Add transaction details expansion/collapse
 // - Consider adding bulk actions (delete, categorize)
 ---
+
 <section class="transaction-list" id="transaction-section">
     <table id="transaction-table">
         <thead>
@@ -32,24 +32,45 @@ const sortedTransactions = [...transactions].sort(
             </tr>
         </thead>
         <tbody id="transaction-table-body">
-            {sortedTransactions.map(txn => (
-                <tr data-txn-id={txn.id}>
-                    <td>{formatDate(txn.date)}</td>
-                    <td>{txn.description}</td>
-                    <td class={`amount-col ${txn.amount >= 0 ? 'amount-positive' : 'amount-negative'}`}>
-                        {formatCurrency(txn.amount)}
-                    </td>
-                    <td>
-                        <button class="action-btn edit-btn" title="Edit transaction">Edit</button>
-                        <button class="action-btn delete-btn" title="Delete transaction">Delete</button>
-                    </td>
-                </tr>
-            ))}
-            {sortedTransactions.length === 0 && (
-                <tr>
-                    <td colspan="4" style="text-align: center; font-style: italic; color: #777;">No transactions found for this account.</td>
-                </tr>
-            )}
+            {
+                sortedTransactions.map((txn) => (
+                    <tr data-txn-id={txn.id}>
+                        <td>{formatDate(txn.date)}</td>
+                        <td>{txn.description}</td>
+                        <td
+                            class={`amount-col ${Number(txn.amount) >= 0 ? "amount-positive" : "amount-negative"}`}
+                        >
+                            {formatCurrency(Number(txn.amount))}
+                        </td>
+                        <td>
+                            <button
+                                class="action-btn edit-btn"
+                                title="Edit transaction"
+                            >
+                                Edit
+                            </button>
+                            <button
+                                class="action-btn delete-btn"
+                                title="Delete transaction"
+                            >
+                                Delete
+                            </button>
+                        </td>
+                    </tr>
+                ))
+            }
+            {
+                sortedTransactions.length === 0 && (
+                    <tr>
+                        <td
+                            colspan="4"
+                            style="text-align: center; font-style: italic; color: #777;"
+                        >
+                            No transactions found for this account.
+                        </td>
+                    </tr>
+                )
+            }
         </tbody>
     </table>
-</section>
+</section>