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

feat: add transaction deduplication feature and enhance filtering options in settings and transactions pages

Browse Source
This commit is contained in:
Julien Froidefond
2025-11-30 13:02:03 +01:00
parent e087143675
commit d5aa00a885
9 changed files with 616 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
components/settings/danger-zone-card.tsx
View File

@@ -1,5 +1,6 @@
"use client";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
Card,
@@ -19,19 +20,39 @@ import {
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Trash2, Tags } from "lucide-react";
import { Trash2, Tags, Copy } from "lucide-react";
interface DangerZoneCardProps {
categorizedCount: number;
onClearCategories: () => void;
onResetData: () => void;
onDeduplicate: () => Promise<{ deletedCount: number; duplicatesFound: number }>;
}
export function DangerZoneCard({
categorizedCount,
onClearCategories,
onResetData,
onDeduplicate,
}: DangerZoneCardProps) {
const [deduplicating, setDeduplicating] = useState(false);
const handleDeduplicate = async () => {
setDeduplicating(true);
try {
const result = await onDeduplicate();
if (result.deletedCount > 0) {
alert(`${result.deletedCount} transaction${result.deletedCount > 1 ? "s" : ""} en double supprimée${result.deletedCount > 1 ? "s" : ""}`);
} else {
alert("Aucun doublon trouvé");
}
} catch (error) {
console.error(error);
alert("Erreur lors du dédoublonnage");
} finally {
setDeduplicating(false);
}
};
return (
<Card className="border-red-200">
<CardHeader>
@@ -44,6 +65,48 @@ export function DangerZoneCard({
</CardDescription>
</CardHeader>
<CardContent className="space-y-3">
{/* Dédoublonnage */}
<AlertDialog>
<AlertDialogTrigger asChild>
<Button
variant="outline"
className="w-full justify-start border-blue-300 text-blue-700 hover:bg-blue-50"
disabled={deduplicating}
>
<Copy className="w-4 h-4 mr-2" />
Dédoublonner les transactions
{deduplicating && (
<span className="ml-auto text-xs text-muted-foreground">
En cours...
</span>
)}
</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>
Dédoublonner les transactions ?
</AlertDialogTitle>
<AlertDialogDescription>
Cette action va rechercher et supprimer les transactions en double
dans votre base de données. Les critères de dédoublonnage sont :
même compte, même date, même montant et même libellé. La première
transaction trouvée sera conservée, les autres seront supprimées.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Annuler</AlertDialogCancel>
<AlertDialogAction
onClick={handleDeduplicate}
className="bg-blue-600 hover:bg-blue-700"
disabled={deduplicating}
>
{deduplicating ? "Dédoublonnage..." : "Dédoublonner"}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
{/* Supprimer catégories des opérations */}
<AlertDialog>
<AlertDialogTrigger asChild>

174
components/transactions/transaction-filters.tsx
View File

@@ -13,9 +13,16 @@ import {
import { CategoryFilterCombobox } from "@/components/ui/category-filter-combobox";
import { AccountFilterCombobox } from "@/components/ui/account-filter-combobox";
import { CategoryIcon } from "@/components/ui/category-icon";
import { Search, X, Filter, Wallet } from "lucide-react";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Calendar as CalendarComponent } from "@/components/ui/calendar";
import { Button } from "@/components/ui/button";
import { Search, X, Filter, Wallet, Calendar } from "lucide-react";
import { format } from "date-fns";
import { fr } from "date-fns/locale";
import type { Account, Category, Folder, Transaction } from "@/lib/types";
type Period = "1month" | "3months" | "6months" | "12months" | "custom" | "all";
interface TransactionFiltersProps {
searchQuery: string;
onSearchChange: (query: string) => void;
@@ -25,11 +32,19 @@ interface TransactionFiltersProps {
onCategoriesChange: (categories: string[]) => void;
showReconciled: string;
onReconciledChange: (value: string) => void;
period: Period;
onPeriodChange: (period: Period) => void;
customStartDate?: Date;
customEndDate?: Date;
onCustomStartDateChange: (date: Date | undefined) => void;
onCustomEndDateChange: (date: Date | undefined) => void;
isCustomDatePickerOpen: boolean;
onCustomDatePickerOpenChange: (open: boolean) => void;
accounts: Account[];
folders: Folder[];
categories: Category[];
transactionsForAccountFilter?: Transaction[]; // Filtered by categories, search, reconciled (not accounts)
transactionsForCategoryFilter?: Transaction[]; // Filtered by accounts, search, reconciled (not categories)
transactionsForAccountFilter?: Transaction[]; // Filtered by categories, search, reconciled, period (not accounts)
transactionsForCategoryFilter?: Transaction[]; // Filtered by accounts, search, reconciled, period (not categories)
}
export function TransactionFilters({
@@ -41,6 +56,14 @@ export function TransactionFilters({
onCategoriesChange,
showReconciled,
onReconciledChange,
period,
onPeriodChange,
customStartDate,
customEndDate,
onCustomStartDateChange,
onCustomEndDateChange,
isCustomDatePickerOpen,
onCustomDatePickerOpenChange,
accounts,
folders,
categories,
@@ -90,6 +113,111 @@ export function TransactionFilters({
<SelectItem value="not-reconciled">Non pointées</SelectItem>
</SelectContent>
</Select>
<Select
value={period}
onValueChange={(v) => {
onPeriodChange(v as Period);
if (v !== "custom") {
onCustomDatePickerOpenChange(false);
} else {
onCustomDatePickerOpenChange(true);
}
}}
>
<SelectTrigger className="w-[150px]">
<SelectValue placeholder="Période" />
</SelectTrigger>
<SelectContent>
<SelectItem value="1month">1 mois</SelectItem>
<SelectItem value="3months">3 mois</SelectItem>
<SelectItem value="6months">6 mois</SelectItem>
<SelectItem value="12months">12 mois</SelectItem>
<SelectItem value="custom">Personnalisé</SelectItem>
<SelectItem value="all">Tout</SelectItem>
</SelectContent>
</Select>
{period === "custom" && (
<Popover open={isCustomDatePickerOpen} onOpenChange={onCustomDatePickerOpenChange}>
<PopoverTrigger asChild>
<Button variant="outline" className="w-[280px] justify-start text-left font-normal">
<Calendar className="mr-2 h-4 w-4" />
{customStartDate && customEndDate ? (
<>
{format(customStartDate, "PPP", { locale: fr })} -{" "}
{format(customEndDate, "PPP", { locale: fr })}
</>
) : customStartDate ? (
format(customStartDate, "PPP", { locale: fr })
) : (
<span className="text-muted-foreground">Sélectionner les dates</span>
)}
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0" align="start">
<div className="p-4 space-y-4">
<div className="space-y-2">
<label className="text-sm font-medium">Date de début</label>
<CalendarComponent
mode="single"
selected={customStartDate}
onSelect={(date) => {
onCustomStartDateChange(date);
if (date && customEndDate && date > customEndDate) {
onCustomEndDateChange(undefined);
}
}}
locale={fr}
/>
</div>
<div className="space-y-2">
<label className="text-sm font-medium">Date de fin</label>
<CalendarComponent
mode="single"
selected={customEndDate}
onSelect={(date) => {
if (date && customStartDate && date < customStartDate) {
return;
}
onCustomEndDateChange(date);
if (date && customStartDate) {
onCustomDatePickerOpenChange(false);
}
}}
disabled={(date) => {
if (!customStartDate) return true;
return date < customStartDate;
}}
locale={fr}
/>
</div>
{customStartDate && customEndDate && (
<div className="flex gap-2 pt-2 border-t">
<Button
variant="outline"
size="sm"
className="flex-1"
onClick={() => {
onCustomStartDateChange(undefined);
onCustomEndDateChange(undefined);
}}
>
Réinitialiser
</Button>
<Button
size="sm"
className="flex-1"
onClick={() => onCustomDatePickerOpenChange(false)}
>
Valider
</Button>
</div>
)}
</div>
</PopoverContent>
</Popover>
)}
</div>
<ActiveFilters
@@ -109,6 +237,14 @@ export function TransactionFilters({
onClearCategories={() => onCategoriesChange(["all"])}
showReconciled={showReconciled}
onClearReconciled={() => onReconciledChange("all")}
period={period}
onClearPeriod={() => {
onPeriodChange("all");
onCustomStartDateChange(undefined);
onCustomEndDateChange(undefined);
}}
customStartDate={customStartDate}
customEndDate={customEndDate}
accounts={accounts}
categories={categories}
/>
@@ -128,6 +264,10 @@ function ActiveFilters({
onClearCategories,
showReconciled,
onClearReconciled,
period,
onClearPeriod,
customStartDate,
customEndDate,
accounts,
categories,
}: {
@@ -141,6 +281,10 @@ function ActiveFilters({
onClearCategories: () => void;
showReconciled: string;
onClearReconciled: () => void;
period: Period;
onClearPeriod: () => void;
customStartDate?: Date;
customEndDate?: Date;
accounts: Account[];
categories: Category[];
}) {
@@ -148,8 +292,9 @@ function ActiveFilters({
const hasAccounts = !selectedAccounts.includes("all");
const hasCategories = !selectedCategories.includes("all");
const hasReconciled = showReconciled !== "all";
const hasPeriod = period !== "all";
const hasActiveFilters = hasSearch || hasAccounts || hasCategories || hasReconciled;
const hasActiveFilters = hasSearch || hasAccounts || hasCategories || hasReconciled || hasPeriod;
if (!hasActiveFilters) return null;
@@ -162,6 +307,7 @@ function ActiveFilters({
onClearAccounts();
onClearCategories();
onClearReconciled();
onClearPeriod();
};
return (
@@ -229,6 +375,26 @@ function ActiveFilters({
</Badge>
)}
{hasPeriod && (
<Badge variant="secondary" className="gap-1 text-xs font-normal">
<Calendar className="h-3 w-3" />
{period === "custom" && customStartDate && customEndDate
? `${format(customStartDate, "d MMM", { locale: fr })} - ${format(customEndDate, "d MMM yyyy", { locale: fr })}`
: period === "1month"
? "1 mois"
: period === "3months"
? "3 mois"
: period === "6months"
? "6 mois"
: period === "12months"
? "12 mois"
: "Période"}
<button onClick={onClearPeriod} className="ml-1 hover:text-foreground">
<X className="h-3 w-3" />
</button>
</Badge>
)}
<button
onClick={clearAll}
className="text-xs text-muted-foreground hover:text-foreground ml-auto"

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

@@ -18,6 +18,7 @@ import {
MoreVertical,
ArrowUpDown,
Wand2,
Trash2,
} from "lucide-react";
import { DropdownMenuSeparator } from "@/components/ui/dropdown-menu";
import { cn } from "@/lib/utils";
@@ -40,6 +41,7 @@ interface TransactionTableProps {
onMarkReconciled: (id: string) => void;
onSetCategory: (transactionId: string, categoryId: string | null) => void;
onCreateRule: (transaction: Transaction) => void;
onDelete: (id: string) => void;
formatCurrency: (amount: number) => string;
formatDate: (dateStr: string) => string;
}
@@ -60,6 +62,7 @@ export function TransactionTable({
onMarkReconciled,
onSetCategory,
onCreateRule,
onDelete,
formatCurrency,
formatDate,
}: TransactionTableProps) {
@@ -319,6 +322,23 @@ export function TransactionTable({
<Wand2 className="w-4 h-4 mr-2" />
Créer une règle
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem
onClick={(e) => {
e.stopPropagation();
if (
confirm(
`Êtes-vous sûr de vouloir supprimer cette transaction ?\n\n${transaction.description}\n${formatCurrency(transaction.amount)}`
)
) {
onDelete(transaction.id);
}
}}
className="text-red-600 focus:text-red-600"
>
<Trash2 className="w-4 h-4 mr-2" />
Supprimer
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>