chore: bump version to 0.1.16

- Tambah GET /api/bugs/stats dengan summary cards & chart trend/bugs per app
- Tambah date range picker di village activity chart
- Tambah tabel Recent Activity (action + description) di village detail
- Update API graph-log-villages support dateFrom/dateTo custom range

.gitignore

@@ -30,6 +30,9 @@ src/frontend/routeTree.gen.ts
 # IntelliJ based IDEs
 .idea
 
+# Claude Code session data
+.claude/
+
 # Finder (MacOS) folder config
 .DS_Store
 

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.4",
+  "version": "0.1.16",
   "private": true,
   "type": "module",
   "scripts": {

prisma/schema.prisma

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

scripts/mcp-deploy.ts

@@ -21,7 +21,7 @@ async function triggerWorkflow(workflow: string, inputs: Record<string, string>)
   const res = await fetch(`${BASE_URL}/actions/workflows/${workflow}/dispatches`, {
     method: 'POST',
     headers: ghHeaders,
-    body: JSON.stringify({ ref: 'main', inputs }),
+    body: JSON.stringify({ ref: 'stg', inputs }),
   })
   if (!res.ok) throw new Error(`GitHub API error ${res.status}: ${await res.text()}`)
 }
@@ -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

@@ -8,7 +8,7 @@ import { prisma } from './lib/db'
 import { env } from './lib/env'
 import { createSystemLog } from './lib/logger'
 import { getMinioDownloadUrl, uploadBugImage } from './lib/minio'
-import { addConnection, broadcastToAdmins, getOnlineUserIds, removeConnection } from './lib/presence'
+import { addConnection, broadcastNotification, broadcastToAdmins, getOnlineUserIds, removeConnection } from './lib/presence'
 import { parseSchema } from './lib/schema-parser'
 
 const isProduction = process.env.NODE_ENV === 'production'
@@ -370,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,
       }))
     }, {
@@ -803,6 +805,9 @@ export function createApp() {
       const search = query.search || ''
       const app = query.app as any
       const status = query.status as any
+      const source = query.source as any
+      const dateFrom = query.dateFrom
+      const dateTo = query.dateTo
 
       const where: any = {}
       if (search) {
@@ -819,6 +824,18 @@ export function createApp() {
       if (status && status !== 'all') {
         where.status = status
       }
+      if (source && source !== 'all') {
+        where.source = source
+      }
+      if (dateFrom || dateTo) {
+        where.createdAt = {}
+        if (dateFrom) where.createdAt.gte = new Date(dateFrom)
+        if (dateTo) {
+          const end = new Date(dateTo)
+          end.setHours(23, 59, 59, 999)
+          where.createdAt.lte = end
+        }
+      }
 
       const [bugs, total] = await Promise.all([
         prisma.bug.findMany({
@@ -850,10 +867,13 @@ export function createApp() {
         search: t.Optional(t.String({ description: 'Cari berdasarkan deskripsi, device, OS, atau versi' })),
         app: t.Optional(t.String({ description: 'Filter berdasarkan ID aplikasi, atau "all"' })),
         status: t.Optional(t.String({ description: 'Filter status: OPEN | ON_HOLD | IN_PROGRESS | RESOLVED | RELEASED | CLOSED | all' })),
+        source: t.Optional(t.String({ description: 'Filter sumber: QC | SYSTEM | USER | all' })),
+        dateFrom: t.Optional(t.String({ description: 'Filter dari tanggal (YYYY-MM-DD)' })),
+        dateTo: t.Optional(t.String({ description: 'Filter sampai tanggal (YYYY-MM-DD)' })),
       }),
       detail: {
         summary: 'List Bug Reports',
-        description: 'Mengembalikan daftar bug report dengan pagination, beserta data pelapor, gambar, dan riwayat status (BugLog). Mendukung filter berdasarkan aplikasi dan status.',
+        description: 'Mengembalikan daftar bug report dengan pagination, beserta data pelapor, gambar, dan riwayat status (BugLog). Mendukung filter berdasarkan aplikasi, status, source, dan tanggal.',
         tags: ['Bugs'],
       },
     })
@@ -901,6 +921,18 @@ export function createApp() {
         },
       })
 
+      broadcastNotification({
+        type: 'new_bug',
+        bug: {
+          id: bug.id,
+          description: bug.description,
+          appId: bug.appId,
+          source: bug.source,
+          affectedVersion: bug.affectedVersion,
+          createdAt: bug.createdAt,
+        },
+      })
+
       return bug
     }, {
       body: t.Object({
@@ -1068,6 +1100,88 @@ export function createApp() {
       },
     })
 
+    // ─── Bug Statistics API ────────────────────────────
+    .get('/api/bugs/stats', async ({ query }) => {
+      const range = [7, 30, 90].includes(Number(query.range)) ? Number(query.range) : 7
+      const now = new Date()
+      const rangeStart = new Date(now.getTime() - range * 24 * 60 * 60 * 1000)
+
+      const [totalBugs, openBugs, statusGroups, appGroups, sourceGroups, resolvedBugs, trendData] = await Promise.all([
+        prisma.bug.count(),
+        prisma.bug.count({ where: { status: 'OPEN' } }),
+        prisma.bug.groupBy({ by: ['status'], _count: { id: true } }),
+        prisma.bug.groupBy({ by: ['appId'], _count: { id: true } }),
+        prisma.bug.groupBy({ by: ['source'], _count: { id: true } }),
+        prisma.bug.findMany({
+          where: { status: { in: ['RESOLVED', 'CLOSED'] } },
+          select: { createdAt: true, updatedAt: true },
+        }),
+        prisma.bug.findMany({
+          where: { createdAt: { gte: rangeStart } },
+          select: { createdAt: true },
+          orderBy: { createdAt: 'asc' },
+        }),
+      ])
+
+      const byStatus = Object.fromEntries(statusGroups.map((g) => [g.status, g._count.id]))
+      const byApp = appGroups.map((g) => ({ appId: g.appId, count: g._count.id }))
+      const bySource = Object.fromEntries(sourceGroups.map((g) => [g.source, g._count.id]))
+
+      const totalResolutionMs = resolvedBugs.reduce((sum, b) => sum + (b.updatedAt.getTime() - b.createdAt.getTime()), 0)
+      const avgResolutionHours = resolvedBugs.length > 0
+        ? Math.round(totalResolutionMs / resolvedBugs.length / (1000 * 60 * 60) * 10) / 10
+        : 0
+
+      const resolvedCount = (byStatus['RESOLVED'] || 0) + (byStatus['CLOSED'] || 0)
+      const resolutionRate = totalBugs > 0 ? Math.round((resolvedCount / totalBugs) * 100) : 0
+
+      const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+      const trendMap: Record<string, number> = {}
+      const keyToLabel: Record<string, string> = {}
+
+      for (let i = 0; i < range; i++) {
+        const d = new Date(now)
+        d.setDate(d.getDate() - i)
+        const key = d.toISOString().slice(0, 10)
+        const label = `${d.getDate()} ${months[d.getMonth()]}`
+        keyToLabel[key] = label
+        trendMap[key] = 0
+      }
+      for (const b of trendData) {
+        const key = b.createdAt.toISOString().slice(0, 10)
+        if (key in trendMap) trendMap[key]++
+      }
+      const trend: { date: string; count: number }[] = []
+      for (let i = 0; i < range; i++) {
+        const d = new Date(now)
+        d.setDate(d.getDate() - i)
+        const key = d.toISOString().slice(0, 10)
+        trend.push({ date: keyToLabel[key] ?? key, count: trendMap[key] ?? 0 })
+      }
+      trend.reverse()
+
+      return {
+        totalBugs,
+        openBugs,
+        byStatus,
+        byApp,
+        bySource,
+        avgResolutionHours,
+        resolutionRate,
+        trend,
+        range,
+      }
+    }, {
+      query: t.Object({
+        range: t.Optional(t.String({ description: 'Rentang hari: 7, 30, atau 90 (default: 30)' })),
+      }),
+      detail: {
+        summary: 'Bug Statistics',
+        description: 'Statistik bug: total, distribusi status, per app, per source, avg resolution time, dan trend.',
+        tags: ['Bugs'],
+      },
+    })
+
     // ─── System Status API ─────────────────────────────
     .get('/api/system/status', async () => {
       try {
@@ -1221,9 +1335,11 @@ export function createApp() {
           include: { user: { select: { id: true, role: true } } },
         })
         if (!session || session.expiresAt < new Date()) { ws.close(4001, 'Unauthorized'); return }
-        const isAdmin = session.user.role === 'DEVELOPER'
+        const role = session.user.role
+        const isAdmin = role === 'DEVELOPER'
+        const canReceiveNotifs = role === 'DEVELOPER' || role === 'ADMIN'
         ;(ws.data as unknown as { userId: string }).userId = session.user.id
-        addConnection(ws as any, session.user.id, isAdmin)
+        addConnection(ws as any, session.user.id, isAdmin, canReceiveNotifs)
       },
       close(ws) { removeConnection(ws as any) },
       message() {},
@@ -1640,6 +1756,86 @@ 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 ?? [] }
+    })
+
+    .get('/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}`, {
+        headers: { 'x-api-key': app.apiKey ?? '' },
+      })
+      const json = await res.json()
+      set.status = res.status
+      return json
+    })
+
+    .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/DashboardLayout.tsx

