upd: user dan log activity
This commit is contained in:
@@ -10,67 +10,119 @@ import {
|
||||
Avatar,
|
||||
Box,
|
||||
Divider,
|
||||
Pagination,
|
||||
Center,
|
||||
Tooltip,
|
||||
} from '@mantine/core'
|
||||
import { useState, useMemo } from 'react'
|
||||
import { useState, useMemo, useEffect } from 'react'
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import { TbSearch, TbClock, TbCheck, TbX } from 'react-icons/tb'
|
||||
import { DashboardLayout } from '@/frontend/components/DashboardLayout'
|
||||
import useSWR from 'swr'
|
||||
import { API_URLS } from '../config/api'
|
||||
|
||||
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></> },
|
||||
]
|
||||
}
|
||||
]
|
||||
const fetcher = (url: string) => fetch(url).then((res) => res.json())
|
||||
|
||||
const typeConfig: Record<string, { color: string; icon?: any }> = {
|
||||
CREATE: { color: 'blue', icon: TbCheck },
|
||||
UPDATE: { color: 'teal', icon: TbCheck },
|
||||
DELETE: { color: 'red', icon: TbX },
|
||||
LOGIN: { color: 'green', icon: TbClock },
|
||||
LOGOUT: { color: 'orange', icon: TbClock },
|
||||
}
|
||||
|
||||
const getRoleColor = (role: string) => {
|
||||
const r = (role || '').toLowerCase()
|
||||
if (r.includes('super')) return 'red'
|
||||
if (r.includes('admin')) return 'brand-blue'
|
||||
if (r.includes('developer')) return 'violet'
|
||||
return 'gray'
|
||||
}
|
||||
|
||||
function groupLogsByDate(logs: any[]) {
|
||||
const groups: Record<string, any[]> = {}
|
||||
|
||||
const today = new Date().toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' }).toUpperCase()
|
||||
const yesterday = new Date(Date.now() - 86400000).toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' }).toUpperCase()
|
||||
|
||||
logs.forEach(log => {
|
||||
const dateObj = new Date(log.createdAt)
|
||||
let dateStr = dateObj.toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' }).toUpperCase()
|
||||
|
||||
if (dateStr === today) dateStr = 'TODAY'
|
||||
else if (dateStr === yesterday) dateStr = 'YESTERDAY'
|
||||
|
||||
if (!groups[dateStr]) groups[dateStr] = []
|
||||
|
||||
const timeStr = dateObj.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })
|
||||
|
||||
groups[dateStr].push({
|
||||
id: log.id,
|
||||
time: timeStr,
|
||||
user: log.user,
|
||||
type: log.type,
|
||||
content: log.message,
|
||||
color: log.user ? getRoleColor(log.user.role) : 'gray',
|
||||
icon: typeConfig[log.type as string]?.icon
|
||||
})
|
||||
})
|
||||
|
||||
// We want to keep the order as they came from the API (sorted by createdAt desc)
|
||||
// but grouped by date. Object.entries might mess up the order if dates are not sequential.
|
||||
// However, since the source logs are sorted, the first encounter of a date defines the group order.
|
||||
const result: { date: string; logs: any[] }[] = []
|
||||
const seenDates = new Set<string>()
|
||||
|
||||
logs.forEach(log => {
|
||||
const dateObj = new Date(log.createdAt)
|
||||
let dateStr = dateObj.toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' }).toUpperCase()
|
||||
if (dateStr === today) dateStr = 'TODAY'
|
||||
else if (dateStr === yesterday) dateStr = 'YESTERDAY'
|
||||
|
||||
if (!seenDates.has(dateStr)) {
|
||||
result.push({ date: dateStr, logs: groups[dateStr] })
|
||||
seenDates.add(dateStr)
|
||||
}
|
||||
})
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
function GlobalLogsPage() {
|
||||
const [search, setSearch] = useState('')
|
||||
const [appFilter, setAppFilter] = useState<string | null>(null)
|
||||
const [operatorFilter, setOperatorFilter] = useState<string | null>(null)
|
||||
const [debouncedSearch, setDebouncedSearch] = useState('')
|
||||
const [logType, setLogType] = useState<string | null>('all')
|
||||
const [operatorId, setOperatorId] = useState<string | null>('all')
|
||||
const [page, setPage] = useState(1)
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => setDebouncedSearch(search), 300)
|
||||
return () => clearTimeout(timer)
|
||||
}, [search])
|
||||
|
||||
const { data: operatorsData } = useSWR(API_URLS.getLogOperators(), fetcher)
|
||||
|
||||
const operatorOptions = useMemo(() => {
|
||||
if (!operatorsData || !Array.isArray(operatorsData)) return [{ value: 'all', label: 'All Operators' }]
|
||||
return [
|
||||
{ value: 'all', label: 'All Operators' },
|
||||
...operatorsData.map((op: any) => ({ value: op.id, label: op.name }))
|
||||
]
|
||||
}, [operatorsData])
|
||||
|
||||
const { data: response, isLoading } = useSWR(
|
||||
API_URLS.getGlobalLogs(page, debouncedSearch, logType || 'all', operatorId || 'all'),
|
||||
fetcher
|
||||
)
|
||||
|
||||
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]);
|
||||
if (!response?.data) return []
|
||||
return groupLogsByDate(response.data)
|
||||
}, [response?.data])
|
||||
|
||||
return (
|
||||
<DashboardLayout>
|
||||
@@ -79,134 +131,156 @@ function GlobalLogsPage() {
|
||||
{/* Header Controls */}
|
||||
<Group mb="xl" gap="md">
|
||||
<TextInput
|
||||
placeholder="Search operator or app..."
|
||||
placeholder="Search operator or message..."
|
||||
leftSection={<TbSearch size={16} />}
|
||||
radius="md"
|
||||
w={220}
|
||||
w={250}
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.currentTarget.value)}
|
||||
onChange={(e) => {
|
||||
setSearch(e.currentTarget.value)
|
||||
setPage(1)
|
||||
}}
|
||||
/>
|
||||
<Select
|
||||
placeholder="All Applications"
|
||||
data={['Desa+', 'E-Commerce', 'Fitness App', 'System']}
|
||||
placeholder="Log Type"
|
||||
data={[
|
||||
{ value: 'all', label: 'All Types' },
|
||||
{ value: 'CREATE', label: 'Create' },
|
||||
{ value: 'UPDATE', label: 'Update' },
|
||||
{ value: 'DELETE', label: 'Delete' },
|
||||
{ value: 'LOGIN', label: 'Login' },
|
||||
{ value: 'LOGOUT', label: 'Logout' },
|
||||
]}
|
||||
radius="md"
|
||||
w={160}
|
||||
clearable
|
||||
value={appFilter}
|
||||
onChange={setAppFilter}
|
||||
value={logType}
|
||||
onChange={(val) => {
|
||||
setLogType(val)
|
||||
setPage(1)
|
||||
}}
|
||||
/>
|
||||
<Select
|
||||
placeholder="All Operators"
|
||||
data={['Agus Setiawan', 'Amel', 'Budi Santoso', 'Jane Smith', 'John Doe', 'Rahmat Hidayat', 'Siti Aminah', 'System']}
|
||||
placeholder="Operator"
|
||||
data={operatorOptions}
|
||||
searchable
|
||||
radius="md"
|
||||
w={160}
|
||||
clearable
|
||||
value={operatorFilter}
|
||||
onChange={setOperatorFilter}
|
||||
w={200}
|
||||
value={operatorId}
|
||||
onChange={(val) => {
|
||||
setOperatorId(val)
|
||||
setPage(1)
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
|
||||
{/* Timeline Content */}
|
||||
<Paper withBorder p="xl" radius="2xl" className="glass" style={{ background: 'var(--mantine-color-body)' }}>
|
||||
{filteredTimeline.length === 0 ? (
|
||||
<Paper withBorder p="xl" radius="2xl" className="glass" style={{ background: 'var(--mantine-color-body)', minHeight: 400 }}>
|
||||
{isLoading ? (
|
||||
<Center py="xl">
|
||||
<Text c="dimmed">Loading logs...</Text>
|
||||
</Center>
|
||||
) : 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;
|
||||
) : (
|
||||
<>
|
||||
{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>
|
||||
|
||||
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' }}
|
||||
<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' }}
|
||||
>
|
||||
<Text size="sm" fw={600} mb={4}>{log.message.title}</Text>
|
||||
<Text size="sm" c="dimmed">
|
||||
{log.message.text}
|
||||
{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 }}>
|
||||
<Tooltip label={`${log.user?.name || 'Unknown'} (${log.user?.role || 'User'})`} withArrow radius="md">
|
||||
<Avatar
|
||||
size={24}
|
||||
radius="xl"
|
||||
color={log.color}
|
||||
variant="light"
|
||||
src={log.user?.image}
|
||||
style={{ cursor: 'help' }}
|
||||
>
|
||||
{log.icon ? <log.icon size={14} /> : (log.user?.name?.charAt(0) || '?')}
|
||||
</Avatar>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Right: Content */}
|
||||
<Box style={{ flexGrow: 1, marginTop: 2 }}>
|
||||
<Text size="sm">
|
||||
<Text component="span" fw={600} mr={4}>{log.user?.name || 'Unknown'}</Text>
|
||||
{log.content}
|
||||
</Text>
|
||||
</Paper>
|
||||
)}
|
||||
</Box>
|
||||
</Group>
|
||||
)
|
||||
})}
|
||||
</Stack>
|
||||
|
||||
{groupIndex < timelineData.length - 1 && (
|
||||
<Divider my="xl" color="rgba(128,128,128,0.1)" />
|
||||
</Box>
|
||||
</Group>
|
||||
)
|
||||
})}
|
||||
</Stack>
|
||||
|
||||
{groupIndex < filteredTimeline.length - 1 && (
|
||||
<Divider my="xl" color="rgba(128,128,128,0.1)" />
|
||||
)}
|
||||
</Box>
|
||||
))}
|
||||
|
||||
{response?.totalPages > 1 && (
|
||||
<Center mt="xl">
|
||||
<Pagination
|
||||
total={response.totalPages}
|
||||
value={page}
|
||||
onChange={setPage}
|
||||
radius="md"
|
||||
/>
|
||||
</Center>
|
||||
)}
|
||||
</Box>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</Paper>
|
||||
</Container>
|
||||
</DashboardLayout>
|
||||
|
||||
Reference in New Issue
Block a user