Merge branch 'main' into feature/database-integration

src/components/AccountSummary.tsx

@@ -1,12 +1,9 @@
 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';
 
-type AccountSummaryProps = {};
-
 export default function AccountSummary() {
   const currentAccountId = useStore(currentAccountIdStore);
   const refreshCounter = useStore(refreshKey);
@@ -16,7 +13,7 @@ export default function AccountSummary() {
 
   useEffect(() => {
     if (!currentAccountId) {
-      setAccount(null); // Clear account details if no account selected
+      setAccount(null);
       setError(null);
       setIsLoading(false);
       return;
@@ -40,30 +37,31 @@ export default function AccountSummary() {
       }
     };
 
-    fetchDetails();
-  }, [currentAccountId]);
+    // Add a small delay to ensure the API has processed any changes
+    const timeoutId = setTimeout(() => {
+      fetchDetails();
+    }, 100);
 
-  // Determine content based on state
-  let balanceContent: React.ReactNode;
+    return () => clearTimeout(timeoutId);
+  }, [currentAccountId, refreshCounter]); // Dependent on both account ID and refresh counter
+
+  let balanceContent = null;
   if (isLoading) {
     balanceContent = <span className="loading-inline">Loading...</span>;
   } else if (error) {
-    balanceContent = <span className="error-message">Error</span>;
+    balanceContent = <span className="error-message">Error: {error}</span>;
   } else if (account) {
     balanceContent = formatCurrency(account.balance);
   } else {
-    balanceContent = 'N/A'; // Or some placeholder
+    balanceContent = 'N/A';
   }
 
   return (
     <div className="account-summary">
       <h4>Account Summary</h4>
-      {/* Keep the ID for potential external manipulation if needed, though ideally not */}
       <p>
         Balance: <span id="account-balance">{balanceContent}</span>
       </p>
-      {/* Display error details if needed */}
-      {/* {error && <small className="error-message">{error}</small>} */}
     </div>
   );
 }