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

upd: swagger docs, api key auth, bug fixes

Browse Source 
- tambah Elysia Swagger di /docs dengan deskripsi lengkap semua endpoint
- tambah API key auth (X-API-Key) untuk klien eksternal di POST /api/bugs
- tambah normalisasi BugSource: SYSTEM/USER untuk eksternal, QC/SYSTEM/USER untuk dashboard
- perbaiki source schema jadi optional string agar tidak reject nilai unknown dari klien lama
- hapus field status dari form create bug (selalu OPEN)
- perbaiki typo desa_plus → appId di apps.$appId.errors.tsx
- tambah toggle hide/show stack trace di bug-reports.tsx dan apps.$appId.errors.tsx
- perbaiki grafik desa (width(-1)/height(-1)) dengan minWidth: 0 pada grid item
- perbaiki error &[data-active] inline style di DashboardLayout → pindah ke CSS class
- update CLAUDE.md dengan arsitektur lengkap

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
amaliadwiy
2026-04-21 17:30:07 +08:00
parent cd295abf2c
commit d09a702d64
13 changed files with 545 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

374
src/app.ts
View File

@@ -1,12 +1,56 @@
import { cors } from '@elysiajs/cors'
import { html } from '@elysiajs/html'
import { Elysia } from 'elysia'
import { swagger } from '@elysiajs/swagger'
import { Elysia, t } from 'elysia'
import { BugSource } from '../generated/prisma'
import { prisma } from './lib/db'
import { env } from './lib/env'
import { createSystemLog } from './lib/logger'
interface AuthResult {
actingUserId: string
reporterUserId: string | null // null jika via API key (tidak ada user spesifik)
isApiKey: boolean // true = dari klien eksternal (mobile app)
}
// Validates session cookie OR X-API-Key header. Returns null if neither is valid.
async function checkAuth(request: Request): Promise<AuthResult | null> {
const cookie = request.headers.get('cookie') ?? ''
const token = cookie.match(/session=([^;]+)/)?.[1]
if (token) {
const session = await prisma.session.findUnique({ where: { token } })
if (session && session.expiresAt > new Date()) {
return { actingUserId: session.userId, reporterUserId: session.userId, isApiKey: false }
}
}
const apiKey = request.headers.get('x-api-key')
if (apiKey && apiKey === env.API_KEY) {
const developer = await prisma.user.findFirst({ where: { role: 'DEVELOPER' } })
if (!developer) return null
return { actingUserId: developer.id, reporterUserId: null, isApiKey: true }
}
return null
}
export function createApp() {
return new Elysia()
.use(swagger({
path: '/docs',
documentation: {
info: { title: 'Monitoring App API', version: '0.1.0' },
tags: [
{ name: 'Auth', description: 'Autentikasi dan manajemen sesi' },
{ name: 'Dashboard', description: 'Statistik dan ringkasan monitoring' },
{ name: 'Apps', description: 'Manajemen aplikasi yang dimonitor' },
{ name: 'Bugs', description: 'Manajemen laporan bug' },
{ name: 'Logs', description: 'Log aktivitas sistem' },
{ name: 'Operators', description: 'Manajemen operator / pengguna sistem' },
{ name: 'System', description: 'Status dan kesehatan sistem' },
],
},
}))
.use(cors())
.use(html())
@@ -25,12 +69,18 @@ export function createApp() {
})
})
// API routes
.get('/health', () => ({ status: 'ok' }))
// ─── Health ───────────────────────────────────────
.get('/health', () => ({ status: 'ok' }), {
detail: {
summary: 'Health Check',
description: 'Memeriksa apakah server sedang berjalan.',
tags: ['System'],
},
})
// ─── Auth API ──────────────────────────────────────
.post('/api/auth/login', async ({ request, set }) => {
const { email, password } = (await request.json()) as { email: string; password: string }
.post('/api/auth/login', async ({ body, set }) => {
const { email, password } = body
let user = await prisma.user.findUnique({ where: { email } })
if (!user || !(await Bun.password.verify(password, user.password))) {
set.status = 401
@@ -46,6 +96,16 @@ export function createApp() {
set.headers['set-cookie'] = `session=${token}; Path=/; HttpOnly; SameSite=Lax; Max-Age=86400`
await createSystemLog(user.id, 'LOGIN', 'Logged in successfully')
return { user: { id: user.id, name: user.name, email: user.email, role: user.role } }
}, {
body: t.Object({
email: t.String({ format: 'email', description: 'Email pengguna' }),
password: t.String({ minLength: 1, description: 'Password pengguna' }),
}),
detail: {
summary: 'Login',
description: 'Login dengan email dan password. Mengembalikan data user dan set session cookie (HttpOnly, 24 jam). Jika email terdaftar di SUPER_ADMIN_EMAIL, role otomatis di-promote ke DEVELOPER.',
tags: ['Auth'],
},
})
.post('/api/auth/logout', async ({ request, set }) => {
@@ -60,6 +120,12 @@ export function createApp() {
}
set.headers['set-cookie'] = 'session=; Path=/; HttpOnly; Max-Age=0'
return { ok: true }
}, {
detail: {
summary: 'Logout',
description: 'Menghapus sesi aktif dari database dan membersihkan session cookie.',
tags: ['Auth'],
},
})
.get('/api/auth/session', async ({ request, set }) => {
@@ -76,11 +142,15 @@ export function createApp() {
return { user: null }
}
return { user: session.user }
}, {
detail: {
summary: 'Get Current Session',
description: 'Mengembalikan data user dari sesi aktif berdasarkan session cookie. Mengembalikan 401 jika tidak ada sesi atau sudah kadaluarsa.',
tags: ['Auth'],
},
})
// ─── Monitoring API ────────────────────────────────
// ─── Dashboard API ─────────────────────────────────
.get('/api/dashboard/stats', async () => {
const newErrors = await prisma.bug.count({ where: { status: 'OPEN' } })
const users = await prisma.user.count()
@@ -90,6 +160,12 @@ export function createApp() {
activeUsers: users,
trends: { totalApps: 0, newErrors: 12, activeUsers: 5.2 }
}
}, {
detail: {
summary: 'Dashboard Stats',
description: 'Mengembalikan statistik utama dashboard: total aplikasi, jumlah error baru (status OPEN), total pengguna, dan data tren.',
tags: ['Dashboard'],
},
})
.get('/api/dashboard/recent-errors', async () => {
@@ -105,10 +181,17 @@ export function createApp() {
time: b.createdAt.toISOString(),
severity: b.status
}))
}, {
detail: {
summary: 'Recent Errors',
description: 'Mengembalikan 5 bug report terbaru (diurutkan dari yang terbaru) untuk ditampilkan di dashboard.',
tags: ['Dashboard'],
},
})
// ─── Apps API ──────────────────────────────────────
.get('/api/apps', async ({ query }) => {
const search = (query.search as string) || ''
const search = query.search || ''
const where: any = {}
if (search) {
where.name = { contains: search, mode: 'insensitive' }
@@ -131,6 +214,15 @@ export function createApp() {
version: app.version ?? '-',
maintenance: app.maintenance,
}))
}, {
query: t.Object({
search: t.Optional(t.String({ description: 'Filter berdasarkan nama aplikasi' })),
}),
detail: {
summary: 'List Apps',
description: 'Mengembalikan semua aplikasi yang dimonitor beserta status (active/warning/error), jumlah bug OPEN, versi, dan mode maintenance.',
tags: ['Apps'],
},
})
.get('/api/apps/:appId', async ({ params: { appId }, set }) => {
@@ -157,14 +249,24 @@ export function createApp() {
maintenance: app.maintenance,
totalBugs: app._count.bugs,
}
}, {
params: t.Object({
appId: t.String({ description: 'ID aplikasi (contoh: desa-plus)' }),
}),
detail: {
summary: 'Get App Detail',
description: 'Mengembalikan detail satu aplikasi berdasarkan ID, termasuk status, versi minimum, mode maintenance, dan total semua bug.',
tags: ['Apps'],
},
})
// ─── Logs API ──────────────────────────────────────
.get('/api/logs', async ({ query }) => {
const page = Number(query.page) || 1
const limit = Number(query.limit) || 20
const search = (query.search as string) || ''
const search = query.search || ''
const type = query.type as any
const userId = query.userId as string
const userId = query.userId
const where: any = {}
if (search) {
@@ -196,31 +298,63 @@ export function createApp() {
totalPages: Math.ceil(total / limit),
totalItems: total
}
}, {
query: t.Object({
page: t.Optional(t.String({ description: 'Nomor halaman (default: 1)' })),
limit: t.Optional(t.String({ description: 'Jumlah data per halaman (default: 20)' })),
search: t.Optional(t.String({ description: 'Cari berdasarkan pesan log atau nama pengguna' })),
type: t.Optional(t.String({ description: 'Filter tipe: CREATE | UPDATE | DELETE | LOGIN | LOGOUT | all' })),
userId: t.Optional(t.String({ description: 'Filter berdasarkan ID pengguna, atau "all"' })),
}),
detail: {
summary: 'List Activity Logs',
description: 'Mengembalikan log aktivitas sistem dengan pagination. Mendukung filter berdasarkan tipe log (CREATE, UPDATE, DELETE, LOGIN, LOGOUT) dan pengguna.',
tags: ['Logs'],
},
})
.post('/api/logs', async ({ request, set }) => {
.post('/api/logs', async ({ body, request }) => {
const cookie = request.headers.get('cookie') ?? ''
const token = cookie.match(/session=([^;]+)/)?.[1]
let userId: string | undefined
if (token) {
const session = await prisma.session.findUnique({ where: { token } })
if (session && session.expiresAt > new Date()) {
userId = session.userId
}
if (session && session.expiresAt > new Date()) userId = session.userId
}
const body = (await request.json()) as { type: string, message: string }
const actingUserId = userId || (await prisma.user.findFirst({ where: { role: 'DEVELOPER' } }))?.id || ''
await createSystemLog(actingUserId, body.type as any, body.message)
return { ok: true }
}, {
body: t.Object({
type: t.String({ description: 'Tipe log: CREATE | UPDATE | DELETE | LOGIN | LOGOUT' }),
message: t.String({ description: 'Pesan log yang akan dicatat' }),
}),
detail: {
summary: 'Create Log',
description: 'Mencatat log aktivitas sistem. Jika ada session cookie yang valid, log dikaitkan ke pengguna yang sedang login. Jika tidak, log dikaitkan ke akun DEVELOPER pertama.',
tags: ['Logs'],
},
})
.get('/api/logs/operators', async () => {
return await prisma.user.findMany({
select: { id: true, name: true, image: true },
orderBy: { name: 'asc' }
})
}, {
detail: {
summary: 'List Operators for Log Filter',
description: 'Mengembalikan daftar semua pengguna (id, name, image) sebagai opsi filter pada halaman log aktivitas.',
tags: ['Logs'],
},
})
// ─── Operators API ─────────────────────────────────
.get('/api/operators', async ({ query }) => {
const page = Number(query.page) || 1
const limit = Number(query.limit) || 20
const search = (query.search as string) || ''
const search = query.search || ''
const where: any = {}
if (search) {
@@ -246,11 +380,22 @@ export function createApp() {
totalPages: Math.ceil(total / limit),
totalItems: total
}
}, {
query: t.Object({
page: t.Optional(t.String({ description: 'Nomor halaman (default: 1)' })),
limit: t.Optional(t.String({ description: 'Jumlah data per halaman (default: 20)' })),
search: t.Optional(t.String({ description: 'Cari berdasarkan nama atau email' })),
}),
detail: {
summary: 'List Operators',
description: 'Mengembalikan daftar operator/pengguna sistem dengan pagination. Mendukung pencarian berdasarkan nama dan email.',
tags: ['Operators'],
},
})
.get('/api/operators/stats', async () => {
const [totalStaff, activeNow, rolesGroup] = await Promise.all([
prisma.user.count({where: {active: true}}),
prisma.user.count({ where: { active: true } }),
prisma.session.count({
where: { expiresAt: { gte: new Date() } },
}),
@@ -265,9 +410,15 @@ export function createApp() {
activeNow,
rolesCount: rolesGroup.length
}
}, {
detail: {
summary: 'Operator Stats',
description: 'Mengembalikan statistik operator: total staf aktif, jumlah sesi yang sedang aktif saat ini, dan jumlah role yang ada.',
tags: ['Operators'],
},
})
.post('/api/operators', async ({ request, set }) => {
.post('/api/operators', async ({ body, request, set }) => {
const cookie = request.headers.get('cookie') ?? ''
const token = cookie.match(/session=([^;]+)/)?.[1]
let userId: string | undefined
@@ -276,8 +427,6 @@ export function createApp() {
if (session && session.expiresAt > new Date()) userId = session.userId
}
const body = (await request.json()) as { name: string; email: string; password: string; role: string }
const existing = await prisma.user.findUnique({ where: { email: body.email } })
if (existing) {
set.status = 400
@@ -299,9 +448,21 @@ export function createApp() {
}
return { id: user.id, name: user.name, email: user.email, role: user.role }
}, {
body: t.Object({
name: t.String({ minLength: 1, description: 'Nama lengkap operator' }),
email: t.String({ format: 'email', description: 'Alamat email (harus unik)' }),
password: t.String({ minLength: 6, description: 'Password (minimal 6 karakter)' }),
role: t.Union([t.Literal('ADMIN'), t.Literal('DEVELOPER')], { description: 'Role: ADMIN atau DEVELOPER' }),
}),
detail: {
summary: 'Create Operator',
description: 'Membuat akun operator baru. Password di-hash dengan bcrypt sebelum disimpan. Gagal jika email sudah terdaftar.',
tags: ['Operators'],
},
})
.patch('/api/operators/:id', async ({ params: { id }, request, set }) => {
.patch('/api/operators/:id', async ({ params: { id }, body, request }) => {
const cookie = request.headers.get('cookie') ?? ''
const token = cookie.match(/session=([^;]+)/)?.[1]
let userId: string | undefined
@@ -310,8 +471,6 @@ export function createApp() {
if (session && session.expiresAt > new Date()) userId = session.userId
}
const body = (await request.json()) as { name?: string; email?: string; role?: string; active?: boolean }
const user = await prisma.user.update({
where: { id },
data: {
@@ -327,6 +486,21 @@ export function createApp() {
}
return { id: user.id, name: user.name, email: user.email, role: user.role, active: user.active }
}, {
params: t.Object({
id: t.String({ description: 'ID operator yang akan diupdate' }),
}),
body: t.Object({
name: t.Optional(t.String({ minLength: 1, description: 'Nama baru' })),
email: t.Optional(t.String({ format: 'email', description: 'Email baru' })),
role: t.Optional(t.Union([t.Literal('ADMIN'), t.Literal('DEVELOPER')], { description: 'Role baru' })),
active: t.Optional(t.Boolean({ description: 'Status aktif operator' })),
}),
detail: {
summary: 'Update Operator',
description: 'Mengupdate data operator secara parsial. Semua field bersifat opsional — hanya field yang dikirim yang akan diupdate.',
tags: ['Operators'],
},
})
.delete('/api/operators/:id', async ({ params: { id }, request, set }) => {
@@ -358,19 +532,22 @@ export function createApp() {
}
return { ok: true }
}, {
params: t.Object({
id: t.String({ description: 'ID operator yang akan dideactivate' }),
}),
detail: {
summary: 'Deactivate Operator',
description: 'Menonaktifkan akun operator (soft delete: set active=false). Semua sesi aktif operator tersebut ikut dihapus. Tidak bisa menghapus akun sendiri.',
tags: ['Operators'],
},
})
.get('/api/logs/operators', async () => {
return await prisma.user.findMany({
select: { id: true, name: true, image: true },
orderBy: { name: 'asc' }
})
})
// ─── Bugs API ──────────────────────────────────────
.get('/api/bugs', async ({ query }) => {
const page = Number(query.page) || 1
const limit = Number(query.limit) || 20
const search = (query.search as string) || ''
const search = query.search || ''
const app = query.app as any
const status = query.status as any
@@ -413,23 +590,28 @@ export function createApp() {
totalPages: Math.ceil(total / limit),
totalItems: total,
}
}, {
query: t.Object({
page: t.Optional(t.String({ description: 'Nomor halaman (default: 1)' })),
limit: t.Optional(t.String({ description: 'Jumlah data per halaman (default: 20)' })),
search: t.Optional(t.String({ description: 'Cari berdasarkan deskripsi, device, OS, atau versi' })),
app: t.Optional(t.String({ description: 'Filter berdasarkan ID aplikasi, atau "all"' })),
status: t.Optional(t.String({ description: 'Filter status: OPEN | ON_HOLD | IN_PROGRESS | RESOLVED | RELEASED | CLOSED | all' })),
}),
detail: {
summary: 'List Bug Reports',
description: 'Mengembalikan daftar bug report dengan pagination, beserta data pelapor, gambar, dan riwayat status (BugLog). Mendukung filter berdasarkan aplikasi dan status.',
tags: ['Bugs'],
},
})
.post('/api/bugs', async ({ request, set }) => {
const cookie = request.headers.get('cookie') ?? ''
const token = cookie.match(/session=([^;]+)/)?.[1]
let userId: string | undefined
if (token) {
const session = await prisma.session.findUnique({ where: { token } })
if (session && session.expiresAt > new Date()) {
userId = session.userId
}
.post('/api/bugs', async ({ body, request, set }) => {
const auth = await checkAuth(request)
if (!auth) {
set.status = 401
return { error: 'Unauthorized: sertakan session cookie atau header X-API-Key' }
}
const body = (await request.json()) as any
const defaultAdmin = await prisma.user.findFirst({ where: { role: 'DEVELOPER' } })
const actingUserId = userId || defaultAdmin?.id || ''
const { actingUserId, reporterUserId, isApiKey } = auth
const bug = await prisma.bug.create({
data: {
@@ -437,20 +619,18 @@ export function createApp() {
affectedVersion: body.affectedVersion,
device: body.device,
os: body.os,
status: body.status || 'OPEN',
source: body.source || 'USER',
status: 'OPEN',
source: body.source as BugSource,
description: body.description,
stackTrace: body.stackTrace,
userId: userId,
userId: reporterUserId,
images: body.imageUrl ? {
create: {
imageUrl: body.imageUrl
}
create: { imageUrl: body.imageUrl }
} : undefined,
logs: {
create: {
userId: actingUserId,
status: body.status || 'OPEN',
status: 'OPEN',
description: 'Bug reported initially.',
},
},
@@ -458,9 +638,27 @@ export function createApp() {
})
return bug
}, {
body: t.Object({
app: t.Optional(t.String({ description: 'ID aplikasi terkait (contoh: desa-plus)' })),
affectedVersion: t.String({ description: 'Versi aplikasi yang terdampak bug' }),
device: t.String({ description: 'Tipe/model perangkat pengguna' }),
os: t.String({ description: 'Sistem operasi perangkat (contoh: Android 13, iOS 17)' }),
description: t.String({ minLength: 1, description: 'Deskripsi bug yang ditemukan' }),
stackTrace: t.Optional(t.String({ description: 'Stack trace error (opsional)' })),
source: t.Optional(t.String({
description: 'Sumber laporan: QC | SYSTEM | USER',
})),
imageUrl: t.Optional(t.String({ description: 'URL gambar screenshot bug (opsional)' })),
}),
detail: {
summary: 'Create Bug Report',
description: 'Membuat laporan bug baru dengan status awal OPEN. Bisa diakses via session cookie (frontend) atau X-API-Key (klien eksternal seperti Desa+). Jika via API key, userId pelapor null dan source default USER.',
tags: ['Bugs'],
},
})
.patch('/api/bugs/:id/feedback', async ({ params: { id }, request }) => {
.patch('/api/bugs/:id/feedback', async ({ params: { id }, body, request }) => {
const cookie = request.headers.get('cookie') ?? ''
const token = cookie.match(/session=([^;]+)/)?.[1]
let userId: string | undefined
@@ -472,15 +670,12 @@ export function createApp() {
}
}
const body = (await request.json()) as { feedBack: string }
const defaultAdmin = await prisma.user.findFirst({ where: { role: 'DEVELOPER' } })
const actingUserId = userId || defaultAdmin?.id || undefined
const bug = await prisma.bug.update({
where: { id },
data: {
feedBack: body.feedBack,
},
data: { feedBack: body.feedBack },
})
if (actingUserId) {
@@ -488,9 +683,21 @@ export function createApp() {
}
return bug
}, {
params: t.Object({
id: t.String({ description: 'ID bug report' }),
}),
body: t.Object({
feedBack: t.String({ description: 'Feedback atau catatan developer untuk bug ini' }),
}),
detail: {
summary: 'Update Bug Feedback',
description: 'Menambahkan atau mengupdate feedback/catatan developer pada sebuah bug report.',
tags: ['Bugs'],
},
})
.patch('/api/bugs/:id/status', async ({ params: { id }, request }) => {
.patch('/api/bugs/:id/status', async ({ params: { id }, body, request }) => {
const cookie = request.headers.get('cookie') ?? ''
const token = cookie.match(/session=([^;]+)/)?.[1]
let userId: string | undefined
@@ -502,7 +709,6 @@ export function createApp() {
}
}
const body = (await request.json()) as { status: string; description?: string }
const defaultAdmin = await prisma.user.findFirst({ where: { role: 'DEVELOPER' } })
const actingUserId = userId || defaultAdmin?.id || undefined
@@ -525,6 +731,29 @@ export function createApp() {
}
return bug
}, {
params: t.Object({
id: t.String({ description: 'ID bug report' }),
}),
body: t.Object({
status: t.Union(
[
t.Literal('OPEN'),
t.Literal('ON_HOLD'),
t.Literal('IN_PROGRESS'),
t.Literal('RESOLVED'),
t.Literal('RELEASED'),
t.Literal('CLOSED'),
],
{ description: 'Status baru bug' }
),
description: t.Optional(t.String({ description: 'Catatan perubahan status (opsional)' })),
}),
detail: {
summary: 'Update Bug Status',
description: 'Mengubah status bug dan otomatis membuat entri BugLog baru sebagai riwayat perubahan status.',
tags: ['Bugs'],
},
})
// ─── System Status API ─────────────────────────────
@@ -549,18 +778,33 @@ export function createApp() {
uptime: process.uptime(),
}
}
}, {
detail: {
summary: 'System Status',
description: 'Memeriksa status operasional sistem: koneksi database dan jumlah sesi aktif. Mengembalikan status "degraded" jika database tidak dapat dijangkau.',
tags: ['System'],
},
})
// ─── Example API ───────────────────────────────────
.get('/api/hello', () => ({
message: 'Hello, world!',
method: 'GET',
}))
}), {
detail: { summary: 'Hello GET', tags: ['System'] },
})
.put('/api/hello', () => ({
message: 'Hello, world!',
method: 'PUT',
}))
}), {
detail: { summary: 'Hello PUT', tags: ['System'] },
})
.get('/api/hello/:name', ({ params }) => ({
message: `Hello, ${params.name}!`,
}))
}), {
params: t.Object({
name: t.String({ description: 'Nama yang akan disapa' }),
}),
detail: { summary: 'Hello by Name', tags: ['System'] },
})
}

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

@@ -263,16 +263,6 @@ export function DashboardLayout({ children }: DashboardLayoutProps) {
variant="filled"
color="brand-blue"
className="sidebar-nav-item"
styles={(theme) => ({
root: {
borderRadius: theme.radius.md,
transition: 'all 0.2s ease',
'&[data-active]': {
background: 'var(--gradient-blue-purple)',
fontWeight: 600,
},
},
})}
/>
)
})}

32
src/frontend/routes/apps.$appId.errors.tsx
View File

@@ -80,7 +80,6 @@ function AppErrorsPage() {
const [createForm, setCreateForm] = useState({
description: '',
app: appId,
status: 'OPEN',
source: 'USER',
affectedVersion: '',
device: '',
@@ -212,8 +211,7 @@ function AppErrorsPage() {
close()
setCreateForm({
description: '',
app: 'desa_plus',
status: 'OPEN',
app: appId,
source: 'USER',
affectedVersion: '',
device: '',
@@ -368,25 +366,13 @@ function AppErrorsPage() {
/>
</SimpleGrid>
<SimpleGrid cols={2}>
<TextInput
label="Version"
placeholder="e.g. 2.4.1"
required
value={createForm.affectedVersion}
onChange={(e) => setCreateForm({ ...createForm, affectedVersion: e.target.value })}
/>
<Select
label="Initial Status"
data={[
{ value: 'OPEN', label: 'Open' },
{ value: 'ON_HOLD', label: 'On Hold' },
{ value: 'IN_PROGRESS', label: 'In Progress' },
]}
value={createForm.status}
onChange={(val) => setCreateForm({ ...createForm, status: val as any })}
/>
</SimpleGrid>
<TextInput
label="Version"
placeholder="e.g. 2.4.1"
required
value={createForm.affectedVersion}
onChange={(e) => setCreateForm({ ...createForm, affectedVersion: e.target.value })}
/>
<SimpleGrid cols={2}>
<TextInput
@@ -525,7 +511,7 @@ function AppErrorsPage() {
</Group>
<Group gap="md">
<Text size="xs" c="dimmed">
{new Date(bug.createdAt).toLocaleString()} • {bug.app?.toUpperCase()} • v{bug.affectedVersion}
{new Date(bug.createdAt).toLocaleString()} • {bug.appId?.toUpperCase()} • v{bug.affectedVersion}
</Text>
</Group>
</Box>

15
src/frontend/routes/apps.$appId.villages.$villageId.tsx
View File

@@ -73,7 +73,14 @@ function ActivityChart({ villageId }: { villageId: string }) {
yearly: 'Yearly',
}
const data = response?.data || []
const rawData: any[] = Array.isArray(response?.data) ? response.data : []
// Normalize: map any field names from external API → { label, activity }
const data = rawData.map((item) => {
const label = item.label
const activity = item.aktivitas
return { label: String(label), activity: Number(activity) }
})
return (
<Paper withBorder radius="xl" p="lg">
@@ -430,7 +437,9 @@ function VillageDetailPage() {
}}
>
{/* Left (3/4): Activity Chart */}
<ActivityChart villageId={villageId} />
<Box style={{ minWidth: 0 }}>
<ActivityChart villageId={villageId} />
</Box>
{/* Right (1/4): Informasi Sistem */}
<Paper withBorder radius="xl" p="lg">
@@ -444,7 +453,7 @@ function VillageDetailPage() {
{[
{ label: 'Date Created', value: village.createdAt },
{ label: 'Created By', value: '-' },
{ label: 'Last Updated', value: '-' },
{ label: 'Last Updated', value: village.updatedAt },
].map((item, idx, arr) => (
<Group
key={item.label}

72
src/frontend/routes/bug-reports.tsx
View File

@@ -55,10 +55,14 @@ function ListErrorsPage() {
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 { data, isLoading, refetch } = useQuery({
queryKey: ['bugs', { page, search, app, status }],
@@ -78,7 +82,6 @@ function ListErrorsPage() {
const [createForm, setCreateForm] = useState({
description: '',
app: 'desa-plus',
status: 'OPEN',
source: 'USER',
affectedVersion: '',
device: '',
@@ -211,7 +214,6 @@ function ListErrorsPage() {
setCreateForm({
description: '',
app: 'desa-plus',
status: 'OPEN',
source: 'USER',
affectedVersion: '',
device: '',
@@ -377,25 +379,13 @@ function ListErrorsPage() {
/>
</SimpleGrid>
<SimpleGrid cols={2}>
<TextInput
label="Version"
placeholder="e.g. 2.4.1"
required
value={createForm.affectedVersion}
onChange={(e) => setCreateForm({ ...createForm, affectedVersion: e.target.value })}
/>
<Select
label="Initial Status"
data={[
{ value: 'OPEN', label: 'Open' },
{ value: 'ON_HOLD', label: 'On Hold' },
{ value: 'IN_PROGRESS', label: 'In Progress' },
]}
value={createForm.status}
onChange={(val) => setCreateForm({ ...createForm, status: val as any })}
/>
</SimpleGrid>
<TextInput
label="Version"
placeholder="e.g. 2.4.1"
required
value={createForm.affectedVersion}
onChange={(e) => setCreateForm({ ...createForm, affectedVersion: e.target.value })}
/>
<SimpleGrid cols={2}>
<TextInput
@@ -545,7 +535,7 @@ function ListErrorsPage() {
</Group>
<Group gap="md">
<Text size="xs" c="dimmed">
{new Date(bug.createdAt).toLocaleString()} • {bug.app?.toUpperCase()} • v{bug.affectedVersion}
{new Date(bug.createdAt).toLocaleString()} • {bug.appId?.toUpperCase()} • v{bug.affectedVersion}
</Text>
</Group>
</Box>
@@ -598,19 +588,31 @@ function ListErrorsPage() {
{/* Stack Trace */}
{bug.stackTrace && (
<Box>
<Text size="xs" fw={700} c="dimmed" mb={4}>STACK TRACE</Text>
<Code
block
color="red"
style={{
fontFamily: 'monospace',
whiteSpace: 'pre-wrap',
fontSize: '11px',
border: '1px solid var(--mantine-color-default-border)',
}}
>
{bug.stackTrace}
</Code>
<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)}
>
{showStackTrace[bug.id] ? 'Hide' : 'Show'}
</Button>
</Group>
<Collapse in={showStackTrace[bug.id]}>
<Code
block
color="red"
style={{
fontFamily: 'monospace',
whiteSpace: 'pre-wrap',
fontSize: '11px',
border: '1px solid var(--mantine-color-default-border)',
}}
>
{bug.stackTrace}
</Code>
</Collapse>
</Box>
)}

4
src/frontend/routes/users.tsx
View File

@@ -367,9 +367,9 @@ function UsersPage() {
))}
</List>
<Button fullWidth variant="light" color={role.color} mt="md" radius="md">
{/* <Button fullWidth variant="light" color={role.color} mt="md" radius="md">
Edit Permissions
</Button>
</Button> */}
</Stack>
</Card>
))}

2
src/index.css
View File

@@ -84,7 +84,7 @@ body {
transition: var(--transition-smooth);
}
.sidebar-nav-item.active {
.sidebar-nav-item[data-active] {
background: var(--gradient-blue-purple);
color: white;
}

2
src/index.tsx
View File

@@ -7,7 +7,7 @@ import { env } from './lib/env'
const isProduction = env.NODE_ENV === 'production'
// ─── Route Classification ──────────────────────────────
const API_PREFIXES = ['/api/', '/webhook/', '/ws/', '/health']
const API_PREFIXES = ['/api/', '/webhook/', '/ws/', '/health', '/docs']
function isApiRoute(pathname: string): boolean {
return API_PREFIXES.some((p) => pathname.startsWith(p)) || pathname === '/health'

1
src/lib/env.ts
View File

@@ -16,4 +16,5 @@ export const env = {
GOOGLE_CLIENT_ID: required('GOOGLE_CLIENT_ID'),
GOOGLE_CLIENT_SECRET: required('GOOGLE_CLIENT_SECRET'),
SUPER_ADMIN_EMAILS: optional('SUPER_ADMIN_EMAIL', '').split(',').map(e => e.trim()).filter(Boolean),
API_KEY: required('API_KEY'),
} as const