upd: connected api monitoring

Deskripsi:
- overview page

No Issues

src/frontend/components/DashboardCharts.tsx

@@ -11,25 +11,12 @@ import {
 import { LineChart, BarChart } from '@mantine/charts'
 import { TbTimeline, TbChartBar, TbArrowUpRight } from 'react-icons/tb'
 
-const activityData = [
-  { date: 'Mar 26', logs: 1200 },
-  { date: 'Mar 27', logs: 1900 },
-  { date: 'Mar 28', logs: 1540 },
-  { date: 'Mar 29', logs: 2400 },
-  { date: 'Mar 30', logs: 2100 },
-  { date: 'Mar 31', logs: 3200 },
-  { date: 'Apr 01', logs: 3800 },
-]
+interface ChartProps {
+  data?: any[]
+  isLoading?: boolean
+}
 
-const villageComparisonData = [
-  { village: 'Sukatani', activity: 4500 },
-  { village: 'Sukamaju', activity: 3800 },
-  { village: 'Bojong Gede', activity: 3200 },
-  { village: 'Beji', activity: 2800 },
-  { village: 'Tapos', activity: 2400 },
-]
-
-export function VillageActivityLineChart() {
+export function VillageActivityLineChart({ data = [], isLoading }: ChartProps) {
   const theme = useMantineTheme()
   
   return (
@@ -46,14 +33,14 @@ export function VillageActivityLineChart() {
             </Box>
           </Group>
           <Badge variant="light" color="blue" size="sm" rightSection={<TbArrowUpRight size={12} />}>
-            Growing
+            {isLoading ? '...' : 'Live'}
           </Badge>
         </Group>
 
         <Box h={300} mt="lg">
           <LineChart
             h={300}
-            data={activityData}
+            data={data}
             dataKey="date"
             series={[{ name: 'logs', color: '#2563EB' }]}
             curveType="monotone"
@@ -76,7 +63,7 @@ export function VillageActivityLineChart() {
   )
 }
 
-export function VillageComparisonBarChart() {
+export function VillageComparisonBarChart({ data = [], isLoading }: ChartProps) {
   const theme = useMantineTheme()
 
   return (
@@ -89,7 +76,7 @@ export function VillageComparisonBarChart() {
             </ThemeIcon>
             <Box>
               <Text fw={700} size="sm">USAGE COMPARISON BETWEEN VILLAGES</Text>
-              <Text size="xs" c="dimmed">Top 5 most active village deployments</Text>
+              <Text size="xs" c="dimmed">Most active village deployments</Text>
             </Box>
           </Group>
         </Group>
@@ -97,7 +84,7 @@ export function VillageComparisonBarChart() {
         <Box h={300} mt="lg">
           <BarChart
             h={300}
-            data={villageComparisonData}
+            data={data}
             dataKey="village"
             series={[{ name: 'activity', color: 'indigo.6' }]}
             withTooltip
@@ -112,7 +99,6 @@ export function VillageComparisonBarChart() {
                 }
             }}
           >
-            {/* Custom SVG Gradient definitions for Premium SaaS look */}
             <defs>
               <linearGradient id="barGradient" x1="0" y1="0" x2="0" y2="1">
                 <stop offset="0%" stopColor="#2563EB" stopOpacity={1} />