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

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 ? "+" : ""}