diff --git a/app/transactions/page.tsx b/app/transactions/page.tsx index 979189b..b2ee4d9 100644 --- a/app/transactions/page.tsx +++ b/app/transactions/page.tsx @@ -1,15 +1,8 @@ "use client"; -import { useCallback, useState } from "react"; +import { useCallback, useMemo } from "react"; import { PageLayout, PageHeader } from "@/components/layout"; -import { - RefreshCw, - Maximize2, - Minimize2, - Receipt, - Euro, - ChevronDown, -} from "lucide-react"; +import { RefreshCw, Receipt, Euro, ChevronDown } from "lucide-react"; import { TransactionFilters, TransactionBulkActions, @@ -30,12 +23,6 @@ import { CollapsibleTrigger, } from "@/components/ui/collapsible"; import { Upload } from "lucide-react"; -import { - Dialog, - DialogContent, - DialogHeader, - DialogTitle, -} from "@/components/ui/dialog"; import { useTransactionsPage } from "@/hooks/use-transactions-page"; import { useTransactionMutations } from "@/hooks/use-transaction-mutations"; import { useTransactionRules } from "@/hooks/use-transaction-rules"; @@ -43,7 +30,6 @@ import { useTransactionsChartData } from "@/hooks/use-transactions-chart-data"; export default function TransactionsPage() { const queryClient = useQueryClient(); - const [isFullscreen, setIsFullscreen] = useState(false); // Main page state and logic const { @@ -147,7 +133,11 @@ export default function TransactionsPage() { [handleBulkSetCategory, selectedTransactions, clearSelection] ); - const filteredTransactions = transactionsData?.transactions || []; + // Stabilize transactions reference to prevent unnecessary re-renders + const filteredTransactions = useMemo( + () => transactionsData?.transactions || [], + [transactionsData?.transactions] + ); const totalTransactions = transactionsData?.total || 0; const hasMore = transactionsData?.hasMore || false; const uncategorizedCount = transactionsData?.uncategorizedCount || 0; @@ -310,19 +300,6 @@ export default function TransactionsPage() { ) : ( <> -
-
- -
- )} - - - -
- Transactions - -
-
-
-
- -
- -
- -
-
-
-
- { @@ -215,7 +215,7 @@ export function TransactionTable({ (accountId: string) => { return accounts.find((a) => a.id === accountId); }, - [accounts], + [accounts] ); const getCategory = useCallback( @@ -223,7 +223,7 @@ export function TransactionTable({ if (!categoryId) return null; return categories.find((c) => c.id === categoryId); }, - [categories], + [categories] ); return ( @@ -281,7 +281,7 @@ export function TransactionTable({ "p-4 space-y-3 hover:bg-muted/50 cursor-pointer border-b border-border", transaction.isReconciled && "bg-emerald-500/5", isFocused && "bg-primary/10 ring-1 ring-primary/30", - isDuplicate && "shadow-sm", + isDuplicate && "shadow-sm" )} >
@@ -323,7 +323,7 @@ export function TransactionTable({ "font-semibold tabular-nums text-sm md:text-base shrink-0", transaction.amount >= 0 ? "text-emerald-600" - : "text-red-600", + : "text-red-600" )} > {transaction.amount >= 0 ? "+" : ""} @@ -358,7 +358,7 @@ export function TransactionTable({ showBadge align="start" disabled={updatingTransactionIds.has( - transaction.id, + transaction.id )} />
@@ -391,7 +391,7 @@ export function TransactionTable({ e.stopPropagation(); if ( confirm( - `Êtes-vous sûr de vouloir supprimer cette transaction ?\n\n${transaction.description}\n${formatCurrency(transaction.amount)}`, + `Êtes-vous sûr de vouloir supprimer cette transaction ?\n\n${transaction.description}\n${formatCurrency(transaction.amount)}` ) ) { onDelete(transaction.id); @@ -464,7 +464,7 @@ export function TransactionTable({
- {/* Body virtualisé */} + {/* Body virtualisé ou non selon le mode */}
e.stopPropagation()}> @@ -576,7 +576,7 @@ export function TransactionTable({ "p-3 text-right font-semibold tabular-nums", transaction.amount >= 0 ? "text-emerald-600" - : "text-red-600", + : "text-red-600" )} > {transaction.amount >= 0 ? "+" : ""} @@ -643,7 +643,7 @@ export function TransactionTable({ e.stopPropagation(); if ( confirm( - `Êtes-vous sûr de vouloir supprimer cette transaction ?\n\n${transaction.description}\n${formatCurrency(transaction.amount)}`, + `Êtes-vous sûr de vouloir supprimer cette transaction ?\n\n${transaction.description}\n${formatCurrency(transaction.amount)}` ) ) { onDelete(transaction.id);