chore: bump version to 0.1.15

Sebelumnya push ke origin (Gitea) dengan branch build/stg, seharusnya ke
remote build (GitHub) branch stg.

CLAUDE.md

@@ -13,31 +13,9 @@ Default to Bun instead of Node.js everywhere:
 - `bunx <pkg>` not `npx`
 - Bun auto-loads `.env` — never use dotenv.
 
-## Common Commands
+## Commands
 
-```bash
-bun run dev          # dev server with hot reload (bun --watch src/serve.ts)
-bun run build        # Vite production build
-bun run start        # production server (NODE_ENV=production)
-bun run typecheck    # tsc --noEmit
-bun run lint         # biome check src/
-bun run lint:fix     # biome check --write src/
-
-# Database
-bun run db:migrate   # prisma migrate dev
-bun run db:seed      # seed demo data
-bun run db:generate  # regenerate prisma client
-bun run db:studio    # Prisma Studio GUI
-bun run db:push      # push schema without migration
-
-# Tests
-bun run test              # all tests
-bun run test:unit         # tests/unit/
-bun run test:integration  # tests/integration/ — no server needed
-bun run test:e2e          # tests/e2e/ — requires Lightpanda Docker
-```
-
-Run a single test file: `bun test tests/integration/auth.test.ts`
+See @docs/COMMANDS.md
 
 ## Architecture
 
@@ -50,3 +28,7 @@ See @docs/TESTING.md
 ## Dev Tools
 
 See @docs/DEV_TOOLS.md
+
+## Frontend Conventions
+
+See @docs/CONVENTIONS.md

docs/COMMANDS.md

@@ -0,0 +1,25 @@
+# Commands
+
+```bash
+bun run dev          # dev server with hot reload (bun --watch src/serve.ts)
+bun run build        # Vite production build
+bun run start        # production server (NODE_ENV=production)
+bun run typecheck    # tsc --noEmit
+bun run lint         # biome check src/
+bun run lint:fix     # biome check --write src/
+
+# Database
+bun run db:migrate   # prisma migrate dev
+bun run db:seed      # seed demo data
+bun run db:generate  # regenerate prisma client
+bun run db:studio    # Prisma Studio GUI
+bun run db:push      # push schema without migration
+
+# Tests
+bun run test              # all tests
+bun run test:unit         # tests/unit/
+bun run test:integration  # tests/integration/ — no server needed
+bun run test:e2e          # tests/e2e/ — requires Lightpanda Docker
+```
+
+Run a single test file: `bun test tests/integration/auth.test.ts`

docs/CONVENTIONS.md

