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

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"
)}
/>