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

refactor: remove transition effects from various components for improved performance and consistency

Browse Source
This commit is contained in:
Julien Froidefond
2025-12-20 11:02:11 +01:00
parent 4445a38380
commit dff2a9061f
16 changed files with 44 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
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
@@ -47,12 +47,11 @@ export function OverviewCards({ data }: OverviewCardsProps) {
return (
<div className="grid gap-4 sm:gap-6 grid-cols-2 lg:grid-cols-4">
<Card className="stat-card-gradient-1 card-hover group relative overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-br from-primary/8 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-4 px-6 pt-6 sm:px-7 sm:pt-7 lg:px-5 lg:pt-5 relative z-10">
<CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest">
Solde Total
</CardTitle>
<div className="rounded-2xl bg-gradient-to-br from-primary/30 via-primary/20 to-primary/10 p-3 shrink-0 group-hover:scale-110 group-hover:rotate-3 transition-all duration-300 shadow-lg shadow-primary/20">
<div className="rounded-2xl bg-gradient-to-br from-primary/30 via-primary/20 to-primary/10 p-3 shrink-0 shadow-lg shadow-primary/20">
<Wallet className="h-5 w-5 text-primary" />
</div>
</CardHeader>
@@ -62,7 +61,7 @@ export function OverviewCards({ data }: OverviewCardsProps) {
"text-2xl sm:text-3xl md:text-3xl lg:text-xl xl:text-xl font-black tracking-tight mb-4 leading-none break-words",
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)}
@@ -74,12 +73,11 @@ export function OverviewCards({ data }: OverviewCardsProps) {
</Card>
<Card className="stat-card-gradient-2 card-hover group relative overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-br from-success/8 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-4 px-6 pt-6 sm:px-7 sm:pt-7 lg:px-5 lg:pt-5 relative z-10">
<CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest">
Revenus du mois
</CardTitle>
<div className="rounded-2xl bg-gradient-to-br from-success/30 via-success/20 to-success/10 p-3 shrink-0 group-hover:scale-110 group-hover:rotate-3 transition-all duration-300 shadow-lg shadow-success/20">
<div className="rounded-2xl bg-gradient-to-br from-success/30 via-success/20 to-success/10 p-3 shrink-0 shadow-lg shadow-success/20">
<TrendingUp className="h-5 w-5 text-success" />
</div>
</CardHeader>
@@ -97,12 +95,11 @@ export function OverviewCards({ data }: OverviewCardsProps) {
</Card>
<Card className="stat-card-gradient-3 card-hover group relative overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-br from-destructive/8 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-4 px-6 pt-6 sm:px-7 sm:pt-7 lg:px-5 lg:pt-5 relative z-10">
<CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest">
Dépenses du mois
</CardTitle>
<div className="rounded-2xl bg-gradient-to-br from-destructive/30 via-destructive/20 to-destructive/10 p-3 shrink-0 group-hover:scale-110 group-hover:rotate-3 transition-all duration-300 shadow-lg shadow-destructive/20">
<div className="rounded-2xl bg-gradient-to-br from-destructive/30 via-destructive/20 to-destructive/10 p-3 shrink-0 shadow-lg shadow-destructive/20">
<TrendingDown className="h-5 w-5 text-destructive" />
</div>
</CardHeader>
@@ -120,12 +117,11 @@ export function OverviewCards({ data }: OverviewCardsProps) {
</Card>
<Card className="stat-card-gradient-4 card-hover group relative overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-br from-chart-4/8 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-4 px-6 pt-6 sm:px-7 sm:pt-7 lg:px-5 lg:pt-5 relative z-10">
<CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest">
Pointage
</CardTitle>
<div className="rounded-2xl bg-gradient-to-br from-chart-4/30 via-chart-4/20 to-chart-4/10 p-3 shrink-0 group-hover:scale-110 group-hover:rotate-3 transition-all duration-300 shadow-lg shadow-chart-4/20">
<div className="rounded-2xl bg-gradient-to-br from-chart-4/30 via-chart-4/20 to-chart-4/10 p-3 shrink-0 shadow-lg shadow-chart-4/20">
<CreditCard className="h-5 w-5 text-chart-4" />
</div>
</CardHeader>