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

feat: implement enhanced transaction filtering capabilities with support for account and category filters, improving data visibility and user interaction

Browse Source
This commit is contained in:
Julien Froidefond
2025-11-29 19:19:21 +01:00
parent 921ee4a5f0
commit 5195f4adad
5 changed files with 234 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
app/statistics/page.tsx
View File

@@ -33,25 +33,55 @@ export default function StatisticsPage() {
const [selectedAccounts, setSelectedAccounts] = useState<string[]>(["all"]);
const [selectedCategories, setSelectedCategories] = useState<string[]>(["all"]);
const stats = useMemo(() => {
if (!data) return null;
// Get start date based on period
const startDate = useMemo(() => {
const now = new Date();
let startDate: Date;
switch (period) {
case "3months":
startDate = new Date(now.getFullYear(), now.getMonth() - 3, 1);
break;
return new Date(now.getFullYear(), now.getMonth() - 3, 1);
case "6months":
startDate = new Date(now.getFullYear(), now.getMonth() - 6, 1);
break;
return new Date(now.getFullYear(), now.getMonth() - 6, 1);
case "12months":
startDate = new Date(now.getFullYear(), now.getMonth() - 12, 1);
break;
return new Date(now.getFullYear(), now.getMonth() - 12, 1);
default:
startDate = new Date(0);
return new Date(0);
}
}, [period]);
// Transactions filtered for account filter (by categories, period - not accounts)
const transactionsForAccountFilter = useMemo(() => {
if (!data) return [];
return data.transactions.filter(
(t) => new Date(t.date) >= startDate
).filter((t) => {
if (!selectedCategories.includes("all")) {
if (selectedCategories.includes("uncategorized")) {
return !t.categoryId;
} else {
return t.categoryId && selectedCategories.includes(t.categoryId);
}
}
return true;
});
}, [data, startDate, selectedCategories]);
// Transactions filtered for category filter (by accounts, period - not categories)
const transactionsForCategoryFilter = useMemo(() => {
if (!data) return [];
return data.transactions.filter(
(t) => new Date(t.date) >= startDate
).filter((t) => {
if (!selectedAccounts.includes("all")) {
return selectedAccounts.includes(t.accountId);
}
return true;
});
}, [data, startDate, selectedAccounts]);
const stats = useMemo(() => {
if (!data) return null;
let transactions = data.transactions.filter(
(t) => new Date(t.date) >= startDate
@@ -226,7 +256,7 @@ export default function StatisticsPage() {
perAccountBalanceData,
transactionCount: transactions.length,
};
}, [data, period, selectedAccounts, selectedCategories]);
}, [data, startDate, selectedAccounts, selectedCategories]);
const formatCurrency = (amount: number) => {
return new Intl.NumberFormat("fr-FR", {
@@ -255,6 +285,7 @@ export default function StatisticsPage() {
value={selectedAccounts}
onChange={setSelectedAccounts}
className="w-[200px]"
filteredTransactions={transactionsForAccountFilter}
/>
<CategoryFilterCombobox
@@ -262,6 +293,7 @@ export default function StatisticsPage() {
value={selectedCategories}
onChange={setSelectedCategories}
className="w-[220px]"
filteredTransactions={transactionsForCategoryFilter}
/>
<Select

68
app/transactions/page.tsx
View File

@@ -46,6 +46,72 @@ export default function TransactionsPage() {
const [ruleDialogOpen, setRuleDialogOpen] = useState(false);
const [ruleTransaction, setRuleTransaction] = useState<Transaction | null>(null);
// Transactions filtered for account filter (by categories, search, reconciled - not accounts)
const transactionsForAccountFilter = useMemo(() => {
if (!data) return [];
let transactions = [...data.transactions];
if (searchQuery) {
const query = searchQuery.toLowerCase();
transactions = transactions.filter(
(t) =>
t.description.toLowerCase().includes(query) ||
t.memo?.toLowerCase().includes(query)
);
}
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)
);
}
}
if (showReconciled !== "all") {
const isReconciled = showReconciled === "reconciled";
transactions = transactions.filter(
(t) => t.isReconciled === isReconciled
);
}
return transactions;
}, [data, searchQuery, selectedCategories, showReconciled]);
// Transactions filtered for category filter (by accounts, search, reconciled - not categories)
const transactionsForCategoryFilter = useMemo(() => {
if (!data) return [];
let transactions = [...data.transactions];
if (searchQuery) {
const query = searchQuery.toLowerCase();
transactions = transactions.filter(
(t) =>
t.description.toLowerCase().includes(query) ||
t.memo?.toLowerCase().includes(query)
);
}
if (!selectedAccounts.includes("all")) {
transactions = transactions.filter(
(t) => selectedAccounts.includes(t.accountId)
);
}
if (showReconciled !== "all") {
const isReconciled = showReconciled === "reconciled";
transactions = transactions.filter(
(t) => t.isReconciled === isReconciled
);
}
return transactions;
}, [data, searchQuery, selectedAccounts, showReconciled]);
const filteredTransactions = useMemo(() => {
if (!data) return [];
@@ -385,6 +451,8 @@ export default function TransactionsPage() {
accounts={data.accounts}
folders={data.folders}
categories={data.categories}
transactionsForAccountFilter={transactionsForAccountFilter}
transactionsForCategoryFilter={transactionsForCategoryFilter}
/>
<TransactionBulkActions

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

@@ -14,7 +14,7 @@ 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 type { Account, Category, Folder } from "@/lib/types";
import type { Account, Category, Folder, Transaction } from "@/lib/types";
interface TransactionFiltersProps {
searchQuery: string;
@@ -28,6 +28,8 @@ interface TransactionFiltersProps {
accounts: Account[];
folders: Folder[];
categories: Category[];
transactionsForAccountFilter?: Transaction[]; // Filtered by categories, search, reconciled (not accounts)
transactionsForCategoryFilter?: Transaction[]; // Filtered by accounts, search, reconciled (not categories)
}
export function TransactionFilters({
@@ -42,6 +44,8 @@ export function TransactionFilters({
accounts,
folders,
categories,
transactionsForAccountFilter,
transactionsForCategoryFilter,
}: TransactionFiltersProps) {
return (
<Card>
@@ -65,6 +69,7 @@ export function TransactionFilters({
value={selectedAccounts}
onChange={onAccountsChange}
className="w-[200px]"
filteredTransactions={transactionsForAccountFilter}
/>
<CategoryFilterCombobox
@@ -72,6 +77,7 @@ export function TransactionFilters({
value={selectedCategories}
onChange={onCategoriesChange}
className="w-[220px]"
filteredTransactions={transactionsForCategoryFilter}
/>
<Select value={showReconciled} onValueChange={onReconciledChange}>

56
components/ui/account-filter-combobox.tsx
View File

@@ -18,7 +18,7 @@ import {
import { CategoryIcon } from "@/components/ui/category-icon";
import { ChevronsUpDown, Check, Wallet, X } from "lucide-react";
import { cn } from "@/lib/utils";
import type { Account, Folder } from "@/lib/types";
import type { Account, Folder, Transaction } from "@/lib/types";
interface AccountFilterComboboxProps {
accounts: Account[];
@@ -26,6 +26,7 @@ interface AccountFilterComboboxProps {
value: string[]; // ["all"] | [accountId, accountId, ...]
onChange: (value: string[]) => void;
className?: string;
filteredTransactions?: Transaction[]; // Transactions filtered by other filters (categories, period, etc.)
}
export function AccountFilterCombobox({
@@ -34,9 +35,31 @@ export function AccountFilterCombobox({
value,
onChange,
className,
filteredTransactions,
}: AccountFilterComboboxProps) {
const [open, setOpen] = useState(false);
// Calculate total amount per account based on filtered transactions
const accountTotals = useMemo(() => {
if (!filteredTransactions) return {};
const totals: Record<string, number> = {};
filteredTransactions.forEach((t) => {
totals[t.accountId] = (totals[t.accountId] || 0) + t.amount;
});
return totals;
}, [filteredTransactions]);
const formatCurrency = (amount: number) => {
return new Intl.NumberFormat("fr-FR", {
style: "currency",
currency: "EUR",
minimumFractionDigits: 0,
maximumFractionDigits: 0,
}).format(amount);
};
// Get root folders (folders without parent) - same as folders/page.tsx
const rootFolders = useMemo(
() => folders.filter((f) => f.parentId === null),
@@ -166,7 +189,9 @@ export function AccountFilterCombobox({
</CommandItem>
{/* Accounts in this folder */}
{folderAccounts.map((account) => (
{folderAccounts.map((account) => {
const total = accountTotals[account.id];
return (
<CommandItem
key={account.id}
value={`${currentPath} ${account.name}`}
@@ -175,6 +200,11 @@ export function AccountFilterCombobox({
>
<Wallet className="h-4 w-4 text-muted-foreground" />
<span>{account.name}</span>
{total !== undefined && (
<span className="text-xs text-muted-foreground ml-1">
({formatCurrency(total)})
</span>
)}
<Check
className={cn(
"ml-auto h-4 w-4",
@@ -182,7 +212,8 @@ export function AccountFilterCombobox({
)}
/>
</CommandItem>
))}
);
})}
{/* Child folders - recursive */}
{childFoldersList.map((childFolder) =>
@@ -251,6 +282,13 @@ export function AccountFilterCombobox({
<CommandItem value="all" onSelect={() => handleSelect("all")}>
<Wallet className="h-4 w-4 text-muted-foreground" />
<span>Tous les comptes</span>
{filteredTransactions && (
<span className="text-xs text-muted-foreground ml-1">
({formatCurrency(
filteredTransactions.reduce((sum, t) => sum + t.amount, 0)
)})
</span>
)}
<Check
className={cn(
"ml-auto h-4 w-4",
@@ -266,7 +304,9 @@ export function AccountFilterCombobox({
{orphanAccounts.length > 0 && (
<CommandGroup heading="Sans dossier">
{orphanAccounts.map((account) => (
{orphanAccounts.map((account) => {
const total = accountTotals[account.id];
return (
<CommandItem
key={account.id}
value={`sans-dossier ${account.name}`}
@@ -274,6 +314,11 @@ export function AccountFilterCombobox({
>
<Wallet className="h-4 w-4 text-muted-foreground" />
<span>{account.name}</span>
{total !== undefined && (
<span className="text-xs text-muted-foreground ml-1">
({formatCurrency(total)})
</span>
)}
<Check
className={cn(
"ml-auto h-4 w-4",
@@ -281,7 +326,8 @@ export function AccountFilterCombobox({
)}
/>
</CommandItem>
))}
);
})}
</CommandGroup>
)}
</CommandList>

37
components/ui/category-filter-combobox.tsx
View File

@@ -18,13 +18,14 @@ import {
import { CategoryIcon } from "@/components/ui/category-icon";
import { ChevronsUpDown, Check, Tags, CircleSlash, X } from "lucide-react";
import { cn } from "@/lib/utils";
import type { Category } from "@/lib/types";
import type { Category, Transaction } from "@/lib/types";
interface CategoryFilterComboboxProps {
categories: Category[];
value: string[]; // ["all"] | ["uncategorized"] | [categoryId, categoryId, ...]
onChange: (value: string[]) => void;
className?: string;
filteredTransactions?: Transaction[]; // Transactions filtered by other filters (accounts, period, etc.)
}
export function CategoryFilterCombobox({
@@ -32,9 +33,23 @@ export function CategoryFilterCombobox({
value,
onChange,
className,
filteredTransactions,
}: CategoryFilterComboboxProps) {
const [open, setOpen] = useState(false);
// Calculate transaction counts per category based on filtered transactions
const categoryCounts = useMemo(() => {
if (!filteredTransactions) return {};
const counts: Record<string, number> = {};
filteredTransactions.forEach((t) => {
const catId = t.categoryId || "uncategorized";
counts[catId] = (counts[catId] || 0) + 1;
});
return counts;
}, [filteredTransactions]);
// Organize categories by parent
const { parentCategories, childrenByParent } = useMemo(() => {
const parents = categories.filter((c) => c.parentId === null);
@@ -178,6 +193,11 @@ export function CategoryFilterCombobox({
<CommandItem value="all" onSelect={() => handleSelect("all")}>
<Tags className="h-4 w-4 text-muted-foreground" />
<span>Toutes catégories</span>
{filteredTransactions && (
<span className="text-xs text-muted-foreground ml-1">
({filteredTransactions.length})
</span>
)}
<Check
className={cn(
"ml-auto h-4 w-4",
@@ -191,6 +211,11 @@ export function CategoryFilterCombobox({
>
<CircleSlash className="h-4 w-4 text-muted-foreground" />
<span>Non catégorisé</span>
{categoryCounts["uncategorized"] !== undefined && (
<span className="text-xs text-muted-foreground ml-1">
({categoryCounts["uncategorized"]})
</span>
)}
<Check
className={cn(
"ml-auto h-4 w-4",
@@ -212,6 +237,11 @@ export function CategoryFilterCombobox({
size={16}
/>
<span className="font-medium">{parent.name}</span>
{categoryCounts[parent.id] !== undefined && (
<span className="text-xs text-muted-foreground ml-1">
({categoryCounts[parent.id]})
</span>
)}
<Check
className={cn(
"ml-auto h-4 w-4",
@@ -232,6 +262,11 @@ export function CategoryFilterCombobox({
size={16}
/>
<span>{child.name}</span>
{categoryCounts[child.id] !== undefined && (
<span className="text-xs text-muted-foreground ml-1">
({categoryCounts[child.id]})
</span>
)}
<Check
className={cn(
"ml-auto h-4 w-4",