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
components/transactions/transaction-filters.tsx
View File

@@ -91,7 +91,7 @@ export function TransactionFilters({
folders={folders}
value={selectedAccounts}
onChange={onAccountsChange}
className="w-[200px]"
className="w-[280px]"
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 { cn } from "@/lib/utils";
import type { Account, Folder, Transaction } from "@/lib/types";
import { accountTypeIcons } from "@/components/accounts/constants";
interface AccountFilterComboboxProps {
accounts: Account[];
@@ -191,23 +192,25 @@ export function AccountFilterCombobox({
{/* Accounts in this folder */}
{folderAccounts.map((account) => {
const total = accountTotals[account.id];
const AccountIcon = accountTypeIcons[account.type];
return (
<CommandItem
key={account.id}
value={`${currentPath} ${account.name}`}
onSelect={() => handleSelect(account.id)}
style={{ paddingLeft: `${paddingLeft + 16}px` }}
className="min-w-0"
>
<Wallet className="h-4 w-4 text-muted-foreground" />
<span>{account.name}</span>
<AccountIcon className="h-4 w-4 text-muted-foreground shrink-0" />
<span className="truncate min-w-0 flex-1">{account.name}</span>
{total !== undefined && (
<span className="text-xs text-muted-foreground ml-1">
<span className="text-xs text-muted-foreground ml-1 shrink-0">
({formatCurrency(total)})
</span>
)}
<Check
className={cn(
"ml-auto h-4 w-4",
"ml-auto h-4 w-4 shrink-0",
value.includes(account.id) ? "opacity-100" : "opacity-0"
)}
/>
@@ -230,29 +233,32 @@ export function AccountFilterCombobox({
variant="outline"
role="combobox"
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 ? (
<>
<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 ? (
<>
<Wallet className="h-4 w-4 text-muted-foreground" />
<span className="truncate">
<Wallet className="h-4 w-4 text-muted-foreground shrink-0" />
<span className="truncate text-left">
{selectedAccounts.length} comptes
</span>
</>
) : (
<>
<Wallet className="h-4 w-4 text-muted-foreground" />
<span className="text-muted-foreground">Tous les comptes</span>
<Wallet className="h-4 w-4 text-muted-foreground shrink-0" />
<span className="text-muted-foreground truncate text-left">Tous les comptes</span>
</>
)}
</div>
<div className="flex items-center gap-1">
<div className="flex items-center gap-1 shrink-0 ml-2">
{!isAll && (
<div
role="button"
@@ -270,7 +276,7 @@ export function AccountFilterCombobox({
</Button>
</PopoverTrigger>
<PopoverContent
className="w-[300px] p-0"
className="w-[380px] p-0"
align="start"
onOpenAutoFocus={(e) => e.preventDefault()}
>
@@ -306,22 +312,24 @@ export function AccountFilterCombobox({
<CommandGroup heading="Sans dossier">
{orphanAccounts.map((account) => {
const total = accountTotals[account.id];
const AccountIcon = accountTypeIcons[account.type];
return (
<CommandItem
key={account.id}
value={`sans-dossier ${account.name}`}
onSelect={() => handleSelect(account.id)}
className="min-w-0"
>
<Wallet className="h-4 w-4 text-muted-foreground" />
<span>{account.name}</span>
<AccountIcon className="h-4 w-4 text-muted-foreground shrink-0" />
<span className="truncate min-w-0 flex-1">{account.name}</span>
{total !== undefined && (
<span className="text-xs text-muted-foreground ml-1">
<span className="text-xs text-muted-foreground ml-1 shrink-0">
({formatCurrency(total)})
</span>
)}
<Check
className={cn(
"ml-auto h-4 w-4",
"ml-auto h-4 w-4 shrink-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"
role="combobox"
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 ? (
<>
<CategoryIcon
icon={selectedCategories[0].icon}
color={selectedCategories[0].color}
size={16}
className="shrink-0"
/>
<span className="truncate">{selectedCategories[0].name}</span>
<span className="truncate text-left">{selectedCategories[0].name}</span>
</>
) : selectedCategories.length > 1 ? (
<>
<div className="flex -space-x-1">
<div className="flex -space-x-1 shrink-0">
{selectedCategories.slice(0, 3).map((cat) => (
<div
key={cat.id}
@@ -149,21 +150,21 @@ export function CategoryFilterCombobox({
/>
))}
</div>
<span className="truncate">{selectedCategories.length} catégories</span>
<span className="truncate text-left">{selectedCategories.length} catégories</span>
</>
) : isUncategorized ? (
<>
<CircleSlash className="h-4 w-4 text-muted-foreground" />
<span>Non catégorisé</span>
<CircleSlash className="h-4 w-4 text-muted-foreground shrink-0" />
<span className="truncate text-left">Non catégorisé</span>
</>
) : (
<>
<Tags className="h-4 w-4 text-muted-foreground" />
<span className="text-muted-foreground">{getDisplayValue()}</span>
<Tags className="h-4 w-4 text-muted-foreground shrink-0" />
<span className="text-muted-foreground truncate text-left">{getDisplayValue()}</span>
</>
)}
</div>
<div className="flex items-center gap-1">
<div className="flex items-center gap-1 shrink-0 ml-2">
{!isAll && (
<div
role="button"
@@ -181,7 +182,7 @@ export function CategoryFilterCombobox({
</Button>
</PopoverTrigger>
<PopoverContent
className="w-[280px] p-0"
className="w-[380px] p-0"
align="start"
onOpenAutoFocus={(e) => e.preventDefault()}
>
@@ -190,17 +191,17 @@ export function CategoryFilterCombobox({
<CommandList className="max-h-[300px]">
<CommandEmpty>Aucune catégorie trouvée.</CommandEmpty>
<CommandGroup>
<CommandItem value="all" onSelect={() => handleSelect("all")}>
<Tags className="h-4 w-4 text-muted-foreground" />
<span>Toutes catégories</span>
<CommandItem value="all" onSelect={() => handleSelect("all")} className="min-w-0">
<Tags className="h-4 w-4 text-muted-foreground shrink-0" />
<span className="truncate min-w-0 flex-1">Toutes catégories</span>
{filteredTransactions && (
<span className="text-xs text-muted-foreground ml-1">
<span className="text-xs text-muted-foreground ml-1 shrink-0">
({filteredTransactions.length})
</span>
)}
<Check
className={cn(
"ml-auto h-4 w-4",
"ml-auto h-4 w-4 shrink-0",
isAll ? "opacity-100" : "opacity-0"
)}
/>
@@ -208,17 +209,18 @@ export function CategoryFilterCombobox({
<CommandItem
value="uncategorized non catégorisé"
onSelect={() => handleSelect("uncategorized")}
className="min-w-0"
>
<CircleSlash className="h-4 w-4 text-muted-foreground" />
<span>Non catégorisé</span>
<CircleSlash className="h-4 w-4 text-muted-foreground shrink-0" />
<span className="truncate min-w-0 flex-1">Non catégorisé</span>
{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"]})
</span>
)}
<Check
className={cn(
"ml-auto h-4 w-4",
"ml-auto h-4 w-4 shrink-0",
isUncategorized ? "opacity-100" : "opacity-0"
)}
/>
@@ -230,21 +232,23 @@ export function CategoryFilterCombobox({
<CommandItem
value={`${parent.name}`}
onSelect={() => handleSelect(parent.id)}
className="min-w-0"
>
<CategoryIcon
icon={parent.icon}
color={parent.color}
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 && (
<span className="text-xs text-muted-foreground ml-1">
<span className="text-xs text-muted-foreground ml-1 shrink-0">
({categoryCounts[parent.id]})
</span>
)}
<Check
className={cn(
"ml-auto h-4 w-4",
"ml-auto h-4 w-4 shrink-0",
value.includes(parent.id) ? "opacity-100" : "opacity-0"
)}
/>
@@ -254,22 +258,23 @@ export function CategoryFilterCombobox({
key={child.id}
value={`${parent.name} ${child.name}`}
onSelect={() => handleSelect(child.id)}
className="pl-8"
className="pl-8 min-w-0"
>
<CategoryIcon
icon={child.icon}
color={child.color}
size={16}
className="shrink-0"
/>
<span>{child.name}</span>
<span className="truncate min-w-0 flex-1">{child.name}</span>
{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]})
</span>
)}
<Check
className={cn(
"ml-auto h-4 w-4",
"ml-auto h-4 w-4 shrink-0",
value.includes(child.id) ? "opacity-100" : "opacity-0"
)}
/>