feat: improve UI/UX consistency across all dashboard pages
Apply uniform design system across all routes and components: - Consistent header pattern with gradient-text titles, dimmed subtitles - Loader type="dots" replacing text-based loading states - Icon + text empty/error states with Paper+glass containers - Full STATUS_COLOR/STATUS_LABEL maps for all BugStatus values - dayjs timestamps, Tooltip on action icons, size="sm" on badges/pagination - Modals with overlayProps blur and gradient save buttons - Replace left-border Papers with clean Stack headers - Translate all remaining Indonesian UI strings to English - New monitoring-themed SVG logo and redesigned splash screen
This commit is contained in:
@@ -1,34 +1,30 @@
|
||||
import { useState } from 'react'
|
||||
import useSWR from 'swr'
|
||||
import {
|
||||
Badge,
|
||||
Group,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
Paper,
|
||||
Table,
|
||||
TextInput,
|
||||
ActionIcon,
|
||||
Avatar,
|
||||
Badge,
|
||||
Code,
|
||||
Button,
|
||||
Box,
|
||||
Group,
|
||||
Loader,
|
||||
Pagination,
|
||||
ThemeIcon,
|
||||
Paper,
|
||||
ScrollArea,
|
||||
Container,
|
||||
Stack,
|
||||
Table,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
Tooltip,
|
||||
} from '@mantine/core'
|
||||
import { useMediaQuery } from '@mantine/hooks'
|
||||
import { createFileRoute, useParams } from '@tanstack/react-router'
|
||||
import {
|
||||
TbSearch,
|
||||
TbDownload,
|
||||
TbX,
|
||||
TbAlertCircle,
|
||||
TbHistory,
|
||||
TbCalendar,
|
||||
TbUser,
|
||||
TbHome2
|
||||
TbHome2,
|
||||
TbSearch,
|
||||
TbX,
|
||||
} from 'react-icons/tb'
|
||||
import { API_URLS } from '../config/api'
|
||||
|
||||
@@ -47,6 +43,18 @@ interface LogEntry {
|
||||
|
||||
const fetcher = (url: string) => fetch(url).then((res) => res.json())
|
||||
|
||||
const ACTION_COLOR: Record<string, string> = {
|
||||
LOGIN: 'teal',
|
||||
LOGOUT: 'gray',
|
||||
CREATE: 'blue',
|
||||
UPDATE: 'yellow',
|
||||
DELETE: 'red',
|
||||
}
|
||||
|
||||
function getActionColor(action: string) {
|
||||
return ACTION_COLOR[action.toUpperCase()] ?? 'brand-blue'
|
||||
}
|
||||
|
||||
function AppLogsPage() {
|
||||
const { appId } = useParams({ from: '/apps/$appId/logs' })
|
||||
const [page, setPage] = useState(1)
|
||||
@@ -74,162 +82,142 @@ function AppLogsPage() {
|
||||
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>
|
||||
<Paper withBorder radius="2xl" className="glass" p="xl">
|
||||
<Stack align="center" gap="xs" py="xl">
|
||||
<TbHistory size={36} style={{ opacity: 0.25 }} />
|
||||
<Text fw={600} size="sm">Activity Logs — Coming Soon</Text>
|
||||
<Text size="sm" c="dimmed">This feature is currently available for Desa+. Other apps coming soon.</Text>
|
||||
</Stack>
|
||||
</Paper>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<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>
|
||||
|
||||
<TextInput
|
||||
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}
|
||||
/>
|
||||
<Group justify="space-between" align="flex-start">
|
||||
<Stack gap={4}>
|
||||
<Title order={3}>Activity Logs</Title>
|
||||
<Text size="sm" c="dimmed">
|
||||
{isLoading
|
||||
? 'Loading logs...'
|
||||
: `${(response?.data?.total ?? 0).toLocaleString()} events across all villages`}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Group>
|
||||
|
||||
<Paper withBorder p="md" className="glass">
|
||||
<TextInput
|
||||
placeholder="Search by action or village... (min. 3 characters)"
|
||||
leftSection={<TbSearch size={16} />}
|
||||
size="sm"
|
||||
rightSection={
|
||||
search ? (
|
||||
<Tooltip label="Clear search" withArrow>
|
||||
<ActionIcon variant="transparent" color="gray" onClick={handleClearSearch} size="sm">
|
||||
<TbX size={16} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
) : null
|
||||
}
|
||||
value={search}
|
||||
onChange={(e) => handleSearchChange(e.currentTarget.value)}
|
||||
radius="md"
|
||||
/>
|
||||
</Paper>
|
||||
|
||||
{isLoading ? (
|
||||
<Paper p="xl" radius="xl" withBorder style={{ textAlign: 'center' }}>
|
||||
<Text c="dimmed">Fetching activity logs...</Text>
|
||||
</Paper>
|
||||
<Group justify="center" py="xl">
|
||||
<Loader type="dots" />
|
||||
</Group>
|
||||
) : error ? (
|
||||
<Paper p="xl" radius="xl" withBorder style={{ textAlign: 'center' }}>
|
||||
<Text c="red">Failed to load logs from API.</Text>
|
||||
<Paper withBorder radius="2xl" className="glass" p="md">
|
||||
<Stack align="center" gap="xs" py="xl">
|
||||
<TbAlertCircle size={32} style={{ opacity: 0.4, color: 'var(--mantine-color-red-6)' }} />
|
||||
<Text size="sm" c="dimmed">Failed to load logs from the API.</Text>
|
||||
</Stack>
|
||||
</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 withBorder radius="2xl" className="glass" p="md">
|
||||
<Stack align="center" gap="xs" py="xl">
|
||||
<TbHistory size={32} style={{ opacity: 0.25 }} />
|
||||
<Text size="sm" c="dimmed">
|
||||
{searchQuery ? 'No activity found for this search.' : 'No activity logs yet.'}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Paper>
|
||||
) : (
|
||||
<Paper withBorder radius="2xl" className="glass" style={{ overflow: 'hidden' }}>
|
||||
<ScrollArea h={isMobile ? undefined : 'auto'} offsetScrollbars>
|
||||
<Table
|
||||
verticalSpacing="lg"
|
||||
horizontalSpacing="xl"
|
||||
highlightOnHover
|
||||
<Table
|
||||
className="data-table"
|
||||
verticalSpacing="sm"
|
||||
horizontalSpacing="lg"
|
||||
highlightOnHover
|
||||
withColumnBorders={false}
|
||||
style={{
|
||||
tableLayout: isMobile ? 'auto' : 'fixed',
|
||||
style={{
|
||||
tableLayout: isMobile ? 'auto' : 'fixed',
|
||||
width: '100%',
|
||||
minWidth: isMobile ? 900 : 'unset'
|
||||
minWidth: isMobile ? 900 : 'unset',
|
||||
}}
|
||||
>
|
||||
<Table.Thead bg="rgba(0,0,0,0.05)">
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th style={{ border: 'none', width: isMobile ? undefined : '15%' }}>Timestamp</Table.Th>
|
||||
<Table.Th style={{ border: 'none', width: isMobile ? undefined : '20%' }}>User & Village</Table.Th>
|
||||
<Table.Th style={{ border: 'none', width: isMobile ? undefined : '15%' }}>Action</Table.Th>
|
||||
<Table.Th style={{ border: 'none', width: isMobile ? undefined : '40%' }}>Description</Table.Th>
|
||||
<Table.Th style={{ width: isMobile ? undefined : '18%' }}>Timestamp</Table.Th>
|
||||
<Table.Th style={{ width: isMobile ? undefined : '22%' }}>User & Village</Table.Th>
|
||||
<Table.Th style={{ width: isMobile ? undefined : '14%' }}>Action</Table.Th>
|
||||
<Table.Th>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.Tr key={log.id}>
|
||||
<Table.Td>
|
||||
<Group gap={8} wrap="nowrap" align="flex-start">
|
||||
<ThemeIcon variant="transparent" color="gray" size="sm">
|
||||
<TbCalendar size={14} />
|
||||
</ThemeIcon>
|
||||
{log.createdAt.endsWith('lalu') ? (
|
||||
<Text size="xs" fw={700}>{log.createdAt}</Text>
|
||||
) : (
|
||||
<Stack gap={0}>
|
||||
<Text size="xs" fw={700}>
|
||||
{log.createdAt.split(' ').slice(1).join(' ')}
|
||||
</Text>
|
||||
<Text size="xs" c="dimmed">
|
||||
{log.createdAt.split(' ')[0]}
|
||||
</Text>
|
||||
</Stack>
|
||||
)}
|
||||
</Group>
|
||||
{log.createdAt.endsWith('lalu') ? (
|
||||
<Text size="xs" fw={600}>{log.createdAt}</Text>
|
||||
) : (
|
||||
<Stack gap={0}>
|
||||
<Text size="xs" fw={600}>
|
||||
{log.createdAt.split(' ').slice(1).join(' ')}
|
||||
</Text>
|
||||
<Text size="xs" c="dimmed">
|
||||
{log.createdAt.split(' ')[0]}
|
||||
</Text>
|
||||
</Stack>
|
||||
)}
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Stack gap={4} style={{ overflow: 'hidden' }}>
|
||||
<Group gap={8} wrap="nowrap">
|
||||
<Group gap={6} 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>
|
||||
<Text size="xs" fw={600} truncate="end">{log.username}</Text>
|
||||
</Group>
|
||||
<Group gap={8} wrap="nowrap">
|
||||
<Group gap={6} 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 },
|
||||
label: { textOverflow: 'clip', overflow: 'visible' }
|
||||
}}
|
||||
<Badge
|
||||
variant="light"
|
||||
color={getActionColor(log.action)}
|
||||
size="sm"
|
||||
tt="capitalize"
|
||||
>
|
||||
{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' }}>
|
||||
<Code
|
||||
color="brand-blue"
|
||||
bg="rgba(37, 99, 235, 0.05)"
|
||||
fw={600}
|
||||
style={{ fontSize: 11, display: 'block', whiteSpace: 'normal' }}
|
||||
>
|
||||
{log.desc}
|
||||
</Code>
|
||||
</Table.Td>
|
||||
@@ -242,11 +230,12 @@ function AppLogsPage() {
|
||||
)}
|
||||
|
||||
{!isLoading && !error && response?.data?.totalPage > 0 && (
|
||||
<Group justify="center" mt="xl">
|
||||
<Group justify="center">
|
||||
<Pagination
|
||||
value={page}
|
||||
onChange={setPage}
|
||||
total={response.data.totalPage}
|
||||
size="sm"
|
||||
radius="md"
|
||||
withEdges={false}
|
||||
siblings={1}
|
||||
|
||||
Reference in New Issue
Block a user