feat: add new categorized statistics card to dashboard with gradient styling and percentage display

app/globals.css

@@ -273,13 +273,9 @@
     scroll-behavior: smooth;
   }
 
-  /* Amélioration des transitions globales avec easing fintech */
+  /* Transitions globales désactivées */
   * {
-    transition-property:
+    transition: none !important;
-      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: 200ms;
   }
 
   /* Désactiver COMPLÈTEMENT toutes les animations pour les popovers et selects - APPROCHE AGRESSIVE */
@@ -358,42 +354,13 @@
     font-weight: 700;
   }
 
-  /* Card hover effect avec élévation */
+  /* Card hover effect désactivé */
   .card-hover {
-    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
   }
 
   .card-hover::before {
-    content: "";
+    display: none;
-    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 */
@@ -446,8 +413,6 @@
     background-size: 200% 200%;
     pointer-events: none;
     opacity: 1;
-    transition: opacity 0.5s ease;
-    animation: gradient-shift 25s ease infinite;
   }
 
   .dark .page-background {
@@ -505,7 +470,6 @@
       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;
   }
@@ -526,15 +490,6 @@
     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(
@@ -560,7 +515,6 @@
       transparent 70%
     );
     opacity: 0.3;
-    animation: gradient-shift 8s ease infinite;
   }
 
   .stat-card-gradient-2 {
@@ -587,7 +541,6 @@
       transparent 70%
     );
     opacity: 0.3;
-    animation: gradient-shift 8s ease infinite;
   }
 
   .stat-card-gradient-3 {
@@ -614,7 +567,6 @@
       transparent 70%
     );
     opacity: 0.3;
-    animation: gradient-shift 8s ease infinite;
   }
 
   .stat-card-gradient-4 {
@@ -641,6 +593,31 @@
       transparent 70%
     );
     opacity: 0.3;
-    animation: gradient-shift 8s ease infinite;
+  }
+
+  .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;
   }
 }

app/statistics/page.tsx

@@ -281,6 +281,7 @@ export default function StatisticsPage() {
           value: Math.round(total),
           color: category?.color || "#94a3b8",
           icon: category?.icon || "HelpCircle",
+          categoryId: categoryId === "uncategorized" ? null : categoryId,
         };
       })
       .sort((a, b) => b.value - a.value);
@@ -315,6 +316,7 @@ export default function StatisticsPage() {
           value: Math.round(total),
           color: category?.color || "#94a3b8",
           icon: category?.icon || "HelpCircle",
+          categoryId: groupId === "uncategorized" ? null : groupId,
         };
       })
       .sort((a, b) => b.value - a.value);

app/transactions/page.tsx

