diff --git a/index.html b/index.html
index f7a73bd..fbe7d51 100644
--- a/index.html
+++ b/index.html
@@ -4,9 +4,10 @@
+
- My App
+ Monitoring System
-
-
Loading...
+
+
Monitoring System
+
+
+
+
+
diff --git a/src/frontend/components/AppCard.tsx b/src/frontend/components/AppCard.tsx
index 7c5fcff..fca444a 100644
--- a/src/frontend/components/AppCard.tsx
+++ b/src/frontend/components/AppCard.tsx
@@ -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) {
},
})}
>
-
+
-
+
{name}
- {/* VERSION {version} */}
+ {/* v{version} */}
- {/*
- {status.toUpperCase()}
- */}
+
+ {statusLabel}
+
- {/*
-
-
-
-
- USER ADOPTION
-
- {users.toLocaleString()}
-
-
-
-
-
-
-
- 0 ? '#ef4444' : '#64748b'} />
- ERROR
-
- 0 ? 'red' : 'dimmed'}>{errors}
-
-
- */}
+
+ Open Errors
+ 0 ? 'red' : 'teal'}
+ variant="light"
+ size="sm"
+ leftSection={errors > 0 ? : undefined}
+ >
+ {errors > 0 ? errors : 'None'}
+
+
}
styles={{
@@ -97,7 +86,7 @@ export function AppCard({ id, name, status, errors, version }: AppCardProps) {
}
}}
>
- View
+ Open Dashboard
)
diff --git a/src/frontend/components/ErrorDataTable.tsx b/src/frontend/components/ErrorDataTable.tsx
index 7c73515..cd0c2f7 100644
--- a/src/frontend/components/ErrorDataTable.tsx
+++ b/src/frontend/components/ErrorDataTable.tsx
@@ -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 = {
+ OPEN: 'red',
+ IN_PROGRESS: 'blue',
+ ON_HOLD: 'orange',
+ RESOLVED: 'teal',
+ RELEASED: 'green',
+ CLOSED: 'gray',
+}
+const STATUS_LABEL: Record = {
+ 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(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 (
<>
-
-
+
+
- LATEST ERROR REPORTS
+
+ Latest Error Reports
+ Most recent open bugs
+
- }>
- View All Reports
-
+
+ }
+ >
+ View All
+
+
-
-
+
+
- Error Message
+ Error Description
Reporter
- App Version
- Timestamp
- Severity
+ Version
+ Reported
+ Status
{isLoading ? (
-
- Loading errors...
+
+
+
+
) : bugs.length === 0 ? (
-
- No errors found.
+
+
+
+ No error reports found.
+
) : bugs.map((error: any) => (
@@ -97,24 +127,34 @@ export function ErrorDataTable({ appId }: ErrorDataTableProps) {
onClick={() => handleRowClick(error)}
style={{ cursor: 'pointer' }}
>
-
+
{error.description}
- {error.user?.name || error.userId || 'System'}
+
+ {error.user?.name || error.userId || 'System'}
+
- {error.affectedVersion || 'N/A'}
+
+ v{error.affectedVersion || 'N/A'}
+
-
+
- {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 })}
+
+ {dayjs(error.createdAt).format('D MMM YYYY, HH:mm')}
+
-
-
- {(error.status || '').toUpperCase()}
+
+
+ {STATUS_LABEL[error.status?.toUpperCase()] ?? error.status}
@@ -131,37 +171,68 @@ export function ErrorDataTable({ appId }: ErrorDataTableProps) {
size="md"
title={
-
- Error Investigation
+
+ Error Detail
}
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 && (
- MESSAGE
- {selectedError.description}
+ Description
+ {selectedError.description}
- SOURCE
- {selectedError.source}
+ Status
+
+ {STATUS_LABEL[selectedError.status?.toUpperCase()] ?? selectedError.status}
+
- APP VERSION
- {selectedError.affectedVersion || 'N/A'}
+ Source
+ {selectedError.source}
+
+
+ App Version
+ v{selectedError.affectedVersion || 'N/A'}
+
+
+ Reported
+ {dayjs(selectedError.createdAt).format('D MMM YYYY, HH:mm')}
+ {selectedError.device && (
+
+ Device
+ {selectedError.device} · {selectedError.os}
+
+ )}
+
+ {selectedError.feedBack && (
+ <>
+
+
+ Developer Feedback
+ {selectedError.feedBack}
+
+
+ )}
+
- STACK TRACE
+ Stack Trace
{showStackTrace && (
-
- {selectedError.stackTrace}
+
+ {selectedError.stackTrace || '(no stack trace)'}
)}
@@ -183,5 +258,3 @@ export function ErrorDataTable({ appId }: ErrorDataTableProps) {
)
}
-
-import { SimpleGrid, ThemeIcon } from '@mantine/core'
diff --git a/src/frontend/routes/apps.$appId.errors.tsx b/src/frontend/routes/apps.$appId.errors.tsx
index 4f3d173..53bf52f 100644
--- a/src/frontend/routes/apps.$appId.errors.tsx
+++ b/src/frontend/routes/apps.$appId.errors.tsx
@@ -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 = {
+ OPEN: 'red',
+ IN_PROGRESS: 'blue',
+ ON_HOLD: 'orange',
+ RESOLVED: 'teal',
+ RELEASED: 'green',
+ CLOSED: 'gray',
+}
+const STATUS_LABEL: Record = {
+ 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>({})
const [showStackTrace, setShowStackTrace] = useState>({})
- 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(null)
- // Create Bug Modal Logic
const [opened, { open, close }] = useDisclosure(false)
const [isSubmitting, setIsSubmitting] = useState(false)
const [imageFiles, setImageFiles] = useState([])
@@ -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(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: ,
- })
+ notifications.show({ title: 'Success', message: 'Feedback has been updated.', color: 'teal', icon: })
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: ,
- })
+ } catch {
+ notifications.show({ title: 'Error', message: 'Something went wrong.', color: 'red', icon: })
} 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: ,
- })
+ notifications.show({ title: 'Success', message: 'Status has been updated.', color: 'teal', icon: })
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: ,
- })
+ } catch {
+ notifications.show({ title: 'Error', message: 'Something went wrong.', color: 'red', icon: })
} 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: ,
- })
+ notifications.show({ title: 'Success', message: 'Error report has been created.', color: 'teal', icon: })
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: ,
- })
+ } catch {
+ notifications.show({ title: 'Error', message: 'Something went wrong.', color: 'red', icon: })
} finally {
setIsSubmitting(false)
}
@@ -257,16 +207,19 @@ function AppErrorsPage() {
const totalPages = data?.totalPages || 1
return (
-
-
-
- Error Reporting Center
- Advanced analysis of health issues and crashes for {appId}.
+
+
+
+ Error Reports
+
+ Bug reports and crash tracking for this application.
+
}
+ 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 && (
-
+
)}
@@ -299,28 +247,21 @@ function AppErrorsPage() {
opened={updateModalOpened}
onClose={closeUpdateModal}
title={Update Bug Status}
- radius="xl"
+ radius="md"
overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
>