@@ -1,5 +1,6 @@
 import { APP_CONFIGS } from '@/frontend/config/appMenus'
 import { useLogout, useSession } from '@/frontend/hooks/useAuth'
+import { usePresence } from '@/frontend/hooks/usePresence'
 import React from 'react'
 import {
   ActionIcon,
@@ -24,12 +25,14 @@ import {
   useMantineColorScheme
 } from '@mantine/core'
 import { useDisclosure } from '@mantine/hooks'
+import { notifications } from '@mantine/notifications'
 import { useQuery } from '@tanstack/react-query'
 import { Link, useLocation, useMatches, useNavigate, useParams } from '@tanstack/react-router'
 import {
   TbAlertTriangle,
   TbApps,
   TbArrowLeft,
+  TbBug,
   TbChevronRight,
   TbClock,
   TbDashboard,
@@ -64,6 +67,20 @@ export function DashboardLayout({ children }: DashboardLayoutProps) {
   const user = sessionData?.user
   const logout = useLogout()
 
+  // ─── Real-time bug notifications ─────────────────────
+  usePresence((bug) => {
+    const appLabel = bug.appId ? bug.appId.toUpperCase() : 'Unknown App'
+    notifications.show({
+      id: `new-bug-${bug.id}`,
+      title: `New bug report — ${appLabel}`,
+      message: bug.description.length > 80 ? `${bug.description.slice(0, 80)}…` : bug.description,
+      color: 'red',
+      icon: React.createElement(TbBug, { size: 18 }),
+      autoClose: 8000,
+      withBorder: true,
+    })
+  })
+
   // Redirect USER role to profile (pending approval)
   React.useEffect(() => {
     if (!sessionLoading && user?.role === 'USER') {

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/config/api.ts

@@ -7,15 +7,34 @@ export const API_URLS = {
     `${DESA_PLUS_PROXY}/api/monitoring/info-villages?id=${id}`,
   gridVillages: (id: string) =>
     `${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)}`,
+  graphLogVillages: (id: string, time: string, dateFrom?: string, dateTo?: string) => {
+    const params = new URLSearchParams({ id, time })
+    if (dateFrom) params.set('dateFrom', dateFrom)
+    if (dateTo) params.set('dateTo', dateTo)
+    return `${DESA_PLUS_PROXY}/api/monitoring/graph-log-villages?${params}`
+  },
+  getRecentVillageLogs: (id: string) =>
+    `${DESA_PLUS_PROXY}/api/monitoring/recent-village-logs?id=${id}`,
+  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`,
@@ -38,9 +57,15 @@ export const API_URLS = {
   createOperator: () => `/api/operators`,
   editOperator: (id: string) => `/api/operators/${id}`,
   deleteOperator: (id: string) => `/api/operators/${id}`,
-  getBugs: (page: number, search: string, app: string, status: string) => 
-    `/api/bugs?page=${page}&search=${encodeURIComponent(search)}&app=${app}&status=${status}`,
+  getBugs: (page: number, search: string, app: string, status: string, source?: string, dateFrom?: string, dateTo?: string) => {
+    const params = new URLSearchParams({ page: String(page), search: encodeURIComponent(search), app, status })
+    if (source && source !== 'all') params.set('source', source)
+    if (dateFrom) params.set('dateFrom', dateFrom)
+    if (dateTo) params.set('dateTo', dateTo)
+    return `/api/bugs?${params}`
+  },
   createBug: () => `/api/bugs`,
+  getBugStats: (range: 7 | 30 | 90 = 30) => `/api/bugs/stats?range=${range}`,
   uploadImage: () => `/api/upload/image`,
   updateBugStatus: (id: string) => `/api/bugs/${id}/status`,
   updateBugFeedback: (id: string) => `/api/bugs/${id}/feedback`,

src/frontend/hooks/usePresence.ts

@@ -1,11 +1,22 @@
 import { useEffect, useRef, useState } from 'react'
 import { useSession } from './useAuth'
 
-export function usePresence() {
+export interface NewBugPayload {
+  id: string
+  description: string
+  appId: string | null
+  source: string
+  affectedVersion: string
+  createdAt: string
+}
+
+export function usePresence(onNewBug?: (bug: NewBugPayload) => void) {
   const { data } = useSession()
   const [onlineUserIds, setOnlineUserIds] = useState<string[]>([])
   const wsRef = useRef<WebSocket | null>(null)
   const reconnectTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+  const onNewBugRef = useRef(onNewBug)
+  onNewBugRef.current = onNewBug
 
   useEffect(() => {
     if (!data?.user) return
@@ -18,6 +29,7 @@ export function usePresence() {
       ws.onmessage = (e) => {
         const msg = JSON.parse(e.data)
         if (msg.type === 'presence') setOnlineUserIds(msg.online)
+        if (msg.type === 'new_bug') onNewBugRef.current?.(msg.bug)
       }
       ws.onclose = () => {
         wsRef.current = null

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,8 @@ import {
   SegmentedControl,
   SimpleGrid,
   Stack,
+  Switch,
+  Table,
   Text,
   Textarea,
   TextInput,
@@ -17,8 +20,10 @@ import {
   Title,
 } from '@mantine/core'
 import { useDisclosure } from '@mantine/hooks'
+import { DatePickerInput, type DatesRangeValue } from '@mantine/dates'
 import { notifications } from '@mantine/notifications'
 import { createFileRoute, useNavigate, useParams } from '@tanstack/react-router'
+import dayjs from 'dayjs'
 import { useState } from 'react'
 import {
   TbArrowLeft,
@@ -26,11 +31,13 @@ import {
   TbCalendar,
   TbCalendarEvent,
   TbChartBar,
+  TbClock,
   TbEdit,
   TbHome2,
   TbLayoutKanban,
   TbMapPin,
   TbPower,
+  TbTestPipe,
   TbUser,
   TbUsers,
   TbUsersGroup,
@@ -62,11 +69,17 @@ type ChartPeriod = 'daily' | 'monthly' | 'yearly'
 
 function ActivityChart({ villageId }: { villageId: string }) {
   const [period, setPeriod] = useState<ChartPeriod>('daily')
+  const [dateRange, setDateRange] = useState<DatesRangeValue>([null, null])
 
-  const { data: response, isLoading } = useSWR(
-    API_URLS.graphLogVillages(villageId, period),
-    fetcher
-  )
+  const dateFrom = dateRange[0] ? dayjs(dateRange[0]).format('YYYY-MM-DD') : undefined
+  const dateTo = dateRange[1] ? dayjs(dateRange[1]).format('YYYY-MM-DD') : undefined
+  const hasCustomRange = !!(dateFrom && dateTo)
+
+  const apiUrl = hasCustomRange
+    ? API_URLS.graphLogVillages(villageId, period, dateFrom, dateTo)
+    : API_URLS.graphLogVillages(villageId, period)
+
+  const { data: response, isLoading } = useSWR(apiUrl, fetcher)
 
   const labels: Record<ChartPeriod, string> = {
     daily: 'Daily (last 14 days)',
@@ -76,7 +89,6 @@ function ActivityChart({ villageId }: { villageId: string }) {
 
   const rawData: any[] = Array.isArray(response?.data) ? response.data : []
 
-  // Normalize: map any field names from external API → { label, activity }
   const data = rawData.map((item) => {
     const label = item.label
     const activity = item.aktivitas
@@ -92,21 +104,37 @@ function ActivityChart({ villageId }: { villageId: string }) {
           </ThemeIcon>
           <Stack gap={0}>
             <Text fw={700} size="sm">Village Activity Log</Text>
-            <Text size="xs" c="dimmed">{labels[period]}</Text>
+            <Text size="xs" c="dimmed">
+              {hasCustomRange ? `${dateFrom} — ${dateTo}` : labels[period]}
+            </Text>
           </Stack>
         </Group>
 
-        <SegmentedControl
-          value={period}
-          onChange={(v) => setPeriod(v as ChartPeriod)}
-          size="xs"
-          radius="md"
-          data={[
-            { value: 'daily', label: 'Daily' },
-            { value: 'monthly', label: 'Monthly' },
-            { value: 'yearly', label: 'Yearly' },
-          ]}
-        />
+        <Group gap="sm" wrap="wrap">
+          <DatePickerInput
+            type="range"
+            placeholder="Pick date range"
+            size="xs"
+            radius="md"
+            value={dateRange}
+            onChange={setDateRange}
+            clearable
+            w={200}
+          />
+          {!hasCustomRange && (
+            <SegmentedControl
+              value={period}
+              onChange={(v) => setPeriod(v as ChartPeriod)}
+              size="xs"
+              radius="md"
+              data={[
+                { value: 'daily', label: 'Daily' },
+                { value: 'monthly', label: 'Monthly' },
+                { value: 'yearly', label: 'Yearly' },
+              ]}
+            />
+          )}
+        </Group>
       </Group>
 
       {isLoading ? (
@@ -120,16 +148,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))',
+              },
+            },
           }}
         />
       )}
@@ -137,6 +193,64 @@ function ActivityChart({ villageId }: { villageId: string }) {
   )
 }
 
+// ── Recent Activity Logs ──────────────────────────────────────────────────────
+
+function RecentVillageLogs({ villageId }: { villageId: string }) {
+  const { data: response, isLoading } = useSWR(API_URLS.getRecentVillageLogs(villageId), fetcher)
+  const logs: any[] = Array.isArray(response?.data) ? response.data : []
+
+  return (
+    <Paper withBorder radius="xl" p="lg">
+      <Group gap="xs" mb="md">
+        <ThemeIcon size={28} radius="md" variant="light" color="teal">
+          <TbClock size={14} />
+        </ThemeIcon>
+        <Stack gap={0}>
+          <Text fw={700} size="sm">Recent Activity</Text>
+          <Text size="xs" c="dimmed">Latest user actions in this village</Text>
+        </Stack>
+      </Group>
+
+      {isLoading ? (
+        <Stack h={120} align="center" justify="center">
+          <Loader type="dots" />
+        </Stack>
+      ) : logs.length === 0 ? (
+        <Text size="sm" c="dimmed" ta="center" py="md">No recent activity.</Text>
+      ) : (
+        <Table verticalSpacing="xs" className="data-table">
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>Time</Table.Th>
+              <Table.Th>User</Table.Th>
+              <Table.Th>Action</Table.Th>
+              <Table.Th>Description</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
+            {logs.map((log: any, i: number) => (
+              <Table.Tr key={i}>
+                <Table.Td>
+                  <Text size="xs">{dayjs(log.timestamp).format('D MMM YYYY, HH:mm')}</Text>
+                </Table.Td>
+                <Table.Td>
+                  <Text size="sm" fw={500}>{log.userName || 'Unknown'}</Text>
+                </Table.Td>
+                <Table.Td>
+                  <Text size="xs">{log.action || '-'}</Text>
+                </Table.Td>
+                <Table.Td>
+                  <Text size="xs" c="dimmed" lineClamp={1}>{log.desc || '-'}</Text>
+                </Table.Td>
+              </Table.Tr>
+            ))}
+          </Table.Tbody>
+        </Table>
+      )}
+    </Paper>
+  )
+}
+
 // ── Main Page ─────────────────────────────────────────────────────────────────
 
 function VillageDetailPage() {
@@ -153,7 +267,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 +275,8 @@ function VillageDetailPage() {
   const openEdit = () => {
     setEditForm({
       name: village?.name || '',
-      desc: village?.desc || ''
+      desc: village?.desc || '',
+      isDummy: village?.isDummy ?? false,
     })
     openEditModal()
   }
@@ -188,7 +303,8 @@ function VillageDetailPage() {
         body: JSON.stringify({
           id: village.id,
           name: editForm.name,
-          desc: editForm.desc
+          desc: editForm.desc,
+          isDummy: editForm.isDummy,
         })
       })
 
@@ -361,7 +477,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)" />
@@ -428,21 +557,22 @@ function VillageDetailPage() {
         ))}
       </SimpleGrid>
 
-      {/* ── Chart + Info Panels ── */}
+      {/* ── Activity Chart ── */}
+      <ActivityChart villageId={villageId} />
+
+      {/* ── Recent Logs + System Info ── */}
       <Box
         style={{
           display: 'grid',
-          gridTemplateColumns: '3fr 1fr',
+          gridTemplateColumns: '2fr 1fr',
           gap: '1rem',
           alignItems: 'start',
         }}
       >
-        {/* Left (3/4): Activity Chart */}
         <Box style={{ minWidth: 0 }}>
-          <ActivityChart villageId={villageId} />
+          <RecentVillageLogs villageId={villageId} />
         </Box>
 
-        {/* Right (1/4): Informasi Sistem */}
         <Paper withBorder radius="xl" p="lg">
           <Group gap="xs" mb="md">
             <ThemeIcon size={28} radius="md" variant="light" color="teal">
@@ -526,6 +656,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/bug-reports.tsx

@@ -1,5 +1,7 @@
 import { DashboardLayout } from '@/frontend/components/DashboardLayout'
+import { SummaryCard } from '@/frontend/components/SummaryCard'
 import { API_URLS } from '@/frontend/config/api'
+import { AreaChart, BarChart } from '@mantine/charts'
 import {
   Accordion,
   Avatar,
@@ -27,17 +29,20 @@ import {
   Title,
   Tooltip,
 } from '@mantine/core'
-import { useDisclosure } from '@mantine/hooks'
+import { useDebouncedValue, useDisclosure } from '@mantine/hooks'
+import { DatePickerInput, type DatesRangeValue } from '@mantine/dates'
 import { notifications } from '@mantine/notifications'
 import { useQuery } from '@tanstack/react-query'
 import { createFileRoute } from '@tanstack/react-router'
 import dayjs from 'dayjs'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import {
   TbAlertTriangle,
   TbBug,
+  TbChartBar,
   TbCircleCheck,
   TbCircleX,
+  TbClock,
   TbDeviceDesktop,
   TbDeviceMobile,
   TbFilter,
@@ -45,7 +50,9 @@ import {
   TbPhoto,
   TbPlus,
   TbSearch,
+  TbTrendingUp,
 } from 'react-icons/tb'
+import useSWR from 'swr'
 
 export const Route = createFileRoute('/bug-reports')({
   component: ListErrorsPage,
@@ -71,20 +78,40 @@ const STATUS_LABEL: Record<string, string> = {
 function ListErrorsPage() {
   const [page, setPage] = useState(1)
   const [search, setSearch] = useState('')
+  const [searchQuery, setSearchQuery] = useState('')
   const [app, setApp] = useState('all')
   const [status, setStatus] = useState('all')
+  const [source, setSource] = useState('all')
+  const [dateRange, setDateRange] = useState<DatesRangeValue>([null, null])
+  const [bugRange, setBugRange] = useState<7 | 30 | 90>(7)
+
+  const [debouncedSearch] = useDebouncedValue(search, 400)
+
+  useEffect(() => {
+    if (debouncedSearch.length >= 3 || debouncedSearch.length === 0) {
+      setSearchQuery(debouncedSearch)
+      setPage(1)
+    }
+  }, [debouncedSearch])
+
+  useEffect(() => { setPage(1) }, [app, status, source, dateRange])
 
   const [showLogs, setShowLogs] = useState<Record<string, boolean>>({})
   const [showStackTrace, setShowStackTrace] = useState<Record<string, boolean>>({})
 
+  const dateFrom = dateRange[0] ? dayjs(dateRange[0]).format('YYYY-MM-DD') : undefined
+  const dateTo = dateRange[1] ? dayjs(dateRange[1]).format('YYYY-MM-DD') : undefined
+
   const toggleLogs = (bugId: string) => setShowLogs((prev) => ({ ...prev, [bugId]: !prev[bugId] }))
   const toggleStackTrace = (bugId: string) => setShowStackTrace((prev) => ({ ...prev, [bugId]: !prev[bugId] }))
 
   const { data, isLoading, refetch } = useQuery({
-    queryKey: ['bugs', { page, search, app, status }],
-    queryFn: () => fetch(API_URLS.getBugs(page, search, app, status)).then((r) => r.json()),
+    queryKey: ['bugs', { page, searchQuery, app, status, source, dateFrom, dateTo }],
+    queryFn: () => fetch(API_URLS.getBugs(page, searchQuery, app, status, source, dateFrom, dateTo)).then((r) => r.json()),
   })
 
+  const { data: bugStats } = useSWR(API_URLS.getBugStats(bugRange), (url: string) => fetch(url).then((r) => r.json()))
+
   const { data: appsList } = useQuery({
     queryKey: ['apps-list'],
     queryFn: () => fetch('/api/apps').then((r) => r.json()),
@@ -229,6 +256,177 @@ function ListErrorsPage() {
             </Button>
           </Group>
 
+          {/* Bug Statistics Section */}
+          {bugStats && (
+            <SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }} spacing="md">
+              <SummaryCard
+                title="Total Bugs"
+                value={bugStats.totalBugs?.toLocaleString() ?? '0'}
+                icon={TbBug}
+                color="brand-blue"
+              />
+              <SummaryCard
+                title="Open Bugs"
+                value={bugStats.openBugs?.toLocaleString() ?? '0'}
+                icon={TbAlertTriangle}
+                color="red"
+                isError={bugStats.openBugs > 0}
+              />
+              <SummaryCard
+                title="Avg Resolution Time"
+                value={`${bugStats.avgResolutionHours ?? 0}h`}
+                icon={TbClock}
+                color="orange"
+              />
+              <SummaryCard
+                title="Resolution Rate"
+                value={`${bugStats.resolutionRate ?? 0}%`}
+                icon={TbTrendingUp}
+                color="teal"
+              />
+            </SimpleGrid>
+          )}
+
+          {bugStats && (
+            <SimpleGrid cols={{ base: 1, lg: 2 }} spacing="md">
+              <Paper withBorder radius="2xl" className="glass" p="md">
+                <Group gap="xs" mb="md">
+                  <ThemeIcon size={28} radius="md" variant="light" color="brand-blue">
+                    <TbChartBar size={14} />
+                  </ThemeIcon>
+                  <Stack gap={0}>
+                    <Text fw={700} size="sm">Bugs per Application</Text>
+                  </Stack>
+                </Group>
+                <BarChart
+                  h={220}
+                  data={(bugStats.byApp || []).map((item: { appId: string; count: number }) => ({
+                    ...item,
+                    appId: item.appId.split('-').map((w: string) => w.charAt(0).toUpperCase() + w.slice(1)).join(' '),
+                  }))}
+                  dataKey="appId"
+                  series={[{ name: 'count', color: 'blue.6' }]}
+                  withTooltip
+                  tickLine="none"
+                  gridAxis="x"
+                  barProps={{
+                    radius: [8, 8, 0, 0],
+                    fill: 'url(#bugBarGradient)',
+                  }}
+                  xAxisProps={{
+                    tick: { fontSize: 12, fill: '#909296' },
+                  }}
+                  tooltipProps={{
+                    content: ({ active, payload }: 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' }}>
+                            {payload[0]?.payload?.appId}
+                          </div>
+                          <div style={{ fontSize: '11px', color: '#2563EB' }}>
+                            Bugs: <span style={{ fontWeight: 700 }}>{payload[0]?.value}</span>
+                          </div>
+                        </div>
+                      )
+                    },
+                  }}
+                >
+                  <defs>
+                    <linearGradient id="bugBarGradient" x1="0" y1="0" x2="0" y2="1">
+                      <stop offset="0%" stopColor="#2563EB" stopOpacity={1} />
+                      <stop offset="100%" stopColor="#7C3AED" stopOpacity={0.8} />
+                    </linearGradient>
+                  </defs>
+                </BarChart>
+              </Paper>
+              <Paper withBorder radius="2xl" className="glass" p="md">
+                <Group justify="space-between" mb="md" wrap="wrap" gap="sm">
+                  <Group gap="xs">
+                    <ThemeIcon size={28} radius="md" variant="light" color="violet">
+                      <TbTrendingUp size={14} />
+                    </ThemeIcon>
+                    <Stack gap={0}>
+                      <Text fw={700} size="sm">Bug Trend</Text>
+                      <Text size="xs" c="dimmed">Last {bugRange} days</Text>
+                    </Stack>
+                  </Group>
+                  <Group gap={4}>
+                    {([7, 30, 90] as const).map((r) => (
+                      <Button
+                        key={r}
+                        size="compact-xs"
+                        variant={bugRange === r ? 'filled' : 'subtle'}
+                        color="violet"
+                        radius="md"
+                        onClick={() => setBugRange(r)}
+                      >
+                        {r === 7 ? '7D' : r === 30 ? '1M' : '3M'}
+                      </Button>
+                    ))}
+                  </Group>
+                </Group>
+                <AreaChart
+                  h={220}
+                  data={bugStats.trend || []}
+                  dataKey="date"
+                  series={[{ name: 'count', color: '#7C3AED' }]}
+                  curveType="monotone"
+                  withTooltip
+                  tickLine="none"
+                  gridAxis="x"
+                  fillOpacity={0.3}
+                  xAxisProps={{
+                    interval: bugRange === 7 ? 0 : bugRange === 30 ? 4 : 9,
+                    tick: { fontSize: 10, fill: '#909296' },
+                    angle: bugRange === 7 ? 0 : -45,
+                    textAnchor: 'end',
+                    height: bugRange === 7 ? 30 : 60,
+                  }}
+                  tooltipProps={{
+                    content: ({ active, payload }: 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' }}>
+                            {payload[0]?.payload?.date}
+                          </div>
+                          <div style={{ fontSize: '11px', color: '#7C3AED' }}>
+                            Bugs: <span style={{ fontWeight: 700 }}>{payload[0]?.value}</span>
+                          </div>
+                        </div>
+                      )
+                    },
+                  }}
+                  styles={{
+                    root: {
+                      '.recharts-area-curve': {
+                        strokeWidth: 2.5,
+                        filter: 'drop-shadow(0 3px 6px rgba(124, 58, 237, 0.3))',
+                      },
+                    },
+                  }}
+                />
+              </Paper>
+            </SimpleGrid>
+          )}
+
           {/* Image Preview Modal */}
           <Modal
             opened={!!previewImage}
@@ -411,7 +609,7 @@ function ListErrorsPage() {
           </Modal>
 
           <Paper withBorder radius="2xl" className="glass" p="md">
-            <SimpleGrid cols={{ base: 1, sm: 4 }} mb="lg">
+            <SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} mb="sm">
               <TextInput
                 label="Search"
                 placeholder="Description, device, OS..."
@@ -444,12 +642,35 @@ function ListErrorsPage() {
                 onChange={(val) => setStatus(val || 'all')}
                 radius="md"
               />
+              <Select
+                label="Source"
+                size="sm"
+                data={[
+                  { value: 'all', label: 'All Sources' },
+                  { value: 'QC', label: 'QC' },
+                  { value: 'SYSTEM', label: 'System' },
+                  { value: 'USER', label: 'User' },
+                ]}
+                value={source}
+                onChange={(val) => setSource(val || 'all')}
+                radius="md"
+              />
+              <DatePickerInput
+                type="range"
+                label="Date Range"
+                placeholder="Pick date range"
+                size="sm"
+                radius="md"
+                value={dateRange}
+                onChange={setDateRange}
+                clearable
+              />
               <Stack justify="flex-end">
                 <Button
                   variant="filled"
                   color="violet"
                   size="sm"
-                  onClick={() => { setSearch(''); setApp('all'); setStatus('all') }}
+                  onClick={() => { setSearch(''); setApp('all'); setStatus('all'); setSource('all'); setDateRange([null, null]) }}
                 >
                   Reset Filters
                 </Button>

src/frontend/routes/dev.tsx

@@ -8,7 +8,9 @@ import {
   Button,
   Card,
   Center,
+  CopyButton,
   Container,
+  Divider,
   Group,
   Loader,
   Menu,
@@ -53,11 +55,14 @@ import {
   TbApps,
   TbBug,
   TbChevronRight,
+  TbCheck,
   TbCopy,
   TbCircleFilled,
   TbCode,
   TbDatabase,
   TbDots,
+  TbEye,
+  TbEyeOff,
   TbFileText,
   TbKey,
   TbLayoutDashboard,
@@ -77,7 +82,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 +122,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 +207,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 +282,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 +1478,8 @@ interface AppEntry {
   id: string
   name: string
   urlApi: string | null
+  apiKey: string
+  clientApiKey: string
   status: string
   active: boolean
   hasClientApiKey: boolean
@@ -1496,10 +1507,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 +1582,7 @@ function SettingsPanel() {
       qc.invalidateQueries({ queryKey: ['apps'] })
       setGeneratedKey(res.clientApiKey)
       setKeyCopied(false)
+      setGeneratedKeyVisible(false)
       openKey()
     },
   })
@@ -1588,7 +1614,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 +1647,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 +1728,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 +1752,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 +1783,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 +1816,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 [copyingId, setCopyingId] = useState<string | null>(null)
+  const [copiedId, setCopiedId] = useState<string | null>(null)
+
+  const copyFullKey = async (id: string) => {
+    setCopyingId(id)
+    try {
+      const res = await fetch(`/api/admin/api-keys/${id}`, { credentials: 'include' })
+      const json = await res.json()
+      const fullKey = json.data?.key
+      if (fullKey) {
+        await navigator.clipboard.writeText(fullKey)
+        setCopiedId(id)
+        setTimeout(() => setCopiedId(null), 2000)
+      }
+    } finally {
+      setCopyingId(null)
+    }
+  }
+
+  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">
+                        {k.key}
+                      </Text>
+                      <Tooltip label={copiedId === k.id ? 'Tersalin!' : 'Salin full key'}>
+                        <ActionIcon
+                          variant="subtle"
+                          size="xs"
+                          color={copiedId === k.id ? 'green' : 'gray'}
+                          loading={copyingId === k.id}
+                          onClick={() => copyFullKey(k.id)}
+                        >
+                          {copiedId === k.id ? <TbCheck size={12} /> : <TbCopy size={12} />}
+                        </ActionIcon>
+                      </Tooltip>
+                    </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,6 +1,7 @@
 import { Button, Box, Center, Stack, Text, Title } from '@mantine/core'
 import { Link, createFileRoute } from '@tanstack/react-router'
 import { TbLogin } from 'react-icons/tb'
+import logoUrl from '../../logo.svg'
 
 export const Route = createFileRoute('/')({
   component: HomePage,
@@ -32,7 +33,7 @@ function HomePage() {
       <Center mih="100vh" style={{ position: 'relative', zIndex: 1 }}>
         <Stack align="center" gap="xl">
           <img
-            src="/src/logo.svg"
+            src={logoUrl}
             width={72}
             height={72}
             alt="logo"

src/frontend/routes/login.tsx

@@ -1,4 +1,5 @@
 import { useLogin } from '@/frontend/hooks/useAuth'
+import logoUrl from '../../logo.svg'
 import {
   Alert,
   Box,
@@ -102,7 +103,7 @@ function LoginPage() {
               {/* header */}
               <Stack gap={8} align="center" mb={4}>
                 <img
-                  src="/src/logo.svg"
+                  src={logoUrl}
                   width={56}
                   height={56}
                   alt="logo"

src/lib/presence.ts

@@ -2,6 +2,7 @@ import type { ServerWebSocket } from 'bun'
 
 const connections = new Map<string, Set<ServerWebSocket<{ userId: string }>>>()
 const adminSubs = new Set<ServerWebSocket<{ userId: string }>>()
+const notifSubs = new Set<ServerWebSocket<{ userId: string }>>()
 
 export function getOnlineUserIds(): string[] {
   return Array.from(connections.keys())
@@ -13,7 +14,12 @@ function broadcast() {
   for (const ws of adminSubs) ws.send(msg)
 }
 
-export function addConnection(ws: ServerWebSocket<{ userId: string }>, userId: string, isAdmin: boolean) {
+export function addConnection(
+  ws: ServerWebSocket<{ userId: string }>,
+  userId: string,
+  isAdmin: boolean,
+  canReceiveNotifs: boolean,
+) {
   let set = connections.get(userId)
   if (!set) {
     set = new Set()
@@ -24,6 +30,7 @@ export function addConnection(ws: ServerWebSocket<{ userId: string }>, userId: s
     adminSubs.add(ws)
     ws.send(JSON.stringify({ type: 'presence', online: getOnlineUserIds() }))
   }
+  if (canReceiveNotifs) notifSubs.add(ws)
   broadcast()
 }
 
@@ -32,6 +39,11 @@ export function broadcastToAdmins(message: object) {
   for (const ws of adminSubs) ws.send(msg)
 }
 
+export function broadcastNotification(message: object) {
+  const msg = JSON.stringify(message)
+  for (const ws of notifSubs) ws.send(msg)
+}
+
 export function removeConnection(ws: ServerWebSocket<{ userId: string }>) {
   const userId = ws.data.userId
   const set = connections.get(userId)
@@ -40,5 +52,6 @@ export function removeConnection(ws: ServerWebSocket<{ userId: string }>) {
     if (set.size === 0) connections.delete(userId)
   }
   adminSubs.delete(ws)
+  notifSubs.delete(ws)
   broadcast()
 }

src/lib/seafile.ts

@@ -1,252 +0,0 @@
-#!/usr/bin/env bun
-import { promises as fs } from 'fs';
-import * as os from 'os';
-import * as path from 'path';
-
-// --- Constants ---
-const CONFIG_FILE = path.join(os.homedir(), '.note.conf');
-
-// --- Types ---
-interface Config {
-   TOKEN?: string;
-   REPO?: string;
-   URL?: string;
-}
-
-export const defaultConfigSF: Config = {
-   TOKEN: process.env.SF_TOKEN,
-   REPO: process.env.SF_REPO,
-   URL: process.env.SF_URL,
-}
-
-export async function loadConfig(): Promise<Config> {
-   if (!(await fs.stat(CONFIG_FILE)).isFile()) {
-      console.error(`⚠️  Config file not found at ${CONFIG_FILE}`);
-      console.error('Run: bun note.ts config   to create/edit it.');
-      process.exit(1);
-   }
-
-   const configContent = await fs.readFile(CONFIG_FILE, 'utf8');
-   const config: Config = {};
-
-   configContent.split('\n').forEach((line) => {
-      const trimmed = line.trim();
-      if (!trimmed || trimmed.startsWith('#')) return;
-
-      const [key, ...valueParts] = trimmed.split('=');
-      if (key && valueParts.length > 0) {
-         let value = valueParts.join('=').trim();
-         if (
-            (value.startsWith('"') && value.endsWith('"')) ||
-            (value.startsWith("'") && value.endsWith("'"))
-         ) {
-            value = value.slice(1, -1);
-         }
-         config[key as keyof Config] = value;
-      }
-   });
-
-   if (!config.TOKEN || !config.REPO || !config.URL) {
-      console.error(`❌ Config invalid. Please set TOKEN, REPO, and URL inside ${CONFIG_FILE}`);
-      process.exit(1);
-   }
-   return config;
-}
-
-// --- HTTP Helpers ---
-export async function fetchWithAuth(config: Config, url: string, options: RequestInit = {}): Promise<Response> {
-   const headers = {
-      Authorization: `Token ${config.TOKEN}`,
-      ...options.headers,
-   };
-
-   const response = await fetch(url, { ...options, headers });
-   if (!response.ok) {
-      console.error(`❌ Request failed: ${response.status} ${response.statusText}`);
-      console.error(`🔍 URL: ${url}`);
-      console.error(`🔍 Headers:`, headers);
-
-      try {
-         const errorText = await response.text();
-         console.error(`🔍 Response body: ${errorText}`);
-      } catch {
-         console.error('🔍 Could not read response body');
-      }
-   }
-   return response;
-}
-
-// --- Commands ---
-export async function testConnection(config: Config): Promise<string> {
-   try {
-      const response = await fetchWithAuth(config, `${config.URL}/ping/`);
-      return `✅ API connection successful: ${await response.text()}`
-   } catch {
-      // return '⚠️  API ping failed, trying repo access...'
-      try {
-         await fetchWithAuth(config, `${config.URL}/${config.REPO}/`);
-         return `✅ Repo access successful`
-      } catch {
-         return '❌ Both API ping and repo access failed'
-      }
-   }
-}
-
-export async function listFiles(config: Config): Promise<{ name: string }[]> {
-   const url = `${config.URL}/${config.REPO}/dir/?p=/`;
-   const response = await fetchWithAuth(config, url);
-
-   try {
-      const files = (await response.json()) as { name: string }[];
-      return files
-   } catch {
-      console.error('❌ Failed to parse response');
-      process.exit(1);
-   }
-}
-
-export async function catFile(config: Config, folder: string, fileName: string): Promise<ArrayBuffer> {
-   const downloadUrlResponse = await fetchWithAuth(config, `${config.URL}/${config.REPO}/file/?p=/${folder}/${fileName}`);
-   const downloadUrl = (await downloadUrlResponse.text()).replace(/"/g, '');
-
-   // Download file sebagai binary, BUKAN text
-   const fileResponse = await fetchWithAuth(config, downloadUrl);
-   const buffer = await fileResponse.arrayBuffer();
-
-   return buffer;
-}
-
-export async function uploadFile(config: Config, file: File, folder: string): Promise<string> {
-   const remoteName = path.basename(file.name);
-
-   // 1. Dapatkan upload link (pakai Authorization)
-   const uploadUrlResponse = await fetchWithAuth(
-      config,
-      `${config.URL}/${config.REPO}/upload-link/`
-   );
-   const uploadUrl = (await uploadUrlResponse.text()).replace(/"/g, "");
-
-   // 2. Siapkan form-data
-   const formData = new FormData();
-   formData.append("parent_dir", "/");
-   formData.append("relative_path", folder); // tanpa slash di akhir
-   formData.append("file", file, remoteName); // file langsung, jangan pakai Blob
-
-   // 3. Upload file TANPA Authorization header, token di query param
-   const res = await fetch(`${uploadUrl}?token=${config.TOKEN}`, {
-      method: "POST",
-      body: formData,
-   });
-
-   const text = await res.text();
-
-   if (!res.ok) return 'gagal'
-   return `✅ Uploaded ${file.name} successfully`;
-}
-
-export async function uploadFileBase64(config: Config, base64File: { name: string; data: string; }): Promise<string> {
-   const remoteName = path.basename(base64File.name);
-
-   // 1. Dapatkan upload link (pakai Authorization)
-   const uploadUrlResponse = await fetchWithAuth(
-      config,
-      `${config.URL}/${config.REPO}/upload-link/`
-   );
-   const uploadUrl = (await uploadUrlResponse.text()).replace(/"/g, "");
-
-   // 2. Konversi base64 ke Blob
-   const binary = Buffer.from(base64File.data, "base64");
-   const blob = new Blob([binary]);
-
-   // 3. Siapkan form-data
-   const formData = new FormData();
-   formData.append("parent_dir", "/");
-   formData.append("relative_path", "syarat-dokumen"); // tanpa slash di akhir
-   formData.append("file", blob, remoteName);
-
-   // 4. Upload file TANPA Authorization header, token di query param
-   const res = await fetch(`${uploadUrl}?token=${config.TOKEN}`, {
-      method: "POST",
-      body: formData,
-   });
-
-   const text = await res.text();
-
-   if (!res.ok) throw new Error(`Upload failed: ${text}`);
-   return `✅ Uploaded ${base64File.name} successfully`;
-}
-
-export async function uploadFileToFolder(config: Config, base64File: { name: string; data: string; }, folder: 'syarat-dokumen' | 'pengaduan'): Promise<string> {
-   const remoteName = path.basename(base64File.name);
-
-   // 1. Dapatkan upload link (pakai Authorization)
-   const uploadUrlResponse = await fetchWithAuth(
-      config,
-      `${config.URL}/${config.REPO}/upload-link/`
-   );
-   const uploadUrl = (await uploadUrlResponse.text()).replace(/"/g, "");
-
-   // 2. Konversi base64 ke Blob
-   const binary = Buffer.from(base64File.data, "base64");
-   const blob = new Blob([binary]);
-
-   // 3. Siapkan form-data
-   const formData = new FormData();
-   formData.append("parent_dir", "/");
-   formData.append("relative_path", folder); // tanpa slash di akhir
-   formData.append("file", blob, remoteName);
-
-   // 4. Upload file TANPA Authorization header, token di query param
-   const res = await fetch(`${uploadUrl}?token=${config.TOKEN}`, {
-      method: "POST",
-      body: formData,
-   });
-
-   const text = await res.text();
-
-   if (!res.ok) throw new Error(`Upload failed: ${text}`);
-   return `✅ Uploaded ${base64File.name} successfully`;
-}
-
-
-export async function removeFile(config: Config, fileName: string, folder: string): Promise<string> {
-   const res = await fetchWithAuth(config, `${config.URL}/${config.REPO}/file/?p=/${folder}/${fileName}`, { method: 'DELETE' });
-
-   if (!res.ok) return 'gagal menghapus file';
-   return `🗑️  Removed ${fileName}`
-}
-
-export async function moveFile(config: Config, oldName: string, newName: string): Promise<string> {
-   const url = `${config.URL}/${config.REPO}/file/?p=/${oldName}`;
-   const formData = new FormData();
-   formData.append('operation', 'rename');
-   formData.append('newname', newName);
-
-   await fetchWithAuth(config, url, { method: 'POST', body: formData });
-   return `✏️  Renamed ${oldName} → ${newName}`
-}
-
-export async function downloadFile(config: Config, fileName: string, folder: string, localFile?: string): Promise<string> {
-   const localName = localFile || fileName;
-   // 🔹 gabungkan path folder + file
-   const filePath = `/${folder}/${fileName}`.replace(/\/+/g, "/");
-
-   // 🔹 encode path agar aman (spasi, dll)
-   const params = new URLSearchParams({
-      p: filePath,
-   });
-
-   const downloadUrlResponse = await fetchWithAuth(config, `${config.URL}/${config.REPO}/file/?${params.toString()}`);
-   if (!downloadUrlResponse.ok)
-      return 'gagal'
-   const downloadUrl = (await downloadUrlResponse.text()).replace(/"/g, '');
-   const buffer = Buffer.from(await (await fetchWithAuth(config, downloadUrl)).arrayBuffer());
-   await fs.writeFile(localName, buffer);
-   return `⬇️  Downloaded ${fileName} → ${localName}`
-}
-
-export async function getFileLink(config: Config, fileName: string): Promise<string> {
-   const downloadUrlResponse = await fetchWithAuth(config, `${config.URL}/${config.REPO}/file/?p=/${fileName}`);
-   return `🔗 Link for ${fileName}:\n${(await downloadUrlResponse.text()).replace(/"/g, '')}`
-}
-