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

.astro/content-assets.mjs

@@ -0,0 +1 @@
+export default new Map();

.astro/content-modules.mjs

@@ -0,0 +1 @@
+export default new Map();

.astro/data-store.json

@@ -0,0 +1 @@
+[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.7.5","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[]},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"responsiveImages\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false},\"legacy\":{\"collections\":false}}"]

.astro/settings.json

@@ -0,0 +1,5 @@
+{
+	"_variables": {
+		"lastUpdateCheck": 1745454555490
+	}
+}

.astro/types.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

.github/copilot-instructions.md

@@ -0,0 +1,84 @@
+# GitHub Copilot Instructions for my-bank-app
+
+## Project Goal
+
+This project is a web user interface (UI) for a CRUD (Create, Read, Update, Delete) application managing financial transactions for multiple bank accounts. The UI follows a two-column dashboard layout (Alternative 3 from the design phase).
+
+## Technology Stack
+
+*   **Framework:** Astro (latest version)
+*   **Language:** TypeScript, JavaScript (client-side scripts), HTML, CSS
+*   **Styling:** Plain CSS (`src/styles/global.css`)
+*   **Data:** Currently using static JSON files (`src/data/accounts.json`, `src/data/transactions.json`). **The goal is to eventually replace this with a backend API.**
+
+## Current State & Key Features
+
+*   **Layout:** A two-column dashboard layout (`src/layouts/BaseLayout.astro`, `src/pages/index.astro`) is implemented.
+    *   **Sidebar:** (`src/components/Sidebar.astro`) Contains account selection dropdown and a collapsible section for adding new transactions. Includes an account summary section.
+    *   **Main Content:** (`src/components/MainContent.astro`) Displays the header with the current account name and the transaction list.
+*   **Components:** Separate Astro components exist for major UI sections (Sidebar, MainContent, TransactionTable, AddTransactionForm, AccountSummary).
+*   **Data Loading:** Initial data for accounts and transactions is loaded from static JSON files on the server-side (`src/pages/index.astro`).
+*   **Account Switching:** Selecting an account from the dropdown in the sidebar correctly updates the Main Content area (header, transaction table) and the Account Summary section using client-side JavaScript (`<script>` tag in `index.astro`).
+*   **Collapsible Form:** The "Add Transaction" section in the sidebar (`src/components/AddTransactionForm.astro`) can be expanded and collapsed using client-side JavaScript (`<script>` tag in `AddTransactionForm.astro`).
+*   **Basic Formatting:** Utility functions (`src/utils.ts`) exist for formatting currency and dates, used both server-side and client-side (mirrored in `index.astro` script).
+*   **Types:** Basic TypeScript types for `Account` and `Transaction` are defined in `src/types.ts`.
+
+## File Structure Overview
+
+*   `src/components/`: Reusable UI components.
+*   `src/data/`: Static JSON data files (temporary).
+*   `src/layouts/`: Base page layout(s).
+*   `src/pages/`: Astro pages (routes). `index.astro` is the main page.
+*   `src/styles/`: Global CSS styles.
+*   `src/types.ts`: TypeScript type definitions.
+*   `src/utils.ts`: Utility functions (formatting, etc.).
+*   `public/`: Static assets.
+
+## Next Steps & TODOs
+
+1.  **Backend API Integration:**
+    *   Define the expected API endpoints (e.g., `GET /api/accounts`, `GET /api/accounts/:id/transactions`, `POST /api/transactions`, `PUT /api/transactions/:id`, `DELETE /api/transactions/:id`).
+    *   Replace static JSON data fetching in `index.astro` with `fetch` calls to the backend API during server-side rendering (or potentially client-side, depending on strategy).
+    *   Update client-side logic to interact with the API for CRUD operations.
+2.  **Implement Create Functionality:**
+    *   Add client-side JavaScript to the `AddTransactionForm.astro` component (or enhance the script in `index.astro`) to handle form submission.
+    *   Prevent default form submission.
+    *   Perform basic client-side validation (required fields, numeric amount).
+    *   Send a `POST` request to the backend API with the new transaction data.
+    *   On success:
+        *   Clear the form.
+        *   Collapse the form (optional).
+        *   Refresh the transaction list for the current account (either by re-fetching or adding the new transaction to the client-side state).
+        *   Update the account balance display.
+    *   Handle API errors (display messages to the user).
+3.  **Implement Update Functionality:**
+    *   Add event listeners to the "Edit" buttons in `TransactionTable.astro`.
+    *   When "Edit" is clicked:
+        *   Expand the `AddTransactionForm` (or potentially use a modal).
+        *   Populate the form fields with the data from the selected transaction.
+        *   Change the form's submit button/logic to perform an update (`PUT` request to `/api/transactions/:id`).
+    *   On successful update:
+        *   Clear/reset the form.
+        *   Refresh the transaction list.
+        *   Update the account balance.
+    *   Handle API errors.
+4.  **Implement Delete Functionality:**
+    *   Add event listeners to the "Delete" buttons in `TransactionTable.astro`.
+    *   When "Delete" is clicked:
+        *   Show a confirmation dialog (e.g., `window.confirm`).
+        *   If confirmed, send a `DELETE` request to `/api/transactions/:id`.
+    *   On success:
+        *   Remove the transaction row from the UI.
+        *   Update the account balance.
+    *   Handle API errors.
+5.  **Refine State Management:** As complexity grows, consider a more robust client-side state management solution if passing data via `define:vars` and simple DOM manipulation becomes unwieldy (e.g., using Nano Stores or a more full-featured framework integration if needed later).
+6.  **Error Handling:** Implement more robust error handling and user feedback for API calls.
+7.  **Styling/UI Improvements:** Refine CSS, potentially add loading indicators, improve responsiveness further.
+
+## Code Style & Conventions
+
+*   Use TypeScript where possible.
+*   Keep components focused on specific tasks.
+*   Utilize utility functions for common tasks like formatting.
+*   Comment code where logic is complex.
+*   Prioritize semantic HTML and accessibility.

.gitignore

@@ -1,7 +1,6 @@
 # build output
 dist/
-# generated types
-.astro/
+.output/
 
 # dependencies
 node_modules/
@@ -12,7 +11,6 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 
-
 # environment variables
 .env
 .env.production
@@ -20,5 +18,8 @@ pnpm-debug.log*
 # macOS-specific files
 .DS_Store
 
-# jetbrains setting folder
+# IDE specific files
 .idea/
+.vscode/
+*.swp
+*.swo

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);
+}