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

src/components/AccountSummary.astro

@@ -0,0 +1,14 @@
+---
+import { formatCurrency } from '../utils'; // We'll create this util
+import type { Account } from '../types';
+
+interface Props {
+    account: Account;
+}
+const { account } = Astro.props;
+---
+<div class="account-summary">
+     <h4>Account Summary</h4>
+     <p>Balance: <span id="account-balance">{formatCurrency(account.balance)}</span></p>
+     <!-- Add more summary info if needed -->
+</div>

src/components/AddTransactionForm.astro

@@ -0,0 +1,51 @@
+---
+// This component needs client-side JS for the toggle
+---
+<section class="add-transaction-section">
+     <button
+        id="toggle-form-btn"
+        class="toggle-form-btn"
+        aria-expanded="false"
+        aria-controls="add-transaction-form"
+     >
+        Add Transaction +
+    </button>
+    <form id="add-transaction-form" class="collapsible-form collapsed">
+        <h4>New Transaction</h4>
+        <div class="form-group">
+            <label for="txn-date">Date</label>
+            <input type="date" id="txn-date" name="date" required>
+        </div>
+        <div class="form-group">
+            <label for="txn-description">Description</label>
+            <input type="text" id="txn-description" name="description" required placeholder="e.g. Groceries">
+        </div>
+        <div class="form-group">
+            <label for="txn-amount">Amount</label>
+            <input type="number" id="txn-amount" name="amount" step="0.01" required placeholder="e.g. -25.50 or 1200.00">
+        </div>
+        <!-- In a real app, prevent default and use JS to submit -->
+        <button type="submit">Save</button>
+    </form>
+</section>
+
+<script>
+    // Script to handle the collapsible form toggle
+    const toggleBtn = document.getElementById('toggle-form-btn');
+    const form = document.getElementById('add-transaction-form');
+
+    if (toggleBtn && form) {
+        toggleBtn.addEventListener('click', () => {
+            const isExpanded = toggleBtn.getAttribute('aria-expanded') === 'true';
+            toggleBtn.setAttribute('aria-expanded', String(!isExpanded));
+            form.classList.toggle('collapsed');
+            toggleBtn.textContent = isExpanded ? 'Add Transaction +' : 'Hide Form -';
+            // Optional: Focus first input when opening
+            if (!isExpanded) {
+                form.querySelector('input')?.focus();
+            }
+        });
+    } else {
+        console.error("Toggle button or form not found");
+    }
+</script>

src/components/MainContent.astro

@@ -0,0 +1,17 @@
+---
+import TransactionTable from './TransactionTable.astro';
+import type { Account, Transaction } from '../types';
+
+interface Props {
+    account: Account;
+    transactions: Transaction[];
+}
+
+const { account, transactions } = Astro.props;
+---
+<main class="main-content">
+    <header class="main-header">
+         <h1>Transactions for <span id="current-account-name">{account.name} (***{account.last4})</span></h1>
+    </header>
+    <TransactionTable transactions={transactions} client:load /> {/* Make table updatable */}
+</main>

src/components/Sidebar.astro

@@ -0,0 +1,31 @@
+---
+import AddTransactionForm from './AddTransactionForm.astro';
+import AccountSummary from './AccountSummary.astro';
+import type { Account } from '../types'; // We'll define this type
+
+interface Props {
+    accounts: Account[];
+    initialAccount: Account; // Pass the initially selected account
+}
+
+const { accounts, initialAccount } = Astro.props;
+---
+<aside class="sidebar">
+    <div class="sidebar-header">
+        <h2>My Bank</h2>
+    </div>
+    <nav class="account-nav">
+        <h3>Accounts</h3>
+        <select id="account-select" name="account">
+            {accounts.map(account => (
+                <option value={account.id} selected={account.id === initialAccount.id}>
+                    {account.name} (***{account.last4})
+                </option>
+            ))}
+        </select>
+    </nav>
+
+    <AddTransactionForm client:load /> {/* Make form toggle interactive */}
+
+    <AccountSummary account={initialAccount} client:load /> {/* Make summary updatable */}
+</aside>

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>

src/data/accounts.json

@@ -0,0 +1,20 @@
+[
+  {
+    "id": "acc1",
+    "name": "Savings",
+    "last4": "1234",
+    "balance": 6164.70
+  },
+  {
+    "id": "acc2",
+    "name": "Checking",
+    "last4": "5678",
+    "balance": 400.00
+  },
+  {
+    "id": "acc3",
+    "name": "Credit Card",
+    "last4": "9012",
+    "balance": -132.49
+  }
+]

