From 6368b5c62c35265a9e00440b2a787ede12f370cb Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 7 Dec 2025 01:33:45 +0000
Subject: [PATCH] refactor(frontend): Address code review feedback on focus and
 currency handling.

Co-authored-by: elisiariocouto <818914+elisiariocouto@users.noreply.github.com>
---
 frontend/src/components/TransactionsTable.tsx |  9 +++++---
 frontend/src/components/filters/FilterBar.tsx | 22 +++++++++----------
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/TransactionsTable.tsx b/frontend/src/components/TransactionsTable.tsx
index bf624b2..d65837e 100644
--- a/frontend/src/components/TransactionsTable.tsx
+++ b/frontend/src/components/TransactionsTable.tsx
@@ -366,6 +366,9 @@ export default function TransactionsTable() {
       .reduce((sum: number, t: Transaction) => sum + t.transaction_value, 0)
   );
 
+  // Get currency from first transaction, fallback to EUR
+  const displayCurrency = transactions.length > 0 ? transactions[0].transaction_currency : "EUR";
+
   const stats = {
     totalCount: pagination?.total || 0,
     pageCount: transactions.length,
@@ -411,7 +414,7 @@ export default function TransactionsTable() {
                   Income
                 </p>
                 <p className="text-2xl font-bold text-green-600 mt-1">
-                  +{formatCurrency(stats.totalIncome, transactions[0]?.transaction_currency || "EUR")}
+                  +{formatCurrency(stats.totalIncome, displayCurrency)}
                 </p>
               </div>
               <TrendingUp className="h-8 w-8 text-green-600 opacity-50" />
@@ -425,7 +428,7 @@ export default function TransactionsTable() {
                   Expenses
                 </p>
                 <p className="text-2xl font-bold text-red-600 mt-1">
-                  -{formatCurrency(stats.totalExpenses, transactions[0]?.transaction_currency || "EUR")}
+                  -{formatCurrency(stats.totalExpenses, displayCurrency)}
                 </p>
               </div>
               <TrendingDown className="h-8 w-8 text-red-600 opacity-50" />
@@ -444,7 +447,7 @@ export default function TransactionsTable() {
                   }`}
                 >
                   {stats.netChange >= 0 ? "+" : ""}
-                  {formatCurrency(stats.netChange, transactions[0]?.transaction_currency || "EUR")}
+                  {formatCurrency(stats.netChange, displayCurrency)}
                 </p>
               </div>
               {stats.netChange >= 0 ? (
diff --git a/frontend/src/components/filters/FilterBar.tsx b/frontend/src/components/filters/FilterBar.tsx
index 2b60ab4..1d83c45 100644
--- a/frontend/src/components/filters/FilterBar.tsx
+++ b/frontend/src/components/filters/FilterBar.tsx
@@ -32,24 +32,22 @@ export function FilterBar({
   className,
 }: FilterBarProps) {
   const searchInputRef = useRef<HTMLInputElement>(null);
-  const wasFocused = useRef(false);
 
-  // Track if search input was focused before re-render
+  // Maintain focus on search input during re-renders
   useEffect(() => {
     const currentInput = searchInputRef.current;
     if (!currentInput) return;
 
-    // Check if the input was focused before the effect runs
-    if (document.activeElement === currentInput) {
-      wasFocused.current = true;
+    // Only restore focus if the search input had focus before
+    const wasFocused = document.activeElement === currentInput;
+    
+    // Use requestAnimationFrame to restore focus after React finishes rendering
+    if (wasFocused && document.activeElement !== currentInput) {
+      requestAnimationFrame(() => {
+        currentInput.focus();
+      });
     }
-
-    // If it was focused, restore focus after render
-    if (wasFocused.current && document.activeElement !== currentInput) {
-      currentInput.focus();
-      wasFocused.current = false;
-    }
-  });
+  }, [isSearchLoading]);
 
   const hasActiveFilters =
     filterState.searchTerm ||