feat: tambahkan PDF report per desa di halaman detail desa

- Tombol Download PDF di sebelah tombol Edit dan Deactivate - Laporan memuat: header desa (nama, perbekel, status, tanggal), 4 summary card (users, groups, divisions, projects), activity trend 14 hari, peak hours, 10 log aktivitas terakhir, dan tabel inactive users 7 hari terakhir
feat: PDF report lengkap dengan summary, top 5, attention villages, trend, peak hours
2026-05-28 15:49:10 +08:00 · 2026-05-28 15:39:57 +08:00 · 2026-05-28 15:14:54 +08:00 · 2026-05-28 15:06:18 +08:00 · 2026-05-28 14:47:16 +08:00 · 2026-05-28 14:32:56 +08:00
30 changed files with 3066 additions and 933 deletions
--- a/.gitignore
+++ b/.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

--- a/CLAUDE.md
+++ b/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
--- a/bun.lock
+++ b/bun.lock
@@ -22,6 +22,8 @@
        "dayjs": "^1.11.20",
        "elkjs": "^0.9.3",
        "elysia": "^1.4.28",
+        "html2canvas": "^1.4.1",
+        "jspdf": "^4.2.1",
        "minio": "^8.0.7",
        "postcss": "^8.5.8",
        "postcss-preset-mantine": "^1.18.0",
@@ -352,10 +354,16 @@

    "@types/node": ["@types/node@25.5.0", "", { "dependencies": { "undici-types": "~7.18.0" } }, "sha512-jp2P3tQMSxWugkCUKLRPVUpGaL5MVFwF8RDuSRztfwgN1wmqJeMSbKlnEtQqU8UrhTmzEmZdu2I6v2dpp7XIxw=="],