src/data/transactions.json

@@ -0,0 +1,100 @@
+[
+  {
+    "id": "txn1",
+    "accountId": "acc1",
+    "date": "2023-10-05",
+    "description": "Transfer In",
+    "amount": 500.00
+  },
+  {
+    "id": "txn2",
+    "accountId": "acc1",
+    "date": "2023-10-12",
+    "description": "Coffee Shop",
+    "amount": -5.50
+  },
+  {
+    "id": "txn3",
+    "accountId": "acc1",
+    "date": "2023-10-18",
+    "description": "Book Store",
+    "amount": -29.95
+  },
+  {
+    "id": "txn4",
+    "accountId": "acc1",
+    "date": "2023-10-25",
+    "description": "Restaurant",
+    "amount": -65.00
+  },
+  {
+    "id": "txn5",
+    "accountId": "acc1",
+    "date": "2023-10-31",
+    "description": "Interest Payment",
+    "amount": 1.15
+  },
+  {
+    "id": "txn6",
+    "accountId": "acc1",
+    "date": "2023-11-01",
+    "description": "Salary Deposit",
+    "amount": 2800.00
+  },
+  {
+    "id": "txn7",
+    "accountId": "acc1",
+    "date": "2023-11-08",
+    "description": "Grocery Store",
+    "amount": -115.75
+  },
+  {
+    "id": "txn8",
+    "accountId": "acc1",
+    "date": "2023-11-15",
+    "description": "Utility Bill",
+    "amount": -85.25
+  },
+  {
+    "id": "txn9",
+    "accountId": "acc1",
+    "date": "2023-11-22",
+    "description": "Gas Station",
+    "amount": -50.00
+  },
+  {
+    "id": "txn10",
+    "accountId": "acc1",
+    "date": "2023-11-28",
+    "description": "Online Shopping",
+    "amount": -145.00
+  },
+  {
+    "id": "txn11",
+    "accountId": "acc2",
+    "date": "2023-11-02",
+    "description": "ATM Withdrawal",
+    "amount": -200.00
+  },
+  {
+    "id": "txn12",
+    "accountId": "acc2",
+    "date": "2023-11-10",
+    "description": "Mobile Deposit",
+    "amount": 600.00
+  },
+  {
+    "id": "txn13",
+    "accountId": "acc3",
+    "date": "2023-11-05",
+    "description": "Amazon Purchase",
+    "amount": -59.99
+  },
+  {
+    "id": "txn14",
+    "accountId": "acc3",
+    "date": "2023-11-16",
+    "description": "Dinner Out",
+    "amount": -72.50
+  }
+]

src/layouts/BaseLayout.astro

@@ -0,0 +1,22 @@
+---
+interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+---
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="description" content="Astro description" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="generator" content={Astro.generator} />
+		<title>{title}</title>
+        <link rel="stylesheet" href="/src/styles/global.css">
+	</head>
+	<body>
+		<slot />
+	</body>
+</html>

src/pages/index.astro

@@ -1,16 +1,108 @@
 ---
+import BaseLayout from '../layouts/BaseLayout.astro';
+import Sidebar from '../components/Sidebar.astro';
+import MainContent from '../components/MainContent.astro';
+import type { Account, Transaction } from '../types';
+import { formatCurrency, formatDate } from '../utils';
 
+// Initialize with empty arrays until API integration
+const accounts: Account[] = [];
+const allTransactions: Transaction[] = [];
+
+// Create an empty initial account
+const initialAccount: Account = {
+    id: '',
+    name: 'No accounts available',
+    last4: '0000',
+    balance: 0
+};
+const initialTransactions: Transaction[] = [];
 ---
