215 lines
9.4 KiB
TypeScript
215 lines
9.4 KiB
TypeScript
import {
|
|
Badge,
|
|
Container,
|
|
Group,
|
|
Stack,
|
|
Text,
|
|
Paper,
|
|
TextInput,
|
|
Select,
|
|
Avatar,
|
|
Box,
|
|
Divider,
|
|
} from '@mantine/core'
|
|
import { useState, useMemo } from 'react'
|
|
import { createFileRoute } from '@tanstack/react-router'
|
|
import { TbSearch, TbClock, TbCheck, TbX } from 'react-icons/tb'
|
|
import { DashboardLayout } from '@/frontend/components/DashboardLayout'
|
|
|
|
export const Route = createFileRoute('/logs')({
|
|
component: GlobalLogsPage,
|
|
})
|
|
|
|
const timelineData = [
|
|
{
|
|
date: 'TODAY',
|
|
logs: [
|
|
{ id: 1, time: '12:12 PM', operator: 'Budi Santoso', app: 'Desa+', color: 'blue', content: <>generated document <Badge variant="light" color="gray" radius="sm">Surat Domisili</Badge> for <Badge variant="light" color="blue" radius="sm">Sukatani</Badge></> },
|
|
{ id: 2, time: '11:42 AM', operator: 'Siti Aminah', app: 'Desa+', color: 'teal', content: <>uploaded financial report <Badge variant="light" color="gray" radius="sm">Realisasi Q1</Badge> for <Badge variant="light" color="teal" radius="sm">Sukamaju</Badge></> },
|
|
{ id: 3, time: '10:12 AM', operator: 'System', app: 'Desa+', color: 'red', icon: TbX, content: <>experienced failure in <Badge variant="light" color="violet" radius="sm">SIAK Sync</Badge> at <Badge variant="light" color="red" radius="sm" leftSection={<TbX size={12}/>}>Cikini</Badge></>, message: { title: 'Sync Operation Failed (NullPointerException)', text: 'NullPointerException at village_sync.dart:45. The server returned a timeout error while waiting for the master database replica connection. Auto-retry scheduled in 15 minutes.' } },
|
|
{ id: 4, time: '09:42 AM', operator: 'Jane Smith', app: 'E-Commerce', color: 'orange', icon: TbCheck, content: <>resolved payment gateway issue for <Badge variant="light" color="orange" radius="sm">E-Commerce</Badge> checkout</> },
|
|
]
|
|
},
|
|
{
|
|
date: 'YESTERDAY',
|
|
logs: [
|
|
{ id: 5, time: '05:10 AM', operator: 'System', app: 'System', color: 'cyan', content: <>completed automated <Badge variant="light" color="cyan" radius="sm">Nightly Backup</Badge> for all 138 villages</> },
|
|
{ id: 6, time: '04:50 AM', operator: 'Rahmat Hidayat', app: 'Desa+', color: 'green', content: <>granted Admin access to <Text component="span" fw={600}>Desa Bojong Gede</Text> operator</> },
|
|
{ id: 7, time: '03:42 AM', operator: 'System', app: 'Fitness App', color: 'red', icon: TbX, content: <>detected SocketException across <Badge variant="light" color="violet" radius="sm">Fitness App</Badge> wearable sync operations.</> },
|
|
{ id: 8, time: '02:33 AM', operator: 'Agus Setiawan', app: 'Desa+', color: 'blue', content: <>verified 145 <Badge variant="light" color="gray" radius="sm">Surat Kematian</Badge> entries in batch.</> },
|
|
]
|
|
},
|
|
{
|
|
date: '12 APRIL, 2026',
|
|
logs: [
|
|
{ id: 9, time: '03:42 AM', operator: 'Amel', app: 'Desa+', color: 'indigo', content: <>changed version configurations rolling out <Badge variant="light" color="gray" radius="sm">Desa+ v2.4.1</Badge></> },
|
|
{ id: 10, time: '02:10 AM', operator: 'John Doe', app: 'E-Commerce', color: 'pink', content: <>updated App setting <Badge variant="light" color="gray" radius="sm">Require OTP on Login</Badge> <Text component="span" c="violet" fw={600} size="sm" style={{ cursor: 'pointer' }}>View Details</Text></> },
|
|
]
|
|
}
|
|
]
|
|
|
|
function GlobalLogsPage() {
|
|
const [search, setSearch] = useState('')
|
|
const [appFilter, setAppFilter] = useState<string | null>(null)
|
|
const [operatorFilter, setOperatorFilter] = useState<string | null>(null)
|
|
|
|
const filteredTimeline = useMemo(() => {
|
|
return timelineData
|
|
.map(group => {
|
|
const filteredLogs = group.logs.filter(log => {
|
|
if (appFilter && log.app !== appFilter) return false;
|
|
if (operatorFilter && log.operator !== operatorFilter) return false;
|
|
if (search) {
|
|
const lSearch = search.toLowerCase();
|
|
if (!log.operator.toLowerCase().includes(lSearch) && !log.app.toLowerCase().includes(lSearch)) {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
});
|
|
return { ...group, logs: filteredLogs };
|
|
})
|
|
.filter(group => group.logs.length > 0);
|
|
}, [search, appFilter, operatorFilter]);
|
|
|
|
return (
|
|
<DashboardLayout>
|
|
<Container size="xl" py="lg">
|
|
|
|
{/* Header Controls */}
|
|
<Group mb="xl" gap="md">
|
|
<TextInput
|
|
placeholder="Search operator or app..."
|
|
leftSection={<TbSearch size={16} />}
|
|
radius="md"
|
|
w={220}
|
|
value={search}
|
|
onChange={(e) => setSearch(e.currentTarget.value)}
|
|
/>
|
|
<Select
|
|
placeholder="All Applications"
|
|
data={['Desa+', 'E-Commerce', 'Fitness App', 'System']}
|
|
radius="md"
|
|
w={160}
|
|
clearable
|
|
value={appFilter}
|
|
onChange={setAppFilter}
|
|
/>
|
|
<Select
|
|
placeholder="All Operators"
|
|
data={['Agus Setiawan', 'Amel', 'Budi Santoso', 'Jane Smith', 'John Doe', 'Rahmat Hidayat', 'Siti Aminah', 'System']}
|
|
radius="md"
|
|
w={160}
|
|
clearable
|
|
value={operatorFilter}
|
|
onChange={setOperatorFilter}
|
|
/>
|
|
</Group>
|
|
|
|
{/* Timeline Content */}
|
|
<Paper withBorder p="xl" radius="2xl" className="glass" style={{ background: 'var(--mantine-color-body)' }}>
|
|
{filteredTimeline.length === 0 ? (
|
|
<Text c="dimmed" ta="center" py="xl">No logs found matching your filters.</Text>
|
|
) : filteredTimeline.map((group, groupIndex) => (
|
|
<Box key={group.date}>
|
|
<Text
|
|
size="xs"
|
|
fw={700}
|
|
c="dimmed"
|
|
mt={groupIndex > 0 ? "xl" : 0}
|
|
mb="lg"
|
|
style={{ textTransform: 'uppercase' }}
|
|
>
|
|
{group.date}
|
|
</Text>
|
|
|
|
<Stack gap={0} pl={4}>
|
|
{group.logs.map((log, logIndex) => {
|
|
const isLastLog = logIndex === group.logs.length - 1;
|
|
|
|
return (
|
|
<Group
|
|
key={log.id}
|
|
wrap="nowrap"
|
|
align="flex-start"
|
|
gap="lg"
|
|
style={{ position: 'relative', paddingBottom: isLastLog ? 0 : 32 }}
|
|
>
|
|
{/* Left: Time */}
|
|
<Text
|
|
size="xs"
|
|
c="dimmed"
|
|
w={70}
|
|
style={{ flexShrink: 0, marginTop: 4, textAlign: 'left' }}
|
|
>
|
|
{log.time}
|
|
</Text>
|
|
|
|
{/* Middle: Line & Avatar */}
|
|
<Box style={{ position: 'relative', width: 20, flexShrink: 0, alignSelf: 'stretch' }}>
|
|
{/* Vertical Line */}
|
|
{!isLastLog && (
|
|
<Box
|
|
style={{
|
|
position: 'absolute',
|
|
top: 24,
|
|
bottom: -8,
|
|
left: '50%',
|
|
transform: 'translateX(-50%)',
|
|
width: 1,
|
|
backgroundColor: 'rgba(128,128,128,0.2)'
|
|
}}
|
|
/>
|
|
)}
|
|
{/* Avatar */}
|
|
<Box style={{ position: 'relative', zIndex: 2 }}>
|
|
{log.icon ? (
|
|
<Avatar size={24} radius="xl" color={log.color} variant="light">
|
|
<log.icon size={14} />
|
|
</Avatar>
|
|
) : (
|
|
<Avatar size={24} radius="xl" color={log.color}>
|
|
{log.operator.charAt(0)}
|
|
</Avatar>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Right: Content */}
|
|
<Box style={{ flexGrow: 1, marginTop: 2 }}>
|
|
<Text size="sm">
|
|
<Text component="span" fw={600} mr={4}>{log.operator}</Text>
|
|
{log.content}
|
|
</Text>
|
|
|
|
{log.message && (
|
|
<Paper
|
|
withBorder
|
|
p="md"
|
|
radius="md"
|
|
mt="sm"
|
|
style={{ maxWidth: 800, backgroundColor: 'transparent' }}
|
|
>
|
|
<Text size="sm" fw={600} mb={4}>{log.message.title}</Text>
|
|
<Text size="sm" c="dimmed">
|
|
{log.message.text}
|
|
</Text>
|
|
</Paper>
|
|
)}
|
|
</Box>
|
|
</Group>
|
|
)
|
|
})}
|
|
</Stack>
|
|
|
|
{groupIndex < timelineData.length - 1 && (
|
|
<Divider my="xl" color="rgba(128,128,128,0.1)" />
|
|
)}
|
|
</Box>
|
|
))}
|
|
</Paper>
|
|
</Container>
|
|
</DashboardLayout>
|
|
)
|
|
}
|