From 855723ffd1cc69317843f0849aefdc5dc07331e1 Mon Sep 17 00:00:00 2001
From: poyrazavsever <poyrazavsever@hotmail.com>
Date: Sun, 7 Jun 2026 07:27:38 +0300
Subject: [PATCH] ui: implement custom tooltips and update bar chart colors for
 analytics and dashboard components

---
 .../analytics/analytics-client.tsx            | 34 +++++++++++----
 app/(dashboard)/dashboard-client.tsx          | 41 ++++++++++++++-----
 2 files changed, 56 insertions(+), 19 deletions(-)

diff --git a/app/(dashboard)/analytics/analytics-client.tsx b/app/(dashboard)/analytics/analytics-client.tsx
index 9d3546a..77f376f 100644
--- a/app/(dashboard)/analytics/analytics-client.tsx
+++ b/app/(dashboard)/analytics/analytics-client.tsx
@@ -147,19 +147,37 @@ export function AnalyticsClient({ data }: AnalyticsClientProps) {
                   <XAxis dataKey="name" axisLine={false} tickLine={false} tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }} dy={10} />
                   <YAxis axisLine={false} tickLine={false} tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }} dx={-10} />
                   <Tooltip 
-                    cursor={{ fill: 'hsl(var(--muted))', opacity: 0.4 }}
-                    contentStyle={{ 
-                      backgroundColor: 'hsl(var(--background))', 
-                      borderColor: 'hsl(var(--border))',
-                      borderRadius: '0.375rem',
-                    }} 
+                    cursor={{ fill: 'transparent' }}
+                    content={({ active, payload, label }) => {
+                      if (active && payload && payload.length) {
+                        return (
+                          <div className="bg-background border border-border rounded-xl p-3 shadow-lg shadow-black/5">
+                            <p className="font-medium text-foreground mb-2 text-sm">{label}</p>
+                            <div className="space-y-1.5">
+                              {payload.map((entry: any, index: number) => (
+                                <div key={index} className="flex items-center justify-between gap-6 text-xs">
+                                  <div className="flex items-center gap-1.5">
+                                    <div className="w-2 h-2 rounded-full" style={{ backgroundColor: entry.color }} />
+                                    <span className="text-muted-foreground">Görev Sayısı</span>
+                                  </div>
+                                  <span className="font-semibold text-foreground">
+                                    {entry.value}
+                                  </span>
+                                </div>
+                              ))}
+                            </div>
+                          </div>
+                        );
+                      }
+                      return null;
+                    }}
                   />
                   <Bar 
                     dataKey="value" 
-                    fill="hsl(var(--primary))" 
+                    fill="#3b82f6" 
                     radius={[4, 4, 0, 0]} 
                     barSize={60} 
-                    activeBar={{ fill: "hsl(var(--primary))", opacity: 0.8 }}
+                    activeBar={{ fill: "#2563eb" }}
                   />
                 </BarChart>
               </ResponsiveContainer>
diff --git a/app/(dashboard)/dashboard-client.tsx b/app/(dashboard)/dashboard-client.tsx
index f22f6fb..bada7f7 100644
--- a/app/(dashboard)/dashboard-client.tsx
+++ b/app/(dashboard)/dashboard-client.tsx
@@ -159,25 +159,44 @@ export function DashboardClient({ data }: DashboardClientProps) {
                       dx={-10}
                     />
                     <Tooltip 
-                      cursor={{ fill: 'hsl(var(--muted))', opacity: 0.4 }}
-                      contentStyle={{ 
-                        backgroundColor: 'hsl(var(--background))', 
-                        borderColor: 'hsl(var(--border))',
-                        borderRadius: '0.375rem',
-                        boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)'
-                      }} 
+                      cursor={{ fill: 'transparent' }}
+                      content={({ active, payload, label }) => {
+                        if (active && payload && payload.length) {
+                          return (
+                            <div className="bg-background border border-border rounded-xl p-3 shadow-lg shadow-black/5">
+                              <p className="font-medium text-foreground mb-2 text-sm">{label}</p>
+                              <div className="space-y-1.5">
+                                {payload.map((entry: any, index: number) => (
+                                  <div key={index} className="flex items-center justify-between gap-6 text-xs">
+                                    <div className="flex items-center gap-1.5">
+                                      <div className="w-2 h-2 rounded-full" style={{ backgroundColor: entry.color }} />
+                                      <span className="text-muted-foreground">{entry.name === 'income' ? 'Gelir' : 'Gider'}</span>
+                                    </div>
+                                    <span className="font-semibold text-foreground">
+                                      {formatCurrency(entry.value)}
+                                    </span>
+                                  </div>
+                                ))}
+                              </div>
+                            </div>
+                          );
+                        }
+                        return null;
+                      }}
                     />
                     <Bar 
                       dataKey="income" 
-                      fill="hsl(var(--primary))" 
+                      name="income"
+                      fill="#10b981" 
                       radius={[4, 4, 0, 0]} 
-                      activeBar={{ fill: "hsl(var(--primary))", opacity: 0.8 }}
+                      activeBar={{ fill: "#059669" }}
                     />
                     <Bar 
                       dataKey="expense" 
-                      fill="hsl(var(--destructive))" 
+                      name="expense"
+                      fill="#f43f5e" 
                       radius={[4, 4, 0, 0]} 
-                      activeBar={{ fill: "hsl(var(--destructive))", opacity: 0.8 }}
+                      activeBar={{ fill: "#e11d48" }}
                     />
                   </BarChart>
                 </ResponsiveContainer>