From bac8047dc79c6d9beac1301f51735f8df070dfd3 Mon Sep 17 00:00:00 2001 From: GitHub Copilot Date: Wed, 23 Apr 2025 21:28:41 -0400 Subject: [PATCH 01/16] #1 Add initial API route structure for accounts and transactions --- src/pages/api/accounts/[id]/index.ts | 0 src/pages/api/accounts/[id]/transactions/index.ts | 0 src/pages/api/accounts/index.ts | 0 src/pages/api/transactions/[id]/index.ts | 0 src/pages/api/transactions/index.ts | 0 5 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/pages/api/accounts/[id]/index.ts create mode 100644 src/pages/api/accounts/[id]/transactions/index.ts create mode 100644 src/pages/api/accounts/index.ts create mode 100644 src/pages/api/transactions/[id]/index.ts create mode 100644 src/pages/api/transactions/index.ts diff --git a/src/pages/api/accounts/[id]/index.ts b/src/pages/api/accounts/[id]/index.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/api/accounts/[id]/transactions/index.ts b/src/pages/api/accounts/[id]/transactions/index.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/api/accounts/index.ts b/src/pages/api/accounts/index.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/api/transactions/[id]/index.ts b/src/pages/api/transactions/[id]/index.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/api/transactions/index.ts b/src/pages/api/transactions/index.ts new file mode 100644 index 0000000..e69de29 From 070f4725467c060499072865846e54ecbcdfe5cf Mon Sep 17 00:00:00 2001 From: GitHub Copilot Date: Wed, 23 Apr 2025 21:29:09 -0400 Subject: [PATCH 02/16] #1 Add temporary data store for development --- src/data/store.ts | 41 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 src/data/store.ts diff --git a/src/data/store.ts b/src/data/store.ts new file mode 100644 index 0000000..f840b0a --- /dev/null +++ b/src/data/store.ts @@ -0,0 +1,41 @@ +import type { Account, Transaction } from '../types'; + +// Temporary in-memory store for development +export const accounts: Account[] = [ + { + id: '1', + name: 'Checking Account', + last4: '4321', + balance: 2500.00 + }, + { + id: '2', + name: 'Savings Account', + last4: '8765', + balance: 10000.00 + } +]; + +export const transactions: Transaction[] = [ + { + id: '1', + accountId: '1', + date: '2025-04-20', + description: 'Grocery Store', + amount: -75.50 + }, + { + id: '2', + accountId: '1', + date: '2025-04-21', + description: 'Salary Deposit', + amount: 3000.00 + }, + { + id: '3', + accountId: '2', + date: '2025-04-22', + description: 'Transfer to Savings', + amount: 500.00 + } +]; \ No newline at end of file From c0ac85ee7c25fa3333497450e36e9ea6788c80e0 Mon Sep 17 00:00:00 2001 From: GitHub Copilot Date: Wed, 23 Apr 2025 21:29:41 -0400 Subject: [PATCH 03/16] #1 Implement GET /api/accounts endpoint --- src/pages/api/accounts/index.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/pages/api/accounts/index.ts b/src/pages/api/accounts/index.ts index e69de29..471d4e6 100644 --- a/src/pages/api/accounts/index.ts +++ b/src/pages/api/accounts/index.ts @@ -0,0 +1,11 @@ +import type { APIRoute } from 'astro'; +import { accounts } from '../../../data/store'; + +export const GET: APIRoute = async () => { + return new Response(JSON.stringify(accounts), { + status: 200, + headers: { + 'Content-Type': 'application/json' + } + }); +}; \ No newline at end of file From 98b29ff58bd36cce424f6932fbc1a29931acc5e0 Mon Sep 17 00:00:00 2001 From: GitHub Copilot Date: Wed, 23 Apr 2025 21:33:53 -0400 Subject: [PATCH 04/16] #1 Update index.astro to fetch accounts from API endpoint --- src/pages/index.astro | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/pages/index.astro b/src/pages/index.astro index 19b86f1..dcf9acd 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -5,12 +5,12 @@ 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[] = []; +// Fetch accounts from API +const accountsResponse = await fetch('http://localhost:4321/api/accounts'); +const accounts: Account[] = await accountsResponse.json(); -// Create an empty initial account -const initialAccount: Account = { +// Initialize with first account or empty account if none exist +const initialAccount: Account = accounts[0] || { id: '', name: 'No accounts available', last4: '0000', @@ -25,7 +25,7 @@ const initialTransactions: Transaction[] = []; - \ No newline at end of file diff --git a/src/components/TransactionTable.astro b/src/components/TransactionTable.astro index f62b66b..98b7589 100644 --- a/src/components/TransactionTable.astro +++ b/src/components/TransactionTable.astro @@ -11,9 +11,9 @@ 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()); --- -
+
- + @@ -30,8 +30,8 @@ const sortedTransactions = [...transactions].sort((a, b) => new Date(b.date).get {formatCurrency(txn.amount)} ))} diff --git a/src/pages/api/transactions/[id]/index.ts b/src/pages/api/transactions/[id]/index.ts index 8efd606..dc9665b 100644 --- a/src/pages/api/transactions/[id]/index.ts +++ b/src/pages/api/transactions/[id]/index.ts @@ -6,10 +6,13 @@ export const PUT: APIRoute = async ({ request, params }) => { const { id } = params; if (!id) { - return new Response(JSON.stringify({ error: "Transaction ID is required" }), { - status: 400, - headers: { "Content-Type": "application/json" }, - }); + return new Response( + JSON.stringify({ error: "Transaction ID is required" }), + { + status: 400, + headers: { "Content-Type": "application/json" }, + } + ); } try { @@ -65,10 +68,13 @@ export const DELETE: APIRoute = async ({ params }) => { const { id } = params; if (!id) { - return new Response(JSON.stringify({ error: "Transaction ID is required" }), { - status: 400, - headers: { "Content-Type": "application/json" }, - }); + return new Response( + JSON.stringify({ error: "Transaction ID is required" }), + { + status: 400, + headers: { "Content-Type": "application/json" }, + } + ); } const transactionIndex = transactions.findIndex((t) => t.id === id); diff --git a/src/pages/index.astro b/src/pages/index.astro index dcf9acd..10b6aac 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -16,93 +16,244 @@ const initialAccount: Account = accounts[0] || { last4: '0000', balance: 0 }; -const initialTransactions: Transaction[] = []; + +// Fetch initial transactions if we have an account +let initialTransactions: Transaction[] = []; +if (initialAccount.id) { + const transactionsResponse = await fetch(`http://localhost:4321/api/accounts/${initialAccount.id}/transactions`); + initialTransactions = await transactionsResponse.json(); +} --- -
- - -
+
+ + +
- \ No newline at end of file diff --git a/src/styles/global.css b/src/styles/global.css index 80a8eef..08e85f1 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -232,3 +232,48 @@ tbody tr:hover { padding: 20px; } } + +/* Loading States */ +.loading { + opacity: 0.6; + pointer-events: none; + position: relative; +} + +.loading::after { + content: ""; + position: absolute; + top: 50%; + left: 50%; + width: 1.5em; + height: 1.5em; + margin: -0.75em 0 0 -0.75em; + border: 3px solid rgba(0, 123, 255, 0.2); + border-top-color: #007bff; + border-radius: 50%; + animation: spinner 0.6s linear infinite; +} + +@keyframes spinner { + to { + transform: rotate(360deg); + } +} + +.form-submit-btn { + position: relative; + min-width: 100px; +} + +.form-submit-btn.loading { + padding-right: 35px; +} + +.form-submit-btn.loading::after { + width: 1em; + height: 1em; + margin: -0.5em 0 0 0; + left: auto; + right: 10px; + border-width: 2px; +} From bb6bd754347b2417bfe3600d1564ec5f49139ba1 Mon Sep 17 00:00:00 2001 From: GitHub Copilot Date: Thu, 24 Apr 2025 08:37:33 -0400 Subject: [PATCH 11/16] Refactor index.astro to improve type safety, enhance UI update functions, and streamline event handling for transactions --- src/pages/index.astro | 82 +++++++++++++++++++++++-------------------- src/types/events.ts | 13 +++++++ 2 files changed, 57 insertions(+), 38 deletions(-) create mode 100644 src/types/events.ts diff --git a/src/pages/index.astro b/src/pages/index.astro index 10b6aac..b0036dc 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -3,6 +3,7 @@ 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 type { TransactionEventDetail } from '../types/events'; import { formatCurrency, formatDate } from '../utils'; // Fetch accounts from API @@ -32,23 +33,29 @@ if (initialAccount.id) {
Date Description - - + +