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

548
app/globals.css
View File

@@ -4,117 +4,135 @@
@custom-variant dark (&:is(.dark *)); @custom-variant dark (&:is(.dark *));
:root { :root {
/* Background moderne avec légère teinte */ /* Background fintech ultra-moderne avec dégradé vibrant */
--background: oklch(0.99 0.002 270); --background: oklch(0.98 0.008 280);
--foreground: oklch(0.15 0.01 270); --foreground: oklch(0.1 0.015 280);
/* Cards avec glassmorphism subtil */ /* Cards avec glassmorphism très prononcé */
--card: oklch(1 0 0 / 0.8); --card: oklch(1 0 0 / 0.6);
--card-foreground: oklch(0.15 0.01 270); --card-foreground: oklch(0.1 0.015 280);
--card-hover: oklch(1 0 0 / 0.75);
/* Popover avec backdrop blur */ /* Popover avec backdrop blur très fort */
--popover: oklch(1 0 0 / 0.95); --popover: oklch(1 0 0 / 0.95);
--popover-foreground: oklch(0.15 0.01 270); --popover-foreground: oklch(0.1 0.015 280);
/* Primary: Bleu/violet fintech moderne */ /* Primary: Bleu/violet fintech très vibrant avec gradient */
--primary: oklch(0.55 0.18 260); --primary: oklch(0.6 0.25 270);
--primary-foreground: oklch(0.99 0 0); --primary-foreground: oklch(0.99 0 0);
--primary-gradient: linear-gradient(135deg, oklch(0.6 0.25 270) 0%, oklch(0.65 0.22 300) 50%, oklch(0.62 0.24 250) 100%);
--primary-light: oklch(0.7 0.2 270);
/* Secondary avec teinte subtile */ /* Secondary avec teinte subtile */
--secondary: oklch(0.97 0.005 270); --secondary: oklch(0.97 0.008 280);
--secondary-foreground: oklch(0.25 0.01 270); --secondary-foreground: oklch(0.25 0.015 280);
/* Muted plus doux */ /* Muted plus doux */
--muted: oklch(0.96 0.003 270); --muted: oklch(0.96 0.006 280);
--muted-foreground: oklch(0.5 0.008 270); --muted-foreground: oklch(0.5 0.012 280);
/* Accent avec couleur vibrante */ /* Accent avec couleur très vibrante */
--accent: oklch(0.95 0.01 260); --accent: oklch(0.95 0.015 260);
--accent-foreground: oklch(0.55 0.18 260); --accent-foreground: oklch(0.6 0.25 270);
/* Destructive moderne */ /* Destructive moderne */
--destructive: oklch(0.55 0.22 25); --destructive: oklch(0.6 0.26 25);
--destructive-foreground: oklch(0.99 0 0); --destructive-foreground: oklch(0.99 0 0);
/* Bordures fines et subtiles */ /* Bordures fines et subtiles */
--border: oklch(0.92 0.005 270 / 0.6); --border: oklch(0.9 0.008 280 / 0.4);
--input: oklch(0.96 0.003 270); --input: oklch(0.97 0.006 280);
--ring: oklch(0.55 0.18 260 / 0.3); --ring: oklch(0.6 0.25 270 / 0.5);
/* Chart colors modernes et vibrantes */ /* Chart colors très vibrantes */
--chart-1: oklch(0.6 0.2 260); --chart-1: oklch(0.65 0.25 270);
--chart-2: oklch(0.65 0.18 180); --chart-2: oklch(0.7 0.22 180);
--chart-3: oklch(0.7 0.15 120); --chart-3: oklch(0.75 0.2 120);
--chart-4: oklch(0.65 0.2 320); --chart-4: oklch(0.7 0.25 320);
--chart-5: oklch(0.6 0.18 40); --chart-5: oklch(0.65 0.22 40);
--radius: 0.75rem; /* Success et Warning pour fintech */
--success: oklch(0.68 0.2 150);
--success-foreground: oklch(0.99 0 0);
--warning: oklch(0.78 0.2 80);
--warning-foreground: oklch(0.1 0.015 280);
/* Sidebar moderne */ --radius: 1.25rem;
--sidebar: oklch(0.98 0.003 270);
--sidebar-foreground: oklch(0.2 0.01 270); /* Sidebar moderne avec glassmorphism très prononcé */
--sidebar-primary: oklch(0.55 0.18 260); --sidebar: oklch(1 0 0 / 0.5);
--sidebar-foreground: oklch(0.2 0.015 280);
--sidebar-primary: oklch(0.6 0.25 270);
--sidebar-primary-foreground: oklch(0.99 0 0); --sidebar-primary-foreground: oklch(0.99 0 0);
--sidebar-accent: oklch(0.95 0.01 260); --sidebar-accent: oklch(0.96 0.015 260);
--sidebar-accent-foreground: oklch(0.25 0.01 270); --sidebar-accent-foreground: oklch(0.25 0.015 280);
--sidebar-border: oklch(0.92 0.005 270 / 0.5); --sidebar-border: oklch(0.9 0.008 280 / 0.3);
--sidebar-ring: oklch(0.55 0.18 260 / 0.2); --sidebar-ring: oklch(0.6 0.25 270 / 0.4);
} }
.dark { .dark {
/* Background sombre avec teinte subtile */ /* Background sombre fintech avec dégradé vibrant */
--background: oklch(0.12 0.01 270); --background: oklch(0.1 0.015 280);
--foreground: oklch(0.98 0.002 270); --foreground: oklch(0.97 0.005 280);
/* Cards avec effet glassmorphism sombre */ /* Cards avec effet glassmorphism sombre très prononcé */
--card: oklch(0.15 0.01 270 / 0.7); --card: oklch(0.15 0.015 280 / 0.6);
--card-foreground: oklch(0.98 0.002 270); --card-foreground: oklch(0.97 0.005 280);
--card-hover: oklch(0.18 0.015 280 / 0.75);
/* Popover avec backdrop blur */ /* Popover avec backdrop blur très fort */
--popover: oklch(0.15 0.01 270 / 0.95); --popover: oklch(0.15 0.015 280 / 0.95);
--popover-foreground: oklch(0.98 0.002 270); --popover-foreground: oklch(0.97 0.005 280);
/* Primary: Bleu/violet brillant pour dark mode */ /* Primary: Bleu/violet très brillant pour dark mode */
--primary: oklch(0.65 0.2 260); --primary: oklch(0.72 0.28 270);
--primary-foreground: oklch(0.12 0.01 270); --primary-foreground: oklch(0.1 0.015 280);
--primary-gradient: linear-gradient(135deg, oklch(0.72 0.28 270) 0%, oklch(0.75 0.25 300) 50%, oklch(0.73 0.27 250) 100%);
--primary-light: oklch(0.78 0.23 270);
/* Secondary avec plus de contraste */ /* Secondary avec plus de contraste */
--secondary: oklch(0.22 0.01 270); --secondary: oklch(0.22 0.015 280);
--secondary-foreground: oklch(0.95 0.002 270); --secondary-foreground: oklch(0.95 0.005 280);
/* Muted plus visible */ /* Muted plus visible */
--muted: oklch(0.22 0.01 270); --muted: oklch(0.22 0.015 280);
--muted-foreground: oklch(0.65 0.008 270); --muted-foreground: oklch(0.7 0.012 280);
/* Accent vibrant */ /* Accent très vibrant */
--accent: oklch(0.25 0.015 260); --accent: oklch(0.26 0.02 260);
--accent-foreground: oklch(0.65 0.2 260); --accent-foreground: oklch(0.72 0.28 270);
/* Destructive moderne */ /* Destructive moderne */
--destructive: oklch(0.6 0.22 25); --destructive: oklch(0.68 0.27 25);
--destructive-foreground: oklch(0.98 0 0); --destructive-foreground: oklch(0.97 0 0);
/* Bordures subtiles */ /* Bordures subtiles */
--border: oklch(0.25 0.01 270 / 0.5); --border: oklch(0.25 0.015 280 / 0.4);
--input: oklch(0.22 0.01 270); --input: oklch(0.22 0.015 280);
--ring: oklch(0.65 0.2 260 / 0.4); --ring: oklch(0.72 0.28 270 / 0.6);
/* Chart colors vibrantes pour dark */ /* Chart colors très vibrantes pour dark */
--chart-1: oklch(0.7 0.22 260); --chart-1: oklch(0.75 0.27 270);
--chart-2: oklch(0.75 0.2 180); --chart-2: oklch(0.8 0.25 180);
--chart-3: oklch(0.8 0.18 120); --chart-3: oklch(0.85 0.23 120);
--chart-4: oklch(0.75 0.22 320); --chart-4: oklch(0.8 0.27 320);
--chart-5: oklch(0.7 0.2 40); --chart-5: oklch(0.75 0.25 40);
/* Sidebar dark moderne */ /* Success et Warning pour fintech dark */
--sidebar: oklch(0.14 0.01 270); --success: oklch(0.73 0.22 150);
--sidebar-foreground: oklch(0.95 0.002 270); --success-foreground: oklch(0.1 0.015 280);
--sidebar-primary: oklch(0.65 0.2 260); --warning: oklch(0.8 0.22 80);
--sidebar-primary-foreground: oklch(0.12 0.01 270); --warning-foreground: oklch(0.1 0.015 280);
--sidebar-accent: oklch(0.25 0.015 260);
--sidebar-accent-foreground: oklch(0.95 0.002 270); /* Sidebar dark moderne avec glassmorphism très prononcé */
--sidebar-border: oklch(0.25 0.01 270 / 0.4); --sidebar: oklch(0.12 0.015 280 / 0.5);
--sidebar-ring: oklch(0.65 0.2 260 / 0.3); --sidebar-foreground: oklch(0.95 0.005 280);
--sidebar-primary: oklch(0.72 0.28 270);
--sidebar-primary-foreground: oklch(0.1 0.015 280);
--sidebar-accent: oklch(0.26 0.02 260);
--sidebar-accent-foreground: oklch(0.95 0.005 280);
--sidebar-border: oklch(0.25 0.015 280 / 0.3);
--sidebar-ring: oklch(0.72 0.28 270 / 0.5);
} }
@theme inline { @theme inline {
@@ -165,13 +183,25 @@
body { body {
@apply bg-background text-foreground; @apply bg-background text-foreground;
font-feature-settings: "rlig" 1, "calt" 1; font-feature-settings: "rlig" 1, "calt" 1;
letter-spacing: -0.01em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} }
/* Animations fintech modernes */ h1, h2, h3, h4, h5, h6 {
letter-spacing: -0.02em;
font-weight: 700;
}
p {
letter-spacing: -0.005em;
}
/* Animations fintech modernes et fluides */
@keyframes fade-in { @keyframes fade-in {
from { from {
opacity: 0; opacity: 0;
transform: translateY(4px); transform: translateY(8px);
} }
to { to {
opacity: 1; opacity: 1;
@@ -182,7 +212,7 @@
@keyframes slide-in { @keyframes slide-in {
from { from {
opacity: 0; opacity: 0;
transform: translateX(-8px); transform: translateX(-12px);
} }
to { to {
opacity: 1; opacity: 1;
@@ -190,63 +220,234 @@
} }
} }
@keyframes scale-in {
from {
opacity: 0;
transform: scale(0.96);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes shimmer {
0% {
background-position: -1000px 0;
}
100% {
background-position: 1000px 0;
}
}
@keyframes gradient-shift {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
/* Smooth scrolling */ /* Smooth scrolling */
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
/* Amélioration des transitions globales */ /* Amélioration des transitions globales avec easing fintech */
* { * {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms; transition-duration: 200ms;
} }
/* Background fintech moderne avec dégradés subtils */ /* Désactiver COMPLÈTEMENT toutes les animations pour les popovers et selects - APPROCHE AGRESSIVE */
[data-slot="popover-content"],
[data-slot="select-content"],
[data-slot="dropdown-menu-content"],
[data-slot="popover-content"] *,
[data-slot="select-content"] *,
[data-slot="dropdown-menu-content"] *,
[data-radix-popper-content-wrapper],
[data-radix-select-content],
[data-radix-dropdown-menu-content] {
animation: none !important;
transition: none !important;
/* Ne pas toucher au transform car il est utilisé pour le positionnement */
opacity: 1 !important;
will-change: auto !important;
}
/* Désactiver TOUTES les classes Tailwind d'animation - sélecteurs ultra-spécifiques */
[data-slot="popover-content"].animate-in,
[data-slot="select-content"].animate-in,
[data-slot="dropdown-menu-content"].animate-in,
[data-slot="popover-content"].animate-out,
[data-slot="select-content"].animate-out,
[data-slot="dropdown-menu-content"].animate-out,
[data-slot="popover-content"][class*="fade"],
[data-slot="select-content"][class*="fade"],
[data-slot="dropdown-menu-content"][class*="fade"],
[data-slot="popover-content"][class*="zoom"],
[data-slot="select-content"][class*="zoom"],
[data-slot="dropdown-menu-content"][class*="zoom"],
[data-slot="popover-content"][class*="slide"],
[data-slot="select-content"][class*="slide"],
[data-slot="dropdown-menu-content"][class*="slide"],
[data-slot="popover-content"][class*="animate"],
[data-slot="select-content"][class*="animate"],
[data-slot="dropdown-menu-content"][class*="animate"] {
animation: none !important;
transition: none !important;
/* Ne pas toucher au transform car il est utilisé pour le positionnement */
opacity: 1 !important;
will-change: auto !important;
}
/* Override pour tous les états data-state */
[data-slot="popover-content"][data-state="open"],
[data-slot="popover-content"][data-state="closed"],
[data-slot="select-content"][data-state="open"],
[data-slot="select-content"][data-state="closed"],
[data-slot="dropdown-menu-content"][data-state="open"],
[data-slot="dropdown-menu-content"][data-state="closed"] {
animation: none !important;
transition: none !important;
/* Ne pas toucher au transform car il est utilisé pour le positionnement */
opacity: 1 !important;
}
/* Glassmorphism effect très prononcé */
.glass {
background: var(--card);
backdrop-filter: blur(40px) saturate(200%);
-webkit-backdrop-filter: blur(40px) saturate(200%);
border: 1px solid var(--border);
box-shadow:
0 8px 32px -8px color-mix(in srgb, var(--primary) 10%, transparent),
inset 0 1px 0 0 color-mix(in srgb, white 20%, transparent);
}
/* Gradient text effect */
.gradient-text {
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
}
/* Card hover effect avec élévation */
.card-hover {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.card-hover::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg,
color-mix(in srgb, var(--primary) 30%, transparent) 0%,
color-mix(in srgb, var(--chart-2) 20%, transparent) 100%
);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.4s ease;
}
.card-hover:hover {
transform: translateY(-4px) scale(1.01);
box-shadow:
0 20px 40px -12px color-mix(in srgb, var(--primary) 20%, transparent),
0 8px 16px -8px color-mix(in srgb, var(--foreground) 10%, transparent),
inset 0 1px 0 0 color-mix(in srgb, white 30%, transparent);
}
.card-hover:hover::before {
opacity: 1;
}
/* Background fintech moderne avec dégradés animés et formes abstraites */
.page-background { .page-background {
position: relative; position: relative;
background: var(--background); background: linear-gradient(135deg,
oklch(0.98 0.01 280) 0%,
oklch(0.97 0.012 270) 50%,
oklch(0.98 0.01 290) 100%
);
overflow: hidden;
} }
.page-background::before { .page-background::before {
content: ""; content: "";
position: fixed; position: fixed;
top: 0; top: -50%;
left: 0; left: -50%;
right: 0; right: -50%;
bottom: 0; bottom: -50%;
z-index: 0; z-index: 0;
background: background:
radial-gradient(ellipse 100% 60% at 0% 0%, /* Formes abstraites circulaires */
color-mix(in srgb, var(--primary) 8%, transparent) 0%, radial-gradient(circle 800px at 10% 20%,
color-mix(in srgb, var(--primary) 15%, transparent) 0%,
transparent 50%
),
radial-gradient(circle 600px at 90% 80%,
color-mix(in srgb, var(--chart-2) 12%, transparent) 0%,
transparent 50%
),
radial-gradient(circle 500px at 50% 50%,
color-mix(in srgb, var(--chart-3) 10%, transparent) 0%,
transparent 60% transparent 60%
), ),
radial-gradient(ellipse 80% 50% at 100% 100%, radial-gradient(circle 400px at 20% 70%,
color-mix(in srgb, var(--chart-2) 6%, transparent) 0%, color-mix(in srgb, var(--chart-4) 8%, transparent) 0%,
transparent 60% transparent 65%
), ),
radial-gradient(ellipse 60% 40% at 50% 50%, radial-gradient(circle 300px at 80% 30%,
color-mix(in srgb, var(--chart-3) 4%, transparent) 0%, color-mix(in srgb, var(--primary-light) 6%, transparent) 0%,
transparent 70% transparent 70%
); );
background-size: 100% 100%; background-size: 200% 200%;
pointer-events: none; pointer-events: none;
opacity: 1; opacity: 1;
transition: opacity 0.3s ease; transition: opacity 0.5s ease;
animation: gradient-shift 25s ease infinite;
}
.dark .page-background {
background: linear-gradient(135deg,
oklch(0.1 0.015 280) 0%,
oklch(0.11 0.018 270) 50%,
oklch(0.1 0.015 290) 100%
);
} }
.dark .page-background::before { .dark .page-background::before {
background: background:
radial-gradient(ellipse 100% 60% at 0% 0%, radial-gradient(circle 800px at 10% 20%,
color-mix(in srgb, var(--primary) 12%, transparent) 0%, color-mix(in srgb, var(--primary) 22%, transparent) 0%,
transparent 50%
),
radial-gradient(circle 600px at 90% 80%,
color-mix(in srgb, var(--chart-2) 18%, transparent) 0%,
transparent 50%
),
radial-gradient(circle 500px at 50% 50%,
color-mix(in srgb, var(--chart-3) 15%, transparent) 0%,
transparent 60% transparent 60%
), ),
radial-gradient(ellipse 80% 50% at 100% 100%, radial-gradient(circle 400px at 20% 70%,
color-mix(in srgb, var(--chart-2) 10%, transparent) 0%, color-mix(in srgb, var(--chart-4) 12%, transparent) 0%,
transparent 60% transparent 65%
), ),
radial-gradient(ellipse 60% 40% at 50% 50%, radial-gradient(circle 300px at 80% 30%,
color-mix(in srgb, var(--chart-3) 8%, transparent) 0%, color-mix(in srgb, var(--primary-light) 10%, transparent) 0%,
transparent 70% transparent 70%
); );
opacity: 1; opacity: 1;
@@ -256,4 +457,145 @@
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
/* Fintech card styles avec glassmorphism très prononcé */
.fintech-card {
background: var(--card);
backdrop-filter: blur(50px) saturate(200%);
-webkit-backdrop-filter: blur(50px) saturate(200%);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow:
0 8px 32px -8px color-mix(in srgb, var(--primary) 8%, transparent),
0 2px 8px -2px color-mix(in srgb, var(--foreground) 3%, transparent),
inset 0 1px 0 0 color-mix(in srgb, white 25%, transparent);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.fintech-card::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
color-mix(in srgb, white 40%, transparent) 50%,
transparent 100%
);
opacity: 0.5;
}
.fintech-card:hover {
transform: translateY(-6px) scale(1.01);
box-shadow:
0 24px 48px -12px color-mix(in srgb, var(--primary) 25%, transparent),
0 8px 24px -8px color-mix(in srgb, var(--foreground) 8%, transparent),
inset 0 1px 0 0 color-mix(in srgb, white 40%, transparent);
border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
}
/* Gradient backgrounds for stat cards très vibrants */
.stat-card-gradient-1 {
background: linear-gradient(135deg,
color-mix(in srgb, var(--primary) 12%, var(--card)) 0%,
color-mix(in srgb, var(--primary-light) 8%, var(--card)) 50%,
color-mix(in srgb, var(--primary) 6%, var(--card)) 100%
);
position: relative;
overflow: hidden;
}
.stat-card-gradient-1::before {
content: "";
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle,
color-mix(in srgb, var(--primary) 20%, transparent) 0%,
transparent 70%
);
opacity: 0.3;
animation: gradient-shift 8s ease infinite;
}
.stat-card-gradient-2 {
background: linear-gradient(135deg,
color-mix(in srgb, var(--success) 12%, var(--card)) 0%,
color-mix(in srgb, var(--success) 8%, var(--card)) 50%,
color-mix(in srgb, var(--success) 6%, var(--card)) 100%
);
position: relative;
overflow: hidden;
}
.stat-card-gradient-2::before {
content: "";
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle,
color-mix(in srgb, var(--success) 20%, transparent) 0%,
transparent 70%
);
opacity: 0.3;
animation: gradient-shift 8s ease infinite;
}
.stat-card-gradient-3 {
background: linear-gradient(135deg,
color-mix(in srgb, var(--destructive) 12%, var(--card)) 0%,
color-mix(in srgb, var(--destructive) 8%, var(--card)) 50%,
color-mix(in srgb, var(--destructive) 6%, var(--card)) 100%
);
position: relative;
overflow: hidden;
}
.stat-card-gradient-3::before {
content: "";
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle,
color-mix(in srgb, var(--destructive) 20%, transparent) 0%,
transparent 70%
);
opacity: 0.3;
animation: gradient-shift 8s ease infinite;
}
.stat-card-gradient-4 {
background: linear-gradient(135deg,
color-mix(in srgb, var(--chart-4) 12%, var(--card)) 0%,
color-mix(in srgb, var(--chart-4) 8%, var(--card)) 50%,
color-mix(in srgb, var(--chart-4) 6%, var(--card)) 100%
);
position: relative;
overflow: hidden;
}
.stat-card-gradient-4::before {
content: "";
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle,
color-mix(in srgb, var(--chart-4) 20%, transparent) 0%,
transparent 70%
);
opacity: 0.3;
animation: gradient-shift 8s ease infinite;
}
} }

12
app/page.tsx
View File

@@ -52,22 +52,22 @@ export default function DashboardPage() {
description="Vue d'ensemble de vos finances" description="Vue d'ensemble de vos finances"
actions={ actions={
<OFXImportDialog onImportComplete={refresh}> <OFXImportDialog onImportComplete={refresh}>
<Button> <Button className="md:h-10 md:px-5">
<Upload className="w-4 h-4 mr-2" /> <Upload className="w-4 h-4 md:mr-2" />
Importer OFX <span className="hidden md:inline">Importer OFX</span>
</Button> </Button>
</OFXImportDialog> </OFXImportDialog>
} }
/> />
<Card className="mb-4 sm:mb-6 border shadow-sm"> <Card className="mb-6 card-hover">
<CardContent className="px-4 py-4 sm:px-6 sm:py-6"> <CardContent className="px-5 py-5 sm:px-6 sm:py-6">
<AccountFilterCombobox <AccountFilterCombobox
accounts={data.accounts} accounts={data.accounts}
folders={data.folders} folders={data.folders}
value={selectedAccounts} value={selectedAccounts}
onChange={setSelectedAccounts} onChange={setSelectedAccounts}
className="w-full md:w-[280px]" className="w-full md:w-[320px]"
filteredTransactions={data.transactions} filteredTransactions={data.transactions}
/> />
</CardContent> </CardContent>

6
app/transactions/page.tsx
View File

@@ -465,9 +465,9 @@ export default function TransactionsPage() {
description={`${totalTransactions} transaction${totalTransactions > 1 ? "s" : ""}`} description={`${totalTransactions} transaction${totalTransactions > 1 ? "s" : ""}`}
actions={ actions={
<OFXImportDialog onImportComplete={invalidateAll}> <OFXImportDialog onImportComplete={invalidateAll}>
<Button> <Button className="md:h-10 md:px-5">
<Upload className="w-4 h-4 mr-2" /> <Upload className="w-4 h-4 md:mr-2" />
Importer OFX <span className="hidden md:inline">Importer OFX</span>
</Button> </Button>
</OFXImportDialog> </OFXImportDialog>
} }

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

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

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

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

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

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

62
components/dashboard/sidebar.tsx
View File

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

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

@@ -5,7 +5,6 @@ import { Button } from "@/components/ui/button";
import { Menu } from "lucide-react"; import { Menu } from "lucide-react";
import { useSidebarContext } from "@/components/layout/sidebar-context"; import { useSidebarContext } from "@/components/layout/sidebar-context";
import { useIsMobile } from "@/hooks/use-mobile"; import { useIsMobile } from "@/hooks/use-mobile";
import { cn } from "@/lib/utils";
interface PageHeaderProps { interface PageHeaderProps {
title: string; title: string;
@@ -24,38 +23,51 @@ export function PageHeader({
const isMobile = useIsMobile(); const isMobile = useIsMobile();
return ( return (
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between"> <div className="relative flex flex-col gap-4 md:flex-row md:items-center md:justify-between mb-2">
<div className="flex items-center gap-3"> <div className="flex items-center gap-4 flex-1 min-w-0">
{isMobile && ( {isMobile && (
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
onClick={() => setOpen(true)} onClick={() => setOpen(true)}
className="shrink-0" className="shrink-0 rounded-xl hover:bg-muted/60"
> >
<Menu className="w-5 h-5" /> <Menu className="w-5 h-5" />
</Button> </Button>
)} )}
<div> <div className="flex-1 min-w-0 pr-20 md:pr-0">
<h1 className="text-lg md:text-2xl font-bold text-foreground"> <h1 className="text-3xl md:text-4xl lg:text-5xl font-black text-foreground tracking-tight mb-2 leading-tight">
{title} {title}
</h1> </h1>
{description && ( {description && (
<div className="text-xs md:text-base text-muted-foreground mt-1"> <div className="text-base md:text-lg text-muted-foreground/70 font-semibold">
{description} {description}
</div> </div>
)} )}
</div> </div>
</div> </div>
{(rightContent || actions) && ( {(rightContent || actions) && (
<div className="flex items-center gap-2 flex-wrap"> <>
{rightContent} {isMobile ? (
{actions && ( <div className="absolute top-0 right-0 flex items-center gap-2">
<div className={cn("flex gap-2", isMobile && "flex-wrap")}> {rightContent}
{actions} {actions && (
<div className="[&>button]:h-10 [&>button]:px-3 [&>button]:text-sm">
{actions}
</div>
)}
</div>
) : (
<div className="flex items-center gap-3 flex-wrap">
{rightContent}
{actions && (
<div className="flex gap-3">
{actions}
</div>
)}
</div> </div>
)} )}
</div> </>
)} )}
</div> </div>
); );

2
components/layout/page-layout.tsx
View File

@@ -18,7 +18,7 @@ export function PageLayout({ children }: PageLayoutProps) {
<div className="flex h-screen bg-background overflow-hidden page-background"> <div className="flex h-screen bg-background overflow-hidden page-background">
<Sidebar open={sidebarOpen} onOpenChange={setSidebarOpen} /> <Sidebar open={sidebarOpen} onOpenChange={setSidebarOpen} />
<main className="flex-1 overflow-auto overflow-x-hidden page-content"> <main className="flex-1 overflow-auto overflow-x-hidden page-content">
<div className="p-4 md:p-6 space-y-4 md:space-y-6 max-w-full"> <div className="p-6 md:p-8 lg:p-10 space-y-6 md:space-y-8 max-w-full">
{children} {children}
</div> </div>
</main> </main>

26
components/ui/button.tsx
View File

@@ -5,28 +5,28 @@ import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
const buttonVariants = cva( const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all duration-200 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-semibold transition-all duration-300 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
{ {
variants: { variants: {
variant: { variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90 hover:shadow-lg hover:shadow-primary/25 active:scale-[0.98]", 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: destructive:
"bg-destructive text-white hover:bg-destructive/90 hover:shadow-lg hover:shadow-destructive/25 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 active:scale-[0.98]", "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: outline:
"border bg-background/80 backdrop-blur-sm shadow-sm hover:bg-accent hover:text-accent-foreground hover:border-primary/30 hover:shadow-md dark:bg-input/30 dark:border-input dark:hover:bg-input/50 active:scale-[0.98]", "border-2 bg-background/95 backdrop-blur-md shadow-md hover:bg-accent hover:text-accent-foreground hover:border-primary/50 hover:shadow-lg hover:scale-[1.03] dark:bg-input/40 dark:border-input dark:hover:bg-input/60 active:scale-[0.97]",
secondary: secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80 hover:shadow-sm active:scale-[0.98]", "bg-gradient-to-r from-secondary via-secondary/95 to-secondary/90 text-secondary-foreground hover:from-secondary/95 hover:via-secondary hover:to-secondary/95 hover:shadow-lg hover:scale-[1.03] active:scale-[0.97] backdrop-blur-sm",
ghost: ghost:
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 active:scale-[0.98]", "hover:bg-accent/70 hover:text-accent-foreground dark:hover:bg-accent/50 hover:scale-[1.03] active:scale-[0.97] backdrop-blur-sm",
link: "text-primary underline-offset-4 hover:underline", link: "text-primary underline-offset-4 hover:underline font-semibold",
}, },
size: { size: {
default: "h-9 px-4 py-2 has-[>svg]:px-3", default: "h-10 px-5 py-2.5 has-[>svg]:px-4",
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5", sm: "h-9 rounded-lg gap-1.5 px-4 has-[>svg]:px-3 text-xs",
lg: "h-10 rounded-md px-6 has-[>svg]:px-4", lg: "h-12 rounded-xl px-7 has-[>svg]:px-5 text-base",
icon: "size-9", icon: "size-10",
"icon-sm": "size-8", "icon-sm": "size-9",
"icon-lg": "size-10", "icon-lg": "size-12",
}, },
}, },
defaultVariants: { defaultVariants: {

9
components/ui/card.tsx
View File

@@ -7,12 +7,9 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
<div <div
data-slot="card" data-slot="card"
className={cn( className={cn(
"bg-card text-card-foreground flex flex-col rounded-xl border", "fintech-card",
"shadow-[0_1px_3px_0_rgb(0_0_0_/_0.05),0_1px_2px_-1px_rgb(0_0_0_/_0.05)]", "bg-card text-card-foreground flex flex-col",
"backdrop-blur-sm", "transition-all duration-300 ease-out",
"transition-all duration-200",
"hover:shadow-[0_4px_12px_0_rgb(0_0_0_/_0.08),0_2px_4px_-1px_rgb(0_0_0_/_0.06)]",
"hover:border-primary/20",
className className
)} )}
{...props} {...props}

3
components/ui/dropdown-menu.tsx
View File

@@ -43,7 +43,6 @@ function DropdownMenuContent({
sideOffset={sideOffset} sideOffset={sideOffset}
className={cn( className={cn(
"bg-popover text-popover-foreground backdrop-blur-md", "bg-popover text-popover-foreground backdrop-blur-md",
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
"z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto", "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto",
"rounded-lg border border-border/50 p-1 shadow-lg shadow-black/5", "rounded-lg border border-border/50 p-1 shadow-lg shadow-black/5",
className, className,
@@ -233,7 +232,7 @@ function DropdownMenuSubContent({
<DropdownMenuPrimitive.SubContent <DropdownMenuPrimitive.SubContent
data-slot="dropdown-menu-sub-content" data-slot="dropdown-menu-sub-content"
className={cn( className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg", "bg-popover text-popover-foreground z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
className, className,
)} )}
{...props} {...props}

58
components/ui/popover.tsx
View File

@@ -23,16 +23,72 @@ function PopoverContent({
sideOffset = 4, sideOffset = 4,
...props ...props
}: React.ComponentProps<typeof PopoverPrimitive.Content>) { }: React.ComponentProps<typeof PopoverPrimitive.Content>) {
const contentRef = React.useRef<HTMLDivElement>(null);
React.useEffect(() => {
const element = contentRef.current;
if (!element) return;
const disableAnimations = () => {
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');
// 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')
);
classesToRemove.forEach(cls => element.classList.remove(cls));
};
// Désactiver immédiatement
disableAnimations();
// Observer pour les changements d'attributs
const observer = new MutationObserver(() => {
disableAnimations();
});
observer.observe(element, {
attributes: true,
attributeFilter: ['class', 'data-state'],
subtree: false,
});
// Observer pour les changements dans le DOM
const domObserver = new MutationObserver(() => {
disableAnimations();
});
domObserver.observe(document.body, {
childList: true,
subtree: true,
});
return () => {
observer.disconnect();
domObserver.disconnect();
};
}, []);
return ( return (
<PopoverPrimitive.Portal> <PopoverPrimitive.Portal>
<PopoverPrimitive.Content <PopoverPrimitive.Content
ref={contentRef}
data-slot="popover-content" data-slot="popover-content"
align={align} align={align}
sideOffset={sideOffset} sideOffset={sideOffset}
className={cn( className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden", "bg-popover text-popover-foreground z-50 w-72 rounded-md border p-4 shadow-md outline-hidden",
className, className,
)} )}
style={{
animation: 'none !important',
transition: 'none !important',
opacity: '1 !important',
} as React.CSSProperties}
{...props} {...props}
/> />
</PopoverPrimitive.Portal> </PopoverPrimitive.Portal>

4
components/ui/progress.tsx
View File

@@ -14,14 +14,14 @@ function Progress({
<ProgressPrimitive.Root <ProgressPrimitive.Root
data-slot="progress" data-slot="progress"
className={cn( className={cn(
"bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", "bg-muted/60 relative w-full overflow-hidden rounded-full backdrop-blur-sm",
className, className,
)} )}
{...props} {...props}
> >
<ProgressPrimitive.Indicator <ProgressPrimitive.Indicator
data-slot="progress-indicator" data-slot="progress-indicator"
className="bg-primary h-full w-full flex-1 transition-all" className="bg-gradient-to-r from-primary via-primary/90 to-primary h-full w-full flex-1 transition-all duration-500 ease-out shadow-sm shadow-primary/20"
style={{ transform: `translateX(-${100 - (value || 0)}%)` }} style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
/> />
</ProgressPrimitive.Root> </ProgressPrimitive.Root>

60
components/ui/select.tsx
View File

@@ -56,17 +56,71 @@ function SelectContent({
position = "popper", position = "popper",
...props ...props
}: React.ComponentProps<typeof SelectPrimitive.Content>) { }: React.ComponentProps<typeof SelectPrimitive.Content>) {
const contentRef = React.useRef<HTMLDivElement>(null);
React.useEffect(() => {
const element = contentRef.current;
if (!element) return;
const disableAnimations = () => {
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');
// 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')
);
classesToRemove.forEach(cls => element.classList.remove(cls));
};
// Désactiver immédiatement
disableAnimations();
// Observer pour les changements d'attributs
const observer = new MutationObserver(() => {
disableAnimations();
});
observer.observe(element, {
attributes: true,
attributeFilter: ['class', 'data-state'],
subtree: false,
});
// Observer pour les changements dans le DOM
const domObserver = new MutationObserver(() => {
disableAnimations();
});
domObserver.observe(document.body, {
childList: true,
subtree: true,
});
return () => {
observer.disconnect();
domObserver.disconnect();
};
}, []);
return ( return (
<SelectPrimitive.Portal> <SelectPrimitive.Portal>
<SelectPrimitive.Content <SelectPrimitive.Content
ref={contentRef}
data-slot="select-content" data-slot="select-content"
className={cn( className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md", "bg-popover text-popover-foreground relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
position === "popper" &&
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
className, className,
)} )}
position={position} position={position}
style={{
animation: 'none !important',
transition: 'none !important',
opacity: '1 !important',
} as React.CSSProperties}
{...props} {...props}
> >
<SelectScrollUpButton /> <SelectScrollUpButton />