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

feat: revamp global styles and component designs with enhanced gradients, shadows, and responsive layouts for a modern fintech aesthetic

Browse Source
This commit is contained in:
Julien Froidefond
2025-12-07 17:42:07 +01:00
parent a33c41f1bd
commit 2db5bc324d
15 changed files with 767 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -45,45 +45,49 @@ export function OverviewCards({ data }: OverviewCardsProps) {
};
return (
<div className="grid gap-3 sm:gap-4 grid-cols-2 lg:grid-cols-4">
<Card className="border shadow-sm">
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2 px-4 pt-4 sm:px-6 sm:pt-6">
<CardTitle className="text-sm font-medium text-muted-foreground leading-tight">
<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 relative z-10">
<CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest">
Solde Total
</CardTitle>
<div className="rounded-full bg-muted/50 p-2 shrink-0">
<Wallet className="h-4 w-4 text-muted-foreground" />
<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">
<Wallet className="h-5 w-5 text-primary" />
</div>
</CardHeader>
<CardContent className="px-4 pb-4 sm:px-6 sm:pb-6 pt-0">
<CardContent className="px-6 pb-6 sm:px-7 sm:pb-7 pt-0 relative z-10">
<div
className={cn(
"text-2xl sm:text-2xl md:text-3xl font-bold tracking-tight",
totalBalance >= 0 ? "text-emerald-600" : "text-red-600"
"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"
)}
>
{formatCurrency(totalBalance)}
</div>
<p className="text-xs text-muted-foreground mt-2">
<p className="text-xs sm:text-sm font-semibold text-muted-foreground/60">
{data.accounts.length} compte{data.accounts.length > 1 ? "s" : ""}
</p>
</CardContent>
</Card>
<Card className="border shadow-sm">
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2 px-4 pt-4 sm:px-6 sm:pt-6">
<CardTitle className="text-sm font-medium text-muted-foreground leading-tight">
<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 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-full bg-emerald-500/10 p-2 shrink-0">
<TrendingUp className="h-4 w-4 text-emerald-600" />
<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">
<TrendingUp className="h-5 w-5 text-success" />
</div>
</CardHeader>
<CardContent className="px-4 pb-4 sm:px-6 sm:pb-6 pt-0">
<div className="text-2xl sm:text-2xl md:text-3xl font-bold tracking-tight text-emerald-600">
<CardContent className="px-6 pb-6 sm:px-7 sm:pb-7 pt-0 relative z-10">
<div className="text-2xl sm:text-3xl md:text-3xl lg:text-4xl xl:text-5xl font-black tracking-tight text-success mb-4 leading-none">
{formatCurrency(income)}
</div>
<p className="text-xs text-muted-foreground mt-2">
<p className="text-xs sm:text-sm font-semibold text-muted-foreground/60">
{monthTransactions.filter((t) => t.amount > 0).length} opération
{monthTransactions.filter((t) => t.amount > 0).length > 1
? "s"
@@ -92,20 +96,21 @@ export function OverviewCards({ data }: OverviewCardsProps) {
</CardContent>
</Card>
<Card className="border shadow-sm">
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2 px-4 pt-4 sm:px-6 sm:pt-6">
<CardTitle className="text-sm font-medium text-muted-foreground leading-tight">
<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 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-full bg-red-500/10 p-2 shrink-0">
<TrendingDown className="h-4 w-4 text-red-600" />
<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">
<TrendingDown className="h-5 w-5 text-destructive" />
</div>
</CardHeader>
<CardContent className="px-4 pb-4 sm:px-6 sm:pb-6 pt-0">
<div className="text-2xl sm:text-2xl md:text-3xl font-bold tracking-tight text-red-600">
<CardContent className="px-6 pb-6 sm:px-7 sm:pb-7 pt-0 relative z-10">
<div className="text-2xl sm:text-3xl md:text-3xl lg:text-4xl xl:text-5xl font-black tracking-tight text-destructive mb-4 leading-none">
{formatCurrency(expenses)}
</div>
<p className="text-xs text-muted-foreground mt-2">
<p className="text-xs sm:text-sm font-semibold text-muted-foreground/60">
{monthTransactions.filter((t) => t.amount < 0).length} opération
{monthTransactions.filter((t) => t.amount < 0).length > 1
? "s"
@@ -114,20 +119,21 @@ export function OverviewCards({ data }: OverviewCardsProps) {
</CardContent>
</Card>
<Card className="border shadow-sm">
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2 px-4 pt-4 sm:px-6 sm:pt-6">
<CardTitle className="text-sm font-medium text-muted-foreground leading-tight">
<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 relative z-10">
<CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest">
Pointage
</CardTitle>
<div className="rounded-full bg-muted/50 p-2 shrink-0">
<CreditCard className="h-4 w-4 text-muted-foreground" />
<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">
<CreditCard className="h-5 w-5 text-chart-4" />
</div>
</CardHeader>
<CardContent className="px-4 pb-4 sm:px-6 sm:pb-6 pt-0">
<div className="text-2xl sm:text-2xl md:text-3xl font-bold tracking-tight">
<CardContent className="px-6 pb-6 sm:px-7 sm:pb-7 pt-0 relative z-10">
<div className="text-2xl sm:text-3xl md:text-3xl lg:text-4xl xl:text-5xl font-black tracking-tight mb-4 leading-none">
{reconciledPercent}%
</div>
<p className="text-xs text-muted-foreground mt-2">
<p className="text-xs sm:text-sm font-semibold text-muted-foreground/60">
{reconciled} / {total} opérations pointées
</p>
</CardContent>