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:
84
index.html
84
index.html
@@ -4,9 +4,10 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="color-scheme" content="dark" />
|
||||
<meta name="description" content="Monitoring System — real-time dashboard for your applications" />
|
||||
<base href="/" />
|
||||
<link rel="icon" type="image/svg+xml" href="/src/logo.svg" />
|
||||
<title>My App</title>
|
||||
<title>Monitoring System</title>
|
||||
<style>
|
||||
/* Prevent white flash — dark background immediately */
|
||||
html, body {
|
||||
@@ -25,7 +26,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #242424;
|
||||
transition: opacity 0.3s ease;
|
||||
transition: opacity 0.4s ease;
|
||||
}
|
||||
#splash.fade-out {
|
||||
opacity: 0;
|
||||
@@ -35,32 +36,79 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
gap: 18px;
|
||||
}
|
||||
.splash-spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 3px solid #3a3a3a;
|
||||
border-top-color: #339af0;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
.splash-logo {
|
||||
animation: logo-breathe 2.4s ease-in-out infinite;
|
||||
}
|
||||
.splash-text {
|
||||
.splash-logo svg {
|
||||
display: block;
|
||||
border-radius: 14px;
|
||||
filter: drop-shadow(0 8px 24px rgba(37, 99, 235, 0.45));
|
||||
}
|
||||
.splash-title {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color: #909296;
|
||||
letter-spacing: 0.5px;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.3px;
|
||||
background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
.splash-dots {
|
||||
display: flex;
|
||||
gap: 7px;
|
||||
align-items: center;
|
||||
}
|
||||
.splash-dots span {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #2563EB, #7C3AED);
|
||||
animation: dot-pulse 1.2s ease-in-out infinite;
|
||||
}
|
||||
.splash-dots span:nth-child(2) { animation-delay: 0.2s; }
|
||||
.splash-dots span:nth-child(3) { animation-delay: 0.4s; }
|
||||
|
||||
@keyframes logo-breathe {
|
||||
0%, 100% { transform: scale(1); opacity: 1; }
|
||||
50% { transform: scale(1.05); opacity: 0.9; }
|
||||
}
|
||||
@keyframes dot-pulse {
|
||||
0%, 80%, 100% { transform: scale(0.5); opacity: 0.25; }
|
||||
40% { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="splash">
|
||||
<div class="splash-content">
|
||||
<div class="splash-spinner"></div>
|
||||
<div class="splash-text">Loading...</div>
|
||||
<div class="splash-logo">
|
||||
<svg width="64" height="64" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="sl" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#2563EB"/>
|
||||
<stop offset="1" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="32" height="32" rx="7" fill="url(#sl)"/>
|
||||
<polyline
|
||||
points="3,16 9,16 12,8 16,24 19,16 29,16"
|
||||
stroke="white"
|
||||
stroke-width="2.2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
fill="none"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="splash-title">Monitoring System</div>
|
||||
<div class="splash-dots">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="root"></div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { Avatar, Button, Card, Group, Stack, Text, useComputedColorScheme } from '@mantine/core'
|
||||
import { Avatar, Badge, Button, Card, Group, Stack, Text, useComputedColorScheme } from '@mantine/core'
|
||||
import { Link } from '@tanstack/react-router'
|
||||
import { TbChevronRight, TbDeviceMobile } from 'react-icons/tb'
|
||||
import { TbAlertTriangle, TbChevronRight, TbDeviceMobile } from 'react-icons/tb'
|
||||
|
||||
interface AppCardProps {
|
||||
id: string
|
||||
@@ -12,8 +12,9 @@ interface AppCardProps {
|
||||
maintenance?: boolean
|
||||
}
|
||||
|
||||
export function AppCard({ id, name, status, errors, version }: AppCardProps) {
|
||||
const statusColor = status === 'active' ? 'teal' : status === 'warning' ? 'orange' : 'red'
|
||||
export function AppCard({ id, name, status, errors, version, maintenance }: AppCardProps) {
|
||||
const statusColor = maintenance ? 'gray' : status === 'active' ? 'teal' : status === 'warning' ? 'orange' : 'red'
|
||||
const statusLabel = maintenance ? 'Maintenance' : status === 'active' ? 'Active' : status === 'warning' ? 'Warning' : 'Error'
|
||||
const scheme = useComputedColorScheme('light', { getInitialValueInEffect: true })
|
||||
|
||||
return (
|
||||
@@ -35,7 +36,7 @@ export function AppCard({ id, name, status, errors, version }: AppCardProps) {
|
||||
},
|
||||
})}
|
||||
>
|
||||
<Group justify="space-between" mb="lg">
|
||||
<Group justify="space-between" mb="md">
|
||||
<Group gap="md">
|
||||
<Avatar
|
||||
variant="gradient"
|
||||
@@ -45,39 +46,27 @@ export function AppCard({ id, name, status, errors, version }: AppCardProps) {
|
||||
>
|
||||
<TbDeviceMobile size={26} />
|
||||
</Avatar>
|
||||
<Stack gap={0}>
|
||||
<Stack gap={2}>
|
||||
<Text fw={700} size="lg" style={{ letterSpacing: '-0.3px' }}>{name}</Text>
|
||||
{/* <Text size="xs" c="dimmed" fw={600}>VERSION {version}</Text> */}
|
||||
{/* <Text size="xs" c="dimmed" fw={600} tt="uppercase">v{version}</Text> */}
|
||||
</Stack>
|
||||
</Group>
|
||||
{/* <Badge color={statusColor} variant="dot" size="sm">
|
||||
{status.toUpperCase()}
|
||||
</Badge> */}
|
||||
<Badge color={statusColor} variant="dot" size="sm">
|
||||
{statusLabel}
|
||||
</Badge>
|
||||
</Group>
|
||||
|
||||
{/* <Stack gap="md" mt="sm">
|
||||
<Box>
|
||||
<Group justify="space-between" mb={6}>
|
||||
<Group gap="xs">
|
||||
<TbActivity size={16} color="#2563EB" />
|
||||
<Text size="xs" fw={700} c="dimmed">USER ADOPTION</Text>
|
||||
<Group justify="space-between" align="center" mb="xs">
|
||||
<Text size="xs" c="dimmed" fw={500}>Open Errors</Text>
|
||||
<Badge
|
||||
color={errors > 0 ? 'red' : 'teal'}
|
||||
variant="light"
|
||||
size="sm"
|
||||
leftSection={errors > 0 ? <TbAlertTriangle size={10} /> : undefined}
|
||||
>
|
||||
{errors > 0 ? errors : 'None'}
|
||||
</Badge>
|
||||
</Group>
|
||||
<Text size="sm" fw={700}>{users.toLocaleString()}</Text>
|
||||
</Group>
|
||||
<Progress value={85} size="sm" color="brand-blue" radius="xl" />
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Group justify="space-between" mb={6}>
|
||||
<Group gap="xs">
|
||||
<TbAlertTriangle size={16} color={errors > 0 ? '#ef4444' : '#64748b'} />
|
||||
<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> */}
|
||||
|
||||
<Button
|
||||
component={Link}
|
||||
@@ -85,7 +74,7 @@ export function AppCard({ id, name, status, errors, version }: AppCardProps) {
|
||||
variant="light"
|
||||
color="brand-blue"
|
||||
fullWidth
|
||||
mt="xl"
|
||||
mt="md"
|
||||
radius="md"
|
||||
rightSection={<TbChevronRight size={16} />}
|
||||
styles={{
|
||||
@@ -97,7 +86,7 @@ export function AppCard({ id, name, status, errors, version }: AppCardProps) {
|
||||
}
|
||||
}}
|
||||
>
|
||||
View
|
||||
Open Dashboard
|
||||
</Button>
|
||||
</Card>
|
||||
)
|
||||
|
||||
@@ -6,16 +6,21 @@ import {
|
||||
Divider,
|
||||
Drawer,
|
||||
Group,
|
||||
Loader,
|
||||
Paper,
|
||||
ScrollArea,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Table,
|
||||
Text,
|
||||
Title
|
||||
ThemeIcon,
|
||||
Title,
|
||||
Tooltip,
|
||||
} from '@mantine/core'
|
||||
import { useDisclosure } from '@mantine/hooks'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { Link } from '@tanstack/react-router'
|
||||
import dayjs from 'dayjs'
|
||||
import { useState } from 'react'
|
||||
import { TbBug, TbExternalLink, TbHistory, TbMessageReport } from 'react-icons/tb'
|
||||
|
||||
@@ -23,6 +28,23 @@ export interface ErrorDataTableProps {
|
||||
appId?: string
|
||||
}
|
||||
|
||||
const STATUS_COLOR: Record<string, string> = {
|
||||
OPEN: 'red',
|
||||
IN_PROGRESS: 'blue',
|
||||
ON_HOLD: 'orange',
|
||||
RESOLVED: 'teal',
|
||||
RELEASED: 'green',
|
||||
CLOSED: 'gray',
|
||||
}
|
||||
const STATUS_LABEL: Record<string, string> = {
|
||||
OPEN: 'Open',
|
||||
ON_HOLD: 'On Hold',
|
||||
IN_PROGRESS: 'In Progress',
|
||||
RESOLVED: 'Resolved',
|
||||
RELEASED: 'Released',
|
||||
CLOSED: 'Closed',
|
||||
}
|
||||
|
||||
export function ErrorDataTable({ appId }: ErrorDataTableProps) {
|
||||
const [opened, { open, close }] = useDisclosure(false)
|
||||
const [selectedError, setSelectedError] = useState<any>(null)
|
||||
@@ -41,54 +63,62 @@ export function ErrorDataTable({ appId }: ErrorDataTableProps) {
|
||||
open()
|
||||
}
|
||||
|
||||
const getSeverityColor = (sev: string) => {
|
||||
switch (sev?.toUpperCase()) {
|
||||
case 'OPEN': return 'red'
|
||||
case 'IN_PROGRESS': return 'orange'
|
||||
case 'ON_HOLD': return 'yellow'
|
||||
default: return 'gray'
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Paper withBorder radius="2xl" className="glass overflow-hidden">
|
||||
<Box p="xl" style={{ borderBottom: '1px solid rgba(255, 255, 255, 0.08)' }}>
|
||||
<Paper withBorder radius="2xl" className="glass" style={{ overflow: 'hidden' }}>
|
||||
<Box p="lg" style={{ borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
|
||||
<Group justify="space-between">
|
||||
<Group gap="sm">
|
||||
<ThemeIcon variant="light" color="red" size="lg" radius="md">
|
||||
<TbBug size={20} />
|
||||
</ThemeIcon>
|
||||
<Text fw={700}>LATEST ERROR REPORTS</Text>
|
||||
<Stack gap={0}>
|
||||
<Text fw={700} size="sm">Latest Error Reports</Text>
|
||||
<Text size="xs" c="dimmed">Most recent open bugs</Text>
|
||||
</Stack>
|
||||
</Group>
|
||||
<Button component={Link} to={appId ? `/apps/${appId}/errors` : '/bug-reports'} variant="subtle" size="compact-xs" color="blue" rightSection={<TbExternalLink size={14} />}>
|
||||
View All Reports
|
||||
<Tooltip label="View all reports" withArrow>
|
||||
<Button
|
||||
component={Link}
|
||||
to={appId ? `/apps/${appId}/errors` : '/bug-reports'}
|
||||
variant="subtle"
|
||||
size="compact-sm"
|
||||
color="blue"
|
||||
rightSection={<TbExternalLink size={14} />}
|
||||
>
|
||||
View All
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
</Box>
|
||||
|
||||
<ScrollArea>
|
||||
<Table verticalSpacing="md" highlightOnHover className="data-table">
|
||||
<Table.Thead bg="rgba(0,0,0,0.1)">
|
||||
<Table verticalSpacing="sm" highlightOnHover className="data-table">
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th px="xl">Error Message</Table.Th>
|
||||
<Table.Th px="lg">Error Description</Table.Th>
|
||||
<Table.Th>Reporter</Table.Th>
|
||||
<Table.Th>App Version</Table.Th>
|
||||
<Table.Th>Timestamp</Table.Th>
|
||||
<Table.Th pr="xl">Severity</Table.Th>
|
||||
<Table.Th>Version</Table.Th>
|
||||
<Table.Th>Reported</Table.Th>
|
||||
<Table.Th pr="lg">Status</Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>
|
||||
{isLoading ? (
|
||||
<Table.Tr>
|
||||
<Table.Td colSpan={5} align="center" py="xl">
|
||||
Loading errors...
|
||||
<Table.Td colSpan={5}>
|
||||
<Group justify="center" py="xl">
|
||||
<Loader size="sm" type="dots" />
|
||||
</Group>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
) : bugs.length === 0 ? (
|
||||
<Table.Tr>
|
||||
<Table.Td colSpan={5} align="center" py="xl">
|
||||
No errors found.
|
||||
<Table.Td colSpan={5}>
|
||||
<Stack align="center" gap="xs" py="xl">
|
||||
<TbBug size={32} style={{ opacity: 0.25 }} />
|
||||
<Text size="sm" c="dimmed">No error reports found.</Text>
|
||||
</Stack>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
) : bugs.map((error: any) => (
|
||||
@@ -97,24 +127,34 @@ export function ErrorDataTable({ appId }: ErrorDataTableProps) {
|
||||
onClick={() => handleRowClick(error)}
|
||||
style={{ cursor: 'pointer' }}
|
||||
>
|
||||
<Table.Td px="xl">
|
||||
<Table.Td px="lg">
|
||||
<Text size="sm" fw={600} lineClamp={1}>{error.description}</Text>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Badge variant="dot" color="brand-blue" radius="sm">{error.user?.name || error.userId || 'System'}</Badge>
|
||||
<Badge variant="light" color="brand-blue" size="sm">
|
||||
{error.user?.name || error.userId || 'System'}
|
||||
</Badge>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Text size="xs" fw={700} c="dimmed">{error.affectedVersion || 'N/A'}</Text>
|
||||
<Badge variant="light" color="gray" size="sm">
|
||||
v{error.affectedVersion || 'N/A'}
|
||||
</Badge>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Group gap={6}>
|
||||
<Group gap={4}>
|
||||
<TbHistory size={12} color="gray" />
|
||||
<Text size="xs" c="dimmed">{new Date(error.createdAt).toLocaleString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false })}</Text>
|
||||
<Text size="xs" c="dimmed">
|
||||
{dayjs(error.createdAt).format('D MMM YYYY, HH:mm')}
|
||||
</Text>
|
||||
</Group>
|
||||
</Table.Td>
|
||||
<Table.Td pr="xl">
|
||||
<Badge color={getSeverityColor(error.status)} variant="light" size="sm">
|
||||
{(error.status || '').toUpperCase()}
|
||||
<Table.Td pr="lg">
|
||||
<Badge
|
||||
color={STATUS_COLOR[error.status?.toUpperCase()] ?? 'gray'}
|
||||
variant="light"
|
||||
size="sm"
|
||||
>
|
||||
{STATUS_LABEL[error.status?.toUpperCase()] ?? error.status}
|
||||
</Badge>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
@@ -131,37 +171,68 @@ export function ErrorDataTable({ appId }: ErrorDataTableProps) {
|
||||
size="md"
|
||||
title={
|
||||
<Group gap="xs">
|
||||
<TbMessageReport color="#ef4444" size={24} />
|
||||
<Title order={4}>Error Investigation</Title>
|
||||
<TbMessageReport color="#ef4444" size={22} />
|
||||
<Title order={4}>Error Detail</Title>
|
||||
</Group>
|
||||
}
|
||||
styles={{
|
||||
header: { padding: '24px', borderBottom: '1px solid var(--mantine-color-default-border)' },
|
||||
header: { padding: '20px 24px', borderBottom: '1px solid var(--mantine-color-default-border)' },
|
||||
}}
|
||||
>
|
||||
{selectedError && (
|
||||
<Stack p="lg" gap="xl">
|
||||
<Box>
|
||||
<Text size="xs" fw={700} c="dimmed" mb={4}>MESSAGE</Text>
|
||||
<Text fw={700} size="lg" color="red">{selectedError.description}</Text>
|
||||
<Text size="xs" fw={700} c="dimmed" mb={4} tt="uppercase">Description</Text>
|
||||
<Text fw={600} size="sm">{selectedError.description}</Text>
|
||||
</Box>
|
||||
|
||||
<SimpleGrid cols={2} spacing="lg">
|
||||
<Box>
|
||||
<Text size="xs" fw={700} c="dimmed" mb={4}>SOURCE</Text>
|
||||
<Text fw={600}>{selectedError.source}</Text>
|
||||
<Text size="xs" fw={700} c="dimmed" mb={4} tt="uppercase">Status</Text>
|
||||
<Badge
|
||||
color={STATUS_COLOR[selectedError.status?.toUpperCase()] ?? 'gray'}
|
||||
variant="light"
|
||||
size="sm"
|
||||
>
|
||||
{STATUS_LABEL[selectedError.status?.toUpperCase()] ?? selectedError.status}
|
||||
</Badge>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text size="xs" fw={700} c="dimmed" mb={4}>APP VERSION</Text>
|
||||
<Badge variant="outline">{selectedError.affectedVersion || 'N/A'}</Badge>
|
||||
<Text size="xs" fw={700} c="dimmed" mb={4} tt="uppercase">Source</Text>
|
||||
<Badge variant="light" color="gray" size="sm">{selectedError.source}</Badge>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text size="xs" fw={700} c="dimmed" mb={4} tt="uppercase">App Version</Text>
|
||||
<Badge variant="light" color="gray" size="sm">v{selectedError.affectedVersion || 'N/A'}</Badge>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text size="xs" fw={700} c="dimmed" mb={4} tt="uppercase">Reported</Text>
|
||||
<Text size="sm" fw={500}>{dayjs(selectedError.createdAt).format('D MMM YYYY, HH:mm')}</Text>
|
||||
</Box>
|
||||
</SimpleGrid>
|
||||
|
||||
{selectedError.device && (
|
||||
<Box>
|
||||
<Text size="xs" fw={700} c="dimmed" mb={4} tt="uppercase">Device</Text>
|
||||
<Text size="sm">{selectedError.device} · {selectedError.os}</Text>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{selectedError.feedBack && (
|
||||
<>
|
||||
<Divider opacity={0.1} />
|
||||
<Box>
|
||||
<Text size="xs" fw={700} c="dimmed" mb={4} tt="uppercase">Developer Feedback</Text>
|
||||
<Text size="sm" style={{ whiteSpace: 'pre-wrap' }}>{selectedError.feedBack}</Text>
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Divider opacity={0.1} />
|
||||
|
||||
<Box>
|
||||
<Group justify="space-between" mb="sm">
|
||||
<Text size="xs" fw={700} c="dimmed">STACK TRACE</Text>
|
||||
<Text size="xs" fw={700} c="dimmed" tt="uppercase">Stack Trace</Text>
|
||||
<Button
|
||||
variant="subtle"
|
||||
size="compact-xs"
|
||||
@@ -172,8 +243,12 @@ export function ErrorDataTable({ appId }: ErrorDataTableProps) {
|
||||
</Button>
|
||||
</Group>
|
||||
{showStackTrace && (
|
||||
<Code block color="red" style={{ whiteSpace: 'pre-wrap', lineHeight: 1.6, border: '1px solid var(--mantine-color-default-border)' }}>
|
||||
{selectedError.stackTrace}
|
||||
<Code
|
||||
block
|
||||
color="red"
|
||||
style={{ whiteSpace: 'pre-wrap', lineHeight: 1.6, fontSize: 11, border: '1px solid var(--mantine-color-default-border)' }}
|
||||
>
|
||||
{selectedError.stackTrace || '(no stack trace)'}
|
||||
</Code>
|
||||
)}
|
||||
</Box>
|
||||
@@ -183,5 +258,3 @@ export function ErrorDataTable({ appId }: ErrorDataTableProps) {
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
import { SimpleGrid, ThemeIcon } from '@mantine/core'
|
||||
|
||||
@@ -21,12 +21,14 @@ import {
|
||||
TextInput,
|
||||
ThemeIcon,
|
||||
Timeline,
|
||||
Title
|
||||
Title,
|
||||
Tooltip,
|
||||
} from '@mantine/core'
|
||||
import { useDisclosure } from '@mantine/hooks'
|
||||
import { notifications } from '@mantine/notifications'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { createFileRoute, useParams } from '@tanstack/react-router'
|
||||
import dayjs from 'dayjs'
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
TbAlertTriangle,
|
||||
@@ -39,7 +41,7 @@ import {
|
||||
TbHistory,
|
||||
TbPhoto,
|
||||
TbPlus,
|
||||
TbSearch
|
||||
TbSearch,
|
||||
} from 'react-icons/tb'
|
||||
import { API_URLS } from '../config/api'
|
||||
|
||||
@@ -47,43 +49,48 @@ export const Route = createFileRoute('/apps/$appId/errors')({
|
||||
component: AppErrorsPage,
|
||||
})
|
||||
|
||||
const STATUS_COLOR: Record<string, string> = {
|
||||
OPEN: 'red',
|
||||
IN_PROGRESS: 'blue',
|
||||
ON_HOLD: 'orange',
|
||||
RESOLVED: 'teal',
|
||||
RELEASED: 'green',
|
||||
CLOSED: 'gray',
|
||||
}
|
||||
const STATUS_LABEL: Record<string, string> = {
|
||||
OPEN: 'Open',
|
||||
ON_HOLD: 'On Hold',
|
||||
IN_PROGRESS: 'In Progress',
|
||||
RESOLVED: 'Resolved',
|
||||
RELEASED: 'Released',
|
||||
CLOSED: 'Closed',
|
||||
}
|
||||
|
||||
function AppErrorsPage() {
|
||||
const { appId } = useParams({ from: '/apps/$appId/errors' })
|
||||
|
||||
const [page, setPage] = useState(1)
|
||||
const [search, setSearch] = useState('')
|
||||
const [app, setApp] = useState(appId)
|
||||
const [status, setStatus] = useState('all')
|
||||
|
||||
|
||||
const [showLogs, setShowLogs] = useState<Record<string, boolean>>({})
|
||||
const [showStackTrace, setShowStackTrace] = useState<Record<string, boolean>>({})
|
||||
|
||||
const toggleLogs = (bugId: string) => {
|
||||
setShowLogs((prev) => ({ ...prev, [bugId]: !prev[bugId] }))
|
||||
}
|
||||
|
||||
const toggleStackTrace = (bugId: string) => {
|
||||
setShowStackTrace((prev) => ({ ...prev, [bugId]: !prev[bugId] }))
|
||||
}
|
||||
const toggleLogs = (bugId: string) => setShowLogs((prev) => ({ ...prev, [bugId]: !prev[bugId] }))
|
||||
const toggleStackTrace = (bugId: string) => setShowStackTrace((prev) => ({ ...prev, [bugId]: !prev[bugId] }))
|
||||
|
||||
const { data, isLoading, refetch } = useQuery({
|
||||
queryKey: ['bugs', { page, search, app, status }],
|
||||
queryFn: () =>
|
||||
fetch(API_URLS.getBugs(page, search, app, status)).then((r) => r.json()),
|
||||
queryKey: ['bugs', { page, search, app: appId, status }],
|
||||
queryFn: () => fetch(API_URLS.getBugs(page, search, appId, status)).then((r) => r.json()),
|
||||
})
|
||||
|
||||
// Fetch apps for the dropdown
|
||||
const { data: appsList } = useQuery({
|
||||
queryKey: ['apps-list'],
|
||||
queryFn: () => fetch('/api/apps').then((r) => r.json()),
|
||||
})
|
||||
|
||||
// Image Preview
|
||||
const [previewImage, setPreviewImage] = useState<string | null>(null)
|
||||
|
||||
// Create Bug Modal Logic
|
||||
const [opened, { open, close }] = useDisclosure(false)
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [imageFiles, setImageFiles] = useState<File[]>([])
|
||||
@@ -97,25 +104,17 @@ function AppErrorsPage() {
|
||||
stackTrace: '',
|
||||
})
|
||||
|
||||
// Update Status Modal Logic
|
||||
const [updateModalOpened, { open: openUpdateModal, close: closeUpdateModal }] = useDisclosure(false)
|
||||
const [isUpdating, setIsUpdating] = useState(false)
|
||||
const [selectedBugId, setSelectedBugId] = useState<string | null>(null)
|
||||
const [updateForm, setUpdateForm] = useState({
|
||||
status: '',
|
||||
description: '',
|
||||
})
|
||||
const [updateForm, setUpdateForm] = useState({ status: '', description: '' })
|
||||
|
||||
// Feedback Modal Logic
|
||||
const [feedbackModalOpened, { open: openFeedbackModal, close: closeFeedbackModal }] = useDisclosure(false)
|
||||
const [isUpdatingFeedback, setIsUpdatingFeedback] = useState(false)
|
||||
const [feedbackForm, setFeedbackForm] = useState({
|
||||
feedBack: '',
|
||||
})
|
||||
const [feedbackForm, setFeedbackForm] = useState({ feedBack: '' })
|
||||
|
||||
const handleUpdateFeedback = async () => {
|
||||
if (!selectedBugId || !feedbackForm.feedBack) return
|
||||
|
||||
setIsUpdatingFeedback(true)
|
||||
try {
|
||||
const res = await fetch(API_URLS.updateBugFeedback(selectedBugId), {
|
||||
@@ -123,27 +122,16 @@ function AppErrorsPage() {
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(feedbackForm),
|
||||
})
|
||||
|
||||
if (res.ok) {
|
||||
notifications.show({
|
||||
title: 'Success',
|
||||
message: 'Feedback has been updated.',
|
||||
color: 'teal',
|
||||
icon: <TbCircleCheck size={18} />,
|
||||
})
|
||||
notifications.show({ title: 'Success', message: 'Feedback has been updated.', color: 'teal', icon: <TbCircleCheck size={18} /> })
|
||||
refetch()
|
||||
closeFeedbackModal()
|
||||
setFeedbackForm({ feedBack: '' })
|
||||
} else {
|
||||
throw new Error('Failed to update feedback')
|
||||
throw new Error()
|
||||
}
|
||||
} catch (e) {
|
||||
notifications.show({
|
||||
title: 'Error',
|
||||
message: 'Something went wrong.',
|
||||
color: 'red',
|
||||
icon: <TbCircleX size={18} />,
|
||||
})
|
||||
} catch {
|
||||
notifications.show({ title: 'Error', message: 'Something went wrong.', color: 'red', icon: <TbCircleX size={18} /> })
|
||||
} finally {
|
||||
setIsUpdatingFeedback(false)
|
||||
}
|
||||
@@ -151,7 +139,6 @@ function AppErrorsPage() {
|
||||
|
||||
const handleUpdateStatus = async () => {
|
||||
if (!selectedBugId || !updateForm.status) return
|
||||
|
||||
setIsUpdating(true)
|
||||
try {
|
||||
const res = await fetch(API_URLS.updateBugStatus(selectedBugId), {
|
||||
@@ -159,27 +146,16 @@ function AppErrorsPage() {
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(updateForm),
|
||||
})
|
||||
|
||||
if (res.ok) {
|
||||
notifications.show({
|
||||
title: 'Success',
|
||||
message: 'Status has been updated.',
|
||||
color: 'teal',
|
||||
icon: <TbCircleCheck size={18} />,
|
||||
})
|
||||
notifications.show({ title: 'Success', message: 'Status has been updated.', color: 'teal', icon: <TbCircleCheck size={18} /> })
|
||||
refetch()
|
||||
closeUpdateModal()
|
||||
setUpdateForm({ status: '', description: '' })
|
||||
} else {
|
||||
throw new Error('Failed to update status')
|
||||
throw new Error()
|
||||
}
|
||||
} catch (e) {
|
||||
notifications.show({
|
||||
title: 'Error',
|
||||
message: 'Something went wrong.',
|
||||
color: 'red',
|
||||
icon: <TbCircleX size={18} />,
|
||||
})
|
||||
} catch {
|
||||
notifications.show({ title: 'Error', message: 'Something went wrong.', color: 'red', icon: <TbCircleX size={18} /> })
|
||||
} finally {
|
||||
setIsUpdating(false)
|
||||
}
|
||||
@@ -187,14 +163,9 @@ function AppErrorsPage() {
|
||||
|
||||
const handleCreateBug = async () => {
|
||||
if (!createForm.description || !createForm.affectedVersion || !createForm.device || !createForm.os) {
|
||||
notifications.show({
|
||||
title: 'Validation Error',
|
||||
message: 'Please fill in all required fields.',
|
||||
color: 'red',
|
||||
})
|
||||
notifications.show({ title: 'Validation Error', message: 'Please fill in all required fields.', color: 'red' })
|
||||
return
|
||||
}
|
||||
|
||||
setIsSubmitting(true)
|
||||
try {
|
||||
const imageUrls: string[] = []
|
||||
@@ -202,52 +173,31 @@ function AppErrorsPage() {
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
const uploadRes = await fetch(API_URLS.uploadImage(), { method: 'POST', body: formData })
|
||||
if (!uploadRes.ok) throw new Error('Gagal mengupload gambar')
|
||||
if (!uploadRes.ok) throw new Error('Failed to upload image')
|
||||
const { url } = await uploadRes.json()
|
||||
imageUrls.push(url)
|
||||
}
|
||||
|
||||
const res = await fetch(API_URLS.createBug(), {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ ...createForm, imageUrls: imageUrls.length ? imageUrls : undefined }),
|
||||
})
|
||||
|
||||
if (res.ok) {
|
||||
await fetch(API_URLS.createLog(), {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ type: 'CREATE', message: `Report error baru ditambahkan: ${createForm.description.substring(0, 50)}${createForm.description.length > 50 ? '...' : ''}` })
|
||||
body: JSON.stringify({ type: 'CREATE', message: `New error report added: ${createForm.description.substring(0, 50)}${createForm.description.length > 50 ? '...' : ''}` }),
|
||||
}).catch(console.error)
|
||||
|
||||
notifications.show({
|
||||
title: 'Success',
|
||||
message: 'Error report has been created.',
|
||||
color: 'teal',
|
||||
icon: <TbCircleCheck size={18} />,
|
||||
})
|
||||
notifications.show({ title: 'Success', message: 'Error report has been created.', color: 'teal', icon: <TbCircleCheck size={18} /> })
|
||||
refetch()
|
||||
close()
|
||||
setImageFiles([])
|
||||
setCreateForm({
|
||||
description: '',
|
||||
app: appId,
|
||||
source: 'USER',
|
||||
affectedVersion: '',
|
||||
device: '',
|
||||
os: '',
|
||||
stackTrace: '',
|
||||
})
|
||||
setCreateForm({ description: '', app: appId, source: 'USER', affectedVersion: '', device: '', os: '', stackTrace: '' })
|
||||
} else {
|
||||
throw new Error('Failed to create error report')
|
||||
throw new Error()
|
||||
}
|
||||
} catch (e) {
|
||||
notifications.show({
|
||||
title: 'Error',
|
||||
message: 'Something went wrong.',
|
||||
color: 'red',
|
||||
icon: <TbCircleX size={18} />,
|
||||
})
|
||||
} catch {
|
||||
notifications.show({ title: 'Error', message: 'Something went wrong.', color: 'red', icon: <TbCircleX size={18} /> })
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
@@ -257,16 +207,19 @@ function AppErrorsPage() {
|
||||
const totalPages = data?.totalPages || 1
|
||||
|
||||
return (
|
||||
<Stack gap="xl">
|
||||
<Group justify="space-between" align="center">
|
||||
<Stack gap={0}>
|
||||
<Title order={3}>Error Reporting Center</Title>
|
||||
<Text size="sm" c="dimmed">Advanced analysis of health issues and crashes for <b>{appId}</b>.</Text>
|
||||
<Stack gap="xl" py="md">
|
||||
<Group justify="space-between" align="flex-start">
|
||||
<Stack gap={4}>
|
||||
<Title order={3}>Error Reports</Title>
|
||||
<Text size="sm" c="dimmed">
|
||||
Bug reports and crash tracking for this application.
|
||||
</Text>
|
||||
</Stack>
|
||||
<Button
|
||||
variant="gradient"
|
||||
gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
|
||||
leftSection={<TbPlus size={18} />}
|
||||
size="sm"
|
||||
onClick={open}
|
||||
>
|
||||
Report Error
|
||||
@@ -278,7 +231,7 @@ function AppErrorsPage() {
|
||||
opened={!!previewImage}
|
||||
onClose={() => setPreviewImage(null)}
|
||||
size="xl"
|
||||
radius="xl"
|
||||
radius="md"
|
||||
padding={0}
|
||||
withCloseButton={false}
|
||||
overlayProps={{ backgroundOpacity: 0.75, blur: 6 }}
|
||||
@@ -286,12 +239,7 @@ function AppErrorsPage() {
|
||||
onClick={() => setPreviewImage(null)}
|
||||
>
|
||||
{previewImage && (
|
||||
<Image
|
||||
src={previewImage}
|
||||
alt="Preview"
|
||||
fit="contain"
|
||||
style={{ maxHeight: '85vh', width: '100%' }}
|
||||
/>
|
||||
<Image src={previewImage} alt="Preview" fit="contain" style={{ maxHeight: '85vh', width: '100%' }} />
|
||||
)}
|
||||
</Modal>
|
||||
|
||||
@@ -299,28 +247,21 @@ function AppErrorsPage() {
|
||||
opened={updateModalOpened}
|
||||
onClose={closeUpdateModal}
|
||||
title={<Text fw={700} size="lg">Update Bug Status</Text>}
|
||||
radius="xl"
|
||||
radius="md"
|
||||
overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Select
|
||||
label="New Status"
|
||||
placeholder="Select status"
|
||||
placeholder="Select a status"
|
||||
required
|
||||
data={[
|
||||
{ value: 'OPEN', label: 'Open' },
|
||||
{ value: 'ON_HOLD', label: 'On Hold' },
|
||||
{ value: 'IN_PROGRESS', label: 'In Progress' },
|
||||
{ value: 'RESOLVED', label: 'Resolved' },
|
||||
{ value: 'RELEASED', label: 'Released' },
|
||||
{ value: 'CLOSED', label: 'Closed' },
|
||||
]}
|
||||
data={Object.entries(STATUS_LABEL).map(([value, label]) => ({ value, label }))}
|
||||
value={updateForm.status}
|
||||
onChange={(val) => setUpdateForm({ ...updateForm, status: val || '' })}
|
||||
/>
|
||||
<Textarea
|
||||
label="Update Note (Optional)"
|
||||
placeholder="E.g. Fixed in commit xxxxx / Assigned to team"
|
||||
placeholder="e.g. Fixed in commit abc123 / Assigned to team"
|
||||
minRows={3}
|
||||
value={updateForm.description}
|
||||
onChange={(e) => setUpdateForm({ ...updateForm, description: e.target.value })}
|
||||
@@ -342,7 +283,7 @@ function AppErrorsPage() {
|
||||
opened={feedbackModalOpened}
|
||||
onClose={closeFeedbackModal}
|
||||
title={<Text fw={700} size="lg">Developer Feedback</Text>}
|
||||
radius="xl"
|
||||
radius="md"
|
||||
overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
@@ -353,7 +294,7 @@ function AppErrorsPage() {
|
||||
required
|
||||
minRows={4}
|
||||
value={feedbackForm.feedBack}
|
||||
onChange={(e) => setFeedbackForm({ ...feedbackForm, feedBack: e.target.value })}
|
||||
onChange={(e) => setFeedbackForm({ feedBack: e.target.value })}
|
||||
/>
|
||||
<Button
|
||||
fullWidth
|
||||
@@ -370,9 +311,9 @@ function AppErrorsPage() {
|
||||
|
||||
<Modal
|
||||
opened={opened}
|
||||
onClose={() => { close(); setImageFiles([]); }}
|
||||
onClose={() => { close(); setImageFiles([]) }}
|
||||
title={<Text fw={700} size="lg">Report New Error</Text>}
|
||||
radius="xl"
|
||||
radius="md"
|
||||
size="lg"
|
||||
overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
|
||||
>
|
||||
@@ -385,7 +326,6 @@ function AppErrorsPage() {
|
||||
value={createForm.description}
|
||||
onChange={(e) => setCreateForm({ ...createForm, description: e.target.value })}
|
||||
/>
|
||||
|
||||
<SimpleGrid cols={2}>
|
||||
<Select
|
||||
label="Application"
|
||||
@@ -406,19 +346,17 @@ function AppErrorsPage() {
|
||||
onChange={(val) => setCreateForm({ ...createForm, source: val as any })}
|
||||
/>
|
||||
</SimpleGrid>
|
||||
|
||||
<TextInput
|
||||
label="Version"
|
||||
label="Affected Version"
|
||||
placeholder="e.g. 2.4.1"
|
||||
required
|
||||
value={createForm.affectedVersion}
|
||||
onChange={(e) => setCreateForm({ ...createForm, affectedVersion: e.target.value })}
|
||||
/>
|
||||
|
||||
<SimpleGrid cols={2}>
|
||||
<TextInput
|
||||
label="Device"
|
||||
placeholder="e.g. iPhone 13, Windows 11 PC"
|
||||
placeholder="e.g. iPhone 13, Windows PC"
|
||||
required
|
||||
value={createForm.device}
|
||||
onChange={(e) => setCreateForm({ ...createForm, device: e.target.value })}
|
||||
@@ -431,17 +369,16 @@ function AppErrorsPage() {
|
||||
onChange={(e) => setCreateForm({ ...createForm, os: e.target.value })}
|
||||
/>
|
||||
</SimpleGrid>
|
||||
|
||||
<FileInput
|
||||
label="Screenshot (Optional)"
|
||||
placeholder="Klik untuk upload gambar..."
|
||||
label="Screenshots (Optional)"
|
||||
placeholder="Click to upload images..."
|
||||
accept="image/*"
|
||||
leftSection={<TbPhoto size={16} />}
|
||||
description="Maks 3 gambar · 5MB per file · JPG, PNG, WEBP"
|
||||
description="Max 3 images · 5 MB each · JPG, PNG, WEBP"
|
||||
value={imageFiles}
|
||||
onChange={(files) => {
|
||||
if (files.length > 3) {
|
||||
notifications.show({ title: 'Error', message: 'Maksimal 3 gambar', color: 'red' })
|
||||
notifications.show({ title: 'Error', message: 'Maximum 3 images allowed.', color: 'red' })
|
||||
return
|
||||
}
|
||||
setImageFiles(files)
|
||||
@@ -449,16 +386,14 @@ function AppErrorsPage() {
|
||||
clearable
|
||||
multiple
|
||||
/>
|
||||
|
||||
<Textarea
|
||||
label="Stack Trace (Optional)"
|
||||
placeholder="Paste code or error logs here..."
|
||||
placeholder="Paste error logs or stack trace here..."
|
||||
style={{ fontFamily: 'monospace' }}
|
||||
minRows={2}
|
||||
value={createForm.stackTrace}
|
||||
onChange={(e) => setCreateForm({ ...createForm, stackTrace: e.target.value })}
|
||||
/>
|
||||
|
||||
<Button
|
||||
fullWidth
|
||||
mt="md"
|
||||
@@ -473,47 +408,50 @@ function AppErrorsPage() {
|
||||
</Modal>
|
||||
|
||||
<Paper withBorder radius="2xl" className="glass" p="md">
|
||||
<SimpleGrid cols={{ base: 1, sm: 3 }} mb="md">
|
||||
<SimpleGrid cols={{ base: 1, sm: 3 }} mb="lg">
|
||||
<TextInput
|
||||
placeholder="Search description, device, os..."
|
||||
label="Search"
|
||||
placeholder="Description, device, OS..."
|
||||
leftSection={<TbSearch size={16} />}
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.currentTarget.value)}
|
||||
radius="md"
|
||||
size="sm"
|
||||
/>
|
||||
<Select
|
||||
placeholder="Status"
|
||||
label="Status"
|
||||
size="sm"
|
||||
data={[
|
||||
{ value: 'all', label: 'All Status' },
|
||||
{ value: 'OPEN', label: 'Open' },
|
||||
{ value: 'ON_HOLD', label: 'On Hold' },
|
||||
{ value: 'IN_PROGRESS', label: 'In Progress' },
|
||||
{ value: 'RESOLVED', label: 'Resolved' },
|
||||
{ value: 'RELEASED', label: 'Released' },
|
||||
{ value: 'CLOSED', label: 'Closed' },
|
||||
...Object.entries(STATUS_LABEL).map(([value, label]) => ({ value, label })),
|
||||
]}
|
||||
value={status}
|
||||
onChange={(val) => setStatus(val || 'all')}
|
||||
radius="md"
|
||||
/>
|
||||
<Group justify="flex-end">
|
||||
<Button variant="subtle" color="gray" leftSection={<TbFilter size={16} />} onClick={() => { setSearch(''); setStatus('all') }}>
|
||||
Reset
|
||||
<Stack justify="flex-end">
|
||||
<Button
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
size="sm"
|
||||
leftSection={<TbFilter size={16} />}
|
||||
onClick={() => { setSearch(''); setStatus('all') }}
|
||||
>
|
||||
Reset Filters
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</SimpleGrid>
|
||||
|
||||
{isLoading ? (
|
||||
<Stack align="center" py="xl">
|
||||
<Loader size="lg" type="dots" />
|
||||
<Text size="sm" c="dimmed">Loading error reports...</Text>
|
||||
<Loader size="md" type="dots" />
|
||||
</Stack>
|
||||
) : bugs.length === 0 ? (
|
||||
<Paper p="xl" withBorder style={{ borderStyle: 'dashed', textAlign: 'center' }}>
|
||||
<TbBug size={48} color="gray" style={{ marginBottom: 12, opacity: 0.5 }} />
|
||||
<Text fw={600}>No error reports found</Text>
|
||||
<Stack align="center" py="xl" gap="xs">
|
||||
<TbBug size={40} style={{ opacity: 0.25 }} />
|
||||
<Text fw={600} size="sm">No error reports found</Text>
|
||||
<Text size="sm" c="dimmed">Try adjusting your filters or search terms.</Text>
|
||||
</Paper>
|
||||
</Stack>
|
||||
) : (
|
||||
<Accordion variant="separated" radius="xl">
|
||||
{bugs.map((bug: any) => (
|
||||
@@ -523,19 +461,13 @@ function AppErrorsPage() {
|
||||
style={{
|
||||
border: '1px solid var(--mantine-color-default-border)',
|
||||
background: 'var(--mantine-color-default)',
|
||||
marginBottom: '12px',
|
||||
marginBottom: 12,
|
||||
}}
|
||||
>
|
||||
<Accordion.Control>
|
||||
<Group wrap="nowrap">
|
||||
<ThemeIcon
|
||||
color={
|
||||
bug.status === 'OPEN'
|
||||
? 'red'
|
||||
: bug.status === 'IN_PROGRESS'
|
||||
? 'blue'
|
||||
: 'teal'
|
||||
}
|
||||
color={STATUS_COLOR[bug.status] ?? 'gray'}
|
||||
variant="light"
|
||||
size="lg"
|
||||
radius="md"
|
||||
@@ -544,37 +476,27 @@ function AppErrorsPage() {
|
||||
</ThemeIcon>
|
||||
<Box style={{ flex: 1 }}>
|
||||
<Group justify="space-between">
|
||||
<Text size="sm" fw={600} lineClamp={1}>
|
||||
{bug.description}
|
||||
</Text>
|
||||
<Text size="sm" fw={600} lineClamp={1}>{bug.description}</Text>
|
||||
<Badge
|
||||
color={
|
||||
bug.status === 'OPEN'
|
||||
? 'red'
|
||||
: bug.status === 'IN_PROGRESS'
|
||||
? 'blue'
|
||||
: 'teal'
|
||||
}
|
||||
color={STATUS_COLOR[bug.status] ?? 'gray'}
|
||||
variant="dot"
|
||||
size="xs"
|
||||
size="sm"
|
||||
>
|
||||
{bug.status}
|
||||
{STATUS_LABEL[bug.status] ?? bug.status}
|
||||
</Badge>
|
||||
</Group>
|
||||
<Group gap="md">
|
||||
<Text size="xs" c="dimmed">
|
||||
{new Date(bug.createdAt).toLocaleString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false })} • {bug.appId?.toUpperCase()} • v{bug.affectedVersion}
|
||||
{dayjs(bug.createdAt).format('D MMM YYYY, HH:mm')} · {bug.appId?.toUpperCase()} · v{bug.affectedVersion}
|
||||
</Text>
|
||||
</Group>
|
||||
</Box>
|
||||
</Group>
|
||||
</Accordion.Control>
|
||||
|
||||
<Accordion.Panel>
|
||||
<Stack gap="lg" py="xs">
|
||||
{/* Device Info */}
|
||||
<SimpleGrid cols={{ base: 1, sm: 2 }} spacing="lg">
|
||||
<Box>
|
||||
<Text size="xs" fw={700} c="dimmed" mb={4}>DEVICE METADATA</Text>
|
||||
<Text size="xs" fw={700} c="dimmed" mb={4} tt="uppercase">Device Metadata</Text>
|
||||
<Group gap="xs">
|
||||
{bug.device.toLowerCase().includes('windows') || bug.device.toLowerCase().includes('mac') || bug.device.toLowerCase().includes('pc') ? (
|
||||
<TbDeviceDesktop size={14} color="gray" />
|
||||
@@ -585,17 +507,16 @@ function AppErrorsPage() {
|
||||
</Group>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text size="xs" fw={700} c="dimmed" mb={4}>SOURCE</Text>
|
||||
<Text size="xs" fw={700} c="dimmed" mb={4} tt="uppercase">Source</Text>
|
||||
<Badge variant="light" color="gray" size="sm">{bug.source}</Badge>
|
||||
</Box>
|
||||
</SimpleGrid>
|
||||
|
||||
{/* Feedback & Reporter Info */}
|
||||
{(bug.user || bug.feedBack) && (
|
||||
<SimpleGrid cols={{ base: 1, sm: 2 }} spacing="lg">
|
||||
{bug.user && (
|
||||
<Box>
|
||||
<Text size="xs" fw={700} c="dimmed" mb={4}>REPORTED BY</Text>
|
||||
<Text size="xs" fw={700} c="dimmed" mb={4} tt="uppercase">Reported By</Text>
|
||||
<Group gap="xs">
|
||||
<Avatar src={bug.user.image} radius="xl" size="sm" color="blue">
|
||||
{bug.user.name?.charAt(0).toUpperCase()}
|
||||
@@ -606,24 +527,18 @@ function AppErrorsPage() {
|
||||
)}
|
||||
{bug.feedBack && (
|
||||
<Box>
|
||||
<Text size="xs" fw={700} c="dimmed" mb={4}>DEVELOPER FEEDBACK</Text>
|
||||
<Text size="xs" fw={700} c="dimmed" mb={4} tt="uppercase">Developer Feedback</Text>
|
||||
<Text size="sm" style={{ whiteSpace: 'pre-wrap' }}>{bug.feedBack}</Text>
|
||||
</Box>
|
||||
)}
|
||||
</SimpleGrid>
|
||||
)}
|
||||
|
||||
{/* Stack Trace */}
|
||||
{bug.stackTrace && (
|
||||
<Box>
|
||||
<Group justify="space-between" mb={4}>
|
||||
<Text size="xs" fw={700} c="dimmed">STACK TRACE</Text>
|
||||
<Button
|
||||
variant="subtle"
|
||||
size="compact-xs"
|
||||
color="gray"
|
||||
onClick={() => toggleStackTrace(bug.id)}
|
||||
>
|
||||
<Group justify="space-between" mb={showStackTrace[bug.id] ? 8 : 0}>
|
||||
<Text size="xs" fw={700} c="dimmed" tt="uppercase">Stack Trace</Text>
|
||||
<Button variant="subtle" size="compact-xs" color="gray" onClick={() => toggleStackTrace(bug.id)}>
|
||||
{showStackTrace[bug.id] ? 'Hide' : 'Show'}
|
||||
</Button>
|
||||
</Group>
|
||||
@@ -631,12 +546,7 @@ function AppErrorsPage() {
|
||||
<Code
|
||||
block
|
||||
color="red"
|
||||
style={{
|
||||
fontFamily: 'monospace',
|
||||
whiteSpace: 'pre-wrap',
|
||||
fontSize: '11px',
|
||||
border: '1px solid var(--mantine-color-default-border)',
|
||||
}}
|
||||
style={{ fontFamily: 'monospace', whiteSpace: 'pre-wrap', fontSize: 11, border: '1px solid var(--mantine-color-default-border)' }}
|
||||
>
|
||||
{bug.stackTrace}
|
||||
</Code>
|
||||
@@ -644,17 +554,18 @@ function AppErrorsPage() {
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Images */}
|
||||
{bug.images && bug.images.length > 0 && (
|
||||
<Box>
|
||||
<Group gap="xs" mb={8}>
|
||||
<TbPhoto size={16} color="gray" />
|
||||
<Text size="xs" fw={700} c="dimmed">ATTACHED IMAGES ({bug.images.length})</Text>
|
||||
<TbPhoto size={14} color="gray" />
|
||||
<Text size="xs" fw={700} c="dimmed" tt="uppercase">
|
||||
Attached Images ({bug.images.length})
|
||||
</Text>
|
||||
</Group>
|
||||
<SimpleGrid cols={{ base: 2, sm: 4 }} spacing="xs">
|
||||
{bug.images.map((img: any) => (
|
||||
<Tooltip key={img.id} label="Click to preview" withArrow>
|
||||
<Paper
|
||||
key={img.id}
|
||||
withBorder
|
||||
radius="md"
|
||||
style={{ overflow: 'hidden', cursor: 'zoom-in' }}
|
||||
@@ -662,25 +573,22 @@ function AppErrorsPage() {
|
||||
>
|
||||
<Image src={img.imageUrl} alt="Error screenshot" height={100} fit="cover" />
|
||||
</Paper>
|
||||
</Tooltip>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Logs / History */}
|
||||
{bug.logs && bug.logs.length > 0 && (
|
||||
<Box>
|
||||
<Group justify="space-between" mb={showLogs[bug.id] ? 12 : 0}>
|
||||
<Group gap="xs">
|
||||
<TbHistory size={16} color="gray" />
|
||||
<Text size="xs" fw={700} c="dimmed">ACTIVITY LOG ({bug.logs.length})</Text>
|
||||
<TbHistory size={14} color="gray" />
|
||||
<Text size="xs" fw={700} c="dimmed" tt="uppercase">
|
||||
Activity Log ({bug.logs.length})
|
||||
</Text>
|
||||
</Group>
|
||||
<Button
|
||||
variant="subtle"
|
||||
size="compact-xs"
|
||||
color="gray"
|
||||
onClick={() => toggleLogs(bug.id)}
|
||||
>
|
||||
<Button variant="subtle" size="compact-xs" color="gray" onClick={() => toggleLogs(bug.id)}>
|
||||
{showLogs[bug.id] ? 'Hide' : 'Show'}
|
||||
</Button>
|
||||
</Group>
|
||||
@@ -690,12 +598,16 @@ function AppErrorsPage() {
|
||||
<Timeline.Item
|
||||
key={log.id}
|
||||
bullet={
|
||||
<Badge size="xs" circle color={log.status === 'RESOLVED' ? 'teal' : 'blue'}> </Badge>
|
||||
<Badge size="xs" circle color={STATUS_COLOR[log.status] ?? 'blue'}> </Badge>
|
||||
}
|
||||
title={
|
||||
<Text size="sm" fw={600}>
|
||||
{STATUS_LABEL[log.status] ?? log.status}
|
||||
</Text>
|
||||
}
|
||||
title={<Text size="sm" fw={600}>{log.status}</Text>}
|
||||
>
|
||||
<Text size="xs" c="dimmed" mb={4}>
|
||||
{new Date(log.createdAt).toLocaleString()} by {log.user?.name || 'Unknown'}
|
||||
{dayjs(log.createdAt).format('D MMM YYYY, HH:mm')} · {log.user?.name ?? 'Unknown'}
|
||||
</Text>
|
||||
<Text size="sm">{log.description}</Text>
|
||||
</Timeline.Item>
|
||||
@@ -706,16 +618,30 @@ function AppErrorsPage() {
|
||||
)}
|
||||
|
||||
<Group justify="flex-end" pt="sm">
|
||||
<Button variant="light" size="compact-xs" color="blue" onClick={() => {
|
||||
<Button
|
||||
variant="light"
|
||||
size="compact-sm"
|
||||
color="blue"
|
||||
onClick={() => {
|
||||
setSelectedBugId(bug.id)
|
||||
setFeedbackForm({ feedBack: bug.feedBack || '' })
|
||||
openFeedbackModal()
|
||||
}}>Developer Feedback</Button>
|
||||
<Button variant="light" size="compact-xs" color="teal" onClick={() => {
|
||||
}}
|
||||
>
|
||||
Developer Feedback
|
||||
</Button>
|
||||
<Button
|
||||
variant="light"
|
||||
size="compact-sm"
|
||||
color="teal"
|
||||
onClick={() => {
|
||||
setSelectedBugId(bug.id)
|
||||
setUpdateForm({ status: bug.status, description: '' })
|
||||
openUpdateModal()
|
||||
}}>Update Status</Button>
|
||||
}}
|
||||
>
|
||||
Update Status
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Accordion.Panel>
|
||||
@@ -726,7 +652,7 @@ function AppErrorsPage() {
|
||||
|
||||
{totalPages > 1 && (
|
||||
<Group justify="center" mt="xl">
|
||||
<Pagination total={totalPages} value={page} onChange={setPage} radius="xl" />
|
||||
<Pagination total={totalPages} value={page} onChange={setPage} size="sm" radius="xl" />
|
||||
</Group>
|
||||
)}
|
||||
</Paper>
|
||||
|
||||
@@ -4,6 +4,7 @@ import { ErrorDataTable } from '@/frontend/components/ErrorDataTable'
|
||||
import { SummaryCard } from '@/frontend/components/SummaryCard'
|
||||
import { useSession } from '@/frontend/hooks/useAuth'
|
||||
import {
|
||||
ActionIcon,
|
||||
Badge,
|
||||
Button,
|
||||
Group,
|
||||
@@ -14,7 +15,8 @@ import {
|
||||
Text,
|
||||
Textarea,
|
||||
TextInput,
|
||||
Title
|
||||
Title,
|
||||
Tooltip,
|
||||
} from '@mantine/core'
|
||||
import { useDisclosure } from '@mantine/hooks'
|
||||
import { notifications } from '@mantine/notifications'
|
||||
@@ -24,7 +26,8 @@ import {
|
||||
TbActivity,
|
||||
TbAlertTriangle,
|
||||
TbBuildingCommunity,
|
||||
TbVersions
|
||||
TbRefresh,
|
||||
TbVersions,
|
||||
} from 'react-icons/tb'
|
||||
import useSWR from 'swr'
|
||||
import { API_URLS } from '../config/api'
|
||||
@@ -43,14 +46,12 @@ function AppOverviewPage() {
|
||||
const { data: session } = useSession()
|
||||
const isDeveloper = session?.user?.role === 'DEVELOPER'
|
||||
|
||||
// Form State
|
||||
const [latestVersion, setLatestVersion] = useState('')
|
||||
const [minVersion, setMinVersion] = useState('')
|
||||
const [messageUpdate, setMessageUpdate] = useState('')
|
||||
const [maintenance, setMaintenance] = useState(false)
|
||||
const [isSaving, setIsSaving] = useState(false)
|
||||
|
||||
// Data Fetching
|
||||
const { data: gridRes, isLoading: gridLoading, mutate: mutateGrid } = useSWR(isDesaPlus ? API_URLS.getGridOverview() : null, fetcher)
|
||||
const { data: dailyRes, isLoading: dailyLoading, mutate: mutateDaily } = useSWR(isDesaPlus ? API_URLS.getDailyActivity() : null, fetcher)
|
||||
const { data: comparisonRes, isLoading: comparisonLoading, mutate: mutateComparison } = useSWR(isDesaPlus ? API_URLS.getComparisonActivity() : null, fetcher)
|
||||
@@ -64,7 +65,6 @@ function AppOverviewPage() {
|
||||
const dailyData = dailyRes?.data || []
|
||||
const comparisonData = comparisonRes?.data || []
|
||||
|
||||
// Initialize form when data loads or modal opens
|
||||
useEffect(() => {
|
||||
if (grid?.version && versionModalOpened) {
|
||||
setLatestVersion(grid.version.mobile_latest_version || '')
|
||||
@@ -98,37 +98,33 @@ function AppOverviewPage() {
|
||||
await fetch(API_URLS.createLog(), {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ type: 'UPDATE', message: `Update version information: ${JSON.stringify({ latestVersion, minVersion, maintenance, messageUpdate })}` })
|
||||
body: JSON.stringify({ type: 'UPDATE', message: `Updated version info: latest=${latestVersion}, min=${minVersion}, maintenance=${maintenance}` }),
|
||||
}).catch(console.error)
|
||||
|
||||
notifications.show({
|
||||
title: 'Update Successful',
|
||||
message: 'Application version information has been updated.',
|
||||
color: 'teal',
|
||||
})
|
||||
notifications.show({ title: 'Updated', message: 'Application version information has been saved.', color: 'teal' })
|
||||
mutateGrid()
|
||||
closeVersionModal()
|
||||
} else {
|
||||
notifications.show({
|
||||
title: 'Update Failed',
|
||||
message: 'Failed to update version information. Please check your data.',
|
||||
color: 'red',
|
||||
})
|
||||
notifications.show({ title: 'Failed', message: 'Could not update version info. Please try again.', color: 'red' })
|
||||
}
|
||||
} catch (error) {
|
||||
notifications.show({
|
||||
title: 'Network Error',
|
||||
message: 'Could not connect to the server. Please try again later.',
|
||||
color: 'red',
|
||||
})
|
||||
} catch {
|
||||
notifications.show({ title: 'Network Error', message: 'Could not connect to the server.', color: 'red' })
|
||||
} finally {
|
||||
setIsSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const maintenanceOn = grid?.version?.mobile_maintenance === 'true'
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal opened={versionModalOpened} onClose={closeVersionModal} title="Update Version Information" radius="md">
|
||||
<Modal
|
||||
opened={versionModalOpened}
|
||||
onClose={closeVersionModal}
|
||||
title={<Text fw={700} size="lg">Update Version Info</Text>}
|
||||
radius="xl"
|
||||
overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<TextInput
|
||||
label="Active Version"
|
||||
@@ -156,22 +152,39 @@ function AppOverviewPage() {
|
||||
checked={maintenance}
|
||||
onChange={(e) => setMaintenance(e.currentTarget.checked)}
|
||||
/>
|
||||
<Button fullWidth onClick={handleSaveVersion} loading={isSaving}>Save Changes</Button>
|
||||
<Button
|
||||
fullWidth
|
||||
mt="md"
|
||||
variant="gradient"
|
||||
gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
|
||||
onClick={handleSaveVersion}
|
||||
loading={isSaving}
|
||||
>
|
||||
Save Changes
|
||||
</Button>
|
||||
</Stack>
|
||||
</Modal>
|
||||
|
||||
<Stack gap="xl">
|
||||
<Group justify="space-between">
|
||||
<Stack gap={0}>
|
||||
<Group justify="space-between" align="flex-start">
|
||||
<Stack gap={4}>
|
||||
<Title order={3}>Overview</Title>
|
||||
<Text size="sm" c="dimmed">Detailed metrics for {isDesaPlus ? 'Desa+' : appId}</Text>
|
||||
<Text size="sm" c="dimmed">
|
||||
Real-time metrics and activity for {isDesaPlus ? 'Desa+' : appId}.
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
{/* <Group gap="md">
|
||||
<ActionIcon variant="light" color="brand-blue" size="lg" radius="md" onClick={handleRefresh}>
|
||||
<TbRefresh size={20} />
|
||||
<Tooltip label="Refresh data" withArrow>
|
||||
<ActionIcon
|
||||
variant="light"
|
||||
color="brand-blue"
|
||||
size="lg"
|
||||
radius="md"
|
||||
onClick={handleRefresh}
|
||||
loading={gridLoading || dailyLoading || comparisonLoading}
|
||||
>
|
||||
<TbRefresh size={18} />
|
||||
</ActionIcon>
|
||||
</Group> */}
|
||||
</Tooltip>
|
||||
</Group>
|
||||
|
||||
<SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }} spacing="lg">
|
||||
@@ -185,12 +198,12 @@ function AppOverviewPage() {
|
||||
<Group justify="space-between" mt="md">
|
||||
<Stack gap={0}>
|
||||
<Text size="xs" c="dimmed">Min. Version</Text>
|
||||
<Text size="sm" fw={600}>{grid?.version?.mobile_minimum_version || '-'}</Text>
|
||||
<Text size="sm" fw={600}>{grid?.version?.mobile_minimum_version || '—'}</Text>
|
||||
</Stack>
|
||||
<Stack gap={0} align="flex-end">
|
||||
<Text size="xs" c="dimmed">Maintenance</Text>
|
||||
<Badge size="sm" color={grid?.version?.mobile_maintenance === 'true' ? 'red' : 'gray'} variant="light">
|
||||
{grid?.version?.mobile_maintenance?.toUpperCase() || 'FALSE'}
|
||||
<Badge size="sm" color={maintenanceOn ? 'orange' : 'teal'} variant="light">
|
||||
{maintenanceOn ? 'On' : 'Off'}
|
||||
</Badge>
|
||||
</Stack>
|
||||
</Group>
|
||||
@@ -198,35 +211,44 @@ function AppOverviewPage() {
|
||||
|
||||
<SummaryCard
|
||||
title="Total Activity Today"
|
||||
value={gridLoading ? '...' : (grid?.activity?.today?.toLocaleString() || '0')}
|
||||
value={gridLoading ? '...' : (grid?.activity?.today?.toLocaleString() ?? '0')}
|
||||
icon={TbActivity}
|
||||
color="teal"
|
||||
trend={grid?.activity?.increase ? { value: `${grid.activity.increase}%`, positive: grid.activity.increase > 0 } : undefined}
|
||||
trend={grid?.activity?.increase
|
||||
? { value: `${grid.activity.increase}%`, positive: grid.activity.increase > 0 }
|
||||
: undefined}
|
||||
/>
|
||||
|
||||
<SummaryCard
|
||||
title="Total Villages Active"
|
||||
value={gridLoading ? '...' : (grid?.village?.active || '0')}
|
||||
title="Active Villages"
|
||||
value={gridLoading ? '...' : (grid?.village?.active ?? '0')}
|
||||
icon={TbBuildingCommunity}
|
||||
color="indigo"
|
||||
onClick={() => navigate({ to: `/apps/${appId}/villages` })}
|
||||
>
|
||||
<Group justify="space-between" mt="md">
|
||||
<Text size="xs" c="dimmed">Nonactive Villages</Text>
|
||||
<Badge size="sm" color="red" variant="light">{grid?.village?.inactive || 0}</Badge>
|
||||
<Text size="xs" c="dimmed">Inactive</Text>
|
||||
<Badge size="sm" color="red" variant="light">{grid?.village?.inactive ?? 0}</Badge>
|
||||
</Group>
|
||||
</SummaryCard>
|
||||
|
||||
<SummaryCard
|
||||
title="Errors Open"
|
||||
value={appLoading ? '...' : (appData?.errors || '0')}
|
||||
title="Open Errors"
|
||||
value={appLoading ? '...' : (appData?.errors ?? 0)}
|
||||
icon={TbAlertTriangle}
|
||||
color="red"
|
||||
isError={true}
|
||||
isError
|
||||
onClick={() => navigate({ to: `/apps/${appId}/errors` })}
|
||||
/>
|
||||
</SimpleGrid>
|
||||
|
||||
<Group justify="space-between" align="flex-end">
|
||||
<Stack gap={2}>
|
||||
<Title order={4}>Analytics</Title>
|
||||
<Text size="sm" c="dimmed">Activity trends and village comparisons.</Text>
|
||||
</Stack>
|
||||
</Group>
|
||||
|
||||
<SimpleGrid cols={{ base: 1, lg: 2 }} spacing="lg">
|
||||
<VillageActivityLineChart data={dailyData} isLoading={dailyLoading} />
|
||||
<VillageComparisonBarChart data={comparisonData} isLoading={comparisonLoading} />
|
||||
|
||||
@@ -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,123 +82,103 @@ 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 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>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
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">
|
||||
<Group justify="space-between" align="flex-start">
|
||||
<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 size="sm" c="dimmed">
|
||||
{isLoading
|
||||
? 'Loading logs...'
|
||||
: `${(response?.data?.total ?? 0).toLocaleString()} events across all villages`}
|
||||
</Text>
|
||||
</Stack>
|
||||
{/* <Button
|
||||
variant="light"
|
||||
color="gray"
|
||||
leftSection={<TbDownload size={18} />}
|
||||
radius="md"
|
||||
size="md"
|
||||
>
|
||||
Export
|
||||
</Button> */}
|
||||
</Group>
|
||||
|
||||
<Paper withBorder p="md" className="glass">
|
||||
<TextInput
|
||||
placeholder="Search action or village..."
|
||||
leftSection={<TbSearch size={18} />}
|
||||
size="md"
|
||||
placeholder="Search by action or village... (min. 3 characters)"
|
||||
leftSection={<TbSearch size={16} />}
|
||||
size="sm"
|
||||
rightSection={
|
||||
search ? (
|
||||
<ActionIcon variant="transparent" color="gray" onClick={handleClearSearch} size="md">
|
||||
<TbX size={18} />
|
||||
<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"
|
||||
style={{ maxWidth: 500 }}
|
||||
ml={40}
|
||||
/>
|
||||
</Stack>
|
||||
</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"
|
||||
className="data-table"
|
||||
verticalSpacing="sm"
|
||||
horizontalSpacing="lg"
|
||||
highlightOnHover
|
||||
withColumnBorders={false}
|
||||
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>
|
||||
<Text size="xs" fw={600}>{log.createdAt}</Text>
|
||||
) : (
|
||||
<Stack gap={0}>
|
||||
<Text size="xs" fw={700}>
|
||||
<Text size="xs" fw={600}>
|
||||
{log.createdAt.split(' ').slice(1).join(' ')}
|
||||
</Text>
|
||||
<Text size="xs" c="dimmed">
|
||||
@@ -198,17 +186,16 @@ function AppLogsPage() {
|
||||
</Text>
|
||||
</Stack>
|
||||
)}
|
||||
</Group>
|
||||
</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>
|
||||
@@ -216,20 +203,21 @@ function AppLogsPage() {
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Badge
|
||||
variant="dot"
|
||||
variant="light"
|
||||
color={getActionColor(log.action)}
|
||||
radius="sm"
|
||||
size="xs"
|
||||
styles={{
|
||||
root: { fontWeight: 800 },
|
||||
label: { textOverflow: 'clip', overflow: 'visible' }
|
||||
}}
|
||||
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}
|
||||
|
||||
@@ -1,38 +1,101 @@
|
||||
import { DashboardLayout } from '@/frontend/components/DashboardLayout'
|
||||
import { APP_CONFIGS } from '@/frontend/config/appMenus'
|
||||
import {
|
||||
Badge,
|
||||
Box,
|
||||
Container,
|
||||
Divider,
|
||||
Group,
|
||||
Skeleton,
|
||||
Stack,
|
||||
Text,
|
||||
Title
|
||||
Title,
|
||||
} from '@mantine/core'
|
||||
import { createFileRoute, Outlet, useNavigate, useParams } from '@tanstack/react-router'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { createFileRoute, Outlet, useParams } from '@tanstack/react-router'
|
||||
import { TbAlertTriangle, TbTools } from 'react-icons/tb'
|
||||
|
||||
export const Route = createFileRoute('/apps/$appId')({
|
||||
component: AppDetailLayout,
|
||||
})
|
||||
|
||||
const STATUS_COLOR: Record<string, string> = {
|
||||
active: 'teal',
|
||||
warning: 'orange',
|
||||
error: 'red',
|
||||
}
|
||||
const STATUS_LABEL: Record<string, string> = {
|
||||
active: 'Active',
|
||||
warning: 'Warning',
|
||||
error: 'Error',
|
||||
}
|
||||
|
||||
function AppDetailLayout() {
|
||||
const { appId } = useParams({ from: '/apps/$appId' })
|
||||
const navigate = useNavigate()
|
||||
|
||||
// Format app ID for display (e.g., desa-plus -> Desa+)
|
||||
const appName = appId
|
||||
.split('-')
|
||||
.map(word => word.charAt(0).toUpperCase() + word.slice(1))
|
||||
.join(' ')
|
||||
.replace('Plus', '+')
|
||||
const { data: appData, isLoading } = useQuery({
|
||||
queryKey: ['apps', appId],
|
||||
queryFn: () => fetch(`/api/apps/${appId}`).then((r) => r.json()),
|
||||
staleTime: 30_000,
|
||||
})
|
||||
|
||||
const configName = APP_CONFIGS[appId]?.name
|
||||
const displayName = appData?.name ?? configName ?? appId
|
||||
|
||||
const statusKey = appData?.maintenance ? 'maintenance' : (appData?.status ?? 'active')
|
||||
const statusColor = appData?.maintenance ? 'gray' : (STATUS_COLOR[appData?.status] ?? 'gray')
|
||||
const statusLabel = appData?.maintenance ? 'Maintenance' : (STATUS_LABEL[appData?.status] ?? appData?.status)
|
||||
|
||||
return (
|
||||
<DashboardLayout>
|
||||
<Container size="xl" py="lg">
|
||||
<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>
|
||||
<Text c="dimmed" size="sm" fw={500}>Application ID: <span style={{ fontFamily: 'monospace' }}>{appId}</span></Text>
|
||||
<Group justify="space-between" align="flex-start">
|
||||
<Stack gap={6}>
|
||||
<Group gap="sm" align="center">
|
||||
{isLoading ? (
|
||||
<Skeleton height={36} width={180} radius="md" />
|
||||
) : (
|
||||
<Title order={2} className="gradient-text">{displayName}</Title>
|
||||
)}
|
||||
{!isLoading && appData && (
|
||||
<Badge color={statusColor} variant="dot" size="md">
|
||||
{statusLabel}
|
||||
</Badge>
|
||||
)}
|
||||
</Group>
|
||||
|
||||
<Group gap="xs" align="center">
|
||||
<Text size="xs" c="dimmed" fw={500} style={{ fontFamily: 'monospace' }}>
|
||||
{appId}
|
||||
</Text>
|
||||
{isLoading ? (
|
||||
<Skeleton height={20} width={60} radius="xl" />
|
||||
) : (
|
||||
<>
|
||||
{(appData?.errors ?? 0) > 0 && (
|
||||
<Badge
|
||||
variant="light"
|
||||
color="red"
|
||||
size="sm"
|
||||
leftSection={<TbAlertTriangle size={10} />}
|
||||
>
|
||||
{appData.errors} open {appData.errors === 1 ? 'error' : 'errors'}
|
||||
</Badge>
|
||||
)}
|
||||
{appData?.maintenance && (
|
||||
<Badge
|
||||
variant="light"
|
||||
color="orange"
|
||||
size="sm"
|
||||
leftSection={<TbTools size={10} />}
|
||||
>
|
||||
Maintenance mode
|
||||
</Badge>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Group>
|
||||
</Stack>
|
||||
</Group>
|
||||
|
||||
|
||||
@@ -4,9 +4,9 @@ import {
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
Container,
|
||||
Divider,
|
||||
Group,
|
||||
Loader,
|
||||
Modal,
|
||||
Pagination,
|
||||
Paper,
|
||||
@@ -14,18 +14,20 @@ import {
|
||||
Select,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Switch,
|
||||
Table,
|
||||
Text,
|
||||
TextInput,
|
||||
ThemeIcon,
|
||||
Title,
|
||||
Switch,
|
||||
Tooltip,
|
||||
} from '@mantine/core'
|
||||
import { useDisclosure, useMediaQuery } from '@mantine/hooks'
|
||||
import { notifications } from '@mantine/notifications'
|
||||
import { createFileRoute, useParams } from '@tanstack/react-router'
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
TbAlertCircle,
|
||||
TbBriefcase,
|
||||
TbCircleCheck,
|
||||
TbCircleX,
|
||||
@@ -160,9 +162,7 @@ function UsersIndexPage() {
|
||||
try {
|
||||
const res = await fetch(API_URLS.createUser(), {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(form)
|
||||
})
|
||||
|
||||
@@ -172,7 +172,7 @@ function UsersIndexPage() {
|
||||
await fetch(API_URLS.createLog(), {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ type: 'CREATE', message: `Didaftarkan user (${appId}) baru: ${form.name}-${form.nik}` })
|
||||
body: JSON.stringify({ type: 'CREATE', message: `New user registered (${appId}): ${form.name} - ${form.nik}` })
|
||||
}).catch(console.error)
|
||||
|
||||
notifications.show({
|
||||
@@ -181,19 +181,9 @@ function UsersIndexPage() {
|
||||
color: 'teal',
|
||||
icon: <TbCircleCheck size={18} />
|
||||
})
|
||||
mutate() // Refresh user list
|
||||
mutate()
|
||||
close()
|
||||
setForm({
|
||||
name: '',
|
||||
nik: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
gender: '',
|
||||
idUserRole: '',
|
||||
idVillage: '',
|
||||
idGroup: '',
|
||||
idPosition: ''
|
||||
})
|
||||
setForm({ name: '', nik: '', phone: '', email: '', gender: '', idUserRole: '', idVillage: '', idGroup: '', idPosition: '' })
|
||||
} else {
|
||||
notifications.show({
|
||||
title: 'Error',
|
||||
@@ -202,12 +192,8 @@ function UsersIndexPage() {
|
||||
icon: <TbCircleX size={18} />
|
||||
})
|
||||
}
|
||||
} catch (e) {
|
||||
notifications.show({
|
||||
title: 'Network Error',
|
||||
message: 'Unable to connect to the server.',
|
||||
color: 'red'
|
||||
})
|
||||
} catch {
|
||||
notifications.show({ title: 'Network Error', message: 'Unable to connect to the server.', color: 'red' })
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
@@ -249,9 +235,7 @@ function UsersIndexPage() {
|
||||
try {
|
||||
const res = await fetch(API_URLS.editUser(), {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(editForm)
|
||||
})
|
||||
|
||||
@@ -261,7 +245,7 @@ function UsersIndexPage() {
|
||||
await fetch(API_URLS.createLog(), {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ type: 'UPDATE', message: `Data user (${appId}) diperbarui: ${editForm.name}-${editForm.id}` })
|
||||
body: JSON.stringify({ type: 'UPDATE', message: `User updated (${appId}): ${editForm.name} - ${editForm.id}` })
|
||||
}).catch(console.error)
|
||||
|
||||
notifications.show({
|
||||
@@ -280,12 +264,8 @@ function UsersIndexPage() {
|
||||
icon: <TbCircleX size={18} />
|
||||
})
|
||||
}
|
||||
} catch (e) {
|
||||
notifications.show({
|
||||
title: 'Network Error',
|
||||
message: 'Unable to connect to the server.',
|
||||
color: 'red'
|
||||
})
|
||||
} catch {
|
||||
notifications.show({ title: 'Network Error', message: 'Unable to connect to the server.', color: 'red' })
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
@@ -309,55 +289,30 @@ function UsersIndexPage() {
|
||||
|
||||
if (!isDesaPlus) {
|
||||
return (
|
||||
<Container size="xl" py="xl">
|
||||
<Paper p="xl" radius="xl" className="glass" style={{ textAlign: 'center' }}>
|
||||
<TbUsers size={48} color="gray" opacity={0.5} />
|
||||
<Title order={3} mt="md">User Management</Title>
|
||||
<Text c="dimmed">This feature is currently customized for Desa+. Other apps coming soon.</Text>
|
||||
<Paper withBorder radius="2xl" className="glass" p="xl">
|
||||
<Stack align="center" gap="xs" py="xl">
|
||||
<TbUsers size={40} style={{ opacity: 0.25 }} />
|
||||
<Text fw={600} size="sm">User Management</Text>
|
||||
<Text size="sm" c="dimmed">This feature is currently available for Desa+. Other apps coming soon.</Text>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack gap="xl" py="md">
|
||||
<Paper withBorder radius="2xl" p="xl" className="glass" style={{ borderLeft: '6px solid #2563EB' }}>
|
||||
<Stack gap="lg">
|
||||
<Group justify="space-between" align="center">
|
||||
<Stack gap={4}>
|
||||
<Group gap="xs">
|
||||
<ThemeIcon variant="light" color="brand-blue" size="lg" radius="md">
|
||||
<TbUsers size={22} />
|
||||
</ThemeIcon>
|
||||
<Title order={3}>User Management</Title>
|
||||
</Group>
|
||||
<Text size="sm" c="dimmed" ml={40}>
|
||||
{isLoading ? 'Loading users...' : `${response?.data?.total || 0} users registered in the Desa+ system`}
|
||||
</Text>
|
||||
</Stack>
|
||||
<Button
|
||||
variant="gradient"
|
||||
gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
|
||||
leftSection={<TbPlus size={18} />}
|
||||
radius="md"
|
||||
size="md"
|
||||
onClick={open}
|
||||
>
|
||||
Add User
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
{/* Add User Modal */}
|
||||
<Modal
|
||||
opened={opened}
|
||||
onClose={close}
|
||||
title={<Text fw={700} size="lg">Add New User</Text>}
|
||||
radius="xl"
|
||||
radius="md"
|
||||
size="lg"
|
||||
overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Box>
|
||||
<Text size="xs" fw={700} c="dimmed" mb={8} style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }}>
|
||||
<Text size="xs" fw={700} c="dimmed" mb={8} tt="uppercase" style={{ letterSpacing: '0.05em' }}>
|
||||
Personal Information
|
||||
</Text>
|
||||
<SimpleGrid cols={2} spacing="md">
|
||||
@@ -429,26 +384,22 @@ function UsersIndexPage() {
|
||||
mt="sm"
|
||||
required
|
||||
value={form.idVillage}
|
||||
onChange={(v) => {
|
||||
setForm(f => ({ ...f, idVillage: v || '', idGroup: '', idPosition: '' }))
|
||||
}}
|
||||
onChange={(v) => setForm(f => ({ ...f, idVillage: v || '', idGroup: '', idPosition: '' }))}
|
||||
/>
|
||||
|
||||
<SimpleGrid cols={2} spacing="md" mt="sm">
|
||||
<Select
|
||||
label="Group"
|
||||
placeholder={form.idVillage ? "Select group" : "Select village first"}
|
||||
placeholder={form.idVillage ? 'Select group' : 'Select village first'}
|
||||
data={groupsOptions}
|
||||
disabled={!form.idVillage}
|
||||
required
|
||||
value={form.idGroup}
|
||||
onChange={(v) => {
|
||||
setForm(f => ({ ...f, idGroup: v || '', idPosition: '' }))
|
||||
}}
|
||||
onChange={(v) => setForm(f => ({ ...f, idGroup: v || '', idPosition: '' }))}
|
||||
/>
|
||||
<Select
|
||||
label="Position"
|
||||
placeholder={form.idGroup ? "Select position" : "Select group first"}
|
||||
placeholder={form.idGroup ? 'Select position' : 'Select group first'}
|
||||
data={positionsOptions}
|
||||
disabled={!form.idGroup}
|
||||
value={form.idPosition || ''}
|
||||
@@ -461,7 +412,6 @@ function UsersIndexPage() {
|
||||
fullWidth
|
||||
mt="lg"
|
||||
radius="md"
|
||||
size="md"
|
||||
variant="gradient"
|
||||
gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
|
||||
loading={isSubmitting}
|
||||
@@ -472,17 +422,18 @@ function UsersIndexPage() {
|
||||
</Stack>
|
||||
</Modal>
|
||||
|
||||
{/* Edit User Modal */}
|
||||
<Modal
|
||||
opened={editOpened}
|
||||
onClose={closeEdit}
|
||||
title={<Text fw={700} size="lg">Edit User</Text>}
|
||||
radius="xl"
|
||||
radius="md"
|
||||
size="lg"
|
||||
overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Box>
|
||||
<Text size="xs" fw={700} c="dimmed" mb={8} style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }}>
|
||||
<Text size="xs" fw={700} c="dimmed" mb={8} tt="uppercase" style={{ letterSpacing: '0.05em' }}>
|
||||
Personal Information
|
||||
</Text>
|
||||
<SimpleGrid cols={2} spacing="md">
|
||||
@@ -554,26 +505,22 @@ function UsersIndexPage() {
|
||||
mt="sm"
|
||||
required
|
||||
value={editForm.idVillage}
|
||||
onChange={(v) => {
|
||||
setEditForm(f => ({ ...f, idVillage: v || '', idGroup: '', idPosition: '' }))
|
||||
}}
|
||||
onChange={(v) => setEditForm(f => ({ ...f, idVillage: v || '', idGroup: '', idPosition: '' }))}
|
||||
/>
|
||||
|
||||
<SimpleGrid cols={2} spacing="md" mt="sm">
|
||||
<Select
|
||||
label="Group"
|
||||
placeholder={editForm.idVillage ? "Select group" : "Select village first"}
|
||||
placeholder={editForm.idVillage ? 'Select group' : 'Select village first'}
|
||||
data={groupsOptions}
|
||||
disabled={!editForm.idVillage}
|
||||
required
|
||||
value={editForm.idGroup}
|
||||
onChange={(v) => {
|
||||
setEditForm(f => ({ ...f, idGroup: v || '', idPosition: '' }))
|
||||
}}
|
||||
onChange={(v) => setEditForm(f => ({ ...f, idGroup: v || '', idPosition: '' }))}
|
||||
/>
|
||||
<Select
|
||||
label="Position"
|
||||
placeholder={editForm.idGroup ? "Select position" : "Select group first"}
|
||||
placeholder={editForm.idGroup ? 'Select position' : 'Select group first'}
|
||||
data={positionsOptions}
|
||||
disabled={!editForm.idGroup}
|
||||
value={editForm.idPosition || ''}
|
||||
@@ -603,7 +550,6 @@ function UsersIndexPage() {
|
||||
fullWidth
|
||||
mt="lg"
|
||||
radius="md"
|
||||
size="md"
|
||||
variant="gradient"
|
||||
gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
|
||||
loading={isSubmitting}
|
||||
@@ -614,43 +560,71 @@ function UsersIndexPage() {
|
||||
</Stack>
|
||||
</Modal>
|
||||
|
||||
{/* Header */}
|
||||
<Group justify="space-between" align="flex-start">
|
||||
<Stack gap={4}>
|
||||
<Title order={3}>User Management</Title>
|
||||
<Text size="sm" c="dimmed">
|
||||
{isLoading ? 'Loading users...' : `${response?.data?.total ?? 0} users registered in the Desa+ system`}
|
||||
</Text>
|
||||
</Stack>
|
||||
<Button
|
||||
variant="gradient"
|
||||
gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
|
||||
leftSection={<TbPlus size={18} />}
|
||||
size="sm"
|
||||
onClick={open}
|
||||
>
|
||||
Add User
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
{/* Search / Filter */}
|
||||
<Paper withBorder p="md" className="glass">
|
||||
<TextInput
|
||||
placeholder="Search name, NIK, or email..."
|
||||
leftSection={<TbSearch size={18} />}
|
||||
size="md"
|
||||
placeholder="Search name, NIK, or email... (min. 3 characters)"
|
||||
leftSection={<TbSearch size={16} />}
|
||||
size="sm"
|
||||
rightSection={
|
||||
search ? (
|
||||
<ActionIcon variant="transparent" color="gray" onClick={handleClearSearch} size="md">
|
||||
<TbX size={18} />
|
||||
<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"
|
||||
style={{ maxWidth: 500 }}
|
||||
ml={40}
|
||||
/>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
{isLoading ? (
|
||||
<Paper p="xl" radius="xl" withBorder style={{ textAlign: 'center' }}>
|
||||
<Text c="dimmed">Loading user data...</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 data 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 users from the API.</Text>
|
||||
</Stack>
|
||||
</Paper>
|
||||
) : users.length === 0 ? (
|
||||
<Paper p="xl" radius="xl" withBorder style={{ textAlign: 'center' }}>
|
||||
<TbUsers size={40} color="gray" opacity={0.4} />
|
||||
<Text c="dimmed" mt="md">No users match your criteria.</Text>
|
||||
<Paper withBorder radius="2xl" className="glass" p="md">
|
||||
<Stack align="center" gap="xs" py="xl">
|
||||
<TbUsers size={32} style={{ opacity: 0.25 }} />
|
||||
<Text size="sm" c="dimmed">
|
||||
{searchQuery ? 'No users match your search.' : 'No users found.'}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Paper>
|
||||
) : (
|
||||
<Paper withBorder radius="2xl" className="glass" style={{ overflow: 'hidden' }}>
|
||||
<ScrollArea h={isMobile ? undefined : 'auto'} offsetScrollbars>
|
||||
<Table
|
||||
className="data-table"
|
||||
verticalSpacing="md"
|
||||
horizontalSpacing="md"
|
||||
highlightOnHover
|
||||
@@ -658,21 +632,25 @@ function UsersIndexPage() {
|
||||
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 : '28%' }}>User & ID</Table.Th>
|
||||
<Table.Th style={{ border: 'none', width: isMobile ? undefined : '25%' }}>Contact Detail</Table.Th>
|
||||
<Table.Th style={{ border: 'none', width: isMobile ? undefined : '22%' }}>Organization</Table.Th>
|
||||
<Table.Th style={{ border: 'none', width: isMobile ? undefined : '20%' }}>Role</Table.Th>
|
||||
<Table.Th style={{ border: 'none', width: isMobile ? undefined : '10%' }}>Status</Table.Th>
|
||||
<Table.Th style={{ width: isMobile ? undefined : '28%' }}>User & ID</Table.Th>
|
||||
<Table.Th style={{ width: isMobile ? undefined : '25%' }}>Contact</Table.Th>
|
||||
<Table.Th style={{ width: isMobile ? undefined : '22%' }}>Organization</Table.Th>
|
||||
<Table.Th style={{ width: isMobile ? undefined : '15%' }}>Role</Table.Th>
|
||||
<Table.Th style={{ width: isMobile ? undefined : '10%' }}>Status</Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>
|
||||
{users.map((user) => (
|
||||
<Table.Tr key={user.id} style={{ borderBottom: '1px solid rgba(255,255,255,0.05)' }} onClick={()=>{handleEditOpen(user)}}>
|
||||
<Table.Tr
|
||||
key={user.id}
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() => handleEditOpen(user)}
|
||||
>
|
||||
<Table.Td>
|
||||
<Group gap="md" wrap="nowrap">
|
||||
<Avatar
|
||||
@@ -680,15 +658,15 @@ function UsersIndexPage() {
|
||||
radius="md"
|
||||
variant="light"
|
||||
color={getRoleColor(user.role)}
|
||||
style={{ border: '1px solid rgba(255,255,255,0.1)', flexShrink: 0 }}
|
||||
style={{ flexShrink: 0 }}
|
||||
>
|
||||
{user.name.charAt(0)}
|
||||
</Avatar>
|
||||
<Stack gap={2} style={{ overflow: 'hidden' }}>
|
||||
<Text fw={700} size="sm" truncate="end" style={{ color: 'var(--mantine-color-white)' }}>{user.name}</Text>
|
||||
<Text fw={700} size="sm" truncate="end">{user.name}</Text>
|
||||
<Group gap={4} wrap="nowrap">
|
||||
<TbId size={12} color="var(--mantine-color-dimmed)" />
|
||||
<Text size="xs" c="dimmed" style={{ letterSpacing: '0.5px' }} truncate="end">{user.nik}</Text>
|
||||
<Text size="xs" c="dimmed" truncate="end">{user.nik}</Text>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Group>
|
||||
@@ -727,11 +705,10 @@ function UsersIndexPage() {
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Badge
|
||||
variant="filled"
|
||||
variant="light"
|
||||
color={getRoleColor(user.role)}
|
||||
radius="md"
|
||||
size="sm"
|
||||
fullWidth={false}
|
||||
styles={{ root: { textTransform: 'uppercase', fontWeight: 800, whiteSpace: 'nowrap' } }}
|
||||
>
|
||||
{user.role}
|
||||
@@ -740,11 +717,15 @@ function UsersIndexPage() {
|
||||
<Table.Td>
|
||||
<Stack gap={4}>
|
||||
<Group gap="xs" wrap="nowrap">
|
||||
{user.isActive ? (
|
||||
<Box style={{ width: 8, height: 8, borderRadius: '50%', background: '#10b981', boxShadow: '0 0 8px #10b981' }} />
|
||||
) : (
|
||||
<Box style={{ width: 8, height: 8, borderRadius: '50%', background: '#ef4444' }} />
|
||||
)}
|
||||
<Box
|
||||
style={{
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: '50%',
|
||||
background: user.isActive ? '#10b981' : '#ef4444',
|
||||
boxShadow: user.isActive ? '0 0 8px #10b981' : undefined,
|
||||
}}
|
||||
/>
|
||||
<Text size="xs" fw={800} c={user.isActive ? 'teal.4' : 'red.5'}>
|
||||
{user.isActive ? 'ACTIVE' : 'INACTIVE'}
|
||||
</Text>
|
||||
@@ -765,11 +746,12 @@ function UsersIndexPage() {
|
||||
)}
|
||||
|
||||
{!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}
|
||||
|
||||
@@ -4,6 +4,7 @@ import {
|
||||
Button,
|
||||
Card,
|
||||
Group,
|
||||
Loader,
|
||||
Modal,
|
||||
Paper,
|
||||
SegmentedControl,
|
||||
@@ -13,7 +14,7 @@ import {
|
||||
Textarea,
|
||||
TextInput,
|
||||
ThemeIcon,
|
||||
Title
|
||||
Title,
|
||||
} from '@mantine/core'
|
||||
import { useDisclosure } from '@mantine/hooks'
|
||||
import { notifications } from '@mantine/notifications'
|
||||
@@ -110,7 +111,7 @@ function ActivityChart({ villageId }: { villageId: string }) {
|
||||
|
||||
{isLoading ? (
|
||||
<Stack h={280} align="center" justify="center">
|
||||
<Text size="sm" c="dimmed">Loading chart data...</Text>
|
||||
<Loader type="dots" />
|
||||
</Stack>
|
||||
) : (
|
||||
<AreaChart
|
||||
@@ -195,7 +196,7 @@ function VillageDetailPage() {
|
||||
await fetch(API_URLS.createLog(), {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ type: 'UPDATE', message: `Data desa (${appId}) diperbarui: ${editForm.name}-${village.id}` })
|
||||
body: JSON.stringify({ type: 'UPDATE', message: `Village data updated (${appId}): ${editForm.name} - ${village.id}` })
|
||||
}).catch(console.error)
|
||||
|
||||
notifications.show({
|
||||
@@ -212,7 +213,7 @@ function VillageDetailPage() {
|
||||
color: 'red'
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
} catch {
|
||||
notifications.show({
|
||||
title: 'Error',
|
||||
message: 'A network error occurred.',
|
||||
@@ -243,7 +244,7 @@ function VillageDetailPage() {
|
||||
await fetch(API_URLS.createLog(), {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ type: 'UPDATE', message: `Status desa (${appId}) diperbarui (${!village.isActive ? 'activated' : 'deactivated'}): ${village.name}-${village.id}` })
|
||||
body: JSON.stringify({ type: 'UPDATE', message: `Village status updated (${appId}): ${village.name} ${!village.isActive ? 'activated' : 'deactivated'} - ${village.id}` })
|
||||
}).catch(console.error)
|
||||
|
||||
notifications.show({
|
||||
@@ -260,7 +261,7 @@ function VillageDetailPage() {
|
||||
color: 'red'
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
} catch {
|
||||
notifications.show({
|
||||
title: 'Error',
|
||||
message: 'A network error occurred.',
|
||||
@@ -275,9 +276,9 @@ function VillageDetailPage() {
|
||||
|
||||
if (infoLoading || gridLoading) {
|
||||
return (
|
||||
<Stack align="center" py="xl" gap="md">
|
||||
<Text c="dimmed">Loading village data...</Text>
|
||||
</Stack>
|
||||
<Group justify="center" py="xl">
|
||||
<Loader type="dots" />
|
||||
</Group>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -321,7 +322,7 @@ function VillageDetailPage() {
|
||||
loading={isUpdating}
|
||||
disabled={!isDeveloper}
|
||||
>
|
||||
{village.isActive ? 'Deactivate' : 'Active'}
|
||||
{village.isActive ? 'Deactivate' : 'Activate'}
|
||||
</Button>
|
||||
<Button
|
||||
variant="light"
|
||||
@@ -476,9 +477,10 @@ function VillageDetailPage() {
|
||||
<Modal
|
||||
opened={confirmModalOpened}
|
||||
onClose={closeConfirmModal}
|
||||
title={<Text fw={700}>Confirm Status Change</Text>}
|
||||
radius="xl"
|
||||
radius="md"
|
||||
title={<Text fw={700} size="lg">Confirm Status Change</Text>}
|
||||
centered
|
||||
overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Text size="sm">
|
||||
@@ -505,7 +507,7 @@ function VillageDetailPage() {
|
||||
opened={editModalOpened}
|
||||
onClose={closeEditModal}
|
||||
title={<Text fw={700}>Edit Village Details</Text>}
|
||||
radius="xl"
|
||||
radius="md"
|
||||
size="md"
|
||||
>
|
||||
<Stack gap="md">
|
||||
|
||||
@@ -9,6 +9,7 @@ import {
|
||||
Code,
|
||||
Collapse,
|
||||
Container,
|
||||
FileInput,
|
||||
Group,
|
||||
Image,
|
||||
Loader,
|
||||
@@ -19,36 +20,54 @@ import {
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Text,
|
||||
ThemeIcon,
|
||||
FileInput,
|
||||
TextInput,
|
||||
Textarea,
|
||||
Title,
|
||||
ThemeIcon,
|
||||
Timeline,
|
||||
Title,
|
||||
Tooltip,
|
||||
} from '@mantine/core'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import { useState } from 'react'
|
||||
import { useDisclosure } from '@mantine/hooks'
|
||||
import { notifications } from '@mantine/notifications'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import dayjs from 'dayjs'
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
TbAlertTriangle,
|
||||
TbBug,
|
||||
TbCircleCheck,
|
||||
TbCircleX,
|
||||
TbDeviceDesktop,
|
||||
TbDeviceMobile,
|
||||
TbFilter,
|
||||
TbSearch,
|
||||
TbHistory,
|
||||
TbPhoto,
|
||||
TbPlus,
|
||||
TbCircleCheck,
|
||||
TbCircleX,
|
||||
TbSearch,
|
||||
} from 'react-icons/tb'
|
||||
|
||||
export const Route = createFileRoute('/bug-reports')({
|
||||
component: ListErrorsPage,
|
||||
})
|
||||
|
||||
const STATUS_COLOR: Record<string, string> = {
|
||||
OPEN: 'red',
|
||||
IN_PROGRESS: 'blue',
|
||||
ON_HOLD: 'orange',
|
||||
RESOLVED: 'teal',
|
||||
RELEASED: 'green',
|
||||
CLOSED: 'gray',
|
||||
}
|
||||
const STATUS_LABEL: Record<string, string> = {
|
||||
OPEN: 'Open',
|
||||
ON_HOLD: 'On Hold',
|
||||
IN_PROGRESS: 'In Progress',
|
||||
RESOLVED: 'Resolved',
|
||||
RELEASED: 'Released',
|
||||
CLOSED: 'Closed',
|
||||
}
|
||||
|
||||
function ListErrorsPage() {
|
||||
const [page, setPage] = useState(1)
|
||||
const [search, setSearch] = useState('')
|
||||
@@ -58,29 +77,21 @@ function ListErrorsPage() {
|
||||
const [showLogs, setShowLogs] = useState<Record<string, boolean>>({})
|
||||
const [showStackTrace, setShowStackTrace] = useState<Record<string, boolean>>({})
|
||||
|
||||
const toggleLogs = (bugId: string) => {
|
||||
setShowLogs((prev) => ({ ...prev, [bugId]: !prev[bugId] }))
|
||||
}
|
||||
const toggleStackTrace = (bugId: string) => {
|
||||
setShowStackTrace((prev) => ({ ...prev, [bugId]: !prev[bugId] }))
|
||||
}
|
||||
const toggleLogs = (bugId: string) => setShowLogs((prev) => ({ ...prev, [bugId]: !prev[bugId] }))
|
||||
const toggleStackTrace = (bugId: string) => setShowStackTrace((prev) => ({ ...prev, [bugId]: !prev[bugId] }))
|
||||
|
||||
const { data, isLoading, refetch } = useQuery({
|
||||
queryKey: ['bugs', { page, search, app, status }],
|
||||
queryFn: () =>
|
||||
fetch(API_URLS.getBugs(page, search, app, status)).then((r) => r.json()),
|
||||
queryFn: () => fetch(API_URLS.getBugs(page, search, app, status)).then((r) => r.json()),
|
||||
})
|
||||
|
||||
// Fetch apps for the dropdown
|
||||
const { data: appsList } = useQuery({
|
||||
queryKey: ['apps-list'],
|
||||
queryFn: () => fetch('/api/apps').then((r) => r.json()),
|
||||
})
|
||||
|
||||
// Image Preview
|
||||
const [previewImage, setPreviewImage] = useState<string | null>(null)
|
||||
|
||||
// Create Bug Modal Logic
|
||||
const [opened, { open, close }] = useDisclosure(false)
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [imageFiles, setImageFiles] = useState<File[]>([])
|
||||
@@ -94,25 +105,17 @@ function ListErrorsPage() {
|
||||
stackTrace: '',
|
||||
})
|
||||
|
||||
// Update Status Modal Logic
|
||||
const [updateModalOpened, { open: openUpdateModal, close: closeUpdateModal }] = useDisclosure(false)
|
||||
const [isUpdating, setIsUpdating] = useState(false)
|
||||
const [selectedBugId, setSelectedBugId] = useState<string | null>(null)
|
||||
const [updateForm, setUpdateForm] = useState({
|
||||
status: '',
|
||||
description: '',
|
||||
})
|
||||
const [updateForm, setUpdateForm] = useState({ status: '', description: '' })
|
||||
|
||||
// Feedback Modal Logic
|
||||
const [feedbackModalOpened, { open: openFeedbackModal, close: closeFeedbackModal }] = useDisclosure(false)
|
||||
const [isUpdatingFeedback, setIsUpdatingFeedback] = useState(false)
|
||||
const [feedbackForm, setFeedbackForm] = useState({
|
||||
feedBack: '',
|
||||
})
|
||||
const [feedbackForm, setFeedbackForm] = useState({ feedBack: '' })
|
||||
|
||||
const handleUpdateFeedback = async () => {
|
||||
if (!selectedBugId || !feedbackForm.feedBack) return
|
||||
|
||||
setIsUpdatingFeedback(true)
|
||||
try {
|
||||
const res = await fetch(API_URLS.updateBugFeedback(selectedBugId), {
|
||||
@@ -120,27 +123,16 @@ function ListErrorsPage() {
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(feedbackForm),
|
||||
})
|
||||
|
||||
if (res.ok) {
|
||||
notifications.show({
|
||||
title: 'Success',
|
||||
message: 'Feedback has been updated.',
|
||||
color: 'teal',
|
||||
icon: <TbCircleCheck size={18} />,
|
||||
})
|
||||
notifications.show({ title: 'Success', message: 'Feedback has been updated.', color: 'teal', icon: <TbCircleCheck size={18} /> })
|
||||
refetch()
|
||||
closeFeedbackModal()
|
||||
setFeedbackForm({ feedBack: '' })
|
||||
} else {
|
||||
throw new Error('Failed to update feedback')
|
||||
throw new Error()
|
||||
}
|
||||
} catch (e) {
|
||||
notifications.show({
|
||||
title: 'Error',
|
||||
message: 'Something went wrong.',
|
||||
color: 'red',
|
||||
icon: <TbCircleX size={18} />,
|
||||
})
|
||||
} catch {
|
||||
notifications.show({ title: 'Error', message: 'Something went wrong.', color: 'red', icon: <TbCircleX size={18} /> })
|
||||
} finally {
|
||||
setIsUpdatingFeedback(false)
|
||||
}
|
||||
@@ -148,7 +140,6 @@ function ListErrorsPage() {
|
||||
|
||||
const handleUpdateStatus = async () => {
|
||||
if (!selectedBugId || !updateForm.status) return
|
||||
|
||||
setIsUpdating(true)
|
||||
try {
|
||||
const res = await fetch(API_URLS.updateBugStatus(selectedBugId), {
|
||||
@@ -156,27 +147,16 @@ function ListErrorsPage() {
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(updateForm),
|
||||
})
|
||||
|
||||
if (res.ok) {
|
||||
notifications.show({
|
||||
title: 'Success',
|
||||
message: 'Status has been updated.',
|
||||
color: 'teal',
|
||||
icon: <TbCircleCheck size={18} />,
|
||||
})
|
||||
notifications.show({ title: 'Success', message: 'Status has been updated.', color: 'teal', icon: <TbCircleCheck size={18} /> })
|
||||
refetch()
|
||||
closeUpdateModal()
|
||||
setUpdateForm({ status: '', description: '' })
|
||||
} else {
|
||||
throw new Error('Failed to update status')
|
||||
throw new Error()
|
||||
}
|
||||
} catch (e) {
|
||||
notifications.show({
|
||||
title: 'Error',
|
||||
message: 'Something went wrong.',
|
||||
color: 'red',
|
||||
icon: <TbCircleX size={18} />,
|
||||
})
|
||||
} catch {
|
||||
notifications.show({ title: 'Error', message: 'Something went wrong.', color: 'red', icon: <TbCircleX size={18} /> })
|
||||
} finally {
|
||||
setIsUpdating(false)
|
||||
}
|
||||
@@ -184,14 +164,9 @@ function ListErrorsPage() {
|
||||
|
||||
const handleCreateBug = async () => {
|
||||
if (!createForm.description || !createForm.affectedVersion || !createForm.device || !createForm.os) {
|
||||
notifications.show({
|
||||
title: 'Validation Error',
|
||||
message: 'Please fill in all required fields.',
|
||||
color: 'red',
|
||||
})
|
||||
notifications.show({ title: 'Validation Error', message: 'Please fill in all required fields.', color: 'red' })
|
||||
return
|
||||
}
|
||||
|
||||
setIsSubmitting(true)
|
||||
try {
|
||||
const imageUrls: string[] = []
|
||||
@@ -199,52 +174,31 @@ function ListErrorsPage() {
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
const uploadRes = await fetch(API_URLS.uploadImage(), { method: 'POST', body: formData })
|
||||
if (!uploadRes.ok) throw new Error('Gagal mengupload gambar')
|
||||
if (!uploadRes.ok) throw new Error('Failed to upload image')
|
||||
const { url } = await uploadRes.json()
|
||||
imageUrls.push(url)
|
||||
}
|
||||
|
||||
const res = await fetch(API_URLS.createBug(), {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ ...createForm, imageUrls: imageUrls.length ? imageUrls : undefined }),
|
||||
})
|
||||
|
||||
if (res.ok) {
|
||||
await fetch(API_URLS.createLog(), {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ type: 'CREATE', message: `Report error baru ditambahkan: ${createForm.description.substring(0, 50)}${createForm.description.length > 50 ? '...' : ''}` })
|
||||
body: JSON.stringify({ type: 'CREATE', message: `New error report added: ${createForm.description.substring(0, 50)}${createForm.description.length > 50 ? '...' : ''}` }),
|
||||
}).catch(console.error)
|
||||
|
||||
notifications.show({
|
||||
title: 'Success',
|
||||
message: 'Error report has been created.',
|
||||
color: 'teal',
|
||||
icon: <TbCircleCheck size={18} />,
|
||||
})
|
||||
notifications.show({ title: 'Success', message: 'Error report has been created.', color: 'teal', icon: <TbCircleCheck size={18} /> })
|
||||
refetch()
|
||||
close()
|
||||
setImageFiles([])
|
||||
setCreateForm({
|
||||
description: '',
|
||||
app: 'desa-plus',
|
||||
source: 'USER',
|
||||
affectedVersion: '',
|
||||
device: '',
|
||||
os: '',
|
||||
stackTrace: '',
|
||||
})
|
||||
setCreateForm({ description: '', app: 'desa-plus', source: 'USER', affectedVersion: '', device: '', os: '', stackTrace: '' })
|
||||
} else {
|
||||
throw new Error('Failed to create error report')
|
||||
throw new Error()
|
||||
}
|
||||
} catch (e) {
|
||||
notifications.show({
|
||||
title: 'Error',
|
||||
message: 'Something went wrong.',
|
||||
color: 'red',
|
||||
icon: <TbCircleX size={18} />,
|
||||
})
|
||||
} catch {
|
||||
notifications.show({ title: 'Error', message: 'Something went wrong.', color: 'red', icon: <TbCircleX size={18} /> })
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
@@ -257,28 +211,22 @@ function ListErrorsPage() {
|
||||
<DashboardLayout>
|
||||
<Container size="xl" py="lg">
|
||||
<Stack gap="xl">
|
||||
<Group justify="space-between" align="center">
|
||||
<Stack gap={0}>
|
||||
<Title order={2} className="gradient-text">
|
||||
Error Reports
|
||||
</Title>
|
||||
<Group justify="space-between" align="flex-start">
|
||||
<Stack gap={4}>
|
||||
<Title order={2} className="gradient-text">Error Reports</Title>
|
||||
<Text size="sm" c="dimmed">
|
||||
Centralized error tracking and analysis for all applications.
|
||||
</Text>
|
||||
</Stack>
|
||||
<Group>
|
||||
<Button
|
||||
variant="gradient"
|
||||
gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
|
||||
leftSection={<TbPlus size={18} />}
|
||||
size="sm"
|
||||
onClick={open}
|
||||
>
|
||||
Report Error
|
||||
</Button>
|
||||
{/* <Button variant="light" color="red" leftSection={<TbBug size={16} />}>
|
||||
Generate Report
|
||||
</Button> */}
|
||||
</Group>
|
||||
</Group>
|
||||
|
||||
{/* Image Preview Modal */}
|
||||
@@ -286,7 +234,7 @@ function ListErrorsPage() {
|
||||
opened={!!previewImage}
|
||||
onClose={() => setPreviewImage(null)}
|
||||
size="xl"
|
||||
radius="xl"
|
||||
radius="md"
|
||||
padding={0}
|
||||
withCloseButton={false}
|
||||
overlayProps={{ backgroundOpacity: 0.75, blur: 6 }}
|
||||
@@ -294,12 +242,7 @@ function ListErrorsPage() {
|
||||
onClick={() => setPreviewImage(null)}
|
||||
>
|
||||
{previewImage && (
|
||||
<Image
|
||||
src={previewImage}
|
||||
alt="Preview"
|
||||
fit="contain"
|
||||
style={{ maxHeight: '85vh', width: '100%' }}
|
||||
/>
|
||||
<Image src={previewImage} alt="Preview" fit="contain" style={{ maxHeight: '85vh', width: '100%' }} />
|
||||
)}
|
||||
</Modal>
|
||||
|
||||
@@ -307,28 +250,21 @@ function ListErrorsPage() {
|
||||
opened={updateModalOpened}
|
||||
onClose={closeUpdateModal}
|
||||
title={<Text fw={700} size="lg">Update Bug Status</Text>}
|
||||
radius="xl"
|
||||
radius="md"
|
||||
overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Select
|
||||
label="New Status"
|
||||
placeholder="Select status"
|
||||
placeholder="Select a status"
|
||||
required
|
||||
data={[
|
||||
{ value: 'OPEN', label: 'Open' },
|
||||
{ value: 'ON_HOLD', label: 'On Hold' },
|
||||
{ value: 'IN_PROGRESS', label: 'In Progress' },
|
||||
{ value: 'RESOLVED', label: 'Resolved' },
|
||||
{ value: 'RELEASED', label: 'Released' },
|
||||
{ value: 'CLOSED', label: 'Closed' },
|
||||
]}
|
||||
data={Object.entries(STATUS_LABEL).map(([value, label]) => ({ value, label }))}
|
||||
value={updateForm.status}
|
||||
onChange={(val) => setUpdateForm({ ...updateForm, status: val || '' })}
|
||||
/>
|
||||
<Textarea
|
||||
label="Update Note (Optional)"
|
||||
placeholder="E.g. Fixed in commit xxxxx / Assigned to team"
|
||||
placeholder="e.g. Fixed in commit abc123 / Assigned to team"
|
||||
minRows={3}
|
||||
value={updateForm.description}
|
||||
onChange={(e) => setUpdateForm({ ...updateForm, description: e.target.value })}
|
||||
@@ -350,7 +286,7 @@ function ListErrorsPage() {
|
||||
opened={feedbackModalOpened}
|
||||
onClose={closeFeedbackModal}
|
||||
title={<Text fw={700} size="lg">Developer Feedback</Text>}
|
||||
radius="xl"
|
||||
radius="md"
|
||||
overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
@@ -361,7 +297,7 @@ function ListErrorsPage() {
|
||||
required
|
||||
minRows={4}
|
||||
value={feedbackForm.feedBack}
|
||||
onChange={(e) => setFeedbackForm({ ...feedbackForm, feedBack: e.target.value })}
|
||||
onChange={(e) => setFeedbackForm({ feedBack: e.target.value })}
|
||||
/>
|
||||
<Button
|
||||
fullWidth
|
||||
@@ -378,9 +314,9 @@ function ListErrorsPage() {
|
||||
|
||||
<Modal
|
||||
opened={opened}
|
||||
onClose={() => { close(); setImageFiles([]); }}
|
||||
onClose={() => { close(); setImageFiles([]) }}
|
||||
title={<Text fw={700} size="lg">Report New Error</Text>}
|
||||
radius="xl"
|
||||
radius="md"
|
||||
size="lg"
|
||||
overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
|
||||
>
|
||||
@@ -393,7 +329,6 @@ function ListErrorsPage() {
|
||||
value={createForm.description}
|
||||
onChange={(e) => setCreateForm({ ...createForm, description: e.target.value })}
|
||||
/>
|
||||
|
||||
<SimpleGrid cols={2}>
|
||||
<Select
|
||||
label="Application"
|
||||
@@ -414,19 +349,17 @@ function ListErrorsPage() {
|
||||
onChange={(val) => setCreateForm({ ...createForm, source: val as any })}
|
||||
/>
|
||||
</SimpleGrid>
|
||||
|
||||
<TextInput
|
||||
label="Version"
|
||||
label="Affected Version"
|
||||
placeholder="e.g. 2.4.1"
|
||||
required
|
||||
value={createForm.affectedVersion}
|
||||
onChange={(e) => setCreateForm({ ...createForm, affectedVersion: e.target.value })}
|
||||
/>
|
||||
|
||||
<SimpleGrid cols={2}>
|
||||
<TextInput
|
||||
label="Device"
|
||||
placeholder="e.g. iPhone 13, Windows 11 PC"
|
||||
placeholder="e.g. iPhone 13, Windows PC"
|
||||
required
|
||||
value={createForm.device}
|
||||
onChange={(e) => setCreateForm({ ...createForm, device: e.target.value })}
|
||||
@@ -439,17 +372,16 @@ function ListErrorsPage() {
|
||||
onChange={(e) => setCreateForm({ ...createForm, os: e.target.value })}
|
||||
/>
|
||||
</SimpleGrid>
|
||||
|
||||
<FileInput
|
||||
label="Screenshot (Optional)"
|
||||
placeholder="Klik untuk upload gambar..."
|
||||
label="Screenshots (Optional)"
|
||||
placeholder="Click to upload images..."
|
||||
accept="image/*"
|
||||
leftSection={<TbPhoto size={16} />}
|
||||
description="Maks 3 gambar · 5MB per file · JPG, PNG, WEBP"
|
||||
description="Max 3 images · 5 MB each · JPG, PNG, WEBP"
|
||||
value={imageFiles}
|
||||
onChange={(files) => {
|
||||
if (files.length > 3) {
|
||||
notifications.show({ title: 'Error', message: 'Maksimal 3 gambar', color: 'red' })
|
||||
notifications.show({ title: 'Error', message: 'Maximum 3 images allowed.', color: 'red' })
|
||||
return
|
||||
}
|
||||
setImageFiles(files)
|
||||
@@ -457,16 +389,14 @@ function ListErrorsPage() {
|
||||
clearable
|
||||
multiple
|
||||
/>
|
||||
|
||||
<Textarea
|
||||
label="Stack Trace (Optional)"
|
||||
placeholder="Paste code or error logs here..."
|
||||
placeholder="Paste error logs or stack trace here..."
|
||||
style={{ fontFamily: 'monospace' }}
|
||||
minRows={2}
|
||||
value={createForm.stackTrace}
|
||||
onChange={(e) => setCreateForm({ ...createForm, stackTrace: e.target.value })}
|
||||
/>
|
||||
|
||||
<Button
|
||||
fullWidth
|
||||
mt="md"
|
||||
@@ -481,16 +411,19 @@ function ListErrorsPage() {
|
||||
</Modal>
|
||||
|
||||
<Paper withBorder radius="2xl" className="glass" p="md">
|
||||
<SimpleGrid cols={{ base: 1, sm: 4 }} mb="md">
|
||||
<SimpleGrid cols={{ base: 1, sm: 4 }} mb="lg">
|
||||
<TextInput
|
||||
placeholder="Search description, device, os..."
|
||||
label="Search"
|
||||
placeholder="Description, device, OS..."
|
||||
leftSection={<TbSearch size={16} />}
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.currentTarget.value)}
|
||||
radius="md"
|
||||
size="sm"
|
||||
/>
|
||||
<Select
|
||||
placeholder="Application"
|
||||
label="Application"
|
||||
size="sm"
|
||||
data={[
|
||||
{ value: 'all', label: 'All Applications' },
|
||||
...(appsList?.map((a: any) => ({ value: a.id, label: a.name })) || []),
|
||||
@@ -501,38 +434,38 @@ function ListErrorsPage() {
|
||||
disabled={!appsList}
|
||||
/>
|
||||
<Select
|
||||
placeholder="Status"
|
||||
label="Status"
|
||||
size="sm"
|
||||
data={[
|
||||
{ value: 'all', label: 'All Status' },
|
||||
{ value: 'OPEN', label: 'Open' },
|
||||
{ value: 'ON_HOLD', label: 'On Hold' },
|
||||
{ value: 'IN_PROGRESS', label: 'In Progress' },
|
||||
{ value: 'RESOLVED', label: 'Resolved' },
|
||||
{ value: 'RELEASED', label: 'Released' },
|
||||
{ value: 'CLOSED', label: 'Closed' },
|
||||
...Object.entries(STATUS_LABEL).map(([value, label]) => ({ value, label })),
|
||||
]}
|
||||
value={status}
|
||||
onChange={(val) => setStatus(val || 'all')}
|
||||
radius="md"
|
||||
/>
|
||||
<Group justify="flex-end">
|
||||
<Button variant="subtle" color="gray" leftSection={<TbFilter size={16} />} onClick={() => {setSearch(''); setApp('all'); setStatus('all')}}>
|
||||
Reset
|
||||
<Stack justify="flex-end">
|
||||
<Button
|
||||
variant="filled"
|
||||
color="violet"
|
||||
size="sm"
|
||||
onClick={() => { setSearch(''); setApp('all'); setStatus('all') }}
|
||||
>
|
||||
Reset Filters
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</SimpleGrid>
|
||||
|
||||
{isLoading ? (
|
||||
<Stack align="center" py="xl">
|
||||
<Loader size="lg" type="dots" />
|
||||
<Text size="sm" c="dimmed">Loading error reports...</Text>
|
||||
<Loader size="md" type="dots" />
|
||||
</Stack>
|
||||
) : bugs.length === 0 ? (
|
||||
<Paper p="xl" withBorder style={{ borderStyle: 'dashed', textAlign: 'center' }}>
|
||||
<TbBug size={48} color="gray" style={{ marginBottom: 12, opacity: 0.5 }} />
|
||||
<Text fw={600}>No error reports found</Text>
|
||||
<Stack align="center" py="xl" gap="xs">
|
||||
<TbBug size={40} style={{ opacity: 0.25 }} />
|
||||
<Text fw={600} size="sm">No error reports found</Text>
|
||||
<Text size="sm" c="dimmed">Try adjusting your filters or search terms.</Text>
|
||||
</Paper>
|
||||
</Stack>
|
||||
) : (
|
||||
<Accordion variant="separated" radius="xl">
|
||||
{bugs.map((bug: any) => (
|
||||
@@ -542,19 +475,13 @@ function ListErrorsPage() {
|
||||
style={{
|
||||
border: '1px solid var(--mantine-color-default-border)',
|
||||
background: 'var(--mantine-color-default)',
|
||||
marginBottom: '12px',
|
||||
marginBottom: 12,
|
||||
}}
|
||||
>
|
||||
<Accordion.Control>
|
||||
<Group wrap="nowrap">
|
||||
<ThemeIcon
|
||||
color={
|
||||
bug.status === 'OPEN'
|
||||
? 'red'
|
||||
: bug.status === 'IN_PROGRESS'
|
||||
? 'blue'
|
||||
: 'teal'
|
||||
}
|
||||
color={STATUS_COLOR[bug.status] ?? 'gray'}
|
||||
variant="light"
|
||||
size="lg"
|
||||
radius="md"
|
||||
@@ -563,37 +490,27 @@ function ListErrorsPage() {
|
||||
</ThemeIcon>
|
||||
<Box style={{ flex: 1 }}>
|
||||
<Group justify="space-between">
|
||||
<Text size="sm" fw={600} lineClamp={1}>
|
||||
{bug.description}
|
||||
</Text>
|
||||
<Text size="sm" fw={600} lineClamp={1}>{bug.description}</Text>
|
||||
<Badge
|
||||
color={
|
||||
bug.status === 'OPEN'
|
||||
? 'red'
|
||||
: bug.status === 'IN_PROGRESS'
|
||||
? 'blue'
|
||||
: 'teal'
|
||||
}
|
||||
color={STATUS_COLOR[bug.status] ?? 'gray'}
|
||||
variant="dot"
|
||||
size="xs"
|
||||
size="sm"
|
||||
>
|
||||
{bug.status}
|
||||
{STATUS_LABEL[bug.status] ?? bug.status}
|
||||
</Badge>
|
||||
</Group>
|
||||
<Group gap="md">
|
||||
<Text size="xs" c="dimmed">
|
||||
{new Date(bug.createdAt).toLocaleString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false })} • {bug.appId?.toUpperCase()} • v{bug.affectedVersion}
|
||||
{dayjs(bug.createdAt).format('D MMM YYYY, HH:mm')} · {bug.appId?.toUpperCase()} · v{bug.affectedVersion}
|
||||
</Text>
|
||||
</Group>
|
||||
</Box>
|
||||
</Group>
|
||||
</Accordion.Control>
|
||||
|
||||
<Accordion.Panel>
|
||||
<Stack gap="lg" py="xs">
|
||||
{/* Device Info */}
|
||||
<SimpleGrid cols={{ base: 1, sm: 2 }} spacing="lg">
|
||||
<Box>
|
||||
<Text size="xs" fw={700} c="dimmed" mb={4}>DEVICE METADATA</Text>
|
||||
<Text size="xs" fw={700} c="dimmed" mb={4} tt="uppercase">Device Metadata</Text>
|
||||
<Group gap="xs">
|
||||
{bug.device.toLowerCase().includes('windows') || bug.device.toLowerCase().includes('mac') || bug.device.toLowerCase().includes('pc') ? (
|
||||
<TbDeviceDesktop size={14} color="gray" />
|
||||
@@ -604,17 +521,16 @@ function ListErrorsPage() {
|
||||
</Group>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text size="xs" fw={700} c="dimmed" mb={4}>SOURCE</Text>
|
||||
<Text size="xs" fw={700} c="dimmed" mb={4} tt="uppercase">Source</Text>
|
||||
<Badge variant="light" color="gray" size="sm">{bug.source}</Badge>
|
||||
</Box>
|
||||
</SimpleGrid>
|
||||
|
||||
{/* Feedback & Reporter Info */}
|
||||
{(bug.user || bug.feedBack) && (
|
||||
<SimpleGrid cols={{ base: 1, sm: 2 }} spacing="lg">
|
||||
{bug.user && (
|
||||
<Box>
|
||||
<Text size="xs" fw={700} c="dimmed" mb={4}>REPORTED BY</Text>
|
||||
<Text size="xs" fw={700} c="dimmed" mb={4} tt="uppercase">Reported By</Text>
|
||||
<Group gap="xs">
|
||||
<Avatar src={bug.user.image} radius="xl" size="sm" color="blue">
|
||||
{bug.user.name?.charAt(0).toUpperCase()}
|
||||
@@ -625,24 +541,18 @@ function ListErrorsPage() {
|
||||
)}
|
||||
{bug.feedBack && (
|
||||
<Box>
|
||||
<Text size="xs" fw={700} c="dimmed" mb={4}>DEVELOPER FEEDBACK</Text>
|
||||
<Text size="xs" fw={700} c="dimmed" mb={4} tt="uppercase">Developer Feedback</Text>
|
||||
<Text size="sm" style={{ whiteSpace: 'pre-wrap' }}>{bug.feedBack}</Text>
|
||||
</Box>
|
||||
)}
|
||||
</SimpleGrid>
|
||||
)}
|
||||
|
||||
{/* Stack Trace */}
|
||||
{bug.stackTrace && (
|
||||
<Box>
|
||||
<Group justify="space-between" mb={showStackTrace[bug.id] ? 8 : 0}>
|
||||
<Text size="xs" fw={700} c="dimmed">STACK TRACE</Text>
|
||||
<Button
|
||||
variant="subtle"
|
||||
size="compact-xs"
|
||||
color="gray"
|
||||
onClick={() => toggleStackTrace(bug.id)}
|
||||
>
|
||||
<Text size="xs" fw={700} c="dimmed" tt="uppercase">Stack Trace</Text>
|
||||
<Button variant="subtle" size="compact-xs" color="gray" onClick={() => toggleStackTrace(bug.id)}>
|
||||
{showStackTrace[bug.id] ? 'Hide' : 'Show'}
|
||||
</Button>
|
||||
</Group>
|
||||
@@ -650,12 +560,7 @@ function ListErrorsPage() {
|
||||
<Code
|
||||
block
|
||||
color="red"
|
||||
style={{
|
||||
fontFamily: 'monospace',
|
||||
whiteSpace: 'pre-wrap',
|
||||
fontSize: '11px',
|
||||
border: '1px solid var(--mantine-color-default-border)',
|
||||
}}
|
||||
style={{ fontFamily: 'monospace', whiteSpace: 'pre-wrap', fontSize: 11, border: '1px solid var(--mantine-color-default-border)' }}
|
||||
>
|
||||
{bug.stackTrace}
|
||||
</Code>
|
||||
@@ -663,17 +568,18 @@ function ListErrorsPage() {
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Images */}
|
||||
{bug.images && bug.images.length > 0 && (
|
||||
<Box>
|
||||
<Group gap="xs" mb={8}>
|
||||
<TbPhoto size={16} color="gray" />
|
||||
<Text size="xs" fw={700} c="dimmed">ATTACHED IMAGES ({bug.images.length})</Text>
|
||||
<TbPhoto size={14} color="gray" />
|
||||
<Text size="xs" fw={700} c="dimmed" tt="uppercase">
|
||||
Attached Images ({bug.images.length})
|
||||
</Text>
|
||||
</Group>
|
||||
<SimpleGrid cols={{ base: 2, sm: 4 }} spacing="xs">
|
||||
{bug.images.map((img: any) => (
|
||||
<Tooltip key={img.id} label="Click to preview" withArrow>
|
||||
<Paper
|
||||
key={img.id}
|
||||
withBorder
|
||||
radius="md"
|
||||
style={{ overflow: 'hidden', cursor: 'zoom-in' }}
|
||||
@@ -681,25 +587,22 @@ function ListErrorsPage() {
|
||||
>
|
||||
<Image src={img.imageUrl} alt="Error screenshot" height={100} fit="cover" />
|
||||
</Paper>
|
||||
</Tooltip>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Logs / History */}
|
||||
{bug.logs && bug.logs.length > 0 && (
|
||||
<Box>
|
||||
<Group justify="space-between" mb={showLogs[bug.id] ? 12 : 0}>
|
||||
<Group gap="xs">
|
||||
<TbHistory size={16} color="gray" />
|
||||
<Text size="xs" fw={700} c="dimmed">ACTIVITY LOG ({bug.logs.length})</Text>
|
||||
<TbHistory size={14} color="gray" />
|
||||
<Text size="xs" fw={700} c="dimmed" tt="uppercase">
|
||||
Activity Log ({bug.logs.length})
|
||||
</Text>
|
||||
</Group>
|
||||
<Button
|
||||
variant="subtle"
|
||||
size="compact-xs"
|
||||
color="gray"
|
||||
onClick={() => toggleLogs(bug.id)}
|
||||
>
|
||||
<Button variant="subtle" size="compact-xs" color="gray" onClick={() => toggleLogs(bug.id)}>
|
||||
{showLogs[bug.id] ? 'Hide' : 'Show'}
|
||||
</Button>
|
||||
</Group>
|
||||
@@ -709,12 +612,16 @@ function ListErrorsPage() {
|
||||
<Timeline.Item
|
||||
key={log.id}
|
||||
bullet={
|
||||
<Badge size="xs" circle color={log.status === 'RESOLVED' ? 'teal' : 'blue'}> </Badge>
|
||||
<Badge size="xs" circle color={STATUS_COLOR[log.status] ?? 'blue'}> </Badge>
|
||||
}
|
||||
title={
|
||||
<Text size="sm" fw={600}>
|
||||
{STATUS_LABEL[log.status] ?? log.status}
|
||||
</Text>
|
||||
}
|
||||
title={<Text size="sm" fw={600}>{log.status}</Text>}
|
||||
>
|
||||
<Text size="xs" c="dimmed" mb={4}>
|
||||
{new Date(log.createdAt).toLocaleString()} by {log.user?.name || 'Unknown'}
|
||||
{dayjs(log.createdAt).format('D MMM YYYY, HH:mm')} · {log.user?.name ?? 'Unknown'}
|
||||
</Text>
|
||||
<Text size="sm">{log.description}</Text>
|
||||
</Timeline.Item>
|
||||
@@ -725,16 +632,30 @@ function ListErrorsPage() {
|
||||
)}
|
||||
|
||||
<Group justify="flex-end" pt="sm">
|
||||
<Button variant="light" size="compact-xs" color="blue" onClick={() => {
|
||||
<Button
|
||||
variant="light"
|
||||
size="compact-sm"
|
||||
color="blue"
|
||||
onClick={() => {
|
||||
setSelectedBugId(bug.id)
|
||||
setFeedbackForm({ feedBack: bug.feedBack || '' })
|
||||
openFeedbackModal()
|
||||
}}>Developer Feedback</Button>
|
||||
<Button variant="light" size="compact-xs" color="teal" onClick={() => {
|
||||
}}
|
||||
>
|
||||
Developer Feedback
|
||||
</Button>
|
||||
<Button
|
||||
variant="light"
|
||||
size="compact-sm"
|
||||
color="teal"
|
||||
onClick={() => {
|
||||
setSelectedBugId(bug.id)
|
||||
setUpdateForm({ status: bug.status, description: '' })
|
||||
openUpdateModal()
|
||||
}}>Update Status</Button>
|
||||
}}
|
||||
>
|
||||
Update Status
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Accordion.Panel>
|
||||
@@ -745,7 +666,7 @@ function ListErrorsPage() {
|
||||
|
||||
{totalPages > 1 && (
|
||||
<Group justify="center" mt="xl">
|
||||
<Pagination total={totalPages} value={page} onChange={setPage} radius="xl" />
|
||||
<Pagination total={totalPages} value={page} onChange={setPage} size="sm" radius="xl" />
|
||||
</Group>
|
||||
)}
|
||||
</Paper>
|
||||
|
||||
@@ -14,10 +14,11 @@ import {
|
||||
Table,
|
||||
Text,
|
||||
Title,
|
||||
Tooltip,
|
||||
} from '@mantine/core'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { createFileRoute, Link, redirect } from '@tanstack/react-router'
|
||||
import { TbApps, TbChevronRight, TbMessageReport, TbUsers } from 'react-icons/tb'
|
||||
import { TbAlertCircle, TbApps, TbChevronRight, TbMessageReport, TbUsers } from 'react-icons/tb'
|
||||
|
||||
export const Route = createFileRoute('/dashboard')({
|
||||
beforeLoad: async ({ context }) => {
|
||||
@@ -35,6 +36,39 @@ export const Route = createFileRoute('/dashboard')({
|
||||
component: DashboardPage,
|
||||
})
|
||||
|
||||
function getGreeting() {
|
||||
const hour = new Date().getHours()
|
||||
if (hour < 12) return 'Good morning'
|
||||
if (hour < 17) return 'Good afternoon'
|
||||
return 'Good evening'
|
||||
}
|
||||
|
||||
function formatTimeAgo(dateStr: string) {
|
||||
const diff = new Date().getTime() - new Date(dateStr).getTime()
|
||||
const minutes = Math.floor(diff / 60000)
|
||||
if (minutes < 1) return 'Just now'
|
||||
if (minutes < 60) return `${minutes}m ago`
|
||||
const hours = Math.floor(minutes / 60)
|
||||
if (hours < 24) return `${hours}h ago`
|
||||
const days = Math.floor(hours / 24)
|
||||
if (days === 1) return 'Yesterday'
|
||||
if (days < 7) return `${days}d ago`
|
||||
return new Date(dateStr).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' })
|
||||
}
|
||||
|
||||
const SEVERITY_COLOR: Record<string, string> = {
|
||||
OPEN: 'red',
|
||||
IN_PROGRESS: 'blue',
|
||||
ON_HOLD: 'orange',
|
||||
RESOLVED: 'teal',
|
||||
RELEASED: 'green',
|
||||
CLOSED: 'gray',
|
||||
}
|
||||
|
||||
function formatSeverityLabel(s: string) {
|
||||
return s.replace(/_/g, ' ')
|
||||
}
|
||||
|
||||
function DashboardPage() {
|
||||
const { data: sessionData } = useSession()
|
||||
const user = sessionData?.user
|
||||
@@ -54,34 +88,42 @@ function DashboardPage() {
|
||||
queryFn: () => fetch('/api/dashboard/recent-errors').then((r) => r.json()),
|
||||
})
|
||||
|
||||
const formatTimeAgo = (dateStr: string) => {
|
||||
const diff = new Date().getTime() - new Date(dateStr).getTime()
|
||||
const minutes = Math.floor(diff / 60000)
|
||||
if (minutes < 60) return `${minutes || 1} mins ago`
|
||||
const hours = Math.floor(minutes / 60)
|
||||
if (hours < 24) return `${hours} hours ago`
|
||||
return `${Math.floor(hours / 24)} days ago`
|
||||
}
|
||||
const today = new Date().toLocaleDateString('en-GB', {
|
||||
weekday: 'long',
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric',
|
||||
})
|
||||
|
||||
const firstName = user?.name?.split(' ')[0] ?? user?.name
|
||||
|
||||
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">Overview Dashboard</Title>
|
||||
<Text size="sm" c="dimmed">Welcome back, {user?.name}. Here is what's happening today.</Text>
|
||||
<Group justify="space-between" align="flex-start">
|
||||
<Stack gap={4}>
|
||||
<Text size="xs" c="dimmed" fw={500} tt="uppercase" style={{ letterSpacing: '0.05em' }}>
|
||||
{today}
|
||||
</Text>
|
||||
<Title order={2} className="gradient-text">
|
||||
{getGreeting()}, {firstName}.
|
||||
</Title>
|
||||
<Text size="sm" c="dimmed">
|
||||
Here's a real-time overview of all your monitored applications.
|
||||
</Text>
|
||||
</Stack>
|
||||
{/* <Button
|
||||
<Button
|
||||
variant="gradient"
|
||||
gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
|
||||
leftSection={<TbApps size={18} />}
|
||||
radius="md"
|
||||
component={Link}
|
||||
to="/apps"
|
||||
size="sm"
|
||||
>
|
||||
Manage All Apps
|
||||
</Button> */}
|
||||
Manage Apps
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
{statsLoading ? (
|
||||
@@ -89,33 +131,43 @@ function DashboardPage() {
|
||||
) : (
|
||||
<SimpleGrid cols={{ base: 1, sm: 3 }}>
|
||||
<StatsCard
|
||||
title="Total Applications"
|
||||
value={stats?.totalApps || 0}
|
||||
title="Applications"
|
||||
value={stats?.totalApps ?? 0}
|
||||
description="Registered platforms"
|
||||
icon={TbApps}
|
||||
color="brand-blue"
|
||||
// trend={{ value: stats?.trends?.totalApps.toString() || '0', positive: true }}
|
||||
/>
|
||||
<StatsCard
|
||||
title="New Errors"
|
||||
value={stats?.newErrors || 0}
|
||||
title="Open Errors"
|
||||
value={stats?.newErrors ?? 0}
|
||||
description="Unresolved bug reports"
|
||||
icon={TbMessageReport}
|
||||
color="brand-purple"
|
||||
// trend={{ value: stats?.trends?.newErrors.toString() || '0', positive: false }}
|
||||
color="red"
|
||||
/>
|
||||
<StatsCard
|
||||
title="Users"
|
||||
value={stats?.activeUsers || 0}
|
||||
title="Operators"
|
||||
value={stats?.activeUsers ?? 0}
|
||||
description="Active platform users"
|
||||
icon={TbUsers}
|
||||
color="teal"
|
||||
// trend={{ value: stats?.trends?.activeUsers.toString() || '0', positive: true }}
|
||||
/>
|
||||
</SimpleGrid>
|
||||
)}
|
||||
|
||||
<Group justify="space-between" mt="md">
|
||||
<Group justify="space-between" align="flex-end" mt="md">
|
||||
<Stack gap={2}>
|
||||
<Title order={3}>Registered Applications</Title>
|
||||
<Button variant="subtle" color="brand-blue" rightSection={<TbChevronRight size={16} />} component={Link} to="/apps">
|
||||
View All Apps
|
||||
<Text size="sm" c="dimmed">All monitored apps on this platform.</Text>
|
||||
</Stack>
|
||||
<Button
|
||||
variant="subtle"
|
||||
color="brand-blue"
|
||||
rightSection={<TbChevronRight size={16} />}
|
||||
component={Link}
|
||||
to="/apps"
|
||||
size="sm"
|
||||
>
|
||||
View All
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
@@ -129,22 +181,32 @@ function DashboardPage() {
|
||||
</SimpleGrid>
|
||||
)}
|
||||
|
||||
<Group justify="space-between" mt="md">
|
||||
<Group justify="space-between" align="flex-end" mt="md">
|
||||
<Stack gap={2}>
|
||||
<Title order={3}>Recent Error Reports</Title>
|
||||
<Button variant="subtle" color="brand-blue" rightSection={<TbChevronRight size={16} />} component={Link} to="/bug-reports">
|
||||
View All Errors
|
||||
<Text size="sm" c="dimmed">Latest bug submissions across all apps.</Text>
|
||||
</Stack>
|
||||
<Button
|
||||
variant="subtle"
|
||||
color="brand-blue"
|
||||
rightSection={<TbChevronRight size={16} />}
|
||||
component={Link}
|
||||
to="/bug-reports"
|
||||
size="sm"
|
||||
>
|
||||
View All
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
<Paper withBorder radius="2xl" className="glass" p="md">
|
||||
<Table className="data-table" verticalSpacing="md">
|
||||
<Table className="data-table" verticalSpacing="sm">
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th>Application</Table.Th>
|
||||
<Table.Th>App</Table.Th>
|
||||
<Table.Th>Error Message</Table.Th>
|
||||
<Table.Th>Version</Table.Th>
|
||||
<Table.Th>Time</Table.Th>
|
||||
<Table.Th>Severity</Table.Th>
|
||||
<Table.Th>Reported</Table.Th>
|
||||
<Table.Th>Status</Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>
|
||||
@@ -156,30 +218,39 @@ function DashboardPage() {
|
||||
</Table.Tr>
|
||||
) : recentErrors.length === 0 ? (
|
||||
<Table.Tr>
|
||||
<Table.Td colSpan={5} align="center" py="xl">
|
||||
<Text c="dimmed" size="sm">No recent errors found.</Text>
|
||||
<Table.Td colSpan={5}>
|
||||
<Stack align="center" gap="xs" py="xl">
|
||||
<TbAlertCircle size={32} style={{ opacity: 0.25 }} />
|
||||
<Text c="dimmed" size="sm">No error reports yet — all systems are running smoothly.</Text>
|
||||
</Stack>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
) : recentErrors.map((error: any) => (
|
||||
<Table.Tr key={error.id}>
|
||||
<Table.Td>
|
||||
<Text fw={600} size="sm" style={{ textTransform: 'uppercase' }}>{error.app}</Text>
|
||||
<Text fw={600} size="sm" tt="uppercase">{error.app}</Text>
|
||||
</Table.Td>
|
||||
<Table.Td style={{ maxWidth: 280 }}>
|
||||
<Tooltip label={error.message} multiline maw={320} withArrow position="top-start">
|
||||
<Text size="sm" c="dimmed" lineClamp={1} style={{ cursor: 'default' }}>
|
||||
{error.message}
|
||||
</Text>
|
||||
</Tooltip>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Text size="sm" c="dimmed" lineClamp={1}>{error.message}</Text>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Badge variant="light" color="gray">v{error.version}</Badge>
|
||||
<Badge variant="light" color="gray" size="sm">v{error.version}</Badge>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Text size="xs" c="dimmed">{formatTimeAgo(error.time)}</Text>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Badge
|
||||
color={error.severity === 'OPEN' ? 'red' : error.severity === 'IN_PROGRESS' || error.severity === 'ON_HOLD' ? 'orange' : 'yellow'}
|
||||
variant="dot"
|
||||
color={SEVERITY_COLOR[error.severity] ?? 'gray'}
|
||||
variant="light"
|
||||
size="sm"
|
||||
tt="capitalize"
|
||||
>
|
||||
{error.severity.toUpperCase()}
|
||||
{formatSeverityLabel(error.severity)}
|
||||
</Badge>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
|
||||
@@ -1,24 +1,25 @@
|
||||
import {
|
||||
ActionIcon,
|
||||
Badge,
|
||||
Center,
|
||||
Container,
|
||||
Group,
|
||||
Loader,
|
||||
Pagination,
|
||||
Paper,
|
||||
SegmentedControl,
|
||||
Select,
|
||||
Stack,
|
||||
Table,
|
||||
Text,
|
||||
Title,
|
||||
Tooltip,
|
||||
} from '@mantine/core'
|
||||
import { DatePickerInput, type DatesRangeValue } from '@mantine/dates'
|
||||
import dayjs from 'dayjs'
|
||||
import 'dayjs/locale/id'
|
||||
import { useMemo, useState } from 'react'
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import { TbRefresh } from 'react-icons/tb'
|
||||
import { TbHistory, TbRefresh } from 'react-icons/tb'
|
||||
import { DashboardLayout } from '@/frontend/components/DashboardLayout'
|
||||
import useSWR from 'swr'
|
||||
import { API_URLS } from '../config/api'
|
||||
@@ -30,8 +31,16 @@ export const Route = createFileRoute('/logs')({
|
||||
const fetcher = (url: string) => fetch(url, { credentials: 'include' }).then((r) => r.json())
|
||||
|
||||
const LOG_TYPES = ['all', 'LOGIN', 'LOGOUT', 'CREATE', 'UPDATE', 'DELETE'] as const
|
||||
const LOG_TYPE_LABEL: Record<string, string> = {
|
||||
all: 'All',
|
||||
LOGIN: 'Login',
|
||||
LOGOUT: 'Logout',
|
||||
CREATE: 'Create',
|
||||
UPDATE: 'Update',
|
||||
DELETE: 'Delete',
|
||||
}
|
||||
const LOG_TYPE_COLOR: Record<string, string> = {
|
||||
LOGIN: 'green',
|
||||
LOGIN: 'teal',
|
||||
LOGOUT: 'gray',
|
||||
CREATE: 'blue',
|
||||
UPDATE: 'yellow',
|
||||
@@ -47,9 +56,9 @@ function GlobalLogsPage() {
|
||||
const { data: operatorsData } = useSWR(API_URLS.getLogOperators(), fetcher)
|
||||
|
||||
const operatorOptions = useMemo(() => {
|
||||
if (!operatorsData || !Array.isArray(operatorsData)) return [{ value: 'all', label: 'Semua operator' }]
|
||||
if (!operatorsData || !Array.isArray(operatorsData)) return [{ value: 'all', label: 'All users' }]
|
||||
return [
|
||||
{ value: 'all', label: 'Semua user' },
|
||||
{ value: 'all', label: 'All users' },
|
||||
...operatorsData.map((op: any) => ({ value: op.id, label: op.name })),
|
||||
]
|
||||
}, [operatorsData])
|
||||
@@ -69,88 +78,149 @@ function GlobalLogsPage() {
|
||||
return (
|
||||
<DashboardLayout>
|
||||
<Container size="xl" py="lg">
|
||||
<Stack>
|
||||
<Group justify="space-between">
|
||||
<Title order={3}>Activity Logs</Title>
|
||||
<ActionIcon variant="subtle" color="gray" onClick={() => mutate()}>
|
||||
<Stack gap="xl">
|
||||
<Group justify="space-between" align="flex-start">
|
||||
<Stack gap={4}>
|
||||
<Title order={2} className="gradient-text">Activity Logs</Title>
|
||||
<Text size="sm" c="dimmed">
|
||||
Track all user actions and system events across the platform.
|
||||
</Text>
|
||||
</Stack>
|
||||
<Tooltip label="Refresh logs" withArrow>
|
||||
<ActionIcon
|
||||
variant="light"
|
||||
color="brand-blue"
|
||||
size="lg"
|
||||
onClick={() => mutate()}
|
||||
loading={isLoading}
|
||||
>
|
||||
<TbRefresh size={16} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
|
||||
<Group gap="sm" wrap="wrap">
|
||||
<Paper withBorder radius="xl" p="md" className="glass">
|
||||
<Group gap="sm" wrap="wrap" align="flex-end">
|
||||
<Select
|
||||
placeholder="Filter user"
|
||||
label="User"
|
||||
placeholder="All users"
|
||||
value={operatorId}
|
||||
onChange={(v) => { setOperatorId(v ?? 'all'); setPage(1) }}
|
||||
data={operatorOptions}
|
||||
w={180}
|
||||
w={200}
|
||||
clearable
|
||||
size="sm"
|
||||
/>
|
||||
<DatePickerInput
|
||||
type="range"
|
||||
placeholder="Filter tanggal"
|
||||
label="Date range"
|
||||
placeholder="Pick a date range"
|
||||
value={dateRange}
|
||||
onChange={(v) => { setDateRange(v); setPage(1) }}
|
||||
locale="id"
|
||||
valueFormat="DD MMM YYYY"
|
||||
clearable
|
||||
w={300}
|
||||
w={280}
|
||||
size="sm"
|
||||
/>
|
||||
<Stack gap={4}>
|
||||
<Text size="xs" fw={500} c="dimmed">Action type</Text>
|
||||
<SegmentedControl
|
||||
value={type}
|
||||
onChange={(v) => { setType(v); setPage(1) }}
|
||||
data={LOG_TYPES.map((t) => ({ label: t === 'all' ? 'All' : t, value: t }))}
|
||||
size="sm"
|
||||
data={LOG_TYPES.map((t) => ({ label: LOG_TYPE_LABEL[t] ?? t, value: t }))}
|
||||
/>
|
||||
</Stack>
|
||||
</Group>
|
||||
</Paper>
|
||||
|
||||
{isLoading ? (
|
||||
<Center py="xl"><Loader /></Center>
|
||||
{isLoading && !data ? (
|
||||
<Group justify="center" py="xl">
|
||||
<Loader type="dots" />
|
||||
</Group>
|
||||
) : (
|
||||
<>
|
||||
<Paper withBorder radius="2xl" className="glass" p="md">
|
||||
<Table.ScrollContainer minWidth={600}>
|
||||
<Table striped highlightOnHover fz="xs" style={{ tableLayout: 'fixed', width: '100%' }}>
|
||||
<Table
|
||||
className="data-table"
|
||||
highlightOnHover
|
||||
verticalSpacing="sm"
|
||||
fz="sm"
|
||||
style={{ tableLayout: 'fixed', width: '100%' }}
|
||||
>
|
||||
<colgroup>
|
||||
<col style={{ width: 160 }} />
|
||||
<col style={{ width: 200 }} />
|
||||
<col style={{ width: 100 }} />
|
||||
<col style={{ width: 155 }} />
|
||||
<col style={{ width: 210 }} />
|
||||
<col style={{ width: 105 }} />
|
||||
<col />
|
||||
</colgroup>
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th>Time</Table.Th>
|
||||
<Table.Th>Operator</Table.Th>
|
||||
<Table.Th>Type</Table.Th>
|
||||
<Table.Th>Message</Table.Th>
|
||||
<Table.Th>Timestamp</Table.Th>
|
||||
<Table.Th>User</Table.Th>
|
||||
<Table.Th>Action</Table.Th>
|
||||
<Table.Th>Description</Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>
|
||||
{logs.map((log: any) => (
|
||||
<Table.Tr key={log.id}>
|
||||
<Table.Td style={{ whiteSpace: 'nowrap' }}>
|
||||
{new Date(log.createdAt).toLocaleString('id-ID')}
|
||||
<Stack gap={0}>
|
||||
<Text size="xs" fw={500}>
|
||||
{dayjs(log.createdAt).locale('id').format('D MMM YYYY')}
|
||||
</Text>
|
||||
<Text size="xs" c="dimmed">
|
||||
{dayjs(log.createdAt).format('HH:mm:ss')}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
{log.user ? (
|
||||
<div>
|
||||
<Text fw={500} truncate>{log.user.name}</Text>
|
||||
<Text c="dimmed" truncate>{log.user.email}</Text>
|
||||
</div>
|
||||
) : <Text c="dimmed">—</Text>}
|
||||
<Stack gap={0}>
|
||||
<Text size="sm" fw={600} truncate>{log.user.name}</Text>
|
||||
<Text size="xs" c="dimmed" truncate>{log.user.email}</Text>
|
||||
</Stack>
|
||||
) : (
|
||||
<Text c="dimmed" size="sm">—</Text>
|
||||
)}
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Badge color={LOG_TYPE_COLOR[log.type] ?? 'gray'} variant="light">
|
||||
{log.type}
|
||||
<Badge
|
||||
color={LOG_TYPE_COLOR[log.type] ?? 'gray'}
|
||||
variant="light"
|
||||
size="sm"
|
||||
tt="capitalize"
|
||||
>
|
||||
{LOG_TYPE_LABEL[log.type] ?? log.type}
|
||||
</Badge>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Text>{log.message}</Text>
|
||||
<Tooltip
|
||||
label={log.message}
|
||||
multiline
|
||||
maw={340}
|
||||
withArrow
|
||||
position="top-start"
|
||||
disabled={(log.message?.length ?? 0) < 60}
|
||||
>
|
||||
<Text size="sm" lineClamp={2} style={{ cursor: 'default' }}>
|
||||
{log.message}
|
||||
</Text>
|
||||
</Tooltip>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
))}
|
||||
{logs.length === 0 && (
|
||||
<Table.Tr>
|
||||
<Table.Td colSpan={4}>
|
||||
<Center py="xl"><Text c="dimmed">Belum ada log aktivitas</Text></Center>
|
||||
<Stack align="center" gap="xs" py="xl">
|
||||
<TbHistory size={32} style={{ opacity: 0.25 }} />
|
||||
<Text c="dimmed" size="sm">
|
||||
No activity logs found for the selected filters.
|
||||
</Text>
|
||||
</Stack>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
)}
|
||||
@@ -158,11 +228,11 @@ function GlobalLogsPage() {
|
||||
</Table>
|
||||
</Table.ScrollContainer>
|
||||
{totalPages > 1 && (
|
||||
<Center>
|
||||
<Group justify="center" mt="md">
|
||||
<Pagination total={totalPages} value={page} onChange={setPage} size="sm" />
|
||||
</Center>
|
||||
</Group>
|
||||
)}
|
||||
</>
|
||||
</Paper>
|
||||
)}
|
||||
</Stack>
|
||||
</Container>
|
||||
|
||||
@@ -11,6 +11,7 @@ import {
|
||||
Divider,
|
||||
Group,
|
||||
List,
|
||||
Loader,
|
||||
Modal,
|
||||
Pagination,
|
||||
Paper,
|
||||
@@ -41,6 +42,7 @@ import {
|
||||
TbTrash,
|
||||
TbUserCheck,
|
||||
TbUserPlus,
|
||||
TbUsers,
|
||||
} from 'react-icons/tb'
|
||||
import useSWR from 'swr'
|
||||
import { API_URLS } from '../config/api'
|
||||
@@ -52,45 +54,50 @@ export const Route = createFileRoute('/users')({
|
||||
|
||||
const fetcher = (url: string) => fetch(url).then((res) => res.json())
|
||||
|
||||
const getRoleColor = (role: string) => {
|
||||
if (role === 'DEVELOPER') return 'violet'
|
||||
if (role === 'ADMIN') return 'brand-blue'
|
||||
return 'gray'
|
||||
const ROLE_COLOR: Record<string, string> = {
|
||||
DEVELOPER: 'violet',
|
||||
ADMIN: 'brand-blue',
|
||||
USER: 'gray',
|
||||
}
|
||||
const ROLE_LABEL: Record<string, string> = {
|
||||
DEVELOPER: 'Developer',
|
||||
ADMIN: 'Admin',
|
||||
USER: 'User',
|
||||
}
|
||||
|
||||
const roles = [
|
||||
{
|
||||
name: 'DEVELOPER',
|
||||
color: 'violet',
|
||||
description: 'Super admin dengan akses penuh ke seluruh sistem termasuk Dev Console.',
|
||||
description: 'Super admin with full system access, including the Dev Console.',
|
||||
permissions: [
|
||||
'Akses Dev Console (/dev)',
|
||||
'Manajemen user & role',
|
||||
'Kelola bug report & feedback',
|
||||
'Lihat semua app & log aktivitas',
|
||||
'Kelola versi & status aplikasi',
|
||||
'Hapus log sistem',
|
||||
'Access Dev Console (/dev)',
|
||||
'User & role management',
|
||||
'Manage bug reports & feedback',
|
||||
'View all apps & activity logs',
|
||||
'Manage app versions & status',
|
||||
'Delete system logs',
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'ADMIN',
|
||||
color: 'blue',
|
||||
description: 'Operator yang dapat mengelola aplikasi, bug, dan melihat log aktivitas.',
|
||||
description: 'Operator who can manage applications, bugs, and view activity logs.',
|
||||
permissions: [
|
||||
'Lihat & kelola semua aplikasi',
|
||||
'Kelola bug report',
|
||||
'Lihat log aktivitas',
|
||||
'Lihat data user, desa, orders',
|
||||
'Update status village & produk',
|
||||
'View & manage all applications',
|
||||
'Manage bug reports',
|
||||
'View activity logs',
|
||||
'View user, village, and order data',
|
||||
'Update village & product status',
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'USER',
|
||||
color: 'gray',
|
||||
description: 'Akun baru yang belum disetujui. Menunggu approval dari Admin atau Developer.',
|
||||
description: 'New account pending approval. Awaiting review by an Admin or Developer.',
|
||||
permissions: [
|
||||
'Akses halaman profil',
|
||||
'Lihat status persetujuan akun',
|
||||
'Access profile page',
|
||||
'View account approval status',
|
||||
],
|
||||
},
|
||||
]
|
||||
@@ -110,7 +117,7 @@ function UsersPage() {
|
||||
const { data: stats, mutate: mutateStats } = useSWR(API_URLS.getOperatorStats(), fetcher)
|
||||
const { data: response, isLoading, mutate: mutateOperators } = useSWR(
|
||||
API_URLS.getOperators(page, debouncedSearch),
|
||||
fetcher
|
||||
fetcher,
|
||||
)
|
||||
|
||||
const operators = response?.data || []
|
||||
@@ -118,19 +125,13 @@ function UsersPage() {
|
||||
// ── Create User Modal ──
|
||||
const [createOpened, { open: openCreate, close: closeCreate }] = useDisclosure(false)
|
||||
const [isCreating, setIsCreating] = useState(false)
|
||||
const [createForm, setCreateForm] = useState({
|
||||
name: '',
|
||||
email: '',
|
||||
password: '',
|
||||
role: 'ADMIN',
|
||||
})
|
||||
const [createForm, setCreateForm] = useState({ name: '', email: '', password: '', role: 'ADMIN' })
|
||||
|
||||
const handleCreateUser = async () => {
|
||||
if (!createForm.name || !createForm.email || !createForm.password) {
|
||||
notifications.show({ title: 'Validation Error', message: 'Please fill in all required fields.', color: 'red' })
|
||||
return
|
||||
}
|
||||
|
||||
setIsCreating(true)
|
||||
try {
|
||||
const res = await fetch(API_URLS.createOperator(), {
|
||||
@@ -138,7 +139,6 @@ function UsersPage() {
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(createForm),
|
||||
})
|
||||
|
||||
if (res.ok) {
|
||||
notifications.show({ title: 'Success', message: 'User has been created.', color: 'teal', icon: <TbCircleCheck size={18} /> })
|
||||
mutateOperators()
|
||||
@@ -160,11 +160,7 @@ function UsersPage() {
|
||||
const [editOpened, { open: openEdit, close: closeEdit }] = useDisclosure(false)
|
||||
const [isEditing, setIsEditing] = useState(false)
|
||||
const [editingUserId, setEditingUserId] = useState<string | null>(null)
|
||||
const [editForm, setEditForm] = useState({
|
||||
name: '',
|
||||
email: '',
|
||||
role: '',
|
||||
})
|
||||
const [editForm, setEditForm] = useState({ name: '', email: '', role: '' })
|
||||
|
||||
const handleOpenEdit = (user: any) => {
|
||||
setEditingUserId(user.id)
|
||||
@@ -174,7 +170,6 @@ function UsersPage() {
|
||||
|
||||
const handleEditUser = async () => {
|
||||
if (!editingUserId || !editForm.name || !editForm.email) return
|
||||
|
||||
setIsEditing(true)
|
||||
try {
|
||||
const res = await fetch(API_URLS.editOperator(editingUserId), {
|
||||
@@ -182,7 +177,6 @@ function UsersPage() {
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(editForm),
|
||||
})
|
||||
|
||||
if (res.ok) {
|
||||
notifications.show({ title: 'Success', message: 'User has been updated.', color: 'teal', icon: <TbCircleCheck size={18} /> })
|
||||
mutateOperators()
|
||||
@@ -190,14 +184,14 @@ function UsersPage() {
|
||||
} else {
|
||||
throw new Error('Failed to update user')
|
||||
}
|
||||
} catch (e) {
|
||||
} catch {
|
||||
notifications.show({ title: 'Error', message: 'Something went wrong.', color: 'red', icon: <TbCircleX size={18} /> })
|
||||
} finally {
|
||||
setIsEditing(false)
|
||||
}
|
||||
}
|
||||
|
||||
// ── Delete User ──
|
||||
// ── Delete User Modal ──
|
||||
const [deleteOpened, { open: openDelete, close: closeDelete }] = useDisclosure(false)
|
||||
const [isDeleting, setIsDeleting] = useState(false)
|
||||
const [deletingUser, setDeletingUser] = useState<any>(null)
|
||||
@@ -209,13 +203,9 @@ function UsersPage() {
|
||||
|
||||
const handleDeleteUser = async () => {
|
||||
if (!deletingUser) return
|
||||
|
||||
setIsDeleting(true)
|
||||
try {
|
||||
const res = await fetch(API_URLS.deleteOperator(deletingUser.id), {
|
||||
method: 'DELETE',
|
||||
})
|
||||
|
||||
const res = await fetch(API_URLS.deleteOperator(deletingUser.id), { method: 'DELETE' })
|
||||
if (res.ok) {
|
||||
notifications.show({ title: 'Success', message: 'User has been deleted.', color: 'teal', icon: <TbCircleCheck size={18} /> })
|
||||
mutateOperators()
|
||||
@@ -242,7 +232,7 @@ function UsersPage() {
|
||||
body: JSON.stringify({ active: true }),
|
||||
})
|
||||
if (res.ok) {
|
||||
notifications.show({ title: 'Success', message: `${user.name} telah diaktifkan kembali.`, color: 'teal', icon: <TbCircleCheck size={18} /> })
|
||||
notifications.show({ title: 'Success', message: `${user.name} has been reactivated.`, color: 'teal', icon: <TbCircleCheck size={18} /> })
|
||||
mutateOperators()
|
||||
mutateStats()
|
||||
} else {
|
||||
@@ -258,39 +248,52 @@ function UsersPage() {
|
||||
<DashboardLayout>
|
||||
<Container size="xl" py="lg">
|
||||
<Stack gap="xl">
|
||||
<Group justify="space-between" align="center">
|
||||
<Stack gap={0}>
|
||||
<Title order={2} className="gradient-text">Users</Title>
|
||||
<Text size="sm" c="dimmed">Manage system users, security roles, and application access control.</Text>
|
||||
<Stack gap={4}>
|
||||
<Title order={2} className="gradient-text">User Management</Title>
|
||||
<Text size="sm" c="dimmed">Manage platform users, security roles, and access control.</Text>
|
||||
</Stack>
|
||||
</Group>
|
||||
|
||||
<SimpleGrid cols={{ base: 1, sm: 3 }} spacing="lg">
|
||||
<StatsCard title="Total Staff" value={stats?.totalStaff ?? 0} icon={TbUserCheck} color="brand-blue" />
|
||||
<StatsCard title="Active Now" value={stats?.activeNow ?? 0} icon={TbAccessPoint} color="teal" />
|
||||
<StatsCard title="Security Roles" value={stats?.rolesCount ?? 0} icon={TbShieldCheck} color="purple-primary" />
|
||||
<StatsCard
|
||||
title="Total Staff"
|
||||
value={stats?.totalStaff ?? 0}
|
||||
description="Registered platform users"
|
||||
icon={TbUserCheck}
|
||||
color="brand-blue"
|
||||
/>
|
||||
<StatsCard
|
||||
title="Active Now"
|
||||
value={stats?.activeNow ?? 0}
|
||||
description="Users with active sessions"
|
||||
icon={TbAccessPoint}
|
||||
color="teal"
|
||||
/>
|
||||
<StatsCard
|
||||
title="Security Roles"
|
||||
value={stats?.rolesCount ?? 0}
|
||||
description="Defined permission levels"
|
||||
icon={TbShieldCheck}
|
||||
color="purple-primary"
|
||||
/>
|
||||
</SimpleGrid>
|
||||
|
||||
<Tabs defaultValue="users" color="brand-blue" variant="pills" radius="md">
|
||||
<Tabs.List>
|
||||
<Tabs.Tab value="users" leftSection={<TbUserCheck size={16} />}>User Management</Tabs.Tab>
|
||||
<Tabs.Tab value="roles" leftSection={<TbShieldCheck size={16} />}>Role Management</Tabs.Tab>
|
||||
<Tabs.Tab value="roles" leftSection={<TbShieldCheck size={16} />}>Role Reference</Tabs.Tab>
|
||||
</Tabs.List>
|
||||
|
||||
<Tabs.Panel value="users" pt="xl">
|
||||
<Stack gap="md">
|
||||
<Group justify="space-between">
|
||||
<TextInput
|
||||
placeholder="Search users..."
|
||||
placeholder="Search by name or email..."
|
||||
leftSection={<TbSearch size={16} />}
|
||||
radius="md"
|
||||
w={350}
|
||||
w={320}
|
||||
variant="filled"
|
||||
value={search}
|
||||
onChange={(e) => {
|
||||
setSearch(e.currentTarget.value)
|
||||
setPage(1)
|
||||
}}
|
||||
onChange={(e) => { setSearch(e.currentTarget.value); setPage(1) }}
|
||||
/>
|
||||
{isDeveloper && (
|
||||
<Button
|
||||
@@ -298,6 +301,7 @@ function UsersPage() {
|
||||
gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
|
||||
leftSection={<TbPlus size={18} />}
|
||||
radius="md"
|
||||
size="sm"
|
||||
onClick={openCreate}
|
||||
>
|
||||
Add New User
|
||||
@@ -311,21 +315,26 @@ function UsersPage() {
|
||||
<Table.Tr>
|
||||
<Table.Th>Name & Contact</Table.Th>
|
||||
<Table.Th>Role</Table.Th>
|
||||
<Table.Th>Joined Date</Table.Th>
|
||||
<Table.Th>Joined</Table.Th>
|
||||
<Table.Th>Actions</Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>
|
||||
{isLoading ? (
|
||||
<Table.Tr>
|
||||
<Table.Td colSpan={4} align="center">
|
||||
<Text size="sm" c="dimmed" py="xl">Loading user data...</Text>
|
||||
<Table.Td colSpan={4}>
|
||||
<Group justify="center" py="xl">
|
||||
<Loader size="sm" type="dots" />
|
||||
</Group>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
) : operators.length === 0 ? (
|
||||
<Table.Tr>
|
||||
<Table.Td colSpan={4} align="center">
|
||||
<Text size="sm" c="dimmed" py="xl">No users found.</Text>
|
||||
<Table.Td colSpan={4}>
|
||||
<Stack align="center" gap="xs" py="xl">
|
||||
<TbUsers size={32} style={{ opacity: 0.25 }} />
|
||||
<Text size="sm" c="dimmed">No users found.</Text>
|
||||
</Stack>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
) : (
|
||||
@@ -334,7 +343,12 @@ function UsersPage() {
|
||||
<Table.Td style={{ opacity: user.active === false ? 0.45 : 1 }}>
|
||||
<Group gap="sm">
|
||||
<Box style={{ position: 'relative' }}>
|
||||
<Avatar size="sm" radius="xl" color={user.active === false ? 'gray' : getRoleColor(user.role)} src={user.image}>
|
||||
<Avatar
|
||||
size="sm"
|
||||
radius="xl"
|
||||
color={user.active === false ? 'gray' : ROLE_COLOR[user.role] ?? 'gray'}
|
||||
src={user.image}
|
||||
>
|
||||
{user.name.charAt(0)}
|
||||
</Avatar>
|
||||
{user.active === false && (
|
||||
@@ -350,7 +364,9 @@ function UsersPage() {
|
||||
</Box>
|
||||
<Stack gap={0}>
|
||||
<Group gap={6}>
|
||||
<Text fw={600} size="sm" c={user.active === false ? 'dimmed' : undefined}>{user.name}</Text>
|
||||
<Text fw={600} size="sm" c={user.active === false ? 'dimmed' : undefined}>
|
||||
{user.name}
|
||||
</Text>
|
||||
{user.active === false && (
|
||||
<Badge size="xs" color="red" variant="light">Inactive</Badge>
|
||||
)}
|
||||
@@ -360,31 +376,61 @@ function UsersPage() {
|
||||
</Group>
|
||||
</Table.Td>
|
||||
<Table.Td style={{ opacity: user.active === false ? 0.45 : 1 }}>
|
||||
<Badge variant="light" color={user.active === false ? 'gray' : getRoleColor(user.role)}>
|
||||
{user.role}
|
||||
<Badge
|
||||
variant="light"
|
||||
size="sm"
|
||||
color={user.active === false ? 'gray' : ROLE_COLOR[user.role] ?? 'gray'}
|
||||
>
|
||||
{ROLE_LABEL[user.role] ?? user.role}
|
||||
</Badge>
|
||||
</Table.Td>
|
||||
<Table.Td style={{ opacity: user.active === false ? 0.45 : 1 }}>
|
||||
<Text size="xs" fw={500} c={user.active === false ? 'dimmed' : undefined}>
|
||||
{new Date(user.createdAt).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' })}
|
||||
{new Date(user.createdAt).toLocaleDateString('en-GB', {
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
year: 'numeric',
|
||||
})}
|
||||
</Text>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Group gap="xs">
|
||||
{user.active === false ? (
|
||||
<Tooltip label="Aktifkan user" withArrow>
|
||||
<ActionIcon disabled={!isDeveloper} variant="light" size="sm" color="teal" onClick={() => handleActivateUser(user)}>
|
||||
<Tooltip label="Reactivate user" withArrow>
|
||||
<ActionIcon
|
||||
disabled={!isDeveloper}
|
||||
variant="light"
|
||||
size="sm"
|
||||
color="teal"
|
||||
onClick={() => handleActivateUser(user)}
|
||||
>
|
||||
<TbUserPlus size={14} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<>
|
||||
<ActionIcon disabled={!isDeveloper} variant="light" size="sm" color="blue" onClick={() => handleOpenEdit(user)}>
|
||||
<Tooltip label="Edit user" withArrow>
|
||||
<ActionIcon
|
||||
disabled={!isDeveloper}
|
||||
variant="light"
|
||||
size="sm"
|
||||
color="blue"
|
||||
onClick={() => handleOpenEdit(user)}
|
||||
>
|
||||
<TbPencil size={14} />
|
||||
</ActionIcon>
|
||||
<ActionIcon disabled={!isDeveloper} variant="light" size="sm" color="red" onClick={() => handleOpenDelete(user)}>
|
||||
</Tooltip>
|
||||
<Tooltip label="Delete user" withArrow>
|
||||
<ActionIcon
|
||||
disabled={!isDeveloper}
|
||||
variant="light"
|
||||
size="sm"
|
||||
color="red"
|
||||
onClick={() => handleOpenDelete(user)}
|
||||
>
|
||||
<TbTrash size={14} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</>
|
||||
)}
|
||||
</Group>
|
||||
@@ -398,12 +444,7 @@ function UsersPage() {
|
||||
|
||||
{response?.totalPages > 1 && (
|
||||
<Group justify="center" mt="md">
|
||||
<Pagination
|
||||
total={response.totalPages}
|
||||
value={page}
|
||||
onChange={setPage}
|
||||
radius="md"
|
||||
/>
|
||||
<Pagination total={response.totalPages} value={page} onChange={setPage} size="sm" radius="md" />
|
||||
</Group>
|
||||
)}
|
||||
</Stack>
|
||||
@@ -414,20 +455,18 @@ function UsersPage() {
|
||||
{roles.map((role) => (
|
||||
<Card key={role.name} withBorder radius="2xl" padding="xl" className="glass">
|
||||
<Stack gap="md">
|
||||
<Group justify="space-between">
|
||||
<ThemeIcon size="xl" radius="md" color={role.color} variant="light">
|
||||
<TbShieldCheck size={28} />
|
||||
</ThemeIcon>
|
||||
</Group>
|
||||
|
||||
<Stack gap={4}>
|
||||
<Title order={4}>{role.name}</Title>
|
||||
<Title order={4}>{ROLE_LABEL[role.name] ?? role.name}</Title>
|
||||
<Text size="sm" c="dimmed">{role.description}</Text>
|
||||
</Stack>
|
||||
|
||||
<Divider />
|
||||
|
||||
<Text size="xs" fw={700} c="dimmed" style={{ textTransform: 'uppercase' }}>Key Permissions</Text>
|
||||
<Text size="xs" fw={700} c="dimmed" tt="uppercase">Key Permissions</Text>
|
||||
<List
|
||||
spacing="xs"
|
||||
size="sm"
|
||||
@@ -442,10 +481,6 @@ function UsersPage() {
|
||||
<List.Item key={p}>{p}</List.Item>
|
||||
))}
|
||||
</List>
|
||||
|
||||
{/* <Button fullWidth variant="light" color={role.color} mt="md" radius="md">
|
||||
Edit Permissions
|
||||
</Button> */}
|
||||
</Stack>
|
||||
</Card>
|
||||
))}
|
||||
@@ -460,7 +495,7 @@ function UsersPage() {
|
||||
opened={createOpened}
|
||||
onClose={closeCreate}
|
||||
title={<Text fw={700} size="lg">Add New User</Text>}
|
||||
radius="xl"
|
||||
radius="md"
|
||||
overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
@@ -492,7 +527,7 @@ function UsersPage() {
|
||||
{ value: 'DEVELOPER', label: 'Developer' },
|
||||
]}
|
||||
value={createForm.role}
|
||||
onChange={(val) => setCreateForm({ ...createForm, role: val || 'USER' })}
|
||||
onChange={(val) => setCreateForm({ ...createForm, role: val || 'ADMIN' })}
|
||||
/>
|
||||
<Button
|
||||
fullWidth
|
||||
@@ -512,7 +547,7 @@ function UsersPage() {
|
||||
opened={editOpened}
|
||||
onClose={closeEdit}
|
||||
title={<Text fw={700} size="lg">Edit User</Text>}
|
||||
radius="xl"
|
||||
radius="md"
|
||||
overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
@@ -558,21 +593,19 @@ function UsersPage() {
|
||||
opened={deleteOpened}
|
||||
onClose={closeDelete}
|
||||
title={<Text fw={700} size="lg">Delete User</Text>}
|
||||
radius="xl"
|
||||
radius="md"
|
||||
size="sm"
|
||||
overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Text size="sm">
|
||||
Are you sure you want to delete <Text component="span" fw={700}>{deletingUser?.name}</Text>? This action cannot be undone.
|
||||
Are you sure you want to delete{' '}
|
||||
<Text component="span" fw={700}>{deletingUser?.name}</Text>?
|
||||
This action cannot be undone.
|
||||
</Text>
|
||||
<Group justify="flex-end" mt="md">
|
||||
<Button variant="subtle" color="gray" onClick={closeDelete}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button color="red" loading={isDeleting} onClick={handleDeleteUser}>
|
||||
Delete User
|
||||
</Button>
|
||||
<Button variant="subtle" color="gray" onClick={closeDelete}>Cancel</Button>
|
||||
<Button color="red" loading={isDeleting} onClick={handleDeleteUser}>Delete User</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Modal>
|
||||
|
||||
18
src/logo.svg
18
src/logo.svg
@@ -1 +1,17 @@
|
||||
<svg id="Bun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 70"><title>Bun Logo</title><path id="Shadow" d="M71.09,20.74c-.16-.17-.33-.34-.5-.5s-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5A26.46,26.46,0,0,1,75.5,35.7c0,16.57-16.82,30.05-37.5,30.05-11.58,0-21.94-4.23-28.83-10.86l.5.5.5.5.5.5.5.5.5.5.5.5.5.5C19.55,65.3,30.14,69.75,42,69.75c20.68,0,37.5-13.48,37.5-30C79.5,32.69,76.46,26,71.09,20.74Z"/><g id="Body"><path id="Background" d="M73,35.7c0,15.21-15.67,27.54-35,27.54S3,50.91,3,35.7C3,26.27,9,17.94,18.22,13S33.18,3,38,3s8.94,4.13,19.78,10C67,17.94,73,26.27,73,35.7Z" style="fill:#fbf0df"/><path id="Bottom_Shadow" data-name="Bottom Shadow" d="M73,35.7a21.67,21.67,0,0,0-.8-5.78c-2.73,33.3-43.35,34.9-59.32,24.94A40,40,0,0,0,38,63.24C57.3,63.24,73,50.89,73,35.7Z" style="fill:#f6dece"/><path id="Light_Shine" data-name="Light Shine" d="M24.53,11.17C29,8.49,34.94,3.46,40.78,3.45A9.29,9.29,0,0,0,38,3c-2.42,0-5,1.25-8.25,3.13-1.13.66-2.3,1.39-3.54,2.15-2.33,1.44-5,3.07-8,4.7C8.69,18.13,3,26.62,3,35.7c0,.4,0,.8,0,1.19C9.06,15.48,20.07,13.85,24.53,11.17Z" style="fill:#fffefc"/><path id="Top" d="M35.12,5.53A16.41,16.41,0,0,1,29.49,18c-.28.25-.06.73.3.59,3.37-1.31,7.92-5.23,6-13.14C35.71,5,35.12,5.12,35.12,5.53Zm2.27,0A16.24,16.24,0,0,1,39,19c-.12.35.31.65.55.36C41.74,16.56,43.65,11,37.93,5,37.64,4.74,37.19,5.14,37.39,5.49Zm2.76-.17A16.42,16.42,0,0,1,47,17.12a.33.33,0,0,0,.65.11c.92-3.49.4-9.44-7.17-12.53C40.08,4.54,39.82,5.08,40.15,5.32ZM21.69,15.76a16.94,16.94,0,0,0,10.47-9c.18-.36.75-.22.66.18-1.73,8-7.52,9.67-11.12,9.45C21.32,16.4,21.33,15.87,21.69,15.76Z" style="fill:#ccbea7;fill-rule:evenodd"/><path id="Outline" d="M38,65.75C17.32,65.75.5,52.27.5,35.7c0-10,6.18-19.33,16.53-24.92,3-1.6,5.57-3.21,7.86-4.62,1.26-.78,2.45-1.51,3.6-2.19C32,1.89,35,.5,38,.5s5.62,1.2,8.9,3.14c1,.57,2,1.19,3.07,1.87,2.49,1.54,5.3,3.28,9,5.27C69.32,16.37,75.5,25.69,75.5,35.7,75.5,52.27,58.68,65.75,38,65.75ZM38,3c-2.42,0-5,1.25-8.25,3.13-1.13.66-2.3,1.39-3.54,2.15-2.33,1.44-5,3.07-8,4.7C8.69,18.13,3,26.62,3,35.7,3,50.89,18.7,63.25,38,63.25S73,50.89,73,35.7C73,26.62,67.31,18.13,57.78,13,54,11,51.05,9.12,48.66,7.64c-1.09-.67-2.09-1.29-3-1.84C42.63,4,40.42,3,38,3Z"/></g><g id="Mouth"><g id="Background-2" data-name="Background"><path d="M45.05,43a8.93,8.93,0,0,1-2.92,4.71,6.81,6.81,0,0,1-4,1.88A6.84,6.84,0,0,1,34,47.71,8.93,8.93,0,0,1,31.12,43a.72.72,0,0,1,.8-.81H44.26A.72.72,0,0,1,45.05,43Z" style="fill:#b71422"/></g><g id="Tongue"><path id="Background-3" data-name="Background" d="M34,47.79a6.91,6.91,0,0,0,4.12,1.9,6.91,6.91,0,0,0,4.11-1.9,10.63,10.63,0,0,0,1-1.07,6.83,6.83,0,0,0-4.9-2.31,6.15,6.15,0,0,0-5,2.78C33.56,47.4,33.76,47.6,34,47.79Z" style="fill:#ff6164"/><path id="Outline-2" data-name="Outline" d="M34.16,47a5.36,5.36,0,0,1,4.19-2.08,6,6,0,0,1,4,1.69c.23-.25.45-.51.66-.77a7,7,0,0,0-4.71-1.93,6.36,6.36,0,0,0-4.89,2.36A9.53,9.53,0,0,0,34.16,47Z"/></g><path id="Outline-3" data-name="Outline" d="M38.09,50.19a7.42,7.42,0,0,1-4.45-2,9.52,9.52,0,0,1-3.11-5.05,1.2,1.2,0,0,1,.26-1,1.41,1.41,0,0,1,1.13-.51H44.26a1.44,1.44,0,0,1,1.13.51,1.19,1.19,0,0,1,.25,1h0a9.52,9.52,0,0,1-3.11,5.05A7.42,7.42,0,0,1,38.09,50.19Zm-6.17-7.4c-.16,0-.2.07-.21.09a8.29,8.29,0,0,0,2.73,4.37A6.23,6.23,0,0,0,38.09,49a6.28,6.28,0,0,0,3.65-1.73,8.3,8.3,0,0,0,2.72-4.37.21.21,0,0,0-.2-.09Z"/></g><g id="Face"><ellipse id="Right_Blush" data-name="Right Blush" cx="53.22" cy="40.18" rx="5.85" ry="3.44" style="fill:#febbd0"/><ellipse id="Left_Bluch" data-name="Left Bluch" cx="22.95" cy="40.18" rx="5.85" ry="3.44" style="fill:#febbd0"/><path id="Eyes" d="M25.7,38.8a5.51,5.51,0,1,0-5.5-5.51A5.51,5.51,0,0,0,25.7,38.8Zm24.77,0A5.51,5.51,0,1,0,45,33.29,5.5,5.5,0,0,0,50.47,38.8Z" style="fill-rule:evenodd"/><path id="Iris" d="M24,33.64a2.07,2.07,0,1,0-2.06-2.07A2.07,2.07,0,0,0,24,33.64Zm24.77,0a2.07,2.07,0,1,0-2.06-2.07A2.07,2.07,0,0,0,48.75,33.64Z" style="fill:#fff;fill-rule:evenodd"/></g></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="g" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#2563EB"/>
|
||||
<stop offset="1" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="32" height="32" rx="7" fill="url(#g)"/>
|
||||
<polyline
|
||||
points="3,16 9,16 12,8 16,24 19,16 29,16"
|
||||
stroke="white"
|
||||
stroke-width="2.2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
fill="none"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 522 B |
Reference in New Issue
Block a user