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

feat: update filter component widths and improve layout consistency across dashboard and statistics pages

Browse Source
This commit is contained in:
Julien Froidefond
2025-11-30 16:26:20 +01:00
parent e67297bf2c
commit 2363cab09a
5 changed files with 61 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/page.tsx
View File

@@ -68,7 +68,7 @@ export default function DashboardPage() {
folders={data.folders} folders={data.folders}
value={selectedAccounts} value={selectedAccounts}
onChange={setSelectedAccounts} onChange={setSelectedAccounts}
className="w-[200px]" className="w-[280px]"
filteredTransactions={data.transactions} filteredTransactions={data.transactions}
/> />
</div> </div>

2
app/statistics/page.tsx
View File

@@ -448,7 +448,7 @@ export default function StatisticsPage() {
folders={data.folders} folders={data.folders}
value={selectedAccounts} value={selectedAccounts}
onChange={setSelectedAccounts} onChange={setSelectedAccounts}
className="w-[200px]" className="w-[280px]"
filteredTransactions={transactionsForAccountFilter} filteredTransactions={transactionsForAccountFilter}
/> />

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

@@ -91,7 +91,7 @@ export function TransactionFilters({
folders={folders} folders={folders}
value={selectedAccounts} value={selectedAccounts}
onChange={onAccountsChange} onChange={onAccountsChange}
className="w-[200px]" className="w-[280px]"
filteredTransactions={transactionsForAccountFilter} filteredTransactions={transactionsForAccountFilter}
/> />

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

@@ -19,6 +19,7 @@ import { CategoryIcon } from "@/components/ui/category-icon";
import { ChevronsUpDown, Check, Wallet, X } from "lucide-react"; import { ChevronsUpDown, Check, Wallet, X } from "lucide-react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import type { Account, Folder, Transaction } from "@/lib/types"; import type { Account, Folder, Transaction } from "@/lib/types";
import { accountTypeIcons } from "@/components/accounts/constants";
interface AccountFilterComboboxProps { interface AccountFilterComboboxProps {
accounts: Account[]; accounts: Account[];
@@ -191,23 +192,25 @@ export function AccountFilterCombobox({
{/* Accounts in this folder */} {/* Accounts in this folder */}
{folderAccounts.map((account) => { {folderAccounts.map((account) => {
const total = accountTotals[account.id]; const total = accountTotals[account.id];
const AccountIcon = accountTypeIcons[account.type];
return ( return (
<CommandItem <CommandItem
key={account.id} key={account.id}
value={`${currentPath} ${account.name}`} value={`${currentPath} ${account.name}`}
onSelect={() => handleSelect(account.id)} onSelect={() => handleSelect(account.id)}
style={{ paddingLeft: `${paddingLeft + 16}px` }} style={{ paddingLeft: `${paddingLeft + 16}px` }}
className="min-w-0"
> >
<Wallet className="h-4 w-4 text-muted-foreground" /> <AccountIcon className="h-4 w-4 text-muted-foreground shrink-0" />
<span>{account.name}</span> <span className="truncate min-w-0 flex-1">{account.name}</span>
{total !== undefined && ( {total !== undefined && (
<span className="text-xs text-muted-foreground ml-1"> <span className="text-xs text-muted-foreground ml-1 shrink-0">
({formatCurrency(total)}) ({formatCurrency(total)})
</span> </span>
)} )}
<Check <Check
className={cn( className={cn(
"ml-auto h-4 w-4", "ml-auto h-4 w-4 shrink-0",
value.includes(account.id) ? "opacity-100" : "opacity-0" value.includes(account.id) ? "opacity-100" : "opacity-0"
)} )}
/> />
@@ -230,29 +233,32 @@ export function AccountFilterCombobox({
variant="outline" variant="outline"
role="combobox" role="combobox"
aria-expanded={open} aria-expanded={open}
className={cn("justify-between", className)} className={cn("justify-between min-w-0", className)}
> >
<div className="flex items-center gap-2 min-w-0"> <div className="flex items-center gap-2 min-w-0 flex-1">
{selectedAccounts.length === 1 ? ( {selectedAccounts.length === 1 ? (
<> <>
<Wallet className="h-4 w-4 text-muted-foreground" /> {(() => {
<span className="truncate">{selectedAccounts[0].name}</span> const AccountIcon = accountTypeIcons[selectedAccounts[0].type];
return <AccountIcon className="h-4 w-4 text-muted-foreground shrink-0" />;
})()}
<span className="truncate text-left">{selectedAccounts[0].name}</span>
</> </>
) : selectedAccounts.length > 1 ? ( ) : selectedAccounts.length > 1 ? (
<> <>
<Wallet className="h-4 w-4 text-muted-foreground" /> <Wallet className="h-4 w-4 text-muted-foreground shrink-0" />
<span className="truncate"> <span className="truncate text-left">
{selectedAccounts.length} comptes {selectedAccounts.length} comptes
</span> </span>
</> </>
) : ( ) : (
<> <>
<Wallet className="h-4 w-4 text-muted-foreground" /> <Wallet className="h-4 w-4 text-muted-foreground shrink-0" />
<span className="text-muted-foreground">Tous les comptes</span> <span className="text-muted-foreground truncate text-left">Tous les comptes</span>
</> </>
)} )}
</div> </div>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1 shrink-0 ml-2">
{!isAll && ( {!isAll && (
<div <div
role="button" role="button"
@@ -270,7 +276,7 @@ export function AccountFilterCombobox({
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent <PopoverContent
className="w-[300px] p-0" className="w-[380px] p-0"
align="start" align="start"
onOpenAutoFocus={(e) => e.preventDefault()} onOpenAutoFocus={(e) => e.preventDefault()}
> >
@@ -306,22 +312,24 @@ export function AccountFilterCombobox({
<CommandGroup heading="Sans dossier"> <CommandGroup heading="Sans dossier">
{orphanAccounts.map((account) => { {orphanAccounts.map((account) => {
const total = accountTotals[account.id]; const total = accountTotals[account.id];
const AccountIcon = accountTypeIcons[account.type];
return ( return (
<CommandItem <CommandItem
key={account.id} key={account.id}
value={`sans-dossier ${account.name}`} value={`sans-dossier ${account.name}`}
onSelect={() => handleSelect(account.id)} onSelect={() => handleSelect(account.id)}
className="min-w-0"
> >
<Wallet className="h-4 w-4 text-muted-foreground" /> <AccountIcon className="h-4 w-4 text-muted-foreground shrink-0" />
<span>{account.name}</span> <span className="truncate min-w-0 flex-1">{account.name}</span>
{total !== undefined && ( {total !== undefined && (
<span className="text-xs text-muted-foreground ml-1"> <span className="text-xs text-muted-foreground ml-1 shrink-0">
({formatCurrency(total)}) ({formatCurrency(total)})
</span> </span>
)} )}
<Check <Check
className={cn( className={cn(
"ml-auto h-4 w-4", "ml-auto h-4 w-4 shrink-0",
value.includes(account.id) ? "opacity-100" : "opacity-0" value.includes(account.id) ? "opacity-100" : "opacity-0"
)} )}
/> />

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

@@ -126,21 +126,22 @@ export function CategoryFilterCombobox({
variant="outline" variant="outline"
role="combobox" role="combobox"
aria-expanded={open} aria-expanded={open}
className={cn("justify-between", className)} className={cn("justify-between min-w-0", className)}
> >
<div className="flex items-center gap-2 min-w-0"> <div className="flex items-center gap-2 min-w-0 flex-1">
{selectedCategories.length === 1 ? ( {selectedCategories.length === 1 ? (
<> <>
<CategoryIcon <CategoryIcon
icon={selectedCategories[0].icon} icon={selectedCategories[0].icon}
color={selectedCategories[0].color} color={selectedCategories[0].color}
size={16} size={16}
className="shrink-0"
/> />
<span className="truncate">{selectedCategories[0].name}</span> <span className="truncate text-left">{selectedCategories[0].name}</span>
</> </>
) : selectedCategories.length > 1 ? ( ) : selectedCategories.length > 1 ? (
<> <>
<div className="flex -space-x-1"> <div className="flex -space-x-1 shrink-0">
{selectedCategories.slice(0, 3).map((cat) => ( {selectedCategories.slice(0, 3).map((cat) => (
<div <div
key={cat.id} key={cat.id}
@@ -149,21 +150,21 @@ export function CategoryFilterCombobox({
/> />
))} ))}
</div> </div>
<span className="truncate">{selectedCategories.length} catégories</span> <span className="truncate text-left">{selectedCategories.length} catégories</span>
</> </>
) : isUncategorized ? ( ) : isUncategorized ? (
<> <>
<CircleSlash className="h-4 w-4 text-muted-foreground" /> <CircleSlash className="h-4 w-4 text-muted-foreground shrink-0" />
<span>Non catégorisé</span> <span className="truncate text-left">Non catégorisé</span>
</> </>
) : ( ) : (
<> <>
<Tags className="h-4 w-4 text-muted-foreground" /> <Tags className="h-4 w-4 text-muted-foreground shrink-0" />
<span className="text-muted-foreground">{getDisplayValue()}</span> <span className="text-muted-foreground truncate text-left">{getDisplayValue()}</span>
</> </>
)} )}
</div> </div>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1 shrink-0 ml-2">
{!isAll && ( {!isAll && (
<div <div
role="button" role="button"
@@ -181,7 +182,7 @@ export function CategoryFilterCombobox({
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent <PopoverContent
className="w-[280px] p-0" className="w-[380px] p-0"
align="start" align="start"
onOpenAutoFocus={(e) => e.preventDefault()} onOpenAutoFocus={(e) => e.preventDefault()}
> >
@@ -190,17 +191,17 @@ export function CategoryFilterCombobox({
<CommandList className="max-h-[300px]"> <CommandList className="max-h-[300px]">
<CommandEmpty>Aucune catégorie trouvée.</CommandEmpty> <CommandEmpty>Aucune catégorie trouvée.</CommandEmpty>
<CommandGroup> <CommandGroup>
<CommandItem value="all" onSelect={() => handleSelect("all")}> <CommandItem value="all" onSelect={() => handleSelect("all")} className="min-w-0">
<Tags className="h-4 w-4 text-muted-foreground" /> <Tags className="h-4 w-4 text-muted-foreground shrink-0" />
<span>Toutes catégories</span> <span className="truncate min-w-0 flex-1">Toutes catégories</span>
{filteredTransactions && ( {filteredTransactions && (
<span className="text-xs text-muted-foreground ml-1"> <span className="text-xs text-muted-foreground ml-1 shrink-0">
({filteredTransactions.length}) ({filteredTransactions.length})
</span> </span>
)} )}
<Check <Check
className={cn( className={cn(
"ml-auto h-4 w-4", "ml-auto h-4 w-4 shrink-0",
isAll ? "opacity-100" : "opacity-0" isAll ? "opacity-100" : "opacity-0"
)} )}
/> />
@@ -208,17 +209,18 @@ export function CategoryFilterCombobox({
<CommandItem <CommandItem
value="uncategorized non catégorisé" value="uncategorized non catégorisé"
onSelect={() => handleSelect("uncategorized")} onSelect={() => handleSelect("uncategorized")}
className="min-w-0"
> >
<CircleSlash className="h-4 w-4 text-muted-foreground" /> <CircleSlash className="h-4 w-4 text-muted-foreground shrink-0" />
<span>Non catégorisé</span> <span className="truncate min-w-0 flex-1">Non catégorisé</span>
{categoryCounts["uncategorized"] !== undefined && ( {categoryCounts["uncategorized"] !== undefined && (
<span className="text-xs text-muted-foreground ml-1"> <span className="text-xs text-muted-foreground ml-1 shrink-0">
({categoryCounts["uncategorized"]}) ({categoryCounts["uncategorized"]})
</span> </span>
)} )}
<Check <Check
className={cn( className={cn(
"ml-auto h-4 w-4", "ml-auto h-4 w-4 shrink-0",
isUncategorized ? "opacity-100" : "opacity-0" isUncategorized ? "opacity-100" : "opacity-0"
)} )}
/> />
@@ -230,21 +232,23 @@ export function CategoryFilterCombobox({
<CommandItem <CommandItem
value={`${parent.name}`} value={`${parent.name}`}
onSelect={() => handleSelect(parent.id)} onSelect={() => handleSelect(parent.id)}
className="min-w-0"
> >
<CategoryIcon <CategoryIcon
icon={parent.icon} icon={parent.icon}
color={parent.color} color={parent.color}
size={16} size={16}
className="shrink-0"
/> />
<span className="font-medium">{parent.name}</span> <span className="font-medium truncate min-w-0 flex-1">{parent.name}</span>
{categoryCounts[parent.id] !== undefined && ( {categoryCounts[parent.id] !== undefined && (
<span className="text-xs text-muted-foreground ml-1"> <span className="text-xs text-muted-foreground ml-1 shrink-0">
({categoryCounts[parent.id]}) ({categoryCounts[parent.id]})
</span> </span>
)} )}
<Check <Check
className={cn( className={cn(
"ml-auto h-4 w-4", "ml-auto h-4 w-4 shrink-0",
value.includes(parent.id) ? "opacity-100" : "opacity-0" value.includes(parent.id) ? "opacity-100" : "opacity-0"
)} )}
/> />
@@ -254,22 +258,23 @@ export function CategoryFilterCombobox({
key={child.id} key={child.id}
value={`${parent.name} ${child.name}`} value={`${parent.name} ${child.name}`}
onSelect={() => handleSelect(child.id)} onSelect={() => handleSelect(child.id)}
className="pl-8" className="pl-8 min-w-0"
> >
<CategoryIcon <CategoryIcon
icon={child.icon} icon={child.icon}
color={child.color} color={child.color}
size={16} size={16}
className="shrink-0"
/> />
<span>{child.name}</span> <span className="truncate min-w-0 flex-1">{child.name}</span>
{categoryCounts[child.id] !== undefined && ( {categoryCounts[child.id] !== undefined && (
<span className="text-xs text-muted-foreground ml-1"> <span className="text-xs text-muted-foreground ml-1 shrink-0">
({categoryCounts[child.id]}) ({categoryCounts[child.id]})
</span> </span>
)} )}
<Check <Check
className={cn( className={cn(
"ml-auto h-4 w-4", "ml-auto h-4 w-4 shrink-0",
value.includes(child.id) ? "opacity-100" : "opacity-0" value.includes(child.id) ? "opacity-100" : "opacity-0"
)} )}
/> />