+<BaseLayout title="Bank Transactions Dashboard">
+	<div class="dashboard-layout">
+		<Sidebar accounts={accounts} initialAccount={initialAccount} />
+		<MainContent account={initialAccount} transactions={initialTransactions} />
+	</div>
+</BaseLayout>
 
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta name="viewport" content="width=device-width" />
-		<meta name="generator" content={Astro.generator} />
-		<title>Astro</title>
-	</head>
-	<body>
-		<h1>Astro</h1>
-	</body>
-</html>
+<script define:vars={{ allAccounts: accounts, allTransactions }}>
+    // Client-side script to handle account switching and updating the UI
+
+    // --- DOM Elements ---
+    const accountSelect = document.getElementById('account-select');
+    const currentAccountNameSpan = document.getElementById('current-account-name');
+    const accountBalanceSpan = document.getElementById('account-balance');
+    const transactionTableBody = document.getElementById('transaction-table-body');
+
+    // --- Helper Functions (mirror utils.ts for client-side use) ---
+    function formatCurrency(amount) {
+        return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(amount);
+    }
+
+    function formatDate(dateString) {
+        const date = new Date(dateString + 'T00:00:00'); // Ensure local date
+        return new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'short', day: 'numeric' }).format(date);
+    }
+
+    // --- Update UI Function ---
+    function updateUIForAccount(accountId) {
+        console.log("Updating UI for account:", accountId); // Debug log
+
+        const selectedAccount = allAccounts.find(acc => acc.id === accountId);
+        const accountTransactions = allTransactions
+            .filter(txn => txn.accountId === accountId)
+            .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()); // Sort desc
+
+        if (!selectedAccount || !transactionTableBody || !currentAccountNameSpan || !accountBalanceSpan) {
+            console.error("Required UI elements not found!");
+            return;
+        }
+
+        // Update header
+        currentAccountNameSpan.textContent = `${selectedAccount.name} (***${selectedAccount.last4})`;
+
+        // Update summary
+        accountBalanceSpan.textContent = formatCurrency(selectedAccount.balance);
+
+        // Update table
+        transactionTableBody.innerHTML = ''; // Clear existing rows
+
+        if (accountTransactions.length === 0) {
+            transactionTableBody.innerHTML = `<tr><td colspan="4" style="text-align: center; font-style: italic; color: #777;">No transactions found for this account.</td></tr>`;
+        } else {
+            accountTransactions.forEach(txn => {
+                const row = document.createElement('tr');
+                row.setAttribute('data-txn-id', txn.id);
+                row.innerHTML = `
+                    <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>
+                `;
+                transactionTableBody.appendChild(row);
+            });
+        }
+    }
+
+    // --- Event Listener ---
+    if (accountSelect) {
+        accountSelect.addEventListener('change', (event) => {
+            const selectedAccountId = event.target.value;
+            updateUIForAccount(selectedAccountId);
+        });
+    } else {
+        console.error("Account select element not found");
+    }
+
+    // --- Initial Load (Optional but good practice) ---
+    // The page already renders the initial state server-side,
+    // so no need to call updateUIForAccount() immediately unless
+    // there's a chance the JS loads before initial render completes fully.
+    // console.log("Account switcher script loaded.");
+
+</script>

src/styles/global.css

