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>

src/frontend/routes/apps.$appId.villages.$villageId.tsx

@@ -110,49 +110,20 @@ function ActivityChart({ villageId }: { villageId: string }) {
           h={280}
           data={data}
           dataKey="label"
-          series={[{ name: 'aktivitas', color: '#2563EB' }]}
+          series={[{ name: 'activity', color: '#2563EB' }]}
           curveType="monotone"
-          withTooltip
-          withDots
-          tickLine="none"
-          gridAxis="x"
-          tooltipAnimationDuration={150}
+          withTooltip={true}
+          withDots={true}
           withPointLabels={false}
-          withXAxis={true}
-          withYAxis={true}
-          fillOpacity={1}
+          tooltipAnimationDuration={150}
           tooltipProps={{
             allowEscapeViewBox: { x: true, y: false },
           }}
-          areaProps={{
-            strokeWidth: 2.5,
-            fill: 'url(#villageAreaGrad)',
-            stroke: '#2563EB',
-            filter: 'drop-shadow(0 4px 12px rgba(37,99,235,0.3))',
-          }}
-          dotProps={{
-            r: 4,
-            strokeWidth: 2,
-            stroke: '#2563EB',
-            fill: 'white',
-            style: { cursor: 'pointer' },
-          }}
           activeDotProps={{
             r: 6,
             strokeWidth: 2,
-            stroke: '#2563EB',
-            fill: '#2563EB',
-            children: null,
           }}
-        >
-          <defs>
-            <linearGradient id="villageAreaGrad" x1="0" y1="0" x2="0" y2="1">
-              <stop offset="0%" stopColor="#2563EB" stopOpacity={0.35} />
-              <stop offset="75%" stopColor="#7C3AED" stopOpacity={0.08} />
-              <stop offset="100%" stopColor="#7C3AED" stopOpacity={0} />
-            </linearGradient>
-          </defs>
-        </AreaChart>
+        />
       )}
     </Paper>
   )