diff --git a/app/globals.css b/app/globals.css index 39322ea..ba1d83d 100644 --- a/app/globals.css +++ b/app/globals.css @@ -594,4 +594,30 @@ ); opacity: 0.3; } + + .stat-card-gradient-5 { + background: linear-gradient( + 135deg, + color-mix(in srgb, var(--chart-5) 12%, var(--card)) 0%, + color-mix(in srgb, var(--chart-5) 8%, var(--card)) 50%, + color-mix(in srgb, var(--chart-5) 6%, var(--card)) 100% + ); + position: relative; + overflow: hidden; + } + + .stat-card-gradient-5::before { + content: ""; + position: absolute; + top: -50%; + right: -50%; + width: 200%; + height: 200%; + background: radial-gradient( + circle, + color-mix(in srgb, var(--chart-5) 20%, transparent) 0%, + transparent 70% + ); + opacity: 0.3; + } } diff --git a/components/dashboard/overview-cards.tsx b/components/dashboard/overview-cards.tsx index 54c793b..b560537 100644 --- a/components/dashboard/overview-cards.tsx +++ b/components/dashboard/overview-cards.tsx @@ -1,7 +1,13 @@ "use client"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; -import { TrendingUp, TrendingDown, Wallet, CreditCard } from "lucide-react"; +import { + TrendingUp, + TrendingDown, + Wallet, + CreditCard, + Tag, +} from "lucide-react"; import type { BankingData } from "@/lib/types"; import { getAccountBalance } from "@/lib/account-utils"; import { cn } from "@/lib/utils"; @@ -37,6 +43,12 @@ export function OverviewCards({ data }: OverviewCardsProps) { const reconciledPercent = total > 0 ? Math.round((reconciled / total) * 100) : 0; + const categorized = data.transactions.filter( + (t) => t.categoryId !== null + ).length; + const categorizedPercent = + total > 0 ? Math.round((categorized / total) * 100) : 0; + const formatCurrency = (amount: number) => { return new Intl.NumberFormat("fr-FR", { style: "currency", @@ -45,7 +57,7 @@ export function OverviewCards({ data }: OverviewCardsProps) { }; return ( -
+ {categorized} / {total} opérations catégorisées +
+