feat: add duplicate transaction detection and display in transactions page, enhancing user experience with visual indicators for duplicates
This commit is contained in:
20
app/api/banking/duplicates/ids/route.ts
Normal file
20
app/api/banking/duplicates/ids/route.ts
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
import { NextResponse } from "next/server";
|
||||||
|
import { transactionService } from "@/services/transaction.service";
|
||||||
|
import { requireAuth } from "@/lib/auth-utils";
|
||||||
|
|
||||||
|
export async function GET() {
|
||||||
|
const authError = await requireAuth();
|
||||||
|
if (authError) return authError;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const duplicateIds = await transactionService.getDuplicateIds();
|
||||||
|
return NextResponse.json({ duplicateIds: Array.from(duplicateIds) });
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error finding duplicate IDs:", error);
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: "Failed to find duplicate IDs" },
|
||||||
|
{ status: 500 },
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@@ -15,6 +15,7 @@ import {
|
|||||||
useBankingMetadata,
|
useBankingMetadata,
|
||||||
useTransactions,
|
useTransactions,
|
||||||
getTransactionsQueryKey,
|
getTransactionsQueryKey,
|
||||||
|
useDuplicateIds,
|
||||||
} from "@/lib/hooks";
|
} from "@/lib/hooks";
|
||||||
import { updateCategory } from "@/lib/store-db";
|
import { updateCategory } from "@/lib/store-db";
|
||||||
import { useQueryClient } from "@tanstack/react-query";
|
import { useQueryClient } from "@tanstack/react-query";
|
||||||
@@ -65,24 +66,25 @@ export default function TransactionsPage() {
|
|||||||
const [showReconciled, setShowReconciled] = useState<string>("all");
|
const [showReconciled, setShowReconciled] = useState<string>("all");
|
||||||
const [period, setPeriod] = useState<Period>("all");
|
const [period, setPeriod] = useState<Period>("all");
|
||||||
const [customStartDate, setCustomStartDate] = useState<Date | undefined>(
|
const [customStartDate, setCustomStartDate] = useState<Date | undefined>(
|
||||||
undefined,
|
undefined
|
||||||
);
|
);
|
||||||
const [customEndDate, setCustomEndDate] = useState<Date | undefined>(
|
const [customEndDate, setCustomEndDate] = useState<Date | undefined>(
|
||||||
undefined,
|
undefined
|
||||||
);
|
);
|
||||||
const [isCustomDatePickerOpen, setIsCustomDatePickerOpen] = useState(false);
|
const [isCustomDatePickerOpen, setIsCustomDatePickerOpen] = useState(false);
|
||||||
const [sortField, setSortField] = useState<SortField>("date");
|
const [sortField, setSortField] = useState<SortField>("date");
|
||||||
const [sortOrder, setSortOrder] = useState<SortOrder>("desc");
|
const [sortOrder, setSortOrder] = useState<SortOrder>("desc");
|
||||||
const [selectedTransactions, setSelectedTransactions] = useState<Set<string>>(
|
const [selectedTransactions, setSelectedTransactions] = useState<Set<string>>(
|
||||||
new Set(),
|
new Set()
|
||||||
);
|
);
|
||||||
const [ruleDialogOpen, setRuleDialogOpen] = useState(false);
|
const [ruleDialogOpen, setRuleDialogOpen] = useState(false);
|
||||||
const [ruleTransaction, setRuleTransaction] = useState<Transaction | null>(
|
const [ruleTransaction, setRuleTransaction] = useState<Transaction | null>(
|
||||||
null,
|
null
|
||||||
);
|
);
|
||||||
const [updatingTransactionIds, setUpdatingTransactionIds] = useState<
|
const [updatingTransactionIds, setUpdatingTransactionIds] = useState<
|
||||||
Set<string>
|
Set<string>
|
||||||
>(new Set());
|
>(new Set());
|
||||||
|
const [showDuplicates, setShowDuplicates] = useState(false);
|
||||||
|
|
||||||
// Get start date based on period
|
// Get start date based on period
|
||||||
const startDate = useMemo(() => {
|
const startDate = useMemo(() => {
|
||||||
@@ -164,6 +166,9 @@ export default function TransactionsPage() {
|
|||||||
invalidate: invalidateTransactions,
|
invalidate: invalidateTransactions,
|
||||||
} = useTransactions(transactionParams, !!metadata);
|
} = useTransactions(transactionParams, !!metadata);
|
||||||
|
|
||||||
|
// Fetch duplicate IDs
|
||||||
|
const { data: duplicateIds = new Set<string>() } = useDuplicateIds();
|
||||||
|
|
||||||
// For filter comboboxes, we'll use empty arrays for now
|
// For filter comboboxes, we'll use empty arrays for now
|
||||||
// They can be enhanced later with separate queries if needed
|
// They can be enhanced later with separate queries if needed
|
||||||
const transactionsForAccountFilter: Transaction[] = [];
|
const transactionsForAccountFilter: Transaction[] = [];
|
||||||
@@ -182,7 +187,7 @@ export default function TransactionsPage() {
|
|||||||
// Use transactions from current page to find similar ones
|
// Use transactions from current page to find similar ones
|
||||||
const normalizedDesc = normalizeDescription(ruleTransaction.description);
|
const normalizedDesc = normalizeDescription(ruleTransaction.description);
|
||||||
const similarTransactions = transactionsData.transactions.filter(
|
const similarTransactions = transactionsData.transactions.filter(
|
||||||
(t) => normalizeDescription(t.description) === normalizedDesc,
|
(t) => normalizeDescription(t.description) === normalizedDesc
|
||||||
);
|
);
|
||||||
|
|
||||||
if (similarTransactions.length === 0) return null;
|
if (similarTransactions.length === 0) return null;
|
||||||
@@ -193,7 +198,7 @@ export default function TransactionsPage() {
|
|||||||
transactions: similarTransactions,
|
transactions: similarTransactions,
|
||||||
totalAmount: similarTransactions.reduce((sum, t) => sum + t.amount, 0),
|
totalAmount: similarTransactions.reduce((sum, t) => sum + t.amount, 0),
|
||||||
suggestedKeyword: suggestKeyword(
|
suggestedKeyword: suggestKeyword(
|
||||||
similarTransactions.map((t) => t.description),
|
similarTransactions.map((t) => t.description)
|
||||||
),
|
),
|
||||||
};
|
};
|
||||||
}, [ruleTransaction, transactionsData]);
|
}, [ruleTransaction, transactionsData]);
|
||||||
@@ -209,7 +214,7 @@ export default function TransactionsPage() {
|
|||||||
|
|
||||||
// 1. Add keyword to category
|
// 1. Add keyword to category
|
||||||
const category = metadata.categories.find(
|
const category = metadata.categories.find(
|
||||||
(c: { id: string }) => c.id === ruleData.categoryId,
|
(c: { id: string }) => c.id === ruleData.categoryId
|
||||||
);
|
);
|
||||||
if (!category) {
|
if (!category) {
|
||||||
throw new Error("Category not found");
|
throw new Error("Category not found");
|
||||||
@@ -217,7 +222,7 @@ export default function TransactionsPage() {
|
|||||||
|
|
||||||
// Check if keyword already exists
|
// Check if keyword already exists
|
||||||
const keywordExists = category.keywords.some(
|
const keywordExists = category.keywords.some(
|
||||||
(k: string) => k.toLowerCase() === ruleData.keyword.toLowerCase(),
|
(k: string) => k.toLowerCase() === ruleData.keyword.toLowerCase()
|
||||||
);
|
);
|
||||||
|
|
||||||
if (!keywordExists) {
|
if (!keywordExists) {
|
||||||
@@ -235,8 +240,8 @@ export default function TransactionsPage() {
|
|||||||
method: "PUT",
|
method: "PUT",
|
||||||
headers: { "Content-Type": "application/json" },
|
headers: { "Content-Type": "application/json" },
|
||||||
body: JSON.stringify({ id, categoryId: ruleData.categoryId }),
|
body: JSON.stringify({ id, categoryId: ruleData.categoryId }),
|
||||||
}),
|
})
|
||||||
),
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -245,7 +250,7 @@ export default function TransactionsPage() {
|
|||||||
queryClient.invalidateQueries({ queryKey: ["banking-metadata"] });
|
queryClient.invalidateQueries({ queryKey: ["banking-metadata"] });
|
||||||
setRuleDialogOpen(false);
|
setRuleDialogOpen(false);
|
||||||
},
|
},
|
||||||
[metadata, queryClient],
|
[metadata, queryClient]
|
||||||
);
|
);
|
||||||
|
|
||||||
const invalidateAll = useCallback(() => {
|
const invalidateAll = useCallback(() => {
|
||||||
@@ -272,7 +277,7 @@ export default function TransactionsPage() {
|
|||||||
if (!transactionsData) return;
|
if (!transactionsData) return;
|
||||||
|
|
||||||
const transaction = transactionsData.transactions.find(
|
const transaction = transactionsData.transactions.find(
|
||||||
(t) => t.id === transactionId,
|
(t) => t.id === transactionId
|
||||||
);
|
);
|
||||||
if (!transaction) return;
|
if (!transaction) return;
|
||||||
|
|
||||||
@@ -297,7 +302,7 @@ export default function TransactionsPage() {
|
|||||||
if (!transactionsData) return;
|
if (!transactionsData) return;
|
||||||
|
|
||||||
const transaction = transactionsData.transactions.find(
|
const transaction = transactionsData.transactions.find(
|
||||||
(t) => t.id === transactionId,
|
(t) => t.id === transactionId
|
||||||
);
|
);
|
||||||
if (!transaction || transaction.isReconciled) return;
|
if (!transaction || transaction.isReconciled) return;
|
||||||
|
|
||||||
@@ -320,12 +325,12 @@ export default function TransactionsPage() {
|
|||||||
|
|
||||||
const setCategory = async (
|
const setCategory = async (
|
||||||
transactionId: string,
|
transactionId: string,
|
||||||
categoryId: string | null,
|
categoryId: string | null
|
||||||
) => {
|
) => {
|
||||||
if (!transactionsData) return;
|
if (!transactionsData) return;
|
||||||
|
|
||||||
const transaction = transactionsData.transactions.find(
|
const transaction = transactionsData.transactions.find(
|
||||||
(t) => t.id === transactionId,
|
(t) => t.id === transactionId
|
||||||
);
|
);
|
||||||
if (!transaction) return;
|
if (!transaction) return;
|
||||||
|
|
||||||
@@ -350,7 +355,7 @@ export default function TransactionsPage() {
|
|||||||
return {
|
return {
|
||||||
...oldData,
|
...oldData,
|
||||||
transactions: oldData.transactions.map((t) =>
|
transactions: oldData.transactions.map((t) =>
|
||||||
t.id === transactionId ? { ...t, categoryId } : t,
|
t.id === transactionId ? { ...t, categoryId } : t
|
||||||
),
|
),
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
@@ -370,7 +375,7 @@ export default function TransactionsPage() {
|
|||||||
if (!transactionsData) return;
|
if (!transactionsData) return;
|
||||||
|
|
||||||
const transactionsToUpdate = transactionsData.transactions.filter((t) =>
|
const transactionsToUpdate = transactionsData.transactions.filter((t) =>
|
||||||
selectedTransactions.has(t.id),
|
selectedTransactions.has(t.id)
|
||||||
);
|
);
|
||||||
|
|
||||||
setSelectedTransactions(new Set());
|
setSelectedTransactions(new Set());
|
||||||
@@ -382,8 +387,8 @@ export default function TransactionsPage() {
|
|||||||
method: "PUT",
|
method: "PUT",
|
||||||
headers: { "Content-Type": "application/json" },
|
headers: { "Content-Type": "application/json" },
|
||||||
body: JSON.stringify({ ...t, isReconciled: reconciled }),
|
body: JSON.stringify({ ...t, isReconciled: reconciled }),
|
||||||
}),
|
})
|
||||||
),
|
)
|
||||||
);
|
);
|
||||||
invalidateTransactions();
|
invalidateTransactions();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
@@ -395,7 +400,7 @@ export default function TransactionsPage() {
|
|||||||
if (!transactionsData) return;
|
if (!transactionsData) return;
|
||||||
|
|
||||||
const transactionsToUpdate = transactionsData.transactions.filter((t) =>
|
const transactionsToUpdate = transactionsData.transactions.filter((t) =>
|
||||||
selectedTransactions.has(t.id),
|
selectedTransactions.has(t.id)
|
||||||
);
|
);
|
||||||
|
|
||||||
const transactionIds = transactionsToUpdate.map((t) => t.id);
|
const transactionIds = transactionsToUpdate.map((t) => t.id);
|
||||||
@@ -413,8 +418,8 @@ export default function TransactionsPage() {
|
|||||||
method: "PUT",
|
method: "PUT",
|
||||||
headers: { "Content-Type": "application/json" },
|
headers: { "Content-Type": "application/json" },
|
||||||
body: JSON.stringify({ ...t, categoryId }),
|
body: JSON.stringify({ ...t, categoryId }),
|
||||||
}),
|
})
|
||||||
),
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
// Mise à jour directe du cache après succès
|
// Mise à jour directe du cache après succès
|
||||||
@@ -424,7 +429,7 @@ export default function TransactionsPage() {
|
|||||||
return {
|
return {
|
||||||
...oldData,
|
...oldData,
|
||||||
transactions: oldData.transactions.map((t) =>
|
transactions: oldData.transactions.map((t) =>
|
||||||
transactionIds.includes(t.id) ? { ...t, categoryId } : t,
|
transactionIds.includes(t.id) ? { ...t, categoryId } : t
|
||||||
),
|
),
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
@@ -446,7 +451,7 @@ export default function TransactionsPage() {
|
|||||||
setSelectedTransactions(new Set());
|
setSelectedTransactions(new Set());
|
||||||
} else {
|
} else {
|
||||||
setSelectedTransactions(
|
setSelectedTransactions(
|
||||||
new Set(transactionsData.transactions.map((t) => t.id)),
|
new Set(transactionsData.transactions.map((t) => t.id))
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@@ -488,7 +493,7 @@ export default function TransactionsPage() {
|
|||||||
return {
|
return {
|
||||||
...oldData,
|
...oldData,
|
||||||
transactions: oldData.transactions.filter(
|
transactions: oldData.transactions.filter(
|
||||||
(t) => t.id !== transactionId,
|
(t) => t.id !== transactionId
|
||||||
),
|
),
|
||||||
total: oldData.total - 1,
|
total: oldData.total - 1,
|
||||||
};
|
};
|
||||||
@@ -499,13 +504,13 @@ export default function TransactionsPage() {
|
|||||||
`/api/banking/transactions?id=${transactionId}`,
|
`/api/banking/transactions?id=${transactionId}`,
|
||||||
{
|
{
|
||||||
method: "DELETE",
|
method: "DELETE",
|
||||||
},
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
const errorData = await response.json().catch(() => ({}));
|
const errorData = await response.json().catch(() => ({}));
|
||||||
throw new Error(
|
throw new Error(
|
||||||
errorData.error || `Failed to delete transaction: ${response.status}`,
|
errorData.error || `Failed to delete transaction: ${response.status}`
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -593,6 +598,8 @@ export default function TransactionsPage() {
|
|||||||
}}
|
}}
|
||||||
isCustomDatePickerOpen={isCustomDatePickerOpen}
|
isCustomDatePickerOpen={isCustomDatePickerOpen}
|
||||||
onCustomDatePickerOpenChange={setIsCustomDatePickerOpen}
|
onCustomDatePickerOpenChange={setIsCustomDatePickerOpen}
|
||||||
|
showDuplicates={showDuplicates}
|
||||||
|
onShowDuplicatesChange={setShowDuplicates}
|
||||||
accounts={metadata.accounts}
|
accounts={metadata.accounts}
|
||||||
folders={metadata.folders}
|
folders={metadata.folders}
|
||||||
categories={metadata.categories}
|
categories={metadata.categories}
|
||||||
@@ -631,6 +638,8 @@ export default function TransactionsPage() {
|
|||||||
formatCurrency={formatCurrency}
|
formatCurrency={formatCurrency}
|
||||||
formatDate={formatDate}
|
formatDate={formatDate}
|
||||||
updatingTransactionIds={updatingTransactionIds}
|
updatingTransactionIds={updatingTransactionIds}
|
||||||
|
duplicateIds={duplicateIds}
|
||||||
|
highlightDuplicates={showDuplicates}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* Pagination controls */}
|
{/* Pagination controls */}
|
||||||
|
|||||||
@@ -28,10 +28,12 @@ import {
|
|||||||
SheetTitle,
|
SheetTitle,
|
||||||
SheetTrigger,
|
SheetTrigger,
|
||||||
} from "@/components/ui/sheet";
|
} from "@/components/ui/sheet";
|
||||||
import { Search, X, Filter, Wallet, Calendar } from "lucide-react";
|
import { Search, X, Filter, Wallet, Calendar, Copy } from "lucide-react";
|
||||||
import { format } from "date-fns";
|
import { format } from "date-fns";
|
||||||
import { fr } from "date-fns/locale";
|
import { fr } from "date-fns/locale";
|
||||||
import { useIsMobile } from "@/hooks/use-mobile";
|
import { useIsMobile } from "@/hooks/use-mobile";
|
||||||
|
import { Checkbox } from "@/components/ui/checkbox";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
import type { Account, Category, Folder, Transaction } from "@/lib/types";
|
import type { Account, Category, Folder, Transaction } from "@/lib/types";
|
||||||
|
|
||||||
type Period = "1month" | "3months" | "6months" | "12months" | "custom" | "all";
|
type Period = "1month" | "3months" | "6months" | "12months" | "custom" | "all";
|
||||||
@@ -53,6 +55,8 @@ interface TransactionFiltersProps {
|
|||||||
onCustomEndDateChange: (date: Date | undefined) => void;
|
onCustomEndDateChange: (date: Date | undefined) => void;
|
||||||
isCustomDatePickerOpen: boolean;
|
isCustomDatePickerOpen: boolean;
|
||||||
onCustomDatePickerOpenChange: (open: boolean) => void;
|
onCustomDatePickerOpenChange: (open: boolean) => void;
|
||||||
|
showDuplicates: boolean;
|
||||||
|
onShowDuplicatesChange: (show: boolean) => void;
|
||||||
accounts: Account[];
|
accounts: Account[];
|
||||||
folders: Folder[];
|
folders: Folder[];
|
||||||
categories: Category[];
|
categories: Category[];
|
||||||
@@ -77,6 +81,8 @@ export function TransactionFilters({
|
|||||||
onCustomEndDateChange,
|
onCustomEndDateChange,
|
||||||
isCustomDatePickerOpen,
|
isCustomDatePickerOpen,
|
||||||
onCustomDatePickerOpenChange,
|
onCustomDatePickerOpenChange,
|
||||||
|
showDuplicates,
|
||||||
|
onShowDuplicatesChange,
|
||||||
accounts,
|
accounts,
|
||||||
folders,
|
folders,
|
||||||
categories,
|
categories,
|
||||||
@@ -153,6 +159,23 @@ export function TransactionFilters({
|
|||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</Select>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2 px-3 py-2 rounded-md border border-border bg-card">
|
||||||
|
<Checkbox
|
||||||
|
id="show-duplicates"
|
||||||
|
checked={showDuplicates}
|
||||||
|
onCheckedChange={(checked) =>
|
||||||
|
onShowDuplicatesChange(checked === true)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Label
|
||||||
|
htmlFor="show-duplicates"
|
||||||
|
className="text-sm font-normal cursor-pointer flex items-center gap-2"
|
||||||
|
>
|
||||||
|
<Copy className="h-4 w-4 text-muted-foreground" />
|
||||||
|
Afficher les doublons
|
||||||
|
</Label>
|
||||||
|
</div>
|
||||||
|
|
||||||
{period === "custom" && (
|
{period === "custom" && (
|
||||||
<Popover
|
<Popover
|
||||||
open={isCustomDatePickerOpen}
|
open={isCustomDatePickerOpen}
|
||||||
@@ -256,7 +279,7 @@ export function TransactionFilters({
|
|||||||
onRemoveCategory={(id) => {
|
onRemoveCategory={(id) => {
|
||||||
const newCategories = selectedCategories.filter((c) => c !== id);
|
const newCategories = selectedCategories.filter((c) => c !== id);
|
||||||
onCategoriesChange(
|
onCategoriesChange(
|
||||||
newCategories.length > 0 ? newCategories : ["all"],
|
newCategories.length > 0 ? newCategories : ["all"]
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
onClearCategories={() => onCategoriesChange(["all"])}
|
onClearCategories={() => onCategoriesChange(["all"])}
|
||||||
@@ -282,7 +305,8 @@ export function TransactionFilters({
|
|||||||
(!selectedAccounts.includes("all") ? selectedAccounts.length : 0) +
|
(!selectedAccounts.includes("all") ? selectedAccounts.length : 0) +
|
||||||
(!selectedCategories.includes("all") ? selectedCategories.length : 0) +
|
(!selectedCategories.includes("all") ? selectedCategories.length : 0) +
|
||||||
(showReconciled !== "all" ? 1 : 0) +
|
(showReconciled !== "all" ? 1 : 0) +
|
||||||
(period !== "all" ? 1 : 0);
|
(period !== "all" ? 1 : 0) +
|
||||||
|
(showDuplicates ? 1 : 0);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@@ -367,7 +391,7 @@ function ActiveFilters({
|
|||||||
|
|
||||||
const selectedAccs = accounts.filter((a) => selectedAccounts.includes(a.id));
|
const selectedAccs = accounts.filter((a) => selectedAccounts.includes(a.id));
|
||||||
const selectedCats = categories.filter((c) =>
|
const selectedCats = categories.filter((c) =>
|
||||||
selectedCategories.includes(c.id),
|
selectedCategories.includes(c.id)
|
||||||
);
|
);
|
||||||
const isUncategorized = selectedCategories.includes("uncategorized");
|
const isUncategorized = selectedCategories.includes("uncategorized");
|
||||||
|
|
||||||
|
|||||||
@@ -25,6 +25,7 @@ import {
|
|||||||
Wand2,
|
Wand2,
|
||||||
Trash2,
|
Trash2,
|
||||||
Loader2,
|
Loader2,
|
||||||
|
AlertTriangle,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import { DropdownMenuSeparator } from "@/components/ui/dropdown-menu";
|
import { DropdownMenuSeparator } from "@/components/ui/dropdown-menu";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
@@ -52,6 +53,8 @@ interface TransactionTableProps {
|
|||||||
formatCurrency: (amount: number) => string;
|
formatCurrency: (amount: number) => string;
|
||||||
formatDate: (dateStr: string) => string;
|
formatDate: (dateStr: string) => string;
|
||||||
updatingTransactionIds?: Set<string>;
|
updatingTransactionIds?: Set<string>;
|
||||||
|
duplicateIds?: Set<string>;
|
||||||
|
highlightDuplicates?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const ROW_HEIGHT = 72; // Hauteur approximative d'une ligne
|
const ROW_HEIGHT = 72; // Hauteur approximative d'une ligne
|
||||||
@@ -145,6 +148,8 @@ export function TransactionTable({
|
|||||||
formatCurrency,
|
formatCurrency,
|
||||||
formatDate,
|
formatDate,
|
||||||
updatingTransactionIds = new Set(),
|
updatingTransactionIds = new Set(),
|
||||||
|
duplicateIds = new Set(),
|
||||||
|
highlightDuplicates = false,
|
||||||
}: TransactionTableProps) {
|
}: TransactionTableProps) {
|
||||||
const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
|
const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
|
||||||
const parentRef = useRef<HTMLDivElement>(null);
|
const parentRef = useRef<HTMLDivElement>(null);
|
||||||
@@ -164,7 +169,7 @@ export function TransactionTable({
|
|||||||
setFocusedIndex(index);
|
setFocusedIndex(index);
|
||||||
onMarkReconciled(transactionId);
|
onMarkReconciled(transactionId);
|
||||||
},
|
},
|
||||||
[onMarkReconciled],
|
[onMarkReconciled]
|
||||||
);
|
);
|
||||||
|
|
||||||
const handleKeyDown = useCallback(
|
const handleKeyDown = useCallback(
|
||||||
@@ -193,7 +198,7 @@ export function TransactionTable({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[focusedIndex, transactions, onMarkReconciled, virtualizer],
|
[focusedIndex, transactions, onMarkReconciled, virtualizer]
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -210,7 +215,7 @@ export function TransactionTable({
|
|||||||
(accountId: string) => {
|
(accountId: string) => {
|
||||||
return accounts.find((a) => a.id === accountId);
|
return accounts.find((a) => a.id === accountId);
|
||||||
},
|
},
|
||||||
[accounts],
|
[accounts]
|
||||||
);
|
);
|
||||||
|
|
||||||
const getCategory = useCallback(
|
const getCategory = useCallback(
|
||||||
@@ -218,7 +223,7 @@ export function TransactionTable({
|
|||||||
if (!categoryId) return null;
|
if (!categoryId) return null;
|
||||||
return categories.find((c) => c.id === categoryId);
|
return categories.find((c) => c.id === categoryId);
|
||||||
},
|
},
|
||||||
[categories],
|
[categories]
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -247,6 +252,8 @@ export function TransactionTable({
|
|||||||
const account = getAccount(transaction.accountId);
|
const account = getAccount(transaction.accountId);
|
||||||
const _category = getCategory(transaction.categoryId);
|
const _category = getCategory(transaction.categoryId);
|
||||||
const isFocused = focusedIndex === virtualRow.index;
|
const isFocused = focusedIndex === virtualRow.index;
|
||||||
|
const isDuplicate =
|
||||||
|
highlightDuplicates && duplicateIds.has(transaction.id);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
@@ -259,6 +266,10 @@ export function TransactionTable({
|
|||||||
left: 0,
|
left: 0,
|
||||||
width: "100%",
|
width: "100%",
|
||||||
transform: `translateY(${virtualRow.start}px)`,
|
transform: `translateY(${virtualRow.start}px)`,
|
||||||
|
...(isDuplicate && {
|
||||||
|
backgroundColor: "rgb(254 252 232)", // yellow-50
|
||||||
|
borderLeft: "4px solid rgb(234 179 8)", // yellow-500
|
||||||
|
}),
|
||||||
}}
|
}}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
// Désactiver le pointage au clic sur mobile
|
// Désactiver le pointage au clic sur mobile
|
||||||
@@ -270,6 +281,7 @@ export function TransactionTable({
|
|||||||
"p-4 space-y-3 hover:bg-muted/50 cursor-pointer border-b border-border",
|
"p-4 space-y-3 hover:bg-muted/50 cursor-pointer border-b border-border",
|
||||||
transaction.isReconciled && "bg-emerald-500/5",
|
transaction.isReconciled && "bg-emerald-500/5",
|
||||||
isFocused && "bg-primary/10 ring-1 ring-primary/30",
|
isFocused && "bg-primary/10 ring-1 ring-primary/30",
|
||||||
|
isDuplicate && "shadow-sm"
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<div className="flex items-start justify-between gap-2">
|
<div className="flex items-start justify-between gap-2">
|
||||||
@@ -282,9 +294,23 @@ export function TransactionTable({
|
|||||||
onClick={(e) => e.stopPropagation()}
|
onClick={(e) => e.stopPropagation()}
|
||||||
/>
|
/>
|
||||||
<div className="flex-1 min-w-0">
|
<div className="flex-1 min-w-0">
|
||||||
<p className="font-medium text-xs md:text-sm truncate">
|
<div className="flex items-center gap-2">
|
||||||
{transaction.description}
|
<p className="font-medium text-xs md:text-sm truncate">
|
||||||
</p>
|
{transaction.description}
|
||||||
|
</p>
|
||||||
|
{isDuplicate && (
|
||||||
|
<Tooltip delayDuration={200}>
|
||||||
|
<TooltipTrigger asChild>
|
||||||
|
<AlertTriangle className="h-3 w-3 md:h-4 md:w-4 text-[var(--warning)] shrink-0" />
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent>
|
||||||
|
<p>
|
||||||
|
Transaction en double (même somme et date)
|
||||||
|
</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
{transaction.memo && (
|
{transaction.memo && (
|
||||||
<p className="text-[10px] md:text-xs text-muted-foreground truncate mt-1">
|
<p className="text-[10px] md:text-xs text-muted-foreground truncate mt-1">
|
||||||
{transaction.memo}
|
{transaction.memo}
|
||||||
@@ -297,7 +323,7 @@ export function TransactionTable({
|
|||||||
"font-semibold tabular-nums text-sm md:text-base shrink-0",
|
"font-semibold tabular-nums text-sm md:text-base shrink-0",
|
||||||
transaction.amount >= 0
|
transaction.amount >= 0
|
||||||
? "text-emerald-600"
|
? "text-emerald-600"
|
||||||
: "text-red-600",
|
: "text-red-600"
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{transaction.amount >= 0 ? "+" : ""}
|
{transaction.amount >= 0 ? "+" : ""}
|
||||||
@@ -332,7 +358,7 @@ export function TransactionTable({
|
|||||||
showBadge
|
showBadge
|
||||||
align="start"
|
align="start"
|
||||||
disabled={updatingTransactionIds.has(
|
disabled={updatingTransactionIds.has(
|
||||||
transaction.id,
|
transaction.id
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -365,7 +391,7 @@ export function TransactionTable({
|
|||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
if (
|
if (
|
||||||
confirm(
|
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);
|
onDelete(transaction.id);
|
||||||
@@ -455,6 +481,8 @@ export function TransactionTable({
|
|||||||
const transaction = transactions[virtualRow.index];
|
const transaction = transactions[virtualRow.index];
|
||||||
const account = getAccount(transaction.accountId);
|
const account = getAccount(transaction.accountId);
|
||||||
const isFocused = focusedIndex === virtualRow.index;
|
const isFocused = focusedIndex === virtualRow.index;
|
||||||
|
const isDuplicate =
|
||||||
|
highlightDuplicates && duplicateIds.has(transaction.id);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
@@ -467,6 +495,10 @@ export function TransactionTable({
|
|||||||
left: 0,
|
left: 0,
|
||||||
width: "100%",
|
width: "100%",
|
||||||
transform: `translateY(${virtualRow.start}px)`,
|
transform: `translateY(${virtualRow.start}px)`,
|
||||||
|
...(isDuplicate && {
|
||||||
|
backgroundColor: "rgb(254 252 232)", // yellow-50
|
||||||
|
borderLeft: "4px solid rgb(234 179 8)", // yellow-500
|
||||||
|
}),
|
||||||
}}
|
}}
|
||||||
onClick={() =>
|
onClick={() =>
|
||||||
handleRowClick(virtualRow.index, transaction.id)
|
handleRowClick(virtualRow.index, transaction.id)
|
||||||
@@ -475,6 +507,7 @@ export function TransactionTable({
|
|||||||
"grid grid-cols-[auto_120px_2fr_150px_180px_140px_auto_auto] gap-0 border-b border-border hover:bg-muted/50 cursor-pointer",
|
"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",
|
transaction.isReconciled && "bg-emerald-500/5",
|
||||||
isFocused && "bg-primary/10 ring-1 ring-primary/30",
|
isFocused && "bg-primary/10 ring-1 ring-primary/30",
|
||||||
|
isDuplicate && "shadow-sm"
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<div className="p-3">
|
<div className="p-3">
|
||||||
@@ -492,9 +525,23 @@ export function TransactionTable({
|
|||||||
className="p-3 min-w-0 overflow-hidden"
|
className="p-3 min-w-0 overflow-hidden"
|
||||||
onClick={(e) => e.stopPropagation()}
|
onClick={(e) => e.stopPropagation()}
|
||||||
>
|
>
|
||||||
<p className="font-medium text-sm truncate">
|
<div className="flex items-center gap-2">
|
||||||
{transaction.description}
|
<p className="font-medium text-sm truncate">
|
||||||
</p>
|
{transaction.description}
|
||||||
|
</p>
|
||||||
|
{isDuplicate && (
|
||||||
|
<Tooltip delayDuration={200}>
|
||||||
|
<TooltipTrigger asChild>
|
||||||
|
<AlertTriangle className="h-4 w-4 text-[var(--warning)] shrink-0" />
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent>
|
||||||
|
<p>
|
||||||
|
Transaction en double (même somme et date)
|
||||||
|
</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
{transaction.memo && (
|
{transaction.memo && (
|
||||||
<DescriptionWithTooltip
|
<DescriptionWithTooltip
|
||||||
description={transaction.memo}
|
description={transaction.memo}
|
||||||
@@ -529,7 +576,7 @@ export function TransactionTable({
|
|||||||
"p-3 text-right font-semibold tabular-nums",
|
"p-3 text-right font-semibold tabular-nums",
|
||||||
transaction.amount >= 0
|
transaction.amount >= 0
|
||||||
? "text-emerald-600"
|
? "text-emerald-600"
|
||||||
: "text-red-600",
|
: "text-red-600"
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{transaction.amount >= 0 ? "+" : ""}
|
{transaction.amount >= 0 ? "+" : ""}
|
||||||
@@ -596,7 +643,7 @@ export function TransactionTable({
|
|||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
if (
|
if (
|
||||||
confirm(
|
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);
|
onDelete(transaction.id);
|
||||||
|
|||||||
21
lib/hooks.ts
21
lib/hooks.ts
@@ -83,7 +83,7 @@ export function useLocalStorage<T>(key: string, initialValue: T) {
|
|||||||
|
|
||||||
// Helper function to serialize transaction params into a query key
|
// Helper function to serialize transaction params into a query key
|
||||||
export function getTransactionsQueryKey(
|
export function getTransactionsQueryKey(
|
||||||
params: TransactionsPaginatedParams = {},
|
params: TransactionsPaginatedParams = {}
|
||||||
): (string | number)[] {
|
): (string | number)[] {
|
||||||
const key: (string | number)[] = ["transactions"];
|
const key: (string | number)[] = ["transactions"];
|
||||||
if (params.limit) key.push(`limit:${params.limit}`);
|
if (params.limit) key.push(`limit:${params.limit}`);
|
||||||
@@ -106,7 +106,7 @@ export function getTransactionsQueryKey(
|
|||||||
|
|
||||||
export function useTransactions(
|
export function useTransactions(
|
||||||
params: TransactionsPaginatedParams = {},
|
params: TransactionsPaginatedParams = {},
|
||||||
enabled = true,
|
enabled = true
|
||||||
) {
|
) {
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
@@ -134,7 +134,7 @@ export function useTransactions(
|
|||||||
if (params.isReconciled !== undefined && params.isReconciled !== "all") {
|
if (params.isReconciled !== undefined && params.isReconciled !== "all") {
|
||||||
searchParams.set(
|
searchParams.set(
|
||||||
"isReconciled",
|
"isReconciled",
|
||||||
params.isReconciled === true ? "true" : "false",
|
params.isReconciled === true ? "true" : "false"
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
if (params.sortField) searchParams.set("sortField", params.sortField);
|
if (params.sortField) searchParams.set("sortField", params.sortField);
|
||||||
@@ -205,3 +205,18 @@ export function useAccountsWithStats() {
|
|||||||
staleTime: 60 * 1000, // 1 minute
|
staleTime: 60 * 1000, // 1 minute
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function useDuplicateIds() {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ["duplicate-ids"],
|
||||||
|
queryFn: async (): Promise<Set<string>> => {
|
||||||
|
const response = await fetch("/api/banking/duplicates/ids");
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error("Failed to fetch duplicate IDs");
|
||||||
|
}
|
||||||
|
const data = await response.json();
|
||||||
|
return new Set(data.duplicateIds || []);
|
||||||
|
},
|
||||||
|
staleTime: 30 * 1000, // 30 seconds
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|||||||
@@ -41,14 +41,14 @@ export const transactionService = {
|
|||||||
|
|
||||||
// Create sets for fast lookup
|
// Create sets for fast lookup
|
||||||
const existingFitIdSet = new Set(
|
const existingFitIdSet = new Set(
|
||||||
existingByFitId.map((t) => `${t.accountId}-${t.fitId}`),
|
existingByFitId.map((t) => `${t.accountId}-${t.fitId}`)
|
||||||
);
|
);
|
||||||
|
|
||||||
// Create set for duplicates by amount + date + description
|
// Create set for duplicates by amount + date + description
|
||||||
const existingCriteriaSet = new Set(
|
const existingCriteriaSet = new Set(
|
||||||
allExistingTransactions.map(
|
allExistingTransactions.map(
|
||||||
(t) => `${t.accountId}-${t.date}-${t.amount}-${t.description}`,
|
(t) => `${t.accountId}-${t.date}-${t.amount}-${t.description}`
|
||||||
),
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
// Filter out duplicates based on fitId OR (amount + date + description)
|
// Filter out duplicates based on fitId OR (amount + date + description)
|
||||||
@@ -85,7 +85,7 @@ export const transactionService = {
|
|||||||
|
|
||||||
async update(
|
async update(
|
||||||
id: string,
|
id: string,
|
||||||
data: Partial<Omit<Transaction, "id">>,
|
data: Partial<Omit<Transaction, "id">>
|
||||||
): Promise<Transaction> {
|
): Promise<Transaction> {
|
||||||
const updated = await prisma.transaction.update({
|
const updated = await prisma.transaction.update({
|
||||||
where: { id },
|
where: { id },
|
||||||
@@ -123,14 +123,67 @@ export const transactionService = {
|
|||||||
await prisma.transaction.delete({
|
await prisma.transaction.delete({
|
||||||
where: { id },
|
where: { id },
|
||||||
});
|
});
|
||||||
} catch (error: any) {
|
} catch (error: unknown) {
|
||||||
if (error.code === "P2025") {
|
if (
|
||||||
|
error &&
|
||||||
|
typeof error === "object" &&
|
||||||
|
"code" in error &&
|
||||||
|
error.code === "P2025"
|
||||||
|
) {
|
||||||
throw new Error(`Transaction with id ${id} not found`);
|
throw new Error(`Transaction with id ${id} not found`);
|
||||||
}
|
}
|
||||||
throw error;
|
throw error;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
async getDuplicateIds(): Promise<Set<string>> {
|
||||||
|
// Get all transactions grouped by account
|
||||||
|
const allTransactions = await prisma.transaction.findMany({
|
||||||
|
orderBy: [
|
||||||
|
{ accountId: "asc" },
|
||||||
|
{ date: "asc" },
|
||||||
|
{ createdAt: "asc" }, // Oldest first
|
||||||
|
],
|
||||||
|
select: {
|
||||||
|
id: true,
|
||||||
|
accountId: true,
|
||||||
|
date: true,
|
||||||
|
amount: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// Group by account for efficient processing
|
||||||
|
const transactionsByAccount = new Map<string, typeof allTransactions>();
|
||||||
|
for (const transaction of allTransactions) {
|
||||||
|
if (!transactionsByAccount.has(transaction.accountId)) {
|
||||||
|
transactionsByAccount.set(transaction.accountId, []);
|
||||||
|
}
|
||||||
|
transactionsByAccount.get(transaction.accountId)!.push(transaction);
|
||||||
|
}
|
||||||
|
|
||||||
|
const duplicateIds = new Set<string>();
|
||||||
|
const seenKeys = new Map<string, string>(); // key -> first transaction ID
|
||||||
|
|
||||||
|
// For each account, find duplicates by amount + date only
|
||||||
|
for (const [accountId, transactions] of transactionsByAccount.entries()) {
|
||||||
|
for (const transaction of transactions) {
|
||||||
|
const key = `${accountId}-${transaction.date}-${transaction.amount}`;
|
||||||
|
|
||||||
|
if (seenKeys.has(key)) {
|
||||||
|
// This is a duplicate - mark both the first and this one
|
||||||
|
const firstId = seenKeys.get(key)!;
|
||||||
|
duplicateIds.add(firstId);
|
||||||
|
duplicateIds.add(transaction.id);
|
||||||
|
} else {
|
||||||
|
// First occurrence
|
||||||
|
seenKeys.set(key, transaction.id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return duplicateIds;
|
||||||
|
},
|
||||||
|
|
||||||
async deduplicate(): Promise<{
|
async deduplicate(): Promise<{
|
||||||
deletedCount: number;
|
deletedCount: number;
|
||||||
duplicatesFound: number;
|
duplicatesFound: number;
|
||||||
|
|||||||
Reference in New Issue
Block a user