@@ -0,0 +1,66 @@
+# Frontend Conventions
+
+## Data Fetching
+
+- **SWR** for read-only data in route components (tables, lists, charts).
+- **TanStack Query** (`useQuery`, `useMutation`) for auth state — see `src/frontend/hooks/useAuth.ts`.
+- Never mix both in the same component/page.
+- Debounce search inputs: `useDebouncedValue(search, 400)` + `useEffect` that only triggers when length >= 3 or === 0.
+
+## API URL Builder
+
+All URLs go through `src/frontend/config/api.ts` → `API_URLS`. Add new entries there, never inline URLs in components.
+
+Desa+ endpoints are proxied via `/api/proxy/desa-plus` → `DESA_PLUS_PROXY` constant. The actual API source is at:
+`/Users/wibu04/Documents/Projects/sistem-desa-mandiri/src/app/api/monitoring/[[...slug]]/route.ts`
+
+## Filters & Pagination Pattern
+
+Server-side filtering — always pass filter params to the API, never filter client-side on paginated data.
+
+State pattern for a filtered table page:
+```ts
+const [page, setPage] = useState(1)
+const [search, setSearch] = useState('')          // raw input
+const [searchQuery, setSearchQuery] = useState('') // debounced, sent to API
+const [debouncedSearch] = useDebouncedValue(search, 400)
+
+useEffect(() => {
+  if (debouncedSearch.length >= 3 || debouncedSearch.length === 0) {
+    setSearchQuery(debouncedSearch)
+    setPage(1)
+  }
+}, [debouncedSearch])
+
+useEffect(() => { setPage(1) }, [filterA, filterB]) // reset page on filter change
+```
+
+## Mantine Components
+
+- Dark theme forced (`#242424`). Never add light-mode conditionals.
+- `radius="md"` on inputs, `radius="2xl"` on container `Paper`.
+- `className="glass"` on `Paper` cards for the frosted glass effect.
+- `size="sm"` on table inputs and selects.
+- Icons from `react-icons/tb` only — no other icon libraries.
+- `DatePickerInput` from `@mantine/dates` with `type="range"` returns `[string | null, string | null]`, not Date objects.
+
+## Route Files
+
+File-based routing via TanStack Router Vite plugin. Files in `src/frontend/routes/`:
+
+| Pattern | Route |
+|---|---|
+| `apps.$appId.tsx` | Layout wrapper for per-app pages |
+| `apps.$appId.index.tsx` | Overview/dashboard for an app |
+| `apps.$appId.users.index.tsx` | User management |
+| `apps.$appId.logs.tsx` | Activity logs |
+| `apps.$appId.villages.tsx` | Villages layout |
+| `apps.$appId.villages.index.tsx` | Village list |
+| `apps.$appId.villages.$villageId.tsx` | Village detail |
+
+`routeTree.gen.ts` is auto-generated — never edit it manually.
+
+## App Registration
+
+App configs (ID, menu items) live in `src/frontend/config/appMenus.ts`. Add new apps there to register them.
+Currently active app: `desa-plus`.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bun-react-template",
-  "version": "0.1.3",
+  "version": "0.1.15",
   "private": true,
   "type": "module",
   "scripts": {

prisma/schema.prisma

@@ -149,6 +149,3 @@ model BugLog {
   @@map("bug_log")
 }
 
-
-
-

scripts/mcp-deploy.ts

@@ -150,7 +150,7 @@ server.tool(
     }
     log.push('✅ Committed')
 
-    const push = await sh(['git', 'push', 'origin', 'HEAD:build/stg'])
+    const push = await sh(['git', 'push', 'build', 'HEAD:stg'])
     if (!push.ok) {
       return { content: [{ type: 'text', text: `❌ git push gagal:\n${push.err}` }] }
     }

src/app.ts

@@ -11,6 +11,9 @@ import { getMinioDownloadUrl, uploadBugImage } from './lib/minio'
 import { addConnection, broadcastToAdmins, getOnlineUserIds, removeConnection } from './lib/presence'
 import { parseSchema } from './lib/schema-parser'
 
+const isProduction = process.env.NODE_ENV === 'production'
+const cookieFlags = isProduction ? '; Secure' : ''
+
 function getPublicOrigin(request: Request): string {
   if (process.env.BUN_PUBLIC_BASE_URL) return process.env.BUN_PUBLIC_BASE_URL.replace(/\/$/, '')
   const url = new URL(request.url)
@@ -127,7 +130,7 @@ export function createApp() {
       })
       const headers = new Headers()
       headers.set('Location', `https://accounts.google.com/o/oauth2/v2/auth?${params}`)
-      headers.set('Set-Cookie', `oauth_state=${state}; Path=/; HttpOnly; SameSite=Lax; Max-Age=600`)
+      headers.set('Set-Cookie', `oauth_state=${state}; Path=/; HttpOnly; SameSite=Lax; Max-Age=600${cookieFlags}`)
       return new Response(null, { status: 302, headers })
     }, {
       detail: {
@@ -212,8 +215,8 @@ export function createApp() {
       const redirectPath = user.role === 'DEVELOPER' ? '/dev' : user.role === 'USER' ? '/profile' : '/dashboard'
       const headers = new Headers()
       headers.append('Location', redirectPath)
-      headers.append('Set-Cookie', `session=${token}; Path=/; HttpOnly; SameSite=Lax; Max-Age=86400`)
-      headers.append('Set-Cookie', 'oauth_state=; Path=/; HttpOnly; Max-Age=0')
+      headers.append('Set-Cookie', `session=${token}; Path=/; HttpOnly; SameSite=Lax; Max-Age=86400${cookieFlags}`)
+      headers.append('Set-Cookie', `oauth_state=; Path=/; HttpOnly; Max-Age=0${cookieFlags}`)
       return new Response(null, { status: 302, headers })
     }, {
       detail: {
@@ -241,7 +244,7 @@ export function createApp() {
       const token = crypto.randomUUID()
       const expiresAt = new Date(Date.now() + 24 * 60 * 60 * 1000) // 24 hours
       await prisma.session.create({ data: { token, userId: user.id, expiresAt } })
-      set.headers['set-cookie'] = `session=${token}; Path=/; HttpOnly; SameSite=Lax; Max-Age=86400`
+      set.headers['set-cookie'] = `session=${token}; Path=/; HttpOnly; SameSite=Lax; Max-Age=86400${cookieFlags}`
       await createSystemLog(user.id, 'LOGIN', 'Logged in successfully')
       return { user: { id: user.id, name: user.name, email: user.email, role: user.role, image: user.image } }
     }, {
@@ -266,7 +269,7 @@ export function createApp() {
           await prisma.session.deleteMany({ where: { token } })
         }
       }
-      set.headers['set-cookie'] = 'session=; Path=/; HttpOnly; Max-Age=0'
+      set.headers['set-cookie'] = `session=; Path=/; HttpOnly; Max-Age=0${cookieFlags}`
       return { ok: true }
     }, {
       detail: {
@@ -367,6 +370,8 @@ export function createApp() {
         errors: app.bugs.length,
         active: app.active,
         urlApi: app.urlApi,
+        apiKey: app.apiKey ?? '',
+        clientApiKey: app.clientApiKey ?? '',
         hasClientApiKey: !!app.clientApiKey,
       }))
     }, {
@@ -1637,6 +1642,73 @@ export function createApp() {
       return { sessions: result, summary: { totalSessions: result.length, activeSessions: active, expiredSessions: expired, onlineUsers: onlineIds.size, byRole } }
     })
 
+    // ─── API Keys (proxied to desa-plus /api/monitoring/api-keys) ─────────────
+
+    .get('/api/admin/api-keys', async ({ request, set }) => {
+      const auth = await requireDeveloper(request, set)
+      if (!auth) return { error: set.status === 401 ? 'Unauthorized' : 'Forbidden' }
+      const app = await prisma.app.findUnique({ where: { id: 'desa-plus' } })
+      if (!app?.urlApi) { set.status = 503; return { error: 'desa-plus belum dikonfigurasi' } }
+      const res = await fetch(`${app.urlApi.replace(/\/$/, '')}/api/monitoring/api-keys`, {
+        headers: { 'x-api-key': app.apiKey ?? '' },
+      })
+      const json = await res.json()
+      return { keys: json.data ?? [] }
+    })
+
+    .post('/api/admin/api-keys', async ({ request, set }) => {
+      const auth = await requireDeveloper(request, set)
+      if (!auth) return { error: set.status === 401 ? 'Unauthorized' : 'Forbidden' }
+      const body = await request.json() as { name?: string }
+      if (!body.name?.trim()) { set.status = 400; return { error: 'name wajib diisi' } }
+      const app = await prisma.app.findUnique({ where: { id: 'desa-plus' } })
+      if (!app?.urlApi) { set.status = 503; return { error: 'desa-plus belum dikonfigurasi: urlApi kosong' } }
+      if (!app?.apiKey) { set.status = 503; return { error: 'desa-plus belum dikonfigurasi: apiKey kosong' } }
+      try {
+        const res = await fetch(`${app.urlApi.replace(/\/$/, '')}/api/monitoring/api-keys`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json', 'x-api-key': app.apiKey },
+          body: JSON.stringify({ name: body.name.trim() }),
+        })
+        const json = await res.json()
+        set.status = res.status
+        return { key: json.data ?? null }
+      } catch (e) {
+        set.status = 502
+        return { error: `Gagal menghubungi desa-plus: ${String(e)}` }
+      }
+    })
+
+    .patch('/api/admin/api-keys/:id', async ({ request, set, params }) => {
+      const auth = await requireDeveloper(request, set)
+      if (!auth) return { error: set.status === 401 ? 'Unauthorized' : 'Forbidden' }
+      const body = await request.json() as { isActive?: boolean }
+      const app = await prisma.app.findUnique({ where: { id: 'desa-plus' } })
+      if (!app?.urlApi) { set.status = 503; return { error: 'desa-plus belum dikonfigurasi' } }
+      const res = await fetch(`${app.urlApi.replace(/\/$/, '')}/api/monitoring/api-keys/${params.id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json', 'x-api-key': app.apiKey ?? '' },
+        body: JSON.stringify({ isActive: body.isActive }),
+      })
+      const json = await res.json()
+      set.status = res.status
+      return json
+    })
+
+    .delete('/api/admin/api-keys/:id', async ({ request, set, params }) => {
+      const auth = await requireDeveloper(request, set)
+      if (!auth) return { error: set.status === 401 ? 'Unauthorized' : 'Forbidden' }
+      const app = await prisma.app.findUnique({ where: { id: 'desa-plus' } })
+      if (!app?.urlApi) { set.status = 503; return { error: 'desa-plus belum dikonfigurasi' } }
+      const res = await fetch(`${app.urlApi.replace(/\/$/, '')}/api/monitoring/api-keys/${params.id}`, {
+        method: 'DELETE',
+        headers: { 'x-api-key': app.apiKey ?? '' },
+      })
+      const json = await res.json()
+      set.status = res.status
+      return json
+    })
+
     // ─── Desa Plus Proxy ───────────────────────────────────────────────────────
 
     .all('/api/proxy/desa-plus/*', async ({ request, set }) => {

src/frontend/components/DashboardCharts.tsx

@@ -1,7 +1,8 @@
-import { BarChart, LineChart } from '@mantine/charts'
+import { AreaChart, BarChart } from '@mantine/charts'
 import {
   Badge,
   Box,
+  Button,
   Group,
   Paper,
   Stack,
@@ -11,14 +12,29 @@ import {
 } from '@mantine/core'
 import { TbArrowUpRight, TbChartBar, TbTimeline } from 'react-icons/tb'
 
+type DailyRange = 7 | 30 | 90
+
 interface ChartProps {
   data?: any[]
   isLoading?: boolean
 }
 
-export function VillageActivityLineChart({ data = [], isLoading }: ChartProps) {
+interface ActivityChartProps extends ChartProps {
+  range?: DailyRange
+  onRangeChange?: (range: DailyRange) => void
+}
+
+const RANGE_OPTIONS: { value: DailyRange; label: string }[] = [
+  { value: 7, label: '7D' },
+  { value: 30, label: '30D' },
+  { value: 90, label: '3M' },
+]
+
+export function VillageActivityLineChart({ data = [], isLoading, range = 7, onRangeChange }: ActivityChartProps) {
   const theme = useMantineTheme()
 
+  const rangeLabel = range === 7 ? 'last 7 days' : range === 30 ? 'last 30 days' : 'last 3 months'
+
   return (
     <Paper withBorder p="xl" radius="2xl" className="glass h-full">
       <Stack gap="md" h="100%">
@@ -29,21 +45,28 @@ export function VillageActivityLineChart({ data = [], isLoading }: ChartProps) {
             </ThemeIcon>
             <Box>
               <Text fw={700} size="sm">DAILY ACTIVITY - ALL VILLAGES</Text>
-              <Text size="xs" c="dimmed">Trend over the last 7 days</Text>
+              <Text size="xs" c="dimmed">Trend over the {rangeLabel}</Text>
             </Box>
           </Group>
-          {
-            isLoading && (
-              <Badge variant="light" color="blue" size="sm" rightSection={<TbArrowUpRight size={12} />}>
-                ...
-              </Badge>
-            )
-          }
-
+          <Group gap={4}>
+            {RANGE_OPTIONS.map((opt) => (
+              <Button
+                key={opt.value}
+                size="compact-xs"
+                variant={range === opt.value ? 'filled' : 'subtle'}
+                color="blue"
+                radius="md"
+                onClick={() => onRangeChange?.(opt.value)}
+                loading={isLoading && range === opt.value}
+              >
+                {opt.label}
+              </Button>
+            ))}
+          </Group>
         </Group>
 
         <Box h={300} mt="lg">
-          <LineChart
+          <AreaChart
             h={300}
             data={data}
             dataKey="date"
@@ -53,12 +76,33 @@ export function VillageActivityLineChart({ data = [], isLoading }: ChartProps) {
             gridAxis="x"
             withTooltip
             tooltipAnimationDuration={200}
+            fillOpacity={0.4}
             tooltipProps={{
-              allowEscapeViewBox: { x: true, y: false },
+              content: ({ active, payload, label }: any) => {
+                if (!active || !payload?.length) return null
+                return (
+                  <div style={{
+                    backgroundColor: '#1A1B1E',
+                    padding: '8px 12px',
+                    borderRadius: '6px',
+                    border: '1px solid #373A40',
+                    boxShadow: '0 4px 12px rgba(0,0,0,0.5)',
+                    pointerEvents: 'none',
+                    whiteSpace: 'nowrap',
+                  }}>
+                    <div style={{ fontSize: '12px', fontWeight: 600, color: '#C1C2C5', marginBottom: '4px' }}>
+                      {label}
+                    </div>
+                    <div style={{ fontSize: '11px', color: '#2563EB' }}>
+                      Activity: <span style={{ fontWeight: 700 }}>{payload[0].value}</span>
+                    </div>
+                  </div>
+                )
+              },
             }}
             styles={{
               root: {
-                '.recharts-line-curve': {
+                '.recharts-area-curve': {
                   strokeWidth: 3,
                   filter: 'drop-shadow(0 4px 8px rgba(37, 99, 235, 0.3))'
                 }
@@ -71,9 +115,11 @@ export function VillageActivityLineChart({ data = [], isLoading }: ChartProps) {
   )
 }
 
-export function VillageComparisonBarChart({ data = [], isLoading }: ChartProps) {
+export function VillageComparisonBarChart({ data = [], isLoading, range = 7, onRangeChange }: ActivityChartProps) {
   const theme = useMantineTheme()
 
+  const rangeLabel = range === 7 ? 'last 7 days' : range === 30 ? 'last 30 days' : 'last 3 months'
+
   return (
     <Paper withBorder p="xl" radius="2xl" className="glass h-full">
       <Stack gap="md" h="100%">
@@ -84,9 +130,24 @@ export function VillageComparisonBarChart({ data = [], isLoading }: ChartProps)
             </ThemeIcon>
             <Box>
               <Text fw={700} size="sm">USAGE COMPARISON BETWEEN VILLAGES</Text>
-              <Text size="xs" c="dimmed">Most active village deployments</Text>
+              <Text size="xs" c="dimmed">Most active village deployments — {rangeLabel}</Text>
             </Box>
           </Group>
+          <Group gap={4}>
+            {RANGE_OPTIONS.map((opt) => (
+              <Button
+                key={opt.value}
+                size="compact-xs"
+                variant={range === opt.value ? 'filled' : 'subtle'}
+                color="violet"
+                radius="md"
+                onClick={() => onRangeChange?.(opt.value)}
+                loading={isLoading && range === opt.value}
+              >
+                {opt.label}
+              </Button>
+            ))}
+          </Group>
         </Group>
 
         <Box h={300} mt="lg">

src/frontend/components/ErrorDataTable.tsx

@@ -18,11 +18,15 @@ import {
   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 { forwardRef, useImperativeHandle, useState } from 'react'
 import { TbBug, TbExternalLink, TbHistory, TbMessageReport } from 'react-icons/tb'
+import useSWR from 'swr'
+
+export interface ErrorDataTableHandle {
+  refresh: () => void
+}
 
 export interface ErrorDataTableProps {
   appId?: string
@@ -45,15 +49,20 @@ const STATUS_LABEL: Record<string, string> = {
   CLOSED: 'Closed',
 }
 
-export function ErrorDataTable({ appId }: ErrorDataTableProps) {
+const fetcher = (url: string) => fetch(url).then((r) => r.json())
+
+export const ErrorDataTable = forwardRef<ErrorDataTableHandle, ErrorDataTableProps>(
+  function ErrorDataTable({ appId }, ref) {
   const [opened, { open, close }] = useDisclosure(false)
   const [selectedError, setSelectedError] = useState<any>(null)
   const [showStackTrace, setShowStackTrace] = useState(false)
 
-  const { data: bugsData, isLoading } = useQuery({
-    queryKey: ['bugs', appId],
-    queryFn: () => fetch(`/api/bugs?app=${appId || 'all'}&limit=10`).then((r) => r.json()),
-  })
+  const { data: bugsData, isLoading, mutate } = useSWR(
+    `/api/bugs?app=${appId || 'all'}&limit=10`,
+    fetcher
+  )
+
+  useImperativeHandle(ref, () => ({ refresh: mutate }))
 
   const bugs = bugsData?.data || []
 
@@ -257,4 +266,4 @@ export function ErrorDataTable({ appId }: ErrorDataTableProps) {
       </Drawer>
     </>
   )
-}
+})

src/frontend/components/StatsCard.tsx

@@ -14,18 +14,21 @@ interface StatsCardProps {
 }
 
 export function StatsCard({ title, value, description, icon: Icon, color, trend }: StatsCardProps) {
+  const accentColor = `var(--mantine-color-${color ?? 'brand-blue'}-5)`
+
   return (
     <Card
       withBorder
       padding="lg"
       radius="xl"
       className="premium-card"
-      styles={(theme) => ({
+      styles={{
         root: {
           backgroundColor: 'var(--mantine-color-body)',
           borderColor: 'rgba(128,128,128,0.1)',
+          borderTop: `3px solid ${accentColor}`,
         },
-      })}
+      }}
     >
       <Group justify="space-between" mb="xs">
         <ThemeIcon

src/frontend/config/api.ts

@@ -9,13 +9,26 @@ export const API_URLS = {
     `${DESA_PLUS_PROXY}/api/monitoring/grid-villages?id=${id}`,
   graphLogVillages: (id: string, time: string) =>
     `${DESA_PLUS_PROXY}/api/monitoring/graph-log-villages?id=${id}&time=${time}`,
-  getUsers: (page: number, search: string) =>
-    `${DESA_PLUS_PROXY}/api/monitoring/user?page=${page}&search=${encodeURIComponent(search)}`,
-  getLogsAllVillages: (page: number, search: string) =>
-    `${DESA_PLUS_PROXY}/api/monitoring/log-all-villages?page=${page}&search=${encodeURIComponent(search)}`,
+  getUsers: (page: number, search: string, isActive?: string, idUserRole?: string, idVillage?: string, orderBy?: string, orderDir?: string) => {
+    const params = new URLSearchParams({ page: String(page), search })
+    if (isActive !== undefined) params.set('isActive', isActive)
+    if (idUserRole) params.set('idUserRole', idUserRole)
+    if (idVillage) params.set('idVillage', idVillage)
+    if (orderBy) params.set('orderBy', orderBy)
+    if (orderDir) params.set('orderDir', orderDir)
+    return `${DESA_PLUS_PROXY}/api/monitoring/user?${params}`
+  },
+  getLogsAllVillages: (page: number, search: string, action?: string, idVillage?: string, dateFrom?: string, dateTo?: string) => {
+    const params = new URLSearchParams({ page: String(page), search })
+    if (action) params.set('action', action)
+    if (idVillage) params.set('idVillage', idVillage)
+    if (dateFrom) params.set('dateFrom', dateFrom)
+    if (dateTo) params.set('dateTo', dateTo)
+    return `${DESA_PLUS_PROXY}/api/monitoring/log-all-villages?${params}`
+  },
   getGridOverview: () => `${DESA_PLUS_PROXY}/api/monitoring/grid-overview`,
-  getDailyActivity: () => `${DESA_PLUS_PROXY}/api/monitoring/daily-activity`,
-  getComparisonActivity: () => `${DESA_PLUS_PROXY}/api/monitoring/comparison-activity`,
+  getDailyActivity: (range: 7 | 30 | 90 = 7) => `${DESA_PLUS_PROXY}/api/monitoring/daily-activity?range=${range}`,
+  getComparisonActivity: (range: 7 | 30 | 90 = 7) => `${DESA_PLUS_PROXY}/api/monitoring/comparison-activity?range=${range}`,
   postVersionUpdate: () => `${DESA_PLUS_PROXY}/api/monitoring/version-update`,
   createVillages: () => `${DESA_PLUS_PROXY}/api/monitoring/create-villages`,
   createUser: () => `${DESA_PLUS_PROXY}/api/monitoring/create-user`,

src/frontend/routes/apps.$appId.errors.tsx

@@ -37,11 +37,10 @@ import {
   TbCircleX,
   TbDeviceDesktop,
   TbDeviceMobile,
-  TbFilter,
   TbHistory,
   TbPhoto,
   TbPlus,
-  TbSearch,
+  TbSearch
 } from 'react-icons/tb'
 import { API_URLS } from '../config/api'
 
@@ -431,10 +430,9 @@ function AppErrorsPage() {
           />
           <Stack justify="flex-end">
             <Button
-              variant="subtle"
-              color="gray"
+              variant="filled"
+              color="violet"
               size="sm"
-              leftSection={<TbFilter size={16} />}
               onClick={() => { setSearch(''); setStatus('all') }}
             >
               Reset Filters

src/frontend/routes/apps.$appId.index.tsx

@@ -1,6 +1,5 @@
-import { useQuery } from '@tanstack/react-query'
 import { VillageActivityLineChart, VillageComparisonBarChart } from '@/frontend/components/DashboardCharts'
-import { ErrorDataTable } from '@/frontend/components/ErrorDataTable'
+import { ErrorDataTable, type ErrorDataTableHandle } from '@/frontend/components/ErrorDataTable'
 import { SummaryCard } from '@/frontend/components/SummaryCard'
 import { useSession } from '@/frontend/hooks/useAuth'
 import {
@@ -21,7 +20,7 @@ import {
 import { useDisclosure } from '@mantine/hooks'
 import { notifications } from '@mantine/notifications'
 import { createFileRoute, useNavigate, useParams } from '@tanstack/react-router'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import {
   TbActivity,
   TbAlertTriangle,
@@ -45,6 +44,7 @@ function AppOverviewPage() {
   const [versionModalOpened, { open: openVersionModal, close: closeVersionModal }] = useDisclosure(false)
   const { data: session } = useSession()
   const isDeveloper = session?.user?.role === 'DEVELOPER'
+  const errorTableRef = useRef<ErrorDataTableHandle>(null)
 
   const [latestVersion, setLatestVersion] = useState('')
   const [minVersion, setMinVersion] = useState('')
@@ -52,32 +52,38 @@ function AppOverviewPage() {
   const [maintenance, setMaintenance] = useState(false)
   const [isSaving, setIsSaving] = useState(false)
 
-  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)
+  const [dailyRange, setDailyRange] = useState<7 | 30 | 90>(7)
+  const [comparisonRange, setComparisonRange] = useState<7 | 30 | 90>(7)
 
-  const { data: appData, isLoading: appLoading } = useQuery({
-    queryKey: ['apps', appId],
-    queryFn: () => fetch(`/api/apps/${appId}`).then((r) => r.json()),
-  })
+  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(dailyRange) : null, fetcher)
+  const { data: comparisonRes, isLoading: comparisonLoading, mutate: mutateComparison } = useSWR(isDesaPlus ? API_URLS.getComparisonActivity(comparisonRange) : null, fetcher)
+
+  const { data: appData, isLoading: appLoading } = useSWR(`/api/apps/${appId}`, fetcher)
 
   const grid = gridRes?.data
   const dailyData = dailyRes?.data || []
   const comparisonData = comparisonRes?.data || []
 
+  // Ref so the modal-sync effect always reads current grid without re-running on every background refetch
+  const gridRef = useRef(grid)
+  gridRef.current = grid
+
   useEffect(() => {
-    if (grid?.version && versionModalOpened) {
-      setLatestVersion(grid.version.mobile_latest_version || '')
-      setMinVersion(grid.version.mobile_minimum_version || '')
-      setMessageUpdate(grid.version.mobile_message_update || '')
-      setMaintenance(grid.version.mobile_maintenance === 'true')
+    if (versionModalOpened && gridRef.current?.version) {
+      const v = gridRef.current.version
+      setLatestVersion(v.mobile_latest_version || '')
+      setMinVersion(v.mobile_minimum_version || '')
+      setMessageUpdate(v.mobile_message_update || '')
+      setMaintenance(v.mobile_maintenance === 'true')
     }
-  }, [grid, versionModalOpened])
+  }, [versionModalOpened])
 
   const handleRefresh = () => {
     mutateGrid()
     mutateDaily()
     mutateComparison()
+    errorTableRef.current?.refresh()
   }
 
   const handleSaveVersion = async () => {
@@ -214,8 +220,8 @@ function AppOverviewPage() {
             value={gridLoading ? '...' : (grid?.activity?.today?.toLocaleString() ?? '0')}
             icon={TbActivity}
             color="teal"
-            trend={grid?.activity?.increase
-              ? { value: `${grid.activity.increase}%`, positive: grid.activity.increase > 0 }
+            trend={grid?.activity?.increase != null && Number(grid.activity.increase) !== 0
+              ? { value: `${grid.activity.increase}%`, positive: Number(grid.activity.increase) > 0 }
               : undefined}
           />
 
@@ -250,11 +256,11 @@ function AppOverviewPage() {
         </Group>
 
         <SimpleGrid cols={{ base: 1, lg: 2 }} spacing="lg">
-          <VillageActivityLineChart data={dailyData} isLoading={dailyLoading} />
-          <VillageComparisonBarChart data={comparisonData} isLoading={comparisonLoading} />
+          <VillageActivityLineChart data={dailyData} isLoading={dailyLoading} range={dailyRange} onRangeChange={setDailyRange} />
+          <VillageComparisonBarChart data={comparisonData} isLoading={comparisonLoading} range={comparisonRange} onRangeChange={setComparisonRange} />
         </SimpleGrid>
 
-        <ErrorDataTable appId={appId} />
+        <ErrorDataTable ref={errorTableRef} appId={appId} />
       </Stack>
     </>
   )

src/frontend/routes/apps.$appId.logs.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import useSWR from 'swr'
 import {
   ActionIcon,
@@ -10,6 +10,7 @@ import {
   Pagination,
   Paper,
   ScrollArea,
+  Select,
   Stack,
   Table,
   Text,
@@ -17,10 +18,12 @@ import {
   Title,
   Tooltip,
 } from '@mantine/core'
-import { useMediaQuery } from '@mantine/hooks'
+import { useDebouncedValue, useMediaQuery } from '@mantine/hooks'
+import { DatePickerInput } from '@mantine/dates'
 import { createFileRoute, useParams } from '@tanstack/react-router'
 import {
   TbAlertCircle,
+  TbCalendar,
   TbHistory,
   TbHome2,
   TbSearch,
@@ -51,30 +54,75 @@ const ACTION_COLOR: Record<string, string> = {
   DELETE: 'red',
 }
 
+const ACTION_OPTIONS = [
+  { value: 'LOGIN', label: 'Login' },
+  { value: 'LOGOUT', label: 'Logout' },
+  { value: 'CREATE', label: 'Create' },
+  { value: 'UPDATE', label: 'Update' },
+  { value: 'DELETE', label: 'Delete' },
+]
+
 function getActionColor(action: string) {
   return ACTION_COLOR[action.toUpperCase()] ?? 'brand-blue'
 }
 
+function LogTimestamp({ value }: { value: string }) {
+  if (value.endsWith('lalu')) {
+    return <Text size="xs" fw={600}>{value}</Text>
+  }
+  const [time, ...dateParts] = value.split(' ')
+  return (
+    <Stack gap={0}>
+      <Text size="xs" fw={600}>{dateParts.join(' ')}</Text>
+      <Text size="xs" c="dimmed">{time}</Text>
+    </Stack>
+  )
+}
+
 function AppLogsPage() {
   const { appId } = useParams({ from: '/apps/$appId/logs' })
   const [page, setPage] = useState(1)
   const [search, setSearch] = useState('')
   const [searchQuery, setSearchQuery] = useState('')
+  const [debouncedSearch] = useDebouncedValue(search, 400)
+  const [filterAction, setFilterAction] = useState<string | null>(null)
+  const [filterVillageSearch, setFilterVillageSearch] = useState('')
+  const [filterVillageId, setFilterVillageId] = useState<string | null>(null)
+  const [dateRange, setDateRange] = useState<[string | null, string | null]>([null, null])
 
   const isDesaPlus = appId === 'desa-plus'
   const isMobile = useMediaQuery('(max-width: 768px)')
 
-  const apiUrl = isDesaPlus ? API_URLS.getLogsAllVillages(page, searchQuery) : null
+  const [dateFrom, dateTo] = dateRange
+  const apiUrl = isDesaPlus
+    ? API_URLS.getLogsAllVillages(
+        page,
+        searchQuery,
+        filterAction ?? undefined,
+        filterVillageId ?? undefined,
+        dateFrom ?? undefined,
+        dateTo ?? undefined,
+      )
+    : null
   const { data: response, error, isLoading } = useSWR(apiUrl, fetcher)
   const logs: LogEntry[] = response?.data?.log || []
 
-  const handleSearchChange = (val: string) => {
-    setSearch(val)
-    if (val.length >= 3 || val.length === 0) {
-      setSearchQuery(val)
+  const { data: filterVillagesResp } = useSWR(
+    isDesaPlus && filterVillageSearch.length >= 1 ? API_URLS.getVillages(1, filterVillageSearch) : null,
+    fetcher
+  )
+  const filterVillagesOptions = (filterVillagesResp?.data || []).map((v: any) => ({ value: v.id, label: v.name }))
+
+  useEffect(() => {
+    if (debouncedSearch.length >= 3 || debouncedSearch.length === 0) {
+      setSearchQuery(debouncedSearch)
       setPage(1)
     }
-  }
+  }, [debouncedSearch])
+
+  useEffect(() => {
+    setPage(1)
+  }, [filterAction, filterVillageId, dateFrom, dateTo])
 
   const handleClearSearch = () => {
     setSearch('')
@@ -108,23 +156,61 @@ function AppLogsPage() {
       </Group>
 
       <Paper withBorder p="md" className="glass">
-        <TextInput
-          placeholder="Search by action or village... (min. 3 characters)"
-          leftSection={<TbSearch size={16} />}
-          size="sm"
-          rightSection={
-            search ? (
-              <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"
-        />
+        <Stack gap="sm">
+          <TextInput
+            placeholder="Search by user name or village..."
+            leftSection={<TbSearch size={16} />}
+            size="sm"
+            rightSection={
+              search ? (
+                <Tooltip label="Clear search" withArrow>
+                  <ActionIcon variant="transparent" color="gray" onClick={handleClearSearch} size="sm">
+                    <TbX size={16} />
+                  </ActionIcon>
+                </Tooltip>
+              ) : null
+            }
+            value={search}
+            onChange={(e) => setSearch(e.currentTarget.value)}
+            radius="md"
+          />
+          <Group gap="sm" wrap="nowrap">
+            <Select
+              size="sm"
+              placeholder="All actions"
+              data={ACTION_OPTIONS}
+              value={filterAction}
+              onChange={setFilterAction}
+              radius="md"
+              clearable
+              style={{ flex: 1 }}
+            />
+            <Select
+              size="sm"
+              placeholder="Search village..."
+              searchable
+              onSearchChange={setFilterVillageSearch}
+              data={filterVillagesOptions}
+              value={filterVillageId}
+              onChange={setFilterVillageId}
+              radius="md"
+              clearable
+              style={{ flex: 1 }}
+            />
+            <DatePickerInput
+              type="range"
+              size="sm"
+              placeholder="Date range"
+              leftSection={<TbCalendar size={16} />}
+              value={dateRange}
+              onChange={setDateRange}
+              radius="md"
+              clearable
+              style={{ flex: 1 }}
+              maxDate={new Date()}
+            />
+          </Group>
+        </Stack>
       </Paper>
 
       {isLoading ? (
@@ -143,7 +229,7 @@ function AppLogsPage() {
           <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.'}
+              {searchQuery || filterAction || filterVillageId || dateFrom ? 'No activity found for this filter.' : 'No activity logs yet.'}
             </Text>
           </Stack>
         </Paper>
@@ -174,18 +260,7 @@ function AppLogsPage() {
                 {logs.map((log) => (
                   <Table.Tr key={log.id}>
                     <Table.Td>
-                      {log.createdAt.endsWith('lalu') ? (
-                        <Text size="xs" fw={600}>{log.createdAt}</Text>
-                      ) : (
-                        <Stack gap={0}>
-                          <Text size="xs" fw={600}>
-                            {log.createdAt.split(' ').slice(1).join(' ')}
-                          </Text>
-                          <Text size="xs" c="dimmed">
-                            {log.createdAt.split(' ')[0]}
-                          </Text>
-                        </Stack>
-                      )}
+                      <LogTimestamp value={log.createdAt} />
                     </Table.Td>
                     <Table.Td>
                       <Stack gap={4} style={{ overflow: 'hidden' }}>
@@ -229,7 +304,7 @@ function AppLogsPage() {
         </Paper>
       )}
 
-      {!isLoading && !error && response?.data?.totalPage > 0 && (
+      {!isLoading && !error && response?.data?.totalPage > 1 && (
         <Group justify="center">
           <Pagination
             value={page}

src/frontend/routes/apps.$appId.users.index.tsx

@@ -22,16 +22,18 @@ import {
   Title,
   Tooltip,
 } from '@mantine/core'
-import { useDisclosure, useMediaQuery } from '@mantine/hooks'
+import { useDisclosure, useDebouncedValue, useMediaQuery } from '@mantine/hooks'
 import { notifications } from '@mantine/notifications'
 import { createFileRoute, useParams } from '@tanstack/react-router'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import {
   TbAlertCircle,
+  TbArrowDown,
+  TbArrowsSort,
+  TbArrowUp,
   TbBriefcase,
   TbCircleCheck,
   TbCircleX,
-  TbEdit,
   TbHome2,
   TbId,
   TbMail,
@@ -57,6 +59,7 @@ interface APIUser {
   gender: string
   isWithoutOTP: boolean
   isActive: boolean
+  isApprover: boolean
   role: string
   village: string
   group: string
@@ -67,33 +70,218 @@ interface APIUser {
   idPosition: string
 }
 
+interface BaseUserForm {
+  name: string
+  nik: string
+  phone: string
+  email: string
+  gender: string
+  idUserRole: string
+  idVillage: string
+  idGroup: string
+  idPosition: string
+}
+
+const FIELD_LABELS: Record<string, string> = {
+  name: 'Full Name',
+  nik: 'NIK',
+  phone: 'Phone Number',
+  email: 'Email Address',
+  gender: 'Gender',
+  idUserRole: 'User Role',
+  idVillage: 'Village',
+  idGroup: 'Group',
+}
+
+const REQUIRED_FIELDS = ['name', 'nik', 'phone', 'email', 'gender', 'idUserRole', 'idVillage', 'idGroup']
+
 const fetcher = (url: string) => fetch(url).then((res) => res.json())
 
+interface UserFormFieldsProps {
+  values: BaseUserForm
+  onChange: (updates: Partial<BaseUserForm>) => void
+  villageSearch: string
+  onVillageSearchChange: (v: string) => void
+  rolesOptions: { value: string; label: string }[]
+  villagesOptions: { value: string; label: string }[]
+  groupsOptions: { value: string; label: string }[]
+  positionsOptions: { value: string; label: string }[]
+}
+
+function UserFormFields({
+  values,
+  onChange,
+  onVillageSearchChange,
+  rolesOptions,
+  villagesOptions,
+  groupsOptions,
+  positionsOptions,
+}: UserFormFieldsProps) {
+  return (
+    <>
+      <Box>
+        <Text size="xs" fw={700} c="dimmed" mb={8} tt="uppercase" style={{ letterSpacing: '0.05em' }}>
+          Personal Information
+        </Text>
+        <SimpleGrid cols={2} spacing="md">
+          <TextInput
+            label="Full Name"
+            placeholder="Enter full name"
+            required
+            value={values.name}
+            onChange={(e) => onChange({ name: e.target.value })}
+          />
+          <TextInput
+            label="NIK"
+            placeholder="16-digit identity number"
+            required
+            value={values.nik}
+            onChange={(e) => onChange({ nik: e.target.value })}
+          />
+        </SimpleGrid>
+
+        <SimpleGrid cols={2} spacing="md" mt="sm">
+          <TextInput
+            label="Email Address"
+            placeholder="email@example.com"
+            required
+            value={values.email}
+            onChange={(e) => onChange({ email: e.target.value })}
+          />
+          <TextInput
+            label="Phone Number"
+            placeholder="628xxxxxxxxxx"
+            required
+            value={values.phone}
+            onChange={(e) => onChange({ phone: e.target.value })}
+          />
+        </SimpleGrid>
+
+        <Select
+          label="Gender"
+          placeholder="Select gender"
+          data={[
+            { value: 'M', label: 'Male' },
+            { value: 'F', label: 'Female' },
+          ]}
+          mt="sm"
+          required
+          value={values.gender}
+          onChange={(v) => onChange({ gender: v || '' })}
+        />
+      </Box>
+
+      <Divider label="Role & Organization" labelPosition="center" my="sm" />
+
+      <Box>
+        <Select
+          label="User Role"
+          placeholder="Select user role"
+          data={rolesOptions}
+          required
+          value={values.idUserRole}
+          onChange={(v) => onChange({ idUserRole: v || '' })}
+        />
+
+        <Select
+          label="Village"
+          placeholder="Type to search village..."
+          searchable
+          onSearchChange={onVillageSearchChange}
+          data={villagesOptions}
+          mt="sm"
+          required
+          value={values.idVillage}
+          onChange={(v) => onChange({ idVillage: v || '', idGroup: '', idPosition: '' })}
+        />
+
+        <SimpleGrid cols={2} spacing="md" mt="sm">
+          <Select
+            label="Group"
+            placeholder={values.idVillage ? 'Select group' : 'Select village first'}
+            data={groupsOptions}
+            disabled={!values.idVillage}
+            required
+            value={values.idGroup}
+            onChange={(v) => onChange({ idGroup: v || '', idPosition: '' })}
+          />
+          <Select
+            label="Position"
+            placeholder={values.idGroup ? 'Select position' : 'Select group first'}
+            data={positionsOptions}
+            disabled={!values.idGroup}
+            value={values.idPosition || ''}
+            onChange={(v) => onChange({ idPosition: v || '' })}
+          />
+        </SimpleGrid>
+      </Box>
+    </>
+  )
+}
+
 function UsersIndexPage() {
   const { appId } = useParams({ from: '/apps/$appId/users/' })
   const [page, setPage] = useState(1)
   const [search, setSearch] = useState('')
   const [searchQuery, setSearchQuery] = useState('')
+  const [debouncedSearch] = useDebouncedValue(search, 400)
+  const [filterStatus, setFilterStatus] = useState<string | null>(null)
+  const [filterRole, setFilterRole] = useState<string | null>(null)
+  const [filterVillageSearch, setFilterVillageSearch] = useState('')
+  const [filterVillageId, setFilterVillageId] = useState<string | null>(null)
+  const [sortBy, setSortBy] = useState<string | null>(null)
+  const [sortDir, setSortDir] = useState<'asc' | 'desc'>('asc')
+
+  const handleSort = (col: string) => {
+    if (sortBy === col) {
+      setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'))
+    } else {
+      setSortBy(col)
+      setSortDir('asc')
+    }
+    setPage(1)
+  }
 
   const isDesaPlus = appId === 'desa-plus'
-  const apiUrl = isDesaPlus ? API_URLS.getUsers(page, searchQuery) : null
+
+  const filterStatusParam = filterStatus === 'active' ? 'true' : filterStatus === 'inactive' ? 'false' : undefined
+  const apiUrl = isDesaPlus
+    ? API_URLS.getUsers(
+        page,
+        searchQuery,
+        filterStatusParam,
+        filterRole ?? undefined,
+        filterVillageId ?? undefined,
+        sortBy ?? undefined,
+        sortBy ? sortDir : undefined,
+      )
+    : null
 
   const { data: response, error, isLoading, mutate } = useSWR(apiUrl, fetcher)
   const users: APIUser[] = response?.data?.user || []
 
-  const handleSearchChange = (val: string) => {
-    setSearch(val)
-    if (val.length >= 3 || val.length === 0) {
-      setSearchQuery(val)
+  useEffect(() => {
+    if (debouncedSearch.length >= 3 || debouncedSearch.length === 0) {
+      setSearchQuery(debouncedSearch)
       setPage(1)
     }
+  }, [debouncedSearch])
+
+  useEffect(() => {
+    setPage(1)
+  }, [filterStatus, filterRole, filterVillageId])
+
+  const handleClearSearch = () => {
+    setSearch('')
+    setSearchQuery('')
+    setPage(1)
   }
 
   // --- ADD USER LOGIC ---
   const [opened, { open, close }] = useDisclosure(false)
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [villageSearch, setVillageSearch] = useState('')
-  const [form, setForm] = useState({
+  const [form, setForm] = useState<BaseUserForm>({
     name: '',
     nik: '',
     phone: '',
@@ -102,7 +290,7 @@ function UsersIndexPage() {
     idUserRole: '',
     idVillage: '',
     idGroup: '',
-    idPosition: ''
+    idPosition: '',
   })
 
   const [editOpened, { open: openEdit, close: closeEdit }] = useDisclosure(false)
@@ -118,7 +306,8 @@ function UsersIndexPage() {
     idGroup: '',
     idPosition: '',
     isActive: true,
-    isWithoutOTP: false
+    isWithoutOTP: false,
+    isApprover: false,
   })
 
   // Options Data (Shared for both Add and Edit modals)
@@ -126,7 +315,11 @@ function UsersIndexPage() {
   const targetVillageId = opened ? form.idVillage : editForm.idVillage
   const targetGroupId = opened ? form.idGroup : editForm.idGroup
 
-  const { data: rolesResp } = useSWR(isAnyModalOpened ? API_URLS.listRole() : null, fetcher)
+  const { data: rolesResp } = useSWR(isDesaPlus ? API_URLS.listRole() : null, fetcher)
+  const { data: filterVillagesResp } = useSWR(
+    isDesaPlus && filterVillageSearch.length >= 1 ? API_URLS.getVillages(1, filterVillageSearch) : null,
+    fetcher
+  )
   const { data: villagesResp } = useSWR(
     isAnyModalOpened && villageSearch.length >= 1 ? API_URLS.getVillages(1, villageSearch) : null,
     fetcher
@@ -141,19 +334,21 @@ function UsersIndexPage() {
   )
 
   const rolesOptions = (rolesResp?.data || []).map((r: any) => ({ value: r.id, label: r.name }))
+  const filterVillagesOptions = (filterVillagesResp?.data || []).map((v: any) => ({ value: v.id, label: v.name }))
   const villagesOptions = (villagesResp?.data || []).map((v: any) => ({ value: v.id, label: v.name }))
   const groupsOptions = (groupsResp?.data || []).map((g: any) => ({ value: g.id, label: g.name }))
   const positionsOptions = (positionsResp?.data || []).map((p: any) => ({ value: p.id, label: p.name }))
 
-  const handleCreateUser = async () => {
-    const requiredFields = ['name', 'nik', 'phone', 'email', 'gender', 'idUserRole', 'idVillage', 'idGroup']
-    const missing = requiredFields.filter(f => !form[f as keyof typeof form])
+  const getMissingFields = (data: BaseUserForm) =>
+    REQUIRED_FIELDS.filter((f) => !data[f as keyof BaseUserForm]).map((f) => FIELD_LABELS[f] ?? f)
 
+  const handleCreateUser = async () => {
+    const missing = getMissingFields(form)
     if (missing.length > 0) {
       notifications.show({
         title: 'Validation Error',
-        message: `Please fill in all required fields: ${missing.join(', ')}`,
-        color: 'red'
+        message: `Please fill in: ${missing.join(', ')}`,
+        color: 'red',
       })
       return
     }
@@ -163,7 +358,7 @@ function UsersIndexPage() {
       const res = await fetch(API_URLS.createUser(), {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(form)
+        body: JSON.stringify(form),
       })
 
       const result = await res.json()
@@ -172,14 +367,14 @@ function UsersIndexPage() {
         await fetch(API_URLS.createLog(), {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ type: 'CREATE', message: `New user registered (${appId}): ${form.name} - ${form.nik}` })
+          body: JSON.stringify({ type: 'CREATE', message: `New user registered (${appId}): ${form.name} - ${form.nik}` }),
         }).catch(console.error)
 
         notifications.show({
           title: 'Success',
           message: 'User has been created successfully.',
           color: 'teal',
-          icon: <TbCircleCheck size={18} />
+          icon: <TbCircleCheck size={18} />,
         })
         mutate()
         close()
@@ -189,7 +384,7 @@ function UsersIndexPage() {
           title: 'Error',
           message: result.message || 'Failed to create user.',
           color: 'red',
-          icon: <TbCircleX size={18} />
+          icon: <TbCircleX size={18} />,
         })
       }
     } catch {
@@ -212,21 +407,20 @@ function UsersIndexPage() {
       idGroup: user.idGroup,
       idPosition: user.idPosition,
       isActive: user.isActive,
-      isWithoutOTP: user.isWithoutOTP
+      isWithoutOTP: user.isWithoutOTP,
+      isApprover: user.isApprover,
     })
     setVillageSearch(user.village)
     openEdit()
   }
 
   const handleUpdateUser = async () => {
-    const requiredFields = ['name', 'nik', 'phone', 'email', 'gender', 'idUserRole', 'idVillage', 'idGroup']
-    const missing = requiredFields.filter(f => !editForm[f as keyof typeof editForm])
-
+    const missing = getMissingFields(editForm)
     if (missing.length > 0) {
       notifications.show({
         title: 'Validation Error',
-        message: `Please fill in all required fields: ${missing.join(', ')}`,
-        color: 'red'
+        message: `Please fill in: ${missing.join(', ')}`,
+        color: 'red',
       })
       return
     }
@@ -236,7 +430,7 @@ function UsersIndexPage() {
       const res = await fetch(API_URLS.editUser(), {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(editForm)
+        body: JSON.stringify(editForm),
       })
 
       const result = await res.json()
@@ -245,14 +439,14 @@ function UsersIndexPage() {
         await fetch(API_URLS.createLog(), {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ type: 'UPDATE', message: `User updated (${appId}): ${editForm.name} - ${editForm.id}` })
+          body: JSON.stringify({ type: 'UPDATE', message: `User updated (${appId}): ${editForm.name} - ${editForm.id}` }),
         }).catch(console.error)
 
         notifications.show({
           title: 'Success',
           message: 'User has been updated successfully.',
           color: 'teal',
-          icon: <TbCircleCheck size={18} />
+          icon: <TbCircleCheck size={18} />,
         })
         mutate()
         closeEdit()
@@ -261,7 +455,7 @@ function UsersIndexPage() {
           title: 'Error',
           message: result.message || 'Failed to update user.',
           color: 'red',
-          icon: <TbCircleX size={18} />
+          icon: <TbCircleX size={18} />,
         })
       }
     } catch {
@@ -271,12 +465,6 @@ function UsersIndexPage() {
     }
   }
 
-  const handleClearSearch = () => {
-    setSearch('')
-    setSearchQuery('')
-    setPage(1)
-  }
-
   const getRoleColor = (role: string) => {
     const r = role.toLowerCase()
     if (r.includes('super')) return 'red'
@@ -287,6 +475,15 @@ function UsersIndexPage() {
 
   const isMobile = useMediaQuery('(max-width: 768px)')
 
+  const sharedFormProps = {
+    villageSearch,
+    onVillageSearchChange: setVillageSearch,
+    rolesOptions,
+    villagesOptions,
+    groupsOptions,
+    positionsOptions,
+  }
+
   if (!isDesaPlus) {
     return (
       <Paper withBorder radius="2xl" className="glass" p="xl">
@@ -311,102 +508,11 @@ function UsersIndexPage() {
         overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
       >
         <Stack gap="md">
-          <Box>
-            <Text size="xs" fw={700} c="dimmed" mb={8} tt="uppercase" style={{ letterSpacing: '0.05em' }}>
-              Personal Information
-            </Text>
-            <SimpleGrid cols={2} spacing="md">
-              <TextInput
-                label="Full Name"
-                placeholder="Enter full name"
-                required
-                value={form.name}
-                onChange={(e) => setForm(f => ({ ...f, name: e.target.value }))}
-              />
-              <TextInput
-                label="NIK"
-                placeholder="16-digit identity number"
-                required
-                value={form.nik}
-                onChange={(e) => setForm(f => ({ ...f, nik: e.target.value }))}
-              />
-            </SimpleGrid>
-
-            <SimpleGrid cols={2} spacing="md" mt="sm">
-              <TextInput
-                label="Email Address"
-                placeholder="email@example.com"
-                required
-                value={form.email}
-                onChange={(e) => setForm(f => ({ ...f, email: e.target.value }))}
-              />
-              <TextInput
-                label="Phone Number"
-                placeholder="628xxxxxxxxxx"
-                required
-                value={form.phone}
-                onChange={(e) => setForm(f => ({ ...f, phone: e.target.value }))}
-              />
-            </SimpleGrid>
-
-            <Select
-              label="Gender"
-              placeholder="Select gender"
-              data={[
-                { value: 'M', label: 'Male' },
-                { value: 'F', label: 'Female' },
-              ]}
-              mt="sm"
-              required
-              value={form.gender}
-              onChange={(v) => setForm(f => ({ ...f, gender: v || '' }))}
-            />
-          </Box>
-
-          <Divider label="Role & Organization" labelPosition="center" my="sm" />
-
-          <Box>
-            <Select
-              label="User Role"
-              placeholder="Select user role"
-              data={rolesOptions}
-              required
-              value={form.idUserRole}
-              onChange={(v) => setForm(f => ({ ...f, idUserRole: v || '' }))}
-            />
-
-            <Select
-              label="Village"
-              placeholder="Type to search village..."
-              searchable
-              onSearchChange={setVillageSearch}
-              data={villagesOptions}
-              mt="sm"
-              required
-              value={form.idVillage}
-              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'}
-                data={groupsOptions}
-                disabled={!form.idVillage}
-                required
-                value={form.idGroup}
-                onChange={(v) => setForm(f => ({ ...f, idGroup: v || '', idPosition: '' }))}
-              />
-              <Select
-                label="Position"
-                placeholder={form.idGroup ? 'Select position' : 'Select group first'}
-                data={positionsOptions}
-                disabled={!form.idGroup}
-                value={form.idPosition || ''}
-                onChange={(v) => setForm(f => ({ ...f, idPosition: v || '' }))}
-              />
-            </SimpleGrid>
-          </Box>
+          <UserFormFields
+            values={form}
+            onChange={(updates) => setForm((f) => ({ ...f, ...updates }))}
+            {...sharedFormProps}
+          />
 
           <Button
             fullWidth
@@ -432,102 +538,11 @@ function UsersIndexPage() {
         overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
       >
         <Stack gap="md">
-          <Box>
-            <Text size="xs" fw={700} c="dimmed" mb={8} tt="uppercase" style={{ letterSpacing: '0.05em' }}>
-              Personal Information
-            </Text>
-            <SimpleGrid cols={2} spacing="md">
-              <TextInput
-                label="Full Name"
-                placeholder="Enter full name"
-                required
-                value={editForm.name}
-                onChange={(e) => setEditForm(f => ({ ...f, name: e.target.value }))}
-              />
-              <TextInput
-                label="NIK"
-                placeholder="16-digit identity number"
-                required
-                value={editForm.nik}
-                onChange={(e) => setEditForm(f => ({ ...f, nik: e.target.value }))}
-              />
-            </SimpleGrid>
-
-            <SimpleGrid cols={2} spacing="md" mt="sm">
-              <TextInput
-                label="Email Address"
-                placeholder="email@example.com"
-                required
-                value={editForm.email}
-                onChange={(e) => setEditForm(f => ({ ...f, email: e.target.value }))}
-              />
-              <TextInput
-                label="Phone Number"
-                placeholder="628xxxxxxxxxx"
-                required
-                value={editForm.phone}
-                onChange={(e) => setEditForm(f => ({ ...f, phone: e.target.value }))}
-              />
-            </SimpleGrid>
-
-            <Select
-              label="Gender"
-              placeholder="Select gender"
-              data={[
-                { value: 'M', label: 'Male' },
-                { value: 'F', label: 'Female' },
-              ]}
-              mt="sm"
-              required
-              value={editForm.gender}
-              onChange={(v) => setEditForm(f => ({ ...f, gender: v || '' }))}
-            />
-          </Box>
-
-          <Divider label="Role & Organization" labelPosition="center" my="sm" />
-
-          <Box>
-            <Select
-              label="User Role"
-              placeholder="Select user role"
-              data={rolesOptions}
-              required
-              value={editForm.idUserRole}
-              onChange={(v) => setEditForm(f => ({ ...f, idUserRole: v || '' }))}
-            />
-
-            <Select
-              label="Village"
-              placeholder="Type to search village..."
-              searchable
-              onSearchChange={setVillageSearch}
-              data={villagesOptions}
-              mt="sm"
-              required
-              value={editForm.idVillage}
-              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'}
-                data={groupsOptions}
-                disabled={!editForm.idVillage}
-                required
-                value={editForm.idGroup}
-                onChange={(v) => setEditForm(f => ({ ...f, idGroup: v || '', idPosition: '' }))}
-              />
-              <Select
-                label="Position"
-                placeholder={editForm.idGroup ? 'Select position' : 'Select group first'}
-                data={positionsOptions}
-                disabled={!editForm.idGroup}
-                value={editForm.idPosition || ''}
-                onChange={(v) => setEditForm(f => ({ ...f, idPosition: v || '' }))}
-              />
-            </SimpleGrid>
-          </Box>
+          <UserFormFields
+            values={editForm}
+            onChange={(updates) => setEditForm((f) => ({ ...f, ...updates }))}
+            {...sharedFormProps}
+          />
 
           <Divider label="System Access" labelPosition="center" my="sm" />
 
@@ -536,13 +551,19 @@ function UsersIndexPage() {
               label="Account Active"
               description="Enable or disable user access"
               checked={editForm.isActive}
-              onChange={(event) => setEditForm(f => ({ ...f, isActive: event.currentTarget.checked }))}
+              onChange={(event) => setEditForm((f) => ({ ...f, isActive: event.currentTarget.checked }))}
             />
             <Switch
               label="Without OTP"
               description="Bypass login OTP verification"
               checked={editForm.isWithoutOTP}
-              onChange={(event) => setEditForm(f => ({ ...f, isWithoutOTP: event.currentTarget.checked }))}
+              onChange={(event) => setEditForm((f) => ({ ...f, isWithoutOTP: event.currentTarget.checked }))}
+            />
+            <Switch
+              label="Approver"
+              description="Grant approver privileges to this user"
+              checked={editForm.isApprover}
+              onChange={(event) => setEditForm((f) => ({ ...f, isApprover: event.currentTarget.checked }))}
             />
           </SimpleGrid>
 
@@ -581,23 +602,62 @@ function UsersIndexPage() {
 
       {/* Search / Filter */}
       <Paper withBorder p="md" className="glass">
-        <TextInput
-          placeholder="Search name, NIK, or email... (min. 3 characters)"
-          leftSection={<TbSearch size={16} />}
-          size="sm"
-          rightSection={
-            search ? (
-              <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"
-        />
+        <Stack gap="sm">
+          <TextInput
+            placeholder="Search name, NIK, or email... (min. 3 characters)"
+            leftSection={<TbSearch size={16} />}
+            size="sm"
+            rightSection={
+              search ? (
+                <Tooltip label="Clear search" withArrow>
+                  <ActionIcon variant="transparent" color="gray" onClick={handleClearSearch} size="sm">
+                    <TbX size={16} />
+                  </ActionIcon>
+                </Tooltip>
+              ) : null
+            }
+            value={search}
+            onChange={(e) => setSearch(e.currentTarget.value)}
+            radius="md"
+          />
+          <Group gap="sm" wrap="nowrap">
+            <Select
+              size="sm"
+              placeholder="Status"
+              data={[
+                { value: 'active', label: 'Active' },
+                { value: 'inactive', label: 'Inactive' },
+              ]}
+              value={filterStatus}
+              onChange={setFilterStatus}
+              radius="md"
+              clearable
+              style={{ flex: 1 }}
+            />
+            <Select
+              size="sm"
+              placeholder="Role"
+              data={rolesOptions}
+              value={filterRole}
+              onChange={setFilterRole}
+              radius="md"
+              clearable
+              style={{ flex: 1 }}
+            />
+            <Select
+              size="sm"
+              placeholder="Search village..."
+              searchable
+              onSearchChange={setFilterVillageSearch}
+              data={filterVillagesOptions}
+              value={filterVillageId}
+              onChange={setFilterVillageId}
+              radius="md"
+              clearable
+              style={{ flex: 1 }}
+            />
+          </Group>
+        </Stack>
       </Paper>
 
       {isLoading ? (
@@ -616,7 +676,7 @@ function UsersIndexPage() {
           <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.'}
+              {searchQuery || filterStatus || filterRole || filterVillageId ? 'No users match your filters.' : 'No users found.'}
             </Text>
           </Stack>
         </Paper>
@@ -637,11 +697,30 @@ function UsersIndexPage() {
             >
               <Table.Thead>
                 <Table.Tr>
-                  <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>
+                  {[
+                    { label: 'User & ID', col: 'name', width: '28%' },
+                    { label: 'Contact', col: null, width: '25%' },
+                    { label: 'Organization', col: null, width: '22%' },
+                    { label: 'Role', col: 'idUserRole', width: '15%' },
+                    { label: 'Status', col: 'isActive', width: '10%' },
+                  ].map(({ label, col, width }) => (
+                    <Table.Th
+                      key={label}
+                      style={{ width: isMobile ? undefined : width, cursor: col ? 'pointer' : undefined, userSelect: 'none' }}
+                      onClick={col ? () => handleSort(col) : undefined}
+                    >
+                      <Group gap={4} wrap="nowrap">
+                        <span>{label}</span>
+                        {col && (
+                          sortBy === col
+                            ? sortDir === 'asc'
+                              ? <TbArrowUp size={13} />
+                              : <TbArrowDown size={13} />
+                            : <TbArrowsSort size={13} style={{ opacity: 0.35 }} />
+                        )}
+                      </Group>
+                    </Table.Th>
+                  ))}
                 </Table.Tr>
               </Table.Thead>
               <Table.Tbody>
@@ -745,7 +824,7 @@ function UsersIndexPage() {
         </Paper>
       )}
 
-      {!isLoading && !error && response?.data?.totalPage > 0 && (
+      {!isLoading && !error && response?.data?.totalPage > 1 && (
         <Group justify="center">
           <Pagination
             value={page}

src/frontend/routes/apps.$appId.villages.$villageId.tsx

@@ -1,5 +1,6 @@
 import { AreaChart } from '@mantine/charts'
 import {
+  Badge,
   Box,
   Button,
   Card,
@@ -10,6 +11,7 @@ import {
   SegmentedControl,
   SimpleGrid,
   Stack,
+  Switch,
   Text,
   Textarea,
   TextInput,
@@ -31,6 +33,7 @@ import {
   TbLayoutKanban,
   TbMapPin,
   TbPower,
+  TbTestPipe,
   TbUser,
   TbUsers,
   TbUsersGroup,
@@ -120,16 +123,44 @@ function ActivityChart({ villageId }: { villageId: string }) {
           dataKey="label"
           series={[{ name: 'activity', color: '#2563EB' }]}
           curveType="monotone"
-          withTooltip={true}
-          withDots={true}
+          withTooltip
+          withDots
           withPointLabels={false}
+          tickLine="none"
+          gridAxis="x"
+          fillOpacity={0.4}
           tooltipAnimationDuration={150}
           tooltipProps={{
-            allowEscapeViewBox: { x: true, y: false },
+            content: ({ active, payload, label }: any) => {
+              if (!active || !payload?.length) return null
+              return (
+                <div style={{
+                  backgroundColor: '#1A1B1E',
+                  padding: '8px 12px',
+                  borderRadius: '6px',
+                  border: '1px solid #373A40',
+                  boxShadow: '0 4px 12px rgba(0,0,0,0.5)',
+                  pointerEvents: 'none',
+                  whiteSpace: 'nowrap',
+                }}>
+                  <div style={{ fontSize: '12px', fontWeight: 600, color: '#C1C2C5', marginBottom: '4px' }}>
+                    {label}
+                  </div>
+                  <div style={{ fontSize: '11px', color: '#2563EB' }}>
+                    Activity: <span style={{ fontWeight: 700 }}>{payload[0].value}</span>
+                  </div>
+                </div>
+              )
+            },
           }}
-          activeDotProps={{
-            r: 6,
-            strokeWidth: 2,
+          activeDotProps={{ r: 6, strokeWidth: 2 }}
+          styles={{
+            root: {
+              '.recharts-area-curve': {
+                strokeWidth: 3,
+                filter: 'drop-shadow(0 4px 8px rgba(37, 99, 235, 0.3))',
+              },
+            },
           }}
         />
       )}
@@ -153,7 +184,7 @@ function VillageDetailPage() {
   const [editModalOpened, { open: openEditModal, close: closeEditModal }] = useDisclosure(false)
   const [isUpdating, setIsUpdating] = useState(false)
   const [isEditing, setIsEditing] = useState(false)
-  const [editForm, setEditForm] = useState({ name: '', desc: '' })
+  const [editForm, setEditForm] = useState({ name: '', desc: '', isDummy: false })
 
   const village = infoRes?.data
   const stats = gridRes?.data
@@ -161,7 +192,8 @@ function VillageDetailPage() {
   const openEdit = () => {
     setEditForm({
       name: village?.name || '',
-      desc: village?.desc || ''
+      desc: village?.desc || '',
+      isDummy: village?.isDummy ?? false,
     })
     openEditModal()
   }
@@ -188,7 +220,8 @@ function VillageDetailPage() {
         body: JSON.stringify({
           id: village.id,
           name: editForm.name,
-          desc: editForm.desc
+          desc: editForm.desc,
+          isDummy: editForm.isDummy,
         })
       })
 
@@ -361,7 +394,20 @@ function VillageDetailPage() {
             </ThemeIcon>
 
             <Stack gap={6}>
-              <Title order={2} style={{ color: 'white', lineHeight: 1.1 }}>{village.name}</Title>
+              <Group gap="xs" align="center">
+                <Title order={2} style={{ color: 'white', lineHeight: 1.1 }}>{village.name}</Title>
+                {village.isDummy && (
+                  <Badge
+                    size="sm"
+                    variant="light"
+                    color="yellow"
+                    leftSection={<TbTestPipe size={11} />}
+                    style={{ textTransform: 'none' }}
+                  >
+                    Dummy
+                  </Badge>
+                )}
+              </Group>
 
               <Group gap={6}>
                 <TbMapPin size={14} color="rgba(255,255,255,0.8)" />
@@ -526,6 +572,12 @@ function VillageDetailPage() {
             value={editForm.desc}
             onChange={(e) => setEditForm(prev => ({ ...prev, desc: e.currentTarget.value }))}
           />
+          <Switch
+            label="Dummy Village"
+            description="Tandai desa ini sebagai data dummy"
+            checked={editForm.isDummy}
+            onChange={(e) => setEditForm(prev => ({ ...prev, isDummy: e.currentTarget.checked }))}
+          />
           <Group justify="flex-end" gap="sm" mt="md">
             <Button variant="light" color="gray" onClick={closeEditModal} radius="md">
               Cancel

src/frontend/routes/apps.$appId.villages.index.tsx

@@ -36,6 +36,7 @@ import {
   TbMapPin,
   TbPlus,
   TbSearch,
+  TbTestPipe,
   TbUser,
   TbX,
 } from 'react-icons/tb'
@@ -50,6 +51,7 @@ interface APIVillage {
   id: string
   name: string
   isActive: boolean
+  isDummy: boolean
   createdAt: string
   perbekel: string | null
 }
@@ -95,9 +97,16 @@ function VillageGridCard({ village, onClick }: { village: APIVillage; onClick: (
         >
           <TbHome2 size={22} />
         </ThemeIcon>
-        <Badge color={cfg.color} variant="light" radius="sm" size="sm">
-          {cfg.label}
-        </Badge>
+        <Group gap={6}>
+          {village.isDummy && (
+            <Badge color="yellow" variant="light" radius="sm" size="sm" leftSection={<TbTestPipe size={11} />}>
+              Dummy
+            </Badge>
+          )}
+          <Badge color={cfg.color} variant="light" radius="sm" size="sm">
+            {cfg.label}
+          </Badge>
+        </Group>
       </Group>
 
       <Text fw={800} size="lg" mb={2}>
@@ -175,6 +184,11 @@ function VillageListRow({ village, onClick }: { village: APIVillage; onClick: ()
           <Stack gap={2}>
             <Group gap="sm">
               <Text fw={700} size="sm">{village.name}</Text>
+              {village.isDummy && (
+                <Badge color="yellow" variant="light" radius="sm" size="xs" leftSection={<TbTestPipe size={10} />}>
+                  Dummy
+                </Badge>
+              )}
               <Badge color={cfg.color} variant="light" radius="sm" size="xs">
                 {cfg.label}
               </Badge>
@@ -408,7 +422,7 @@ function AppVillagesIndexPage() {
             <Select 
               label="Gender" 
               placeholder="Select gender"
-              data={['Male', 'Female']}
+              data={[{ label: 'Male', value: 'M' }, { label: 'Female', value: 'F' }]}
               mt="sm"
               required
               value={form.gender}

src/frontend/routes/dev.tsx

@@ -8,7 +8,9 @@ import {
   Button,
   Card,
   Center,
+  CopyButton,
   Container,
+  Divider,
   Group,
   Loader,
   Menu,
@@ -58,6 +60,8 @@ import {
   TbCode,
   TbDatabase,
   TbDots,
+  TbEye,
+  TbEyeOff,
   TbFileText,
   TbKey,
   TbLayoutDashboard,
@@ -77,7 +81,7 @@ import { notifications } from '@mantine/notifications'
 import { type Role, useLogout, useSession } from '@/frontend/hooks/useAuth'
 import { usePresence } from '@/frontend/hooks/usePresence'
 
-const validTabs = ['overview', 'operators', 'bugs', 'app-logs', 'activity-logs', 'database', 'project', 'settings'] as const
+const validTabs = ['overview', 'operators', 'bugs', 'app-logs', 'activity-logs', 'database', 'project', 'settings', 'api-keys'] as const
 
 export const Route = createFileRoute('/dev')({
   validateSearch: (search: Record<string, unknown>) => ({
@@ -117,7 +121,9 @@ const navItems = [
   // { label: 'Activity Logs', icon: TbActivity, key: 'activity-logs' },
   { label: 'Database', icon: TbDatabase, key: 'database' },
   { label: 'Project', icon: TbSitemap, key: 'project' },
-  { label: 'Settings', icon: TbSettings, key: 'settings' },
+  { label: 'App Config', icon: TbSettings, key: 'settings' },
+  { divider: true, key: '__divider-external__' },
+  { label: 'Desa Mandiri Keys', icon: TbKey, key: 'api-keys' },
 ]
 
 function DevPage() {
@@ -200,7 +206,8 @@ function DevPage() {
         <AppShell.Section grow>
           <Stack gap={4}>
             {navItems.map((item) => {
-              const Icon = item.icon
+              if (item.divider) return <Divider key={item.key} my={4} />
+              const Icon = item.icon!
               if (collapsed) {
                 return (
                   <Tooltip key={item.key} label={item.label} position="right">
@@ -274,6 +281,7 @@ function DevPage() {
           {active === 'activity-logs' && <ActivityLogsPanel />}
           {active === 'database' && <DatabasePanel />}
           {active === 'project' && <ProjectPanel />}
+          {active === 'api-keys' && <ApiKeysPanel />}
           {active === 'settings' && <SettingsPanel />}
         </Container>
       </AppShell.Main>
@@ -1469,6 +1477,8 @@ interface AppEntry {
   id: string
   name: string
   urlApi: string | null
+  apiKey: string
+  clientApiKey: string
   status: string
   active: boolean
   hasClientApiKey: boolean
@@ -1496,10 +1506,24 @@ function SettingsPanel() {
   const [keyOpened, { open: openKey, close: closeKey }] = useDisclosure(false)
   const [generatedKey, setGeneratedKey] = useState('')
   const [keyCopied, setKeyCopied] = useState(false)
+  const [generatedKeyVisible, setGeneratedKeyVisible] = useState(false)
+  const [addKeyVisible, setAddKeyVisible] = useState(false)
+  const [apiConfigKeyVisible, setApiConfigKeyVisible] = useState(false)
+  const [visibleAppKeys, setVisibleAppKeys] = useState<Set<string>>(new Set())
+
+  const toggleAppKeyVisibility = (appId: string) => {
+    setVisibleAppKeys((prev) => {
+      const next = new Set(prev)
+      if (next.has(appId)) next.delete(appId)
+      else next.add(appId)
+      return next
+    })
+  }
 
   const openApiModal = (app: AppEntry) => {
     setApiTarget(app)
     setApiForm({ urlApi: app.urlApi ?? '', apiKey: '' })
+    setApiConfigKeyVisible(false)
     openApi()
   }
 
@@ -1557,6 +1581,7 @@ function SettingsPanel() {
       qc.invalidateQueries({ queryKey: ['apps'] })
       setGeneratedKey(res.clientApiKey)
       setKeyCopied(false)
+      setGeneratedKeyVisible(false)
       openKey()
     },
   })
@@ -1588,7 +1613,7 @@ function SettingsPanel() {
     <Stack>
       <Group justify="space-between">
         <div>
-          <Title order={3}>Application Settings</Title>
+          <Title order={3}>App Config</Title>
           <Text size="sm" c="dimmed">Manage the URL API and API Key for each application.</Text>
         </div>
         <Button leftSection={<TbApps size={16} />} onClick={openAdd}>Add App</Button>
@@ -1621,6 +1646,54 @@ function SettingsPanel() {
                         : <Badge color="red" variant="dot" size="xs">No client key</Badge>
                       }
                     </Group>
+                    {app.clientApiKey && (
+                      <>
+                        <Text size="xs" fw={500} c="gray" mt={4}>Client Key (untuk mobile app mengakses monitoring):</Text>
+                        <Group gap={4} wrap="nowrap">
+                          <Text size="xs" ff="monospace" c="dimmed" style={{ userSelect: visibleAppKeys.has(app.id) ? 'text' : 'none' }}>
+                            {visibleAppKeys.has(app.id) ? app.clientApiKey : '•'.repeat(32)}
+                          </Text>
+                          <Tooltip label={visibleAppKeys.has(app.id) ? 'Sembunyikan' : 'Tampilkan'}>
+                            <ActionIcon variant="subtle" size="xs" color="gray" onClick={() => toggleAppKeyVisibility(app.id)}>
+                              {visibleAppKeys.has(app.id) ? <TbEyeOff size={12} /> : <TbEye size={12} />}
+                            </ActionIcon>
+                          </Tooltip>
+                          <CopyButton value={app.clientApiKey}>
+                            {({ copy }) => (
+                              <Tooltip label="Salin">
+                                <ActionIcon variant="subtle" size="xs" color="gray" onClick={copy}>
+                                  <TbCopy size={12} />
+                                </ActionIcon>
+                              </Tooltip>
+                            )}
+                          </CopyButton>
+                        </Group>
+                      </>
+                    )}
+                    {app.apiKey && (
+                      <>
+                        <Text size="xs" fw={500} c="gray" mt={4}>Server Key (untuk monitoring mengakses API external):</Text>
+                        <Group gap={4} wrap="nowrap">
+                          <Text size="xs" ff="monospace" c="dimmed" style={{ userSelect: visibleAppKeys.has(`server-${app.id}`) ? 'text' : 'none' }}>
+                            {visibleAppKeys.has(`server-${app.id}`) ? app.apiKey : '•'.repeat(32)}
+                          </Text>
+                          <Tooltip label={visibleAppKeys.has(`server-${app.id}`) ? 'Sembunyikan' : 'Tampilkan'}>
+                            <ActionIcon variant="subtle" size="xs" color="gray" onClick={() => toggleAppKeyVisibility(`server-${app.id}`)}>
+                              {visibleAppKeys.has(`server-${app.id}`) ? <TbEyeOff size={12} /> : <TbEye size={12} />}
+                            </ActionIcon>
+                          </Tooltip>
+                          <CopyButton value={app.apiKey}>
+                            {({ copy }) => (
+                              <Tooltip label="Salin">
+                                <ActionIcon variant="subtle" size="xs" color="gray" onClick={copy}>
+                                  <TbCopy size={12} />
+                                </ActionIcon>
+                              </Tooltip>
+                            )}
+                          </CopyButton>
+                        </Group>
+                      </>
+                    )}
                   </Box>
                 </Group>
                 <Group gap="xs" wrap="nowrap">
@@ -1654,7 +1727,19 @@ function SettingsPanel() {
           <TextInput label="App ID" description="Unique slug used as identifier (e.g. desa-plus)" placeholder="my-app" value={newApp.id} onChange={(e) => setNewApp((p) => ({ ...p, id: e.target.value }))} required />
           <TextInput label="Name" placeholder="My Application" value={newApp.name} onChange={(e) => setNewApp((p) => ({ ...p, name: e.target.value }))} required />
           <TextInput label="URL API" placeholder="https://api.example.com" value={newApp.urlApi} onChange={(e) => setNewApp((p) => ({ ...p, urlApi: e.target.value }))} />
-          <TextInput label="API Key" placeholder="secret-key" type="password" value={newApp.apiKey} onChange={(e) => setNewApp((p) => ({ ...p, apiKey: e.target.value }))} />
+          <TextInput
+            label="Server Key (API External)"
+            description="Key untuk monitoring mengakses API external app ini."
+            placeholder="secret-key"
+            type={addKeyVisible ? 'text' : 'password'}
+            value={newApp.apiKey}
+            onChange={(e) => setNewApp((p) => ({ ...p, apiKey: e.target.value }))}
+            rightSection={
+              <ActionIcon variant="subtle" size="sm" color="gray" onClick={() => setAddKeyVisible((v) => !v)}>
+                {addKeyVisible ? <TbEyeOff size={14} /> : <TbEye size={14} />}
+              </ActionIcon>
+            }
+          />
           <Group justify="flex-end" mt="xs">
             <Button variant="subtle" color="gray" onClick={closeAdd}>Cancel</Button>
             <Button loading={createMutation.isPending} disabled={!newApp.id || !newApp.name} onClick={() => createMutation.mutate(newApp)}>Add</Button>
@@ -1666,21 +1751,28 @@ function SettingsPanel() {
       <Modal opened={keyOpened} onClose={closeKey} title="Client API Key Generated" radius="md">
         <Stack gap="sm">
           <Text size="sm" c="dimmed">Copy this key now — it will not be shown again after you close this dialog.</Text>
-          <Box
-            p="sm"
-            style={{ background: 'var(--mantine-color-dark-6)', borderRadius: 6, fontFamily: 'monospace', fontSize: 13, wordBreak: 'break-all' }}
-          >
-            {generatedKey}
-          </Box>
-          <Group justify="flex-end">
-            <Button
-              variant="light"
-              color={keyCopied ? 'green' : 'blue'}
-              leftSection={<TbCopy size={14} />}
-              onClick={() => { navigator.clipboard.writeText(generatedKey); setKeyCopied(true) }}
+          <Group gap={4} wrap="nowrap" align="center">
+            <Box
+              p="sm"
+              flex={1}
+              style={{ background: 'var(--mantine-color-dark-6)', borderRadius: 6, fontFamily: 'monospace', fontSize: 13, wordBreak: 'break-all', userSelect: generatedKeyVisible ? 'text' : 'none' }}
             >
-              {keyCopied ? 'Copied!' : 'Copy to Clipboard'}
-            </Button>
+              {generatedKeyVisible ? generatedKey : '•'.repeat(48)}
+            </Box>
+            <Tooltip label={generatedKeyVisible ? 'Sembunyikan' : 'Tampilkan'}>
+              <ActionIcon variant="subtle" color="gray" onClick={() => setGeneratedKeyVisible((v) => !v)}>
+                {generatedKeyVisible ? <TbEyeOff size={16} /> : <TbEye size={16} />}
+              </ActionIcon>
+            </Tooltip>
+          </Group>
+          <Group justify="flex-end">
+            <CopyButton value={generatedKey}>
+              {({ copy }) => (
+                <Button variant="light" color={keyCopied ? 'green' : 'blue'} leftSection={<TbCopy size={14} />} onClick={() => { copy(); setKeyCopied(true) }}>
+                  {keyCopied ? 'Copied!' : 'Copy to Clipboard'}
+                </Button>
+              )}
+            </CopyButton>
             <Button variant="subtle" color="gray" onClick={closeKey}>Close</Button>
           </Group>
         </Stack>
@@ -1690,14 +1782,26 @@ function SettingsPanel() {
       <Modal opened={apiOpened} onClose={closeApi} title={`API Config — ${apiTarget?.name}`} radius="md">
         <Stack gap="sm">
           <TextInput label="URL API" description="Base URL for proxying requests to the external API." placeholder="https://api.example.com" value={apiForm.urlApi} onChange={(e) => setApiForm((p) => ({ ...p, urlApi: e.target.value }))} />
-          <TextInput label="API Key" description="Leave blank to keep the existing key unchanged." placeholder="Leave blank to keep unchanged" type="password" value={apiForm.apiKey} onChange={(e) => setApiForm((p) => ({ ...p, apiKey: e.target.value }))} />
+          <TextInput
+            label="Server Key (API External)"
+            description="Key untuk monitoring mengakses API external. Kosongkan untuk tetap menggunakan key yang ada."
+            placeholder="Kosongkan untuk tetap menggunakan key yang ada"
+            type={apiConfigKeyVisible ? 'text' : 'password'}
+            value={apiForm.apiKey}
+            onChange={(e) => setApiForm((p) => ({ ...p, apiKey: e.target.value }))}
+            rightSection={
+              <ActionIcon variant="subtle" size="sm" color="gray" onClick={() => setApiConfigKeyVisible((v) => !v)}>
+                {apiConfigKeyVisible ? <TbEyeOff size={14} /> : <TbEye size={14} />}
+              </ActionIcon>
+            }
+          />
           <Group justify="flex-end" mt="xs">
             <Button variant="subtle" color="gray" onClick={closeApi}>Cancel</Button>
             <Button
               loading={apiMutation.isPending}
               onClick={() => {
                 if (!apiTarget) return
-                const body: any = { urlApi: apiForm.urlApi }
+                const body: { urlApi: string; apiKey?: string } = { urlApi: apiForm.urlApi }
                 if (apiForm.apiKey) body.apiKey = apiForm.apiKey
                 apiMutation.mutate({ id: apiTarget.id, body })
               }}
@@ -1711,6 +1815,254 @@ function SettingsPanel() {
   )
 }
 
+// ─── API Keys Panel ────────────────────────────────────────────────────────────
+
+interface ApiKeyItem {
+  id: string
+  name: string
+  key: string
+  isActive: boolean
+  createdAt: string
+  updatedAt: string
+}
+
+function ApiKeysPanel() {
+  const qc = useQueryClient()
+  const [createOpened, { open: openCreate, close: closeCreate }] = useDisclosure(false)
+  const [newKeyName, setNewKeyName] = useState('')
+  const [createdKey, setCreatedKey] = useState<string | null>(null)
+  const [keyCopied, setKeyCopied] = useState(false)
+  const [revealedOpened, { open: openRevealed, close: closeRevealed }] = useDisclosure(false)
+  const [visibleKeys, setVisibleKeys] = useState<Set<string>>(new Set())
+
+  const toggleKeyVisibility = (keyId: string) => {
+    setVisibleKeys((prev) => {
+      const next = new Set(prev)
+      if (next.has(keyId)) next.delete(keyId)
+      else next.add(keyId)
+      return next
+    })
+  }
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['admin', 'api-keys'],
+    queryFn: () => fetch('/api/admin/api-keys', { credentials: 'include' }).then((r) => r.json()),
+  })
+  const keys: ApiKeyItem[] = data?.keys ?? []
+
+  const createMutation = useMutation({
+    mutationFn: async (name: string) => {
+      const r = await fetch('/api/admin/api-keys', {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name }),
+      })
+      const json = await r.json()
+      if (!r.ok) throw new Error(json.error ?? 'Gagal membuat API key')
+      return json
+    },
+    onSuccess: (res) => {
+      qc.invalidateQueries({ queryKey: ['admin', 'api-keys'] })
+      closeCreate()
+      setNewKeyName('')
+      if (res.key?.key) {
+        setCreatedKey(res.key.key)
+        setKeyCopied(false)
+        openRevealed()
+      }
+    },
+    onError: (err: Error) => notifications.show({ color: 'red', title: 'Gagal', message: err.message }),
+  })
+
+  const toggleMutation = useMutation({
+    mutationFn: ({ id, isActive }: { id: string; isActive: boolean }) =>
+      fetch(`/api/admin/api-keys/${id}`, {
+        method: 'PATCH',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ isActive }),
+      }).then((r) => r.json()),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ['admin', 'api-keys'] }),
+  })
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) =>
+      fetch(`/api/admin/api-keys/${id}`, { method: 'DELETE', credentials: 'include' }).then((r) => r.json()),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ['admin', 'api-keys'] }),
+  })
+
+  const confirmDelete = (key: ApiKeyItem) => {
+    modals.openConfirmModal({
+      title: 'Hapus API Key',
+      children: (
+        <Text size="sm">
+          Yakin hapus key <strong>{key.name}</strong>? Semua klien yang menggunakan key ini akan kehilangan akses.
+        </Text>
+      ),
+      labels: { confirm: 'Hapus', cancel: 'Batal' },
+      confirmProps: { color: 'red' },
+      onConfirm: () => deleteMutation.mutate(key.id),
+    })
+  }
+
+  return (
+    <Stack>
+      <Group justify="space-between">
+        <div>
+          <Title order={3}>Desa Mandiri Keys</Title>
+          <Text size="sm" c="dimmed">Manage access tokens for the Desa Mandiri system</Text>
+        </div>
+        <Button leftSection={<TbKey size={14} />} onClick={openCreate}>
+          Buat Key Baru
+        </Button>
+      </Group>
+
+      {isLoading ? (
+        <Center><Loader /></Center>
+      ) : keys.length === 0 ? (
+        <Paper withBorder p="xl" radius="md">
+          <Center>
+            <Stack align="center" gap="xs">
+              <ThemeIcon size="xl" variant="light" color="gray"><TbKey size={24} /></ThemeIcon>
+              <Text c="dimmed" size="sm">Belum ada API key. Buat key pertama untuk mengakses API.</Text>
+            </Stack>
+          </Center>
+        </Paper>
+      ) : (
+        <Table.ScrollContainer minWidth={600}>
+          <Table striped highlightOnHover>
+            <Table.Thead>
+              <Table.Tr>
+                <Table.Th>Nama</Table.Th>
+                <Table.Th>Key</Table.Th>
+                <Table.Th>Status</Table.Th>
+                <Table.Th>Dibuat</Table.Th>
+                <Table.Th w={100}>Aksi</Table.Th>
+              </Table.Tr>
+            </Table.Thead>
+            <Table.Tbody>
+              {keys.map((k) => (
+                <Table.Tr key={k.id}>
+                  <Table.Td fw={500}>{k.name}</Table.Td>
+                  <Table.Td>
+                    <Group gap={4} wrap="nowrap">
+                      <Text size="xs" ff="monospace" c="dimmed" style={{ userSelect: visibleKeys.has(k.id) ? 'text' : 'none' }}>
+                        {visibleKeys.has(k.id) ? k.key : '•'.repeat(32)}
+                      </Text>
+                      <Tooltip label={visibleKeys.has(k.id) ? 'Sembunyikan' : 'Tampilkan'}>
+                        <ActionIcon
+                          variant="subtle"
+                          size="xs"
+                          color="gray"
+                          onClick={() => toggleKeyVisibility(k.id)}
+                        >
+                          {visibleKeys.has(k.id) ? <TbEyeOff size={12} /> : <TbEye size={12} />}
+                        </ActionIcon>
+                      </Tooltip>
+                      <CopyButton value={k.key}>
+                        {({ copy }) => (
+                          <Tooltip label="Salin">
+                            <ActionIcon variant="subtle" size="xs" color="gray" onClick={copy}>
+                              <TbCopy size={12} />
+                            </ActionIcon>
+                          </Tooltip>
+                        )}
+                      </CopyButton>
+                    </Group>
+                  </Table.Td>
+                  <Table.Td>
+                    <Badge color={k.isActive ? 'green' : 'gray'} variant="light">
+                      {k.isActive ? 'Aktif' : 'Nonaktif'}
+                    </Badge>
+                  </Table.Td>
+                  <Table.Td>
+                    <Text size="xs" c="dimmed">{new Date(k.createdAt).toLocaleDateString('id-ID')}</Text>
+                  </Table.Td>
+                  <Table.Td>
+                    <Group gap={4}>
+                      <Tooltip label={k.isActive ? 'Nonaktifkan' : 'Aktifkan'}>
+                        <ActionIcon
+                          variant="subtle"
+                          color={k.isActive ? 'orange' : 'green'}
+                          size="sm"
+                          loading={toggleMutation.isPending}
+                          onClick={() => toggleMutation.mutate({ id: k.id, isActive: !k.isActive })}
+                        >
+                          <TbRefresh size={14} />
+                        </ActionIcon>
+                      </Tooltip>
+                      <Tooltip label="Hapus">
+                        <ActionIcon
+                          variant="subtle"
+                          color="red"
+                          size="sm"
+                          loading={deleteMutation.isPending}
+                          onClick={() => confirmDelete(k)}
+                        >
+                          <TbTrash size={14} />
+                        </ActionIcon>
+                      </Tooltip>
+                    </Group>
+                  </Table.Td>
+                </Table.Tr>
+              ))}
+            </Table.Tbody>
+          </Table>
+        </Table.ScrollContainer>
+      )}
+
+      {/* ── Create Key Modal ── */}
+      <Modal opened={createOpened} onClose={closeCreate} title="Buat API Key Baru" radius="md">
+        <Stack gap="sm">
+          <TextInput
+            label="Nama Key"
+            description="Label untuk mengidentifikasi key ini (misal: Jenna Mobile App)"
+            placeholder="Nama key..."
+            value={newKeyName}
+            onChange={(e) => setNewKeyName(e.target.value)}
+            required
+          />
+          <Group justify="flex-end" mt="xs">
+            <Button variant="subtle" color="gray" onClick={closeCreate}>Batal</Button>
+            <Button
+              loading={createMutation.isPending}
+              disabled={!newKeyName.trim()}
+              onClick={() => createMutation.mutate(newKeyName)}
+            >
+              Buat Key
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+
+      {/* ── Reveal Key Modal ── */}
+      <Modal opened={revealedOpened} onClose={closeRevealed} title="API Key Berhasil Dibuat" radius="md">
+        <Stack gap="sm">
+          <Text size="sm" c="dimmed">Salin key ini sekarang — key tidak akan ditampilkan kembali setelah dialog ini ditutup.</Text>
+          <Box
+            p="sm"
+            style={{ background: 'var(--mantine-color-dark-6)', borderRadius: 6, fontFamily: 'monospace', fontSize: 13, wordBreak: 'break-all' }}
+          >
+            {createdKey}
+          </Box>
+          <Group justify="flex-end">
+            <Button
+              variant="light"
+              color={keyCopied ? 'green' : 'blue'}
+              leftSection={<TbCopy size={14} />}
+              onClick={() => { if (createdKey) { navigator.clipboard.writeText(createdKey); setKeyCopied(true) } }}
+            >
+              {keyCopied ? 'Tersalin!' : 'Salin Key'}
+            </Button>
+            <Button variant="subtle" color="gray" onClick={() => { closeRevealed(); setCreatedKey(null) }}>Tutup</Button>
+          </Group>
+        </Stack>
+      </Modal>
+    </Stack>
+  )
+}
+
 void TbFileText
 void TbCode
 void TbUser

src/frontend/routes/index.tsx

@@ -1,7 +1,7 @@
-import { Button, Container, Group, Stack, Text, Title } from '@mantine/core'
+import { Button, Box, Center, Stack, Text, Title } from '@mantine/core'
 import { Link, createFileRoute } from '@tanstack/react-router'
-import { SiBun } from 'react-icons/si'
-import { TbBrandReact, TbLogin, TbRocket } from 'react-icons/tb'
+import { TbLogin } from 'react-icons/tb'
+import logoUrl from '../../logo.svg'
 
 export const Route = createFileRoute('/')({
   component: HomePage,
@@ -9,28 +9,67 @@ export const Route = createFileRoute('/')({
 
 function HomePage() {
   return (
-    <Container size="sm" py="xl">
-      <Stack align="center" gap="lg">
-        <Group gap="lg">
-          <SiBun size={64} color="#fbf0df" />
-          <TbBrandReact size={64} color="#61dafb" />
-        </Group>
+    <Box style={{ minHeight: '100vh', background: '#1a1a2e', position: 'relative', overflow: 'hidden' }}>
+      {/* background blobs */}
+      <Box style={{
+        position: 'absolute', top: '-15%', left: '-10%',
+        width: 500, height: 500, borderRadius: '50%',
+        background: 'radial-gradient(circle, rgba(124,58,237,0.25) 0%, transparent 70%)',
+        pointerEvents: 'none',
+      }} />
+      <Box style={{
+        position: 'absolute', bottom: '-20%', right: '-10%',
+        width: 600, height: 600, borderRadius: '50%',
+        background: 'radial-gradient(circle, rgba(79,70,229,0.2) 0%, transparent 70%)',
+        pointerEvents: 'none',
+      }} />
+      <Box style={{
+        position: 'absolute', top: '50%', left: '60%',
+        width: 300, height: 300, borderRadius: '50%',
+        background: 'radial-gradient(circle, rgba(168,85,247,0.1) 0%, transparent 70%)',
+        pointerEvents: 'none',
+      }} />
 
-        <Title order={1}>Bun + Elysia + Vite + React</Title>
+      <Center mih="100vh" style={{ position: 'relative', zIndex: 1 }}>
+        <Stack align="center" gap="xl">
+          <img
+            src={logoUrl}
+            width={72}
+            height={72}
+            alt="logo"
+            style={{ borderRadius: 20, boxShadow: '0 4px 32px rgba(124,58,237,0.5)', display: 'block' }}
+          />
 
-        <Text c="dimmed" ta="center" maw={480}>
-          Full-stack starter template with Mantine UI, TanStack Router, and session-based auth.
-        </Text>
+          <Stack align="center" gap={8}>
+            <Title
+              order={1}
+              c="white"
+              fw={800}
+              ta="center"
+              style={{ fontSize: '2.6rem', letterSpacing: '-0.5px', lineHeight: 1.15 }}
+            >
+              Monitoring System
+            </Title>
+            <Text c="dimmed" ta="center" size="md" maw={320} lh={1.6}>
+              Pantau semua aplikasi dalam satu tempat, real-time.
+            </Text>
+          </Stack>
 
-        <Group>
-          <Button component={Link} to="/login" leftSection={<TbLogin size={18} />} variant="filled">
-            Login
+          <Button
+            component={Link}
+            to="/login"
+            leftSection={<TbLogin size={18} />}
+            size="md"
+            style={{
+              background: 'linear-gradient(135deg, #4f46e5, #7c3aed)',
+              border: 'none',
+              paddingInline: 32,
+            }}
+          >
+            Masuk
           </Button>
-          <Button component={Link} to="/dashboard" leftSection={<TbRocket size={18} />} variant="light">
-            Dashboard
-          </Button>
-        </Group>
-      </Stack>
-    </Container>
+        </Stack>
+      </Center>
+    </Box>
   )
 }

src/frontend/routes/login.tsx

@@ -1,10 +1,11 @@
 import { useLogin } from '@/frontend/hooks/useAuth'
+import logoUrl from '../../logo.svg'
 import {
   Alert,
+  Box,
   Button,
   Center,
   Divider,
-  Paper,
   PasswordInput,
   Stack,
   Text,
@@ -38,6 +39,14 @@ export const Route = createFileRoute('/login')({
   component: LoginPage,
 })
 
+const OAUTH_ERRORS: Record<string, string> = {
+  google_denied: 'Login dengan Google dibatalkan.',
+  invalid_state: 'Sesi OAuth tidak valid, silakan coba lagi.',
+  token_failed: 'Gagal menukar token Google, silakan coba lagi.',
+  userinfo_failed: 'Gagal mengambil info akun Google, silakan coba lagi.',
+  account_disabled: 'Akun Anda telah dinonaktifkan. Hubungi admin untuk informasi lebih lanjut.',
+}
+
 function LoginPage() {
   const login = useLogin()
   const { error: searchError } = Route.useSearch()
@@ -49,69 +58,117 @@ function LoginPage() {
     login.mutate({ email, password })
   }
 
+  const errorMessage = login.isError
+    ? login.error.message
+    : searchError
+      ? (OAUTH_ERRORS[searchError] ?? 'Login dengan Google gagal, silakan coba lagi.')
+      : null
+
   return (
-    <Center mih="100vh">
-      <Paper shadow="md" p="xl" radius="md" w={400} withBorder>
-        <form onSubmit={handleSubmit}>
-          <Stack gap="md">
-            <Title order={2} ta="center">
-              Login
-            </Title>
+    <Box style={{ minHeight: '100vh', background: '#1a1a2e', position: 'relative', overflow: 'hidden' }}>
+      {/* background blobs */}
+      <Box style={{
+        position: 'absolute', top: '-15%', left: '-10%',
+        width: 500, height: 500, borderRadius: '50%',
+        background: 'radial-gradient(circle, rgba(124,58,237,0.25) 0%, transparent 70%)',
+        pointerEvents: 'none',
+      }} />
+      <Box style={{
+        position: 'absolute', bottom: '-20%', right: '-10%',
+        width: 600, height: 600, borderRadius: '50%',
+        background: 'radial-gradient(circle, rgba(79,70,229,0.2) 0%, transparent 70%)',
+        pointerEvents: 'none',
+      }} />
+      <Box style={{
+        position: 'absolute', top: '50%', left: '60%',
+        width: 300, height: 300, borderRadius: '50%',
+        background: 'radial-gradient(circle, rgba(168,85,247,0.1) 0%, transparent 70%)',
+        pointerEvents: 'none',
+      }} />
 
-            {(login.isError || searchError) && (
-              <Alert icon={<TbAlertCircle size={16} />} color="red" variant="light">
-                {login.isError ? login.error.message : (
-                  {
-                    google_denied: 'Login dengan Google dibatalkan.',
-                    invalid_state: 'Sesi OAuth tidak valid, silakan coba lagi.',
-                    token_failed: 'Gagal menukar token Google, silakan coba lagi.',
-                    userinfo_failed: 'Gagal mengambil info akun Google, silakan coba lagi.',
-                    account_disabled: 'Akun Anda telah dinonaktifkan. Hubungi admin untuk informasi lebih lanjut.',
-                  }[searchError ?? ''] ?? 'Login dengan Google gagal, silakan coba lagi.'
-                )}
-              </Alert>
-            )}
+      <Center mih="100vh" style={{ position: 'relative', zIndex: 1 }}>
+        <Box
+          p="xl"
+          w={400}
+          style={{
+            background: 'rgba(36,36,36,0.75)',
+            backdropFilter: 'blur(20px)',
+            borderRadius: 20,
+            border: '1px solid rgba(124,58,237,0.35)',
+            boxShadow: '0 0 0 1px rgba(124,58,237,0.1), 0 8px 32px rgba(0,0,0,0.4), 0 0 60px rgba(124,58,237,0.12)',
+          }}
+        >
+          <form onSubmit={handleSubmit}>
+            <Stack gap="md">
+              {/* header */}
+              <Stack gap={8} align="center" mb={4}>
+                <img
+                  src={logoUrl}
+                  width={56}
+                  height={56}
+                  alt="logo"
+                  style={{ borderRadius: 14, boxShadow: '0 4px 20px rgba(124,58,237,0.45)', display: 'block' }}
+                />
+                <Title order={2} fw={700} ta="center" c="white">
+                  Monitoring System
+                </Title>
+                <Text c="dimmed" size="sm" ta="center">
+                  Masuk untuk melanjutkan
+                </Text>
+              </Stack>
 
-            <TextInput
-              label="Email"
-              placeholder="email@example.com"
-              leftSection={<TbMail size={16} />}
-              value={email}
-              onChange={(e) => setEmail(e.currentTarget.value)}
-              required
-            />
+              {errorMessage && (
+                <Alert icon={<TbAlertCircle size={16} />} color="red" variant="light">
+                  {errorMessage}
+                </Alert>
+              )}
 
-            <PasswordInput
-              label="Password"
-              placeholder="Password"
-              leftSection={<TbLock size={16} />}
-              value={password}
-              onChange={(e) => setPassword(e.currentTarget.value)}
-              required
-            />
+              <TextInput
+                label="Email"
+                placeholder="email@example.com"
+                leftSection={<TbMail size={16} />}
+                value={email}
+                onChange={(e) => setEmail(e.currentTarget.value)}
+                required
+              />
 
-            <Button
-              type="submit"
-              fullWidth
-              leftSection={<TbLogin size={18} />}
-              loading={login.isPending}
-            >
-              Sign in
-            </Button>
+              <PasswordInput
+                label="Password"
+                placeholder="Password"
+                leftSection={<TbLock size={16} />}
+                value={password}
+                onChange={(e) => setPassword(e.currentTarget.value)}
+                required
+              />
 
-            <Divider label="or" labelPosition="center" />
+              <Button
+                type="submit"
+                fullWidth
+                leftSection={<TbLogin size={18} />}
+                loading={login.isPending}
+                mt={4}
+                style={{
+                  background: 'linear-gradient(135deg, #4f46e5, #7c3aed)',
+                  border: 'none',
+                }}
+              >
+                Sign in
+              </Button>
 
-            <Button
-              variant="default"
-              fullWidth
-              leftSection={<FcGoogle size={18} />}
-              onClick={() => { window.location.href = '/api/auth/google' }}
-            >
-              Continue with Google
-            </Button>
-          </Stack>
-        </form>
-      </Paper>
-    </Center>
+              <Divider label="atau" labelPosition="center" />
+
+              <Button
+                variant="default"
+                fullWidth
+                leftSection={<FcGoogle size={18} />}
+                onClick={() => { window.location.href = '/api/auth/google' }}
+              >
+                Continue with Google
+              </Button>
+            </Stack>
+          </form>
+        </Box>
+      </Center>
+    </Box>
   )
 }