ui: implement custom tooltips and update bar chart colors for analytics and dashboard components

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 }}
+                    cursor={{ fill: 'transparent' }}
-                    contentStyle={{ 
+                    content={({ active, payload, label }) => {
-                      backgroundColor: 'hsl(var(--background))', 
+                      if (active && payload && payload.length) {
-                      borderColor: 'hsl(var(--border))',
+                        return (
-                      borderRadius: '0.375rem',
+                          <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>

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 }}
+                      cursor={{ fill: 'transparent' }}
-                      contentStyle={{ 
+                      content={({ active, payload, label }) => {
-                        backgroundColor: 'hsl(var(--background))', 
+                        if (active && payload && payload.length) {
-                        borderColor: 'hsl(var(--border))',
+                          return (
-                        borderRadius: '0.375rem',
+                            <div className="bg-background border border-border rounded-xl p-3 shadow-lg shadow-black/5">
-                        boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)'
+                              <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>