Initial commit - Basic bank transactions dashboard structure with Astro and TypeScript

src/components/TransactionTable.astro

@@ -0,0 +1,45 @@
+---
+import { formatCurrency, formatDate } from '../utils';
+import type { Transaction } from '../types';
+
+interface Props {
+    transactions: Transaction[];
+}
+
+const { transactions } = Astro.props;
+
+// Sort transactions by date descending for display
+const sortedTransactions = [...transactions].sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+---
+<section class="transaction-list">
+    <table id="transaction-table">
+         <thead>
+            <tr>
+                <th>Date</th>
+                <th>Description</th>
+                <th class="amount-col">Amount</th>
+                <th>Actions</th>
+            </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 (not implemented)">Edit</button>
+                        <button class="action-btn delete-btn" title="Delete transaction (not implemented)">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>