refactor: Reorganize imports and improve code consistency across components and API routes

src/components/AccountSummary.astro

@@ -1,6 +1,6 @@
 ---
-import { formatCurrency } from '../utils';
 import type { Account } from '../types';
+import { formatCurrency } from '../utils';
 
 interface Props {
   account: Account;

src/components/AccountSummary.tsx

@@ -1,14 +1,11 @@
-import React, { useState, useEffect } from 'react';
 import { useStore } from '@nanostores/react';
+import type React from 'react';
+import { useEffect, useState } from 'react';
+import { currentAccountId as currentAccountIdStore, refreshKey } from '../stores/transactionStore';
 import type { Account } from '../types';
 import { formatCurrency } from '../utils';
-import { currentAccountId as currentAccountIdStore, refreshKey } from '../stores/transactionStore';
 
-interface AccountSummaryProps {
+export default function AccountSummary() {
-  // No props needed, data comes from store and fetch
-}
-
-export default function AccountSummary({}: AccountSummaryProps) {
   const currentAccountId = useStore(currentAccountIdStore);
   const refreshCounter = useStore(refreshKey);
   const [account, setAccount] = useState<Account | null>(null);
@@ -42,7 +39,7 @@ export default function AccountSummary({}: AccountSummaryProps) {
     };
 
     fetchDetails();
-  }, [currentAccountId, refreshCounter]);
+  }, [currentAccountId]);
 
   // Determine content based on state
   let balanceContent: React.ReactNode;

src/components/AddTransactionForm.tsx

@@ -1,18 +1,16 @@
-import React, { useState, useEffect } from 'react';
 import { useStore } from '@nanostores/react';
-import type { Transaction } from '../types';
+import type React from 'react';
+import { useEffect, useState } from 'react';
 // Import store atoms and actions
 import {
-  currentAccountId as currentAccountIdStore,
-  transactionToEdit as transactionToEditStore,
   cancelEditingTransaction,
+  currentAccountId as currentAccountIdStore,
   transactionSaved,
+  transactionToEdit as transactionToEditStore,
 } from '../stores/transactionStore';
+import type { Transaction } from '../types';
 
