wibu/monitoring-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

amalia/09-apr-26 #5

Merged
amaliadwiy merged 6 commits from amalia/09-apr-26 into main 2026-04-09 17:34:49 +08:00
Conversation 0 Commits 6 Files Changed 14 +773 -435
10 changed files with 773 additions and 435 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 3a91bb5b17 - Show all commits

2
src/frontend/config/api.ts
View File

@@ -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)}`,
}

305
src/frontend/routes/apps.$appId.logs.tsx
View File

@@ -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>
)
}

2
src/frontend/routes/apps.$appId.users.index.tsx
View File

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