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 {
-  // No props needed, data comes from store and fetch
-}
-
-export default function AccountSummary({}: AccountSummaryProps) {
+export default function AccountSummary() {
   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
-interface AddTransactionFormProps {}
-
-export default function AddTransactionForm({}: AddTransactionFormProps) {
+export default function AddTransactionForm() {
   // --- 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);
-      if (isNaN(amountNum)) {
+      const amountNum = Number.parseFloat(amount);
+      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
-        if (isNaN(dateObj.getTime())) {
+        const dateObj = new Date(`${date}T00:00:00`); // Treat input as local date
+        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({}: TransactionTableProps) {
+export default function TransactionTable() {
   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)}