feat: enhance tooltip functionality in BalanceLineChart; implement custom content rendering for improved data presentation and user interaction, including dynamic styling and formatting of displayed values

components/statistics/balance-line-chart.tsx

@@ -103,11 +103,38 @@ export function BalanceLineChart({
                   tick={{ fill: "var(--muted-foreground)" }}
                 />
                 <Tooltip
-                  formatter={(value: number) => formatCurrency(value)}
-                  contentStyle={{
-                    backgroundColor: "var(--card)",
-                    border: "1px solid var(--border)",
-                    borderRadius: "8px",
+                  content={({ active, payload }) => {
+                    if (!active || !payload?.length) return null;
+                    return (
+                      <div
+                        className="px-3 py-2 rounded-lg shadow-lg"
+                        style={{
+                          backgroundColor: "var(--popover)",
+                          border: "1px solid var(--border)",
+                          opacity: 1,
+                          backdropFilter: "blur(8px)",
+                        }}
+                      >
+                        {payload.map((entry, index) => (
+                          <div
+                            key={`tooltip-${index}`}
+                            className="flex items-center gap-2"
+                            style={{ color: entry.color }}
+                          >
+                            <div
+                              className="w-3 h-3 rounded-full"
+                              style={{ backgroundColor: entry.color }}
+                            />
+                            <span className="text-sm font-medium">
+                              {entry.name}:
+                            </span>
+                            <span className="text-sm font-semibold">
+                              {formatCurrency(entry.value as number)}
+                            </span>
+                          </div>
+                        ))}
+                      </div>
+                    );
                   }}
                 />
                 {mode === "aggregated" ? (