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

fix: standardize formatting and improve readability across various components and styles, including CSS and TypeScript files

Browse Source
This commit is contained in:
Julien Froidefond
2025-12-08 06:37:29 +01:00
parent 2db5bc324d
commit 0321eab5b5
18 changed files with 347 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.dockerignore
View File

@@ -19,3 +19,4 @@ README.md

31
app/accounts/page.tsx
View File

@@ -393,7 +393,11 @@ export default function AccountsPage() {
<PageLayout> <PageLayout>
<PageHeader <PageHeader
title="Comptes" title="Comptes"
description={isMobile ? undefined : "Gérez vos comptes bancaires et leur organisation"} description={
isMobile
? undefined
: "Gérez vos comptes bancaires et leur organisation"
}
actions={ actions={
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Button <Button
@@ -413,7 +417,10 @@ export default function AccountsPage() {
</span> </span>
)} )}
</Button> </Button>
<Button onClick={handleNewFolder} size={isMobile ? "icon" : "default"}> <Button
onClick={handleNewFolder}
size={isMobile ? "icon" : "default"}
>
<Plus className="w-4 h-4" /> <Plus className="w-4 h-4" />
{!isMobile && <span className="ml-2">Nouveau dossier</span>} {!isMobile && <span className="ml-2">Nouveau dossier</span>}
</Button> </Button>
@@ -431,7 +438,11 @@ export default function AccountsPage() {
totalBalance >= 0 ? "text-emerald-600" : "text-red-600", totalBalance >= 0 ? "text-emerald-600" : "text-red-600",
)} )}
> >
{isMobile && <span className="text-xs text-muted-foreground mr-2">Total:</span>} {isMobile && (
<span className="text-xs text-muted-foreground mr-2">
Total:
</span>
)}
{formatCurrency(totalBalance)} {formatCurrency(totalBalance)}
</p> </p>
</div> </div>
@@ -470,7 +481,9 @@ export default function AccountsPage() {
<Folder className="w-5 h-5 text-muted-foreground shrink-0" /> <Folder className="w-5 h-5 text-muted-foreground shrink-0" />
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="flex items-center gap-2 flex-wrap"> <div className="flex items-center gap-2 flex-wrap">
<h2 className="text-base sm:text-lg font-semibold">Sans dossier</h2> <h2 className="text-base sm:text-lg font-semibold">
Sans dossier
</h2>
<span className="text-xs sm:text-sm text-muted-foreground shrink-0"> <span className="text-xs sm:text-sm text-muted-foreground shrink-0">
({accountsByFolder["no-folder"].length}) ({accountsByFolder["no-folder"].length})
</span> </span>
@@ -566,12 +579,18 @@ export default function AccountsPage() {
{isMobile ? ( {isMobile ? (
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" className="h-8 w-8 shrink-0"> <Button
variant="ghost"
size="icon"
className="h-8 w-8 shrink-0"
>
<MoreVertical className="w-4 h-4" /> <MoreVertical className="w-4 h-4" />
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end"> <DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => handleEditFolder(folder)}> <DropdownMenuItem
onClick={() => handleEditFolder(folder)}
>
<Pencil className="w-4 h-4 mr-2" /> <Pencil className="w-4 h-4 mr-2" />
Modifier Modifier
</DropdownMenuItem> </DropdownMenuItem>

226
app/globals.css
View File

@@ -7,58 +7,63 @@
/* Background fintech ultra-moderne avec dégradé vibrant */ /* Background fintech ultra-moderne avec dégradé vibrant */
--background: oklch(0.98 0.008 280); --background: oklch(0.98 0.008 280);
--foreground: oklch(0.1 0.015 280); --foreground: oklch(0.1 0.015 280);
/* Cards avec glassmorphism très prononcé */ /* Cards avec glassmorphism très prononcé */
--card: oklch(1 0 0 / 0.6); --card: oklch(1 0 0 / 0.6);
--card-foreground: oklch(0.1 0.015 280); --card-foreground: oklch(0.1 0.015 280);
--card-hover: oklch(1 0 0 / 0.75); --card-hover: oklch(1 0 0 / 0.75);
/* Popover avec backdrop blur très fort */ /* 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.1 0.015 280); --popover-foreground: oklch(0.1 0.015 280);
/* Primary: Bleu/violet fintech très vibrant avec gradient */ /* Primary: Bleu/violet fintech très vibrant avec gradient */
--primary: oklch(0.6 0.25 270); --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-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); --primary-light: oklch(0.7 0.2 270);
/* Secondary avec teinte subtile */ /* Secondary avec teinte subtile */
--secondary: oklch(0.97 0.008 280); --secondary: oklch(0.97 0.008 280);
--secondary-foreground: oklch(0.25 0.015 280); --secondary-foreground: oklch(0.25 0.015 280);
/* Muted plus doux */ /* Muted plus doux */
--muted: oklch(0.96 0.006 280); --muted: oklch(0.96 0.006 280);
--muted-foreground: oklch(0.5 0.012 280); --muted-foreground: oklch(0.5 0.012 280);
/* Accent avec couleur très vibrante */ /* Accent avec couleur très vibrante */
--accent: oklch(0.95 0.015 260); --accent: oklch(0.95 0.015 260);
--accent-foreground: oklch(0.6 0.25 270); --accent-foreground: oklch(0.6 0.25 270);
/* Destructive moderne */ /* Destructive moderne */
--destructive: oklch(0.6 0.26 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.9 0.008 280 / 0.4); --border: oklch(0.9 0.008 280 / 0.4);
--input: oklch(0.97 0.006 280); --input: oklch(0.97 0.006 280);
--ring: oklch(0.6 0.25 270 / 0.5); --ring: oklch(0.6 0.25 270 / 0.5);
/* Chart colors très vibrantes */ /* Chart colors très vibrantes */
--chart-1: oklch(0.65 0.25 270); --chart-1: oklch(0.65 0.25 270);
--chart-2: oklch(0.7 0.22 180); --chart-2: oklch(0.7 0.22 180);
--chart-3: oklch(0.75 0.2 120); --chart-3: oklch(0.75 0.2 120);
--chart-4: oklch(0.7 0.25 320); --chart-4: oklch(0.7 0.25 320);
--chart-5: oklch(0.65 0.22 40); --chart-5: oklch(0.65 0.22 40);
/* Success et Warning pour fintech */ /* Success et Warning pour fintech */
--success: oklch(0.68 0.2 150); --success: oklch(0.68 0.2 150);
--success-foreground: oklch(0.99 0 0); --success-foreground: oklch(0.99 0 0);
--warning: oklch(0.78 0.2 80); --warning: oklch(0.78 0.2 80);
--warning-foreground: oklch(0.1 0.015 280); --warning-foreground: oklch(0.1 0.015 280);
--radius: 1.25rem; --radius: 1.25rem;
/* Sidebar moderne avec glassmorphism très prononcé */ /* Sidebar moderne avec glassmorphism très prononcé */
--sidebar: oklch(1 0 0 / 0.5); --sidebar: oklch(1 0 0 / 0.5);
--sidebar-foreground: oklch(0.2 0.015 280); --sidebar-foreground: oklch(0.2 0.015 280);
@@ -74,56 +79,61 @@
/* Background sombre fintech avec dégradé vibrant */ /* Background sombre fintech avec dégradé vibrant */
--background: oklch(0.1 0.015 280); --background: oklch(0.1 0.015 280);
--foreground: oklch(0.97 0.005 280); --foreground: oklch(0.97 0.005 280);
/* Cards avec effet glassmorphism sombre très prononcé */ /* Cards avec effet glassmorphism sombre très prononcé */
--card: oklch(0.15 0.015 280 / 0.6); --card: oklch(0.15 0.015 280 / 0.6);
--card-foreground: oklch(0.97 0.005 280); --card-foreground: oklch(0.97 0.005 280);
--card-hover: oklch(0.18 0.015 280 / 0.75); --card-hover: oklch(0.18 0.015 280 / 0.75);
/* Popover avec backdrop blur très fort */ /* Popover avec backdrop blur très fort */
--popover: oklch(0.15 0.015 280 / 0.95); --popover: oklch(0.15 0.015 280 / 0.95);
--popover-foreground: oklch(0.97 0.005 280); --popover-foreground: oklch(0.97 0.005 280);
/* Primary: Bleu/violet très brillant pour dark mode */ /* Primary: Bleu/violet très brillant pour dark mode */
--primary: oklch(0.72 0.28 270); --primary: oklch(0.72 0.28 270);
--primary-foreground: oklch(0.1 0.015 280); --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-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); --primary-light: oklch(0.78 0.23 270);
/* Secondary avec plus de contraste */ /* Secondary avec plus de contraste */
--secondary: oklch(0.22 0.015 280); --secondary: oklch(0.22 0.015 280);
--secondary-foreground: oklch(0.95 0.005 280); --secondary-foreground: oklch(0.95 0.005 280);
/* Muted plus visible */ /* Muted plus visible */
--muted: oklch(0.22 0.015 280); --muted: oklch(0.22 0.015 280);
--muted-foreground: oklch(0.7 0.012 280); --muted-foreground: oklch(0.7 0.012 280);
/* Accent très vibrant */ /* Accent très vibrant */
--accent: oklch(0.26 0.02 260); --accent: oklch(0.26 0.02 260);
--accent-foreground: oklch(0.72 0.28 270); --accent-foreground: oklch(0.72 0.28 270);
/* Destructive moderne */ /* Destructive moderne */
--destructive: oklch(0.68 0.27 25); --destructive: oklch(0.68 0.27 25);
--destructive-foreground: oklch(0.97 0 0); --destructive-foreground: oklch(0.97 0 0);
/* Bordures subtiles */ /* Bordures subtiles */
--border: oklch(0.25 0.015 280 / 0.4); --border: oklch(0.25 0.015 280 / 0.4);
--input: oklch(0.22 0.015 280); --input: oklch(0.22 0.015 280);
--ring: oklch(0.72 0.28 270 / 0.6); --ring: oklch(0.72 0.28 270 / 0.6);
/* Chart colors très vibrantes pour dark */ /* Chart colors très vibrantes pour dark */
--chart-1: oklch(0.75 0.27 270); --chart-1: oklch(0.75 0.27 270);
--chart-2: oklch(0.8 0.25 180); --chart-2: oklch(0.8 0.25 180);
--chart-3: oklch(0.85 0.23 120); --chart-3: oklch(0.85 0.23 120);
--chart-4: oklch(0.8 0.27 320); --chart-4: oklch(0.8 0.27 320);
--chart-5: oklch(0.75 0.25 40); --chart-5: oklch(0.75 0.25 40);
/* Success et Warning pour fintech dark */ /* Success et Warning pour fintech dark */
--success: oklch(0.73 0.22 150); --success: oklch(0.73 0.22 150);
--success-foreground: oklch(0.1 0.015 280); --success-foreground: oklch(0.1 0.015 280);
--warning: oklch(0.8 0.22 80); --warning: oklch(0.8 0.22 80);
--warning-foreground: oklch(0.1 0.015 280); --warning-foreground: oklch(0.1 0.015 280);
/* Sidebar dark moderne avec glassmorphism très prononcé */ /* Sidebar dark moderne avec glassmorphism très prononcé */
--sidebar: oklch(0.12 0.015 280 / 0.5); --sidebar: oklch(0.12 0.015 280 / 0.5);
--sidebar-foreground: oklch(0.95 0.005 280); --sidebar-foreground: oklch(0.95 0.005 280);
@@ -182,21 +192,28 @@
} }
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; letter-spacing: -0.01em;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
letter-spacing: -0.02em; letter-spacing: -0.02em;
font-weight: 700; font-weight: 700;
} }
p { p {
letter-spacing: -0.005em; letter-spacing: -0.005em;
} }
/* Animations fintech modernes et fluides */ /* Animations fintech modernes et fluides */
@keyframes fade-in { @keyframes fade-in {
from { from {
@@ -208,7 +225,7 @@
transform: translateY(0); transform: translateY(0);
} }
} }
@keyframes slide-in { @keyframes slide-in {
from { from {
opacity: 0; opacity: 0;
@@ -219,7 +236,7 @@
transform: translateX(0); transform: translateX(0);
} }
} }
@keyframes scale-in { @keyframes scale-in {
from { from {
opacity: 0; opacity: 0;
@@ -230,7 +247,7 @@
transform: scale(1); transform: scale(1);
} }
} }
@keyframes shimmer { @keyframes shimmer {
0% { 0% {
background-position: -1000px 0; background-position: -1000px 0;
@@ -239,28 +256,31 @@
background-position: 1000px 0; background-position: 1000px 0;
} }
} }
@keyframes gradient-shift { @keyframes gradient-shift {
0%, 100% { 0%,
100% {
background-position: 0% 50%; background-position: 0% 50%;
} }
50% { 50% {
background-position: 100% 50%; background-position: 100% 50%;
} }
} }
/* Smooth scrolling */ /* Smooth scrolling */
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
/* Amélioration des transitions globales avec easing fintech */ /* Amélioration des transitions globales avec easing fintech */
* { * {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter; 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: 200ms; transition-duration: 200ms;
} }
/* Désactiver COMPLÈTEMENT toutes les animations pour les popovers et selects - APPROCHE AGRESSIVE */ /* Désactiver COMPLÈTEMENT toutes les animations pour les popovers et selects - APPROCHE AGRESSIVE */
[data-slot="popover-content"], [data-slot="popover-content"],
[data-slot="select-content"], [data-slot="select-content"],
@@ -277,7 +297,7 @@
opacity: 1 !important; opacity: 1 !important;
will-change: auto !important; will-change: auto !important;
} }
/* Désactiver TOUTES les classes Tailwind d'animation - sélecteurs ultra-spécifiques */ /* Désactiver TOUTES les classes Tailwind d'animation - sélecteurs ultra-spécifiques */
[data-slot="popover-content"].animate-in, [data-slot="popover-content"].animate-in,
[data-slot="select-content"].animate-in, [data-slot="select-content"].animate-in,
@@ -303,7 +323,7 @@
opacity: 1 !important; opacity: 1 !important;
will-change: auto !important; will-change: auto !important;
} }
/* Override pour tous les états data-state */ /* Override pour tous les états data-state */
[data-slot="popover-content"][data-state="open"], [data-slot="popover-content"][data-state="open"],
[data-slot="popover-content"][data-state="closed"], [data-slot="popover-content"][data-state="closed"],
@@ -316,18 +336,18 @@
/* Ne pas toucher au transform car il est utilisé pour le positionnement */ /* Ne pas toucher au transform car il est utilisé pour le positionnement */
opacity: 1 !important; opacity: 1 !important;
} }
/* Glassmorphism effect très prononcé */ /* Glassmorphism effect très prononcé */
.glass { .glass {
background: var(--card); background: var(--card);
backdrop-filter: blur(40px) saturate(200%); backdrop-filter: blur(40px) saturate(200%);
-webkit-backdrop-filter: blur(40px) saturate(200%); -webkit-backdrop-filter: blur(40px) saturate(200%);
border: 1px solid var(--border); border: 1px solid var(--border);
box-shadow: box-shadow:
0 8px 32px -8px color-mix(in srgb, var(--primary) 10%, transparent), 0 8px 32px -8px color-mix(in srgb, var(--primary) 10%, transparent),
inset 0 1px 0 0 color-mix(in srgb, white 20%, transparent); inset 0 1px 0 0 color-mix(in srgb, white 20%, transparent);
} }
/* Gradient text effect */ /* Gradient text effect */
.gradient-text { .gradient-text {
background: var(--primary-gradient); background: var(--primary-gradient);
@@ -336,53 +356,57 @@
background-clip: text; background-clip: text;
font-weight: 700; font-weight: 700;
} }
/* Card hover effect avec élévation */ /* Card hover effect avec élévation */
.card-hover { .card-hover {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative; position: relative;
} }
.card-hover::before { .card-hover::before {
content: ""; content: "";
position: absolute; position: absolute;
inset: 0; inset: 0;
border-radius: inherit; border-radius: inherit;
padding: 1px; padding: 1px;
background: linear-gradient(135deg, background: linear-gradient(
135deg,
color-mix(in srgb, var(--primary) 30%, transparent) 0%, color-mix(in srgb, var(--primary) 30%, transparent) 0%,
color-mix(in srgb, var(--chart-2) 20%, transparent) 100% 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:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor; -webkit-mask-composite: xor;
mask-composite: exclude; mask-composite: exclude;
opacity: 0; opacity: 0;
transition: opacity 0.4s ease; transition: opacity 0.4s ease;
} }
.card-hover:hover { .card-hover:hover {
transform: translateY(-4px) scale(1.01); transform: translateY(-4px) scale(1.01);
box-shadow: box-shadow:
0 20px 40px -12px color-mix(in srgb, var(--primary) 20%, transparent), 0 20px 40px -12px color-mix(in srgb, var(--primary) 20%, transparent),
0 8px 16px -8px color-mix(in srgb, var(--foreground) 10%, 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); inset 0 1px 0 0 color-mix(in srgb, white 30%, transparent);
} }
.card-hover:hover::before { .card-hover:hover::before {
opacity: 1; opacity: 1;
} }
/* Background fintech moderne avec dégradés animés et formes abstraites */ /* Background fintech moderne avec dégradés animés et formes abstraites */
.page-background { .page-background {
position: relative; position: relative;
background: linear-gradient(135deg, background: linear-gradient(
135deg,
oklch(0.98 0.01 280) 0%, oklch(0.98 0.01 280) 0%,
oklch(0.97 0.012 270) 50%, oklch(0.97 0.012 270) 50%,
oklch(0.98 0.01 290) 100% oklch(0.98 0.01 290) 100%
); );
overflow: hidden; overflow: hidden;
} }
.page-background::before { .page-background::before {
content: ""; content: "";
position: fixed; position: fixed;
@@ -393,23 +417,28 @@
z-index: 0; z-index: 0;
background: background:
/* Formes abstraites circulaires */ /* Formes abstraites circulaires */
radial-gradient(circle 800px at 10% 20%, radial-gradient(
circle 800px at 10% 20%,
color-mix(in srgb, var(--primary) 15%, transparent) 0%, color-mix(in srgb, var(--primary) 15%, transparent) 0%,
transparent 50% transparent 50%
), ),
radial-gradient(circle 600px at 90% 80%, radial-gradient(
circle 600px at 90% 80%,
color-mix(in srgb, var(--chart-2) 12%, transparent) 0%, color-mix(in srgb, var(--chart-2) 12%, transparent) 0%,
transparent 50% transparent 50%
), ),
radial-gradient(circle 500px at 50% 50%, radial-gradient(
circle 500px at 50% 50%,
color-mix(in srgb, var(--chart-3) 10%, transparent) 0%, color-mix(in srgb, var(--chart-3) 10%, transparent) 0%,
transparent 60% transparent 60%
), ),
radial-gradient(circle 400px at 20% 70%, radial-gradient(
circle 400px at 20% 70%,
color-mix(in srgb, var(--chart-4) 8%, transparent) 0%, color-mix(in srgb, var(--chart-4) 8%, transparent) 0%,
transparent 65% transparent 65%
), ),
radial-gradient(circle 300px at 80% 30%, radial-gradient(
circle 300px at 80% 30%,
color-mix(in srgb, var(--primary-light) 6%, transparent) 0%, color-mix(in srgb, var(--primary-light) 6%, transparent) 0%,
transparent 70% transparent 70%
); );
@@ -419,45 +448,51 @@
transition: opacity 0.5s ease; transition: opacity 0.5s ease;
animation: gradient-shift 25s ease infinite; animation: gradient-shift 25s ease infinite;
} }
.dark .page-background { .dark .page-background {
background: linear-gradient(135deg, background: linear-gradient(
135deg,
oklch(0.1 0.015 280) 0%, oklch(0.1 0.015 280) 0%,
oklch(0.11 0.018 270) 50%, oklch(0.11 0.018 270) 50%,
oklch(0.1 0.015 290) 100% oklch(0.1 0.015 290) 100%
); );
} }
.dark .page-background::before { .dark .page-background::before {
background: background:
radial-gradient(circle 800px at 10% 20%, radial-gradient(
circle 800px at 10% 20%,
color-mix(in srgb, var(--primary) 22%, transparent) 0%, color-mix(in srgb, var(--primary) 22%, transparent) 0%,
transparent 50% transparent 50%
), ),
radial-gradient(circle 600px at 90% 80%, radial-gradient(
circle 600px at 90% 80%,
color-mix(in srgb, var(--chart-2) 18%, transparent) 0%, color-mix(in srgb, var(--chart-2) 18%, transparent) 0%,
transparent 50% transparent 50%
), ),
radial-gradient(circle 500px at 50% 50%, radial-gradient(
circle 500px at 50% 50%,
color-mix(in srgb, var(--chart-3) 15%, transparent) 0%, color-mix(in srgb, var(--chart-3) 15%, transparent) 0%,
transparent 60% transparent 60%
), ),
radial-gradient(circle 400px at 20% 70%, radial-gradient(
circle 400px at 20% 70%,
color-mix(in srgb, var(--chart-4) 12%, transparent) 0%, color-mix(in srgb, var(--chart-4) 12%, transparent) 0%,
transparent 65% transparent 65%
), ),
radial-gradient(circle 300px at 80% 30%, radial-gradient(
circle 300px at 80% 30%,
color-mix(in srgb, var(--primary-light) 10%, transparent) 0%, color-mix(in srgb, var(--primary-light) 10%, transparent) 0%,
transparent 70% transparent 70%
); );
opacity: 1; opacity: 1;
} }
.page-content { .page-content {
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
/* Fintech card styles avec glassmorphism très prononcé */ /* Fintech card styles avec glassmorphism très prononcé */
.fintech-card { .fintech-card {
background: var(--card); background: var(--card);
@@ -465,7 +500,7 @@
-webkit-backdrop-filter: blur(50px) saturate(200%); -webkit-backdrop-filter: blur(50px) saturate(200%);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--radius); border-radius: var(--radius);
box-shadow: box-shadow:
0 8px 32px -8px color-mix(in srgb, var(--primary) 8%, transparent), 0 8px 32px -8px color-mix(in srgb, var(--primary) 8%, transparent),
0 2px 8px -2px color-mix(in srgb, var(--foreground) 3%, 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); inset 0 1px 0 0 color-mix(in srgb, white 25%, transparent);
@@ -473,7 +508,7 @@
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.fintech-card::after { .fintech-card::after {
content: ""; content: "";
position: absolute; position: absolute;
@@ -481,26 +516,28 @@
left: 0; left: 0;
right: 0; right: 0;
height: 1px; height: 1px;
background: linear-gradient(90deg, background: linear-gradient(
90deg,
transparent 0%, transparent 0%,
color-mix(in srgb, white 40%, transparent) 50%, color-mix(in srgb, white 40%, transparent) 50%,
transparent 100% transparent 100%
); );
opacity: 0.5; opacity: 0.5;
} }
.fintech-card:hover { .fintech-card:hover {
transform: translateY(-6px) scale(1.01); transform: translateY(-6px) scale(1.01);
box-shadow: box-shadow:
0 24px 48px -12px color-mix(in srgb, var(--primary) 25%, transparent), 0 24px 48px -12px color-mix(in srgb, var(--primary) 25%, transparent),
0 8px 24px -8px color-mix(in srgb, var(--foreground) 8%, 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); inset 0 1px 0 0 color-mix(in srgb, white 40%, transparent);
border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
} }
/* Gradient backgrounds for stat cards très vibrants */ /* Gradient backgrounds for stat cards très vibrants */
.stat-card-gradient-1 { .stat-card-gradient-1 {
background: linear-gradient(135deg, background: linear-gradient(
135deg,
color-mix(in srgb, var(--primary) 12%, var(--card)) 0%, 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-light) 8%, var(--card)) 50%,
color-mix(in srgb, var(--primary) 6%, var(--card)) 100% color-mix(in srgb, var(--primary) 6%, var(--card)) 100%
@@ -508,7 +545,7 @@
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.stat-card-gradient-1::before { .stat-card-gradient-1::before {
content: ""; content: "";
position: absolute; position: absolute;
@@ -516,16 +553,18 @@
right: -50%; right: -50%;
width: 200%; width: 200%;
height: 200%; height: 200%;
background: radial-gradient(circle, background: radial-gradient(
circle,
color-mix(in srgb, var(--primary) 20%, transparent) 0%, color-mix(in srgb, var(--primary) 20%, transparent) 0%,
transparent 70% transparent 70%
); );
opacity: 0.3; opacity: 0.3;
animation: gradient-shift 8s ease infinite; animation: gradient-shift 8s ease infinite;
} }
.stat-card-gradient-2 { .stat-card-gradient-2 {
background: linear-gradient(135deg, background: linear-gradient(
135deg,
color-mix(in srgb, var(--success) 12%, var(--card)) 0%, 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) 8%, var(--card)) 50%,
color-mix(in srgb, var(--success) 6%, var(--card)) 100% color-mix(in srgb, var(--success) 6%, var(--card)) 100%
@@ -533,7 +572,7 @@
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.stat-card-gradient-2::before { .stat-card-gradient-2::before {
content: ""; content: "";
position: absolute; position: absolute;
@@ -541,16 +580,18 @@
right: -50%; right: -50%;
width: 200%; width: 200%;
height: 200%; height: 200%;
background: radial-gradient(circle, background: radial-gradient(
circle,
color-mix(in srgb, var(--success) 20%, transparent) 0%, color-mix(in srgb, var(--success) 20%, transparent) 0%,
transparent 70% transparent 70%
); );
opacity: 0.3; opacity: 0.3;
animation: gradient-shift 8s ease infinite; animation: gradient-shift 8s ease infinite;
} }
.stat-card-gradient-3 { .stat-card-gradient-3 {
background: linear-gradient(135deg, background: linear-gradient(
135deg,
color-mix(in srgb, var(--destructive) 12%, var(--card)) 0%, 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) 8%, var(--card)) 50%,
color-mix(in srgb, var(--destructive) 6%, var(--card)) 100% color-mix(in srgb, var(--destructive) 6%, var(--card)) 100%
@@ -558,7 +599,7 @@
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.stat-card-gradient-3::before { .stat-card-gradient-3::before {
content: ""; content: "";
position: absolute; position: absolute;
@@ -566,16 +607,18 @@
right: -50%; right: -50%;
width: 200%; width: 200%;
height: 200%; height: 200%;
background: radial-gradient(circle, background: radial-gradient(
circle,
color-mix(in srgb, var(--destructive) 20%, transparent) 0%, color-mix(in srgb, var(--destructive) 20%, transparent) 0%,
transparent 70% transparent 70%
); );
opacity: 0.3; opacity: 0.3;
animation: gradient-shift 8s ease infinite; animation: gradient-shift 8s ease infinite;
} }
.stat-card-gradient-4 { .stat-card-gradient-4 {
background: linear-gradient(135deg, background: linear-gradient(
135deg,
color-mix(in srgb, var(--chart-4) 12%, var(--card)) 0%, 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) 8%, var(--card)) 50%,
color-mix(in srgb, var(--chart-4) 6%, var(--card)) 100% color-mix(in srgb, var(--chart-4) 6%, var(--card)) 100%
@@ -583,7 +626,7 @@
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.stat-card-gradient-4::before { .stat-card-gradient-4::before {
content: ""; content: "";
position: absolute; position: absolute;
@@ -591,7 +634,8 @@
right: -50%; right: -50%;
width: 200%; width: 200%;
height: 200%; height: 200%;
background: radial-gradient(circle, background: radial-gradient(
circle,
color-mix(in srgb, var(--chart-4) 20%, transparent) 0%, color-mix(in srgb, var(--chart-4) 20%, transparent) 0%,
transparent 70% transparent 70%
); );

4
app/page.tsx
View File

@@ -27,11 +27,11 @@ export default function DashboardPage() {
} }
const filteredAccounts = data.accounts.filter((a) => const filteredAccounts = data.accounts.filter((a) =>
selectedAccounts.includes(a.id) selectedAccounts.includes(a.id),
); );
const filteredAccountIds = new Set(filteredAccounts.map((a) => a.id)); const filteredAccountIds = new Set(filteredAccounts.map((a) => a.id));
const filteredTransactions = data.transactions.filter((t) => const filteredTransactions = data.transactions.filter((t) =>
filteredAccountIds.has(t.accountId) filteredAccountIds.has(t.accountId),
); );
return { return {

34
app/statistics/page.tsx
View File

@@ -62,10 +62,10 @@ export default function StatisticsPage() {
const [excludeInternalTransfers, setExcludeInternalTransfers] = const [excludeInternalTransfers, setExcludeInternalTransfers] =
useState(true); useState(true);
const [customStartDate, setCustomStartDate] = useState<Date | undefined>( const [customStartDate, setCustomStartDate] = useState<Date | undefined>(
undefined undefined,
); );
const [customEndDate, setCustomEndDate] = useState<Date | undefined>( const [customEndDate, setCustomEndDate] = useState<Date | undefined>(
undefined undefined,
); );
const [isCustomDatePickerOpen, setIsCustomDatePickerOpen] = useState(false); const [isCustomDatePickerOpen, setIsCustomDatePickerOpen] = useState(false);
@@ -100,7 +100,7 @@ export default function StatisticsPage() {
const internalTransferCategory = useMemo(() => { const internalTransferCategory = useMemo(() => {
if (!data) return null; if (!data) return null;
return data.categories.find( return data.categories.find(
(c) => c.name.toLowerCase() === "virement interne" (c) => c.name.toLowerCase() === "virement interne",
); );
}, [data]); }, [data]);
@@ -216,7 +216,7 @@ export default function StatisticsPage() {
// Filter by accounts // Filter by accounts
if (!selectedAccounts.includes("all")) { if (!selectedAccounts.includes("all")) {
transactions = transactions.filter((t) => transactions = transactions.filter((t) =>
selectedAccounts.includes(t.accountId) selectedAccounts.includes(t.accountId),
); );
} }
@@ -226,7 +226,7 @@ export default function StatisticsPage() {
transactions = transactions.filter((t) => !t.categoryId); transactions = transactions.filter((t) => !t.categoryId);
} else { } else {
transactions = transactions.filter( transactions = transactions.filter(
(t) => t.categoryId && selectedCategories.includes(t.categoryId) (t) => t.categoryId && selectedCategories.includes(t.categoryId),
); );
} }
} }
@@ -234,7 +234,7 @@ export default function StatisticsPage() {
// Exclude "Virement interne" category if checkbox is checked // Exclude "Virement interne" category if checkbox is checked
if (excludeInternalTransfers && internalTransferCategory) { if (excludeInternalTransfers && internalTransferCategory) {
transactions = transactions.filter( transactions = transactions.filter(
(t) => t.categoryId !== internalTransferCategory.id (t) => t.categoryId !== internalTransferCategory.id,
); );
} }
@@ -306,7 +306,7 @@ export default function StatisticsPage() {
}); });
const categoryChartDataByParent = Array.from( const categoryChartDataByParent = Array.from(
categoryTotalsByParent.entries() categoryTotalsByParent.entries(),
) )
.map(([groupId, total]) => { .map(([groupId, total]) => {
const category = data.categories.find((c) => c.id === groupId); const category = data.categories.find((c) => c.id === groupId);
@@ -321,7 +321,7 @@ export default function StatisticsPage() {
// Top expenses - deduplicate by ID and sort by amount (most negative first) // Top expenses - deduplicate by ID and sort by amount (most negative first)
const uniqueTransactions = Array.from( const uniqueTransactions = Array.from(
new Map(transactions.map((t) => [t.id, t])).values() new Map(transactions.map((t) => [t.id, t])).values(),
); );
const topExpenses = uniqueTransactions const topExpenses = uniqueTransactions
.filter((t) => t.amount < 0) .filter((t) => t.amount < 0)
@@ -347,7 +347,7 @@ export default function StatisticsPage() {
// Balance evolution - Aggregated (using filtered transactions) // Balance evolution - Aggregated (using filtered transactions)
const sortedFilteredTransactions = [...transactions].sort( const sortedFilteredTransactions = [...transactions].sort(
(a, b) => new Date(a.date).getTime() - new Date(b.date).getTime() (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime(),
); );
// Calculate starting balance: initialBalance + transactions before startDate // Calculate starting balance: initialBalance + transactions before startDate
@@ -359,7 +359,7 @@ export default function StatisticsPage() {
// Start with initial balances // Start with initial balances
runningBalance = accountsToUse.reduce( runningBalance = accountsToUse.reduce(
(sum, acc) => sum + (acc.initialBalance || 0), (sum, acc) => sum + (acc.initialBalance || 0),
0 0,
); );
// Add all transactions before the start date for these accounts // Add all transactions before the start date for these accounts
@@ -396,7 +396,7 @@ export default function StatisticsPage() {
}); });
const aggregatedBalanceData = Array.from( const aggregatedBalanceData = Array.from(
aggregatedBalanceByDate.entries() aggregatedBalanceByDate.entries(),
).map(([date, balance]) => ({ ).map(([date, balance]) => ({
date: new Date(date).toLocaleDateString("fr-FR", { date: new Date(date).toLocaleDateString("fr-FR", {
day: "2-digit", day: "2-digit",
@@ -853,7 +853,7 @@ export default function StatisticsPage() {
onRemoveAccount={(id) => { onRemoveAccount={(id) => {
const newAccounts = selectedAccounts.filter((a) => a !== id); const newAccounts = selectedAccounts.filter((a) => a !== id);
setSelectedAccounts( setSelectedAccounts(
newAccounts.length > 0 ? newAccounts : ["all"] newAccounts.length > 0 ? newAccounts : ["all"],
); );
}} }}
onClearAccounts={() => setSelectedAccounts(["all"])} onClearAccounts={() => setSelectedAccounts(["all"])}
@@ -861,7 +861,7 @@ export default function StatisticsPage() {
onRemoveCategory={(id) => { onRemoveCategory={(id) => {
const newCategories = selectedCategories.filter((c) => c !== id); const newCategories = selectedCategories.filter((c) => c !== id);
setSelectedCategories( setSelectedCategories(
newCategories.length > 0 ? newCategories : ["all"] newCategories.length > 0 ? newCategories : ["all"],
); );
}} }}
onClearCategories={() => setSelectedCategories(["all"])} onClearCategories={() => setSelectedCategories(["all"])}
@@ -1043,17 +1043,17 @@ export default function StatisticsPage() {
onRemoveAccount={(id) => { onRemoveAccount={(id) => {
const newAccounts = selectedAccounts.filter((a) => a !== id); const newAccounts = selectedAccounts.filter((a) => a !== id);
setSelectedAccounts( setSelectedAccounts(
newAccounts.length > 0 ? newAccounts : ["all"] newAccounts.length > 0 ? newAccounts : ["all"],
); );
}} }}
onClearAccounts={() => setSelectedAccounts(["all"])} onClearAccounts={() => setSelectedAccounts(["all"])}
selectedCategories={selectedCategories} selectedCategories={selectedCategories}
onRemoveCategory={(id) => { onRemoveCategory={(id) => {
const newCategories = selectedCategories.filter( const newCategories = selectedCategories.filter(
(c) => c !== id (c) => c !== id,
); );
setSelectedCategories( setSelectedCategories(
newCategories.length > 0 ? newCategories : ["all"] newCategories.length > 0 ? newCategories : ["all"],
); );
}} }}
onClearCategories={() => setSelectedCategories(["all"])} onClearCategories={() => setSelectedCategories(["all"])}
@@ -1203,7 +1203,7 @@ function ActiveFilters({
const selectedAccs = accounts.filter((a) => selectedAccounts.includes(a.id)); const selectedAccs = accounts.filter((a) => selectedAccounts.includes(a.id));
const selectedCats = categories.filter((c) => const selectedCats = categories.filter((c) =>
selectedCategories.includes(c.id) selectedCategories.includes(c.id),
); );
const isUncategorized = selectedCategories.includes("uncategorized"); const isUncategorized = selectedCategories.includes("uncategorized");

39
components/accounts/account-bulk-actions.tsx
View File

@@ -16,38 +16,31 @@ export function AccountBulkActions({
onDelete, onDelete,
}: AccountBulkActionsProps) { }: AccountBulkActionsProps) {
const isMobile = useIsMobile(); const isMobile = useIsMobile();
if (selectedCount === 0) return null; if (selectedCount === 0) return null;
return ( return (
<Card className="bg-destructive/5 border-destructive/20 sticky top-0 z-10 mb-4"> <Card className="bg-destructive/5 border-destructive/20 sticky top-0 z-10 mb-4">
<CardContent className={cn( <CardContent className={cn("py-3", isMobile && "px-3")}>
"py-3", <div
isMobile && "px-3" className={cn(
)}> "flex items-center gap-2 sm:gap-4",
<div className={cn( isMobile && "flex-col sm:flex-row",
"flex items-center gap-2 sm:gap-4", )}
isMobile && "flex-col sm:flex-row" >
)}> <span className={cn("font-medium", isMobile ? "text-xs" : "text-sm")}>
<span className={cn(
"font-medium",
isMobile ? "text-xs" : "text-sm"
)}>
{selectedCount} compte{selectedCount > 1 ? "s" : ""} sélectionné {selectedCount} compte{selectedCount > 1 ? "s" : ""} sélectionné
{selectedCount > 1 ? "s" : ""} {selectedCount > 1 ? "s" : ""}
</span> </span>
<Button <Button
size={isMobile ? "sm" : "sm"} size={isMobile ? "sm" : "sm"}
variant="destructive" variant="destructive"
onClick={onDelete} onClick={onDelete}
className={cn( className={cn(isMobile && "w-full sm:w-auto")}
isMobile && "w-full sm:w-auto"
)}
> >
<Trash2 className={cn( <Trash2
isMobile ? "w-3.5 h-3.5" : "w-4 h-4", className={cn(isMobile ? "w-3.5 h-3.5" : "w-4 h-4", "mr-1")}
"mr-1" />
)} />
Supprimer Supprimer
</Button> </Button>
</div> </div>

12
components/accounts/account-card.tsx
View File

@@ -82,7 +82,7 @@ export function AccountCard({
"relative group", "relative group",
isSelected && "ring-2 ring-primary shadow-lg shadow-primary/10", isSelected && "ring-2 ring-primary shadow-lg shadow-primary/10",
isDragging && "bg-muted/80 opacity-60", isDragging && "bg-muted/80 opacity-60",
"hover:scale-[1.02] transition-transform duration-200" "hover:scale-[1.02] transition-transform duration-200",
)} )}
> >
<CardHeader className={cn("pb-0", isMobile && "px-2 pt-2")}> <CardHeader className={cn("pb-0", isMobile && "px-2 pt-2")}>
@@ -111,7 +111,7 @@ export function AccountCard({
<div <div
className={cn( className={cn(
"rounded-full bg-primary/10 flex items-center justify-center shrink-0", "rounded-full bg-primary/10 flex items-center justify-center shrink-0",
isMobile ? "w-6 h-6" : "w-8 h-8" isMobile ? "w-6 h-6" : "w-8 h-8",
)} )}
> >
<Icon <Icon
@@ -122,7 +122,7 @@ export function AccountCard({
<CardTitle <CardTitle
className={cn( className={cn(
"font-semibold truncate leading-tight", "font-semibold truncate leading-tight",
isMobile ? "text-[11px]" : "text-sm" isMobile ? "text-[11px]" : "text-sm",
)} )}
> >
{account.name} {account.name}
@@ -184,7 +184,7 @@ export function AccountCard({
? "text-base" ? "text-base"
: "text-xl", : "text-xl",
!compact && !isMobile && "mb-1.5", !compact && !isMobile && "mb-1.5",
realBalance >= 0 ? "text-emerald-600" : "text-red-600" realBalance >= 0 ? "text-emerald-600" : "text-red-600",
)} )}
> >
{formatCurrency(realBalance)} {formatCurrency(realBalance)}
@@ -194,7 +194,7 @@ export function AccountCard({
href={`/transactions?accountId=${account.id}`} href={`/transactions?accountId=${account.id}`}
className={cn( className={cn(
"text-muted-foreground hover:text-primary hover:underline shrink-0 whitespace-nowrap", "text-muted-foreground hover:text-primary hover:underline shrink-0 whitespace-nowrap",
isMobile ? "text-[9px]" : "text-xs" isMobile ? "text-[9px]" : "text-xs",
)} )}
> >
{transactionCount} txns {transactionCount} txns
@@ -207,7 +207,7 @@ export function AccountCard({
className={cn( className={cn(
"flex items-center justify-between gap-2 mt-1", "flex items-center justify-between gap-2 mt-1",
isMobile ? "text-[10px]" : "text-xs", isMobile ? "text-[10px]" : "text-xs",
"text-muted-foreground" "text-muted-foreground",
)} )}
> >
<Link <Link

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

@@ -110,34 +110,39 @@ 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.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
<div className="flex items-center justify-between"> key={account.id}
<div className="flex items-center gap-3"> 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="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 className="flex items-center justify-between">
</div> <div className="flex items-center gap-3">
<div> <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">
<p className="font-semibold text-sm">{account.name}</p> <Building2 className="w-5 h-5 text-primary" />
<p className="text-xs text-muted-foreground/70 mt-0.5"> </div>
{account.accountNumber} <div>
</p> <p className="font-semibold text-sm">{account.name}</p>
</div> <p className="text-xs text-muted-foreground/70 mt-0.5">
</div> {account.accountNumber}
<span </p>
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>
{realBalance > 0 && (
<Progress value={percentage} className="h-2 rounded-full" />
)}
</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>
{realBalance > 0 && (
<Progress value={percentage} className="h-2 rounded-full" />
)}
</div>
);
})} })}
</div> </div>
)} )}
@@ -154,7 +159,9 @@ export function AccountsSummary({ data }: AccountsSummaryProps) {
return ( return (
<Card className="card-hover"> <Card className="card-hover">
<CardHeader className="pb-4"> <CardHeader className="pb-4">
<CardTitle className="text-base md:text-lg font-bold">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-12 text-center"> <div className="flex flex-col items-center justify-center py-12 text-center">
@@ -178,7 +185,9 @@ export function AccountsSummary({ data }: AccountsSummaryProps) {
return ( return (
<Card className="card-hover"> <Card className="card-hover">
<CardHeader className="pb-4"> <CardHeader className="pb-4">
<CardTitle className="text-base md:text-lg font-bold">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,7 +223,10 @@ export function AccountsSummary({ data }: AccountsSummaryProps) {
: 0; : 0;
return ( 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
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-3"> <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"> <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">
@@ -241,7 +253,10 @@ export function AccountsSummary({ data }: AccountsSummaryProps) {
</span> </span>
</div> </div>
{realBalance > 0 && ( {realBalance > 0 && (
<Progress value={percentage} className="h-2 rounded-full" /> <Progress
value={percentage}
className="h-2 rounded-full"
/>
)} )}
</div> </div>
); );

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

@@ -13,7 +13,7 @@ interface OverviewCardsProps {
export function OverviewCards({ data }: OverviewCardsProps) { export function OverviewCards({ data }: OverviewCardsProps) {
const totalBalance = data.accounts.reduce( const totalBalance = data.accounts.reduce(
(sum, acc) => sum + getAccountBalance(acc), (sum, acc) => sum + getAccountBalance(acc),
0 0,
); );
const thisMonth = new Date(); const thisMonth = new Date();
@@ -21,7 +21,7 @@ export function OverviewCards({ data }: OverviewCardsProps) {
const thisMonthStr = thisMonth.toISOString().slice(0, 7); const thisMonthStr = thisMonth.toISOString().slice(0, 7);
const monthTransactions = data.transactions.filter((t) => const monthTransactions = data.transactions.filter((t) =>
t.date.startsWith(thisMonthStr) t.date.startsWith(thisMonthStr),
); );
const income = monthTransactions const income = monthTransactions
@@ -62,7 +62,7 @@ export function OverviewCards({ data }: OverviewCardsProps) {
"text-2xl sm:text-3xl md:text-3xl lg:text-4xl xl:text-5xl font-black tracking-tight mb-4 leading-none", "text-2xl sm:text-3xl md:text-3xl lg:text-4xl xl:text-5xl font-black tracking-tight mb-4 leading-none",
totalBalance >= 0 totalBalance >= 0
? "text-emerald-600 dark:text-emerald-400" ? "text-emerald-600 dark:text-emerald-400"
: "text-red-600 dark:text-red-400" : "text-red-600 dark:text-red-400",
)} )}
> >
{formatCurrency(totalBalance)} {formatCurrency(totalBalance)}

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

@@ -43,11 +43,15 @@ export function RecentTransactions({ data }: RecentTransactionsProps) {
return ( return (
<Card className="card-hover"> <Card className="card-hover">
<CardHeader className="pb-4"> <CardHeader className="pb-4">
<CardTitle className="text-base md:text-lg font-bold">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-12 text-center"> <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-muted-foreground font-medium">
Aucune transaction
</p>
<p className="text-sm text-muted-foreground/70 mt-2"> <p className="text-sm text-muted-foreground/70 mt-2">
Importez un fichier OFX pour commencer Importez un fichier OFX pour commencer
</p> </p>

41
components/dashboard/sidebar.tsx
View File

@@ -69,7 +69,9 @@ function SidebarContent({
<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"> <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-bold text-lg text-foreground tracking-tight">FinTrack</span> <span className="font-bold text-lg text-foreground tracking-tight">
FinTrack
</span>
</div> </div>
)} )}
</div> </div>
@@ -85,19 +87,26 @@ function SidebarContent({
className={cn( className={cn(
"w-full justify-start gap-4 h-12 rounded-2xl transition-all duration-300", "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", "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", 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", collapsed && "justify-center px-2 w-12",
)} )}
> >
<item.icon className={cn( <item.icon
"w-5 h-5 shrink-0 transition-all duration-300", className={cn(
isActive && "text-primary scale-110" "w-5 h-5 shrink-0 transition-all duration-300",
)} /> isActive && "text-primary scale-110",
)}
/>
{!collapsed && ( {!collapsed && (
<span className={cn( <span
"font-semibold text-sm", className={cn(
isActive && "text-primary font-bold" "font-semibold text-sm",
)}>{item.label}</span> isActive && "text-primary font-bold",
)}
>
{item.label}
</span>
)} )}
</Button> </Button>
</Link> </Link>
@@ -115,7 +124,9 @@ function SidebarContent({
)} )}
> >
<Settings className="w-5 h-5 shrink-0" /> <Settings className="w-5 h-5 shrink-0" />
{!collapsed && <span className="font-semibold text-sm">Paramètres</span>} {!collapsed && (
<span className="font-semibold text-sm">Paramètres</span>
)}
</Button> </Button>
</Link> </Link>
<Button <Button
@@ -128,7 +139,9 @@ function SidebarContent({
)} )}
> >
<LogOut className="w-5 h-5 shrink-0" /> <LogOut className="w-5 h-5 shrink-0" />
{!collapsed && <span className="font-semibold text-sm">Déconnexion</span>} {!collapsed && (
<span className="font-semibold text-sm">Déconnexion</span>
)}
</Button> </Button>
</div> </div>
</> </>
@@ -173,7 +186,9 @@ export function Sidebar({ open, onOpenChange }: SidebarProps) {
<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"> <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" /> <Wallet className="w-6 h-6 text-primary-foreground" />
</div> </div>
<span className="font-black text-xl text-foreground tracking-tight">FinTrack</span> <span className="font-black text-xl text-foreground tracking-tight">
FinTrack
</span>
</div> </div>
)} )}
<Button <Button

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

@@ -60,11 +60,7 @@ export function PageHeader({
) : ( ) : (
<div className="flex items-center gap-3 flex-wrap"> <div className="flex items-center gap-3 flex-wrap">
{rightContent} {rightContent}
{actions && ( {actions && <div className="flex gap-3">{actions}</div>}
<div className="flex gap-3">
{actions}
</div>
)}
</div> </div>
)} )}
</> </>

4
components/transactions/transaction-filters.tsx
View File

@@ -256,7 +256,7 @@ export function TransactionFilters({
onRemoveCategory={(id) => { onRemoveCategory={(id) => {
const newCategories = selectedCategories.filter((c) => c !== id); const newCategories = selectedCategories.filter((c) => c !== id);
onCategoriesChange( onCategoriesChange(
newCategories.length > 0 ? newCategories : ["all"] newCategories.length > 0 ? newCategories : ["all"],
); );
}} }}
onClearCategories={() => onCategoriesChange(["all"])} onClearCategories={() => onCategoriesChange(["all"])}
@@ -367,7 +367,7 @@ function ActiveFilters({
const selectedAccs = accounts.filter((a) => selectedAccounts.includes(a.id)); const selectedAccs = accounts.filter((a) => selectedAccounts.includes(a.id));
const selectedCats = categories.filter((c) => const selectedCats = categories.filter((c) =>
selectedCategories.includes(c.id) selectedCategories.includes(c.id),
); );
const isUncategorized = selectedCategories.includes("uncategorized"); const isUncategorized = selectedCategories.includes("uncategorized");

27
components/ui/account-filter-combobox.tsx
View File

@@ -64,7 +64,7 @@ export function AccountFilterCombobox({
// Get root folders (folders without parent) - same as folders/page.tsx // Get root folders (folders without parent) - same as folders/page.tsx
const rootFolders = useMemo( const rootFolders = useMemo(
() => folders.filter((f) => f.parentId === null), () => folders.filter((f) => f.parentId === null),
[folders] [folders],
); );
// Get child folders for a given parent - same as FolderTreeItem // Get child folders for a given parent - same as FolderTreeItem
@@ -78,7 +78,7 @@ export function AccountFilterCombobox({
// Get accounts without folder // Get accounts without folder
const orphanAccounts = useMemo( const orphanAccounts = useMemo(
() => accounts.filter((a) => !a.folderId), () => accounts.filter((a) => !a.folderId),
[accounts] [accounts],
); );
const selectedAccounts = accounts.filter((a) => value.includes(a.id)); const selectedAccounts = accounts.filter((a) => value.includes(a.id));
@@ -89,7 +89,7 @@ export function AccountFilterCombobox({
const directAccounts = getFolderAccounts(folderId); const directAccounts = getFolderAccounts(folderId);
const childFoldersList = getChildFolders(folderId); const childFoldersList = getChildFolders(folderId);
const childAccounts = childFoldersList.flatMap((cf) => const childAccounts = childFoldersList.flatMap((cf) =>
getAllAccountsInFolder(cf.id) getAllAccountsInFolder(cf.id),
); );
return [...directAccounts, ...childAccounts]; return [...directAccounts, ...childAccounts];
}; };
@@ -126,7 +126,7 @@ export function AccountFilterCombobox({
if (allSelected) { if (allSelected) {
const newSelection = value.filter( const newSelection = value.filter(
(v) => !allFolderAccountIds.includes(v) (v) => !allFolderAccountIds.includes(v),
); );
onChange(newSelection.length > 0 ? newSelection : ["all"]); onChange(newSelection.length > 0 ? newSelection : ["all"]);
} else { } else {
@@ -153,7 +153,7 @@ export function AccountFilterCombobox({
const folderAccounts = getAllAccountsInFolder(folderId); const folderAccounts = getAllAccountsInFolder(folderId);
if (folderAccounts.length === 0) return false; if (folderAccounts.length === 0) return false;
const selectedCount = folderAccounts.filter((a) => const selectedCount = folderAccounts.filter((a) =>
value.includes(a.id) value.includes(a.id),
).length; ).length;
return selectedCount > 0 && selectedCount < folderAccounts.length; return selectedCount > 0 && selectedCount < folderAccounts.length;
}; };
@@ -185,7 +185,7 @@ export function AccountFilterCombobox({
<Check <Check
className={cn( className={cn(
"h-4 w-4", "h-4 w-4",
isFolderSelected(folder.id) ? "opacity-100" : "opacity-0" isFolderSelected(folder.id) ? "opacity-100" : "opacity-0",
)} )}
/> />
</div> </div>
@@ -213,7 +213,7 @@ export function AccountFilterCombobox({
<Check <Check
className={cn( className={cn(
"ml-auto h-4 w-4 shrink-0", "ml-auto h-4 w-4 shrink-0",
value.includes(account.id) ? "opacity-100" : "opacity-0" value.includes(account.id) ? "opacity-100" : "opacity-0",
)} )}
/> />
</CommandItem> </CommandItem>
@@ -222,7 +222,7 @@ export function AccountFilterCombobox({
{/* Child folders - recursive */} {/* Child folders - recursive */}
{childFoldersList.map((childFolder) => {childFoldersList.map((childFolder) =>
renderFolder(childFolder, depth + 1, currentPath) renderFolder(childFolder, depth + 1, currentPath),
)} )}
</div> </div>
); );
@@ -237,7 +237,7 @@ export function AccountFilterCombobox({
aria-expanded={open} aria-expanded={open}
className={cn( className={cn(
"justify-between min-w-0 h-10 w-full text-sm font-normal", "justify-between min-w-0 h-10 w-full text-sm font-normal",
className className,
)} )}
> >
<div className="flex items-center gap-2 min-w-0 flex-1"> <div className="flex items-center gap-2 min-w-0 flex-1">
@@ -304,7 +304,10 @@ export function AccountFilterCombobox({
<span className="text-xs text-muted-foreground ml-1"> <span className="text-xs text-muted-foreground ml-1">
( (
{formatCurrency( {formatCurrency(
filteredTransactions.reduce((sum, t) => sum + t.amount, 0) filteredTransactions.reduce(
(sum, t) => sum + t.amount,
0,
),
)} )}
) )
</span> </span>
@@ -312,7 +315,7 @@ export function AccountFilterCombobox({
<Check <Check
className={cn( className={cn(
"ml-auto h-4 w-4", "ml-auto h-4 w-4",
isAll ? "opacity-100" : "opacity-0" isAll ? "opacity-100" : "opacity-0",
)} )}
/> />
</CommandItem> </CommandItem>
@@ -348,7 +351,7 @@ export function AccountFilterCombobox({
"ml-auto h-4 w-4 shrink-0", "ml-auto h-4 w-4 shrink-0",
value.includes(account.id) value.includes(account.id)
? "opacity-100" ? "opacity-100"
: "opacity-0" : "opacity-0",
)} )}
/> />
</CommandItem> </CommandItem>

3
components/ui/button.tsx
View File

@@ -9,7 +9,8 @@ const buttonVariants = cva(
{ {
variants: { variants: {
variant: { variant: {
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", 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-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", "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:

6
components/ui/card.tsx
View File

@@ -10,7 +10,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
"fintech-card", "fintech-card",
"bg-card text-card-foreground flex flex-col", "bg-card text-card-foreground flex flex-col",
"transition-all duration-300 ease-out", "transition-all duration-300 ease-out",
className className,
)} )}
{...props} {...props}
/> />
@@ -23,7 +23,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
data-slot="card-header" data-slot="card-header"
className={cn( className={cn(
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 pt-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6", "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 pt-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
className className,
)} )}
{...props} {...props}
/> />
@@ -56,7 +56,7 @@ function CardAction({ className, ...props }: React.ComponentProps<"div">) {
data-slot="card-action" data-slot="card-action"
className={cn( className={cn(
"col-start-2 row-span-2 row-start-1 self-start justify-self-end", "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
className className,
)} )}
{...props} {...props}
/> />

34
components/ui/popover.tsx
View File

@@ -30,17 +30,21 @@ function PopoverContent({
if (!element) return; if (!element) return;
const disableAnimations = () => { const disableAnimations = () => {
element.style.setProperty('animation', 'none', 'important'); element.style.setProperty("animation", "none", "important");
element.style.setProperty('transition', 'none', 'important'); element.style.setProperty("transition", "none", "important");
// Ne pas toucher au transform car il est utilisé pour le positionnement // Ne pas toucher au transform car il est utilisé pour le positionnement
element.style.setProperty('opacity', '1', 'important'); element.style.setProperty("opacity", "1", "important");
element.style.setProperty('will-change', 'auto', 'important'); element.style.setProperty("will-change", "auto", "important");
// Supprimer toutes les classes d'animation Tailwind // Supprimer toutes les classes d'animation Tailwind
const classesToRemove = Array.from(element.classList).filter(cls => const classesToRemove = Array.from(element.classList).filter(
cls.includes('animate') || cls.includes('fade') || cls.includes('zoom') || cls.includes('slide') (cls) =>
cls.includes("animate") ||
cls.includes("fade") ||
cls.includes("zoom") ||
cls.includes("slide"),
); );
classesToRemove.forEach(cls => element.classList.remove(cls)); classesToRemove.forEach((cls) => element.classList.remove(cls));
}; };
// Désactiver immédiatement // Désactiver immédiatement
@@ -53,7 +57,7 @@ function PopoverContent({
observer.observe(element, { observer.observe(element, {
attributes: true, attributes: true,
attributeFilter: ['class', 'data-state'], attributeFilter: ["class", "data-state"],
subtree: false, subtree: false,
}); });
@@ -84,11 +88,13 @@ function PopoverContent({
"bg-popover text-popover-foreground z-50 w-72 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={{ style={
animation: 'none !important', {
transition: 'none !important', animation: "none !important",
opacity: '1 !important', transition: "none !important",
} as React.CSSProperties} opacity: "1 !important",
} as React.CSSProperties
}
{...props} {...props}
/> />
</PopoverPrimitive.Portal> </PopoverPrimitive.Portal>

34
components/ui/select.tsx
View File

@@ -63,17 +63,21 @@ function SelectContent({
if (!element) return; if (!element) return;
const disableAnimations = () => { const disableAnimations = () => {
element.style.setProperty('animation', 'none', 'important'); element.style.setProperty("animation", "none", "important");
element.style.setProperty('transition', 'none', 'important'); element.style.setProperty("transition", "none", "important");
// Ne pas toucher au transform car il est utilisé pour le positionnement // Ne pas toucher au transform car il est utilisé pour le positionnement
element.style.setProperty('opacity', '1', 'important'); element.style.setProperty("opacity", "1", "important");
element.style.setProperty('will-change', 'auto', 'important'); element.style.setProperty("will-change", "auto", "important");
// Supprimer toutes les classes d'animation Tailwind // Supprimer toutes les classes d'animation Tailwind
const classesToRemove = Array.from(element.classList).filter(cls => const classesToRemove = Array.from(element.classList).filter(
cls.includes('animate') || cls.includes('fade') || cls.includes('zoom') || cls.includes('slide') (cls) =>
cls.includes("animate") ||
cls.includes("fade") ||
cls.includes("zoom") ||
cls.includes("slide"),
); );
classesToRemove.forEach(cls => element.classList.remove(cls)); classesToRemove.forEach((cls) => element.classList.remove(cls));
}; };
// Désactiver immédiatement // Désactiver immédiatement
@@ -86,7 +90,7 @@ function SelectContent({
observer.observe(element, { observer.observe(element, {
attributes: true, attributes: true,
attributeFilter: ['class', 'data-state'], attributeFilter: ["class", "data-state"],
subtree: false, subtree: false,
}); });
@@ -116,11 +120,13 @@ function SelectContent({
className, className,
)} )}
position={position} position={position}
style={{ style={
animation: 'none !important', {
transition: 'none !important', animation: "none !important",
opacity: '1 !important', transition: "none !important",
} as React.CSSProperties} opacity: "1 !important",
} as React.CSSProperties
}
{...props} {...props}
> >
<SelectScrollUpButton /> <SelectScrollUpButton />