upd: tampilan

src/frontend/components/DashboardCharts.tsx

@@ -0,0 +1,127 @@
+import { 
+  Paper, 
+  Stack, 
+  Text, 
+  Group, 
+  ThemeIcon, 
+  Box,
+  Badge,
+  useMantineTheme
+} from '@mantine/core'
+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 },
+]
+
+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() {
+  const theme = useMantineTheme()
+  
+  return (
+    <Paper withBorder p="xl" radius="2xl" className="glass h-full">
+      <Stack gap="md" h="100%">
+        <Group justify="space-between">
+          <Group gap="sm">
+            <ThemeIcon variant="light" size="lg" radius="md" color="blue">
+              <TbTimeline size={20} />
+            </ThemeIcon>
+            <Box>
+              <Text fw={700} size="sm">DAILY ACTIVITY - ALL VILLAGES</Text>
+              <Text size="xs" c="dimmed">Trend over the last 7 days</Text>
+            </Box>
+          </Group>
+          <Badge variant="light" color="blue" size="sm" rightSection={<TbArrowUpRight size={12} />}>
+            Growing
+          </Badge>
+        </Group>
+
+        <Box h={300} mt="lg">
+          <LineChart
+            h={300}
+            data={activityData}
+            dataKey="date"
+            series={[{ name: 'logs', color: '#2563EB' }]}
+            curveType="monotone"
+            tickLine="none"
+            gridAxis="x"
+            withTooltip
+            tooltipAnimationDuration={200}
+            styles={{
+              root: {
+                '.recharts-line-curve': {
+                  strokeWidth: 3,
+                  filter: 'drop-shadow(0 4px 8px rgba(37, 99, 235, 0.3))'
+                }
+              }
+            }}
+          />
+        </Box>
+      </Stack>
+    </Paper>
+  )
+}
+
+export function VillageComparisonBarChart() {
+  const theme = useMantineTheme()
+
+  return (
+    <Paper withBorder p="xl" radius="2xl" className="glass h-full">
+      <Stack gap="md" h="100%">
+        <Group justify="space-between">
+          <Group gap="sm">
+            <ThemeIcon variant="light" size="lg" radius="md" color="brand-purple">
+              <TbChartBar size={20} />
+            </ThemeIcon>
+            <Box>
+              <Text fw={700} size="sm">USAGE COMPARISON BETWEEN VILLAGES</Text>
+              <Text size="xs" c="dimmed">Top 5 most active village deployments</Text>
+            </Box>
+          </Group>
+        </Group>
+
+        <Box h={300} mt="lg">
+          <BarChart
+            h={300}
+            data={villageComparisonData}
+            dataKey="village"
+            series={[{ name: 'activity', color: 'indigo.6' }]}
+            withTooltip
+            tickLine="none"
+            gridAxis="y"
+            barProps={{
+                radius: [8, 8, 4, 4],
+            }}
+            styles={{
+                bar: {
+                    fill: 'url(#barGradient)',
+                }
+            }}
+          >
+            {/* 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} />
+                <stop offset="100%" stopColor="#7C3AED" stopOpacity={0.8} />
+              </linearGradient>
+            </defs>
+          </BarChart>
+        </Box>
+      </Stack>
+    </Paper>
+  )
+}