@@ -112,6 +112,11 @@ export default function TransactionsPage() {
   const filteredTransactions = transactionsData?.transactions || [];
   const totalTransactions = transactionsData?.total || 0;
   const hasMore = transactionsData?.hasMore || false;
+  const uncategorizedCount = transactionsData?.uncategorizedCount || 0;
+  const uncategorizedPercent =
+    totalTransactions > 0
+      ? Math.round((uncategorizedCount / totalTransactions) * 100)
+      : 0;
 
   // For filter comboboxes, we'll use empty arrays for now
   // They can be enhanced later with separate queries if needed
@@ -133,7 +138,11 @@ export default function TransactionsPage() {
     <PageLayout>
       <PageHeader
         title="Transactions"
-        description={`${totalTransactions} transaction${totalTransactions > 1 ? "s" : ""}`}
+        description={
+          totalTransactions > 0
+            ? `${totalTransactions} transaction${totalTransactions > 1 ? "s" : ""} • ${uncategorizedPercent}% non catégorisées`
+            : `${totalTransactions} transaction${totalTransactions > 1 ? "s" : ""}`
+        }
         actions={
           <OFXImportDialog onImportComplete={invalidateAll}>
             <Button className="md:h-10 md:px-5">

components/accounts/account-card.tsx

@@ -82,7 +82,6 @@ export function AccountCard({
         "relative group",
         isSelected && "ring-2 ring-primary shadow-lg shadow-primary/10",
         isDragging && "bg-muted/80 opacity-60",
-        "hover:scale-[1.02] transition-transform duration-200",
       )}
     >
       <CardHeader className={cn("pb-0", isMobile && "px-2 pt-2")}>

components/categories/category-card.tsx

@@ -25,7 +25,7 @@ export function CategoryCard({
   const isMobile = useIsMobile();
 
   return (
-    <div className="flex items-center justify-between py-1.5 px-2 rounded hover:bg-muted/50 transition-colors group">
+    <div className="flex items-center justify-between py-1.5 px-2 rounded group">
       <div className="flex items-center gap-2 min-w-0 flex-1">
         <div
           className="w-4 h-4 md:w-5 md:h-5 rounded-full flex items-center justify-center shrink-0"
@@ -59,7 +59,7 @@ export function CategoryCard({
         )}
       </div>
 
-      <div className="flex items-center shrink-0 opacity-0 group-hover:opacity-100 md:opacity-100 transition-opacity">
+      <div className="flex items-center shrink-0 opacity-0 group-hover:opacity-100 md:opacity-100">
         <Button
           variant="ghost"
           size="icon"

components/categories/parent-category-row.tsx

@@ -57,7 +57,7 @@ export function ParentCategoryRow({
       <Collapsible open={isExpanded} onOpenChange={onToggleExpanded}>
         <div className="flex items-center justify-between px-2 md:px-3 py-1.5 md:py-2">
           <CollapsibleTrigger asChild>
-            <button className="flex items-center gap-1.5 md:gap-2 hover:opacity-80 transition-opacity flex-1 min-w-0">
+            <button className="flex items-center gap-1.5 md:gap-2 hover:opacity-80 flex-1 min-w-0">
               {isExpanded ? (
                 <ChevronDown className="w-3 h-3 md:w-4 md:h-4 text-muted-foreground shrink-0" />
               ) : (

components/dashboard/accounts-summary.tsx

@@ -113,11 +113,11 @@ export function AccountsSummary({ data }: AccountsSummaryProps) {
               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"
+                  className="space-y-2.5 p-3 rounded-xl bg-muted/30 border border-border/50 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">
+                      <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-primary/20 to-primary/10 flex items-center justify-center">
                         <Building2 className="w-5 h-5 text-primary" />
                       </div>
                       <div>
@@ -225,11 +225,11 @@ export function AccountsSummary({ data }: AccountsSummaryProps) {
                   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"
+                      className="space-y-2.5 p-3 rounded-xl bg-muted/30 border border-border/50 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">
+                          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-primary/20 to-primary/10 flex items-center justify-center">
                             <Building2 className="w-5 h-5 text-primary" />
                           </div>
                           <div>

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";
@@ -13,7 +19,7 @@ interface OverviewCardsProps {
 export function OverviewCards({ data }: OverviewCardsProps) {
   const totalBalance = data.accounts.reduce(
     (sum, acc) => sum + getAccountBalance(acc),
-    0,
+    0
   );
 
   const thisMonth = new Date();
@@ -21,7 +27,7 @@ export function OverviewCards({ data }: OverviewCardsProps) {
   const thisMonthStr = thisMonth.toISOString().slice(0, 7);
 
   const monthTransactions = data.transactions.filter((t) =>
-    t.date.startsWith(thisMonthStr),
+    t.date.startsWith(thisMonthStr)
   );
 
   const income = monthTransactions
@@ -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,14 +57,13 @@ export function OverviewCards({ data }: OverviewCardsProps) {
   };
 
   return (
-    <div className="grid gap-4 sm:gap-6 grid-cols-2 lg:grid-cols-4">
+    <div className="grid gap-4 sm:gap-6 grid-cols-2 lg:grid-cols-5">
       <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 lg:px-5 lg:pt-5 relative z-10">
           <CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest">
             Solde Total
           </CardTitle>
-          <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">
+          <div className="rounded-2xl bg-gradient-to-br from-primary/30 via-primary/20 to-primary/10 p-3 shrink-0 shadow-lg shadow-primary/20">
             <Wallet className="h-5 w-5 text-primary" />
           </div>
         </CardHeader>
@@ -62,7 +73,7 @@ export function OverviewCards({ data }: OverviewCardsProps) {
               "text-2xl sm:text-3xl md:text-3xl lg:text-xl xl:text-xl font-black tracking-tight mb-4 leading-none break-words",
               totalBalance >= 0
                 ? "text-emerald-600 dark:text-emerald-400"
-                : "text-red-600 dark:text-red-400",
+                : "text-red-600 dark:text-red-400"
             )}
           >
             {formatCurrency(totalBalance)}
@@ -74,12 +85,11 @@ export function OverviewCards({ data }: OverviewCardsProps) {
       </Card>
 
       <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 lg:px-5 lg:pt-5 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-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">
+          <div className="rounded-2xl bg-gradient-to-br from-success/30 via-success/20 to-success/10 p-3 shrink-0 shadow-lg shadow-success/20">
             <TrendingUp className="h-5 w-5 text-success" />
           </div>
         </CardHeader>
@@ -97,12 +107,11 @@ export function OverviewCards({ data }: OverviewCardsProps) {
       </Card>
 
       <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 lg:px-5 lg:pt-5 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-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">
+          <div className="rounded-2xl bg-gradient-to-br from-destructive/30 via-destructive/20 to-destructive/10 p-3 shrink-0 shadow-lg shadow-destructive/20">
             <TrendingDown className="h-5 w-5 text-destructive" />
           </div>
         </CardHeader>
@@ -120,12 +129,11 @@ export function OverviewCards({ data }: OverviewCardsProps) {
       </Card>
 
       <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 lg:px-5 lg:pt-5 relative z-10">
           <CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest">
             Pointage
           </CardTitle>
-          <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">
+          <div className="rounded-2xl bg-gradient-to-br from-chart-4/30 via-chart-4/20 to-chart-4/10 p-3 shrink-0 shadow-lg shadow-chart-4/20">
             <CreditCard className="h-5 w-5 text-chart-4" />
           </div>
         </CardHeader>
@@ -138,6 +146,25 @@ export function OverviewCards({ data }: OverviewCardsProps) {
           </p>
         </CardContent>
       </Card>
+
+      <Card className="stat-card-gradient-5 card-hover group relative overflow-hidden">
+        <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-4 px-6 pt-6 sm:px-7 sm:pt-7 lg:px-5 lg:pt-5 relative z-10">
+          <CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest">
+            Catégorisation
+          </CardTitle>
+          <div className="rounded-2xl bg-gradient-to-br from-chart-5/30 via-chart-5/20 to-chart-5/10 p-3 shrink-0 shadow-lg shadow-chart-5/20">
+            <Tag className="h-5 w-5 text-chart-5" />
+          </div>
+        </CardHeader>
+        <CardContent className="px-6 pb-6 sm:px-7 sm:pb-7 lg:px-5 lg:pb-5 pt-0 relative z-10">
+          <div className="text-2xl sm:text-3xl md:text-3xl lg:text-xl xl:text-xl font-black tracking-tight mb-4 leading-none break-words">
+            {categorizedPercent}%
+          </div>
+          <p className="text-xs sm:text-sm font-semibold text-muted-foreground/60">
+            {categorized} / {total} opérations catégorisées
+          </p>
+        </CardContent>
+      </Card>
     </div>
   );
 }

components/dashboard/recent-transactions.tsx

@@ -76,7 +76,7 @@ export function RecentTransactions({ data }: RecentTransactionsProps) {
             return (
               <div
                 key={transaction.id}
-                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"
+                className="group rounded-2xl bg-gradient-to-r from-muted/50 via-muted/30 to-muted/20 border-2 border-border/40 overflow-hidden backdrop-blur-sm"
               >
                 <div className="flex items-start gap-4 md:gap-5 p-4 md:p-5">
                   <div className="flex-1 min-w-0 overflow-hidden">
@@ -89,7 +89,7 @@ export function RecentTransactions({ data }: RecentTransactionsProps) {
                           "font-black tabular-nums text-sm md:text-base shrink-0 md:hidden",
                           transaction.amount >= 0
                             ? "text-emerald-600 dark:text-emerald-400"
-                            : "text-red-600 dark:text-red-400",
+                            : "text-red-600 dark:text-red-400"
                         )}
                       >
                         {transaction.amount >= 0 ? "+" : ""}
@@ -131,7 +131,7 @@ export function RecentTransactions({ data }: RecentTransactionsProps) {
                       "font-black tabular-nums text-base md:text-lg shrink-0 hidden md:block leading-tight",
                       transaction.amount >= 0
                         ? "text-emerald-600 dark:text-emerald-400"
-                        : "text-red-600 dark:text-red-400",
+                        : "text-red-600 dark:text-red-400"
                     )}
                   >
                     {transaction.amount >= 0 ? "+" : ""}

components/dashboard/sidebar.tsx

@@ -85,8 +85,7 @@ function SidebarContent({
               <Button
                 variant={isActive ? "secondary" : "ghost"}
                 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",
-                  "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 mx-auto",
@@ -94,8 +93,8 @@ function SidebarContent({
               >
                 <item.icon
                   className={cn(
-                    "w-5 h-5 shrink-0 transition-all duration-300",
+                    "w-5 h-5 shrink-0",
-                    isActive && "text-primary scale-110",
+                    isActive && "text-primary",
                   )}
                 />
                 {!collapsed && (
@@ -124,7 +123,7 @@ function SidebarContent({
           <Button
             variant="ghost"
             className={cn(
-              "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",
+              "w-full justify-start gap-4 h-12 rounded-2xl",
               collapsed && "justify-center px-2 w-12 mx-auto",
             )}
           >
@@ -138,8 +137,8 @@ function SidebarContent({
           variant="ghost"
           onClick={handleSignOut}
           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",
-            "text-destructive hover:text-destructive hover:bg-destructive/15 hover:scale-[1.02] hover:shadow-md",
+            "text-destructive",
             collapsed && "justify-center px-2 w-12 mx-auto",
           )}
         >
@@ -180,14 +179,14 @@ export function Sidebar({ open, onOpenChange }: SidebarProps) {
   return (
     <aside
       className={cn(
-        "hidden md:flex flex-col h-screen glass border-r border-border transition-all duration-300",
+        "hidden md:flex flex-col h-screen glass border-r border-border",
         "backdrop-blur-xl",
         collapsed ? "w-16" : "w-64",
       )}
     >
       <div
         className={cn(
-          "flex items-center border-b border-border/30 transition-all duration-300",
+          "flex items-center border-b border-border/30",
           collapsed ? "justify-center p-4" : "justify-between p-6",
         )}
       >
@@ -206,7 +205,7 @@ export function Sidebar({ open, onOpenChange }: SidebarProps) {
           size="icon"
           onClick={() => setCollapsed(!collapsed)}
           className={cn(
-            "hover:bg-muted/60 rounded-xl transition-all duration-300 hover:scale-110",
+            "rounded-xl",
             collapsed ? "" : "ml-auto",
           )}
         >

components/rules/rule-group-card.tsx

@@ -57,7 +57,7 @@ export function RuleGroupCard({
     <div className="border border-border rounded-lg bg-card overflow-hidden">
       {/* Header */}
       <div
-        className="flex flex-col md:flex-row md:items-center gap-2 md:gap-3 p-3 md:p-4 cursor-pointer hover:bg-accent/5 transition-colors"
+        className="flex flex-col md:flex-row md:items-center gap-2 md:gap-3 p-3 md:p-4 cursor-pointer hover:bg-accent/5"
         onClick={onToggleExpand}
       >
         <div className="flex items-center gap-2 md:gap-3 flex-1 min-w-0">

components/statistics/category-bar-chart.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import Link from "next/link";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { CategoryIcon } from "@/components/ui/category-icon";
 import {
@@ -29,6 +30,48 @@ export function CategoryBarChart({
 }: CategoryBarChartProps) {
   const displayData = data.slice(0, maxItems).reverse(); // Reverse pour avoir le plus grand en haut
 
+  // Custom tick component for clickable labels
+  const CustomYAxisTick = ({ x, y, payload }: any) => {
+    const categoryName = payload.value;
+    const item = displayData.find((d) => d.name === categoryName);
+    
+    if (!item) {
+      return (
+        <text
+          x={x}
+          y={y}
+          fill="var(--muted-foreground)"
+          fontSize={12}
+          textAnchor="end"
+          dominantBaseline="middle"
+        >
+          {categoryName}
+        </text>
+      );
+    }
+
+    const href =
+      item.categoryId === null || item.categoryId === undefined
+        ? "/transactions?includeUncategorized=true"
+        : `/transactions?categoryIds=${item.categoryId}`;
+
+    return (
+      <Link href={href}>
+        <text
+          x={x}
+          y={y}
+          fill="var(--muted-foreground)"
+          fontSize={12}
+          className="hover:opacity-80 transition-opacity cursor-pointer"
+          textAnchor="end"
+          dominantBaseline="middle"
+        >
+          {categoryName}
+        </text>
+      </Link>
+    );
+  };
+
   return (
     <Card>
       <CardHeader>
@@ -60,11 +103,7 @@ export function CategoryBarChart({
                   dataKey="name"
                   className="text-xs"
                   width={90}
-                  tick={{ fill: "var(--muted-foreground)" }}
+                  tick={CustomYAxisTick}
-                  tickFormatter={(value) => {
-                    const item = displayData.find((d) => d.name === value);
-                    return item ? value : "";
-                  }}
                 />
                 <Tooltip
                   content={({ active, payload }) => {

components/statistics/category-pie-chart.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import Link from "next/link";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { CategoryIcon } from "@/components/ui/category-icon";
@@ -13,7 +14,8 @@ export interface CategoryChartData {
   value: number;
   color: string;
   icon: string;
-  [key: string]: string | number;
+  categoryId?: string | null; // null for "Non catégorisé"
+  [key: string]: string | number | null | undefined;
 }
 
 interface CategoryPieChartProps {
@@ -162,24 +164,32 @@ export function CategoryPieChart({
                 Légende
               </div>
               <div className="max-h-[300px] overflow-y-auto overflow-x-hidden pr-2 space-y-2">
-                {currentData.map((item, index) => (
+                {currentData.map((item, index) => {
-                  <div
+                  const href =
-                    key={`legend-${index}`}
+                    item.categoryId === null || item.categoryId === undefined
-                    className="flex items-center gap-2 text-sm"
+                      ? "/transactions?includeUncategorized=true"
-                  >
+                      : `/transactions?categoryIds=${item.categoryId}`;
-                    <CategoryIcon
+
-                      icon={item.icon}
+                  return (
-                      color={item.color}
+                    <Link
-                      size={16}
+                      key={`legend-${index}`}
-                    />
+                      href={href}
-                    <span className="text-foreground flex-1 min-w-0 truncate">
+                      className="flex items-center gap-2 text-sm hover:opacity-80 transition-opacity cursor-pointer"
-                      {item.name}
+                    >
-                    </span>
+                      <CategoryIcon
-                    <span className="text-foreground font-semibold tabular-nums whitespace-nowrap">
+                        icon={item.icon}
-                      {formatCurrency(item.value)}
+                        color={item.color}
-                    </span>
+                        size={16}
-                  </div>
+                      />
-                ))}
+                      <span className="text-foreground flex-1 min-w-0 truncate">
+                        {item.name}
+                      </span>
+                      <span className="text-foreground font-semibold tabular-nums whitespace-nowrap">
+                        {formatCurrency(item.value)}
+                      </span>
+                    </Link>
+                  );
+                })}
               </div>
             </div>
           </div>

components/statistics/top-expenses-list.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import Link from "next/link";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { CategoryIcon } from "@/components/ui/category-icon";
 import { Badge } from "@/components/ui/badge";
@@ -53,24 +54,29 @@ export function TopExpensesList({
                         {new Date(expense.date).toLocaleDateString("fr-FR")}
                       </span>
                       {category && (
-                        <Badge
+                        <Link
-                          variant="secondary"
+                          href={`/transactions?categoryIds=${category.id}`}
-                          className="text-[10px] md:text-xs px-1.5 md:px-2 py-0.5 inline-flex items-center gap-1 shrink-0"
+                          className="inline-block"
-                          style={{
-                            backgroundColor: `${category.color}20`,
-                            color: category.color,
-                            borderColor: `${category.color}30`,
-                          }}
                         >
-                          <CategoryIcon
+                          <Badge
-                            icon={category.icon}
+                            variant="secondary"
-                            color={category.color}
+                            className="text-[10px] md:text-xs px-1.5 md:px-2 py-0.5 inline-flex items-center gap-1 shrink-0 hover:opacity-80 transition-opacity cursor-pointer"
-                            size={isMobile ? 8 : 10}
+                            style={{
-                          />
+                              backgroundColor: `${category.color}20`,
-                          <span className="truncate max-w-[120px] md:max-w-none">
+                              color: category.color,
-                            {category.name}
+                              borderColor: `${category.color}30`,
-                          </span>
+                            }}
-                        </Badge>
+                          >
+                            <CategoryIcon
+                              icon={category.icon}
+                              color={category.color}
+                              size={isMobile ? 8 : 10}
+                            />
+                            <span className="truncate max-w-[120px] md:max-w-none">
+                              {category.name}
+                            </span>
+                          </Badge>
+                        </Link>
                       )}
                     </div>
                   </div>

components/transactions/transaction-table.tsx

@@ -238,7 +238,7 @@ export function TransactionTable({
             <div
               ref={parentRef}
               className="overflow-auto"
-              style={{ height: "calc(100vh - 300px)", minHeight: "400px" }}
+              style={{ height: "calc(100vh - 200px)", minHeight: "600px" }}
             >
               <div
                 style={{
@@ -468,7 +468,7 @@ export function TransactionTable({
             <div
               ref={parentRef}
               className="overflow-auto"
-              style={{ height: "calc(100vh - 400px)", minHeight: "400px" }}
+              style={{ height: "calc(100vh - 200px)", minHeight: "700px" }}
             >
               <div
                 style={{

components/ui/alert-dialog.tsx

@@ -54,7 +54,7 @@ function AlertDialogContent({
       <AlertDialogPrimitive.Content
         data-slot="alert-dialog-content"
         className={cn(
-          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] max-h-[calc(100vh-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 overflow-y-auto sm:max-w-lg",
           className,
         )}
         {...props}

components/ui/breadcrumb.tsx

@@ -43,7 +43,7 @@ function BreadcrumbLink({
   return (
     <Comp
       data-slot="breadcrumb-link"
-      className={cn("hover:text-foreground transition-colors", className)}
+      className={cn("hover:text-foreground", className)}
       {...props}
     />
   );

components/ui/button.tsx

@@ -5,21 +5,20 @@ 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-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",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-semibold 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-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",
+          "bg-gradient-to-r from-primary via-primary/95 to-primary/90 text-primary-foreground shadow-xl shadow-primary/30 backdrop-blur-sm border border-primary/20",
         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 shadow-xl shadow-destructive/30 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 backdrop-blur-sm border border-destructive/20",
         outline:
-          "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]",
+          "border-2 bg-background/95 backdrop-blur-md shadow-md dark:bg-input/40 dark:border-input",
         secondary:
-          "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",
+          "bg-gradient-to-r from-secondary via-secondary/95 to-secondary/90 text-secondary-foreground backdrop-blur-sm",
-        ghost:
+        ghost: "backdrop-blur-sm",
-          "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 font-semibold",
-        link: "text-primary underline-offset-4 hover:underline font-semibold",
       },
       size: {
         default: "h-10 px-5 py-2.5 has-[>svg]:px-4",
@@ -34,7 +33,7 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  },
+  }
 );
 
 function Button({

components/ui/card.tsx

@@ -9,7 +9,6 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
       className={cn(
         "fintech-card",
         "bg-card text-card-foreground flex flex-col",
-        "transition-all duration-300 ease-out",
         className,
       )}
       {...props}

components/ui/dialog.tsx

@@ -60,7 +60,7 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          "bg-background 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 fixed top-[50%] left-[50%] z-50 flex flex-col w-full max-w-[calc(100%-2rem)] max-h-[calc(100vh-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 overflow-y-auto sm:max-w-lg",
           className,
         )}
         {...props}
@@ -69,7 +69,7 @@ function DialogContent({
         {showCloseButton && (
           <DialogPrimitive.Close
             data-slot="dialog-close"
-            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
           >
             <XIcon />
             <span className="sr-only">Close</span>

components/ui/icon-picker.tsx

@@ -316,7 +316,7 @@ export function IconPicker({ value, onChange, color }: IconPickerProps) {
                       key={icon}
                       onClick={() => handleSelect(icon)}
                       className={cn(
-                        "flex items-center justify-center p-2 rounded-md hover:bg-accent transition-colors",
+                        "flex items-center justify-center p-2 rounded-md hover:bg-accent",
                         value === icon && "bg-accent ring-2 ring-primary",
                       )}
                       title={icon}

components/ui/sheet.tsx

@@ -58,21 +58,21 @@ function SheetContent({
       <SheetPrimitive.Content
         data-slot="sheet-content"
         className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 overflow-y-auto",
           side === "right" &&
             "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
           side === "left" &&
             "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
           side === "top" &&
-            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 max-h-[calc(100vh-2rem)] border-b",
           side === "bottom" &&
-            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 max-h-[calc(100vh-2rem)] border-t",
           className,
         )}
         {...props}
       >
         {children}
-        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
           <XIcon className="size-4" />
           <span className="sr-only">Close</span>
         </SheetPrimitive.Close>

components/ui/table.tsx

@@ -57,7 +57,7 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
     <tr
       data-slot="table-row"
       className={cn(
-        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b",
         className,
       )}
       {...props}

hooks/use-transactions-page.ts

@@ -69,6 +69,21 @@ export function useTransactionsPage() {
     }
   }, [searchParams]);
 
+  // Handle categoryIds and includeUncategorized from URL params
+  useEffect(() => {
+    const categoryIdsParam = searchParams.get("categoryIds");
+    const includeUncategorizedParam = searchParams.get("includeUncategorized");
+    
+    if (categoryIdsParam) {
+      const categoryIds = categoryIdsParam.split(",");
+      setSelectedCategories(categoryIds);
+      setPage(0);
+    } else if (includeUncategorizedParam === "true") {
+      setSelectedCategories(["uncategorized"]);
+      setPage(0);
+    }
+  }, [searchParams]);
+
   // Calculate start date based on period
   const startDate = useMemo(() => {
     const now = new Date();

services/banking.service.ts

@@ -26,6 +26,7 @@ export interface TransactionsPaginatedResult {
   transactions: Transaction[];
   total: number;
   hasMore: boolean;
+  uncategorizedCount: number;
 }
 
 export const bankingService = {
@@ -210,6 +211,15 @@ export const bankingService = {
     // Get total count
     const total = await prisma.transaction.count({ where });
 
+    // Get uncategorized count with same filters
+    const uncategorizedWhere = {
+      ...where,
+      categoryId: null,
+    };
+    const uncategorizedCount = await prisma.transaction.count({
+      where: uncategorizedWhere,
+    });
+
     // Get paginated transactions
     const transactions = await prisma.transaction.findMany({
       where,
@@ -252,6 +262,7 @@ export const bankingService = {
       transactions: transformedTransactions,
       total,
       hasMore: offset + limit < total,
+      uncategorizedCount,
     };
   },