feat: enhance tooltip and global styles for improved visibility; implement custom tooltip rendering in CategoryTrendChart and enforce opacity settings in globals.css for Radix Portal and Recharts tooltips

app/globals.css

@@ -74,6 +74,7 @@
 
   /* Sidebar moderne avec glassmorphism très prononcé */
   --sidebar: oklch(1 0 0 / 0.5);
+  --sidebar-opaque: oklch(1 0 0);
   --sidebar-foreground: oklch(0.2 0.015 280);
   --sidebar-primary: oklch(0.6 0.25 270);
   --sidebar-primary-foreground: oklch(0.99 0 0);
@@ -157,6 +158,7 @@
 
   /* Sidebar avec profondeur distincte */
   --sidebar: oklch(0.1 0.01 260);
+  --sidebar-opaque: oklch(0.1 0.01 260);
   --sidebar-foreground: oklch(0.9 0.005 260);
   --sidebar-primary: oklch(0.72 0.19 220);
   --sidebar-primary-foreground: oklch(0.12 0.008 260);
@@ -207,6 +209,7 @@
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
   --color-sidebar: var(--sidebar);
+  --color-sidebar-opaque: var(--sidebar-opaque);
   --color-sidebar-foreground: var(--sidebar-foreground);
   --color-sidebar-primary: var(--sidebar-primary);
   --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
@@ -378,6 +381,29 @@
     opacity: 1 !important;
   }
 
+  /* Forcer l'opacité sur les wrappers Radix Portal */
+  [data-radix-portal],
+  [data-radix-portal] > *,
+  [data-radix-popper-content-wrapper],
+  [data-radix-popper-content-wrapper] > * {
+    opacity: 1 !important;
+  }
+
+  /* Forcer l'opacité sur les tooltips Recharts */
+  .recharts-tooltip-wrapper,
+  .recharts-tooltip-wrapper > *,
+  .recharts-tooltip-wrapper > div,
+  .recharts-tooltip-wrapper > div > *,
+  .recharts-tooltip-cursor {
+    opacity: 1 !important;
+  }
+
+  /* Forcer l'opacité et le background opaque sur le contenu du tooltip */
+  .recharts-tooltip-wrapper > div {
+    background-color: var(--background) !important;
+    opacity: 1 !important;
+  }
+
   /* Glassmorphism effect très prononcé */
   .glass {
     background: var(--card);

components/dashboard/sidebar.tsx

@@ -168,7 +168,8 @@ export function Sidebar({ open, onOpenChange }: SidebarProps) {
       <Sheet open={open} onOpenChange={onOpenChange}>
         <SheetContent
           side="left"
-          className="w-64 p-0 bg-sidebar text-sidebar-foreground border-sidebar-border"
+          className="w-64 p-0 text-sidebar-foreground border-sidebar-border"
+          style={{ backgroundColor: 'var(--sidebar-opaque)' }}
         >
           <SheetTitle className="sr-only">Navigation</SheetTitle>
           <div className="flex flex-col h-full">

components/statistics/category-trend-chart.tsx

@@ -166,11 +166,67 @@ export function CategoryTrendChart({
                   tick={{ fill: "var(--muted-foreground)" }}
                 />
                 <Tooltip
-                  formatter={(value: number) => formatCurrency(value)}
+                  content={({ active, payload, label }) => {
-                  contentStyle={{
+                    if (!active || !payload?.length) return null;
-                    backgroundColor: "var(--card)",
+                    
-                    border: "1px solid var(--border)",
+                    // Filtrer seulement les catégories qui ont une valeur
-                    borderRadius: "8px",
+                    const entriesWithValue = payload.filter(
+                      (entry) => entry.value !== undefined && entry.value !== null && Number(entry.value) !== 0
+                    );
+
+                    if (entriesWithValue.length === 0) return null;
+
+                    return (
+                      <div
+                        className="px-2.5 py-2 rounded-lg shadow-lg"
+                        style={{
+                          backgroundColor: "var(--background)",
+                          border: "1px solid var(--border)",
+                          opacity: 1,
+                        }}
+                      >
+                        <div className="text-xs font-medium text-foreground mb-1.5 pb-1 border-b border-border/50">
+                          {label}
+                        </div>
+                        <div className="space-y-1">
+                          {entriesWithValue.map((entry, index) => {
+                            const categoryId = entry.dataKey as string;
+                            const categoryInfo = getCategoryInfo(categoryId);
+                            const categoryName = getCategoryName(categoryId);
+                            const value = entry.value as number;
+
+                            return (
+                              <div
+                                key={`tooltip-${categoryId}-${index}`}
+                                className="flex items-center gap-1.5"
+                              >
+                                {categoryInfo ? (
+                                  <CategoryIcon
+                                    icon={categoryInfo.icon}
+                                    color={categoryInfo.color}
+                                    size={12}
+                                  />
+                                ) : (
+                                  <div
+                                    className="w-3 h-3 rounded-full shrink-0"
+                                    style={{ backgroundColor: "#94a3b8" }}
+                                  />
+                                )}
+                                <span className="text-xs text-foreground flex-1 min-w-0 truncate">
+                                  {categoryName}
+                                </span>
+                                <span className="text-xs font-semibold text-foreground tabular-nums whitespace-nowrap">
+                                  {formatCurrency(value)}
+                                </span>
+                              </div>
+                            );
+                          })}
+                        </div>
+                      </div>
+                    );
+                  }}
+                  wrapperStyle={{
+                    opacity: 1,
                   }}
                 />
                 <Legend
@@ -179,8 +235,9 @@ export function CategoryTrendChart({
                     const allCategoryIds = Array.from(categoryTotals.keys());
 
                     return (
-                      <div className="flex flex-wrap justify-center gap-x-4 gap-y-1 mt-2">
+                      <div className="max-h-[60px] overflow-y-auto overflow-x-hidden pr-2 mt-2">
-                        {allCategoryIds.map((categoryId) => {
+                        <div className="flex flex-wrap justify-center gap-x-4 gap-y-1">
+                          {allCategoryIds.map((categoryId) => {
                           const categoryInfo = getCategoryInfo(categoryId);
                           const categoryName = getCategoryName(categoryId);
                           if (!categoryInfo && categoryId !== "uncategorized")
@@ -233,6 +290,7 @@ export function CategoryTrendChart({
                             </button>
                           );
                         })}
+                        </div>
                       </div>
                     );
                   }}
@@ -259,6 +317,7 @@ export function CategoryTrendChart({
                       strokeWidth={isSelected ? 2 : 1}
                       strokeOpacity={isSelected ? 1 : 0.3}
                       dot={false}
+                      connectNulls={true}
                       hide={!isSelected && selectedCategories.length > 0}
                     />
                   );