@@ -0,0 +1,234 @@
+/* Paste the CSS from style-alt3.css here */
+body {
+  font-family: system-ui, sans-serif;
+  line-height: 1.6;
+  margin: 0;
+  background-color: #f0f2f5;
+  color: #333;
+}
+
+.dashboard-layout {
+  display: flex;
+  min-height: 100vh;
+}
+
+.sidebar {
+  width: 280px;
+  background-color: #ffffff;
+  border-right: 1px solid #e0e0e0;
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
+  /* Ensure sidebar doesn't shrink */
+  flex-shrink: 0;
+}
+
+.sidebar-header h2 {
+  margin: 0 0 20px 0;
+  color: #0056b3;
+}
+.account-nav h3 {
+  margin-top: 0;
+  margin-bottom: 10px;
+  font-size: 1em;
+  color: #555;
+}
+.account-nav select {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  margin-bottom: 25px;
+  font-size: 1em;
+}
+
+.add-transaction-section {
+  margin-bottom: 25px;
+  border: 1px solid #e0e0e0;
+  border-radius: 5px;
+}
+.toggle-form-btn {
+  background-color: #f8f9fa;
+  color: #0056b3;
+  border: none;
+  border-bottom: 1px solid #e0e0e0;
+  padding: 12px 15px;
+  width: 100%;
+  text-align: left;
+  font-size: 1em;
+  cursor: pointer;
+  border-radius: 5px 5px 0 0;
+  font-weight: 500;
+  display: block; /* Ensure it takes full width */
+}
+.toggle-form-btn:hover {
+  background-color: #e9ecef;
+}
+
+.collapsible-form {
+  padding: 15px;
+  background-color: #fdfdfd;
+  transition: max-height 0.3s ease-out, opacity 0.3s ease-out,
+    padding 0.3s ease-out, border 0.3s ease-out;
+  overflow: hidden;
+  max-height: 500px;
+  opacity: 1;
+  border-top: 1px solid #e0e0e0; /* Start with border */
+}
+.collapsible-form.collapsed {
+  max-height: 0;
+  opacity: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  border-top-color: transparent; /* Hide border when collapsed */
+}
+.collapsible-form h4 {
+  margin-top: 0;
+  margin-bottom: 15px;
+  font-size: 1.1em;
+}
+.form-group {
+  margin-bottom: 12px;
+}
+.form-group label {
+  display: block;
+  margin-bottom: 4px;
+  font-size: 0.9em;
+  color: #555;
+}
+.form-group input[type="date"],
+.form-group input[type="text"],
+.form-group input[type="number"] {
+  width: calc(100% - 18px); /* Account for padding */
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  font-size: 0.95em;
+  box-sizing: border-box; /* Include padding in width calculation */
+}
+.collapsible-form button[type="submit"] {
+  background-color: #007bff;
+  color: white;
+  padding: 8px 15px;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+  margin-top: 5px;
+}
+.collapsible-form button[type="submit"]:hover {
+  background-color: #0056b3;
+}
+
+.account-summary {
+  margin-top: auto;
+  padding-top: 20px;
+  border-top: 1px solid #eee;
+}
+.account-summary h4 {
+  margin: 0 0 10px 0;
+  font-size: 1em;
+  color: #555;
+}
+.account-summary p {
+  margin: 5px 0;
+  font-size: 0.95em;
+}
+#account-balance {
+  font-weight: bold;
+  color: #333;
+}
+
+.main-content {
+  flex-grow: 1;
+  padding: 20px 30px;
+  overflow-y: auto;
+}
+.main-header {
+  margin-bottom: 20px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #eee;
+}
+.main-header h1 {
+  margin: 0;
+  font-size: 1.8em;
+  font-weight: 500;
+  color: #333;
+}
+#current-account-name {
+  font-style: italic;
+} /* Example styling */
+
+.transaction-list {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+th,
+td {
+  padding: 12px 15px;
+  text-align: left;
+  border-bottom: 1px solid #eee;
+}
+th {
+  background-color: #f8f9fa;
+  font-weight: 600;
+  font-size: 0.9em;
+  text-transform: uppercase;
+  color: #555;
+}
+tbody tr:hover {
+  background-color: #f1f3f5;
+}
+.amount-col {
+  text-align: right;
+}
+.amount-positive {
+  color: #198754;
+  font-weight: 500;
+}
+.amount-negative {
+  color: #dc3545;
+  font-weight: 500;
+}
+.action-btn {
+  padding: 4px 8px;
+  margin-right: 5px;
+  cursor: pointer;
+  border-radius: 3px;
+  border: 1px solid #ccc;
+  font-size: 0.85em;
+}
+.edit-btn {
+  background-color: #e9ecef;
+  color: #333;
+}
+.delete-btn {
+  background-color: #f8d7da;
+  color: #721c24;
+  border-color: #f5c6cb;
+}
+
+/* Basic Responsive */
+@media (max-width: 768px) {
+  .dashboard-layout {
+    flex-direction: column;
+  }
+  .sidebar {
+    width: 100%;
+    border-right: none;
+    border-bottom: 1px solid #e0e0e0;
+    max-height: none; /* Allow sidebar to grow */
+  }
+  .account-summary {
+    margin-top: 20px;
+  } /* Adjust spacing */
+  .main-content {
+    padding: 20px;
+  }
+}

src/types.ts

@@ -0,0 +1,14 @@
+export interface Account {
+  id: string;
+  name: string;
+  last4: string;
+  balance: number;
+}
+
+export interface Transaction {
+  id: string;
+  accountId: string;
+  date: string; // ISO date string e.g., "2023-11-28"
+  description: string;
+  amount: number;
+}

src/utils.ts

@@ -0,0 +1,17 @@
+// Basic currency formatting (USD example)
+export function formatCurrency(amount: number): string {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+  }).format(amount);
+}
+
+// Basic date formatting
+export function formatDate(dateString: string): string {
+  const date = new Date(dateString + "T00:00:00"); // Ensure correct parsing as local date
+  return new Intl.DateTimeFormat("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  }).format(date);
+}