776 lines
27 KiB
TypeScript
776 lines
27 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useMemo } from "react";
|
|
import { PageLayout, LoadingState, PageHeader } from "@/components/layout";
|
|
import {
|
|
StatsSummaryCards,
|
|
MonthlyChart,
|
|
CategoryPieChart,
|
|
BalanceLineChart,
|
|
TopExpensesList,
|
|
} from "@/components/statistics";
|
|
import { useBankingData } from "@/lib/hooks";
|
|
import { getAccountBalance } from "@/lib/account-utils";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import { AccountFilterCombobox } from "@/components/ui/account-filter-combobox";
|
|
import { CategoryFilterCombobox } from "@/components/ui/category-filter-combobox";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { CategoryIcon } from "@/components/ui/category-icon";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { Filter, X, Wallet, CircleSlash, Calendar } 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 { format } from "date-fns";
|
|
import { fr } from "date-fns/locale";
|
|
import type { Account, Category } from "@/lib/types";
|
|
|
|
type Period = "1month" | "3months" | "6months" | "12months" | "custom" | "all";
|
|
|
|
export default function StatisticsPage() {
|
|
const { data, isLoading } = useBankingData();
|
|
const [period, setPeriod] = useState<Period>("6months");
|
|
const [selectedAccounts, setSelectedAccounts] = useState<string[]>(["all"]);
|
|
const [selectedCategories, setSelectedCategories] = useState<string[]>(["all"]);
|
|
const [excludeInternalTransfers, setExcludeInternalTransfers] = useState(true);
|
|
const [customStartDate, setCustomStartDate] = useState<Date | undefined>(undefined);
|
|
const [customEndDate, setCustomEndDate] = useState<Date | undefined>(undefined);
|
|
const [isCustomDatePickerOpen, setIsCustomDatePickerOpen] = useState(false);
|
|
|
|
// Get start date based on period
|
|
const startDate = useMemo(() => {
|
|
const now = new Date();
|
|
switch (period) {
|
|
case "1month":
|
|
return new Date(now.getFullYear(), now.getMonth() - 1, 1);
|
|
case "3months":
|
|
return new Date(now.getFullYear(), now.getMonth() - 3, 1);
|
|
case "6months":
|
|
return new Date(now.getFullYear(), now.getMonth() - 6, 1);
|
|
case "12months":
|
|
return new Date(now.getFullYear(), now.getMonth() - 12, 1);
|
|
case "custom":
|
|
return customStartDate || new Date(0);
|
|
default:
|
|
return new Date(0);
|
|
}
|
|
}, [period, customStartDate]);
|
|
|
|
// Get end date (only for custom period)
|
|
const endDate = useMemo(() => {
|
|
if (period === "custom" && customEndDate) {
|
|
return customEndDate;
|
|
}
|
|
return undefined;
|
|
}, [period, customEndDate]);
|
|
|
|
// Find "Virement interne" category
|
|
const internalTransferCategory = useMemo(() => {
|
|
if (!data) return null;
|
|
return data.categories.find(
|
|
(c) => c.name.toLowerCase() === "virement interne"
|
|
);
|
|
}, [data]);
|
|
|
|
// Transactions filtered for account filter (by categories, period - not accounts)
|
|
const transactionsForAccountFilter = useMemo(() => {
|
|
if (!data) return [];
|
|
|
|
return data.transactions.filter((t) => {
|
|
const transactionDate = new Date(t.date);
|
|
if (endDate) {
|
|
// Custom date range
|
|
const endOfDay = new Date(endDate);
|
|
endOfDay.setHours(23, 59, 59, 999);
|
|
if (transactionDate < startDate || transactionDate > endOfDay) {
|
|
return false;
|
|
}
|
|
} else {
|
|
// Standard period
|
|
if (transactionDate < startDate) {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
}).filter((t) => {
|
|
if (!selectedCategories.includes("all")) {
|
|
if (selectedCategories.includes("uncategorized")) {
|
|
return !t.categoryId;
|
|
} else {
|
|
return t.categoryId && selectedCategories.includes(t.categoryId);
|
|
}
|
|
}
|
|
return true;
|
|
}).filter((t) => {
|
|
// Exclude "Virement interne" category if checkbox is checked
|
|
if (excludeInternalTransfers && internalTransferCategory) {
|
|
return t.categoryId !== internalTransferCategory.id;
|
|
}
|
|
return true;
|
|
});
|
|
}, [data, startDate, endDate, selectedCategories, excludeInternalTransfers, internalTransferCategory]);
|
|
|
|
// Transactions filtered for category filter (by accounts, period - not categories)
|
|
const transactionsForCategoryFilter = useMemo(() => {
|
|
if (!data) return [];
|
|
|
|
return data.transactions.filter((t) => {
|
|
const transactionDate = new Date(t.date);
|
|
if (endDate) {
|
|
// Custom date range
|
|
const endOfDay = new Date(endDate);
|
|
endOfDay.setHours(23, 59, 59, 999);
|
|
if (transactionDate < startDate || transactionDate > endOfDay) {
|
|
return false;
|
|
}
|
|
} else {
|
|
// Standard period
|
|
if (transactionDate < startDate) {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
}).filter((t) => {
|
|
if (!selectedAccounts.includes("all")) {
|
|
return selectedAccounts.includes(t.accountId);
|
|
}
|
|
return true;
|
|
}).filter((t) => {
|
|
// Exclude "Virement interne" category if checkbox is checked
|
|
if (excludeInternalTransfers && internalTransferCategory) {
|
|
return t.categoryId !== internalTransferCategory.id;
|
|
}
|
|
return true;
|
|
});
|
|
}, [data, startDate, endDate, selectedAccounts, excludeInternalTransfers, internalTransferCategory]);
|
|
|
|
const stats = useMemo(() => {
|
|
if (!data) return null;
|
|
|
|
let transactions = data.transactions.filter((t) => {
|
|
const transactionDate = new Date(t.date);
|
|
if (endDate) {
|
|
// Custom date range
|
|
const endOfDay = new Date(endDate);
|
|
endOfDay.setHours(23, 59, 59, 999);
|
|
return transactionDate >= startDate && transactionDate <= endOfDay;
|
|
} else {
|
|
// Standard period
|
|
return transactionDate >= startDate;
|
|
}
|
|
});
|
|
|
|
// Filter by accounts
|
|
if (!selectedAccounts.includes("all")) {
|
|
transactions = transactions.filter(
|
|
(t) => selectedAccounts.includes(t.accountId)
|
|
);
|
|
}
|
|
|
|
// Filter by categories
|
|
if (!selectedCategories.includes("all")) {
|
|
if (selectedCategories.includes("uncategorized")) {
|
|
transactions = transactions.filter((t) => !t.categoryId);
|
|
} else {
|
|
transactions = transactions.filter(
|
|
(t) => t.categoryId && selectedCategories.includes(t.categoryId)
|
|
);
|
|
}
|
|
}
|
|
|
|
// Exclude "Virement interne" category if checkbox is checked
|
|
if (excludeInternalTransfers && internalTransferCategory) {
|
|
transactions = transactions.filter(
|
|
(t) => t.categoryId !== internalTransferCategory.id
|
|
);
|
|
}
|
|
|
|
// Monthly breakdown
|
|
const monthlyData = new Map<string, { income: number; expenses: number }>();
|
|
transactions.forEach((t) => {
|
|
const monthKey = t.date.substring(0, 7);
|
|
const current = monthlyData.get(monthKey) || { income: 0, expenses: 0 };
|
|
if (t.amount >= 0) {
|
|
current.income += t.amount;
|
|
} else {
|
|
current.expenses += Math.abs(t.amount);
|
|
}
|
|
monthlyData.set(monthKey, current);
|
|
});
|
|
|
|
const monthlyChartData = Array.from(monthlyData.entries())
|
|
.sort((a, b) => a[0].localeCompare(b[0]))
|
|
.map(([month, values]) => ({
|
|
month: new Date(month + "-01").toLocaleDateString("fr-FR", {
|
|
month: "short",
|
|
year: "numeric",
|
|
}),
|
|
revenus: Math.round(values.income),
|
|
depenses: Math.round(values.expenses),
|
|
solde: Math.round(values.income - values.expenses),
|
|
}));
|
|
|
|
// Category breakdown (expenses only)
|
|
const categoryTotals = new Map<string, number>();
|
|
transactions
|
|
.filter((t) => t.amount < 0)
|
|
.forEach((t) => {
|
|
const catId = t.categoryId || "uncategorized";
|
|
const current = categoryTotals.get(catId) || 0;
|
|
categoryTotals.set(catId, current + Math.abs(t.amount));
|
|
});
|
|
|
|
const categoryChartData = Array.from(categoryTotals.entries())
|
|
.map(([categoryId, total]) => {
|
|
const category = data.categories.find((c) => c.id === categoryId);
|
|
return {
|
|
name: category?.name || "Non catégorisé",
|
|
value: Math.round(total),
|
|
color: category?.color || "#94a3b8",
|
|
icon: category?.icon || "HelpCircle",
|
|
};
|
|
})
|
|
.sort((a, b) => b.value - a.value)
|
|
.slice(0, 8);
|
|
|
|
// Top expenses - deduplicate by ID and sort by amount (most negative first)
|
|
const uniqueTransactions = Array.from(
|
|
new Map(transactions.map((t) => [t.id, t])).values()
|
|
);
|
|
const topExpenses = uniqueTransactions
|
|
.filter((t) => t.amount < 0)
|
|
.sort((a, b) => {
|
|
// Sort by amount (most negative first)
|
|
if (a.amount !== b.amount) {
|
|
return a.amount - b.amount;
|
|
}
|
|
// If same amount, sort by date (most recent first) for stable sorting
|
|
return new Date(b.date).getTime() - new Date(a.date).getTime();
|
|
})
|
|
.slice(0, 5);
|
|
|
|
// Summary
|
|
const totalIncome = transactions
|
|
.filter((t) => t.amount >= 0)
|
|
.reduce((sum, t) => sum + t.amount, 0);
|
|
const totalExpenses = transactions
|
|
.filter((t) => t.amount < 0)
|
|
.reduce((sum, t) => sum + Math.abs(t.amount), 0);
|
|
const avgMonthlyExpenses =
|
|
monthlyData.size > 0 ? totalExpenses / monthlyData.size : 0;
|
|
|
|
// Balance evolution - Aggregated (using filtered transactions)
|
|
const sortedFilteredTransactions = [...transactions].sort(
|
|
(a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()
|
|
);
|
|
|
|
// Calculate starting balance: initialBalance + transactions before startDate
|
|
let runningBalance = 0;
|
|
const accountsToUse = selectedAccounts.includes("all")
|
|
? data.accounts
|
|
: data.accounts.filter((acc) => selectedAccounts.includes(acc.id));
|
|
|
|
// Start with initial balances
|
|
runningBalance = accountsToUse.reduce(
|
|
(sum, acc) => sum + (acc.initialBalance || 0),
|
|
0,
|
|
);
|
|
|
|
// Add all transactions before the start date for these accounts
|
|
const accountsToUseIds = new Set(accountsToUse.map((a) => a.id));
|
|
data.transactions
|
|
.filter((t) => {
|
|
// Filter by account
|
|
if (!accountsToUseIds.has(t.accountId)) return false;
|
|
// Filter by category if needed
|
|
if (!selectedCategories.includes("all")) {
|
|
if (selectedCategories.includes("uncategorized")) {
|
|
if (t.categoryId) return false;
|
|
} else {
|
|
if (!t.categoryId || !selectedCategories.includes(t.categoryId))
|
|
return false;
|
|
}
|
|
}
|
|
// Exclude "Virement interne" category if checkbox is checked
|
|
if (excludeInternalTransfers && internalTransferCategory) {
|
|
if (t.categoryId === internalTransferCategory.id) return false;
|
|
}
|
|
// Only transactions before startDate
|
|
const transactionDate = new Date(t.date);
|
|
return transactionDate < startDate;
|
|
})
|
|
.forEach((t) => {
|
|
runningBalance += t.amount;
|
|
});
|
|
|
|
const aggregatedBalanceByDate = new Map<string, number>();
|
|
sortedFilteredTransactions.forEach((t) => {
|
|
runningBalance += t.amount;
|
|
aggregatedBalanceByDate.set(t.date, runningBalance);
|
|
});
|
|
|
|
const aggregatedBalanceData = Array.from(
|
|
aggregatedBalanceByDate.entries()
|
|
).map(([date, balance]) => ({
|
|
date: new Date(date).toLocaleDateString("fr-FR", {
|
|
day: "2-digit",
|
|
month: "short",
|
|
year: "numeric",
|
|
}),
|
|
solde: Math.round(balance),
|
|
}));
|
|
|
|
// Balance evolution - Per account (using filtered transactions)
|
|
const accountBalances = new Map<string, Map<string, number>>();
|
|
data.accounts.forEach((account) => {
|
|
accountBalances.set(account.id, new Map());
|
|
});
|
|
|
|
// Calculate running balance per account
|
|
// Start with initialBalance + transactions before startDate
|
|
const accountRunningBalances = new Map<string, number>();
|
|
data.accounts.forEach((account) => {
|
|
let accountBalance = account.initialBalance || 0;
|
|
// Add transactions before startDate for this account
|
|
data.transactions
|
|
.filter((t) => {
|
|
if (t.accountId !== account.id) return false;
|
|
// Filter by category if needed
|
|
if (!selectedCategories.includes("all")) {
|
|
if (selectedCategories.includes("uncategorized")) {
|
|
if (t.categoryId) return false;
|
|
} else {
|
|
if (!t.categoryId || !selectedCategories.includes(t.categoryId))
|
|
return false;
|
|
}
|
|
}
|
|
// Exclude "Virement interne" category if checkbox is checked
|
|
if (excludeInternalTransfers && internalTransferCategory) {
|
|
if (t.categoryId === internalTransferCategory.id) return false;
|
|
}
|
|
const transactionDate = new Date(t.date);
|
|
return transactionDate < startDate;
|
|
})
|
|
.forEach((t) => {
|
|
accountBalance += t.amount;
|
|
});
|
|
accountRunningBalances.set(account.id, accountBalance);
|
|
});
|
|
|
|
sortedFilteredTransactions.forEach((t) => {
|
|
const currentBalance = accountRunningBalances.get(t.accountId) || 0;
|
|
const newBalance = currentBalance + t.amount;
|
|
accountRunningBalances.set(t.accountId, newBalance);
|
|
|
|
const accountDates = accountBalances.get(t.accountId);
|
|
if (accountDates) {
|
|
accountDates.set(t.date, newBalance);
|
|
}
|
|
});
|
|
|
|
// Merge all dates and create data points
|
|
const allDates = new Set<string>();
|
|
accountBalances.forEach((dates) => {
|
|
dates.forEach((_, date) => allDates.add(date));
|
|
});
|
|
|
|
const sortedDates = Array.from(allDates).sort();
|
|
const lastBalances = new Map<string, number>();
|
|
// Initialize with the starting balance (initialBalance + transactions before startDate)
|
|
data.accounts.forEach((account) => {
|
|
const startingBalance = accountRunningBalances.get(account.id) || 0;
|
|
lastBalances.set(account.id, startingBalance);
|
|
});
|
|
|
|
const perAccountBalanceData = sortedDates.map((date) => {
|
|
const point: { date: string; [key: string]: string | number } = {
|
|
date: new Date(date).toLocaleDateString("fr-FR", {
|
|
day: "2-digit",
|
|
month: "short",
|
|
year: "numeric",
|
|
}),
|
|
};
|
|
|
|
data.accounts.forEach((account) => {
|
|
const accountDates = accountBalances.get(account.id);
|
|
if (accountDates?.has(date)) {
|
|
lastBalances.set(account.id, accountDates.get(date)!);
|
|
}
|
|
point[account.id] = Math.round(lastBalances.get(account.id) || 0);
|
|
});
|
|
|
|
return point;
|
|
});
|
|
|
|
return {
|
|
monthlyChartData,
|
|
categoryChartData,
|
|
topExpenses,
|
|
totalIncome,
|
|
totalExpenses,
|
|
avgMonthlyExpenses,
|
|
aggregatedBalanceData,
|
|
perAccountBalanceData,
|
|
transactionCount: transactions.length,
|
|
};
|
|
}, [data, startDate, endDate, selectedAccounts, selectedCategories, excludeInternalTransfers, internalTransferCategory]);
|
|
|
|
const formatCurrency = (amount: number) => {
|
|
return new Intl.NumberFormat("fr-FR", {
|
|
style: "currency",
|
|
currency: "EUR",
|
|
}).format(amount);
|
|
};
|
|
|
|
if (isLoading || !data || !stats) {
|
|
return <LoadingState />;
|
|
}
|
|
|
|
return (
|
|
<PageLayout>
|
|
<PageHeader
|
|
title="Statistiques"
|
|
description="Analysez vos dépenses et revenus"
|
|
/>
|
|
|
|
<Card className="mb-6">
|
|
<CardContent className="pt-4">
|
|
<div className="flex flex-wrap gap-4">
|
|
<AccountFilterCombobox
|
|
accounts={data.accounts}
|
|
folders={data.folders}
|
|
value={selectedAccounts}
|
|
onChange={setSelectedAccounts}
|
|
className="w-[280px]"
|
|
filteredTransactions={transactionsForAccountFilter}
|
|
/>
|
|
|
|
<CategoryFilterCombobox
|
|
categories={data.categories}
|
|
value={selectedCategories}
|
|
onChange={setSelectedCategories}
|
|
className="w-[220px]"
|
|
filteredTransactions={transactionsForCategoryFilter}
|
|
/>
|
|
|
|
<Select
|
|
value={period}
|
|
onValueChange={(v) => {
|
|
setPeriod(v as Period);
|
|
if (v !== "custom") {
|
|
setIsCustomDatePickerOpen(false);
|
|
} else {
|
|
setIsCustomDatePickerOpen(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={setIsCustomDatePickerOpen}>
|
|
<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) => {
|
|
setCustomStartDate(date);
|
|
if (date && customEndDate && date > customEndDate) {
|
|
setCustomEndDate(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;
|
|
}
|
|
setCustomEndDate(date);
|
|
if (date && customStartDate) {
|
|
setIsCustomDatePickerOpen(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={() => {
|
|
setCustomStartDate(undefined);
|
|
setCustomEndDate(undefined);
|
|
}}
|
|
>
|
|
Réinitialiser
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
className="flex-1"
|
|
onClick={() => setIsCustomDatePickerOpen(false)}
|
|
>
|
|
Valider
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
)}
|
|
|
|
{internalTransferCategory && (
|
|
<div className="flex items-center gap-2 px-3 py-2 border border-border rounded-md bg-[var(--card)]">
|
|
<Checkbox
|
|
id="exclude-internal-transfers"
|
|
checked={excludeInternalTransfers}
|
|
onCheckedChange={(checked) => setExcludeInternalTransfers(checked === true)}
|
|
/>
|
|
<label
|
|
htmlFor="exclude-internal-transfers"
|
|
className="text-sm font-medium cursor-pointer select-none"
|
|
>
|
|
Exclure Virement interne
|
|
</label>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<ActiveFilters
|
|
selectedAccounts={selectedAccounts}
|
|
onRemoveAccount={(id) => {
|
|
const newAccounts = selectedAccounts.filter((a) => a !== id);
|
|
setSelectedAccounts(newAccounts.length > 0 ? newAccounts : ["all"]);
|
|
}}
|
|
onClearAccounts={() => setSelectedAccounts(["all"])}
|
|
selectedCategories={selectedCategories}
|
|
onRemoveCategory={(id) => {
|
|
const newCategories = selectedCategories.filter((c) => c !== id);
|
|
setSelectedCategories(newCategories.length > 0 ? newCategories : ["all"]);
|
|
}}
|
|
onClearCategories={() => setSelectedCategories(["all"])}
|
|
period={period}
|
|
onClearPeriod={() => {
|
|
setPeriod("all");
|
|
setCustomStartDate(undefined);
|
|
setCustomEndDate(undefined);
|
|
}}
|
|
accounts={data.accounts}
|
|
categories={data.categories}
|
|
customStartDate={customStartDate}
|
|
customEndDate={customEndDate}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<StatsSummaryCards
|
|
totalIncome={stats.totalIncome}
|
|
totalExpenses={stats.totalExpenses}
|
|
avgMonthlyExpenses={stats.avgMonthlyExpenses}
|
|
formatCurrency={formatCurrency}
|
|
/>
|
|
|
|
<div className="grid gap-6 lg:grid-cols-2">
|
|
<MonthlyChart
|
|
data={stats.monthlyChartData}
|
|
formatCurrency={formatCurrency}
|
|
/>
|
|
<CategoryPieChart
|
|
data={stats.categoryChartData}
|
|
formatCurrency={formatCurrency}
|
|
/>
|
|
<BalanceLineChart
|
|
aggregatedData={stats.aggregatedBalanceData}
|
|
perAccountData={stats.perAccountBalanceData}
|
|
accounts={data.accounts}
|
|
formatCurrency={formatCurrency}
|
|
/>
|
|
<TopExpensesList
|
|
expenses={stats.topExpenses}
|
|
categories={data.categories}
|
|
formatCurrency={formatCurrency}
|
|
/>
|
|
</div>
|
|
</PageLayout>
|
|
);
|
|
}
|
|
|
|
function ActiveFilters({
|
|
selectedAccounts,
|
|
onRemoveAccount,
|
|
onClearAccounts,
|
|
selectedCategories,
|
|
onRemoveCategory,
|
|
onClearCategories,
|
|
period,
|
|
onClearPeriod,
|
|
accounts,
|
|
categories,
|
|
customStartDate,
|
|
customEndDate,
|
|
}: {
|
|
selectedAccounts: string[];
|
|
onRemoveAccount: (id: string) => void;
|
|
onClearAccounts: () => void;
|
|
selectedCategories: string[];
|
|
onRemoveCategory: (id: string) => void;
|
|
onClearCategories: () => void;
|
|
period: Period;
|
|
onClearPeriod: () => void;
|
|
accounts: Account[];
|
|
categories: Category[];
|
|
customStartDate?: Date;
|
|
customEndDate?: Date;
|
|
}) {
|
|
const hasAccounts = !selectedAccounts.includes("all");
|
|
const hasCategories = !selectedCategories.includes("all");
|
|
const hasPeriod = period !== "all";
|
|
|
|
const hasActiveFilters = hasAccounts || hasCategories || hasPeriod;
|
|
|
|
if (!hasActiveFilters) return null;
|
|
|
|
const selectedAccs = accounts.filter((a) => selectedAccounts.includes(a.id));
|
|
const selectedCats = categories.filter((c) => selectedCategories.includes(c.id));
|
|
const isUncategorized = selectedCategories.includes("uncategorized");
|
|
|
|
const getPeriodLabel = (p: Period) => {
|
|
switch (p) {
|
|
case "1month":
|
|
return "1 mois";
|
|
case "3months":
|
|
return "3 mois";
|
|
case "6months":
|
|
return "6 mois";
|
|
case "12months":
|
|
return "12 mois";
|
|
case "custom":
|
|
if (customStartDate && customEndDate) {
|
|
return `${format(customStartDate, "d MMM", { locale: fr })} - ${format(customEndDate, "d MMM yyyy", { locale: fr })}`;
|
|
}
|
|
return "Personnalisé";
|
|
default:
|
|
return "Tout";
|
|
}
|
|
};
|
|
|
|
const clearAll = () => {
|
|
onClearAccounts();
|
|
onClearCategories();
|
|
onClearPeriod();
|
|
};
|
|
|
|
return (
|
|
<div className="flex items-center gap-2 mt-3 pt-3 border-t border-border flex-wrap">
|
|
<Filter className="h-3.5 w-3.5 text-muted-foreground" />
|
|
|
|
{selectedAccs.map((acc) => (
|
|
<Badge key={acc.id} variant="secondary" className="gap-1 text-xs font-normal">
|
|
<Wallet className="h-3 w-3" />
|
|
{acc.name}
|
|
<button
|
|
onClick={() => onRemoveAccount(acc.id)}
|
|
className="ml-1 hover:text-foreground"
|
|
>
|
|
<X className="h-3 w-3" />
|
|
</button>
|
|
</Badge>
|
|
))}
|
|
|
|
{isUncategorized && (
|
|
<Badge variant="secondary" className="gap-1 text-xs font-normal">
|
|
<CircleSlash className="h-3 w-3" />
|
|
Non catégorisé
|
|
<button onClick={onClearCategories} className="ml-1 hover:text-foreground">
|
|
<X className="h-3 w-3" />
|
|
</button>
|
|
</Badge>
|
|
)}
|
|
|
|
{selectedCats.map((cat) => (
|
|
<Badge
|
|
key={cat.id}
|
|
variant="secondary"
|
|
className="gap-1 text-xs font-normal"
|
|
style={{
|
|
backgroundColor: `${cat.color}15`,
|
|
borderColor: `${cat.color}30`,
|
|
}}
|
|
>
|
|
<CategoryIcon icon={cat.icon} color={cat.color} size={12} />
|
|
{cat.name}
|
|
<button
|
|
onClick={() => onRemoveCategory(cat.id)}
|
|
className="ml-1 hover:text-foreground"
|
|
>
|
|
<X className="h-3 w-3" />
|
|
</button>
|
|
</Badge>
|
|
))}
|
|
|
|
{hasPeriod && (
|
|
<Badge variant="secondary" className="gap-1 text-xs font-normal">
|
|
<Calendar className="h-3 w-3" />
|
|
{getPeriodLabel(period)}
|
|
<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"
|
|
>
|
|
Effacer tout
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|