+    "@types/pako": ["@types/pako@2.0.4", "", {}, "sha512-VWDCbrLeVXJM9fihYodcLiIv0ku+AlOa/TQ1SvYOaBuyrSKgEcro95LJyIsJ4vSo6BXIxOKxiJAat04CmST9Fw=="],
+
+    "@types/raf": ["@types/raf@3.4.3", "", {}, "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw=="],
+
    "@types/react": ["@types/react@19.2.14", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w=="],

    "@types/react-dom": ["@types/react-dom@19.2.3", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ=="],

+    "@types/trusted-types": ["@types/trusted-types@2.0.7", "", {}, "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="],
+
    "@types/use-sync-external-store": ["@types/use-sync-external-store@0.0.6", "", {}, "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg=="],

    "@types/yauzl": ["@types/yauzl@2.10.3", "", { "dependencies": { "@types/node": "*" } }, "sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q=="],
@@ -406,6 +414,8 @@

    "bare-url": ["bare-url@2.4.0", "", { "dependencies": { "bare-path": "^3.0.0" } }, "sha512-NSTU5WN+fy/L0DDenfE8SXQna4voXuW0FHM7wH8i3/q9khUSchfPbPezO4zSFMnDGIf9YE+mt/RWhZgNRKRIXA=="],

+    "base64-arraybuffer": ["base64-arraybuffer@1.0.2", "", {}, "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ=="],
+
    "baseline-browser-mapping": ["baseline-browser-mapping@2.10.12", "", { "bin": { "baseline-browser-mapping": "dist/cli.cjs" } }, "sha512-qyq26DxfY4awP2gIRXhhLWfwzwI+N5Nxk6iQi8EFizIaWIjqicQTE4sLnZZVdeKPRcVNoJOkkpfzoIYuvCKaIQ=="],

    "basic-ftp": ["basic-ftp@5.2.0", "", {}, "sha512-VoMINM2rqJwJgfdHq6RiUudKt2BV+FY5ZFezP/ypmwayk68+NzzAQy4XXLlqsGD4MCzq3DrmNFD/uUmBJuGoXw=="],
@@ -438,6 +448,8 @@

    "caniuse-lite": ["caniuse-lite@1.0.30001782", "", {}, "sha512-dZcaJLJeDMh4rELYFw1tvSn1bhZWYFOt468FcbHHxx/Z/dFidd1I6ciyFdi3iwfQCyOjqo9upF6lGQYtMiJWxw=="],

+    "canvg": ["canvg@3.0.11", "", { "dependencies": { "@babel/runtime": "^7.12.5", "@types/raf": "^3.4.0", "core-js": "^3.8.3", "raf": "^3.4.1", "regenerator-runtime": "^0.13.7", "rgbcolor": "^1.0.1", "stackblur-canvas": "^2.0.0", "svg-pathdata": "^6.0.3" } }, "sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA=="],
+
    "chalk": ["chalk@5.6.2", "", {}, "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA=="],

    "chokidar": ["chokidar@3.6.0", "", { "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", "glob-parent": "~5.1.2", "is-binary-path": "~2.1.0", "is-glob": "~4.0.1", "normalize-path": "~3.0.0", "readdirp": "~3.6.0" }, "optionalDependencies": { "fsevents": "~2.3.2" } }, "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw=="],
@@ -472,10 +484,14 @@

    "cookie-signature": ["cookie-signature@1.2.2", "", {}, "sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg=="],

+    "core-js": ["core-js@3.49.0", "", {}, "sha512-es1U2+YTtzpwkxVLwAFdSpaIMyQaq0PBgm3YD1W3Qpsn1NAmO3KSgZfu+oGSWVu6NvLHoHCV/aYcsE5wiB7ALg=="],
+
    "cors": ["cors@2.8.6", "", { "dependencies": { "object-assign": "^4", "vary": "^1" } }, "sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw=="],

    "cross-spawn": ["cross-spawn@7.0.6", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="],

+    "css-line-break": ["css-line-break@2.1.0", "", { "dependencies": { "utrie": "^1.0.2" } }, "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w=="],
+
    "cssesc": ["cssesc@3.0.0", "", { "bin": { "cssesc": "bin/cssesc" } }, "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="],

    "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
@@ -544,6 +560,8 @@

    "dom-helpers": ["dom-helpers@5.2.1", "", { "dependencies": { "@babel/runtime": "^7.8.7", "csstype": "^3.0.2" } }, "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA=="],

+    "dompurify": ["dompurify@3.4.7", "", { "optionalDependencies": { "@types/trusted-types": "^2.0.7" } }, "sha512-2jBxDJY4RR06tQNy4w5FlFH7kfxsQZlufd0sbv+chfHCxeJwrFw2baUDsSwvBISD4K4RDbd0PTfy3uNXsR6siA=="],
+
    "dotenv": ["dotenv@16.6.1", "", {}, "sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow=="],

    "dunder-proto": ["dunder-proto@1.0.1", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.1", "es-errors": "^1.3.0", "gopd": "^1.2.0" } }, "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A=="],
@@ -616,6 +634,8 @@

    "fast-fifo": ["fast-fifo@1.3.2", "", {}, "sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ=="],

+    "fast-png": ["fast-png@6.4.0", "", { "dependencies": { "@types/pako": "^2.0.3", "iobuffer": "^5.3.2", "pako": "^2.1.0" } }, "sha512-kAqZq1TlgBjZcLr5mcN6NP5Rv4V2f22z00c3g8vRrwkcqjerx7BEhPbOnWCPqaHUl2XWQBJQvOT/FQhdMT7X/Q=="],
+
    "fast-uri": ["fast-uri@3.1.0", "", {}, "sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA=="],

    "fast-xml-builder": ["fast-xml-builder@1.1.5", "", { "dependencies": { "path-expression-matcher": "^1.1.3" } }, "sha512-4TJn/8FKLeslLAH3dnohXqE3QSoxkhvaMzepOIZytwJXZO69Bfz0HBdDHzOTOon6G59Zrk6VQ2bEiv1t61rfkA=="],
@@ -626,6 +646,8 @@

    "fdir": ["fdir@6.5.0", "", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg=="],

+    "fflate": ["fflate@0.8.3", "", {}, "sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA=="],
+
    "file-type": ["file-type@22.0.0", "", { "dependencies": { "@tokenizer/inflate": "^0.4.1", "strtok3": "^10.3.5", "token-types": "^6.1.2", "uint8array-extras": "^1.5.0" } }, "sha512-cmBmnYo8Zymabm2+qAP7jTFbKF10bQpYmxoGfuZbRFRcq00BRddJdGNH/P7GA1EMpJy5yQbqa9B7yROb3z8Ziw=="],

    "fill-range": ["fill-range@7.1.1", "", { "dependencies": { "to-regex-range": "^5.0.1" } }, "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg=="],
@@ -674,6 +696,8 @@

    "hookable": ["hookable@5.5.3", "", {}, "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ=="],

+    "html2canvas": ["html2canvas@1.4.1", "", { "dependencies": { "css-line-break": "^2.1.0", "text-segmentation": "^1.0.3" } }, "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA=="],
+
    "http-errors": ["http-errors@2.0.1", "", { "dependencies": { "depd": "~2.0.0", "inherits": "~2.0.4", "setprototypeof": "~1.2.0", "statuses": "~2.0.2", "toidentifier": "~1.0.1" } }, "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ=="],

    "http-proxy-agent": ["http-proxy-agent@7.0.2", "", { "dependencies": { "agent-base": "^7.1.0", "debug": "^4.3.4" } }, "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig=="],
@@ -690,6 +714,8 @@

    "internmap": ["internmap@2.0.3", "", {}, "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg=="],

+    "iobuffer": ["iobuffer@5.4.0", "", {}, "sha512-DRebOWuqDvxunfkNJAlc3IzWIPD5xVxwUNbHr7xKB8E6aLJxIPfNX3CoMJghcFjpv6RWQsrcJbghtEwSPoJqMA=="],
+
    "ip-address": ["ip-address@10.1.0", "", {}, "sha512-XXADHxXmvT9+CRxhXg56LJovE+bmWnEWB78LB83VZTprKTmaC5QfruXocxzTZ2Kl0DNwKuBdlIhjL8LeY8Sf8Q=="],

    "ipaddr.js": ["ipaddr.js@2.3.0", "", {}, "sha512-Zv/pA+ciVFbCSBBjGfaKUya/CcGmUHzTydLMaTwrUUEM2DIEO3iZvueGxmacvmN50fGpGVKeTXpb2LcYQxeVdg=="],
@@ -724,6 +750,8 @@

    "json5": ["json5@2.2.3", "", { "bin": { "json5": "lib/cli.js" } }, "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg=="],

+    "jspdf": ["jspdf@4.2.1", "", { "dependencies": { "@babel/runtime": "^7.28.6", "fast-png": "^6.2.0", "fflate": "^0.8.1" }, "optionalDependencies": { "canvg": "^3.0.11", "core-js": "^3.6.0", "dompurify": "^3.3.1", "html2canvas": "^1.0.0-rc.5" } }, "sha512-YyAXyvnmjTbR4bHQRLzex3CuINCDlQnBqoSYyjJwTP2x9jDLuKDzy7aKUl0hgx3uhcl7xzg32agn5vlie6HIlQ=="],
+
    "lightningcss": ["lightningcss@1.32.0", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.32.0", "lightningcss-darwin-arm64": "1.32.0", "lightningcss-darwin-x64": "1.32.0", "lightningcss-freebsd-x64": "1.32.0", "lightningcss-linux-arm-gnueabihf": "1.32.0", "lightningcss-linux-arm64-gnu": "1.32.0", "lightningcss-linux-arm64-musl": "1.32.0", "lightningcss-linux-x64-gnu": "1.32.0", "lightningcss-linux-x64-musl": "1.32.0", "lightningcss-win32-arm64-msvc": "1.32.0", "lightningcss-win32-x64-msvc": "1.32.0" } }, "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ=="],

    "lightningcss-android-arm64": ["lightningcss-android-arm64@1.32.0", "", { "os": "android", "cpu": "arm64" }, "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg=="],
@@ -802,6 +830,8 @@

    "pac-resolver": ["pac-resolver@7.0.1", "", { "dependencies": { "degenerator": "^5.0.0", "netmask": "^2.0.2" } }, "sha512-5NPgf87AT2STgwa2ntRMr45jTKrYBGkVU36yT0ig/n/GMAa3oPqhZfIQ2kMEimReg0+t9kZViDVZ83qfVUlckg=="],

+    "pako": ["pako@2.1.0", "", {}, "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug=="],
+
    "parseurl": ["parseurl@1.3.3", "", {}, "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="],

    "path-expression-matcher": ["path-expression-matcher@1.5.0", "", {}, "sha512-cbrerZV+6rvdQrrD+iGMcZFEiiSrbv9Tfdkvnusy6y0x0GKBXREFg/Y65GhIfm0tnLntThhzCnfKwp1WRjeCyQ=="],
@@ -816,6 +846,8 @@

    "perfect-debounce": ["perfect-debounce@1.0.0", "", {}, "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA=="],

+    "performance-now": ["performance-now@2.1.0", "", {}, "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="],
+
    "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],

    "picomatch": ["picomatch@4.0.4", "", {}, "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A=="],
@@ -866,6 +898,8 @@

    "query-string": ["query-string@7.1.3", "", { "dependencies": { "decode-uri-component": "^0.2.2", "filter-obj": "^1.1.0", "split-on-first": "^1.0.0", "strict-uri-encode": "^2.0.0" } }, "sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg=="],

+    "raf": ["raf@3.4.1", "", { "dependencies": { "performance-now": "^2.1.0" } }, "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA=="],
+
    "range-parser": ["range-parser@1.2.1", "", {}, "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="],

    "raw-body": ["raw-body@3.0.2", "", { "dependencies": { "bytes": "~3.1.2", "http-errors": "~2.0.1", "iconv-lite": "~0.7.0", "unpipe": "~1.0.0" } }, "sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA=="],
@@ -906,6 +940,8 @@

    "redux-thunk": ["redux-thunk@3.1.0", "", { "peerDependencies": { "redux": "^5.0.0" } }, "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw=="],

+    "regenerator-runtime": ["regenerator-runtime@0.13.11", "", {}, "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="],
+
    "require-directory": ["require-directory@2.1.1", "", {}, "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q=="],

    "require-from-string": ["require-from-string@2.0.2", "", {}, "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw=="],
@@ -914,6 +950,8 @@

    "resolve-pkg-maps": ["resolve-pkg-maps@1.0.0", "", {}, "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw=="],

+    "rgbcolor": ["rgbcolor@1.0.1", "", {}, "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw=="],
+
    "rolldown": ["rolldown@1.0.0-rc.12", "", { "dependencies": { "@oxc-project/types": "=0.122.0", "@rolldown/pluginutils": "1.0.0-rc.12" }, "optionalDependencies": { "@rolldown/binding-android-arm64": "1.0.0-rc.12", "@rolldown/binding-darwin-arm64": "1.0.0-rc.12", "@rolldown/binding-darwin-x64": "1.0.0-rc.12", "@rolldown/binding-freebsd-x64": "1.0.0-rc.12", "@rolldown/binding-linux-arm-gnueabihf": "1.0.0-rc.12", "@rolldown/binding-linux-arm64-gnu": "1.0.0-rc.12", "@rolldown/binding-linux-arm64-musl": "1.0.0-rc.12", "@rolldown/binding-linux-ppc64-gnu": "1.0.0-rc.12", "@rolldown/binding-linux-s390x-gnu": "1.0.0-rc.12", "@rolldown/binding-linux-x64-gnu": "1.0.0-rc.12", "@rolldown/binding-linux-x64-musl": "1.0.0-rc.12", "@rolldown/binding-openharmony-arm64": "1.0.0-rc.12", "@rolldown/binding-wasm32-wasi": "1.0.0-rc.12", "@rolldown/binding-win32-arm64-msvc": "1.0.0-rc.12", "@rolldown/binding-win32-x64-msvc": "1.0.0-rc.12" }, "bin": { "rolldown": "bin/cli.mjs" } }, "sha512-yP4USLIMYrwpPHEFB5JGH1uxhcslv6/hL0OyvTuY+3qlOSJvZ7ntYnoWpehBxufkgN0cvXxppuTu5hHa/zPh+A=="],

    "router": ["router@2.2.0", "", { "dependencies": { "debug": "^4.4.0", "depd": "^2.0.0", "is-promise": "^4.0.0", "parseurl": "^1.3.3", "path-to-regexp": "^8.0.0" } }, "sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ=="],
@@ -962,6 +1000,8 @@

    "split-on-first": ["split-on-first@1.1.0", "", {}, "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw=="],

+    "stackblur-canvas": ["stackblur-canvas@2.7.0", "", {}, "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ=="],
+
    "statuses": ["statuses@2.0.2", "", {}, "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw=="],

    "stream-chain": ["stream-chain@2.2.5", "", {}, "sha512-1TJmBx6aSWqZ4tx7aTpBDXK0/e2hhcNSTV8+CbFJtDjbb+I1mZ8lHit0Grw9GRT+6JbIrrDd8esncgBi8aBXGA=="],
@@ -984,6 +1024,8 @@

    "sugarss": ["sugarss@5.0.1", "", { "peerDependencies": { "postcss": "^8.3.3" } }, "sha512-ctS5RYCBVvPoZAnzIaX5QSShK8ZiZxD5HUqSxlusvEMC+QZQIPCPOIJg6aceFX+K2rf4+SH89eu++h1Zmsr2nw=="],

+    "svg-pathdata": ["svg-pathdata@6.0.3", "", {}, "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw=="],
+
    "swr": ["swr@2.4.1", "", { "dependencies": { "dequal": "^2.0.3", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "react": "^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-2CC6CiKQtEwaEeNiqWTAw9PGykW8SR5zZX8MZk6TeAvEAnVS7Visz8WzphqgtQ8v2xz/4Q5K+j+SeMaKXeeQIA=="],

    "tabbable": ["tabbable@6.4.0", "", {}, "sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg=="],
@@ -996,6 +1038,8 @@

    "text-decoder": ["text-decoder@1.2.7", "", { "dependencies": { "b4a": "^1.6.4" } }, "sha512-vlLytXkeP4xvEq2otHeJfSQIRyWxo/oZGEbXrtEEF9Hnmrdly59sUbzZ/QgyWuLYHctCHxFF4tRQZNQ9k60ExQ=="],

+    "text-segmentation": ["text-segmentation@1.0.3", "", { "dependencies": { "utrie": "^1.0.2" } }, "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw=="],
+
    "through2": ["through2@4.0.2", "", { "dependencies": { "readable-stream": "3" } }, "sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw=="],

    "tiny-invariant": ["tiny-invariant@1.3.3", "", {}, "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="],
@@ -1046,6 +1090,8 @@

    "util-deprecate": ["util-deprecate@1.0.2", "", {}, "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="],

+    "utrie": ["utrie@1.0.2", "", { "dependencies": { "base64-arraybuffer": "^1.0.2" } }, "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw=="],
+
    "vary": ["vary@1.1.2", "", {}, "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg=="],

    "victory-vendor": ["victory-vendor@37.3.6", "", { "dependencies": { "@types/d3-array": "^3.0.3", "@types/d3-ease": "^3.0.0", "@types/d3-interpolate": "^3.0.1", "@types/d3-scale": "^4.0.2", "@types/d3-shape": "^3.1.0", "@types/d3-time": "^3.0.0", "@types/d3-timer": "^3.0.0", "d3-array": "^3.1.6", "d3-ease": "^3.0.1", "d3-interpolate": "^3.0.1", "d3-scale": "^4.0.2", "d3-shape": "^3.1.0", "d3-time": "^3.0.0", "d3-timer": "^3.0.1" } }, "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ=="],
--- a/docs/COMMANDS.md
+++ b/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`
--- a/docs/CONVENTIONS.md
+++ b/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`.
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "bun-react-template",
-  "version": "0.1.3",
+  "version": "0.1.17",
  "private": true,
  "type": "module",
  "scripts": {
@@ -41,6 +41,8 @@
    "dayjs": "^1.11.20",
    "elkjs": "^0.9.3",
    "elysia": "^1.4.28",
+    "html2canvas": "^1.4.1",
+    "jspdf": "^4.2.1",
    "minio": "^8.0.7",
    "postcss": "^8.5.8",
    "postcss-preset-mantine": "^1.18.0",
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -149,6 +149,3 @@ model BugLog {
  @@map("bug_log")
 }

-
-
-
--- a/scripts/mcp-deploy.ts
+++ b/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}` }] }
    }
--- a/src/app.ts
+++ b/src/app.ts
@@ -8,9 +8,12 @@ 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'
+const cookieFlags = isProduction ? '; Secure' : ''
+
 function getPublicOrigin(request: Request): string {
  if (process.env.BUN_PUBLIC_BASE_URL) return process.env.BUN_PUBLIC_BASE_URL.replace(/\/$/, '')
  const url = new URL(request.url)
@@ -127,7 +130,7 @@ export function createApp() {
      })
      const headers = new Headers()
      headers.set('Location', `https://accounts.google.com/o/oauth2/v2/auth?${params}`)
-      headers.set('Set-Cookie', `oauth_state=${state}; Path=/; HttpOnly; SameSite=Lax; Max-Age=600`)
+      headers.set('Set-Cookie', `oauth_state=${state}; Path=/; HttpOnly; SameSite=Lax; Max-Age=600${cookieFlags}`)
      return new Response(null, { status: 302, headers })
    }, {
      detail: {
@@ -212,8 +215,8 @@ export function createApp() {
      const redirectPath = user.role === 'DEVELOPER' ? '/dev' : user.role === 'USER' ? '/profile' : '/dashboard'
      const headers = new Headers()
      headers.append('Location', redirectPath)
-      headers.append('Set-Cookie', `session=${token}; Path=/; HttpOnly; SameSite=Lax; Max-Age=86400`)
-      headers.append('Set-Cookie', 'oauth_state=; Path=/; HttpOnly; Max-Age=0')
+      headers.append('Set-Cookie', `session=${token}; Path=/; HttpOnly; SameSite=Lax; Max-Age=86400${cookieFlags}`)
+      headers.append('Set-Cookie', `oauth_state=; Path=/; HttpOnly; Max-Age=0${cookieFlags}`)
      return new Response(null, { status: 302, headers })
    }, {
      detail: {
@@ -241,7 +244,7 @@ export function createApp() {
      const token = crypto.randomUUID()
      const expiresAt = new Date(Date.now() + 24 * 60 * 60 * 1000) // 24 hours
      await prisma.session.create({ data: { token, userId: user.id, expiresAt } })
-      set.headers['set-cookie'] = `session=${token}; Path=/; HttpOnly; SameSite=Lax; Max-Age=86400`
+      set.headers['set-cookie'] = `session=${token}; Path=/; HttpOnly; SameSite=Lax; Max-Age=86400${cookieFlags}`
      await createSystemLog(user.id, 'LOGIN', 'Logged in successfully')
      return { user: { id: user.id, name: user.name, email: user.email, role: user.role, image: user.image } }
    }, {
@@ -266,7 +269,7 @@ export function createApp() {
          await prisma.session.deleteMany({ where: { token } })
        }
      }
-      set.headers['set-cookie'] = 'session=; Path=/; HttpOnly; Max-Age=0'
+      set.headers['set-cookie'] = `session=; Path=/; HttpOnly; Max-Age=0${cookieFlags}`
      return { ok: true }
    }, {
      detail: {
@@ -367,6 +370,8 @@ export function createApp() {
        errors: app.bugs.length,
        active: app.active,
        urlApi: app.urlApi,
+        apiKey: app.apiKey ?? '',
+        clientApiKey: app.clientApiKey ?? '',
        hasClientApiKey: !!app.clientApiKey,
      }))
    }, {
@@ -800,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) {
@@ -816,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({
@@ -847,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'],
      },
    })
@@ -898,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({
@@ -1065,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 {
@@ -1218,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() {},
@@ -1637,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 }) => {
--- a/src/frontend/components/DashboardCharts.tsx
+++ b/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">
--- a/src/frontend/components/DashboardLayout.tsx
+++ b/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') {
--- a/src/frontend/components/ErrorDataTable.tsx
+++ b/src/frontend/components/ErrorDataTable.tsx
@@ -8,7 +8,6 @@ import {
  Group,
  Loader,
  Paper,
-  ScrollArea,
  SimpleGrid,
  Stack,
  Table,
@@ -18,11 +17,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 +48,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 || []

@@ -65,7 +73,7 @@ export function ErrorDataTable({ appId }: ErrorDataTableProps) {

  return (
    <>
-      <Paper withBorder radius="2xl" className="glass" style={{ overflow: 'hidden' }}>
+      <Paper withBorder radius="2xl" className="glass" style={{ overflowX: 'auto' }}>
        <Box p="lg" style={{ borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
          <Group justify="space-between">
            <Group gap="sm">
@@ -92,15 +100,15 @@ export function ErrorDataTable({ appId }: ErrorDataTableProps) {
          </Group>
        </Box>

-        <ScrollArea>
+        <Table.ScrollContainer minWidth={520}>
          <Table verticalSpacing="sm" highlightOnHover className="data-table">
            <Table.Thead>
              <Table.Tr>
                <Table.Th px="lg">Error Description</Table.Th>
-                <Table.Th>Reporter</Table.Th>
-                <Table.Th>Version</Table.Th>
-                <Table.Th>Reported</Table.Th>
-                <Table.Th pr="lg">Status</Table.Th>
+                <Table.Th style={{ whiteSpace: 'nowrap' }}>Reporter</Table.Th>
+                <Table.Th style={{ whiteSpace: 'nowrap' }}>Version</Table.Th>
+                <Table.Th style={{ whiteSpace: 'nowrap' }}>Reported</Table.Th>
+                <Table.Th pr="lg" style={{ whiteSpace: 'nowrap' }}>Status</Table.Th>
              </Table.Tr>
            </Table.Thead>
            <Table.Tbody>
@@ -140,8 +148,8 @@ export function ErrorDataTable({ appId }: ErrorDataTableProps) {
                      v{error.affectedVersion || 'N/A'}
                    </Badge>
                  </Table.Td>
-                  <Table.Td>
-                    <Group gap={4}>
+                  <Table.Td style={{ whiteSpace: 'nowrap' }}>
+                    <Group gap={4} wrap="nowrap">
                      <TbHistory size={12} color="gray" />
                      <Text size="xs" c="dimmed">
                        {dayjs(error.createdAt).format('D MMM YYYY, HH:mm')}
@@ -161,7 +169,7 @@ export function ErrorDataTable({ appId }: ErrorDataTableProps) {
              ))}
            </Table.Tbody>
          </Table>
-        </ScrollArea>
+        </Table.ScrollContainer>
      </Paper>

      <Drawer
@@ -257,4 +265,4 @@ export function ErrorDataTable({ appId }: ErrorDataTableProps) {
      </Drawer>
    </>
  )
-}
+})
--- a/src/frontend/components/StatsCard.tsx
+++ b/src/frontend/components/StatsCard.tsx
@@ -14,18 +14,21 @@ interface StatsCardProps {
 }

 export function StatsCard({ title, value, description, icon: Icon, color, trend }: StatsCardProps) {
+  const accentColor = `var(--mantine-color-${color ?? 'brand-blue'}-5)`
+
  return (
    <Card
      withBorder
      padding="lg"
      radius="xl"
      className="premium-card"
-      styles={(theme) => ({
+      styles={{
        root: {
          backgroundColor: 'var(--mantine-color-body)',
          borderColor: 'rgba(128,128,128,0.1)',
+          borderTop: `3px solid ${accentColor}`,
        },
-      })}
+      }}
    >
      <Group justify="space-between" mb="xs">
        <ThemeIcon
--- a/src/frontend/config/api.ts
+++ b/src/frontend/config/api.ts
@@ -7,15 +7,45 @@ 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}`
+  },
+  getStaleVillages: (days: 7 | 14 | 30 = 7) => `${DESA_PLUS_PROXY}/api/monitoring/stale-villages?days=${days}`,
+  getPeakHours: (idVillage?: string) => {
+    const params = new URLSearchParams()
+    if (idVillage) params.set('idVillage', idVillage)
+    return `${DESA_PLUS_PROXY}/api/monitoring/peak-hours?${params}`
+  },
+  getInactiveUsers: (days: 7 | 14 | 30 = 7, idVillage?: string, page = 1) => {
+    const params = new URLSearchParams({ days: String(days), page: String(page) })
+    if (idVillage) params.set('idVillage', idVillage)
+    return `${DESA_PLUS_PROXY}/api/monitoring/inactive-users?${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,11 +68,34 @@ 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`,
  createLog: () => `/api/logs`,
+  exportLogs: (search: string, action?: string, idVillage?: string, dateFrom?: string, dateTo?: string) => {
+    const params = new URLSearchParams({ 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/export-logs?${params}`
+  },
+  getVillageReport: (range: 7 | 30 | 90 = 7) =>
+    `${DESA_PLUS_PROXY}/api/monitoring/village-report?range=${range}`,
+  exportUsers: (search: string, isActive?: string, idUserRole?: string, idVillage?: string) => {
+    const params = new URLSearchParams({ search })
+    if (isActive) params.set('isActive', isActive)
+    if (idUserRole) params.set('idUserRole', idUserRole)
+    if (idVillage) params.set('idVillage', idVillage)
+    return `${DESA_PLUS_PROXY}/api/monitoring/export-users?${params}`
+  },
 }
--- a/src/frontend/hooks/usePresence.ts
+++ b/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
--- a/src/frontend/routes/apps.$appId.errors.tsx
+++ b/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
@@ -465,27 +463,29 @@ function AppErrorsPage() {
                }}
              >
                <Accordion.Control>
-                  <Group wrap="nowrap">
+                  <Group wrap="nowrap" style={{ minWidth: 0 }}>
                    <ThemeIcon
                      color={STATUS_COLOR[bug.status] ?? 'gray'}
                      variant="light"
                      size="lg"
                      radius="md"
+                      style={{ flexShrink: 0 }}
                    >
                      <TbAlertTriangle size={20} />
                    </ThemeIcon>
-                    <Box style={{ flex: 1 }}>
-                      <Group justify="space-between">
-                        <Text size="sm" fw={600} lineClamp={1}>{bug.description}</Text>
+                    <Box style={{ flex: 1, minWidth: 0 }}>
+                      <Group wrap="nowrap" gap="xs">
+                        <Text size="sm" fw={600} lineClamp={1} style={{ flex: 1, minWidth: 0 }}>{bug.description}</Text>
                        <Badge
                          color={STATUS_COLOR[bug.status] ?? 'gray'}
                          variant="dot"
                          size="sm"
+                          style={{ flexShrink: 0 }}
                        >
                          {STATUS_LABEL[bug.status] ?? bug.status}
                        </Badge>
                      </Group>
-                      <Text size="xs" c="dimmed">
+                      <Text size="xs" c="dimmed" lineClamp={1}>
                        {dayjs(bug.createdAt).format('D MMM YYYY, HH:mm')} · {bug.appId?.toUpperCase()} · v{bug.affectedVersion}
                      </Text>
                    </Box>
--- a/src/frontend/routes/apps.$appId.index.tsx
+++ b/src/frontend/routes/apps.$appId.index.tsx
@@ -1,14 +1,18 @@
-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 {
  ActionIcon,
+  Anchor,
  Badge,
  Button,
+  Collapse,
+  Divider,
  Group,
  Modal,
+  Paper,
+  SegmentedControl,
  SimpleGrid,
  Stack,
  Switch,
@@ -21,11 +25,14 @@ 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,
  TbBuildingCommunity,
+  TbChevronDown,
+  TbChevronUp,
+  TbFileText,
  TbRefresh,
  TbVersions,
 } from 'react-icons/tb'
@@ -45,6 +52,8 @@ 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 [isExporting, setIsExporting] = useState(false)

  const [latestVersion, setLatestVersion] = useState('')
  const [minVersion, setMinVersion] = useState('')
@@ -52,32 +61,41 @@ 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 [staleDays, setStaleDays] = useState<7 | 14 | 30>(7)
+  const [staleExpanded, { toggle: toggleStale }] = useDisclosure(false)

-  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 { data: staleRes } = useSWR(isDesaPlus ? API_URLS.getStaleVillages(staleDays) : null, 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 () => {
@@ -114,6 +132,256 @@ function AppOverviewPage() {
    }
  }

+  const handleDownloadPDF = async () => {
+    setIsExporting(true)
+    try {
+      const [reportRes, peakRes] = await Promise.all([
+        fetch(API_URLS.getVillageReport(comparisonRange as 7 | 30 | 90)).then(r => r.json()),
+        fetch(API_URLS.getPeakHours()).then(r => r.json()),
+      ])
+      if (!reportRes.success) return
+
+      const { villages, generatedAt } = reportRes.data
+      const peakHours: { hour: number; label: string; count: number }[] = peakRes?.data?.hours ?? []
+      const peakHour: { label: string; count: number } | null = peakRes?.data?.peak ?? null
+      const appName = isDesaPlus ? 'Desa+' : appId
+
+      // ── Aggregates ─────────────────────────────────────
+      const totalActive = villages.filter((v: any) => v.isActive).length
+      const totalInactive = villages.filter((v: any) => !v.isActive).length
+      const totalStale = villages.filter((v: any) => v.activityCount === 0).length
+      const totalActivity = villages.reduce((s: number, v: any) => s + v.activityCount, 0)
+      const totalActiveUsers = villages.reduce((s: number, v: any) => s + v.activeUsers, 0)
+      const totalInactiveUsers = villages.reduce((s: number, v: any) => s + v.inactiveUsers, 0)
+
+      const top5 = villages.slice(0, 5)
+      const maxActivity = top5[0]?.activityCount || 1
+      const needsAttention = villages.filter((v: any) => !v.isActive || v.activityCount === 0)
+
+      // ── Helpers ────────────────────────────────────────
+      const trendBadge = (trend: number) => {
+        if (trend > 0) return `<span style="color:#059669;font-weight:700">▲ +${trend}%</span>`
+        if (trend < 0) return `<span style="color:#dc2626;font-weight:700">▼ ${trend}%</span>`
+        return `<span style="color:#9ca3af">— 0%</span>`
+      }
+      const statusBadge = (active: boolean) =>
+        `<span style="display:inline-block;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:700;
+          background:${active ? '#d1fae5' : '#fee2e2'};color:${active ? '#065f46' : '#991b1b'}">
+          ${active ? 'Active' : 'Inactive'}</span>`
+      const lastActivityCell = (v: any) => v.lastActivity
+        ? `${v.lastActivity}<br><span style="color:${v.daysSince > 30 ? '#dc2626' : v.daysSince > 7 ? '#d97706' : '#059669'}">${v.daysSince}d ago</span>`
+        : '<span style="color:#999">No activity</span>'
+
+      // ── Section: Top 5 ────────────────────────────────
+      const top5Rows = top5.map((v: any, i: number) => `
+        <tr style="background:${i % 2 === 0 ? '#fff' : '#f9fafb'}">
+          <td style="text-align:center;font-weight:800;font-size:14px;color:${i === 0 ? '#d97706' : i === 1 ? '#6b7280' : i === 2 ? '#b45309' : '#374151'}">
+            ${i === 0 ? '🥇' : i === 1 ? '🥈' : i === 2 ? '🥉' : `#${i + 1}`}
+          </td>
+          <td><strong>${v.name}</strong></td>
+          <td style="width:35%">
+            <div style="background:#e5e7eb;border-radius:4px;height:10px;overflow:hidden">
+              <div style="width:${Math.round((v.activityCount / maxActivity) * 100)}%;height:100%;background:${i === 0 ? '#d97706' : '#3b82f6'};border-radius:4px"></div>
+            </div>
+          </td>
+          <td style="text-align:right;font-weight:700">${v.activityCount.toLocaleString()}</td>
+          <td style="text-align:center">${trendBadge(v.trend)}</td>
+        </tr>`).join('')
+
+      // ── Section: Needs Attention ───────────────────────
+      const attentionRows = needsAttention.length === 0
+        ? '<tr><td colspan="5" style="text-align:center;color:#9ca3af;padding:16px">All villages are active and have activity in this period.</td></tr>'
+        : needsAttention.map((v: any, i: number) => `
+          <tr style="background:${i % 2 === 0 ? '#fff' : '#f9fafb'}">
+            <td>${v.name}</td>
+            <td style="text-align:center">${statusBadge(v.isActive)}</td>
+            <td style="text-align:center">${v.activeUsers + v.inactiveUsers}</td>
+            <td style="text-align:center">
+              ${!v.isActive
+                ? '<span style="color:#dc2626;font-weight:700">Village inactive</span>'
+                : '<span style="color:#d97706;font-weight:700">No activity in period</span>'}
+            </td>
+            <td style="text-align:center;font-size:11px">${lastActivityCell(v)}</td>
+          </tr>`).join('')
+
+      // ── Section: All Villages ─────────────────────────
+      const allRows = villages.map((v: any, i: number) => `
+        <tr style="background:${i % 2 === 0 ? '#fff' : '#f9fafb'}">
+          <td style="text-align:center;color:#9ca3af">${i + 1}</td>
+          <td>
+            <strong>${v.name}</strong>
+            ${v.perbekel !== '-' ? `<br><span style="font-size:10px;color:#9ca3af">Perbekel: ${v.perbekel}</span>` : ''}
+          </td>
+          <td style="text-align:center">${statusBadge(v.isActive)}</td>
+          <td style="text-align:center">${v.activeUsers}</td>
+          <td style="text-align:center">${v.inactiveUsers}</td>
+          <td style="text-align:right;font-weight:700">${v.activityCount.toLocaleString()}</td>
+          <td style="text-align:center">${trendBadge(v.trend)}</td>
+          <td style="text-align:center;font-size:11px">${lastActivityCell(v)}</td>
+        </tr>`).join('')
+
+      // ── Section: Peak Hours ───────────────────────────
+      const peakMax = Math.max(...peakHours.map(h => h.count), 1)
+      const peakRows = peakHours.filter(h => h.count > 0).map((h, i) => `
+        <tr style="background:${i % 2 === 0 ? '#fff' : '#f9fafb'}">
+          <td style="font-weight:700;width:80px">${h.label}</td>
+          <td>
+            <div style="background:#e5e7eb;border-radius:4px;height:8px;overflow:hidden">
+              <div style="width:${Math.round((h.count / peakMax) * 100)}%;height:100%;background:#7c3aed;border-radius:4px"></div>
+            </div>
+          </td>
+          <td style="text-align:right;width:80px;font-weight:600">${h.count.toLocaleString()}</td>
+        </tr>`).join('')
+
+      // ── Build HTML ────────────────────────────────────
+      const html = `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>${appName} — Village Report</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: Arial, sans-serif; color: #111; background: #fff; font-size: 12px; }
+    .cover { background: linear-gradient(135deg, #1d4ed8, #7c3aed); color: white; padding: 36px 40px 28px; }
+    .cover h1 { font-size: 26px; font-weight: 800; margin-bottom: 6px; }
+    .cover p { font-size: 12px; opacity: 0.8; margin-top: 4px; }
+    .summary { display: grid; grid-template-columns: repeat(6, 1fr); border-bottom: 2px solid #e5e7eb; }
+    .summary-card { padding: 14px 16px; border-right: 1px solid #e5e7eb; }
+    .summary-card:last-child { border-right: none; }
+    .summary-card .label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; margin-bottom: 4px; }
+    .summary-card .value { font-size: 24px; font-weight: 800; }
+    .summary-card .sub { font-size: 10px; color: #9ca3af; margin-top: 2px; }
+    .section { padding: 20px 32px; border-bottom: 1px solid #f3f4f6; }
+    .section h2 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #6b7280; padding-bottom: 8px; border-bottom: 2px solid #e5e7eb; margin-bottom: 14px; }
+    table { width: 100%; border-collapse: collapse; }
+    th { font-size: 9px; font-weight: 700; text-transform: uppercase; color: #6b7280; padding: 7px 10px; border-bottom: 2px solid #e5e7eb; text-align: left; background: #f9fafb; }
+    td { padding: 8px 10px; border-bottom: 1px solid #f3f4f6; vertical-align: middle; line-height: 1.4; }
+    .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
+    .footer { padding: 14px 32px; border-top: 2px solid #e5e7eb; font-size: 10px; color: #9ca3af; text-align: center; }
+    @media print { body { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .section { page-break-inside: avoid; } }
+  </style>
+</head>
+<body>
+
+  <div class="cover">
+    <h1>${appName} — Village Monitoring Report</h1>
+    <p>Generated: ${generatedAt}</p>
+    <p>Period: last ${comparisonRange} days &nbsp;·&nbsp; Compared to previous ${comparisonRange} days</p>
+  </div>
+
+  <div class="summary">
+    <div class="summary-card">
+      <div class="label">Active Villages</div>
+      <div class="value" style="color:#059669">${totalActive}</div>
+      <div class="sub">of ${villages.length} total</div>
+    </div>
+    <div class="summary-card">
+      <div class="label">Inactive Villages</div>
+      <div class="value" style="color:#dc2626">${totalInactive}</div>
+      <div class="sub">not operational</div>
+    </div>
+    <div class="summary-card">
+      <div class="label">No Activity</div>
+      <div class="value" style="color:#d97706">${totalStale}</div>
+      <div class="sub">in this period</div>
+    </div>
+    <div class="summary-card">
+      <div class="label">Total Activity</div>
+      <div class="value">${totalActivity.toLocaleString()}</div>
+      <div class="sub">last ${comparisonRange} days</div>
+    </div>
+    <div class="summary-card">
+      <div class="label">Active Users</div>
+      <div class="value" style="color:#0891b2">${totalActiveUsers.toLocaleString()}</div>
+      <div class="sub">across all villages</div>
+    </div>
+    <div class="summary-card">
+      <div class="label">Inactive Users</div>
+      <div class="value" style="color:#6b7280">${totalInactiveUsers.toLocaleString()}</div>
+      <div class="sub">across all villages</div>
+    </div>
+  </div>
+
+  <div class="section">
+    <div class="two-col">
+      <div>
+        <h2>Top 5 Most Active Villages</h2>
+        <table>
+          <thead>
+            <tr>
+              <th style="width:6%">#</th>
+              <th>Village</th>
+              <th style="width:30%">Activity</th>
+              <th style="text-align:right;width:10%">Count</th>
+              <th style="text-align:center;width:14%">vs Prev</th>
+            </tr>
+          </thead>
+          <tbody>${top5Rows}</tbody>
+        </table>
+      </div>
+      <div>
+        <h2>Peak Activity Hours</h2>
+        ${peakHour ? `<p style="font-size:11px;color:#6b7280;margin-bottom:10px">Busiest hour: <strong>${peakHour.label}</strong> (${peakHour.count.toLocaleString()} activities)</p>` : ''}
+        <table>
+          <thead><tr><th>Hour</th><th>Distribution</th><th style="text-align:right">Count</th></tr></thead>
+          <tbody>${peakRows || '<tr><td colspan="3" style="text-align:center;color:#9ca3af">No data</td></tr>'}</tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+
+  <div class="section">
+    <h2>Villages Needing Attention (${needsAttention.length})</h2>
+    ${needsAttention.length === 0
+      ? '<p style="color:#9ca3af;font-size:11px">All villages are active and have activity in this period.</p>'
+      : `<table>
+          <thead>
+            <tr>
+              <th>Village</th>
+              <th style="text-align:center">Status</th>
+              <th style="text-align:center">Total Users</th>
+              <th>Reason</th>
+              <th style="text-align:center">Last Activity</th>
+            </tr>
+          </thead>
+          <tbody>${attentionRows}</tbody>
+        </table>`}
+  </div>
+
+  <div class="section">
+    <h2>All Villages — ${villages.length} Villages</h2>
+    <table>
+      <thead>
+        <tr>
+          <th style="width:3%;text-align:center">#</th>
+          <th style="width:22%">Village / Perbekel</th>
+          <th style="width:9%;text-align:center">Status</th>
+          <th style="width:8%;text-align:center">Active Users</th>
+          <th style="width:8%;text-align:center">Inactive Users</th>
+          <th style="width:10%;text-align:right">Activity (${comparisonRange}D)</th>
+          <th style="width:10%;text-align:center">vs Prev Period</th>
+          <th style="width:18%;text-align:center">Last Activity</th>
+        </tr>
+      </thead>
+      <tbody>${allRows}</tbody>
+    </table>
+  </div>
+
+  <div class="footer">
+    ${appName} Monitoring System &nbsp;·&nbsp; ${generatedAt} &nbsp;·&nbsp; ${villages.length} villages &nbsp;·&nbsp; Period: last ${comparisonRange} days
+  </div>
+
+  <script>window.onload = () => window.print()<\/script>
+</body>
+</html>`
+
+      const win = window.open('', '_blank')
+      if (win) { win.document.write(html); win.document.close() }
+    } finally {
+      setIsExporting(false)
+    }
+  }
+
  const maintenanceOn = grid?.version?.mobile_maintenance === 'true'

  return (
@@ -173,18 +441,34 @@ function AppOverviewPage() {
              Real-time metrics and activity for {isDesaPlus ? 'Desa+' : appId}.
            </Text>
          </Stack>
-          <Tooltip label="Refresh data" withArrow>
-            <ActionIcon
-              variant="light"
-              color="brand-blue"
-              size="lg"
-              radius="md"
-              onClick={handleRefresh}
-              loading={gridLoading || dailyLoading || comparisonLoading}
-            >
-              <TbRefresh size={18} />
-            </ActionIcon>
-          </Tooltip>
+          <Group gap="xs">
+            {isDesaPlus && (
+              <Button
+                variant="light"
+                color="gray"
+                size="sm"
+                radius="md"
+                leftSection={<TbFileText size={16} />}
+                onClick={handleDownloadPDF}
+                loading={isExporting}
+                disabled={gridLoading || !grid}
+              >
+                Download PDF
+              </Button>
+            )}
+            <Tooltip label="Refresh data" withArrow>
+              <ActionIcon
+                variant="light"
+                color="brand-blue"
+                size="lg"
+                radius="md"
+                onClick={handleRefresh}
+                loading={gridLoading || dailyLoading || comparisonLoading}
+              >
+                <TbRefresh size={18} />
+              </ActionIcon>
+            </Tooltip>
+          </Group>
        </Group>

        <SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }} spacing="lg">
@@ -214,8 +498,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}
          />

@@ -242,6 +526,62 @@ function AppOverviewPage() {
          />
        </SimpleGrid>

+        {isDesaPlus && staleRes?.data?.count > 0 && (
+          <Paper
+            withBorder
+            radius="xl"
+            className="glass"
+            p="md"
+            style={{ borderColor: 'var(--mantine-color-orange-7)' }}
+          >
+            <Group justify="space-between" wrap="nowrap">
+              <Group gap="sm" wrap="nowrap">
+                <TbAlertTriangle size={18} color="var(--mantine-color-orange-5)" style={{ flexShrink: 0 }} />
+                <Text fw={700} size="sm" c="orange.4">
+                  {staleRes.data.count} {staleRes.data.count === 1 ? 'village' : 'villages'} with no activity in the last {staleDays} days
+                </Text>
+              </Group>
+              <Group gap="xs" wrap="nowrap">
+                <SegmentedControl
+                  size="xs"
+                  value={String(staleDays)}
+                  onChange={(v) => setStaleDays(Number(v) as 7 | 14 | 30)}
+                  data={[
+                    { label: '7D', value: '7' },
+                    { label: '14D', value: '14' },
+                    { label: '30D', value: '30' },
+                  ]}
+                />
+                <ActionIcon variant="subtle" color="gray" size="sm" onClick={toggleStale}>
+                  {staleExpanded ? <TbChevronUp size={15} /> : <TbChevronDown size={15} />}
+                </ActionIcon>
+              </Group>
+            </Group>
+
+            <Collapse in={staleExpanded}>
+              <Divider my="sm" opacity={0.2} />
+              <Stack gap={6}>
+                {staleRes.data.villages.map((v: { id: string; name: string; daysSince: number | null }) => (
+                  <Group key={v.id} justify="space-between" wrap="nowrap">
+                    <Anchor
+                      size="sm"
+                      fw={500}
+                      c="dimmed"
+                      onClick={() => navigate({ to: `/apps/${appId}/villages/${v.id}` })}
+                      style={{ cursor: 'pointer' }}
+                    >
+                      {v.name}
+                    </Anchor>
+                    <Text size="xs" c="orange.6" fw={600}>
+                      {v.daysSince === null ? 'No activity yet' : `${v.daysSince}d ago`}
+                    </Text>
+                  </Group>
+                ))}
+              </Stack>
+            </Collapse>
+          </Paper>
+        )}
+
        <Group justify="space-between" align="flex-end">
          <Stack gap={2}>
            <Title order={4}>Analytics</Title>
@@ -250,11 +590,10 @@ 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>
    </>
  )
--- a/src/frontend/routes/apps.$appId.logs.tsx
+++ b/src/frontend/routes/apps.$appId.logs.tsx
@@ -1,15 +1,18 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import useSWR from 'swr'
 import {
  ActionIcon,
+  Anchor,
  Avatar,
  Badge,
+  Button,
  Code,
  Group,
  Loader,
  Pagination,
  Paper,
  ScrollArea,
+  Select,
  Stack,
  Table,
  Text,
@@ -17,10 +20,13 @@ import {
  Title,
  Tooltip,
 } from '@mantine/core'
-import { useMediaQuery } from '@mantine/hooks'
-import { createFileRoute, useParams } from '@tanstack/react-router'
+import { useDebouncedValue, useMediaQuery } from '@mantine/hooks'
+import { DatePickerInput } from '@mantine/dates'
+import { createFileRoute, useNavigate, useParams } from '@tanstack/react-router'
 import {
  TbAlertCircle,
+  TbCalendar,
+  TbDownload,
  TbHistory,
  TbHome2,
  TbSearch,
@@ -39,6 +45,7 @@ interface LogEntry {
  desc: string
  username: string
  village: string
+  idVillage: string
 }

 const fetcher = (url: string) => fetch(url).then((res) => res.json())
@@ -51,30 +58,111 @@ 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 navigate = useNavigate()
  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 [isExporting, setIsExporting] = useState(false)

-  const apiUrl = isDesaPlus ? API_URLS.getLogsAllVillages(page, searchQuery) : null
+  const handleExportCSV = async () => {
+    setIsExporting(true)
+    try {
+      const res = await fetch(API_URLS.exportLogs(
+        searchQuery,
+        filterAction ?? undefined,
+        filterVillageId ?? undefined,
+        dateFrom ?? undefined,
+        dateTo ?? undefined,
+      ))
+      const json = await res.json()
+      if (!json.success || !json.data?.length) return
+
+      const headers = ['Timestamp', 'User', 'Village', 'Action', 'Description']
+      const rows = json.data.map((r: any) => [
+        r.timestamp,
+        r.username,
+        r.village,
+        r.action,
+        `"${(r.desc ?? '').replace(/"/g, '""')}"`,
+      ])
+      const csv = [headers.join(','), ...rows.map((r: string[]) => r.join(','))].join('\n')
+      const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
+      const url = URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = `activity-logs-${new Date().toISOString().slice(0, 10)}.csv`
+      a.click()
+      URL.revokeObjectURL(url)
+    } finally {
+      setIsExporting(false)
+    }
+  }
+
+  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('')
@@ -105,26 +193,75 @@ function AppLogsPage() {
              : `${(response?.data?.total ?? 0).toLocaleString()} events across all villages`}
          </Text>
        </Stack>
+        <Button
+          variant="light"
+          color="teal"
+          size="sm"
+          leftSection={<TbDownload size={16} />}
+          onClick={handleExportCSV}
+          loading={isExporting}
+          disabled={isLoading || !logs.length}
+        >
+          Export CSV
+        </Button>
      </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 +280,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 +311,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' }}>
@@ -197,7 +323,15 @@ function AppLogsPage() {
                        </Group>
                        <Group gap={6} wrap="nowrap">
                          <TbHome2 size={12} color="gray" />
-                          <Text size="xs" c="dimmed" truncate="end">{log.village}</Text>
+                          <Anchor
+                            size="xs"
+                            c="dimmed"
+                            truncate="end"
+                            onClick={() => navigate({ to: `/apps/${appId}/villages/${log.idVillage}` })}
+                            style={{ cursor: 'pointer' }}
+                          >
+                            {log.village}
+                          </Anchor>
                        </Group>
                      </Stack>
                    </Table.Td>
@@ -229,7 +363,7 @@ function AppLogsPage() {
        </Paper>
      )}

-      {!isLoading && !error && response?.data?.totalPage > 0 && (
+      {!isLoading && !error && response?.data?.totalPage > 1 && (
        <Group justify="center">
          <Pagination
            value={page}
--- a/src/frontend/routes/apps.$appId.users.index.tsx
+++ b/src/frontend/routes/apps.$appId.users.index.tsx
@@ -22,16 +22,20 @@ 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,
+  TbClock,
+  TbDownload,
  TbHome2,
  TbId,
  TbMail,
@@ -57,6 +61,7 @@ interface APIUser {
  gender: string
  isWithoutOTP: boolean
  isActive: boolean
+  isApprover: boolean
  role: string
  village: string
  group: string
@@ -65,35 +70,230 @@ interface APIUser {
  idVillage: string
  idGroup: string
  idPosition: string
+  lastActivity: string | null
 }

+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())

+function getLastActivityInfo(lastActivity: string | null): { label: string; color: string } {
+  if (!lastActivity) return { label: 'Never', color: 'gray' }
+  const days = Math.floor((Date.now() - new Date(lastActivity).getTime()) / (1000 * 60 * 60 * 24))
+  if (days < 1) return { label: 'Today', color: 'teal' }
+  if (days < 7) return { label: `${days}d ago`, color: 'teal' }
+  if (days <= 30) return { label: `${days}d ago`, color: 'yellow' }
+  return { label: `${days}d ago`, color: 'red' }
+}
+
+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 [filterInactiveDays, setFilterInactiveDays] = 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 isInactiveMode = !!filterInactiveDays
+
+  const filterStatusParam = filterStatus === 'active' ? 'true' : filterStatus === 'inactive' ? 'false' : undefined
+  const apiUrl = isDesaPlus
+    ? isInactiveMode
+      ? API_URLS.getInactiveUsers(Number(filterInactiveDays) as 7 | 14 | 30, filterVillageId ?? undefined, page)
+      : 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 users: APIUser[] = isInactiveMode
+    ? (response?.data?.users || [])
+    : (response?.data?.user || [])
+  const totalPages = response?.data?.totalPage ?? 0
+  const totalUsers = response?.data?.total ?? 0

-  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, filterInactiveDays])
+
+  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 +302,7 @@ function UsersIndexPage() {
    idUserRole: '',
    idVillage: '',
    idGroup: '',
-    idPosition: ''
+    idPosition: '',
  })

  const [editOpened, { open: openEdit, close: closeEdit }] = useDisclosure(false)
@@ -118,7 +318,8 @@ function UsersIndexPage() {
    idGroup: '',
    idPosition: '',
    isActive: true,
-    isWithoutOTP: false
+    isWithoutOTP: false,
+    isApprover: false,
  })

  // Options Data (Shared for both Add and Edit modals)
@@ -126,7 +327,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 +346,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 +370,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 +379,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 +396,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 +419,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 +442,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 +451,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 +467,7 @@ function UsersIndexPage() {
          title: 'Error',
          message: result.message || 'Failed to update user.',
          color: 'red',
-          icon: <TbCircleX size={18} />
+          icon: <TbCircleX size={18} />,
        })
      }
    } catch {
@@ -271,10 +477,45 @@ function UsersIndexPage() {
    }
  }

-  const handleClearSearch = () => {
-    setSearch('')
-    setSearchQuery('')
-    setPage(1)
+  const [isExporting, setIsExporting] = useState(false)
+
+  const handleExportCSV = async () => {
+    setIsExporting(true)
+    try {
+      const res = await fetch(API_URLS.exportUsers(
+        searchQuery,
+        filterStatusParam,
+        filterRole ?? undefined,
+        filterVillageId ?? undefined,
+      ))
+      const json = await res.json()
+      if (!json.success || !json.data?.length) return
+
+      const headers = ['Name', 'NIK', 'Email', 'Phone', 'Gender', 'Role', 'Village', 'Group', 'Position', 'Status', 'Last Activity']
+      const rows = json.data.map((r: any) => [
+        `"${(r.name ?? '').replace(/"/g, '""')}"`,
+        r.nik,
+        r.email,
+        r.phone,
+        r.gender,
+        r.role,
+        `"${(r.village ?? '').replace(/"/g, '""')}"`,
+        `"${(r.group ?? '').replace(/"/g, '""')}"`,
+        `"${(r.position ?? '').replace(/"/g, '""')}"`,
+        r.status,
+        r.lastActivity,
+      ])
+      const csv = [headers.join(','), ...rows.map((r: string[]) => r.join(','))].join('\n')
+      const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
+      const url = URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = `users-${new Date().toISOString().slice(0, 10)}.csv`
+      a.click()
+      URL.revokeObjectURL(url)
+    } finally {
+      setIsExporting(false)
+    }
  }

  const getRoleColor = (role: string) => {
@@ -287,6 +528,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,103 +561,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
            mt="lg"
@@ -432,102 +590,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 +603,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>

@@ -565,39 +638,125 @@ function UsersIndexPage() {
        <Stack gap={4}>
          <Title order={3}>User Management</Title>
          <Text size="sm" c="dimmed">
-            {isLoading ? 'Loading users...' : `${response?.data?.total ?? 0} users registered in the Desa+ system`}
+            {isLoading
+              ? 'Loading users...'
+              : isInactiveMode
+                ? `${totalUsers} users with no activity in the last ${filterInactiveDays} days`
+                : `${totalUsers} users registered in the Desa+ system`}
          </Text>
        </Stack>
-        <Button
-          variant="gradient"
-          gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
-          leftSection={<TbPlus size={18} />}
-          size="sm"
-          onClick={open}
-        >
-          Add User
-        </Button>
+        <Group gap="sm">
+          <Button
+            variant="light"
+            color="teal"
+            size="sm"
+            leftSection={<TbDownload size={16} />}
+            onClick={handleExportCSV}
+            loading={isExporting}
+            disabled={isLoading || !users.length}
+          >
+            Export CSV
+          </Button>
+          <Button
+            variant="gradient"
+            gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
+            leftSection={<TbPlus size={18} />}
+            size="sm"
+            onClick={open}
+          >
+            Add User
+          </Button>
+        </Group>
      </Group>

-      {/* Search / Filter */}
+      {/* 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">
+          <Tooltip
+            label="Search is disabled when Inactive filter is active"
+            disabled={!isInactiveMode}
+            withArrow
+          >
+            <TextInput
+              placeholder="Search name, NIK, or email... (min. 3 characters)"
+              leftSection={<TbSearch size={16} />}
+              size="sm"
+              disabled={isInactiveMode}
+              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"
+            />
+          </Tooltip>
+          <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
+              disabled={isInactiveMode}
+              style={{ flex: 1 }}
+            />
+            <Select
+              size="sm"
+              placeholder="Role"
+              data={rolesOptions}
+              value={filterRole}
+              onChange={setFilterRole}
+              radius="md"
+              clearable
+              disabled={isInactiveMode}
+              style={{ flex: 1 }}
+            />
+            <Select
+              size="sm"
+              placeholder="Search village..."
+              searchable
+              onSearchChange={setFilterVillageSearch}
+              data={filterVillagesOptions}
+              value={filterVillageId}
+              onChange={setFilterVillageId}
+              radius="md"
+              clearable
+              style={{ flex: 1 }}
+            />
+            <Select
+              size="sm"
+              placeholder="Inactive since..."
+              data={[
+                { value: '7', label: 'No activity 7D' },
+                { value: '14', label: 'No activity 14D' },
+                { value: '30', label: 'No activity 30D' },
+              ]}
+              value={filterInactiveDays}
+              onChange={(v) => {
+                setFilterInactiveDays(v)
+                setFilterStatus(null)
+                setFilterRole(null)
+                setSearch('')
+                setSearchQuery('')
+                setPage(1)
+              }}
+              radius="md"
+              clearable
+              style={{ flex: 1 }}
+            />
+          </Group>
+        </Stack>
      </Paper>

      {isLoading ? (
@@ -616,7 +775,11 @@ 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.'}
+              {isInactiveMode
+                ? `No users with ${filterInactiveDays}+ days of inactivity.`
+                : searchQuery || filterStatus || filterRole || filterVillageId
+                  ? 'No users match your filters.'
+                  : 'No users found.'}
            </Text>
          </Stack>
        </Paper>
@@ -637,11 +800,31 @@ 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: '24%' },
+                    { label: 'Contact', col: null, width: '21%' },
+                    { label: 'Organization', col: null, width: '20%' },
+                    { label: 'Role', col: 'idUserRole', width: '13%' },
+                    { label: 'Status', col: 'isActive', width: '10%' },
+                    { label: 'Last Activity', col: null, width: '12%' },
+                  ].map(({ label, col, width }) => (
+                    <Table.Th
+                      key={label}
+                      style={{ width: isMobile ? undefined : width, cursor: col && !isInactiveMode ? 'pointer' : undefined, userSelect: 'none' }}
+                      onClick={col && !isInactiveMode ? () => handleSort(col) : undefined}
+                    >
+                      <Group gap={4} wrap="nowrap">
+                        <span>{label}</span>
+                        {col && !isInactiveMode && (
+                          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>
@@ -653,13 +836,7 @@ function UsersIndexPage() {
                  >
                    <Table.Td>
                      <Group gap="md" wrap="nowrap">
-                        <Avatar
-                          size="lg"
-                          radius="md"
-                          variant="light"
-                          color={getRoleColor(user.role)}
-                          style={{ flexShrink: 0 }}
-                        >
+                        <Avatar size="lg" radius="md" variant="light" color={getRoleColor(user.role)} style={{ flexShrink: 0 }}>
                          {user.name.charAt(0)}
                        </Avatar>
                        <Stack gap={2} style={{ overflow: 'hidden' }}>
@@ -737,6 +914,17 @@ function UsersIndexPage() {
                        )}
                      </Stack>
                    </Table.Td>
+                    <Table.Td>
+                      {(() => {
+                        const { label, color } = getLastActivityInfo(user.lastActivity)
+                        return (
+                          <Group gap={6} wrap="nowrap">
+                            <TbClock size={13} color={`var(--mantine-color-${color}-5)`} />
+                            <Text size="xs" fw={600} c={`${color}.5`}>{label}</Text>
+                          </Group>
+                        )
+                      })()}
+                    </Table.Td>
                  </Table.Tr>
                ))}
              </Table.Tbody>
@@ -745,12 +933,12 @@ function UsersIndexPage() {
        </Paper>
      )}

-      {!isLoading && !error && response?.data?.totalPage > 0 && (
+      {!isLoading && !error && totalPages > 1 && (
        <Group justify="center">
          <Pagination
            value={page}
            onChange={setPage}
-            total={response.data.totalPage}
+            total={totalPages}
            size="sm"
            radius="md"
            withEdges={false}
--- a/src/frontend/routes/apps.$appId.villages.$villageId.tsx
+++ b/src/frontend/routes/apps.$appId.villages.$villageId.tsx
@@ -1,15 +1,21 @@
-import { AreaChart } from '@mantine/charts'
+import { AreaChart, BarChart } from '@mantine/charts'
 import {
+  Badge,
  Box,
  Button,
  Card,
+  Grid,
  Group,
  Loader,
  Modal,
+  Pagination,
  Paper,
+  ScrollArea,
  SegmentedControl,
  SimpleGrid,
  Stack,
+  Switch,
+  Table,
  Text,
  Textarea,
  TextInput,
@@ -17,8 +23,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,12 +34,16 @@ import {
  TbCalendar,
  TbCalendarEvent,
  TbChartBar,
+  TbClock,
  TbEdit,
+  TbFileText,
  TbHome2,
  TbLayoutKanban,
  TbMapPin,
  TbPower,
+  TbTestPipe,
  TbUser,
+  TbUserOff,
  TbUsers,
  TbUsersGroup,
  TbWifi
@@ -62,11 +74,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 +94,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 +109,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 +153,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 +198,243 @@ function ActivityChart({ villageId }: { villageId: string }) {
  )
 }

+// ── Peak Hours Chart ──────────────────────────────────────────────────────────
+
+function PeakHoursChart({ villageId }: { villageId: string }) {
+  const { data: response, isLoading } = useSWR(API_URLS.getPeakHours(villageId), fetcher)
+  const hours: { hour: number; label: string; count: number }[] = response?.data?.hours || []
+  const peak: { label: string; count: number } | null = response?.data?.peak || null
+
+  return (
+    <Paper withBorder radius="xl" p="lg">
+      <Group justify="space-between" mb="lg" wrap="wrap" gap="sm">
+        <Group gap="xs">
+          <ThemeIcon size={28} radius="md" variant="light" color="violet">
+            <TbClock size={14} />
+          </ThemeIcon>
+          <Stack gap={0}>
+            <Text fw={700} size="sm">Peak Activity Hours</Text>
+            <Text size="xs" c="dimmed">
+              {peak && peak.count > 0
+                ? `Busiest hour: ${peak.label} (${peak.count.toLocaleString()} activities)`
+                : 'No activity data'}
+            </Text>
+          </Stack>
+        </Group>
+      </Group>
+
+      {isLoading ? (
+        <Stack h={200} align="center" justify="center">
+          <Loader type="dots" />
+        </Stack>
+      ) : (
+        <BarChart
+          h={200}
+          data={hours}
+          dataKey="label"
+          series={[{ name: 'count', color: 'violet.5' }]}
+          withTooltip
+          withXAxis
+          withYAxis={false}
+          tickLine="none"
+          gridAxis="none"
+          barProps={{ radius: 4 }}
+          tooltipProps={{
+            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)',
+                  whiteSpace: 'nowrap',
+                }}>
+                  <div style={{ fontSize: '12px', fontWeight: 600, color: '#C1C2C5', marginBottom: '4px' }}>{label}</div>
+                  <div style={{ fontSize: '11px', color: '#9775FA' }}>
+                    Activities: <span style={{ fontWeight: 700 }}>{payload[0].value}</span>
+                  </div>
+                </div>
+              )
+            },
+          }}
+        />
+      )}
+    </Paper>
+  )
+}
+
+// ── 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.ScrollContainer minWidth={380}>
+          <Table verticalSpacing="xs" className="data-table">
+            <Table.Thead>
+              <Table.Tr>
+                <Table.Th style={{ whiteSpace: 'nowrap' }}>Time</Table.Th>
+                <Table.Th>User</Table.Th>
+                <Table.Th style={{ whiteSpace: 'nowrap' }}>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 style={{ whiteSpace: 'nowrap' }}>
+                    <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 style={{ whiteSpace: 'nowrap' }}>
+                    <Text size="xs">{log.action || '-'}</Text>
+                  </Table.Td>
+                  <Table.Td>
+                    <Text size="xs" c="dimmed">{log.desc || '-'}</Text>
+                  </Table.Td>
+                </Table.Tr>
+              ))}
+            </Table.Tbody>
+          </Table>
+        </Table.ScrollContainer>
+      )}
+    </Paper>
+  )
+}
+
+// ── Inactive Users ────────────────────────────────────────────────────────────
+
+function InactiveVillageUsers({ villageId }: { villageId: string }) {
+  const [days, setDays] = useState<7 | 14 | 30>(7)
+  const [page, setPage] = useState(1)
+
+  const { data: response, isLoading } = useSWR(
+    API_URLS.getInactiveUsers(days, villageId, page),
+    fetcher
+  )
+
+  const users: any[] = response?.data?.users || []
+  const totalPages: number = response?.data?.totalPage ?? 0
+  const total: number = response?.data?.total ?? 0
+
+  return (
+    <Paper withBorder radius="xl" p="lg">
+      <Group justify="space-between" mb="md" wrap="wrap" gap="sm">
+        <Group gap="xs">
+          <ThemeIcon size={28} radius="md" variant="light" color="red">
+            <TbUserOff size={14} />
+          </ThemeIcon>
+          <Stack gap={0}>
+            <Text fw={700} size="sm">Inactive Users</Text>
+            <Text size="xs" c="dimmed">
+              {isLoading ? 'Loading...' : `${total} users with no activity in the last ${days} days`}
+            </Text>
+          </Stack>
+        </Group>
+        <SegmentedControl
+          size="xs"
+          value={String(days)}
+          onChange={(v) => { setDays(Number(v) as 7 | 14 | 30); setPage(1) }}
+          data={[
+            { label: '7D', value: '7' },
+            { label: '14D', value: '14' },
+            { label: '30D', value: '30' },
+          ]}
+        />
+      </Group>
+
+      {isLoading ? (
+        <Stack h={120} align="center" justify="center">
+          <Loader type="dots" />
+        </Stack>
+      ) : users.length === 0 ? (
+        <Stack align="center" py="md" gap={4}>
+          <TbUsers size={28} style={{ opacity: 0.25 }} />
+          <Text size="sm" c="dimmed">No inactive users in this period.</Text>
+        </Stack>
+      ) : (
+        <Stack gap="md">
+          <ScrollArea>
+            <Table verticalSpacing="xs" className="data-table">
+              <Table.Thead>
+                <Table.Tr>
+                  <Table.Th>Name</Table.Th>
+                  <Table.Th>Role</Table.Th>
+                  <Table.Th>Group / Position</Table.Th>
+                  <Table.Th>Status</Table.Th>
+                  <Table.Th style={{ whiteSpace: 'nowrap' }}>Last Activity</Table.Th>
+                </Table.Tr>
+              </Table.Thead>
+              <Table.Tbody>
+                {users.map((u: any) => (
+                  <Table.Tr key={u.id}>
+                    <Table.Td>
+                      <Stack gap={0}>
+                        <Text size="sm" fw={600}>{u.name}</Text>
+                        <Text size="xs" c="dimmed">{u.email}</Text>
+                      </Stack>
+                    </Table.Td>
+                    <Table.Td>
+                      <Badge variant="light" color="brand-blue" size="sm" radius="sm">
+                        {u.role}
+                      </Badge>
+                    </Table.Td>
+                    <Table.Td>
+                      <Text size="xs">{u.group}{u.position ? ` · ${u.position}` : ''}</Text>
+                    </Table.Td>
+                    <Table.Td>
+                      <Badge variant="dot" color={u.isActive ? 'teal' : 'red'} size="sm">
+                        {u.isActive ? 'Active' : 'Inactive'}
+                      </Badge>
+                    </Table.Td>
+                    <Table.Td style={{ whiteSpace: 'nowrap' }}>
+                      {u.daysSince === null ? (
+                        <Text size="xs" c="dimmed">Never</Text>
+                      ) : (
+                        <Text size="xs" fw={600} c={u.daysSince > 30 ? 'red.5' : u.daysSince > 7 ? 'yellow.5' : 'dimmed'}>
+                          {u.daysSince}d ago
+                        </Text>
+                      )}
+                    </Table.Td>
+                  </Table.Tr>
+                ))}
+              </Table.Tbody>
+            </Table>
+          </ScrollArea>
+          {totalPages > 1 && (
+            <Group justify="center">
+              <Pagination value={page} onChange={setPage} total={totalPages} size="sm" radius="md" withEdges={false} siblings={1} />
+            </Group>
+          )}
+        </Stack>
+      )}
+    </Paper>
+  )
+}
+
 // ── Main Page ─────────────────────────────────────────────────────────────────

 function VillageDetailPage() {
@@ -153,7 +451,8 @@ 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 [isExporting, setIsExporting] = useState(false)
+  const [editForm, setEditForm] = useState({ name: '', desc: '', isDummy: false })

  const village = infoRes?.data
  const stats = gridRes?.data
@@ -161,7 +460,8 @@ function VillageDetailPage() {
  const openEdit = () => {
    setEditForm({
      name: village?.name || '',
-      desc: village?.desc || ''
+      desc: village?.desc || '',
+      isDummy: village?.isDummy ?? false,
    })
    openEditModal()
  }
@@ -188,7 +488,8 @@ function VillageDetailPage() {
        body: JSON.stringify({
          id: village.id,
          name: editForm.name,
-          desc: editForm.desc
+          desc: editForm.desc,
+          isDummy: editForm.isDummy,
        })
      })

@@ -224,6 +525,216 @@ function VillageDetailPage() {
    }
  }

+  const handleDownloadPDF = async () => {
+    if (!village || !stats) return
+    setIsExporting(true)
+    try {
+      const [activityRes, peakRes, logsRes, inactiveRes] = await Promise.all([
+        fetch(API_URLS.graphLogVillages(villageId, 'daily')).then(r => r.json()),
+        fetch(API_URLS.getPeakHours(villageId)).then(r => r.json()),
+        fetch(API_URLS.getRecentVillageLogs(villageId)).then(r => r.json()),
+        fetch(API_URLS.getInactiveUsers(7, villageId, 1)).then(r => r.json()),
+      ])
+
+      const activityData: { label: string; aktivitas: number }[] = activityRes?.data || []
+      const peakHours: { hour: number; label: string; count: number }[] = peakRes?.data?.hours || []
+      const peak: { label: string; count: number } | null = peakRes?.data?.peak || null
+      const recentLogs: { timestamp: string; userName: string; action: string; desc: string }[] = logsRes?.data || []
+      const inactiveUsers: any[] = inactiveRes?.data?.users || []
+      const totalInactive: number = inactiveRes?.data?.total ?? 0
+
+      const generatedAt = dayjs().format('DD MMM YYYY HH:mm')
+
+      const maxActivity = Math.max(...activityData.map(d => d.aktivitas), 1)
+      const activityRows = activityData.map((d, i) => `
+        <tr style="background:${i % 2 === 0 ? '#fff' : '#f9fafb'}">
+          <td style="width:80px;font-size:11px;font-weight:600">${d.label}</td>
+          <td>
+            <div style="background:#e5e7eb;border-radius:4px;height:10px;overflow:hidden">
+              <div style="width:${Math.round((d.aktivitas / maxActivity) * 100)}%;height:100%;background:#2563eb;border-radius:4px"></div>
+            </div>
+          </td>
+          <td style="text-align:right;width:60px;font-weight:700;font-size:11px">${d.aktivitas.toLocaleString()}</td>
+        </tr>`).join('')
+
+      const peakMax = Math.max(...peakHours.map(h => h.count), 1)
+      const peakRows = peakHours.filter(h => h.count > 0).map((h, i) => `
+        <tr style="background:${i % 2 === 0 ? '#fff' : '#f9fafb'}">
+          <td style="font-weight:700;width:70px;font-size:11px">${h.label}</td>
+          <td>
+            <div style="background:#e5e7eb;border-radius:4px;height:8px;overflow:hidden">
+              <div style="width:${Math.round((h.count / peakMax) * 100)}%;height:100%;background:#7c3aed;border-radius:4px"></div>
+            </div>
+          </td>
+          <td style="text-align:right;width:70px;font-weight:600;font-size:11px">${h.count.toLocaleString()}</td>
+        </tr>`).join('')
+
+      const actionColor = (action: string) => {
+        const a = action.toUpperCase()
+        if (a === 'LOGIN') return '#059669'
+        if (a === 'LOGOUT') return '#6b7280'
+        if (a === 'CREATE') return '#2563eb'
+        if (a === 'UPDATE') return '#d97706'
+        if (a === 'DELETE') return '#dc2626'
+        return '#374151'
+      }
+
+      const logRows = recentLogs.map((log, i) => `
+        <tr style="background:${i % 2 === 0 ? '#fff' : '#f9fafb'}">
+          <td style="white-space:nowrap;font-size:11px">${dayjs(log.timestamp).format('DD MMM YYYY HH:mm')}</td>
+          <td style="font-weight:600;font-size:11px">${log.userName}</td>
+          <td><span style="font-size:10px;font-weight:800;color:${actionColor(log.action)}">${log.action}</span></td>
+          <td style="font-size:11px;color:#6b7280">${log.desc || '-'}</td>
+        </tr>`).join('')
+
+      const inactiveRows = inactiveUsers.length === 0
+        ? '<tr><td colspan="4" style="text-align:center;color:#9ca3af;padding:14px">No inactive users in this period.</td></tr>'
+        : inactiveUsers.map((u, i) => `
+          <tr style="background:${i % 2 === 0 ? '#fff' : '#f9fafb'}">
+            <td>
+              <strong style="font-size:11px">${u.name}</strong><br>
+              <span style="font-size:10px;color:#9ca3af">${u.email}</span>
+            </td>
+            <td style="text-align:center;font-size:10px;font-weight:700">${u.role}</td>
+            <td style="font-size:10px">${u.group || '-'}${u.position ? ` · ${u.position}` : ''}</td>
+            <td style="text-align:center">
+              ${u.daysSince === null
+                ? '<span style="color:#9ca3af;font-size:10px">Never</span>'
+                : `<span style="font-weight:700;font-size:10px;color:${u.daysSince > 30 ? '#dc2626' : u.daysSince > 7 ? '#d97706' : '#059669'}">${u.daysSince}d ago</span>`}
+            </td>
+          </tr>`).join('')
+
+      const html = `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>${village.name} — Village Report</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: Arial, sans-serif; color: #111; background: #fff; font-size: 12px; }
+    .cover { background: linear-gradient(135deg, #1d4ed8, #7c3aed); color: white; padding: 36px 40px 28px; }
+    .cover h1 { font-size: 24px; font-weight: 800; margin-bottom: 6px; }
+    .cover p { font-size: 12px; opacity: 0.85; margin-top: 4px; }
+    .summary { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 2px solid #e5e7eb; }
+    .summary-card { padding: 14px 16px; border-right: 1px solid #e5e7eb; }
+    .summary-card:last-child { border-right: none; }
+    .summary-card .label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; margin-bottom: 4px; }
+    .summary-card .value { font-size: 26px; font-weight: 800; }
+    .summary-card .sub { font-size: 10px; color: #9ca3af; margin-top: 2px; }
+    .section { padding: 18px 32px; border-bottom: 1px solid #f3f4f6; }
+    .section h2 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #6b7280; padding-bottom: 8px; border-bottom: 2px solid #e5e7eb; margin-bottom: 14px; }
+    table { width: 100%; border-collapse: collapse; }
+    th { font-size: 9px; font-weight: 700; text-transform: uppercase; color: #6b7280; padding: 7px 10px; border-bottom: 2px solid #e5e7eb; text-align: left; background: #f9fafb; }
+    td { padding: 7px 10px; border-bottom: 1px solid #f3f4f6; vertical-align: middle; line-height: 1.4; }
+    .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
+    .footer { padding: 14px 32px; border-top: 2px solid #e5e7eb; font-size: 10px; color: #9ca3af; text-align: center; }
+    @media print { body { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .section { page-break-inside: avoid; } }
+  </style>
+</head>
+<body>
+
+  <div class="cover">
+    <h1>${village.name}</h1>
+    <p>Village Head (Perbekel): <strong>${village.perbekel || '-'}</strong></p>
+    <p>Status: <strong style="color:${village.isActive ? '#6ee7b7' : '#fca5a5'}">${village.isActive ? 'Active' : 'Inactive'}</strong>${village.isDummy ? ' &nbsp;·&nbsp; <span style="color:#fde68a">Dummy Data</span>' : ''}</p>
+    <p>Created: ${village.createdAt} &nbsp;·&nbsp; Last Updated: ${village.updatedAt || '-'}</p>
+    <p style="margin-top:10px;opacity:0.65">Generated: ${generatedAt}</p>
+  </div>
+
+  <div class="summary">
+    <div class="summary-card">
+      <div class="label">Active Users</div>
+      <div class="value" style="color:#2563eb">${stats.user.active.toLocaleString()}</div>
+      <div class="sub">${stats.user.nonActive} inactive</div>
+    </div>
+    <div class="summary-card">
+      <div class="label">Groups</div>
+      <div class="value" style="color:#7c3aed">${stats.group.active.toLocaleString()}</div>
+      <div class="sub">${stats.group.nonActive} inactive</div>
+    </div>
+    <div class="summary-card">
+      <div class="label">Divisions</div>
+      <div class="value" style="color:#0891b2">${stats.division.active.toLocaleString()}</div>
+      <div class="sub">${stats.division.nonActive} inactive</div>
+    </div>
+    <div class="summary-card">
+      <div class="label">Projects</div>
+      <div class="value" style="color:#d97706">${stats.project.active.toLocaleString()}</div>
+      <div class="sub">${stats.project.nonActive} inactive</div>
+    </div>
+  </div>
+
+  <div class="section">
+    <div class="two-col">
+      <div>
+        <h2>Activity Trend — Last 14 Days</h2>
+        ${activityData.length === 0
+          ? '<p style="color:#9ca3af;font-size:11px;padding:8px 0">No activity data available.</p>'
+          : `<table>
+              <thead><tr><th>Date</th><th>Distribution</th><th style="text-align:right">Count</th></tr></thead>
+              <tbody>${activityRows}</tbody>
+            </table>`}
+      </div>
+      <div>
+        <h2>Peak Activity Hours</h2>
+        ${peak && peak.count > 0
+          ? `<p style="font-size:11px;color:#6b7280;margin-bottom:10px">Busiest hour: <strong>${peak.label}</strong> (${peak.count.toLocaleString()} activities)</p>`
+          : '<p style="font-size:11px;color:#9ca3af;margin-bottom:10px">No peak data available.</p>'}
+        <table>
+          <thead><tr><th>Hour</th><th>Distribution</th><th style="text-align:right">Count</th></tr></thead>
+          <tbody>${peakRows || '<tr><td colspan="3" style="text-align:center;color:#9ca3af;padding:12px">No data</td></tr>'}</tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+
+  <div class="section">
+    <h2>Recent Activity — Last 10 Logs</h2>
+    ${recentLogs.length === 0
+      ? '<p style="color:#9ca3af;font-size:11px">No recent activity recorded.</p>'
+      : `<table>
+          <thead>
+            <tr>
+              <th style="width:18%">Time</th>
+              <th style="width:22%">User</th>
+              <th style="width:10%">Action</th>
+              <th>Description</th>
+            </tr>
+          </thead>
+          <tbody>${logRows}</tbody>
+        </table>`}
+  </div>
+
+  <div class="section">
+    <h2>Inactive Users — No Activity in Last 7 Days (${totalInactive}${totalInactive > inactiveUsers.length ? `, showing first ${inactiveUsers.length}` : ''})</h2>
+    <table>
+      <thead>
+        <tr>
+          <th style="width:32%">Name / Email</th>
+          <th style="text-align:center;width:15%">Role</th>
+          <th style="width:30%">Group / Position</th>
+          <th style="text-align:center;width:13%">Last Activity</th>
+        </tr>
+      </thead>
+      <tbody>${inactiveRows}</tbody>
+    </table>
+  </div>
+
+  <div class="footer">
+    ${village.name} &nbsp;·&nbsp; ${generatedAt} &nbsp;·&nbsp; Desa+ Monitoring System
+  </div>
+
+  <script>window.onload = () => window.print()<\/script>
+</body>
+</html>`
+
+      const win = window.open('', '_blank')
+      if (win) { win.document.write(html); win.document.close() }
+    } finally {
+      setIsExporting(false)
+    }
+  }
+
  const handleConfirmToggle = async () => {
    if (!village) return

@@ -313,10 +824,22 @@ function VillageDetailPage() {

        {/* Action Buttons */}
        <Group gap="sm">
+          <Button
+            variant="light"
+            color="gray"
+            size="sm"
+            radius="md"
+            leftSection={<TbFileText size={16} />}
+            onClick={handleDownloadPDF}
+            loading={isExporting}
+            disabled={!village || !stats}
+          >
+            Download PDF
+          </Button>
          <Button
            variant="filled"
            color={village.isActive ? 'red' : 'green'}
-            leftSection={village.isActive ? <TbPower size={16} /> : <TbPower size={16} />}
+            leftSection={<TbPower size={16} />}
            onClick={openConfirmModal}
            radius="md"
            loading={isUpdating}
@@ -361,7 +884,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,50 +964,52 @@ function VillageDetailPage() {
        ))}
      </SimpleGrid>

-      {/* ── Chart + Info Panels ── */}
-      <Box
-        style={{
-          display: 'grid',
-          gridTemplateColumns: '3fr 1fr',
-          gap: '1rem',
-          alignItems: 'start',
-        }}
-      >
-        {/* Left (3/4): Activity Chart */}
-        <Box style={{ minWidth: 0 }}>
-          <ActivityChart villageId={villageId} />
-        </Box>
+      {/* ── Activity Chart ── */}
+      <ActivityChart villageId={villageId} />

-        {/* 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">
-              <TbCalendar size={14} />
-            </ThemeIcon>
-            <Text fw={700} size="sm">System Information</Text>
-          </Group>
-          <Stack gap={0}>
-            {[
-              { label: 'Date Created', value: village.createdAt },
-              { label: 'Created By', value: '-' },
-              { label: 'Last Updated', value: village.updatedAt },
-            ].map((item, idx, arr) => (
-              <Group
-                key={item.label}
-                justify="space-between"
-                py="xs"
-                wrap="wrap"
-                style={{
-                  borderBottom: idx < arr.length - 1 ? '1px solid var(--mantine-color-default-border)' : 'none',
-                }}
-              >
-                <Text size="xs" c="dimmed">{item.label}</Text>
-                <Text size="xs" fw={600} ta="right">{item.value}</Text>
-              </Group>
-            ))}
-          </Stack>
-        </Paper>
-      </Box>
+      {/* ── Peak Hours Chart ── */}
+      <PeakHoursChart villageId={villageId} />
+
+      {/* ── Recent Logs + System Info ── */}
+      <Grid gutter="md" align="flex-start">
+        <Grid.Col span={{ base: 12, md: 8 }}>
+          <RecentVillageLogs villageId={villageId} />
+        </Grid.Col>
+
+        <Grid.Col span={{ base: 12, md: 4 }}>
+          <Paper withBorder radius="xl" p="lg">
+            <Group gap="xs" mb="md">
+              <ThemeIcon size={28} radius="md" variant="light" color="teal">
+                <TbCalendar size={14} />
+              </ThemeIcon>
+              <Text fw={700} size="sm">System Information</Text>
+            </Group>
+            <Stack gap={0}>
+              {[
+                { label: 'Date Created', value: village.createdAt },
+                { label: 'Created By', value: '-' },
+                { label: 'Last Updated', value: village.updatedAt },
+              ].map((item, idx, arr) => (
+                <Group
+                  key={item.label}
+                  justify="space-between"
+                  py="xs"
+                  wrap="wrap"
+                  style={{
+                    borderBottom: idx < arr.length - 1 ? '1px solid var(--mantine-color-default-border)' : 'none',
+                  }}
+                >
+                  <Text size="xs" c="dimmed">{item.label}</Text>
+                  <Text size="xs" fw={600} ta="right">{item.value}</Text>
+                </Group>
+              ))}
+            </Stack>
+          </Paper>
+        </Grid.Col>
+      </Grid>
+
+      {/* ── Inactive Users ── */}
+      <InactiveVillageUsers villageId={villageId} />

      {/* ── Confirmation Modal ── */}
      <Modal
@@ -526,6 +1064,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
--- a/src/frontend/routes/apps.$appId.villages.index.tsx
+++ b/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}
--- a/src/frontend/routes/bug-reports.tsx
+++ b/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>
@@ -479,27 +700,29 @@ function ListErrorsPage() {
                    }}
                  >
                    <Accordion.Control>
-                      <Group wrap="nowrap">
+                      <Group wrap="nowrap" style={{ minWidth: 0 }}>
                        <ThemeIcon
                          color={STATUS_COLOR[bug.status] ?? 'gray'}
                          variant="light"
                          size="lg"
                          radius="md"
+                          style={{ flexShrink: 0 }}
                        >
                          <TbAlertTriangle size={20} />
                        </ThemeIcon>
-                        <Box style={{ flex: 1 }}>
-                          <Group justify="space-between">
-                            <Text size="sm" fw={600} lineClamp={1}>{bug.description}</Text>
+                        <Box style={{ flex: 1, minWidth: 0 }}>
+                          <Group wrap="nowrap" gap="xs">
+                            <Text size="sm" fw={600} lineClamp={1} style={{ flex: 1, minWidth: 0 }}>{bug.description}</Text>
                            <Badge
                              color={STATUS_COLOR[bug.status] ?? 'gray'}
                              variant="dot"
                              size="sm"
+                              style={{ flexShrink: 0 }}
                            >
                              {STATUS_LABEL[bug.status] ?? bug.status}
                            </Badge>
                          </Group>
-                          <Text size="xs" c="dimmed">
+                          <Text size="xs" c="dimmed" lineClamp={1}>
                            {dayjs(bug.createdAt).format('D MMM YYYY, HH:mm')} · {bug.appId?.toUpperCase()} · v{bug.affectedVersion}
                          </Text>
                        </Box>
--- a/src/frontend/routes/dashboard.tsx
+++ b/src/frontend/routes/dashboard.tsx
@@ -198,15 +198,15 @@ function DashboardPage() {
            </Button>
          </Group>

-          <Paper withBorder radius="2xl" className="glass" p="md">
-            <Table className="data-table" verticalSpacing="sm">
+          <Paper withBorder radius="2xl" className="glass" p="md" style={{ overflowX: 'auto' }}>
+            <Table className="data-table" verticalSpacing="sm" style={{ minWidth: 560 }}>
              <Table.Thead>
                <Table.Tr>
-                  <Table.Th>App</Table.Th>
+                  <Table.Th style={{ whiteSpace: 'nowrap' }}>App</Table.Th>
                  <Table.Th>Error Message</Table.Th>
-                  <Table.Th>Version</Table.Th>
-                  <Table.Th>Reported</Table.Th>
-                  <Table.Th>Status</Table.Th>
+                  <Table.Th style={{ whiteSpace: 'nowrap' }}>Version</Table.Th>
+                  <Table.Th style={{ whiteSpace: 'nowrap' }}>Reported</Table.Th>
+                  <Table.Th style={{ whiteSpace: 'nowrap' }}>Status</Table.Th>
                </Table.Tr>
              </Table.Thead>
              <Table.Tbody>
@@ -227,7 +227,7 @@ function DashboardPage() {
                  </Table.Tr>
                ) : recentErrors.map((error: any) => (
                  <Table.Tr key={error.id}>
-                    <Table.Td>
+                    <Table.Td style={{ whiteSpace: 'nowrap' }}>
                      <Text fw={600} size="sm" tt="uppercase">{error.app}</Text>
                    </Table.Td>
                    <Table.Td style={{ maxWidth: 280 }}>
@@ -237,13 +237,13 @@ function DashboardPage() {
                        </Text>
                      </Tooltip>
                    </Table.Td>
-                    <Table.Td>
+                    <Table.Td style={{ whiteSpace: 'nowrap' }}>
                      <Badge variant="light" color="gray" size="sm">v{error.version}</Badge>
                    </Table.Td>
-                    <Table.Td>
+                    <Table.Td style={{ whiteSpace: 'nowrap' }}>
                      <Text size="xs" c="dimmed">{formatTimeAgo(error.time)}</Text>
                    </Table.Td>
-                    <Table.Td>
+                    <Table.Td style={{ whiteSpace: 'nowrap' }}>
                      <Badge
                        color={SEVERITY_COLOR[error.severity] ?? 'gray'}
                        variant="light"
--- a/src/frontend/routes/dev.tsx
+++ b/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
--- a/src/frontend/routes/index.tsx
+++ b/src/frontend/routes/index.tsx
@@ -1,7 +1,7 @@
-import { Button, Container, Group, Stack, Text, Title } from '@mantine/core'
+import { Button, Box, Center, Stack, Text, Title } from '@mantine/core'
 import { Link, createFileRoute } from '@tanstack/react-router'
-import { SiBun } from 'react-icons/si'
-import { TbBrandReact, TbLogin, TbRocket } from 'react-icons/tb'
+import { TbLogin } from 'react-icons/tb'
+import logoUrl from '../../logo.svg'

 export const Route = createFileRoute('/')({
  component: HomePage,
@@ -9,28 +9,67 @@ export const Route = createFileRoute('/')({

 function HomePage() {
  return (
-    <Container size="sm" py="xl">
-      <Stack align="center" gap="lg">
-        <Group gap="lg">
-          <SiBun size={64} color="#fbf0df" />
-          <TbBrandReact size={64} color="#61dafb" />
-        </Group>
+    <Box style={{ minHeight: '100vh', background: '#1a1a2e', position: 'relative', overflow: 'hidden' }}>
+      {/* background blobs */}
+      <Box style={{
+        position: 'absolute', top: '-15%', left: '-10%',
+        width: 500, height: 500, borderRadius: '50%',
+        background: 'radial-gradient(circle, rgba(124,58,237,0.25) 0%, transparent 70%)',
+        pointerEvents: 'none',
+      }} />
+      <Box style={{
+        position: 'absolute', bottom: '-20%', right: '-10%',
+        width: 600, height: 600, borderRadius: '50%',
+        background: 'radial-gradient(circle, rgba(79,70,229,0.2) 0%, transparent 70%)',
+        pointerEvents: 'none',
+      }} />
+      <Box style={{
+        position: 'absolute', top: '50%', left: '60%',
+        width: 300, height: 300, borderRadius: '50%',
+        background: 'radial-gradient(circle, rgba(168,85,247,0.1) 0%, transparent 70%)',
+        pointerEvents: 'none',
+      }} />

-        <Title order={1}>Bun + Elysia + Vite + React</Title>
+      <Center mih="100vh" style={{ position: 'relative', zIndex: 1 }}>
+        <Stack align="center" gap="xl">
+          <img
+            src={logoUrl}
+            width={72}
+            height={72}
+            alt="logo"
+            style={{ borderRadius: 20, boxShadow: '0 4px 32px rgba(124,58,237,0.5)', display: 'block' }}
+          />

-        <Text c="dimmed" ta="center" maw={480}>
-          Full-stack starter template with Mantine UI, TanStack Router, and session-based auth.
-        </Text>
+          <Stack align="center" gap={8}>
+            <Title
+              order={1}
+              c="white"
+              fw={800}
+              ta="center"
+              style={{ fontSize: '2.6rem', letterSpacing: '-0.5px', lineHeight: 1.15 }}
+            >
+              Monitoring System
+            </Title>
+            <Text c="dimmed" ta="center" size="md" maw={320} lh={1.6}>
+              Pantau semua aplikasi dalam satu tempat, real-time.
+            </Text>
+          </Stack>

-        <Group>
-          <Button component={Link} to="/login" leftSection={<TbLogin size={18} />} variant="filled">
-            Login
+          <Button
+            component={Link}
+            to="/login"
+            leftSection={<TbLogin size={18} />}
+            size="md"
+            style={{
+              background: 'linear-gradient(135deg, #4f46e5, #7c3aed)',
+              border: 'none',
+              paddingInline: 32,
+            }}
+          >
+            Masuk
          </Button>
-          <Button component={Link} to="/dashboard" leftSection={<TbRocket size={18} />} variant="light">
-            Dashboard
-          </Button>
-        </Group>
-      </Stack>
-    </Container>
+        </Stack>
+      </Center>
+    </Box>
  )
 }
--- a/src/frontend/routes/login.tsx
+++ b/src/frontend/routes/login.tsx
@@ -1,10 +1,11 @@
 import { useLogin } from '@/frontend/hooks/useAuth'
+import logoUrl from '../../logo.svg'
 import {
  Alert,
+  Box,
  Button,
  Center,
  Divider,
-  Paper,
  PasswordInput,
  Stack,
  Text,
@@ -38,6 +39,14 @@ export const Route = createFileRoute('/login')({
  component: LoginPage,
 })

+const OAUTH_ERRORS: Record<string, string> = {
+  google_denied: 'Login dengan Google dibatalkan.',
+  invalid_state: 'Sesi OAuth tidak valid, silakan coba lagi.',
+  token_failed: 'Gagal menukar token Google, silakan coba lagi.',
+  userinfo_failed: 'Gagal mengambil info akun Google, silakan coba lagi.',
+  account_disabled: 'Akun Anda telah dinonaktifkan. Hubungi admin untuk informasi lebih lanjut.',
+}
+
 function LoginPage() {
  const login = useLogin()
  const { error: searchError } = Route.useSearch()
@@ -49,69 +58,117 @@ function LoginPage() {
    login.mutate({ email, password })
  }

+  const errorMessage = login.isError
+    ? login.error.message
+    : searchError
+      ? (OAUTH_ERRORS[searchError] ?? 'Login dengan Google gagal, silakan coba lagi.')
+      : null
+
  return (
-    <Center mih="100vh">
-      <Paper shadow="md" p="xl" radius="md" w={400} withBorder>
-        <form onSubmit={handleSubmit}>
-          <Stack gap="md">
-            <Title order={2} ta="center">
-              Login
-            </Title>
+    <Box style={{ minHeight: '100vh', background: '#1a1a2e', position: 'relative', overflow: 'hidden' }}>
+      {/* background blobs */}
+      <Box style={{
+        position: 'absolute', top: '-15%', left: '-10%',
+        width: 500, height: 500, borderRadius: '50%',
+        background: 'radial-gradient(circle, rgba(124,58,237,0.25) 0%, transparent 70%)',
+        pointerEvents: 'none',
+      }} />
+      <Box style={{
+        position: 'absolute', bottom: '-20%', right: '-10%',
+        width: 600, height: 600, borderRadius: '50%',
+        background: 'radial-gradient(circle, rgba(79,70,229,0.2) 0%, transparent 70%)',
+        pointerEvents: 'none',
+      }} />
+      <Box style={{
+        position: 'absolute', top: '50%', left: '60%',
+        width: 300, height: 300, borderRadius: '50%',
+        background: 'radial-gradient(circle, rgba(168,85,247,0.1) 0%, transparent 70%)',
+        pointerEvents: 'none',
+      }} />

-            {(login.isError || searchError) && (
-              <Alert icon={<TbAlertCircle size={16} />} color="red" variant="light">
-                {login.isError ? login.error.message : (
-                  {
-                    google_denied: 'Login dengan Google dibatalkan.',
-                    invalid_state: 'Sesi OAuth tidak valid, silakan coba lagi.',
-                    token_failed: 'Gagal menukar token Google, silakan coba lagi.',
-                    userinfo_failed: 'Gagal mengambil info akun Google, silakan coba lagi.',
-                    account_disabled: 'Akun Anda telah dinonaktifkan. Hubungi admin untuk informasi lebih lanjut.',
-                  }[searchError ?? ''] ?? 'Login dengan Google gagal, silakan coba lagi.'
-                )}
-              </Alert>
-            )}
+      <Center mih="100vh" style={{ position: 'relative', zIndex: 1 }}>
+        <Box
+          p="xl"
+          w={400}
+          style={{
+            background: 'rgba(36,36,36,0.75)',
+            backdropFilter: 'blur(20px)',
+            borderRadius: 20,
+            border: '1px solid rgba(124,58,237,0.35)',
+            boxShadow: '0 0 0 1px rgba(124,58,237,0.1), 0 8px 32px rgba(0,0,0,0.4), 0 0 60px rgba(124,58,237,0.12)',
+          }}
+        >
+          <form onSubmit={handleSubmit}>
+            <Stack gap="md">
+              {/* header */}
+              <Stack gap={8} align="center" mb={4}>
+                <img
+                  src={logoUrl}
+                  width={56}
+                  height={56}
+                  alt="logo"
+                  style={{ borderRadius: 14, boxShadow: '0 4px 20px rgba(124,58,237,0.45)', display: 'block' }}
+                />
+                <Title order={2} fw={700} ta="center" c="white">
+                  Monitoring System
+                </Title>
+                <Text c="dimmed" size="sm" ta="center">
+                  Masuk untuk melanjutkan
+                </Text>
+              </Stack>

-            <TextInput
-              label="Email"
-              placeholder="email@example.com"
-              leftSection={<TbMail size={16} />}
-              value={email}
-              onChange={(e) => setEmail(e.currentTarget.value)}
-              required
-            />
+              {errorMessage && (
+                <Alert icon={<TbAlertCircle size={16} />} color="red" variant="light">
+                  {errorMessage}
+                </Alert>
+              )}

-            <PasswordInput
-              label="Password"
-              placeholder="Password"
-              leftSection={<TbLock size={16} />}
-              value={password}
-              onChange={(e) => setPassword(e.currentTarget.value)}
-              required
-            />
+              <TextInput
+                label="Email"
+                placeholder="email@example.com"
+                leftSection={<TbMail size={16} />}
+                value={email}
+                onChange={(e) => setEmail(e.currentTarget.value)}
+                required
+              />

-            <Button
-              type="submit"
-              fullWidth
-              leftSection={<TbLogin size={18} />}
-              loading={login.isPending}
-            >
-              Sign in
-            </Button>
+              <PasswordInput
+                label="Password"
+                placeholder="Password"
+                leftSection={<TbLock size={16} />}
+                value={password}
+                onChange={(e) => setPassword(e.currentTarget.value)}
+                required
+              />

-            <Divider label="or" labelPosition="center" />
+              <Button
+                type="submit"
+                fullWidth
+                leftSection={<TbLogin size={18} />}
+                loading={login.isPending}
+                mt={4}
+                style={{
+                  background: 'linear-gradient(135deg, #4f46e5, #7c3aed)',
+                  border: 'none',
+                }}
+              >
+                Sign in
+              </Button>

-            <Button
-              variant="default"
-              fullWidth
-              leftSection={<FcGoogle size={18} />}
-              onClick={() => { window.location.href = '/api/auth/google' }}
-            >
-              Continue with Google
-            </Button>
-          </Stack>
-        </form>
-      </Paper>
-    </Center>
+              <Divider label="atau" labelPosition="center" />
+
+              <Button
+                variant="default"
+                fullWidth
+                leftSection={<FcGoogle size={18} />}
+                onClick={() => { window.location.href = '/api/auth/google' }}
+              >
+                Continue with Google
+              </Button>
+            </Stack>
+          </form>
+        </Box>
+      </Center>
+    </Box>
  )
 }
--- a/src/frontend/routes/logs.tsx
+++ b/src/frontend/routes/logs.tsx
@@ -1,6 +1,7 @@
 import {
  ActionIcon,
  Badge,
+  Box,
  Container,
  Group,
  Loader,
@@ -100,39 +101,43 @@ function GlobalLogsPage() {
          </Group>

          <Paper withBorder radius="xl" p="md" className="glass">
-            <Group gap="sm" wrap="wrap" align="flex-end">
-              <Select
-                label="User"
-                placeholder="All users"
-                value={operatorId}
-                onChange={(v) => { setOperatorId(v ?? 'all'); setPage(1) }}
-                data={operatorOptions}
-                w={200}
-                clearable
-                size="sm"
-              />
-              <DatePickerInput
-                type="range"
-                label="Date range"
-                placeholder="Pick a date range"
-                value={dateRange}
-                onChange={(v) => { setDateRange(v); setPage(1) }}
-                locale="id"
-                valueFormat="DD MMM YYYY"
-                clearable
-                w={280}
-                size="sm"
-              />
+            <Stack gap="md">
+              <Group gap="sm" wrap="wrap" align="flex-end">
+                <Select
+                  label="User"
+                  placeholder="All users"
+                  value={operatorId}
+                  onChange={(v) => { setOperatorId(v ?? 'all'); setPage(1) }}
+                  data={operatorOptions}
+                  style={{ flex: 1, minWidth: 160 }}
+                  clearable
+                  size="sm"
+                />
+                <DatePickerInput
+                  type="range"
+                  label="Date range"
+                  placeholder="Pick a date range"
+                  value={dateRange}
+                  onChange={(v) => { setDateRange(v); setPage(1) }}
+                  locale="id"
+                  valueFormat="DD MMM YYYY"
+                  clearable
+                  style={{ flex: 2, minWidth: 220 }}
+                  size="sm"
+                />
+              </Group>
              <Stack gap={4}>
                <Text size="xs" fw={500} c="dimmed">Action type</Text>
-                <SegmentedControl
-                  value={type}
-                  onChange={(v) => { setType(v); setPage(1) }}
-                  size="sm"
-                  data={LOG_TYPES.map((t) => ({ label: LOG_TYPE_LABEL[t] ?? t, value: t }))}
-                />
+                <Box style={{ overflowX: 'auto' }}>
+                  <SegmentedControl
+                    value={type}
+                    onChange={(v) => { setType(v); setPage(1) }}
+                    size="sm"
+                    data={LOG_TYPES.map((t) => ({ label: LOG_TYPE_LABEL[t] ?? t, value: t }))}
+                  />
+                </Box>
              </Stack>
-            </Group>
+            </Stack>
          </Paper>

          {isLoading && !data ? (
--- a/src/frontend/routes/users.tsx
+++ b/src/frontend/routes/users.tsx
@@ -309,14 +309,15 @@ function UsersPage() {
                  )}
                </Group>

-                <Paper withBorder radius="2xl" className="glass" p={0} style={{ overflow: 'hidden' }}>
+                <Paper withBorder radius="2xl" className="glass" p={0} style={{ overflowX: 'auto' }}>
+                  <Table.ScrollContainer minWidth={480}>
                  <Table className="data-table" verticalSpacing="md" highlightOnHover>
                    <Table.Thead>
                      <Table.Tr>
                        <Table.Th>Name & Contact</Table.Th>
-                        <Table.Th>Role</Table.Th>
-                        <Table.Th>Joined</Table.Th>
-                        <Table.Th>Actions</Table.Th>
+                        <Table.Th style={{ whiteSpace: 'nowrap' }}>Role</Table.Th>
+                        <Table.Th style={{ whiteSpace: 'nowrap' }}>Joined</Table.Th>
+                        <Table.Th style={{ whiteSpace: 'nowrap' }}>Actions</Table.Th>
                      </Table.Tr>
                    </Table.Thead>
                    <Table.Tbody>
@@ -341,8 +342,8 @@ function UsersPage() {
                        operators.map((user: any) => (
                          <Table.Tr key={user.id}>
                            <Table.Td style={{ opacity: user.active === false ? 0.45 : 1 }}>
-                              <Group gap="sm">
-                                <Box style={{ position: 'relative' }}>
+                              <Group gap="sm" wrap="nowrap">
+                                <Box style={{ position: 'relative', flexShrink: 0 }}>
                                  <Avatar
                                    size="sm"
                                    radius="xl"
@@ -384,7 +385,7 @@ function UsersPage() {
                                {ROLE_LABEL[user.role] ?? user.role}
                              </Badge>
                            </Table.Td>
-                            <Table.Td style={{ opacity: user.active === false ? 0.45 : 1 }}>
+                            <Table.Td style={{ opacity: user.active === false ? 0.45 : 1, whiteSpace: 'nowrap' }}>
                              <Text size="xs" fw={500} c={user.active === false ? 'dimmed' : undefined}>
                                {new Date(user.createdAt).toLocaleDateString('en-GB', {
                                  day: 'numeric',
@@ -440,6 +441,7 @@ function UsersPage() {
                      )}
                    </Table.Tbody>
                  </Table>
+                  </Table.ScrollContainer>
                </Paper>

                {response?.totalPages > 1 && (
--- a/src/lib/presence.ts
+++ b/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()
 }
--- a/src/lib/seafile.ts
+++ b/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, '')}`
-}
-
Author	SHA1	Message	Date
amaliadwiy	ed9c1da878	feat: tambahkan PDF report per desa di halaman detail desa - Tombol Download PDF di sebelah tombol Edit dan Deactivate - Laporan memuat: header desa (nama, perbekel, status, tanggal), 4 summary card (users, groups, divisions, projects), activity trend 14 hari, peak hours, 10 log aktivitas terakhir, dan tabel inactive users 7 hari terakhir	2026-05-28 15:49:10 +08:00
amaliadwiy	3e1a923d6a	feat: PDF report lengkap dengan summary, top 5, attention villages, trend, peak hours - PDF report memuat 6 ringkasan kartu: desa aktif/nonaktif/no-activity, total aktivitas, pengguna aktif/nonaktif - Section Top 5 desa paling aktif dengan progress bar dan medal emoji - Section Villages Needing Attention untuk desa nonaktif atau tanpa aktivitas - Tabel semua desa dengan kolom trend vs periode sebelumnya - Section Peak Activity Hours dalam layout dua kolom bersama Top 5 - Menggunakan window.open + HTML string untuk output yang bersih dan terbaca	2026-05-28 15:39:57 +08:00
amaliadwiy	a2b3c9bc85	feat: tambah section inactive users di halaman detail desa	2026-05-28 15:14:54 +08:00
amaliadwiy	733a36bba7	feat: tambah fitur export CSV untuk logs dan users	2026-05-28 15:06:18 +08:00
amaliadwiy	1f18001c86	feat: tambah peak hours chart di halaman village detail	2026-05-28 14:47:16 +08:00
amaliadwiy	0e2c97df47	feat: tambah filter inactive since di halaman user management	2026-05-28 14:32:56 +08:00
amaliadwiy	75d2ef5b4c	fix: ubah teks stale villages alert ke bahasa inggris	2026-05-28 14:19:21 +08:00
amaliadwiy	b7aecea433	feat: nama desa di activity logs bisa diklik menuju village detail	2026-05-28 14:18:08 +08:00
amaliadwiy	2e64c1c2a6	feat: tambah stale villages alert card di halaman overview desa-plus	2026-05-28 14:14:40 +08:00
amaliadwiy	3c188e66d2	feat: tambah kolom Last Activity di tabel user management desa-plus	2026-05-28 14:09:46 +08:00
amaliadwiy	e82443ee03	chore: bump version to 0.1.17	2026-05-26 16:28:44 +08:00
amaliadwiy	501fbde118	fix: perbaiki layout tabel dan accordion di layar sempit Co-authored-by: amaliadwiy <amaliadwiy@users.noreply.github.com>	2026-05-26 15:11:25 +08:00
amaliadwiy	fe4ddf686e	fix: perbaiki layout tabel User Management agar tidak overflow di layar sempit	2026-05-26 15:00:47 +08:00
amaliadwiy	fe83fd6025	fix: perbaiki layout accordion header Bug Reports agar badge status selalu terlihat	2026-05-26 14:50:47 +08:00
amaliadwiy	457f36be06	fix: perbaiki layout filter Activity Logs agar tidak overflow	2026-05-26 14:43:59 +08:00
amaliadwiy	5002fd1519	fix: perbaiki layout table Recent Error Reports di dashboard Kolom App, Version, Reported, dan Status tidak lagi wrap atau terpotong. Tambah horizontal scroll pada container dan minWidth pada table.	2026-05-26 14:37:28 +08:00
amaliadwiy	8aaec351cf	Merge pull request 'amalia/25-mei-26' (#26 ) from amalia/25-mei-26 into main Reviewed-on: #26	2026-05-25 17:33:49 +08:00
amaliadwiy	ed49f2e4d1	chore: bump version to 0.1.16	2026-05-25 15:13:10 +08:00
amaliadwiy	f368e1d31b	feat: bug statistics + village detail dashboard enhancement - 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	2026-05-25 15:00:33 +08:00
amaliadwiy	2921f604a9	chore: tambah .claude/ ke .gitignore	2026-05-25 12:03:19 +08:00
amaliadwiy	a19846f589	feat: copy full API key on-demand di halaman dev Sebelumnya copy button mengcopy key yang sudah ter-mask dari list endpoint Desa+ API. Sekarang klik copy fetch full key via GET /api-keys/:id lalu salin ke clipboard.	2026-05-25 11:59:54 +08:00
amaliadwiy	e32addbc85	feat: notifikasi real-time bug baru via WebSocket - presence.ts: tambah notifSubs (ADMIN+DEVELOPER) dan broadcastNotification - app.ts: broadcast new_bug event setelah bug dibuat, update WS handler - usePresence: terima callback onNewBug, expose NewBugPayload type - DashboardLayout: pasang usePresence, tampilkan Mantine notification saat bug baru masuk	2026-05-25 11:35:21 +08:00
amaliadwiy	8c33003b17	feat: debounce search, tambah filter source & date range di bug-reports, hapus seafile.ts - Debounce search input (400ms, min 3 karakter) sesuai konvensi - Tambah filter source (QC/SYSTEM/USER) dan date range di bug-reports - Backend /api/bugs support query param source, dateFrom, dateTo - Update API_URLS.getBugs dengan param baru - Hapus seafile.ts (dead code, tidak digunakan)	2026-05-25 11:31:37 +08:00
amaliadwiy	cc81c8b91e	Merge pull request 'amalia/22-mei-26' (#25 ) from amalia/22-mei-26 into main Reviewed-on: #25	2026-05-22 17:40:30 +08:00
amaliadwiy	5515401614	fix: workflow dispatch ref dari main ke stg Publish dan re-pull workflow harus di-trigger dari branch stg, bukan main, agar kode yang di-build sesuai dengan yang di-deploy ke stg.	2026-05-22 17:30:19 +08:00
amaliadwiy	2e722fd8e3	chore: bump version to 0.1.15	2026-05-22 17:24:10 +08:00
amaliadwiy	f8c8aeed40	fix: deploy tool push ke remote build bukan origin Sebelumnya push ke origin (Gitea) dengan branch build/stg, seharusnya ke remote build (GitHub) branch stg.	2026-05-22 17:23:48 +08:00
amaliadwiy	312aaf9dd8	chore: bump version to 0.1.14	2026-05-22 17:11:12 +08:00
amaliadwiy	7d879d1901	feat: add show/hide and copy for API keys on dev page - Display client key and server key on Settings app cards with toggle visibility and copy button - Hide API keys table in Desa Mandiri Keys tab behind toggle + copy - Add eye toggle to password inputs in Add App and Edit API Config modals - Backend now returns apiKey and clientApiKey in apps list endpoint	2026-05-22 17:10:36 +08:00
amaliadwiy	4464f42da3	chore: bump version to 0.1.13	2026-05-22 14:29:21 +08:00
amaliadwiy	0846ac924c	feat: time range selector & area chart improvements - Add 7D/30D/3M toggle on Daily Activity and Comparison Between Villages charts - Switch LineChart to AreaChart with fillOpacity 0.4 for bold gradient fill - Fix broken tooltip on all charts with custom dark card content - Apply consistent chart style (tickLine, gridAxis, glow) to village detail page - api.ts: getDailyActivity and getComparisonActivity now accept range param	2026-05-22 14:16:31 +08:00
amaliadwiy	91dead0082	fix: resolve 5 bugs on app overview page - Migrate useQuery to useSWR for consistency (no mixed fetching) - Fix trend badge: guard against undefined grid and NaN comparison - Fix trend badge: hide when increase is exactly 0 - Fix version modal: use gridRef so background refetch cannot overwrite user edits - ErrorDataTable: migrate to useSWR, expose refresh() via forwardRef so the refresh button at the top also reloads the error table	2026-05-22 12:15:42 +08:00
amaliadwiy	7808de0db3	docs: split CLAUDE.md into focused reference files Move Common Commands to docs/COMMANDS.md and add docs/CONVENTIONS.md for frontend patterns (SWR, filters, Mantine, routing, API URLs). CLAUDE.md now only contains runtime rules and pointers.	2026-05-22 12:08:39 +08:00
amaliadwiy	0afc2e271a	feat: improve logs page with debounce, action/village/date filters, and timestamp fix	2026-05-22 11:37:37 +08:00
amaliadwiy	603a0a04b7	feat: server-side filter, village filter, and sortable columns on users page	2026-05-22 11:17:38 +08:00
amaliadwiy	ed9f59f404	feat: add status and role filter on users page	2026-05-22 11:07:01 +08:00
amaliadwiy	b79c63a5e8	refactor: improve users page code quality - extract shared UserFormFields component to eliminate form duplication between Add and Edit modals - debounce search input (400ms) to prevent excessive API calls - fix validation messages to show human-readable labels instead of internal field names - fix pagination visibility condition (totalPage > 1) - remove unused TbEdit import	2026-05-22 11:04:56 +08:00
amaliadwiy	4d5c2bf632	Merge pull request 'amalia/20-mei-26' (#24 ) from amalia/20-mei-26 into main Reviewed-on: #24	2026-05-20 17:23:15 +08:00
amaliadwiy	c782f956e0	chore: bump version to 0.1.12	2026-05-20 14:08:35 +08:00
amaliadwiy	515ee01d53	chore: bump version to 0.1.11	2026-05-20 13:57:48 +08:00
amaliadwiy	058dd95b4f	refactor: rename and reorder dev panel tabs for clarity - Rename "API Keys" → "Desa Mandiri Keys" (tab + panel title + description) - Rename "Settings" → "App Config" (tab + panel title) - Move "Desa Mandiri Keys" to last position with a divider separator - Import Divider from @mantine/core	2026-05-20 12:32:06 +08:00
amaliadwiy	ef2183ffb7	chore: bump version to 0.1.10	2026-05-19 15:40:05 +08:00
amaliadwiy	9afe9297e0	Merge pull request 'amalia/18-mei-26' (#23 ) from amalia/18-mei-26 into main Reviewed-on: #23	2026-05-18 17:26:01 +08:00
amaliadwiy	f98fb51cfd	feat: tambah field isApprover pada edit user modal	2026-05-18 16:42:32 +08:00
amaliadwiy	3b8eabc111	fix: gender select value M/F instead of Male/Female	2026-05-18 16:31:43 +08:00
amaliadwiy	88ddb7527e	Merge pull request 'chore: bump version to 0.1.9' (#22 ) from amalia/15-mei-26 into main Reviewed-on: #22	2026-05-15 14:22:43 +08:00
amaliadwiy	abca720f89	chore: bump version to 0.1.9	2026-05-15 11:51:57 +08:00
amaliadwiy	a69b0aad48	Merge pull request 'upd: setting api key sistem desa mandiri' (#21 ) from amalia/13-mei-26 into main Reviewed-on: #21	2026-05-13 17:24:37 +08:00
amaliadwiy	2cb061ea7f	upd: setting api key sistem desa mandiri	2026-05-13 17:23:27 +08:00
amaliadwiy	a53309bf15	Merge pull request 'amalia/12-mei-26' (#20 ) from amalia/12-mei-26 into main Reviewed-on: #20	2026-05-12 17:24:25 +08:00
amaliadwiy	b75a51727b	chore: bump version to 0.1.8	2026-05-12 15:00:59 +08:00
amaliadwiy	6fdcc7f6ec	fix: import logo as asset instead of hardcoded /src path	2026-05-12 15:00:44 +08:00
amaliadwiy	48118cad40	chore: bump version to 0.1.7	2026-05-12 14:27:39 +08:00
amaliadwiy	3cf656951d	Merge remote-tracking branch 'origin/build/stg' into amalia/12-mei-26	2026-05-12 14:27:33 +08:00
amaliadwiy	7ca78ad39d	chore: bump version to 0.1.6	2026-05-12 14:27:12 +08:00
amaliadwiy	18f719f551	Merge remote-tracking branch 'build/stg' into amalia/12-mei-26	2026-05-12 14:26:49 +08:00
amaliadwiy	fced7d4c1c	feat: show isDummy flag on village detail and list pages	2026-05-12 14:10:29 +08:00
amaliadwiy	b39d1d5099	fix: update reset filters button style and remove filter icon	2026-05-12 11:47:48 +08:00
amaliadwiy	1831e757cd	Merge pull request 'amalia/07-mei-26' (#19 ) from amalia/07-mei-26 into main Reviewed-on: #19	2026-05-07 17:36:54 +08:00
amaliadwiy	f926ab2701	feat: add colored top border to stats cards	2026-05-07 12:21:08 +08:00
amaliadwiy	032386a549	feat: redesign login and splash screen with playful visual lift	2026-05-07 12:08:34 +08:00
amaliadwiy	5e44aa9021	chore: bump version to 0.1.6	2026-05-07 11:14:03 +08:00
amaliadwiy	273e4041e8	Merge branch 'amalia/05-mei-26' into stg	2026-05-07 11:13:13 +08:00
amaliadwiy	f469faf740	fix: add Secure flag to session cookies in production	2026-05-07 11:12:30 +08:00
amaliadwiy	f3c90ba290	chore: bump version to 0.1.4	2026-05-07 11:11:25 +08:00
amaliadwiy	d898671be9	Merge pull request 'amalia/05-mei-26' (#18 ) from amalia/05-mei-26 into main Reviewed-on: #18	2026-05-05 17:28:45 +08:00
amaliadwiy	aea1cc1be2	chore: bump version to 0.1.5	2026-05-05 14:21:05 +08:00
amaliadwiy	77ccf4cf33	Merge remote-tracking branch 'build/stg' into stg	2026-05-05 14:19:46 +08:00
amaliadwiy	a50a9d6456	chore: bump version to 0.1.4	2026-05-05 13:56:39 +08:00
amaliadwiy	6cc86dafd8	Merge branch 'amalia/30-apr-26' into stg	2026-04-30 16:01:06 +08:00
amaliadwiy	73849304ae	Merge branch 'stg' of https://github.com/bipprojectbali/monitoring-app into stg	2026-04-29 17:26:48 +08:00
amaliadwiy	6258c580a8	Merge branch 'amalia/29-apr-26' into stg	2026-04-29 17:24:52 +08:00
amaliadwiy	292e338a39	chore: bump version to 0.1.1 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-29 17:12:18 +08:00
amaliadwiy	90280fcac7	chore: bump version to 0.1.1 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-29 16:51:05 +08:00
Amalia	21e2923c02	Merge pull request #1 from bipprojectbali/amalia/29-apr-26 Amalia/29 apr 26	2026-04-29 14:00:13 +08:00