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

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

@@ -110,34 +110,34 @@ export function AccountsSummary({ data }: AccountsSummaryProps) {
? Math.max(0, (realBalance / totalPositive) * 100)
: 0;
return (
<div key={account.id} className="space-y-2">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
<Building2 className="w-4 h-4 text-primary" />
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>
</div>
<div>
<p className="font-medium text-sm">{account.name}</p>
<p className="text-xs text-muted-foreground">
{account.accountNumber}
</p>
</div>
</div>
<span
className={cn(
"font-semibold tabular-nums",
realBalance >= 0 ? "text-emerald-600" : "text-red-600",
{realBalance > 0 && (
<Progress value={percentage} className="h-2 rounded-full" />
)}
>
{formatCurrency(realBalance)}
</span>
</div>
{realBalance > 0 && (
<Progress value={percentage} className="h-1.5" />
)}
</div>
);
</div>
);
})}
</div>
)}
@@ -152,15 +152,15 @@ export function AccountsSummary({ data }: AccountsSummaryProps) {
if (data.accounts.length === 0) {
return (
<Card>
<CardHeader>
<CardTitle>Mes Comptes</CardTitle>
<Card className="card-hover">
<CardHeader className="pb-4">
<CardTitle className="text-base md:text-lg font-bold">Mes Comptes</CardTitle>
</CardHeader>
<CardContent>
<div className="flex flex-col items-center justify-center py-8 text-center">
<Building2 className="w-12 h-12 text-muted-foreground mb-3" />
<p className="text-muted-foreground">Aucun compte</p>
<p className="text-sm text-muted-foreground mt-1">
<div className="flex flex-col items-center justify-center py-12 text-center">
<Building2 className="w-12 h-12 text-muted-foreground/50 mb-4" />
<p className="text-muted-foreground font-medium">Aucun compte</p>
<p className="text-sm text-muted-foreground/70 mt-2">
Importez un fichier OFX pour ajouter un compte
</p>
</div>
@@ -176,9 +176,9 @@ export function AccountsSummary({ data }: AccountsSummaryProps) {
);
return (
<Card>
<CardHeader>
<CardTitle>Mes Comptes</CardTitle>
<Card className="card-hover">
<CardHeader className="pb-4">
<CardTitle className="text-base md:text-lg font-bold">Mes Comptes</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-6">
@@ -214,34 +214,34 @@ export function AccountsSummary({ data }: AccountsSummaryProps) {
: 0;
return (
<div key={account.id} className="space-y-2">
<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-2">
<div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
<Building2 className="w-4 h-4 text-primary" />
<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-medium text-sm">
<p className="font-semibold text-sm">
{account.name}
</p>
<p className="text-xs text-muted-foreground">
<p className="text-xs text-muted-foreground/70 mt-0.5">
{account.accountNumber}
</p>
</div>
</div>
<span
className={cn(
"font-semibold tabular-nums",
"font-bold tabular-nums text-base",
realBalance >= 0
? "text-emerald-600"
: "text-red-600",
? "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-1.5" />
<Progress value={percentage} className="h-2 rounded-full" />
)}
</div>
);

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>

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

@@ -41,14 +41,14 @@ export function RecentTransactions({ data }: RecentTransactionsProps) {
if (recentTransactions.length === 0) {
return (
<Card>
<CardHeader>
<CardTitle>Transactions récentes</CardTitle>
<Card className="card-hover">
<CardHeader className="pb-4">
<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-8 text-center">
<p className="text-muted-foreground">Aucune transaction</p>
<p className="text-sm text-muted-foreground mt-1">
<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-sm text-muted-foreground/70 mt-2">
Importez un fichier OFX pour commencer
</p>
</div>
@@ -58,13 +58,13 @@ export function RecentTransactions({ data }: RecentTransactionsProps) {
}
return (
<Card>
<CardHeader>
<CardTitle className="text-sm md:text-base">
<Card className="card-hover">
<CardHeader className="pb-5">
<CardTitle className="text-lg md:text-xl font-black tracking-tight">
Transactions récentes
</CardTitle>
</CardHeader>
<CardContent className="px-3 md:px-6">
<CardContent className="px-5 md:px-6">
<div className="space-y-3">
{recentTransactions.map((transaction) => {
const category = getCategory(transaction.categoryId);
@@ -73,56 +73,61 @@ export function RecentTransactions({ data }: RecentTransactionsProps) {
return (
<div
key={transaction.id}
className="rounded-lg bg-muted/50 hover:bg-muted transition-colors overflow-hidden"
className="group rounded-2xl bg-gradient-to-r from-muted/50 via-muted/30 to-muted/20 hover:from-muted/70 hover:via-muted/50 hover:to-muted/40 border-2 border-border/40 hover:border-primary/30 transition-all duration-300 overflow-hidden hover:shadow-lg hover:shadow-primary/10 hover:scale-[1.02] backdrop-blur-sm"
>
<div className="flex items-start gap-2 md:gap-3 p-2 md:p-3">
<div className="flex items-start gap-4 md:gap-5 p-4 md:p-5">
<div className="flex-shrink-0 pt-0.5">
{transaction.isReconciled ? (
<CheckCircle2 className="w-4 h-4 md:w-5 md:h-5 text-emerald-600" />
<div className="rounded-2xl bg-gradient-to-br from-emerald-500/30 to-emerald-500/20 p-2 group-hover:scale-110 group-hover:rotate-3 transition-all duration-300 shadow-md shadow-emerald-500/20">
<CheckCircle2 className="w-5 h-5 md:w-6 md:h-6 text-emerald-600 dark:text-emerald-400" />
</div>
) : (
<Circle className="w-4 h-4 md:w-5 md:h-5 text-muted-foreground" />
<div className="rounded-2xl bg-muted/60 p-2 group-hover:bg-muted/80 transition-all duration-300">
<Circle className="w-5 h-5 md:w-6 md:h-6 text-muted-foreground" />
</div>
)}
</div>
<div className="flex-1 min-w-0 overflow-hidden">
<div className="flex items-start justify-between gap-2">
<p className="font-medium text-xs md:text-base truncate flex-1">
<p className="font-bold text-base md:text-lg truncate flex-1 leading-tight">
{transaction.description}
</p>
<div
className={cn(
"font-semibold tabular-nums text-xs md:text-base shrink-0 md:hidden",
"font-black tabular-nums text-base md:text-lg shrink-0 md:hidden",
transaction.amount >= 0
? "text-emerald-600"
: "text-red-600",
? "text-emerald-600 dark:text-emerald-400"
: "text-red-600 dark:text-red-400",
)}
>
{transaction.amount >= 0 ? "+" : ""}
{formatCurrency(transaction.amount)}
</div>
</div>
<div className="flex items-center gap-1.5 md:gap-2 mt-1 flex-wrap">
<span className="text-[10px] md:text-xs text-muted-foreground whitespace-nowrap">
<div className="flex items-center gap-3 md:gap-4 mt-3 flex-wrap">
<span className="text-sm text-muted-foreground/70 font-semibold whitespace-nowrap">
{formatDate(transaction.date)}
</span>
{account && (
<span className="text-[10px] md:text-xs text-muted-foreground truncate">
<span className="text-sm text-muted-foreground/60 truncate font-medium">
• {account.name}
</span>
)}
{category && (
<Badge
variant="secondary"
className="text-[10px] md:text-xs gap-1 shrink-0"
className="text-xs gap-2 shrink-0 rounded-xl px-3 py-1 font-bold border-2 backdrop-blur-sm"
style={{
backgroundColor: `${category.color}20`,
color: category.color,
borderColor: `${category.color}40`,
}}
>
<CategoryIcon
icon={category.icon}
color={category.color}
size={10}
size={14}
/>
<span className="truncate">{category.name}</span>
</Badge>
@@ -132,10 +137,10 @@ export function RecentTransactions({ data }: RecentTransactionsProps) {
<div
className={cn(
"font-semibold tabular-nums text-sm md:text-base shrink-0 hidden md:block",
"font-black tabular-nums text-lg md:text-xl shrink-0 hidden md:block leading-tight",
transaction.amount >= 0
? "text-emerald-600"
: "text-red-600",
? "text-emerald-600 dark:text-emerald-400"
: "text-red-600 dark:text-red-400",
)}
>
{transaction.amount >= 0 ? "+" : ""}

62
components/dashboard/sidebar.tsx
View File

@@ -63,19 +63,19 @@ function SidebarContent({
return (
<>
{showHeader && (
<div className="flex items-center justify-between p-4 border-b border-border">
<div className="flex items-center justify-between p-5 border-b border-border/50">
{!collapsed && (
<div className="flex items-center gap-2">
<div className="w-8 h-8 rounded-lg bg-primary flex items-center justify-center">
<div className="flex items-center gap-3">
<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-semibold text-foreground">FinTrack</span>
<span className="font-bold text-lg text-foreground tracking-tight">FinTrack</span>
</div>
)}
</div>
)}
<nav className="flex-1 p-2 space-y-1">
<nav className="flex-1 p-4 space-y-2">
{navItems.map((item) => {
const isActive = pathname === item.href;
return (
@@ -83,41 +83,52 @@ function SidebarContent({
<Button
variant={isActive ? "secondary" : "ghost"}
className={cn(
"w-full justify-start gap-3",
collapsed && "justify-center px-2",
"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",
collapsed && "justify-center px-2 w-12",
)}
>
<item.icon className="w-5 h-5 shrink-0" />
{!collapsed && <span>{item.label}</span>}
<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>
)}
</Button>
</Link>
);
})}
</nav>
<div className="p-2 border-t border-border space-y-1">
<div className="p-4 border-t border-border/30 space-y-2">
<Link href="/settings" onClick={handleLinkClick}>
<Button
variant="ghost"
className={cn(
"w-full justify-start gap-3",
collapsed && "justify-center px-2",
"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",
collapsed && "justify-center px-2 w-12",
)}
>
<Settings className="w-5 h-5 shrink-0" />
{!collapsed && <span>Paramètres</span>}
{!collapsed && <span className="font-semibold text-sm">Paramètres</span>}
</Button>
</Link>
<Button
variant="ghost"
onClick={handleSignOut}
className={cn(
"w-full justify-start gap-3 text-destructive hover:text-destructive hover:bg-destructive/10",
collapsed && "justify-center px-2",
"w-full justify-start gap-4 h-12 rounded-2xl transition-all duration-300",
"text-destructive hover:text-destructive hover:bg-destructive/15 hover:scale-[1.02] hover:shadow-md",
collapsed && "justify-center px-2 w-12",
)}
>
<LogOut className="w-5 h-5 shrink-0" />
{!collapsed && <span>Déconnexion</span>}
{!collapsed && <span className="font-semibold text-sm">Déconnexion</span>}
</Button>
</div>
</>
@@ -151,29 +162,30 @@ export function Sidebar({ open, onOpenChange }: SidebarProps) {
return (
<aside
className={cn(
"hidden md:flex flex-col h-screen bg-card border-r border-border transition-all duration-300",
"hidden md:flex flex-col h-screen glass border-r border-border transition-all duration-300",
"backdrop-blur-xl",
collapsed ? "w-16" : "w-64",
)}
>
<div className="flex items-center justify-between p-4 border-b border-border">
<div className="flex items-center justify-between p-6 border-b border-border/30">
{!collapsed && (
<div className="flex items-center gap-2">
<div className="w-8 h-8 rounded-lg bg-primary flex items-center justify-center">
<Wallet className="w-5 h-5 text-primary-foreground" />
<div className="flex items-center gap-3">
<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-semibold text-foreground">FinTrack</span>
<span className="font-black text-xl text-foreground tracking-tight">FinTrack</span>
</div>
)}
<Button
variant="ghost"
size="icon"
onClick={() => setCollapsed(!collapsed)}
className="ml-auto"
className="ml-auto hover:bg-muted/60 rounded-xl transition-all duration-300 hover:scale-110"
>
{collapsed ? (
<ChevronRight className="w-4 h-4" />
<ChevronRight className="w-5 h-5" />
) : (
<ChevronLeft className="w-4 h-4" />
<ChevronLeft className="w-5 h-5" />
)}
</Button>
</div>