upd: fix graphic data

src/frontend/components/DashboardCharts.tsx

@@ -53,6 +53,9 @@ export function VillageActivityLineChart({ data = [], isLoading }: ChartProps) {
             gridAxis="x"
             withTooltip
             tooltipAnimationDuration={200}
+            tooltipProps={{
+              allowEscapeViewBox: { x: true, y: false },
+            }}
             styles={{
               root: {
                 '.recharts-line-curve': {
@@ -91,17 +94,38 @@ export function VillageComparisonBarChart({ data = [], isLoading }: ChartProps)
             h={300}
             data={data}
             dataKey="village"
-            series={[{ name: 'activity', color: 'indigo.6' }]}
+            series={[{ name: 'activity', color: 'blue.6' }]} // Menggunakan warna dari theme
             withTooltip
-            tickLine="none"
-            gridAxis="y"
             barProps={{
-              radius: [8, 8, 4, 4],
+              radius: [8, 8, 0, 0],
+              fill: 'url(#barGradient)', // Menggunakan gradient yang Anda buat
             }}
-            styles={{
-              bar: {
-                fill: 'url(#barGradient)',
-              }
+            tooltipProps={{
+              cursor: { fill: '#373A40', opacity: 0.4 },
+              allowEscapeViewBox: { x: false, y: false },
+              content: ({ active, payload }) => {
+                if (active && payload && payload.length) {
+                  return (
+                    <div style={{
+                      backgroundColor: '#1A1B1E',
+                      padding: '8px 12px',
+                      borderRadius: '6px',
+                      border: '1px solid #373A40',
+                      boxShadow: '0 4px 12px rgba(0,0,0,0.5)',
+                      pointerEvents: 'none', // Sangat penting agar tidak mengganggu hover
+                      whiteSpace: 'nowrap'   // Mencegah teks turun ke bawah
+                    }}>
+                      <div style={{ fontSize: '12px', fontWeight: 600, color: '#fff', marginBottom: '4px' }}>
+                        {payload[0].payload.village}
+                      </div>
+                      <div style={{ fontSize: '11px', color: '#2563EB' }}>
+                        Activity: <span style={{ fontWeight: 700 }}>{payload[0].value}</span>
+                      </div>
+                    </div>
+                  );
+                }
+                return null;
+              },
             }}
           >
             <defs>