upd: connected api monitoring

Deskripsi:
- list log semua desa

No Issues

src/frontend/config/api.ts

@@ -11,4 +11,6 @@ export const API_URLS = {
     `${API_BASE_URL}/api/monitoring/graph-log-villages?id=${id}&time=${time}`,
   getUsers: (page: number, search: string) => 
     `${API_BASE_URL}/api/monitoring/user?page=${page}&search=${encodeURIComponent(search)}`,
+  getLogsAllVillages: (page: number, search: string) => 
+    `${API_BASE_URL}/api/monitoring/log-all-villages?page=${page}&search=${encodeURIComponent(search)}`,
 }

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

@@ -1,6 +1,7 @@
+import { useState } from 'react'
+import useSWR from 'swr'
 import {
   Badge,
-  Container,
   Group,
   Stack,
   Text,
@@ -8,116 +9,244 @@ import {
   Paper,
   Table,
   TextInput,
-  Select,
   ActionIcon,
-  Tooltip,
   Avatar,
   Code,
-  Button
+  Button,
+  Box,
+  Pagination,
+  ThemeIcon,
+  ScrollArea,
+  Container,
 } from '@mantine/core'
+import { useMediaQuery } from '@mantine/hooks'
 import { createFileRoute, useParams } from '@tanstack/react-router'
-import { TbSearch, TbFilter, TbDownload, TbCalendar } from 'react-icons/tb'
+import {
+  TbSearch,
+  TbDownload,
+  TbX,
+  TbHistory,
+  TbCalendar,
+  TbUser,
+  TbHome2
+} from 'react-icons/tb'
+import { API_URLS } from '../config/api'
 
 export const Route = createFileRoute('/apps/$appId/logs')({
   component: AppLogsPage,
 })
 
-const mockLogs = [
-  { id: 1, type: 'DOCUMENT', village: 'Sukatani', activity: 'GENERATE_SURAT_DOMISILI', operator: 'Budi Santoso', time: '2 mins ago', status: 'SUCCESS' },
-  { id: 2, type: 'FINANCE', village: 'Sukamaju', activity: 'UPLOAD_LAPORAN_REALISASI_Q1', operator: 'Siti Aminah', time: '15 mins ago', status: 'SUCCESS' },
-  { id: 3, type: 'SYNC', village: 'Cikini', activity: 'SYNC_DATA_PENDUDUK_SIAK', operator: 'System', time: '1 hour ago', status: 'WARNING' },
-  { id: 4, type: 'SECURITY', village: 'Bojong Gede', activity: 'LOGIN_ADMIN_DESA', operator: 'Rahmat Hidayat', time: '2 hours ago', status: 'SUCCESS' },
-  { id: 5, type: 'DOCUMENT', village: 'Tapos', activity: 'VERIFIKASI_SURAT_KEMATIAN', operator: 'Agus Setiawan', time: '4 hours ago', status: 'SUCCESS' },
-]
+interface LogEntry {
+  id: string
+  createdAt: string
+  action: string
+  desc: string
+  username: string
+  village: string
+}
+
+const fetcher = (url: string) => fetch(url).then((res) => res.json())
 
 function AppLogsPage() {
   const { appId } = useParams({ from: '/apps/$appId/logs' })
+  const [page, setPage] = useState(1)
+  const [search, setSearch] = useState('')
+  const [searchQuery, setSearchQuery] = useState('')
+
   const isDesaPlus = appId === 'desa-plus'
+  const isMobile = useMediaQuery('(max-width: 768px)')
+
+  const apiUrl = isDesaPlus ? API_URLS.getLogsAllVillages(page, searchQuery) : null
+  const { data: response, error, isLoading } = useSWR(apiUrl, fetcher)
+  const logs: LogEntry[] = response?.data?.log || []
+
+  const handleSearchChange = (val: string) => {
+    setSearch(val)
+    if (val.length >= 3 || val.length === 0) {
+      setSearchQuery(val)
+      setPage(1)
+    }
+  }
+
+  const handleClearSearch = () => {
+    setSearch('')
+    setSearchQuery('')
+    setPage(1)
+  }
+
+  const getActionColor = (action: string) => {
+    const a = action.toUpperCase()
+    if (a === 'LOGIN') return 'blue'
+    if (a === 'LOGOUT') return 'gray'
+    if (a === 'CREATE') return 'teal'
+    if (a === 'UPDATE') return 'orange'
+    if (a === 'DELETE') return 'red'
+    return 'brand-blue'
+  }
+
+  if (!isDesaPlus) {
+    return (
+      <Container size="xl" py="xl">
+        <Paper p="xl" radius="xl" className="glass" style={{ textAlign: 'center' }}>
+          <TbHistory size={48} color="gray" opacity={0.5} />
+          <Title order={3} mt="md">Activity Logs</Title>
+          <Text c="dimmed">This feature is currently customized for Desa+. Other apps coming soon.</Text>
+        </Paper>
+      </Container>
+    )
+  }
 
   return (
-    <Stack gap="xl">
-      <Group justify="space-between" align="center">
-        <Stack gap={0}>
-          <Title order={3}>{isDesaPlus ? 'Desa+ Service Logs' : 'Application Activity Logs'}</Title>
-          <Text size="sm" c="dimmed">Detailed audit trail of all actions performed within the application instances.</Text>
-        </Stack>
-        <Group gap="xs">
-          <Button variant="light" leftSection={<TbDownload size={16} />} radius="md">Export XLS</Button>
-        </Group>
-      </Group>
+    <Stack gap="xl" py="md">
+      <Paper withBorder radius="2xl" p="xl" className="glass" style={{ borderLeft: '6px solid #7C3AED' }}>
+        <Stack gap="lg">
+          <Group justify="space-between" align="center">
+            <Stack gap={4}>
+              <Group gap="xs">
+                <ThemeIcon variant="light" color="violet" size="lg" radius="md">
+                  <TbHistory size={22} />
+                </ThemeIcon>
+                <Title order={3}>Activity Logs</Title>
+              </Group>
+              <Text size="sm" c="dimmed" ml={40}>
+                {isLoading ? 'Loading logs...' : `Auditing ${response?.data?.total || 0} events across all villages`}
+              </Text>
+            </Stack>
+            <Button
+              variant="light"
+              color="gray"
+              leftSection={<TbDownload size={18} />}
+              radius="md"
+              size="md"
+            >
+              Export
+            </Button>
+          </Group>
 
-      <Paper withBorder radius="2xl" className="glass" p="md">
-        <Group mb="md" grow>
           <TextInput
-            placeholder="Search activity, village, or operator..."
-            leftSection={<TbSearch size={16} />}
+            placeholder="Search action or village..."
+            leftSection={<TbSearch size={18} />}
+            size="md"
+            rightSection={
+              search ? (
+                <ActionIcon variant="transparent" color="gray" onClick={handleClearSearch} size="md">
+                  <TbX size={18} />
+                </ActionIcon>
+              ) : null
+            }
+            value={search}
+            onChange={(e) => handleSearchChange(e.currentTarget.value)}
             radius="md"
+            style={{ maxWidth: 500 }}
+            ml={40}
           />
-          <Select
-            placeholder="All Service Types"
-            data={['DOCUMENT', 'FINANCE', 'SYNC', 'SECURITY']}
-            leftSection={<TbFilter size={16} />}
+        </Stack>
+      </Paper>
+
+      {isLoading ? (
+        <Paper p="xl" radius="xl" withBorder style={{ textAlign: 'center' }}>
+          <Text c="dimmed">Fetching activity logs...</Text>
+        </Paper>
+      ) : error ? (
+        <Paper p="xl" radius="xl" withBorder style={{ textAlign: 'center' }}>
+          <Text c="red">Failed to load logs from API.</Text>
+        </Paper>
+      ) : logs.length === 0 ? (
+        <Paper p="xl" radius="xl" withBorder style={{ textAlign: 'center' }}>
+          <TbHistory size={40} color="gray" opacity={0.4} />
+          <Text c="dimmed" mt="md">No activity found for this search.</Text>
+        </Paper>
+      ) : (
+        <Paper withBorder radius="2xl" className="glass" style={{ overflow: 'hidden' }}>
+          <ScrollArea h={isMobile ? undefined : 'auto'} offsetScrollbars>
+            <Table 
+              verticalSpacing="lg" 
+              horizontalSpacing="xl" 
+              highlightOnHover 
+              withColumnBorders={false}
+              style={{ 
+                tableLayout: isMobile ? 'auto' : 'fixed', 
+                width: '100%',
+                minWidth: isMobile ? 900 : 'unset'
+              }}
+            >
+              <Table.Thead bg="rgba(0,0,0,0.05)">
+                <Table.Tr>
+                  <Table.Th style={{ border: 'none', width: isMobile ? undefined : '18%' }}>Timestamp</Table.Th>
+                  <Table.Th style={{ border: 'none', width: isMobile ? undefined : '20%' }}>User & Village</Table.Th>
+                  <Table.Th style={{ border: 'none', width: isMobile ? undefined : '12%' }}>Action</Table.Th>
+                  <Table.Th style={{ border: 'none', width: isMobile ? undefined : '50%' }}>Description</Table.Th>
+                </Table.Tr>
+              </Table.Thead>
+              <Table.Tbody>
+                {logs.map((log) => (
+                  <Table.Tr key={log.id} style={{ borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
+                    <Table.Td>
+                      <Group gap={8} wrap="nowrap" align="flex-start">
+                        <ThemeIcon variant="transparent" color="gray" size="sm">
+                          <TbCalendar size={14} />
+                        </ThemeIcon>
+                        <Stack gap={0}>
+                          <Text size="xs" fw={700} style={{ color: 'var(--mantine-color-white)' }}>
+                            {log.createdAt.split(' ').slice(1).join(' ')}
+                          </Text>
+                          <Text size="xs" c="dimmed">
+                            {log.createdAt.split(' ')[0]}
+                          </Text>
+                        </Stack>
+                      </Group>
+                    </Table.Td>
+                    <Table.Td>
+                      <Stack gap={4} style={{ overflow: 'hidden' }}>
+                        <Group gap={8} wrap="nowrap">
+                          <Avatar size="xs" radius="xl" color="brand-blue" variant="light">
+                            {log.username.charAt(0)}
+                          </Avatar>
+                          <Text size="xs" fw={700} truncate="end">{log.username}</Text>
+                        </Group>
+                        <Group gap={8} wrap="nowrap">
+                          <TbHome2 size={12} color="gray" />
+                          <Text size="xs" c="dimmed" truncate="end">{log.village}</Text>
+                        </Group>
+                      </Stack>
+                    </Table.Td>
+                    <Table.Td>
+                      <Badge 
+                        variant="dot" 
+                        color={getActionColor(log.action)} 
+                        radius="sm" 
+                        size="xs"
+                        styles={{ root: { fontWeight: 800 } }}
+                      >
+                        {log.action}
+                      </Badge>
+                    </Table.Td>
+                    <Table.Td>
+                      <Code color="brand-blue" bg="rgba(37, 99, 235, 0.05)" fw={600} style={{ fontSize: '11px', display: 'block', whiteSpace: 'normal' }}>
+                        {log.desc}
+                      </Code>
+                    </Table.Td>
+                  </Table.Tr>
+                ))}
+              </Table.Tbody>
+            </Table>
+          </ScrollArea>
+        </Paper>
+      )}
+
+      {!isLoading && !error && response?.data?.totalPage > 0 && (
+        <Group justify="center" mt="xl">
+          <Pagination
+            value={page}
+            onChange={setPage}
+            total={response.data.totalPage}
             radius="md"
-            clearable
+            withEdges={false}
+            siblings={1}
+            boundaries={1}
           />
         </Group>
-
-        <Table verticalSpacing="sm" highlightOnHover>
-          <Table.Thead>
-            <Table.Tr>
-              <Table.Th>Type</Table.Th>
-              <Table.Th>Village / Instance</Table.Th>
-              <Table.Th>Activity Name</Table.Th>
-              <Table.Th>Operator</Table.Th>
-              <Table.Th>Timestamp</Table.Th>
-              <Table.Th>Status</Table.Th>
-            </Table.Tr>
-          </Table.Thead>
-          <Table.Tbody>
-            {mockLogs.map((log) => (
-              <Table.Tr key={log.id}>
-                <Table.Td>
-                  <Badge 
-                    variant="light" 
-                    color={
-                      log.type === 'DOCUMENT' ? 'blue' : 
-                      log.type === 'FINANCE' ? 'teal' : 
-                      log.type === 'SYNC' ? 'orange' : 'gray'
-                    }
-                    size="xs"
-                  >
-                    {log.type}
-                  </Badge>
-                </Table.Td>
-                <Table.Td>
-                  <Text size="sm" fw={600}>{log.village}</Text>
-                </Table.Td>
-                <Table.Td>
-                  <Code color="brand-blue" bg="transparent" fw={800} style={{ fontSize: '11px' }}>{log.activity}</Code>
-                </Table.Td>
-                <Table.Td>
-                  <Group gap="xs">
-                    <Avatar size="xs" radius="xl" color="brand-blue">{log.operator[0]}</Avatar>
-                    <Text size="xs" fw={500}>{log.operator}</Text>
-                  </Group>
-                </Table.Td>
-                <Table.Td>
-                  <Text size="xs" c="dimmed">{log.time}</Text>
-                </Table.Td>
-                <Table.Td>
-                  <Badge 
-                    size="xs" 
-                    variant="dot" 
-                    color={log.status === 'SUCCESS' ? 'teal' : 'orange'}
-                  >
-                    {log.status}
-                  </Badge>
-                </Table.Td>
-              </Table.Tr>
-            ))}
-          </Table.Tbody>
-        </Table>
-      </Paper>
+      )}
     </Stack>
   )
 }

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

@@ -289,6 +289,8 @@ function UsersIndexPage() {
             total={response.data.totalPage}
             radius="md"
             withEdges={false}
+            siblings={1}
+            boundaries={1}
           />
         </Group>
       )}