feat: add transaction deduplication feature and enhance filtering options in settings and transactions pages
This commit is contained in:
Julien Froidefond
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user