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

components/transactions/transaction-filters.tsx

@@ -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"

components/transactions/transaction-table.tsx

@@ -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>