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

fix: standardize formatting and improve readability across various components and styles, including CSS and TypeScript files

Browse Source
This commit is contained in:
Julien Froidefond
2025-12-08 06:37:29 +01:00
parent 2db5bc324d
commit 0321eab5b5
18 changed files with 347 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
components/accounts/account-bulk-actions.tsx
View File

@@ -16,38 +16,31 @@ export function AccountBulkActions({
onDelete,
}: AccountBulkActionsProps) {
const isMobile = useIsMobile();
if (selectedCount === 0) return null;
return (
<Card className="bg-destructive/5 border-destructive/20 sticky top-0 z-10 mb-4">
<CardContent className={cn(
"py-3",
isMobile && "px-3"
)}>
<div className={cn(
"flex items-center gap-2 sm:gap-4",
isMobile && "flex-col sm:flex-row"
)}>
<span className={cn(
"font-medium",
isMobile ? "text-xs" : "text-sm"
)}>
<CardContent className={cn("py-3", isMobile && "px-3")}>
<div
className={cn(
"flex items-center gap-2 sm:gap-4",
isMobile && "flex-col sm:flex-row",
)}
>
<span className={cn("font-medium", isMobile ? "text-xs" : "text-sm")}>
{selectedCount} compte{selectedCount > 1 ? "s" : ""} sélectionné
{selectedCount > 1 ? "s" : ""}
</span>
<Button
size={isMobile ? "sm" : "sm"}
variant="destructive"
<Button
size={isMobile ? "sm" : "sm"}
variant="destructive"
onClick={onDelete}
className={cn(
isMobile && "w-full sm:w-auto"
)}
className={cn(isMobile && "w-full sm:w-auto")}
>
<Trash2 className={cn(
isMobile ? "w-3.5 h-3.5" : "w-4 h-4",
"mr-1"
)} />
<Trash2
className={cn(isMobile ? "w-3.5 h-3.5" : "w-4 h-4", "mr-1")}
/>
Supprimer
</Button>
</div>

12
components/accounts/account-card.tsx
View File

@@ -82,7 +82,7 @@ export function AccountCard({
"relative group",
isSelected && "ring-2 ring-primary shadow-lg shadow-primary/10",
isDragging && "bg-muted/80 opacity-60",
"hover:scale-[1.02] transition-transform duration-200"
"hover:scale-[1.02] transition-transform duration-200",
)}
>
<CardHeader className={cn("pb-0", isMobile && "px-2 pt-2")}>
@@ -111,7 +111,7 @@ export function AccountCard({
<div
className={cn(
"rounded-full bg-primary/10 flex items-center justify-center shrink-0",
isMobile ? "w-6 h-6" : "w-8 h-8"
isMobile ? "w-6 h-6" : "w-8 h-8",
)}
>
<Icon
@@ -122,7 +122,7 @@ export function AccountCard({
<CardTitle
className={cn(
"font-semibold truncate leading-tight",
isMobile ? "text-[11px]" : "text-sm"
isMobile ? "text-[11px]" : "text-sm",
)}
>
{account.name}
@@ -184,7 +184,7 @@ export function AccountCard({
? "text-base"
: "text-xl",
!compact && !isMobile && "mb-1.5",
realBalance >= 0 ? "text-emerald-600" : "text-red-600"
realBalance >= 0 ? "text-emerald-600" : "text-red-600",
)}
>
{formatCurrency(realBalance)}
@@ -194,7 +194,7 @@ export function AccountCard({
href={`/transactions?accountId=${account.id}`}
className={cn(
"text-muted-foreground hover:text-primary hover:underline shrink-0 whitespace-nowrap",
isMobile ? "text-[9px]" : "text-xs"
isMobile ? "text-[9px]" : "text-xs",
)}
>
{transactionCount} txns
@@ -207,7 +207,7 @@ export function AccountCard({
className={cn(
"flex items-center justify-between gap-2 mt-1",
isMobile ? "text-[10px]" : "text-xs",
"text-muted-foreground"
"text-muted-foreground",
)}
>
<Link

75
components/dashboard/accounts-summary.tsx
View File

@@ -110,34 +110,39 @@ export function AccountsSummary({ data }: AccountsSummaryProps) {
? Math.max(0, (realBalance / totalPositive) * 100)
: 0;
return (
<div key={account.id} className="space-y-2.5 p-3 rounded-xl bg-muted/30 hover:bg-muted/50 border border-border/50 hover:border-primary/20 transition-all duration-300 group">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-primary/20 to-primary/10 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
<Building2 className="w-5 h-5 text-primary" />
</div>
<div>
<p className="font-semibold text-sm">{account.name}</p>
<p className="text-xs text-muted-foreground/70 mt-0.5">
{account.accountNumber}
</p>
</div>
</div>
<span
className={cn(
"font-bold tabular-nums text-base",
realBalance >= 0 ? "text-emerald-600 dark:text-emerald-400" : "text-red-600 dark:text-red-400",
)}
>
{formatCurrency(realBalance)}
</span>
return (
<div
key={account.id}
className="space-y-2.5 p-3 rounded-xl bg-muted/30 hover:bg-muted/50 border border-border/50 hover:border-primary/20 transition-all duration-300 group"
>
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-primary/20 to-primary/10 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
<Building2 className="w-5 h-5 text-primary" />
</div>
<div>
<p className="font-semibold text-sm">{account.name}</p>
<p className="text-xs text-muted-foreground/70 mt-0.5">
{account.accountNumber}
</p>
</div>
{realBalance > 0 && (
<Progress value={percentage} className="h-2 rounded-full" />
)}
</div>
);
<span
className={cn(
"font-bold tabular-nums text-base",
realBalance >= 0
? "text-emerald-600 dark:text-emerald-400"
: "text-red-600 dark:text-red-400",
)}
>
{formatCurrency(realBalance)}
</span>
</div>
{realBalance > 0 && (
<Progress value={percentage} className="h-2 rounded-full" />
)}
</div>
);
})}
</div>
)}
@@ -154,7 +159,9 @@ export function AccountsSummary({ data }: AccountsSummaryProps) {
return (
<Card className="card-hover">
<CardHeader className="pb-4">
<CardTitle className="text-base md:text-lg font-bold">Mes Comptes</CardTitle>
<CardTitle className="text-base md:text-lg font-bold">
Mes Comptes
</CardTitle>
</CardHeader>
<CardContent>
<div className="flex flex-col items-center justify-center py-12 text-center">
@@ -178,7 +185,9 @@ export function AccountsSummary({ data }: AccountsSummaryProps) {
return (
<Card className="card-hover">
<CardHeader className="pb-4">
<CardTitle className="text-base md:text-lg font-bold">Mes Comptes</CardTitle>
<CardTitle className="text-base md:text-lg font-bold">
Mes Comptes
</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-6">
@@ -214,7 +223,10 @@ export function AccountsSummary({ data }: AccountsSummaryProps) {
: 0;
return (
<div key={account.id} className="space-y-2.5 p-3 rounded-xl bg-muted/30 hover:bg-muted/50 border border-border/50 hover:border-primary/20 transition-all duration-300 group">
<div
key={account.id}
className="space-y-2.5 p-3 rounded-xl bg-muted/30 hover:bg-muted/50 border border-border/50 hover:border-primary/20 transition-all duration-300 group"
>
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-primary/20 to-primary/10 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
@@ -241,7 +253,10 @@ export function AccountsSummary({ data }: AccountsSummaryProps) {
</span>
</div>
{realBalance > 0 && (
<Progress value={percentage} className="h-2 rounded-full" />
<Progress
value={percentage}
className="h-2 rounded-full"
/>
)}
</div>
);

6
components/dashboard/overview-cards.tsx
View File

@@ -13,7 +13,7 @@ interface OverviewCardsProps {
export function OverviewCards({ data }: OverviewCardsProps) {
const totalBalance = data.accounts.reduce(
(sum, acc) => sum + getAccountBalance(acc),
0
0,
);
const thisMonth = new Date();
@@ -21,7 +21,7 @@ export function OverviewCards({ data }: OverviewCardsProps) {
const thisMonthStr = thisMonth.toISOString().slice(0, 7);
const monthTransactions = data.transactions.filter((t) =>
t.date.startsWith(thisMonthStr)
t.date.startsWith(thisMonthStr),
);
const income = monthTransactions
@@ -62,7 +62,7 @@ export function OverviewCards({ data }: OverviewCardsProps) {
"text-2xl sm:text-3xl md:text-3xl lg:text-4xl xl:text-5xl font-black tracking-tight mb-4 leading-none",
totalBalance >= 0
? "text-emerald-600 dark:text-emerald-400"
: "text-red-600 dark:text-red-400"
: "text-red-600 dark:text-red-400",
)}
>
{formatCurrency(totalBalance)}

8
components/dashboard/recent-transactions.tsx
View File

@@ -43,11 +43,15 @@ export function RecentTransactions({ data }: RecentTransactionsProps) {
return (
<Card className="card-hover">
<CardHeader className="pb-4">
<CardTitle className="text-base md:text-lg font-bold">Transactions récentes</CardTitle>
<CardTitle className="text-base md:text-lg font-bold">
Transactions récentes
</CardTitle>
</CardHeader>
<CardContent>
<div className="flex flex-col items-center justify-center py-12 text-center">
<p className="text-muted-foreground font-medium">Aucune transaction</p>
<p className="text-muted-foreground font-medium">
Aucune transaction
</p>
<p className="text-sm text-muted-foreground/70 mt-2">
Importez un fichier OFX pour commencer
</p>

41
components/dashboard/sidebar.tsx
View File

@@ -69,7 +69,9 @@ function SidebarContent({
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-primary to-primary/80 flex items-center justify-center shadow-lg shadow-primary/20">
<Wallet className="w-5 h-5 text-primary-foreground" />
</div>
<span className="font-bold text-lg text-foreground tracking-tight">FinTrack</span>
<span className="font-bold text-lg text-foreground tracking-tight">
FinTrack
</span>
</div>
)}
</div>
@@ -85,19 +87,26 @@ function SidebarContent({
className={cn(
"w-full justify-start gap-4 h-12 rounded-2xl transition-all duration-300",
"hover:bg-muted/70 hover:scale-[1.02] hover:shadow-md",
isActive && "bg-gradient-to-r from-primary/15 via-primary/10 to-primary/5 border-2 border-primary/30 shadow-lg shadow-primary/10 backdrop-blur-sm",
isActive &&
"bg-gradient-to-r from-primary/15 via-primary/10 to-primary/5 border-2 border-primary/30 shadow-lg shadow-primary/10 backdrop-blur-sm",
collapsed && "justify-center px-2 w-12",
)}
>
<item.icon className={cn(
"w-5 h-5 shrink-0 transition-all duration-300",
isActive && "text-primary scale-110"
)} />
<item.icon
className={cn(
"w-5 h-5 shrink-0 transition-all duration-300",
isActive && "text-primary scale-110",
)}
/>
{!collapsed && (
<span className={cn(
"font-semibold text-sm",
isActive && "text-primary font-bold"
)}>{item.label}</span>
<span
className={cn(
"font-semibold text-sm",
isActive && "text-primary font-bold",
)}
>
{item.label}
</span>
)}
</Button>
</Link>
@@ -115,7 +124,9 @@ function SidebarContent({
)}
>
<Settings className="w-5 h-5 shrink-0" />
{!collapsed && <span className="font-semibold text-sm">Paramètres</span>}
{!collapsed && (
<span className="font-semibold text-sm">Paramètres</span>
)}
</Button>
</Link>
<Button
@@ -128,7 +139,9 @@ function SidebarContent({
)}
>
<LogOut className="w-5 h-5 shrink-0" />
{!collapsed && <span className="font-semibold text-sm">Déconnexion</span>}
{!collapsed && (
<span className="font-semibold text-sm">Déconnexion</span>
)}
</Button>
</div>
</>
@@ -173,7 +186,9 @@ export function Sidebar({ open, onOpenChange }: SidebarProps) {
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-primary via-primary/90 to-primary/80 flex items-center justify-center shadow-xl shadow-primary/30 backdrop-blur-sm">
<Wallet className="w-6 h-6 text-primary-foreground" />
</div>
<span className="font-black text-xl text-foreground tracking-tight">FinTrack</span>
<span className="font-black text-xl text-foreground tracking-tight">
FinTrack
</span>
</div>
)}
<Button

6
components/layout/page-header.tsx
View File

@@ -60,11 +60,7 @@ export function PageHeader({
) : (
<div className="flex items-center gap-3 flex-wrap">
{rightContent}
{actions && (
<div className="flex gap-3">
{actions}
</div>
)}
{actions && <div className="flex gap-3">{actions}</div>}
</div>
)}
</>

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

@@ -256,7 +256,7 @@ export function TransactionFilters({
onRemoveCategory={(id) => {
const newCategories = selectedCategories.filter((c) => c !== id);
onCategoriesChange(
newCategories.length > 0 ? newCategories : ["all"]
newCategories.length > 0 ? newCategories : ["all"],
);
}}
onClearCategories={() => onCategoriesChange(["all"])}
@@ -367,7 +367,7 @@ function ActiveFilters({
const selectedAccs = accounts.filter((a) => selectedAccounts.includes(a.id));
const selectedCats = categories.filter((c) =>
selectedCategories.includes(c.id)
selectedCategories.includes(c.id),
);
const isUncategorized = selectedCategories.includes("uncategorized");

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

@@ -64,7 +64,7 @@ export function AccountFilterCombobox({
// Get root folders (folders without parent) - same as folders/page.tsx
const rootFolders = useMemo(
() => folders.filter((f) => f.parentId === null),
[folders]
[folders],
);
// Get child folders for a given parent - same as FolderTreeItem
@@ -78,7 +78,7 @@ export function AccountFilterCombobox({
// Get accounts without folder
const orphanAccounts = useMemo(
() => accounts.filter((a) => !a.folderId),
[accounts]
[accounts],
);
const selectedAccounts = accounts.filter((a) => value.includes(a.id));
@@ -89,7 +89,7 @@ export function AccountFilterCombobox({
const directAccounts = getFolderAccounts(folderId);
const childFoldersList = getChildFolders(folderId);
const childAccounts = childFoldersList.flatMap((cf) =>
getAllAccountsInFolder(cf.id)
getAllAccountsInFolder(cf.id),
);
return [...directAccounts, ...childAccounts];
};
@@ -126,7 +126,7 @@ export function AccountFilterCombobox({
if (allSelected) {
const newSelection = value.filter(
(v) => !allFolderAccountIds.includes(v)
(v) => !allFolderAccountIds.includes(v),
);
onChange(newSelection.length > 0 ? newSelection : ["all"]);
} else {
@@ -153,7 +153,7 @@ export function AccountFilterCombobox({
const folderAccounts = getAllAccountsInFolder(folderId);
if (folderAccounts.length === 0) return false;
const selectedCount = folderAccounts.filter((a) =>
value.includes(a.id)
value.includes(a.id),
).length;
return selectedCount > 0 && selectedCount < folderAccounts.length;
};
@@ -185,7 +185,7 @@ export function AccountFilterCombobox({
<Check
className={cn(
"h-4 w-4",
isFolderSelected(folder.id) ? "opacity-100" : "opacity-0"
isFolderSelected(folder.id) ? "opacity-100" : "opacity-0",
)}
/>
</div>
@@ -213,7 +213,7 @@ export function AccountFilterCombobox({
<Check
className={cn(
"ml-auto h-4 w-4 shrink-0",
value.includes(account.id) ? "opacity-100" : "opacity-0"
value.includes(account.id) ? "opacity-100" : "opacity-0",
)}
/>
</CommandItem>
@@ -222,7 +222,7 @@ export function AccountFilterCombobox({
{/* Child folders - recursive */}
{childFoldersList.map((childFolder) =>
renderFolder(childFolder, depth + 1, currentPath)
renderFolder(childFolder, depth + 1, currentPath),
)}
</div>
);
@@ -237,7 +237,7 @@ export function AccountFilterCombobox({
aria-expanded={open}
className={cn(
"justify-between min-w-0 h-10 w-full text-sm font-normal",
className
className,
)}
>
<div className="flex items-center gap-2 min-w-0 flex-1">
@@ -304,7 +304,10 @@ export function AccountFilterCombobox({
<span className="text-xs text-muted-foreground ml-1">
(
{formatCurrency(
filteredTransactions.reduce((sum, t) => sum + t.amount, 0)
filteredTransactions.reduce(
(sum, t) => sum + t.amount,
0,
),
)}
)
</span>
@@ -312,7 +315,7 @@ export function AccountFilterCombobox({
<Check
className={cn(
"ml-auto h-4 w-4",
isAll ? "opacity-100" : "opacity-0"
isAll ? "opacity-100" : "opacity-0",
)}
/>
</CommandItem>
@@ -348,7 +351,7 @@ export function AccountFilterCombobox({
"ml-auto h-4 w-4 shrink-0",
value.includes(account.id)
? "opacity-100"
: "opacity-0"
: "opacity-0",
)}
/>
</CommandItem>

3
components/ui/button.tsx
View File

@@ -9,7 +9,8 @@ const buttonVariants = cva(
{
variants: {
variant: {
default: "bg-gradient-to-r from-primary via-primary/95 to-primary/90 text-primary-foreground hover:from-primary/95 hover:via-primary hover:to-primary/95 shadow-xl shadow-primary/30 hover:shadow-2xl hover:shadow-primary/40 hover:scale-[1.03] active:scale-[0.97] backdrop-blur-sm border border-primary/20",
default:
"bg-gradient-to-r from-primary via-primary/95 to-primary/90 text-primary-foreground hover:from-primary/95 hover:via-primary hover:to-primary/95 shadow-xl shadow-primary/30 hover:shadow-2xl hover:shadow-primary/40 hover:scale-[1.03] active:scale-[0.97] backdrop-blur-sm border border-primary/20",
destructive:
"bg-gradient-to-r from-destructive via-destructive/95 to-destructive/90 text-white hover:from-destructive/95 hover:via-destructive hover:to-destructive/95 shadow-xl shadow-destructive/30 hover:shadow-2xl hover:shadow-destructive/40 hover:scale-[1.03] focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 active:scale-[0.97] backdrop-blur-sm border border-destructive/20",
outline:

6
components/ui/card.tsx
View File

@@ -10,7 +10,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
"fintech-card",
"bg-card text-card-foreground flex flex-col",
"transition-all duration-300 ease-out",
className
className,
)}
{...props}
/>
@@ -23,7 +23,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
data-slot="card-header"
className={cn(
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 pt-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
className
className,
)}
{...props}
/>
@@ -56,7 +56,7 @@ function CardAction({ className, ...props }: React.ComponentProps<"div">) {
data-slot="card-action"
className={cn(
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
className
className,
)}
{...props}
/>

34
components/ui/popover.tsx
View File

@@ -30,17 +30,21 @@ function PopoverContent({
if (!element) return;
const disableAnimations = () => {
element.style.setProperty('animation', 'none', 'important');
element.style.setProperty('transition', 'none', 'important');
element.style.setProperty("animation", "none", "important");
element.style.setProperty("transition", "none", "important");
// Ne pas toucher au transform car il est utilisé pour le positionnement
element.style.setProperty('opacity', '1', 'important');
element.style.setProperty('will-change', 'auto', 'important');
element.style.setProperty("opacity", "1", "important");
element.style.setProperty("will-change", "auto", "important");
// Supprimer toutes les classes d'animation Tailwind
const classesToRemove = Array.from(element.classList).filter(cls =>
cls.includes('animate') || cls.includes('fade') || cls.includes('zoom') || cls.includes('slide')
const classesToRemove = Array.from(element.classList).filter(
(cls) =>
cls.includes("animate") ||
cls.includes("fade") ||
cls.includes("zoom") ||
cls.includes("slide"),
);
classesToRemove.forEach(cls => element.classList.remove(cls));
classesToRemove.forEach((cls) => element.classList.remove(cls));
};
// Désactiver immédiatement
@@ -53,7 +57,7 @@ function PopoverContent({
observer.observe(element, {
attributes: true,
attributeFilter: ['class', 'data-state'],
attributeFilter: ["class", "data-state"],
subtree: false,
});
@@ -84,11 +88,13 @@ function PopoverContent({
"bg-popover text-popover-foreground z-50 w-72 rounded-md border p-4 shadow-md outline-hidden",
className,
)}
style={{
animation: 'none !important',
transition: 'none !important',
opacity: '1 !important',
} as React.CSSProperties}
style={
{
animation: "none !important",
transition: "none !important",
opacity: "1 !important",
} as React.CSSProperties
}
{...props}
/>
</PopoverPrimitive.Portal>

34
components/ui/select.tsx
View File

@@ -63,17 +63,21 @@ function SelectContent({
if (!element) return;
const disableAnimations = () => {
element.style.setProperty('animation', 'none', 'important');
element.style.setProperty('transition', 'none', 'important');
element.style.setProperty("animation", "none", "important");
element.style.setProperty("transition", "none", "important");
// Ne pas toucher au transform car il est utilisé pour le positionnement
element.style.setProperty('opacity', '1', 'important');
element.style.setProperty('will-change', 'auto', 'important');
element.style.setProperty("opacity", "1", "important");
element.style.setProperty("will-change", "auto", "important");
// Supprimer toutes les classes d'animation Tailwind
const classesToRemove = Array.from(element.classList).filter(cls =>
cls.includes('animate') || cls.includes('fade') || cls.includes('zoom') || cls.includes('slide')
const classesToRemove = Array.from(element.classList).filter(
(cls) =>
cls.includes("animate") ||
cls.includes("fade") ||
cls.includes("zoom") ||
cls.includes("slide"),
);
classesToRemove.forEach(cls => element.classList.remove(cls));
classesToRemove.forEach((cls) => element.classList.remove(cls));
};
// Désactiver immédiatement
@@ -86,7 +90,7 @@ function SelectContent({
observer.observe(element, {
attributes: true,
attributeFilter: ['class', 'data-state'],
attributeFilter: ["class", "data-state"],
subtree: false,
});
@@ -116,11 +120,13 @@ function SelectContent({
className,
)}
position={position}
style={{
animation: 'none !important',
transition: 'none !important',
opacity: '1 !important',
} as React.CSSProperties}
style={
{
animation: "none !important",
transition: "none !important",
opacity: "1 !important",
} as React.CSSProperties
}
{...props}
>
<SelectScrollUpButton />