feat: revamp global styles and component designs with enhanced gradients, shadows, and responsive layouts for a modern fintech aesthetic
This commit is contained in:
Julien Froidefond
548
app/globals.css
548
app/globals.css
@@ -4,117 +4,135 @@
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
:root {
|
||||
/* Background moderne avec légère teinte */
|
||||
--background: oklch(0.99 0.002 270);
|
||||
--foreground: oklch(0.15 0.01 270);
|
||||
/* Background fintech ultra-moderne avec dégradé vibrant */
|
||||
--background: oklch(0.98 0.008 280);
|
||||
--foreground: oklch(0.1 0.015 280);
|
||||
|
||||
/* Cards avec glassmorphism subtil */
|
||||
--card: oklch(1 0 0 / 0.8);
|
||||
--card-foreground: oklch(0.15 0.01 270);
|
||||
/* Cards avec glassmorphism très prononcé */
|
||||
--card: oklch(1 0 0 / 0.6);
|
||||
--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-foreground: oklch(0.15 0.01 270);
|
||||
--popover-foreground: oklch(0.1 0.015 280);
|
||||
|
||||
/* Primary: Bleu/violet fintech moderne */
|
||||
--primary: oklch(0.55 0.18 260);
|
||||
/* Primary: Bleu/violet fintech très vibrant avec gradient */
|
||||
--primary: oklch(0.6 0.25 270);
|
||||
--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: oklch(0.97 0.005 270);
|
||||
--secondary-foreground: oklch(0.25 0.01 270);
|
||||
--secondary: oklch(0.97 0.008 280);
|
||||
--secondary-foreground: oklch(0.25 0.015 280);
|
||||
|
||||
/* Muted plus doux */
|
||||
--muted: oklch(0.96 0.003 270);
|
||||
--muted-foreground: oklch(0.5 0.008 270);
|
||||
--muted: oklch(0.96 0.006 280);
|
||||
--muted-foreground: oklch(0.5 0.012 280);
|
||||
|
||||
/* Accent avec couleur vibrante */
|
||||
--accent: oklch(0.95 0.01 260);
|
||||
--accent-foreground: oklch(0.55 0.18 260);
|
||||
/* Accent avec couleur très vibrante */
|
||||
--accent: oklch(0.95 0.015 260);
|
||||
--accent-foreground: oklch(0.6 0.25 270);
|
||||
|
||||
/* Destructive moderne */
|
||||
--destructive: oklch(0.55 0.22 25);
|
||||
--destructive: oklch(0.6 0.26 25);
|
||||
--destructive-foreground: oklch(0.99 0 0);
|
||||
|
||||
/* Bordures fines et subtiles */
|
||||
--border: oklch(0.92 0.005 270 / 0.6);
|
||||
--input: oklch(0.96 0.003 270);
|
||||
--ring: oklch(0.55 0.18 260 / 0.3);
|
||||
--border: oklch(0.9 0.008 280 / 0.4);
|
||||
--input: oklch(0.97 0.006 280);
|
||||
--ring: oklch(0.6 0.25 270 / 0.5);
|
||||
|
||||
/* Chart colors modernes et vibrantes */
|
||||
--chart-1: oklch(0.6 0.2 260);
|
||||
--chart-2: oklch(0.65 0.18 180);
|
||||
--chart-3: oklch(0.7 0.15 120);
|
||||
--chart-4: oklch(0.65 0.2 320);
|
||||
--chart-5: oklch(0.6 0.18 40);
|
||||
/* Chart colors très vibrantes */
|
||||
--chart-1: oklch(0.65 0.25 270);
|
||||
--chart-2: oklch(0.7 0.22 180);
|
||||
--chart-3: oklch(0.75 0.2 120);
|
||||
--chart-4: oklch(0.7 0.25 320);
|
||||
--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 */
|
||||
--sidebar: oklch(0.98 0.003 270);
|
||||
--sidebar-foreground: oklch(0.2 0.01 270);
|
||||
--sidebar-primary: oklch(0.55 0.18 260);
|
||||
--radius: 1.25rem;
|
||||
|
||||
/* Sidebar moderne avec glassmorphism très prononcé */
|
||||
--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-accent: oklch(0.95 0.01 260);
|
||||
--sidebar-accent-foreground: oklch(0.25 0.01 270);
|
||||
--sidebar-border: oklch(0.92 0.005 270 / 0.5);
|
||||
--sidebar-ring: oklch(0.55 0.18 260 / 0.2);
|
||||
--sidebar-accent: oklch(0.96 0.015 260);
|
||||
--sidebar-accent-foreground: oklch(0.25 0.015 280);
|
||||
--sidebar-border: oklch(0.9 0.008 280 / 0.3);
|
||||
--sidebar-ring: oklch(0.6 0.25 270 / 0.4);
|
||||
}
|
||||
|
||||
.dark {
|
||||
/* Background sombre avec teinte subtile */
|
||||
--background: oklch(0.12 0.01 270);
|
||||
--foreground: oklch(0.98 0.002 270);
|
||||
/* Background sombre fintech avec dégradé vibrant */
|
||||
--background: oklch(0.1 0.015 280);
|
||||
--foreground: oklch(0.97 0.005 280);
|
||||
|
||||
/* Cards avec effet glassmorphism sombre */
|
||||
--card: oklch(0.15 0.01 270 / 0.7);
|
||||
--card-foreground: oklch(0.98 0.002 270);
|
||||
/* Cards avec effet glassmorphism sombre très prononcé */
|
||||
--card: oklch(0.15 0.015 280 / 0.6);
|
||||
--card-foreground: oklch(0.97 0.005 280);
|
||||
--card-hover: oklch(0.18 0.015 280 / 0.75);
|
||||
|
||||
/* Popover avec backdrop blur */
|
||||
--popover: oklch(0.15 0.01 270 / 0.95);
|
||||
--popover-foreground: oklch(0.98 0.002 270);
|
||||
/* Popover avec backdrop blur très fort */
|
||||
--popover: oklch(0.15 0.015 280 / 0.95);
|
||||
--popover-foreground: oklch(0.97 0.005 280);
|
||||
|
||||
/* Primary: Bleu/violet brillant pour dark mode */
|
||||
--primary: oklch(0.65 0.2 260);
|
||||
--primary-foreground: oklch(0.12 0.01 270);
|
||||
/* Primary: Bleu/violet très brillant pour dark mode */
|
||||
--primary: oklch(0.72 0.28 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: oklch(0.22 0.01 270);
|
||||
--secondary-foreground: oklch(0.95 0.002 270);
|
||||
--secondary: oklch(0.22 0.015 280);
|
||||
--secondary-foreground: oklch(0.95 0.005 280);
|
||||
|
||||
/* Muted plus visible */
|
||||
--muted: oklch(0.22 0.01 270);
|
||||
--muted-foreground: oklch(0.65 0.008 270);
|
||||
--muted: oklch(0.22 0.015 280);
|
||||
--muted-foreground: oklch(0.7 0.012 280);
|
||||
|
||||
/* Accent vibrant */
|
||||
--accent: oklch(0.25 0.015 260);
|
||||
--accent-foreground: oklch(0.65 0.2 260);
|
||||
/* Accent très vibrant */
|
||||
--accent: oklch(0.26 0.02 260);
|
||||
--accent-foreground: oklch(0.72 0.28 270);
|
||||
|
||||
/* Destructive moderne */
|
||||
--destructive: oklch(0.6 0.22 25);
|
||||
--destructive-foreground: oklch(0.98 0 0);
|
||||
--destructive: oklch(0.68 0.27 25);
|
||||
--destructive-foreground: oklch(0.97 0 0);
|
||||
|
||||
/* Bordures subtiles */
|
||||
--border: oklch(0.25 0.01 270 / 0.5);
|
||||
--input: oklch(0.22 0.01 270);
|
||||
--ring: oklch(0.65 0.2 260 / 0.4);
|
||||
--border: oklch(0.25 0.015 280 / 0.4);
|
||||
--input: oklch(0.22 0.015 280);
|
||||
--ring: oklch(0.72 0.28 270 / 0.6);
|
||||
|
||||
/* Chart colors vibrantes pour dark */
|
||||
--chart-1: oklch(0.7 0.22 260);
|
||||
--chart-2: oklch(0.75 0.2 180);
|
||||
--chart-3: oklch(0.8 0.18 120);
|
||||
--chart-4: oklch(0.75 0.22 320);
|
||||
--chart-5: oklch(0.7 0.2 40);
|
||||
/* Chart colors très vibrantes pour dark */
|
||||
--chart-1: oklch(0.75 0.27 270);
|
||||
--chart-2: oklch(0.8 0.25 180);
|
||||
--chart-3: oklch(0.85 0.23 120);
|
||||
--chart-4: oklch(0.8 0.27 320);
|
||||
--chart-5: oklch(0.75 0.25 40);
|
||||
|
||||
/* Sidebar dark moderne */
|
||||
--sidebar: oklch(0.14 0.01 270);
|
||||
--sidebar-foreground: oklch(0.95 0.002 270);
|
||||
--sidebar-primary: oklch(0.65 0.2 260);
|
||||
--sidebar-primary-foreground: oklch(0.12 0.01 270);
|
||||
--sidebar-accent: oklch(0.25 0.015 260);
|
||||
--sidebar-accent-foreground: oklch(0.95 0.002 270);
|
||||
--sidebar-border: oklch(0.25 0.01 270 / 0.4);
|
||||
--sidebar-ring: oklch(0.65 0.2 260 / 0.3);
|
||||
/* Success et Warning pour fintech dark */
|
||||
--success: oklch(0.73 0.22 150);
|
||||
--success-foreground: oklch(0.1 0.015 280);
|
||||
--warning: oklch(0.8 0.22 80);
|
||||
--warning-foreground: oklch(0.1 0.015 280);
|
||||
|
||||
/* Sidebar dark moderne avec glassmorphism très prononcé */
|
||||
--sidebar: oklch(0.12 0.015 280 / 0.5);
|
||||
--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 {
|
||||
@@ -165,13 +183,25 @@
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
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 {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(4px);
|
||||
transform: translateY(8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
@@ -182,7 +212,7 @@
|
||||
@keyframes slide-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-8px);
|
||||
transform: translateX(-12px);
|
||||
}
|
||||
to {
|
||||
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 */
|
||||
html {
|
||||
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-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 {
|
||||
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 {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
right: -50%;
|
||||
bottom: -50%;
|
||||
z-index: 0;
|
||||
background:
|
||||
radial-gradient(ellipse 100% 60% at 0% 0%,
|
||||
color-mix(in srgb, var(--primary) 8%, transparent) 0%,
|
||||
/* Formes abstraites circulaires */
|
||||
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%
|
||||
),
|
||||
radial-gradient(ellipse 80% 50% at 100% 100%,
|
||||
color-mix(in srgb, var(--chart-2) 6%, transparent) 0%,
|
||||
transparent 60%
|
||||
radial-gradient(circle 400px at 20% 70%,
|
||||
color-mix(in srgb, var(--chart-4) 8%, transparent) 0%,
|
||||
transparent 65%
|
||||
),
|
||||
radial-gradient(ellipse 60% 40% at 50% 50%,
|
||||
color-mix(in srgb, var(--chart-3) 4%, transparent) 0%,
|
||||
radial-gradient(circle 300px at 80% 30%,
|
||||
color-mix(in srgb, var(--primary-light) 6%, transparent) 0%,
|
||||
transparent 70%
|
||||
);
|
||||
background-size: 100% 100%;
|
||||
background-size: 200% 200%;
|
||||
pointer-events: none;
|
||||
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 {
|
||||
background:
|
||||
radial-gradient(ellipse 100% 60% at 0% 0%,
|
||||
color-mix(in srgb, var(--primary) 12%, transparent) 0%,
|
||||
radial-gradient(circle 800px at 10% 20%,
|
||||
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%
|
||||
),
|
||||
radial-gradient(ellipse 80% 50% at 100% 100%,
|
||||
color-mix(in srgb, var(--chart-2) 10%, transparent) 0%,
|
||||
transparent 60%
|
||||
radial-gradient(circle 400px at 20% 70%,
|
||||
color-mix(in srgb, var(--chart-4) 12%, transparent) 0%,
|
||||
transparent 65%
|
||||
),
|
||||
radial-gradient(ellipse 60% 40% at 50% 50%,
|
||||
color-mix(in srgb, var(--chart-3) 8%, transparent) 0%,
|
||||
radial-gradient(circle 300px at 80% 30%,
|
||||
color-mix(in srgb, var(--primary-light) 10%, transparent) 0%,
|
||||
transparent 70%
|
||||
);
|
||||
opacity: 1;
|
||||
@@ -256,4 +457,145 @@
|
||||
position: relative;
|
||||
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
12
app/page.tsx
@@ -52,22 +52,22 @@ export default function DashboardPage() {
|
||||
description="Vue d'ensemble de vos finances"
|
||||
actions={
|
||||
<OFXImportDialog onImportComplete={refresh}>
|
||||
<Button>
|
||||
<Upload className="w-4 h-4 mr-2" />
|
||||
Importer OFX
|
||||
<Button className="md:h-10 md:px-5">
|
||||
<Upload className="w-4 h-4 md:mr-2" />
|
||||
<span className="hidden md:inline">Importer OFX</span>
|
||||
</Button>
|
||||
</OFXImportDialog>
|
||||
}
|
||||
/>
|
||||
|
||||
<Card className="mb-4 sm:mb-6 border shadow-sm">
|
||||
<CardContent className="px-4 py-4 sm:px-6 sm:py-6">
|
||||
<Card className="mb-6 card-hover">
|
||||
<CardContent className="px-5 py-5 sm:px-6 sm:py-6">
|
||||
<AccountFilterCombobox
|
||||
accounts={data.accounts}
|
||||
folders={data.folders}
|
||||
value={selectedAccounts}
|
||||
onChange={setSelectedAccounts}
|
||||
className="w-full md:w-[280px]"
|
||||
className="w-full md:w-[320px]"
|
||||
filteredTransactions={data.transactions}
|
||||
/>
|
||||
</CardContent>
|
||||
|
||||
@@ -465,9 +465,9 @@ export default function TransactionsPage() {
|
||||
description={`${totalTransactions} transaction${totalTransactions > 1 ? "s" : ""}`}
|
||||
actions={
|
||||
<OFXImportDialog onImportComplete={invalidateAll}>
|
||||
<Button>
|
||||
<Upload className="w-4 h-4 mr-2" />
|
||||
Importer OFX
|
||||
<Button className="md:h-10 md:px-5">
|
||||
<Upload className="w-4 h-4 md:mr-2" />
|
||||
<span className="hidden md:inline">Importer OFX</span>
|
||||
</Button>
|
||||
</OFXImportDialog>
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 ? "+" : ""}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -5,7 +5,6 @@ import { Button } from "@/components/ui/button";
|
||||
import { Menu } from "lucide-react";
|
||||
import { useSidebarContext } from "@/components/layout/sidebar-context";
|
||||
import { useIsMobile } from "@/hooks/use-mobile";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface PageHeaderProps {
|
||||
title: string;
|
||||
@@ -24,38 +23,51 @@ export function PageHeader({
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<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-4 flex-1 min-w-0">
|
||||
{isMobile && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setOpen(true)}
|
||||
className="shrink-0"
|
||||
className="shrink-0 rounded-xl hover:bg-muted/60"
|
||||
>
|
||||
<Menu className="w-5 h-5" />
|
||||
</Button>
|
||||
)}
|
||||
<div>
|
||||
<h1 className="text-lg md:text-2xl font-bold text-foreground">
|
||||
<div className="flex-1 min-w-0 pr-20 md:pr-0">
|
||||
<h1 className="text-3xl md:text-4xl lg:text-5xl font-black text-foreground tracking-tight mb-2 leading-tight">
|
||||
{title}
|
||||
</h1>
|
||||
{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}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{(rightContent || actions) && (
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{rightContent}
|
||||
{actions && (
|
||||
<div className={cn("flex gap-2", isMobile && "flex-wrap")}>
|
||||
{actions}
|
||||
<>
|
||||
{isMobile ? (
|
||||
<div className="absolute top-0 right-0 flex items-center gap-2">
|
||||
{rightContent}
|
||||
{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>
|
||||
);
|
||||
|
||||
@@ -18,7 +18,7 @@ export function PageLayout({ children }: PageLayoutProps) {
|
||||
<div className="flex h-screen bg-background overflow-hidden page-background">
|
||||
<Sidebar open={sidebarOpen} onOpenChange={setSidebarOpen} />
|
||||
<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}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -5,28 +5,28 @@ import { cva, type VariantProps } from "class-variance-authority";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
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: {
|
||||
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:
|
||||
"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:
|
||||
"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:
|
||||
"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:
|
||||
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 active:scale-[0.98]",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
"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 font-semibold",
|
||||
},
|
||||
size: {
|
||||
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
||||
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
||||
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
||||
icon: "size-9",
|
||||
"icon-sm": "size-8",
|
||||
"icon-lg": "size-10",
|
||||
default: "h-10 px-5 py-2.5 has-[>svg]:px-4",
|
||||
sm: "h-9 rounded-lg gap-1.5 px-4 has-[>svg]:px-3 text-xs",
|
||||
lg: "h-12 rounded-xl px-7 has-[>svg]:px-5 text-base",
|
||||
icon: "size-10",
|
||||
"icon-sm": "size-9",
|
||||
"icon-lg": "size-12",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
|
||||
@@ -7,12 +7,9 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
|
||||
<div
|
||||
data-slot="card"
|
||||
className={cn(
|
||||
"bg-card text-card-foreground flex flex-col rounded-xl border",
|
||||
"shadow-[0_1px_3px_0_rgb(0_0_0_/_0.05),0_1px_2px_-1px_rgb(0_0_0_/_0.05)]",
|
||||
"backdrop-blur-sm",
|
||||
"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",
|
||||
"fintech-card",
|
||||
"bg-card text-card-foreground flex flex-col",
|
||||
"transition-all duration-300 ease-out",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -43,7 +43,6 @@ function DropdownMenuContent({
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"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",
|
||||
"rounded-lg border border-border/50 p-1 shadow-lg shadow-black/5",
|
||||
className,
|
||||
@@ -233,7 +232,7 @@ function DropdownMenuSubContent({
|
||||
<DropdownMenuPrimitive.SubContent
|
||||
data-slot="dropdown-menu-sub-content"
|
||||
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,
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -23,16 +23,72 @@ function PopoverContent({
|
||||
sideOffset = 4,
|
||||
...props
|
||||
}: 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 (
|
||||
<PopoverPrimitive.Portal>
|
||||
<PopoverPrimitive.Content
|
||||
ref={contentRef}
|
||||
data-slot="popover-content"
|
||||
align={align}
|
||||
sideOffset={sideOffset}
|
||||
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,
|
||||
)}
|
||||
style={{
|
||||
animation: 'none !important',
|
||||
transition: 'none !important',
|
||||
opacity: '1 !important',
|
||||
} as React.CSSProperties}
|
||||
{...props}
|
||||
/>
|
||||
</PopoverPrimitive.Portal>
|
||||
|
||||
@@ -14,14 +14,14 @@ function Progress({
|
||||
<ProgressPrimitive.Root
|
||||
data-slot="progress"
|
||||
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,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ProgressPrimitive.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)}%)` }}
|
||||
/>
|
||||
</ProgressPrimitive.Root>
|
||||
|
||||
@@ -56,17 +56,71 @@ function SelectContent({
|
||||
position = "popper",
|
||||
...props
|
||||
}: 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 (
|
||||
<SelectPrimitive.Portal>
|
||||
<SelectPrimitive.Content
|
||||
ref={contentRef}
|
||||
data-slot="select-content"
|
||||
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",
|
||||
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",
|
||||
"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",
|
||||
className,
|
||||
)}
|
||||
position={position}
|
||||
style={{
|
||||
animation: 'none !important',
|
||||
transition: 'none !important',
|
||||
opacity: '1 !important',
|
||||
} as React.CSSProperties}
|
||||
{...props}
|
||||
>
|
||||
<SelectScrollUpButton />
|
||||
|
||||
Reference in New Issue
Block a user