julienfroidefond/fintrack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement transaction updating state management and loading indicators in transaction table for improved user feedback during updates

Browse Source
This commit is contained in:
Julien Froidefond
2025-12-08 08:29:58 +01:00
parent 5014051e10
commit 4224c8aa83
4 changed files with 150 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
components/transactions/transaction-table.tsx
View File

@@ -24,6 +24,7 @@ import {
ArrowUpDown,
Wand2,
Trash2,
Loader2,
} from "lucide-react";
import { DropdownMenuSeparator } from "@/components/ui/dropdown-menu";
import { cn } from "@/lib/utils";
@@ -50,6 +51,7 @@ interface TransactionTableProps {
onDelete: (id: string) => void;
formatCurrency: (amount: number) => string;
formatDate: (dateStr: string) => string;
updatingTransactionIds?: Set<string>;
}
const ROW_HEIGHT = 72; // Hauteur approximative d'une ligne
@@ -142,6 +144,7 @@ export function TransactionTable({
onDelete,
formatCurrency,
formatDate,
updatingTransactionIds = new Set(),
}: TransactionTableProps) {
const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
const parentRef = useRef<HTMLDivElement>(null);
@@ -161,7 +164,7 @@ export function TransactionTable({
setFocusedIndex(index);
onMarkReconciled(transactionId);
},
[onMarkReconciled],
[onMarkReconciled]
);
const handleKeyDown = useCallback(
@@ -190,7 +193,7 @@ export function TransactionTable({
}
}
},
[focusedIndex, transactions, onMarkReconciled, virtualizer],
[focusedIndex, transactions, onMarkReconciled, virtualizer]
);
useEffect(() => {
@@ -207,7 +210,7 @@ export function TransactionTable({
(accountId: string) => {
return accounts.find((a) => a.id === accountId);
},
[accounts],
[accounts]
);
const getCategory = useCallback(
@@ -215,7 +218,7 @@ export function TransactionTable({
if (!categoryId) return null;
return categories.find((c) => c.id === categoryId);
},
[categories],
[categories]
);
return (
@@ -266,7 +269,7 @@ export function TransactionTable({
className={cn(
"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",
isFocused && "bg-primary/10 ring-1 ring-primary/30"
)}
>
<div className="flex items-start justify-between gap-2">
@@ -294,7 +297,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 ? "+" : ""}
@@ -313,8 +316,13 @@ export function TransactionTable({
)}
<div
onClick={(e) => e.stopPropagation()}
className="flex-1"
className="flex-1 relative"
>
{updatingTransactionIds.has(transaction.id) && (
<div className="absolute inset-0 flex items-center justify-center bg-background/50 z-10 rounded">
<Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />
</div>
)}
<CategoryCombobox
categories={categories}
value={transaction.categoryId}
@@ -323,6 +331,9 @@ export function TransactionTable({
}
showBadge
align="start"
disabled={updatingTransactionIds.has(
transaction.id
)}
/>
</div>
<DropdownMenu>
@@ -354,7 +365,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);
@@ -463,7 +474,7 @@ export function TransactionTable({
className={cn(
"grid grid-cols-[auto_120px_2fr_150px_180px_140px_auto_auto] gap-0 border-b border-border hover:bg-muted/50 cursor-pointer",
transaction.isReconciled && "bg-emerald-500/5",
isFocused && "bg-primary/10 ring-1 ring-primary/30",
isFocused && "bg-primary/10 ring-1 ring-primary/30"
)}
>
<div className="p-3">
@@ -493,7 +504,15 @@ export function TransactionTable({
<div className="p-3 text-sm text-muted-foreground">
{account?.name || "-"}
</div>
<div className="p-3" onClick={(e) => e.stopPropagation()}>
<div
className="p-3 relative"
onClick={(e) => e.stopPropagation()}
>
{updatingTransactionIds.has(transaction.id) && (
<div className="absolute inset-0 flex items-center justify-center bg-background/50 z-10 rounded">
<Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />
</div>
)}
<CategoryCombobox
categories={categories}
value={transaction.categoryId}
@@ -502,6 +521,7 @@ export function TransactionTable({
}
showBadge
align="start"
disabled={updatingTransactionIds.has(transaction.id)}
/>
</div>
<div
@@ -509,7 +529,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 ? "+" : ""}
@@ -576,7 +596,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);