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

Merge pull request 'amalia/02-apr-26' (#2) from amalia/02-apr-26 into main

Browse Source 
Reviewed-on: #2
This commit is contained in:
amaliadwiy
2026-04-02 17:38:59 +08:00
parent 5136342877 0957a4d271
commit 416c623bec
13 changed files with 339 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/frontend/App.tsx
View File

@@ -4,38 +4,38 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { createRouter, RouterProvider } from '@tanstack/react-router'
import { routeTree } from './routeTree.gen'
const theme = createTheme({
const theme = createTheme({
primaryColor: 'brand-blue',
colors: {
'brand-blue': [
'#ebf2ff',
'#d6e4ff',
'#adc8ff',
'#85acff',
'#5c90ff',
'#2563eb', // Primary Blue
'#1e4fb8',
'#173b85',
'#102752',
'#09131f',
'#f0f9ff',
'#e0f2fe',
'#bae6fd',
'#7dd3fc',
'#38bdf8',
'#0ea5e9', // Primary Blue (Sky)
'#0284c7',
'#0369a1',
'#075985',
'#0c4a6e',
],
'brand-purple': [
'#f3ebff',
'#e7d6ff',
'#cfadff',
'#b785ff',
'#9f5cff',
'#7c3aed', // Primary Purple
'#632eb8',
'#4a2285',
'#311652',
'#180b1f',
'#faf5ff',
'#f3e8ff',
'#e9d5ff',
'#d8b4fe',
'#c084fc',
'#a855f7', // Primary Purple
'#9333ea',
'#7e22ce',
'#6b21a8',
'#581c87',
],
},
fontFamily: 'Inter, system-ui, Avenir, Helvetica, Arial, sans-serif',
headings: {
fontFamily: 'Inter, system-ui, sans-serif',
fontWeight: '600',
fontWeight: '500', // Softer headings
},
})
@@ -59,8 +59,8 @@ declare module '@tanstack/react-router' {
export function App() {
return (
<>
<ColorSchemeScript defaultColorScheme="dark" />
<MantineProvider theme={theme} defaultColorScheme="dark" forceColorScheme="dark">
<ColorSchemeScript defaultColorScheme="auto" />
<MantineProvider theme={theme} defaultColorScheme="auto">
<QueryClientProvider client={queryClient}>
<RouterProvider router={router} />
</QueryClientProvider>

21
src/frontend/components/AppCard.tsx
View File

@@ -1,4 +1,4 @@
import { Card, Group, Text, ThemeIcon, Badge, Avatar, Stack, Button, Progress, Box } from '@mantine/core'
import { Card, Group, Text, ThemeIcon, Badge, Avatar, Stack, Button, Progress, Box, useComputedColorScheme } from '@mantine/core'
import { Link } from '@tanstack/react-router'
import { TbDeviceMobile, TbActivity, TbAlertTriangle, TbChevronRight } from 'react-icons/tb'
@@ -13,6 +13,7 @@ interface AppCardProps {
export function AppCard({ id, name, status, users, errors, version }: AppCardProps) {
const statusColor = status === 'active' ? 'teal' : status === 'warning' ? 'orange' : 'red'
const scheme = useComputedColorScheme('light', { getInitialValueInEffect: true })
return (
<Card
@@ -22,12 +23,12 @@ export function AppCard({ id, name, status, users, errors, version }: AppCardPro
className="premium-card glass"
styles={(theme) => ({
root: {
backgroundColor: 'rgba(30, 41, 59, 0.4)',
borderColor: 'rgba(255,255,255,0.08)',
transition: 'transform 0.2s ease, box-shadow 0.2s ease',
backgroundColor: 'var(--mantine-color-body)',
borderColor: scheme === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.05)',
transition: 'transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease',
'&:hover': {
transform: 'translateY(-4px)',
boxShadow: '0 12px 24px -8px rgba(0, 0, 0, 0.4)',
boxShadow: theme.shadows.md,
borderColor: 'rgba(37, 99, 235, 0.3)',
},
},
@@ -45,7 +46,7 @@ export function AppCard({ id, name, status, users, errors, version }: AppCardPro
</Avatar>
<Stack gap={0}>
<Text fw={700} size="lg" style={{ letterSpacing: '-0.3px' }}>{name}</Text>
<Text size="xs" c="dimmed" fw={600}>BUILD v{version}</Text>
<Text size="xs" c="dimmed" fw={600}>VERSION {version}</Text>
</Stack>
</Group>
<Badge color={statusColor} variant="dot" size="sm">
@@ -53,7 +54,7 @@ export function AppCard({ id, name, status, users, errors, version }: AppCardPro
</Badge>
</Group>
<Stack gap="md" mt="sm">
{/* <Stack gap="md" mt="sm">
<Box>
<Group justify="space-between" mb={6}>
<Group gap="xs">
@@ -69,13 +70,13 @@ export function AppCard({ id, name, status, users, errors, version }: AppCardPro
<Group justify="space-between" mb={6}>
<Group gap="xs">
<TbAlertTriangle size={16} color={errors > 0 ? '#ef4444' : '#64748b'} />
<Text size="xs" fw={700} c="dimmed">HEALTH INCIDENTS</Text>
<Text size="xs" fw={700} c="dimmed">ERROR</Text>
</Group>
<Text size="sm" fw={700} color={errors > 0 ? 'red' : 'dimmed'}>{errors}</Text>
</Group>
<Progress value={errors > 0 ? 30 : 0} size="sm" color="red" radius="xl" />
</Box>
</Stack>
</Stack> */}
<Button
component={Link}
@@ -95,7 +96,7 @@ export function AppCard({ id, name, status, users, errors, version }: AppCardPro
}
}}
>
Center Intelligence
View
</Button>
</Card>
)

36
src/frontend/components/DashboardLayout.tsx
View File

@@ -1,5 +1,6 @@
import { APP_CONFIGS } from '@/frontend/config/appMenus'
import {
ActionIcon,
AppShell,
Avatar,
Box,
@@ -14,6 +15,7 @@ import {
ThemeIcon
} from '@mantine/core'
import { useDisclosure } from '@mantine/hooks'
import { useMantineColorScheme, useComputedColorScheme } from '@mantine/core'
import { Link, useLocation, useMatches, useNavigate, useParams } from '@tanstack/react-router'
import {
TbApps,
@@ -23,7 +25,11 @@ import {
TbDeviceMobile,
TbLogout,
TbSettings,
TbUserCircle
TbUserCircle,
TbSun,
TbMoon,
TbUser,
TbHistory
} from 'react-icons/tb'
interface DashboardLayoutProps {
@@ -31,7 +37,10 @@ interface DashboardLayoutProps {
}
export function DashboardLayout({ children }: DashboardLayoutProps) {
const [opened, { toggle }] = useDisclosure()
const [mobileOpened, { toggle: toggleMobile }] = useDisclosure()
const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true)
const { toggleColorScheme } = useMantineColorScheme()
const computedColorScheme = useComputedColorScheme('light', { getInitialValueInEffect: true })
const location = useLocation()
const navigate = useNavigate()
const { appId } = useParams({ strict: false }) as { appId?: string }
@@ -42,7 +51,8 @@ export function DashboardLayout({ children }: DashboardLayoutProps) {
const globalNav = [
{ label: 'Dashboard', icon: TbDashboard, to: '/dashboard' },
{ label: 'Applications', icon: TbApps, to: '/apps' },
{ label: 'Settings', icon: TbSettings, to: '/settings' },
{ label: 'Log Activity', icon: TbHistory, to: '/logs' },
{ label: 'Users', icon: TbUser, to: '/users' },
]
const activeApp = appId ? APP_CONFIGS[appId] : null
@@ -54,19 +64,21 @@ export function DashboardLayout({ children }: DashboardLayoutProps) {
navbar={{
width: 260,
breakpoint: 'sm',
collapsed: { mobile: !opened },
collapsed: { mobile: !mobileOpened, desktop: !desktopOpened },
}}
padding="xl"
styles={(theme) => ({
main: {
backgroundColor: theme.colors.dark[7], // Dark mode background
backgroundColor: computedColorScheme === 'dark' ? theme.colors.dark[9] : theme.colors.gray[0],
transition: 'background-color 0.2s ease',
},
})}
>
<AppShell.Header px="xl">
<Group h="100%" justify="space-between">
<Group>
<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
<Burger opened={mobileOpened} onClick={toggleMobile} hiddenFrom="sm" size="sm" />
<Burger opened={desktopOpened} onClick={toggleDesktop} visibleFrom="sm" size="sm" />
<Group gap="xs">
<ThemeIcon
size={34}
@@ -88,6 +100,14 @@ export function DashboardLayout({ children }: DashboardLayoutProps) {
</Group>
<Group gap="md">
<ActionIcon
onClick={() => toggleColorScheme()}
variant="default"
size="lg"
aria-label="Toggle color scheme"
>
{computedColorScheme === 'dark' ? <TbSun size={18} /> : <TbMoon size={18} />}
</ActionIcon>
<Menu shadow="md" width={200} position="bottom-end">
<Menu.Target>
<Avatar
@@ -149,7 +169,7 @@ export function DashboardLayout({ children }: DashboardLayoutProps) {
mb={"md"}
variant="filled"
styles={(theme) => ({
input: { border: '1px solid rgba(255,255,255,0.1)' }
input: { border: computedColorScheme === 'dark' ? '1px solid rgba(255,255,255,0.1)' : '1px solid rgba(0,0,0,0.1)' }
})}
/>
}
@@ -198,7 +218,7 @@ export function DashboardLayout({ children }: DashboardLayoutProps) {
<Box
p="md"
className="glass"
style={{ borderRadius: '12px', border: '1px solid rgba(255,255,255,0.05)' }}
style={{ borderRadius: '12px', border: computedColorScheme === 'dark' ? '1px solid rgba(255,255,255,0.05)' : '1px solid rgba(0,0,0,0.05)' }}
>
<Text size="xs" c="dimmed" fw={600} mb="xs">SYSTEM STATUS</Text>
<Group gap="xs">

3
src/frontend/components/ErrorDataTable.tsx
View File

@@ -15,6 +15,7 @@ import {
} from '@mantine/core'
import { useDisclosure } from '@mantine/hooks'
import { useState } from 'react'
import { Link } from '@tanstack/react-router'
import { TbMessageReport, TbHistory, TbExternalLink, TbBug } from 'react-icons/tb'
const mockErrors = [
@@ -85,7 +86,7 @@ export function ErrorDataTable() {
</ThemeIcon>
<Text fw={700}>LATEST ERROR REPORTS</Text>
</Group>
<Button variant="subtle" size="compact-xs" color="blue" rightSection={<TbExternalLink size={14} />}>
<Button component={Link} to='/apps/desa-plus/errors' variant="subtle" size="compact-xs" color="blue" rightSection={<TbExternalLink size={14} />}>
View All Reports
</Button>
</Group>

4
src/frontend/components/StatsCard.tsx
View File

@@ -22,8 +22,8 @@ export function StatsCard({ title, value, description, icon: Icon, color, trend
className="premium-card"
styles={(theme) => ({
root: {
backgroundColor: theme.colors.dark[6],
borderColor: 'rgba(255,255,255,0.05)',
backgroundColor: 'var(--mantine-color-body)',
borderColor: 'rgba(128,128,128,0.1)',
},
})}
>

14
src/frontend/components/SummaryCard.tsx
View File

@@ -1,4 +1,4 @@
import { Card, Group, Text, ThemeIcon, Stack, Progress, Badge } from '@mantine/core'
import { Card, Group, Text, ThemeIcon, Stack, Progress, Badge, useComputedColorScheme } from '@mantine/core'
import { IconType } from 'react-icons'
import { TbTrendingUp, TbTrendingDown } from 'react-icons/tb'
@@ -27,6 +27,8 @@ export function SummaryCard({
progress,
isError
}: SummaryCardProps) {
const scheme = useComputedColorScheme('light', { getInitialValueInEffect: true })
return (
<Card
withBorder
@@ -35,9 +37,13 @@ export function SummaryCard({
className="glass"
styles={(theme) => ({
root: {
backgroundColor: isError && Number(value) > 0 ? 'rgba(239, 68, 68, 0.05)' : 'rgba(30, 41, 59, 0.4)',
borderColor: isError && Number(value) > 10 ? 'rgba(239, 68, 68, 0.3)' : 'rgba(255, 255, 255, 0.08)',
transition: 'transform 0.2s ease',
backgroundColor: isError && Number(value) > 0
? (scheme === 'dark' ? 'rgba(239, 68, 68, 0.1)' : 'rgba(255, 241, 242, 1)') // light pink for error in light mode
: 'var(--mantine-color-body)',
borderColor: isError && Number(value) > 10
? 'rgba(239, 68, 68, 0.3)'
: scheme === 'dark' ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.05)',
transition: 'transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease',
'&:hover': {
transform: 'translateY(-4px)',
}

4
src/frontend/config/appMenus.ts
View File

@@ -1,5 +1,5 @@
import { IconType } from 'react-icons'
import { TbChartBar, TbHistory, TbAlertTriangle, TbSettings, TbShoppingCart, TbPackage, TbCreditCard } from 'react-icons/tb'
import { TbChartBar, TbHistory, TbAlertTriangle, TbSettings, TbShoppingCart, TbPackage, TbCreditCard, TbBuilding } from 'react-icons/tb'
export interface MenuItem {
value: string
@@ -22,7 +22,7 @@ export const APP_CONFIGS: Record<string, AppConfig> = {
{ value: 'overview', label: 'Overview', icon: TbChartBar, to: '/apps/desa-plus' },
{ value: 'logs', label: 'Log Activity', icon: TbHistory, to: '/apps/desa-plus/logs' },
{ value: 'errors', label: 'Error Reports', icon: TbAlertTriangle, to: '/apps/desa-plus/errors' },
{ value: 'manage', label: 'Manage', icon: TbSettings, to: '/apps/desa-plus/manage' },
{ value: 'villages', label: 'Villages', icon: TbBuilding, to: '/apps/desa-plus/villages' },
],
},
'e-commerce': {

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

@@ -1,36 +1,22 @@
import { VillageActivityLineChart, VillageComparisonBarChart } from '@/frontend/components/DashboardCharts'
import { ErrorDataTable } from '@/frontend/components/ErrorDataTable'
import { SummaryCard } from '@/frontend/components/SummaryCard'
import {
Badge,
Button,
Card,
ActionIcon,
Group,
SimpleGrid,
Stack,
Text,
Title,
Paper,
Box,
ThemeIcon,
Select,
ActionIcon,
Container,
Divider,
Title
} from '@mantine/core'
import { createFileRoute, Link, useParams } from '@tanstack/react-router'
import { createFileRoute, useParams } from '@tanstack/react-router'
import {
TbUsers,
TbActivity,
TbRefresh,
TbAlertTriangle,
TbCalendar,
TbFilter,
TbChevronRight,
TbArrowUpRight,
TbBuildingCommunity,
TbRefresh,
TbVersions
} from 'react-icons/tb'
import { SummaryCard } from '@/frontend/components/SummaryCard'
import { VillageActivityLineChart, VillageComparisonBarChart } from '@/frontend/components/DashboardCharts'
import { ErrorDataTable } from '@/frontend/components/ErrorDataTable'
export const Route = createFileRoute('/apps/$appId/')({
component: AppOverviewPage,
@@ -43,41 +29,36 @@ function AppOverviewPage() {
return (
<Stack gap="xl">
{/* 🔝 HEADER SECTION */}
<Paper withBorder p="lg" radius="2xl" className="glass">
{/* <Paper withBorder p="lg" radius="2xl" className="glass"> */}
<Group justify="space-between">
<Stack gap={0}>
<Title order={2} className="gradient-text" style={{ fontSize: '1.8rem' }}>Overview</Title>
<Group gap="xs" mt={4}>
<Badge variant="light" size="lg" radius="sm" color="brand-blue" leftSection={<TbBuildingCommunity size={14} />}>
APP: {isDesaPlus ? 'DESA+' : appId.toUpperCase()}
</Badge>
<Text size="xs" c="dimmed" fw={600}>LAST UPDATED: JUST NOW</Text>
</Group>
<Title order={3}>Overview</Title>
<Text size="sm" c="dimmed">Last updated: Just now</Text>
</Stack>
<Group gap="md">
<Select
{/* <Select
placeholder="Date Range"
data={['Today', '7 Days', '30 Days']}
defaultValue="Today"
leftSection={<TbCalendar size={16} />}
radius="md"
w={140}
/>
/> */}
<ActionIcon variant="light" color="brand-blue" size="lg" radius="md">
<TbRefresh size={20} />
</ActionIcon>
<Button
{/* <Button
variant="gradient"
gradient={{ from: '#2563EB', to: '#7C3AED' }}
radius="md"
leftSection={<TbFilter size={18} />}
>
Add Filter
</Button>
</Button> */}
</Group>
</Group>
</Paper>
{/* </Paper> */}
{/* 📊 1. SUMMARY CARDS */}
<SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }} spacing="lg">
@@ -86,7 +67,6 @@ function AppOverviewPage() {
value="v1.2.0"
icon={TbVersions}
color="brand-blue"
progress={{ value: 92, label: 'User Adoption' }}
/>
<SummaryCard
title="Total Activity Today"
@@ -100,7 +80,6 @@ function AppOverviewPage() {
value="138"
icon={TbBuildingCommunity}
color="indigo"
progress={{ value: 98, label: 'Integration Health' }}
/>
<SummaryCard
title="Errors Today"

7
src/frontend/routes/apps.$appId.tsx
View File

@@ -2,6 +2,7 @@ import { DashboardLayout } from '@/frontend/components/DashboardLayout'
import {
Box,
Container,
Divider,
Group,
Stack,
Text,
@@ -27,7 +28,7 @@ function AppDetailLayout() {
return (
<DashboardLayout>
<Container size="xl" py="lg">
<Stack gap="xl">
<Stack gap="md">
<Group justify="space-between" align="flex-end">
<Stack gap={4}>
<Title order={1} className="gradient-text" style={{ fontSize: '2.5rem' }}>{appName}</Title>
@@ -35,7 +36,9 @@ function AppDetailLayout() {
</Stack>
</Group>
<Box mt="md">
<Divider />
<Box>
<Outlet />
</Box>
</Stack>

6
src/frontend/routes/apps.$appId.manage.tsx → src/frontend/routes/apps.$appId.villages.tsx
View File

@@ -34,8 +34,8 @@ import {
} from 'react-icons/tb'
import { StatsCard } from '@/frontend/components/StatsCard'
export const Route = createFileRoute('/apps/$appId/manage')({
component: AppManagePage,
export const Route = createFileRoute('/apps/$appId/villages')({
component: AppVillagesPage,
})
const mockDevelopers = [
@@ -45,7 +45,7 @@ const mockDevelopers = [
{ value: 'rahmat', label: 'Rahmat Hidayat', avatar: null },
]
function AppManagePage() {
function AppVillagesPage() {
const { appId } = useParams({ from: '/apps/$appId' })
const [initModalOpened, { open: openInit, close: closeInit }] = useDisclosure(false)
const [assignModalOpened, { open: openAssign, close: closeAssign }] = useDisclosure(false)

214
src/frontend/routes/logs.tsx Normal file
View File

@@ -0,0 +1,214 @@
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>
)
}

8
src/frontend/routes/settings.tsx → src/frontend/routes/users.tsx
View File

@@ -35,8 +35,8 @@ import {
import { DashboardLayout } from '@/frontend/components/DashboardLayout'
import { StatsCard } from '@/frontend/components/StatsCard'
export const Route = createFileRoute('/settings')({
component: SettingsPage,
export const Route = createFileRoute('/users')({
component: UsersPage,
})
const mockUsers = [
@@ -67,14 +67,14 @@ const roles = [
},
]
function SettingsPage() {
function UsersPage() {
return (
<DashboardLayout>
<Container size="xl" py="lg">
<Stack gap="xl">
<Group justify="space-between" align="center">
<Stack gap={0}>
<Title order={2} className="gradient-text">Settings</Title>
<Title order={2} className="gradient-text">Users</Title>
<Text size="sm" c="dimmed">Manage system users, security roles, and application access control.</Text>
</Stack>
</Group>

8
src/index.css
View File

@@ -27,8 +27,8 @@ html, body {
height: 100%;
width: 100%;
font-family: var(--font-inter);
background-color: var(--bg-dark); /* Default to Dark Mode as per App.tsx */
color: #F8FAFC;
/* background-color handled by Mantine */
color: var(--mantine-color-text);
}
body {
@@ -53,9 +53,9 @@ body {
/* Premium Dashboard Utilities */
.glass {
background: rgba(30, 41, 59, 0.7);
background: var(--mantine-color-default);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
border: 1px solid rgba(128, 128, 128, 0.1);
border-radius: 24px; /* XL rounding for cards */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}