upd: tampilan

src/frontend/routes/apps.$appId.index.tsx

@@ -0,0 +1,125 @@
+import {
+  Badge,
+  Button,
+  Card,
+  Group,
+  SimpleGrid,
+  Stack,
+  Text,
+  Title,
+  Paper,
+  Box,
+  ThemeIcon,
+  Select,
+  ActionIcon,
+  Container,
+  Divider,
+} from '@mantine/core'
+import { createFileRoute, Link, useParams } from '@tanstack/react-router'
+import { 
+  TbUsers, 
+  TbActivity, 
+  TbRefresh, 
+  TbAlertTriangle, 
+  TbCalendar, 
+  TbFilter, 
+  TbChevronRight, 
+  TbArrowUpRight,
+  TbBuildingCommunity,
+  TbVersions
+} from 'react-icons/tb'
+import { SummaryCard } from '@/frontend/components/SummaryCard'
+import { VillageActivityLineChart, VillageComparisonBarChart } from '@/frontend/components/DashboardCharts'
+import { ErrorDataTable } from '@/frontend/components/ErrorDataTable'
+
+export const Route = createFileRoute('/apps/$appId/')({
+  component: AppOverviewPage,
+})
+
+function AppOverviewPage() {
+  const { appId } = useParams({ from: '/apps/$appId/' })
+  const isDesaPlus = appId === 'desa-plus'
+
+  return (
+    <Stack gap="xl">
+      {/* 🔝 HEADER SECTION */}
+      <Paper withBorder p="lg" radius="2xl" className="glass">
+        <Group justify="space-between">
+          <Stack gap={0}>
+            <Title order={2} className="gradient-text" style={{ fontSize: '1.8rem' }}>Overview</Title>
+            <Group gap="xs" mt={4}>
+              <Badge variant="light" size="lg" radius="sm" color="brand-blue" leftSection={<TbBuildingCommunity size={14} />}>
+                APP: {isDesaPlus ? 'DESA+' : appId.toUpperCase()}
+              </Badge>
+              <Text size="xs" c="dimmed" fw={600}>LAST UPDATED: JUST NOW</Text>
+            </Group>
+          </Stack>
+
+          <Group gap="md">
+            <Select
+                placeholder="Date Range"
+                data={['Today', '7 Days', '30 Days']}
+                defaultValue="Today"
+                leftSection={<TbCalendar size={16} />}
+                radius="md"
+                w={140}
+            />
+            <ActionIcon variant="light" color="brand-blue" size="lg" radius="md">
+                <TbRefresh size={20} />
+            </ActionIcon>
+            <Button 
+                variant="gradient" 
+                gradient={{ from: '#2563EB', to: '#7C3AED' }} 
+                radius="md"
+                leftSection={<TbFilter size={18} />}
+            >
+                Add Filter
+            </Button>
+          </Group>
+        </Group>
+      </Paper>
+
+      {/* 📊 1. SUMMARY CARDS */}
+      <SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }} spacing="lg">
+        <SummaryCard 
+          title="Active Version"
+          value="v1.2.0"
+          icon={TbVersions}
+          color="brand-blue"
+          progress={{ value: 92, label: 'User Adoption' }}
+        />
+        <SummaryCard 
+          title="Total Activity Today"
+          value="3,842"
+          icon={TbActivity}
+          color="teal"
+          trend={{ value: '14.2%', positive: true }}
+        />
+        <SummaryCard 
+          title="Total Villages Active"
+          value="138"
+          icon={TbBuildingCommunity}
+          color="indigo"
+          progress={{ value: 98, label: 'Integration Health' }}
+        />
+        <SummaryCard 
+          title="Errors Today"
+          value="12"
+          icon={TbAlertTriangle}
+          color="red"
+          isError={true}
+          trend={{ value: '4.8%', positive: false }}
+        />
+      </SimpleGrid>
+
+      {/* 📈 📊 2 & 3. CHARTS GRID */}
+      <SimpleGrid cols={{ base: 1, lg: 2 }} spacing="lg">
+        <VillageActivityLineChart />
+        <VillageComparisonBarChart />
+      </SimpleGrid>
+
+      {/* 🐞 4. LATEST ERROR REPORTS */}
+      <ErrorDataTable />
+    </Stack>
+  )
+}