-// Remove props that now come from the store
+export default function AddTransactionForm() {
-interface AddTransactionFormProps {}
-
-export default function AddTransactionForm({}: AddTransactionFormProps) {
   // --- Read state from store ---
   const currentAccountId = useStore(currentAccountIdStore);
   const transactionToEdit = useStore(transactionToEditStore);
@@ -44,7 +42,7 @@ export default function AddTransactionForm({}: AddTransactionFormProps) {
       try {
         const dateObj = new Date(transactionToEdit.date);
         // Check if date is valid before formatting
-        if (!isNaN(dateObj.getTime())) {
+        if (!Number.isNaN(dateObj.getTime())) {
           // Directly format the date object (usually interpreted as UTC midnight)
           // into the YYYY-MM-DD format required by the input.
           // No timezone adjustment needed here.
@@ -87,8 +85,8 @@ export default function AddTransactionForm({}: AddTransactionFormProps) {
     if (!amount) {
       errors.push('Amount is required');
     } else {
-      const amountNum = parseFloat(amount);
+      const amountNum = Number.parseFloat(amount);
-      if (isNaN(amountNum)) {
+      if (Number.isNaN(amountNum)) {
         errors.push('Amount must be a valid number');
       } else if (amountNum === 0) {
         errors.push('Amount cannot be zero');
@@ -98,8 +96,8 @@ export default function AddTransactionForm({}: AddTransactionFormProps) {
       errors.push('Date is required');
     } else {
       try {
-        const dateObj = new Date(date + 'T00:00:00'); // Treat input as local date
+        const dateObj = new Date(`${date}T00:00:00`); // Treat input as local date
-        if (isNaN(dateObj.getTime())) {
+        if (Number.isNaN(dateObj.getTime())) {
           errors.push('Invalid date format');
         }
       } catch (e) {
@@ -134,7 +132,7 @@ export default function AddTransactionForm({}: AddTransactionFormProps) {
         accountId: currentAccountId,
         date: date, // Send as YYYY-MM-DD string
         description: description.trim(),
-        amount: parseFloat(amount),
+        amount: Number.parseFloat(amount),
       };
 
       const method = editingId ? 'PUT' : 'POST';

src/components/MainContent.astro

@@ -1,6 +1,6 @@
 ---
-import TransactionTable from './TransactionTable.tsx';
 import type { Account } from '../types';
+import TransactionTable from './TransactionTable.tsx';
 
 interface Props {
   account: Account;

src/components/Sidebar.astro

@@ -1,7 +1,7 @@
 ---
+import type { Account } from '../types';
 import AccountSummary from './AccountSummary.tsx'; // Import the React component instead of the Astro one
 import AddTransactionForm from './AddTransactionForm.tsx';
-import type { Account } from '../types';
 
 interface Props {
   accounts: Account[];

src/components/TransactionTable.astro

@@ -1,6 +1,6 @@
 ---
-import { formatCurrency, formatDate } from '../utils';
 import type { Transaction } from '../types';
+import { formatCurrency, formatDate } from '../utils';
 
 interface Props {
   transactions: Transaction[];
@@ -10,7 +10,7 @@ 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()
+  (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime(),
 );
 
 // TODO: UI/UX Improvements

src/components/TransactionTable.tsx

@@ -1,17 +1,15 @@
-import React, { useState, useEffect } from 'react';
 import { useStore } from '@nanostores/react';
+import React, { useState, useEffect } from 'react';
+import {
+  currentAccountId as currentAccountIdStore,
+  refreshKey,
+  startEditingTransaction,
+  triggerRefresh,
+} from '../stores/transactionStore';
 import type { Transaction } from '../types';
 import { formatCurrency, formatDate } from '../utils';
-import {
-  startEditingTransaction,
-  currentAccountId as currentAccountIdStore,
-  triggerRefresh,
-  refreshKey,
-} from '../stores/transactionStore';
 
-interface TransactionTableProps {}
+export default function TransactionTable() {
-
-export default function TransactionTable({}: TransactionTableProps) {
   const currentAccountId = useStore(currentAccountIdStore);
   const refreshCounter = useStore(refreshKey);
 
@@ -44,10 +42,10 @@ export default function TransactionTable({}: TransactionTableProps) {
     };
 
     fetchTransactions();
-  }, [currentAccountId, refreshCounter]);
+  }, [currentAccountId]);
 
   const sortedTransactions = [...transactions].sort(
-    (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
+    (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime(),
   );
 
   const handleDelete = async (txnId: string) => {
@@ -76,7 +74,7 @@ export default function TransactionTable({}: TransactionTableProps) {
       console.log(`Transaction ${txnId} deleted successfully.`);
 
       setTransactions((currentTransactions) =>
-        currentTransactions.filter((txn) => txn.id !== txnId)
+        currentTransactions.filter((txn) => txn.id !== txnId),
       );
 
       triggerRefresh();
@@ -139,6 +137,7 @@ export default function TransactionTable({}: TransactionTableProps) {
         </td>
         <td>
           <button
+            type="button"
             className="action-btn edit-btn"
             title="Edit transaction"
             onClick={() => handleEdit(txn)}
@@ -146,6 +145,7 @@ export default function TransactionTable({}: TransactionTableProps) {
             Edit
           </button>
           <button
+            type="button"
             className="action-btn delete-btn"
             title="Delete transaction"
             onClick={() => handleDelete(txn.id)}

src/pages/api/transactions/[id]/index.ts

@@ -1,5 +1,5 @@
 import type { APIRoute } from 'astro';
-import { transactions, accounts } from '../../../../data/store';
+import { accounts, transactions } from '../../../../data/store';
 import type { Transaction } from '../../../../types';
 
 export const PUT: APIRoute = async ({ request, params }) => {

src/pages/api/transactions/index.ts

@@ -11,7 +11,7 @@
  */
 
 import type { APIRoute } from 'astro';
-import { transactions, accounts } from '../../../data/store';
+import { accounts, transactions } from '../../../data/store';
 import type { Transaction } from '../../../types';
 
 /**

src/pages/index.astro

@@ -1,7 +1,7 @@
 ---
-import BaseLayout from '../layouts/BaseLayout.astro';
-import Sidebar from '../components/Sidebar.astro';
 import MainContent from '../components/MainContent.astro';
+import Sidebar from '../components/Sidebar.astro';
+import BaseLayout from '../layouts/BaseLayout.astro';
 import type { Account, Transaction } from '../types';
 
 export interface Props {
@@ -28,7 +28,7 @@ const initialAccount: Account = accounts[0] || {
 let initialTransactions: Transaction[] = [];
 if (initialAccount.id) {
   const transactionsResponse = await fetch(
-    `${baseUrl}/api/accounts/${initialAccount.id}/transactions`
+    `${baseUrl}/api/accounts/${initialAccount.id}/transactions`,
   );
   initialTransactions = await transactionsResponse.json();
 }

src/test/accounts.test.ts

@@ -1,13 +1,14 @@
-import { describe, it, expect } from 'vitest';
+import type { APIContext } from 'astro';
-import { GET as listAccounts } from '../pages/api/accounts/index';
+import { describe, expect, it } from 'vitest';
-import { GET as getAccount } from '../pages/api/accounts/[id]/index';
+import { listAccounts } from '../pages/api/accounts';
-import { GET as listTransactions } from '../pages/api/accounts/[id]/transactions/index';
+import { getAccount } from '../pages/api/accounts/[id]';
+import { listTransactions } from '../pages/api/accounts/[id]/transactions';
 import { createMockAPIContext } from './setup';
 
 describe('Accounts API', () => {
   describe('GET /api/accounts', () => {
     it('should return all accounts', async () => {
-      const response = await listAccounts(createMockAPIContext() as any);
+      const response = await listAccounts(createMockAPIContext());
       const accounts = await response.json();
 
       expect(response.status).toBe(200);
@@ -19,7 +20,9 @@ describe('Accounts API', () => {
 
   describe('GET /api/accounts/:id', () => {
     it('should return a specific account', async () => {
-      const response = await getAccount(createMockAPIContext({ params: { id: '1' } }) as any);
+      const response = await getAccount(
+        createMockAPIContext({ params: { id: '1' } }) as APIContext,
+      );
       const account = await response.json();
 
       expect(response.status).toBe(200);
@@ -28,7 +31,9 @@ describe('Accounts API', () => {
     });
 
     it('should return 404 for non-existent account', async () => {
-      const response = await getAccount(createMockAPIContext({ params: { id: '999' } }) as any);
+      const response = await getAccount(
+        createMockAPIContext({ params: { id: '999' } }) as APIContext,
+      );
       const error = await response.json();
 
       expect(response.status).toBe(404);
@@ -38,7 +43,9 @@ describe('Accounts API', () => {
 
   describe('GET /api/accounts/:id/transactions', () => {
     it('should return transactions for an account', async () => {
-      const response = await listTransactions(createMockAPIContext({ params: { id: '1' } }) as any);
+      const response = await listTransactions(
+        createMockAPIContext({ params: { id: '1' } }) as APIContext,
+      );
       const transactions = await response.json();
 
       expect(response.status).toBe(200);
@@ -48,7 +55,7 @@ describe('Accounts API', () => {
 
     it('should return empty array for account with no transactions', async () => {
       const response = await listTransactions(
-        createMockAPIContext({ params: { id: '999' } }) as any
+        createMockAPIContext({ params: { id: '999' } }) as APIContext,
       );
       const transactions = await response.json();
 

src/test/setup.ts

@@ -1,29 +1,20 @@
+import type { APIContext } from 'astro';
 import { beforeEach } from 'vitest';
 import { accounts, transactions } from '../data/store';
-import type { APIContext } from 'astro';
 
 // Create a mock APIContext factory
-export function createMockAPIContext<T extends Record<string, string> = Record<string, string>>({
+export function createMockAPIContext(options: Partial<APIContext> = {}): APIContext {
-  params = {} as T,
-} = {}): Partial<APIContext> {
   return {
-    params,
     props: {},
-    request: new Request('http://localhost:4321'),
-    site: new URL('http://localhost:4321'),
-    generator: 'test',
     url: new URL('http://localhost:4321'),
     clientAddress: '127.0.0.1',
-    cookies: new Headers() as any, // Cast Headers to cookies as we don't need cookie functionality in tests
+    cookies: new Headers(),
     redirect: () => new Response(),
     locals: {},
-    preferredLocale: undefined,
+    site: new URL('http://localhost:4321'),
-    preferredLocaleList: [],
+    generator: 'test',
-    currentLocale: undefined,
+    params: {},
-    routePattern: '/api/[...path]',
+    ...options,
-    originPathname: '/api',
-    getActionResult: () => undefined,
-    isPrerendered: false,
   };
 }
 
@@ -43,7 +34,7 @@ beforeEach(() => {
       name: 'Test Savings',
       last4: '5678',
       balance: 5000.0,
-    }
+    },
   );
 
   // Reset transactions to initial state
@@ -62,6 +53,6 @@ beforeEach(() => {
       date: '2025-04-24',
       description: 'Test Transaction 2',
       amount: 100.0,
-    }
+    },
   );
 });

src/test/transactions.test.ts

@@ -7,13 +7,12 @@
 // - Add load testing for API endpoints
 // - Implement test data factories
 
-import { describe, it, expect } from 'vitest';
+import type { APIContext } from 'astro';
-import { POST as createTransaction } from '../pages/api/transactions/index';
+import { describe, expect, it } from 'vitest';
-import {
-  PUT as updateTransaction,
-  DELETE as deleteTransaction,
-} from '../pages/api/transactions/[id]/index';
 import { accounts, transactions } from '../data/store';
+import { createTransaction } from '../pages/api/transactions';
+import { updateTransaction } from '../pages/api/transactions/[id]';
+import { DELETE as deleteTransaction } from '../pages/api/transactions/[id]/index';
 import type { Transaction } from '../types';
 import { createMockAPIContext } from './setup';
 
@@ -28,7 +27,7 @@ describe('Transactions API', () => {
         amount: -25.0,
       };
 
-      const ctx = createMockAPIContext() as any;
+      const ctx = createMockAPIContext() as APIContext;
       ctx.request = new Request('http://localhost:4321/api/transactions', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
@@ -50,7 +49,7 @@ describe('Transactions API', () => {
         // Missing required fields
       };
 
-      const ctx = createMockAPIContext() as any;
+      const ctx = createMockAPIContext() as APIContext;
       ctx.request = new Request('http://localhost:4321/api/transactions', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
@@ -72,7 +71,7 @@ describe('Transactions API', () => {
         amount: 100,
       };
 
-      const ctx = createMockAPIContext() as any;
+      const ctx = createMockAPIContext() as APIContext;
       ctx.request = new Request('http://localhost:4321/api/transactions', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
@@ -87,7 +86,7 @@ describe('Transactions API', () => {
     });
 
     it('should reject invalid request body', async () => {
-      const ctx = createMockAPIContext() as any;
+      const ctx = createMockAPIContext() as APIContext;
       ctx.request = new Request('http://localhost:4321/api/transactions', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
@@ -111,7 +110,7 @@ describe('Transactions API', () => {
         amount: -75.0,
       };
 
-      const ctx = createMockAPIContext({ params: { id: '1' } }) as any;
+      const ctx = createMockAPIContext({ params: { id: '1' } }) as APIContext;
       ctx.request = new Request('http://localhost:4321/api/transactions/1', {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
@@ -128,7 +127,7 @@ describe('Transactions API', () => {
     });
 
     it('should reject update with invalid request body', async () => {
-      const ctx = createMockAPIContext({ params: { id: '1' } }) as any;
+      const ctx = createMockAPIContext({ params: { id: '1' } }) as APIContext;
       ctx.request = new Request('http://localhost:4321/api/transactions/1', {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
@@ -143,7 +142,7 @@ describe('Transactions API', () => {
     });
 
     it('should reject update for non-existent transaction', async () => {
-      const ctx = createMockAPIContext({ params: { id: '999' } }) as any;
+      const ctx = createMockAPIContext({ params: { id: '999' } }) as APIContext;
       ctx.request = new Request('http://localhost:4321/api/transactions/999', {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
@@ -161,7 +160,7 @@ describe('Transactions API', () => {
       // First update the transaction to point to a non-existent account
       transactions[0].accountId = '999';
 
-      const ctx = createMockAPIContext({ params: { id: '1' } }) as any;
+      const ctx = createMockAPIContext({ params: { id: '1' } }) as APIContext;
       ctx.request = new Request('http://localhost:4321/api/transactions/1', {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
@@ -187,7 +186,7 @@ describe('Transactions API', () => {
       const oldTransaction = transactions.find((t) => t.id === '1');
       if (!oldTransaction) throw new Error('Test transaction not found');
 
-      const ctx = createMockAPIContext({ params: { id: '1' } }) as any;
+      const ctx = createMockAPIContext({ params: { id: '1' } }) as APIContext;
       ctx.request = new Request('http://localhost:4321/api/transactions/1', {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
@@ -211,7 +210,7 @@ describe('Transactions API', () => {
     });
 
     it('should reject update without transaction ID', async () => {
-      const ctx = createMockAPIContext() as any;
+      const ctx = createMockAPIContext() as APIContext;
       ctx.request = new Request('http://localhost:4321/api/transactions/undefined', {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
@@ -230,7 +229,7 @@ describe('Transactions API', () => {
       const savedAccounts = [...accounts];
       accounts.length = 0;
 
-      const ctx = createMockAPIContext({ params: { id: '1' } }) as any;
+      const ctx = createMockAPIContext({ params: { id: '1' } }) as APIContext;
       ctx.request = new Request('http://localhost:4321/api/transactions/1', {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
@@ -248,7 +247,7 @@ describe('Transactions API', () => {
     });
 
     it("should reject update when new account doesn't exist", async () => {
-      const ctx = createMockAPIContext({ params: { id: '1' } }) as any;
+      const ctx = createMockAPIContext({ params: { id: '1' } }) as APIContext;
       ctx.request = new Request('http://localhost:4321/api/transactions/1', {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
@@ -273,7 +272,7 @@ describe('Transactions API', () => {
       const initialCount = transactions.length;
 
       const response = await deleteTransaction(
-        createMockAPIContext({ params: { id: '1' } }) as any
+        createMockAPIContext({ params: { id: '1' } }) as APIContext,
       );
 
       expect(response.status).toBe(204);
@@ -282,7 +281,7 @@ describe('Transactions API', () => {
     });
 
     it('should reject delete without transaction ID', async () => {
-      const response = await deleteTransaction(createMockAPIContext() as any);
+      const response = await deleteTransaction(createMockAPIContext() as APIContext);
 
       const error = await response.json();
 
@@ -292,7 +291,7 @@ describe('Transactions API', () => {
 
     it('should return 404 for non-existent transaction', async () => {
       const response = await deleteTransaction(
-        createMockAPIContext({ params: { id: '999' } }) as any
+        createMockAPIContext({ params: { id: '999' } }) as APIContext,
       );
 
       const error = await response.json();
@@ -313,7 +312,7 @@ describe('Transactions API', () => {
       transactions.push(testTransaction);
 
       const response = await deleteTransaction(
-        createMockAPIContext({ params: { id: 'test-delete' } }) as any
+        createMockAPIContext({ params: { id: 'test-delete' } }) as APIContext,
       );
 
       const error = await response.json();

src/utils.ts

@@ -8,7 +8,7 @@ export function formatCurrency(amount: number): string {
 
 // Basic date formatting
 export function formatDate(dateString: string): string {
-  const date = new Date(dateString + 'T00:00:00'); // Ensure correct parsing as local date
+  const date = new Date(`${dateString}T00:00:00`); // Ensure correct parsing as local date
   return new Intl.DateTimeFormat('en-US', {
     year: 'numeric',
     month: 'short',