Merge pull request 'amalia/28-mei-26' (#27) from amalia/28-mei-26 into main

Reviewed-on: #27

.gitignore

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

CLAUDE.md

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

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=="],

docs/COMMANDS.md

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

docs/CONVENTIONS.md

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

index.html

@@ -4,9 +4,10 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="color-scheme" content="dark" />
+    <meta name="description" content="Monitoring System — real-time dashboard for your applications" />
     <base href="/" />
     <link rel="icon" type="image/svg+xml" href="/src/logo.svg" />
-    <title>My App</title>
+    <title>Monitoring System</title>
     <style>
       /* Prevent white flash — dark background immediately */
       html, body {
@@ -25,7 +26,7 @@
         align-items: center;
         justify-content: center;
         background-color: #242424;
-        transition: opacity 0.3s ease;
+        transition: opacity 0.4s ease;
       }
       #splash.fade-out {
         opacity: 0;
@@ -35,32 +36,79 @@
         display: flex;
         flex-direction: column;
         align-items: center;
-        gap: 24px;
+        gap: 18px;
       }
-      .splash-spinner {
-        width: 40px;
-        height: 40px;
-        border: 3px solid #3a3a3a;
-        border-top-color: #339af0;
-        border-radius: 50%;
-        animation: spin 0.8s linear infinite;
+      .splash-logo {
+        animation: logo-breathe 2.4s ease-in-out infinite;
       }
-      .splash-text {
+      .splash-logo svg {
+        display: block;
+        border-radius: 14px;
+        filter: drop-shadow(0 8px 24px rgba(37, 99, 235, 0.45));
+      }
+      .splash-title {
         font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-        font-size: 14px;
-        color: #909296;
-        letter-spacing: 0.5px;
+        font-size: 17px;
+        font-weight: 700;
+        letter-spacing: -0.3px;
+        background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
       }
-      @keyframes spin {
-        to { transform: rotate(360deg); }
+      .splash-dots {
+        display: flex;
+        gap: 7px;
+        align-items: center;
+      }
+      .splash-dots span {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: linear-gradient(135deg, #2563EB, #7C3AED);
+        animation: dot-pulse 1.2s ease-in-out infinite;
+      }
+      .splash-dots span:nth-child(2) { animation-delay: 0.2s; }
+      .splash-dots span:nth-child(3) { animation-delay: 0.4s; }
+
+      @keyframes logo-breathe {
+        0%, 100% { transform: scale(1);    opacity: 1;    }
+        50%       { transform: scale(1.05); opacity: 0.9;  }
+      }
+      @keyframes dot-pulse {
+        0%, 80%, 100% { transform: scale(0.5); opacity: 0.25; }
+        40%           { transform: scale(1);   opacity: 1;    }
       }
     </style>
   </head>
   <body>
     <div id="splash">
       <div class="splash-content">
-        <div class="splash-spinner"></div>
-        <div class="splash-text">Loading...</div>
+        <div class="splash-logo">
+          <svg width="64" height="64" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <defs>
+              <linearGradient id="sl" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#2563EB"/>
+                <stop offset="1" stop-color="#7C3AED"/>
+              </linearGradient>
+            </defs>
+            <rect width="32" height="32" rx="7" fill="url(#sl)"/>
+            <polyline
+              points="3,16 9,16 12,8 16,24 19,16 29,16"
+              stroke="white"
+              stroke-width="2.2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              fill="none"
+            />
+          </svg>
+        </div>
+        <div class="splash-title">Monitoring System</div>
+        <div class="splash-dots">
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
       </div>
     </div>
     <div id="root"></div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bun-react-template",
-  "version": "0.1.2",
+  "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",

prisma/schema.prisma

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

scripts/mcp-deploy.ts

@@ -21,7 +21,7 @@ async function triggerWorkflow(workflow: string, inputs: Record<string, string>)
   const res = await fetch(`${BASE_URL}/actions/workflows/${workflow}/dispatches`, {
     method: 'POST',
     headers: ghHeaders,
-    body: JSON.stringify({ ref: 'main', inputs }),
+    body: JSON.stringify({ ref: 'stg', inputs }),
   })
   if (!res.ok) throw new Error(`GitHub API error ${res.status}: ${await res.text()}`)
 }
@@ -150,7 +150,7 @@ server.tool(
     }
     log.push('✅ Committed')
 
-    const push = await sh(['git', 'push', 'origin', 'HEAD:build/stg'])
+    const push = await sh(['git', 'push', 'build', 'HEAD:stg'])
     if (!push.ok) {
       return { content: [{ type: 'text', text: `❌ git push gagal:\n${push.err}` }] }
     }

src/app.ts

@@ -8,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: {
@@ -363,13 +366,12 @@ export function createApp() {
       return apps.map((app) => ({
         id: app.id,
         name: app.name,
-        status: app.maintenance ? 'warning' : app.bugs.length > 0 ? 'error' : 'active',
+        status: app.active ? 'active' : 'inactive',
         errors: app.bugs.length,
-        version: app.version ?? '-',
-        minVersion: app.minVersion,
-        maintenance: app.maintenance,
         active: app.active,
         urlApi: app.urlApi,
+        apiKey: app.apiKey ?? '',
+        clientApiKey: app.clientApiKey ?? '',
         hasClientApiKey: !!app.clientApiKey,
       }))
     }, {
@@ -400,11 +402,8 @@ export function createApp() {
       return {
         id: app.id,
         name: app.name,
-        status: app.maintenance ? 'warning' : app.bugs.length > 0 ? 'error' : 'active',
+        status: app.active ? 'active' : 'inactive',
         errors: app.bugs.length,
-        version: app.version ?? '-',
-        minVersion: app.minVersion,
-        maintenance: app.maintenance,
         urlApi: app.urlApi,
         totalBugs: app._count.bugs,
       }
@@ -806,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) {
@@ -822,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({
@@ -853,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'],
       },
     })
@@ -904,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({
@@ -1071,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 {
@@ -1224,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() {},
@@ -1643,6 +1756,86 @@ export function createApp() {
       return { sessions: result, summary: { totalSessions: result.length, activeSessions: active, expiredSessions: expired, onlineUsers: onlineIds.size, byRole } }
     })
 
+    // ─── API Keys (proxied to desa-plus /api/monitoring/api-keys) ─────────────
+
+    .get('/api/admin/api-keys', async ({ request, set }) => {
+      const auth = await requireDeveloper(request, set)
+      if (!auth) return { error: set.status === 401 ? 'Unauthorized' : 'Forbidden' }
+      const app = await prisma.app.findUnique({ where: { id: 'desa-plus' } })
+      if (!app?.urlApi) { set.status = 503; return { error: 'desa-plus belum dikonfigurasi' } }
+      const res = await fetch(`${app.urlApi.replace(/\/$/, '')}/api/monitoring/api-keys`, {
+        headers: { 'x-api-key': app.apiKey ?? '' },
+      })
+      const json = await res.json()
+      return { keys: json.data ?? [] }
+    })
+
+    .get('/api/admin/api-keys/:id', async ({ request, set, params }) => {
+      const auth = await requireDeveloper(request, set)
+      if (!auth) return { error: set.status === 401 ? 'Unauthorized' : 'Forbidden' }
+      const app = await prisma.app.findUnique({ where: { id: 'desa-plus' } })
+      if (!app?.urlApi) { set.status = 503; return { error: 'desa-plus belum dikonfigurasi' } }
+      const res = await fetch(`${app.urlApi.replace(/\/$/, '')}/api/monitoring/api-keys/${params.id}`, {
+        headers: { 'x-api-key': app.apiKey ?? '' },
+      })
+      const json = await res.json()
+      set.status = res.status
+      return json
+    })
+
+    .post('/api/admin/api-keys', async ({ request, set }) => {
+      const auth = await requireDeveloper(request, set)
+      if (!auth) return { error: set.status === 401 ? 'Unauthorized' : 'Forbidden' }
+      const body = await request.json() as { name?: string }
+      if (!body.name?.trim()) { set.status = 400; return { error: 'name wajib diisi' } }
+      const app = await prisma.app.findUnique({ where: { id: 'desa-plus' } })
+      if (!app?.urlApi) { set.status = 503; return { error: 'desa-plus belum dikonfigurasi: urlApi kosong' } }
+      if (!app?.apiKey) { set.status = 503; return { error: 'desa-plus belum dikonfigurasi: apiKey kosong' } }
+      try {
+        const res = await fetch(`${app.urlApi.replace(/\/$/, '')}/api/monitoring/api-keys`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json', 'x-api-key': app.apiKey },
+          body: JSON.stringify({ name: body.name.trim() }),
+        })
+        const json = await res.json()
+        set.status = res.status
+        return { key: json.data ?? null }
+      } catch (e) {
+        set.status = 502
+        return { error: `Gagal menghubungi desa-plus: ${String(e)}` }
+      }
+    })
+
+    .patch('/api/admin/api-keys/:id', async ({ request, set, params }) => {
+      const auth = await requireDeveloper(request, set)
+      if (!auth) return { error: set.status === 401 ? 'Unauthorized' : 'Forbidden' }
+      const body = await request.json() as { isActive?: boolean }
+      const app = await prisma.app.findUnique({ where: { id: 'desa-plus' } })
+      if (!app?.urlApi) { set.status = 503; return { error: 'desa-plus belum dikonfigurasi' } }
+      const res = await fetch(`${app.urlApi.replace(/\/$/, '')}/api/monitoring/api-keys/${params.id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json', 'x-api-key': app.apiKey ?? '' },
+        body: JSON.stringify({ isActive: body.isActive }),
+      })
+      const json = await res.json()
+      set.status = res.status
+      return json
+    })
+
+    .delete('/api/admin/api-keys/:id', async ({ request, set, params }) => {
+      const auth = await requireDeveloper(request, set)
+      if (!auth) return { error: set.status === 401 ? 'Unauthorized' : 'Forbidden' }
+      const app = await prisma.app.findUnique({ where: { id: 'desa-plus' } })
+      if (!app?.urlApi) { set.status = 503; return { error: 'desa-plus belum dikonfigurasi' } }
+      const res = await fetch(`${app.urlApi.replace(/\/$/, '')}/api/monitoring/api-keys/${params.id}`, {
+        method: 'DELETE',
+        headers: { 'x-api-key': app.apiKey ?? '' },
+      })
+      const json = await res.json()
+      set.status = res.status
+      return json
+    })
+
     // ─── Desa Plus Proxy ───────────────────────────────────────────────────────
 
     .all('/api/proxy/desa-plus/*', async ({ request, set }) => {

src/frontend/components/AppCard.tsx

@@ -1,6 +1,6 @@
-import { Avatar, Button, Card, Group, Stack, Text, useComputedColorScheme } from '@mantine/core'
+import { Avatar, Badge, Button, Card, Group, Stack, Text, useComputedColorScheme } from '@mantine/core'
 import { Link } from '@tanstack/react-router'
-import { TbChevronRight, TbDeviceMobile } from 'react-icons/tb'
+import { TbAlertTriangle, TbChevronRight, TbDeviceMobile } from 'react-icons/tb'
 
 interface AppCardProps {
   id: string
@@ -12,8 +12,9 @@ interface AppCardProps {
   maintenance?: boolean
 }
 
-export function AppCard({ id, name, status, errors, version }: AppCardProps) {
-  const statusColor = status === 'active' ? 'teal' : status === 'warning' ? 'orange' : 'red'
+export function AppCard({ id, name, status, errors, version, maintenance }: AppCardProps) {
+  const statusColor = maintenance ? 'gray' : status === 'active' ? 'teal' : status === 'warning' ? 'orange' : 'red'
+  const statusLabel = maintenance ? 'Maintenance' : status === 'active' ? 'Active' : status === 'warning' ? 'Warning' : 'Error'
   const scheme = useComputedColorScheme('light', { getInitialValueInEffect: true })
 
   return (
@@ -35,7 +36,7 @@ export function AppCard({ id, name, status, errors, version }: AppCardProps) {
         },
       })}
     >
-      <Group justify="space-between" mb="lg">
+      <Group justify="space-between" mb="md">
         <Group gap="md">
           <Avatar
             variant="gradient"
@@ -45,39 +46,27 @@ export function AppCard({ id, name, status, errors, version }: AppCardProps) {
           >
             <TbDeviceMobile size={26} />
           </Avatar>
-          <Stack gap={0}>
+          <Stack gap={2}>
             <Text fw={700} size="lg" style={{ letterSpacing: '-0.3px' }}>{name}</Text>
-            {/* <Text size="xs" c="dimmed" fw={600}>VERSION {version}</Text> */}
+            {/* <Text size="xs" c="dimmed" fw={600} tt="uppercase">v{version}</Text> */}
           </Stack>
         </Group>
-        {/* <Badge color={statusColor} variant="dot" size="sm">
-          {status.toUpperCase()}
-        </Badge> */}
+        <Badge color={statusColor} variant="dot" size="sm">
+          {statusLabel}
+        </Badge>
       </Group>
 
-      {/* <Stack gap="md" mt="sm">
-        <Box>
-          <Group justify="space-between" mb={6}>
-            <Group gap="xs">
-              <TbActivity size={16} color="#2563EB" />
-              <Text size="xs" fw={700} c="dimmed">USER ADOPTION</Text>
-            </Group>
-            <Text size="sm" fw={700}>{users.toLocaleString()}</Text>
-          </Group>
-          <Progress value={85} size="sm" color="brand-blue" radius="xl" />
-        </Box>
-
-        <Box>
-          <Group justify="space-between" mb={6}>
-            <Group gap="xs">
-              <TbAlertTriangle size={16} color={errors > 0 ? '#ef4444' : '#64748b'} />
-              <Text size="xs" fw={700} c="dimmed">ERROR</Text>
-            </Group>
-            <Text size="sm" fw={700} color={errors > 0 ? 'red' : 'dimmed'}>{errors}</Text>
-          </Group>
-          <Progress value={errors > 0 ? 30 : 0} size="sm" color="red" radius="xl" />
-        </Box>
-      </Stack> */}
+      <Group justify="space-between" align="center" mb="xs">
+        <Text size="xs" c="dimmed" fw={500}>Open Errors</Text>
+        <Badge
+          color={errors > 0 ? 'red' : 'teal'}
+          variant="light"
+          size="sm"
+          leftSection={errors > 0 ? <TbAlertTriangle size={10} /> : undefined}
+        >
+          {errors > 0 ? errors : 'None'}
+        </Badge>
+      </Group>
 
       <Button
         component={Link}
@@ -85,7 +74,7 @@ export function AppCard({ id, name, status, errors, version }: AppCardProps) {
         variant="light"
         color="brand-blue"
         fullWidth
-        mt="xl"
+        mt="md"
         radius="md"
         rightSection={<TbChevronRight size={16} />}
         styles={{
@@ -97,7 +86,7 @@ export function AppCard({ id, name, status, errors, version }: AppCardProps) {
           }
         }}
       >
-        View
+        Open Dashboard
       </Button>
     </Card>
   )

src/frontend/components/DashboardCharts.tsx

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

src/frontend/components/DashboardLayout.tsx

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

src/frontend/components/ErrorDataTable.tsx

@@ -6,32 +6,62 @@ import {
   Divider,
   Drawer,
   Group,
+  Loader,
   Paper,
-  ScrollArea,
+  SimpleGrid,
   Stack,
   Table,
   Text,
-  Title
+  ThemeIcon,
+  Title,
+  Tooltip,
 } from '@mantine/core'
 import { useDisclosure } from '@mantine/hooks'
-import { useQuery } from '@tanstack/react-query'
 import { Link } from '@tanstack/react-router'
-import { useState } from 'react'
+import dayjs from 'dayjs'
+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
 }
 
-export function ErrorDataTable({ appId }: ErrorDataTableProps) {
+const STATUS_COLOR: Record<string, string> = {
+  OPEN: 'red',
+  IN_PROGRESS: 'blue',
+  ON_HOLD: 'orange',
+  RESOLVED: 'teal',
+  RELEASED: 'green',
+  CLOSED: 'gray',
+}
+const STATUS_LABEL: Record<string, string> = {
+  OPEN: 'Open',
+  ON_HOLD: 'On Hold',
+  IN_PROGRESS: 'In Progress',
+  RESOLVED: 'Resolved',
+  RELEASED: 'Released',
+  CLOSED: 'Closed',
+}
+
+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 || []
 
@@ -41,54 +71,62 @@ export function ErrorDataTable({ appId }: ErrorDataTableProps) {
     open()
   }
 
-  const getSeverityColor = (sev: string) => {
-    switch (sev?.toUpperCase()) {
-      case 'OPEN': return 'red'
-      case 'IN_PROGRESS': return 'orange'
-      case 'ON_HOLD': return 'yellow'
-      default: return 'gray'
-    }
-  }
-
   return (
     <>
-      <Paper withBorder radius="2xl" className="glass overflow-hidden">
-        <Box p="xl" style={{ borderBottom: '1px solid rgba(255, 255, 255, 0.08)' }}>
+      <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">
               <ThemeIcon variant="light" color="red" size="lg" radius="md">
                 <TbBug size={20} />
               </ThemeIcon>
-              <Text fw={700}>LATEST ERROR REPORTS</Text>
+              <Stack gap={0}>
+                <Text fw={700} size="sm">Latest Error Reports</Text>
+                <Text size="xs" c="dimmed">Most recent open bugs</Text>
+              </Stack>
             </Group>
-            <Button component={Link} to={appId ? `/apps/${appId}/errors` : '/bug-reports'} variant="subtle" size="compact-xs" color="blue" rightSection={<TbExternalLink size={14} />}>
-              View All Reports
-            </Button>
+            <Tooltip label="View all reports" withArrow>
+              <Button
+                component={Link}
+                to={appId ? `/apps/${appId}/errors` : '/bug-reports'}
+                variant="subtle"
+                size="compact-sm"
+                color="blue"
+                rightSection={<TbExternalLink size={14} />}
+              >
+                View All
+              </Button>
+            </Tooltip>
           </Group>
         </Box>
 
-        <ScrollArea>
-          <Table verticalSpacing="md" highlightOnHover className="data-table">
-            <Table.Thead bg="rgba(0,0,0,0.1)">
+        <Table.ScrollContainer minWidth={520}>
+          <Table verticalSpacing="sm" highlightOnHover className="data-table">
+            <Table.Thead>
               <Table.Tr>
-                <Table.Th px="xl">Error Message</Table.Th>
-                <Table.Th>Reporter</Table.Th>
-                <Table.Th>App Version</Table.Th>
-                <Table.Th>Timestamp</Table.Th>
-                <Table.Th pr="xl">Severity</Table.Th>
+                <Table.Th px="lg">Error Description</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>
               {isLoading ? (
                 <Table.Tr>
-                  <Table.Td colSpan={5} align="center" py="xl">
-                    Loading errors...
+                  <Table.Td colSpan={5}>
+                    <Group justify="center" py="xl">
+                      <Loader size="sm" type="dots" />
+                    </Group>
                   </Table.Td>
                 </Table.Tr>
               ) : bugs.length === 0 ? (
                 <Table.Tr>
-                  <Table.Td colSpan={5} align="center" py="xl">
-                    No errors found.
+                  <Table.Td colSpan={5}>
+                    <Stack align="center" gap="xs" py="xl">
+                      <TbBug size={32} style={{ opacity: 0.25 }} />
+                      <Text size="sm" c="dimmed">No error reports found.</Text>
+                    </Stack>
                   </Table.Td>
                 </Table.Tr>
               ) : bugs.map((error: any) => (
@@ -97,31 +135,41 @@ export function ErrorDataTable({ appId }: ErrorDataTableProps) {
                   onClick={() => handleRowClick(error)}
                   style={{ cursor: 'pointer' }}
                 >
-                  <Table.Td px="xl">
+                  <Table.Td px="lg">
                     <Text size="sm" fw={600} lineClamp={1}>{error.description}</Text>
                   </Table.Td>
                   <Table.Td>
-                    <Badge variant="dot" color="brand-blue" radius="sm">{error.user?.name || error.userId || 'System'}</Badge>
+                    <Badge variant="light" color="brand-blue" size="sm">
+                      {error.user?.name || error.userId || 'System'}
+                    </Badge>
                   </Table.Td>
                   <Table.Td>
-                    <Text size="xs" fw={700} c="dimmed">{error.affectedVersion || 'N/A'}</Text>
+                    <Badge variant="light" color="gray" size="sm">
+                      v{error.affectedVersion || 'N/A'}
+                    </Badge>
                   </Table.Td>
-                  <Table.Td>
-                    <Group gap={6}>
+                  <Table.Td style={{ whiteSpace: 'nowrap' }}>
+                    <Group gap={4} wrap="nowrap">
                       <TbHistory size={12} color="gray" />
-                      <Text size="xs" c="dimmed">{new Date(error.createdAt).toLocaleString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false })}</Text>
+                      <Text size="xs" c="dimmed">
+                        {dayjs(error.createdAt).format('D MMM YYYY, HH:mm')}
+                      </Text>
                     </Group>
                   </Table.Td>
-                  <Table.Td pr="xl">
-                    <Badge color={getSeverityColor(error.status)} variant="light" size="sm">
-                      {(error.status || '').toUpperCase()}
+                  <Table.Td pr="lg">
+                    <Badge
+                      color={STATUS_COLOR[error.status?.toUpperCase()] ?? 'gray'}
+                      variant="light"
+                      size="sm"
+                    >
+                      {STATUS_LABEL[error.status?.toUpperCase()] ?? error.status}
                     </Badge>
                   </Table.Td>
                 </Table.Tr>
               ))}
             </Table.Tbody>
           </Table>
-        </ScrollArea>
+        </Table.ScrollContainer>
       </Paper>
 
       <Drawer
@@ -131,37 +179,68 @@ export function ErrorDataTable({ appId }: ErrorDataTableProps) {
         size="md"
         title={
           <Group gap="xs">
-            <TbMessageReport color="#ef4444" size={24} />
-            <Title order={4}>Error Investigation</Title>
+            <TbMessageReport color="#ef4444" size={22} />
+            <Title order={4}>Error Detail</Title>
           </Group>
         }
         styles={{
-          header: { padding: '24px', borderBottom: '1px solid var(--mantine-color-default-border)' },
+          header: { padding: '20px 24px', borderBottom: '1px solid var(--mantine-color-default-border)' },
         }}
       >
         {selectedError && (
           <Stack p="lg" gap="xl">
             <Box>
-              <Text size="xs" fw={700} c="dimmed" mb={4}>MESSAGE</Text>
-              <Text fw={700} size="lg" color="red">{selectedError.description}</Text>
+              <Text size="xs" fw={700} c="dimmed" mb={4} tt="uppercase">Description</Text>
+              <Text fw={600} size="sm">{selectedError.description}</Text>
             </Box>
 
             <SimpleGrid cols={2} spacing="lg">
               <Box>
-                <Text size="xs" fw={700} c="dimmed" mb={4}>SOURCE</Text>
-                <Text fw={600}>{selectedError.source}</Text>
+                <Text size="xs" fw={700} c="dimmed" mb={4} tt="uppercase">Status</Text>
+                <Badge
+                  color={STATUS_COLOR[selectedError.status?.toUpperCase()] ?? 'gray'}
+                  variant="light"
+                  size="sm"
+                >
+                  {STATUS_LABEL[selectedError.status?.toUpperCase()] ?? selectedError.status}
+                </Badge>
               </Box>
               <Box>
-                <Text size="xs" fw={700} c="dimmed" mb={4}>APP VERSION</Text>
-                <Badge variant="outline">{selectedError.affectedVersion || 'N/A'}</Badge>
+                <Text size="xs" fw={700} c="dimmed" mb={4} tt="uppercase">Source</Text>
+                <Badge variant="light" color="gray" size="sm">{selectedError.source}</Badge>
+              </Box>
+              <Box>
+                <Text size="xs" fw={700} c="dimmed" mb={4} tt="uppercase">App Version</Text>
+                <Badge variant="light" color="gray" size="sm">v{selectedError.affectedVersion || 'N/A'}</Badge>
+              </Box>
+              <Box>
+                <Text size="xs" fw={700} c="dimmed" mb={4} tt="uppercase">Reported</Text>
+                <Text size="sm" fw={500}>{dayjs(selectedError.createdAt).format('D MMM YYYY, HH:mm')}</Text>
               </Box>
             </SimpleGrid>
 
+            {selectedError.device && (
+              <Box>
+                <Text size="xs" fw={700} c="dimmed" mb={4} tt="uppercase">Device</Text>
+                <Text size="sm">{selectedError.device} · {selectedError.os}</Text>
+              </Box>
+            )}
+
+            {selectedError.feedBack && (
+              <>
+                <Divider opacity={0.1} />
+                <Box>
+                  <Text size="xs" fw={700} c="dimmed" mb={4} tt="uppercase">Developer Feedback</Text>
+                  <Text size="sm" style={{ whiteSpace: 'pre-wrap' }}>{selectedError.feedBack}</Text>
+                </Box>
+              </>
+            )}
+
             <Divider opacity={0.1} />
 
             <Box>
               <Group justify="space-between" mb="sm">
-                <Text size="xs" fw={700} c="dimmed">STACK TRACE</Text>
+                <Text size="xs" fw={700} c="dimmed" tt="uppercase">Stack Trace</Text>
                 <Button
                   variant="subtle"
                   size="compact-xs"
@@ -172,8 +251,12 @@ export function ErrorDataTable({ appId }: ErrorDataTableProps) {
                 </Button>
               </Group>
               {showStackTrace && (
-                <Code block color="red" style={{ whiteSpace: 'pre-wrap', lineHeight: 1.6, border: '1px solid var(--mantine-color-default-border)' }}>
-                  {selectedError.stackTrace}
+                <Code
+                  block
+                  color="red"
+                  style={{ whiteSpace: 'pre-wrap', lineHeight: 1.6, fontSize: 11, border: '1px solid var(--mantine-color-default-border)' }}
+                >
+                  {selectedError.stackTrace || '(no stack trace)'}
                 </Code>
               )}
             </Box>
@@ -182,6 +265,4 @@ export function ErrorDataTable({ appId }: ErrorDataTableProps) {
       </Drawer>
     </>
   )
-}
-
-import { SimpleGrid, ThemeIcon } from '@mantine/core'
+})

src/frontend/components/StatsCard.tsx

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

src/frontend/config/api.ts

@@ -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}`
+  },
 }

src/frontend/hooks/usePresence.ts

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

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

@@ -21,12 +21,14 @@ import {
   TextInput,
   ThemeIcon,
   Timeline,
-  Title
+  Title,
+  Tooltip,
 } from '@mantine/core'
 import { useDisclosure } from '@mantine/hooks'
 import { notifications } from '@mantine/notifications'
 import { useQuery } from '@tanstack/react-query'
 import { createFileRoute, useParams } from '@tanstack/react-router'
+import dayjs from 'dayjs'
 import { useState } from 'react'
 import {
   TbAlertTriangle,
@@ -35,7 +37,6 @@ import {
   TbCircleX,
   TbDeviceDesktop,
   TbDeviceMobile,
-  TbFilter,
   TbHistory,
   TbPhoto,
   TbPlus,
@@ -47,43 +48,48 @@ export const Route = createFileRoute('/apps/$appId/errors')({
   component: AppErrorsPage,
 })
 
+const STATUS_COLOR: Record<string, string> = {
+  OPEN: 'red',
+  IN_PROGRESS: 'blue',
+  ON_HOLD: 'orange',
+  RESOLVED: 'teal',
+  RELEASED: 'green',
+  CLOSED: 'gray',
+}
+const STATUS_LABEL: Record<string, string> = {
+  OPEN: 'Open',
+  ON_HOLD: 'On Hold',
+  IN_PROGRESS: 'In Progress',
+  RESOLVED: 'Resolved',
+  RELEASED: 'Released',
+  CLOSED: 'Closed',
+}
 
 function AppErrorsPage() {
   const { appId } = useParams({ from: '/apps/$appId/errors' })
 
   const [page, setPage] = useState(1)
   const [search, setSearch] = useState('')
-  const [app, setApp] = useState(appId)
   const [status, setStatus] = useState('all')
 
-
   const [showLogs, setShowLogs] = useState<Record<string, boolean>>({})
   const [showStackTrace, setShowStackTrace] = useState<Record<string, boolean>>({})
 
-  const toggleLogs = (bugId: string) => {
-    setShowLogs((prev) => ({ ...prev, [bugId]: !prev[bugId] }))
-  }
-
-  const toggleStackTrace = (bugId: string) => {
-    setShowStackTrace((prev) => ({ ...prev, [bugId]: !prev[bugId] }))
-  }
+  const toggleLogs = (bugId: string) => setShowLogs((prev) => ({ ...prev, [bugId]: !prev[bugId] }))
+  const toggleStackTrace = (bugId: string) => setShowStackTrace((prev) => ({ ...prev, [bugId]: !prev[bugId] }))
 
   const { data, isLoading, refetch } = useQuery({
-    queryKey: ['bugs', { page, search, app, status }],
-    queryFn: () =>
-      fetch(API_URLS.getBugs(page, search, app, status)).then((r) => r.json()),
+    queryKey: ['bugs', { page, search, app: appId, status }],
+    queryFn: () => fetch(API_URLS.getBugs(page, search, appId, status)).then((r) => r.json()),
   })
 
-  // Fetch apps for the dropdown
   const { data: appsList } = useQuery({
     queryKey: ['apps-list'],
     queryFn: () => fetch('/api/apps').then((r) => r.json()),
   })
 
-  // Image Preview
   const [previewImage, setPreviewImage] = useState<string | null>(null)
 
-  // Create Bug Modal Logic
   const [opened, { open, close }] = useDisclosure(false)
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [imageFiles, setImageFiles] = useState<File[]>([])
@@ -97,25 +103,17 @@ function AppErrorsPage() {
     stackTrace: '',
   })
 
-  // Update Status Modal Logic
   const [updateModalOpened, { open: openUpdateModal, close: closeUpdateModal }] = useDisclosure(false)
   const [isUpdating, setIsUpdating] = useState(false)
   const [selectedBugId, setSelectedBugId] = useState<string | null>(null)
-  const [updateForm, setUpdateForm] = useState({
-    status: '',
-    description: '',
-  })
+  const [updateForm, setUpdateForm] = useState({ status: '', description: '' })
 
-  // Feedback Modal Logic
   const [feedbackModalOpened, { open: openFeedbackModal, close: closeFeedbackModal }] = useDisclosure(false)
   const [isUpdatingFeedback, setIsUpdatingFeedback] = useState(false)
-  const [feedbackForm, setFeedbackForm] = useState({
-    feedBack: '',
-  })
+  const [feedbackForm, setFeedbackForm] = useState({ feedBack: '' })
 
   const handleUpdateFeedback = async () => {
     if (!selectedBugId || !feedbackForm.feedBack) return
-
     setIsUpdatingFeedback(true)
     try {
       const res = await fetch(API_URLS.updateBugFeedback(selectedBugId), {
@@ -123,27 +121,16 @@ function AppErrorsPage() {
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(feedbackForm),
       })
-
       if (res.ok) {
-        notifications.show({
-          title: 'Success',
-          message: 'Feedback has been updated.',
-          color: 'teal',
-          icon: <TbCircleCheck size={18} />,
-        })
+        notifications.show({ title: 'Success', message: 'Feedback has been updated.', color: 'teal', icon: <TbCircleCheck size={18} /> })
         refetch()
         closeFeedbackModal()
         setFeedbackForm({ feedBack: '' })
       } else {
-        throw new Error('Failed to update feedback')
+        throw new Error()
       }
-    } catch (e) {
-      notifications.show({
-        title: 'Error',
-        message: 'Something went wrong.',
-        color: 'red',
-        icon: <TbCircleX size={18} />,
-      })
+    } catch {
+      notifications.show({ title: 'Error', message: 'Something went wrong.', color: 'red', icon: <TbCircleX size={18} /> })
     } finally {
       setIsUpdatingFeedback(false)
     }
@@ -151,7 +138,6 @@ function AppErrorsPage() {
 
   const handleUpdateStatus = async () => {
     if (!selectedBugId || !updateForm.status) return
-
     setIsUpdating(true)
     try {
       const res = await fetch(API_URLS.updateBugStatus(selectedBugId), {
@@ -159,27 +145,16 @@ function AppErrorsPage() {
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(updateForm),
       })
-
       if (res.ok) {
-        notifications.show({
-          title: 'Success',
-          message: 'Status has been updated.',
-          color: 'teal',
-          icon: <TbCircleCheck size={18} />,
-        })
+        notifications.show({ title: 'Success', message: 'Status has been updated.', color: 'teal', icon: <TbCircleCheck size={18} /> })
         refetch()
         closeUpdateModal()
         setUpdateForm({ status: '', description: '' })
       } else {
-        throw new Error('Failed to update status')
+        throw new Error()
       }
-    } catch (e) {
-      notifications.show({
-        title: 'Error',
-        message: 'Something went wrong.',
-        color: 'red',
-        icon: <TbCircleX size={18} />,
-      })
+    } catch {
+      notifications.show({ title: 'Error', message: 'Something went wrong.', color: 'red', icon: <TbCircleX size={18} /> })
     } finally {
       setIsUpdating(false)
     }
@@ -187,14 +162,9 @@ function AppErrorsPage() {
 
   const handleCreateBug = async () => {
     if (!createForm.description || !createForm.affectedVersion || !createForm.device || !createForm.os) {
-      notifications.show({
-        title: 'Validation Error',
-        message: 'Please fill in all required fields.',
-        color: 'red',
-      })
+      notifications.show({ title: 'Validation Error', message: 'Please fill in all required fields.', color: 'red' })
       return
     }
-
     setIsSubmitting(true)
     try {
       const imageUrls: string[] = []
@@ -202,52 +172,31 @@ function AppErrorsPage() {
         const formData = new FormData()
         formData.append('file', file)
         const uploadRes = await fetch(API_URLS.uploadImage(), { method: 'POST', body: formData })
-        if (!uploadRes.ok) throw new Error('Gagal mengupload gambar')
+        if (!uploadRes.ok) throw new Error('Failed to upload image')
         const { url } = await uploadRes.json()
         imageUrls.push(url)
       }
-
       const res = await fetch(API_URLS.createBug(), {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ ...createForm, imageUrls: imageUrls.length ? imageUrls : undefined }),
       })
-
       if (res.ok) {
         await fetch(API_URLS.createLog(), {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ type: 'CREATE', message: `Report error baru ditambahkan: ${createForm.description.substring(0, 50)}${createForm.description.length > 50 ? '...' : ''}` })
+          body: JSON.stringify({ type: 'CREATE', message: `New error report added: ${createForm.description.substring(0, 50)}${createForm.description.length > 50 ? '...' : ''}` }),
         }).catch(console.error)
-
-        notifications.show({
-          title: 'Success',
-          message: 'Error report has been created.',
-          color: 'teal',
-          icon: <TbCircleCheck size={18} />,
-        })
+        notifications.show({ title: 'Success', message: 'Error report has been created.', color: 'teal', icon: <TbCircleCheck size={18} /> })
         refetch()
         close()
         setImageFiles([])
-        setCreateForm({
-          description: '',
-          app: appId,
-          source: 'USER',
-          affectedVersion: '',
-          device: '',
-          os: '',
-          stackTrace: '',
-        })
+        setCreateForm({ description: '', app: appId, source: 'USER', affectedVersion: '', device: '', os: '', stackTrace: '' })
       } else {
-        throw new Error('Failed to create error report')
+        throw new Error()
       }
-    } catch (e) {
-      notifications.show({
-        title: 'Error',
-        message: 'Something went wrong.',
-        color: 'red',
-        icon: <TbCircleX size={18} />,
-      })
+    } catch {
+      notifications.show({ title: 'Error', message: 'Something went wrong.', color: 'red', icon: <TbCircleX size={18} /> })
     } finally {
       setIsSubmitting(false)
     }
@@ -257,16 +206,19 @@ function AppErrorsPage() {
   const totalPages = data?.totalPages || 1
 
   return (
-    <Stack gap="xl">
-      <Group justify="space-between" align="center">
-        <Stack gap={0}>
-          <Title order={3}>Error Reporting Center</Title>
-          <Text size="sm" c="dimmed">Advanced analysis of health issues and crashes for <b>{appId}</b>.</Text>
+    <Stack gap="xl" py="md">
+      <Group justify="space-between" align="flex-start">
+        <Stack gap={4}>
+          <Title order={3}>Error Reports</Title>
+          <Text size="sm" c="dimmed">
+            Bug reports and crash tracking for this application.
+          </Text>
         </Stack>
         <Button
           variant="gradient"
           gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
           leftSection={<TbPlus size={18} />}
+          size="sm"
           onClick={open}
         >
           Report Error
@@ -278,7 +230,7 @@ function AppErrorsPage() {
         opened={!!previewImage}
         onClose={() => setPreviewImage(null)}
         size="xl"
-        radius="xl"
+        radius="md"
         padding={0}
         withCloseButton={false}
         overlayProps={{ backgroundOpacity: 0.75, blur: 6 }}
@@ -286,12 +238,7 @@ function AppErrorsPage() {
         onClick={() => setPreviewImage(null)}
       >
         {previewImage && (
-          <Image
-            src={previewImage}
-            alt="Preview"
-            fit="contain"
-            style={{ maxHeight: '85vh', width: '100%' }}
-          />
+          <Image src={previewImage} alt="Preview" fit="contain" style={{ maxHeight: '85vh', width: '100%' }} />
         )}
       </Modal>
 
@@ -299,28 +246,21 @@ function AppErrorsPage() {
         opened={updateModalOpened}
         onClose={closeUpdateModal}
         title={<Text fw={700} size="lg">Update Bug Status</Text>}
-        radius="xl"
+        radius="md"
         overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
       >
         <Stack gap="md">
           <Select
             label="New Status"
-            placeholder="Select status"
+            placeholder="Select a status"
             required
-            data={[
-              { value: 'OPEN', label: 'Open' },
-              { value: 'ON_HOLD', label: 'On Hold' },
-              { value: 'IN_PROGRESS', label: 'In Progress' },
-              { value: 'RESOLVED', label: 'Resolved' },
-              { value: 'RELEASED', label: 'Released' },
-              { value: 'CLOSED', label: 'Closed' },
-            ]}
+            data={Object.entries(STATUS_LABEL).map(([value, label]) => ({ value, label }))}
             value={updateForm.status}
             onChange={(val) => setUpdateForm({ ...updateForm, status: val || '' })}
           />
           <Textarea
             label="Update Note (Optional)"
-            placeholder="E.g. Fixed in commit xxxxx / Assigned to team"
+            placeholder="e.g. Fixed in commit abc123 / Assigned to team"
             minRows={3}
             value={updateForm.description}
             onChange={(e) => setUpdateForm({ ...updateForm, description: e.target.value })}
@@ -342,7 +282,7 @@ function AppErrorsPage() {
         opened={feedbackModalOpened}
         onClose={closeFeedbackModal}
         title={<Text fw={700} size="lg">Developer Feedback</Text>}
-        radius="xl"
+        radius="md"
         overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
       >
         <Stack gap="md">
@@ -353,7 +293,7 @@ function AppErrorsPage() {
             required
             minRows={4}
             value={feedbackForm.feedBack}
-            onChange={(e) => setFeedbackForm({ ...feedbackForm, feedBack: e.target.value })}
+            onChange={(e) => setFeedbackForm({ feedBack: e.target.value })}
           />
           <Button
             fullWidth
@@ -370,9 +310,9 @@ function AppErrorsPage() {
 
       <Modal
         opened={opened}
-        onClose={() => { close(); setImageFiles([]); }}
+        onClose={() => { close(); setImageFiles([]) }}
         title={<Text fw={700} size="lg">Report New Error</Text>}
-        radius="xl"
+        radius="md"
         size="lg"
         overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
       >
@@ -385,7 +325,6 @@ function AppErrorsPage() {
             value={createForm.description}
             onChange={(e) => setCreateForm({ ...createForm, description: e.target.value })}
           />
-
           <SimpleGrid cols={2}>
             <Select
               label="Application"
@@ -406,19 +345,17 @@ function AppErrorsPage() {
               onChange={(val) => setCreateForm({ ...createForm, source: val as any })}
             />
           </SimpleGrid>
-
           <TextInput
-            label="Version"
+            label="Affected Version"
             placeholder="e.g. 2.4.1"
             required
             value={createForm.affectedVersion}
             onChange={(e) => setCreateForm({ ...createForm, affectedVersion: e.target.value })}
           />
-
           <SimpleGrid cols={2}>
             <TextInput
               label="Device"
-              placeholder="e.g. iPhone 13, Windows 11 PC"
+              placeholder="e.g. iPhone 13, Windows PC"
               required
               value={createForm.device}
               onChange={(e) => setCreateForm({ ...createForm, device: e.target.value })}
@@ -431,17 +368,16 @@ function AppErrorsPage() {
               onChange={(e) => setCreateForm({ ...createForm, os: e.target.value })}
             />
           </SimpleGrid>
-
           <FileInput
-            label="Screenshot (Optional)"
-            placeholder="Klik untuk upload gambar..."
+            label="Screenshots (Optional)"
+            placeholder="Click to upload images..."
             accept="image/*"
             leftSection={<TbPhoto size={16} />}
-            description="Maks 3 gambar · 5MB per file · JPG, PNG, WEBP"
+            description="Max 3 images · 5 MB each · JPG, PNG, WEBP"
             value={imageFiles}
             onChange={(files) => {
               if (files.length > 3) {
-                notifications.show({ title: 'Error', message: 'Maksimal 3 gambar', color: 'red' })
+                notifications.show({ title: 'Error', message: 'Maximum 3 images allowed.', color: 'red' })
                 return
               }
               setImageFiles(files)
@@ -449,16 +385,14 @@ function AppErrorsPage() {
             clearable
             multiple
           />
-
           <Textarea
             label="Stack Trace (Optional)"
-            placeholder="Paste code or error logs here..."
+            placeholder="Paste error logs or stack trace here..."
             style={{ fontFamily: 'monospace' }}
             minRows={2}
             value={createForm.stackTrace}
             onChange={(e) => setCreateForm({ ...createForm, stackTrace: e.target.value })}
           />
-
           <Button
             fullWidth
             mt="md"
@@ -473,47 +407,49 @@ function AppErrorsPage() {
       </Modal>
 
       <Paper withBorder radius="2xl" className="glass" p="md">
-        <SimpleGrid cols={{ base: 1, sm: 3 }} mb="md">
+        <SimpleGrid cols={{ base: 1, sm: 3 }} mb="lg">
           <TextInput
-            placeholder="Search description, device, os..."
+            label="Search"
+            placeholder="Description, device, OS..."
             leftSection={<TbSearch size={16} />}
             value={search}
             onChange={(e) => setSearch(e.currentTarget.value)}
             radius="md"
+            size="sm"
           />
           <Select
-            placeholder="Status"
+            label="Status"
+            size="sm"
             data={[
               { value: 'all', label: 'All Status' },
-              { value: 'OPEN', label: 'Open' },
-              { value: 'ON_HOLD', label: 'On Hold' },
-              { value: 'IN_PROGRESS', label: 'In Progress' },
-              { value: 'RESOLVED', label: 'Resolved' },
-              { value: 'RELEASED', label: 'Released' },
-              { value: 'CLOSED', label: 'Closed' },
+              ...Object.entries(STATUS_LABEL).map(([value, label]) => ({ value, label })),
             ]}
             value={status}
             onChange={(val) => setStatus(val || 'all')}
             radius="md"
           />
-          <Group justify="flex-end">
-            <Button variant="subtle" color="gray" leftSection={<TbFilter size={16} />} onClick={() => { setSearch(''); setStatus('all') }}>
-              Reset
+          <Stack justify="flex-end">
+            <Button
+              variant="filled"
+              color="violet"
+              size="sm"
+              onClick={() => { setSearch(''); setStatus('all') }}
+            >
+              Reset Filters
             </Button>
-          </Group>
+          </Stack>
         </SimpleGrid>
 
         {isLoading ? (
           <Stack align="center" py="xl">
-            <Loader size="lg" type="dots" />
-            <Text size="sm" c="dimmed">Loading error reports...</Text>
+            <Loader size="md" type="dots" />
           </Stack>
         ) : bugs.length === 0 ? (
-          <Paper p="xl" withBorder style={{ borderStyle: 'dashed', textAlign: 'center' }}>
-            <TbBug size={48} color="gray" style={{ marginBottom: 12, opacity: 0.5 }} />
-            <Text fw={600}>No error reports found</Text>
+          <Stack align="center" py="xl" gap="xs">
+            <TbBug size={40} style={{ opacity: 0.25 }} />
+            <Text fw={600} size="sm">No error reports found</Text>
             <Text size="sm" c="dimmed">Try adjusting your filters or search terms.</Text>
-          </Paper>
+          </Stack>
         ) : (
           <Accordion variant="separated" radius="xl">
             {bugs.map((bug: any) => (
@@ -523,58 +459,44 @@ function AppErrorsPage() {
                 style={{
                   border: '1px solid var(--mantine-color-default-border)',
                   background: 'var(--mantine-color-default)',
-                  marginBottom: '12px',
+                  marginBottom: 12,
                 }}
               >
                 <Accordion.Control>
-                  <Group wrap="nowrap">
+                  <Group wrap="nowrap" style={{ minWidth: 0 }}>
                     <ThemeIcon
-                      color={
-                        bug.status === 'OPEN'
-                          ? 'red'
-                          : bug.status === 'IN_PROGRESS'
-                            ? 'blue'
-                            : 'teal'
-                      }
+                      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={
-                            bug.status === 'OPEN'
-                              ? 'red'
-                              : bug.status === 'IN_PROGRESS'
-                                ? 'blue'
-                                : 'teal'
-                          }
+                          color={STATUS_COLOR[bug.status] ?? 'gray'}
                           variant="dot"
-                          size="xs"
+                          size="sm"
+                          style={{ flexShrink: 0 }}
                         >
-                          {bug.status}
+                          {STATUS_LABEL[bug.status] ?? bug.status}
                         </Badge>
                       </Group>
-                      <Group gap="md">
-                        <Text size="xs" c="dimmed">
-                          {new Date(bug.createdAt).toLocaleString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false })} • {bug.appId?.toUpperCase()} • v{bug.affectedVersion}
-                        </Text>
-                      </Group>
+                      <Text size="xs" c="dimmed" lineClamp={1}>
+                        {dayjs(bug.createdAt).format('D MMM YYYY, HH:mm')} · {bug.appId?.toUpperCase()} · v{bug.affectedVersion}
+                      </Text>
                     </Box>
                   </Group>
                 </Accordion.Control>
+
                 <Accordion.Panel>
                   <Stack gap="lg" py="xs">
-                    {/* Device Info */}
                     <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="lg">
                       <Box>
-                        <Text size="xs" fw={700} c="dimmed" mb={4}>DEVICE METADATA</Text>
+                        <Text size="xs" fw={700} c="dimmed" mb={4} tt="uppercase">Device Metadata</Text>
                         <Group gap="xs">
                           {bug.device.toLowerCase().includes('windows') || bug.device.toLowerCase().includes('mac') || bug.device.toLowerCase().includes('pc') ? (
                             <TbDeviceDesktop size={14} color="gray" />
@@ -585,17 +507,16 @@ function AppErrorsPage() {
                         </Group>
                       </Box>
                       <Box>
-                        <Text size="xs" fw={700} c="dimmed" mb={4}>SOURCE</Text>
+                        <Text size="xs" fw={700} c="dimmed" mb={4} tt="uppercase">Source</Text>
                         <Badge variant="light" color="gray" size="sm">{bug.source}</Badge>
                       </Box>
                     </SimpleGrid>
 
-                    {/* Feedback & Reporter Info */}
                     {(bug.user || bug.feedBack) && (
                       <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="lg">
                         {bug.user && (
                           <Box>
-                            <Text size="xs" fw={700} c="dimmed" mb={4}>REPORTED BY</Text>
+                            <Text size="xs" fw={700} c="dimmed" mb={4} tt="uppercase">Reported By</Text>
                             <Group gap="xs">
                               <Avatar src={bug.user.image} radius="xl" size="sm" color="blue">
                                 {bug.user.name?.charAt(0).toUpperCase()}
@@ -606,24 +527,18 @@ function AppErrorsPage() {
                         )}
                         {bug.feedBack && (
                           <Box>
-                            <Text size="xs" fw={700} c="dimmed" mb={4}>DEVELOPER FEEDBACK</Text>
+                            <Text size="xs" fw={700} c="dimmed" mb={4} tt="uppercase">Developer Feedback</Text>
                             <Text size="sm" style={{ whiteSpace: 'pre-wrap' }}>{bug.feedBack}</Text>
                           </Box>
                         )}
                       </SimpleGrid>
                     )}
 
-                    {/* Stack Trace */}
                     {bug.stackTrace && (
                       <Box>
-                        <Group justify="space-between" mb={4}>
-                          <Text size="xs" fw={700} c="dimmed">STACK TRACE</Text>
-                          <Button
-                            variant="subtle"
-                            size="compact-xs"
-                            color="gray"
-                            onClick={() => toggleStackTrace(bug.id)}
-                          >
+                        <Group justify="space-between" mb={showStackTrace[bug.id] ? 8 : 0}>
+                          <Text size="xs" fw={700} c="dimmed" tt="uppercase">Stack Trace</Text>
+                          <Button variant="subtle" size="compact-xs" color="gray" onClick={() => toggleStackTrace(bug.id)}>
                             {showStackTrace[bug.id] ? 'Hide' : 'Show'}
                           </Button>
                         </Group>
@@ -631,12 +546,7 @@ function AppErrorsPage() {
                           <Code
                             block
                             color="red"
-                            style={{
-                              fontFamily: 'monospace',
-                              whiteSpace: 'pre-wrap',
-                              fontSize: '11px',
-                              border: '1px solid var(--mantine-color-default-border)',
-                            }}
+                            style={{ fontFamily: 'monospace', whiteSpace: 'pre-wrap', fontSize: 11, border: '1px solid var(--mantine-color-default-border)' }}
                           >
                             {bug.stackTrace}
                           </Code>
@@ -644,43 +554,41 @@ function AppErrorsPage() {
                       </Box>
                     )}
 
-                    {/* Images */}
                     {bug.images && bug.images.length > 0 && (
                       <Box>
                         <Group gap="xs" mb={8}>
-                          <TbPhoto size={16} color="gray" />
-                          <Text size="xs" fw={700} c="dimmed">ATTACHED IMAGES ({bug.images.length})</Text>
+                          <TbPhoto size={14} color="gray" />
+                          <Text size="xs" fw={700} c="dimmed" tt="uppercase">
+                            Attached Images ({bug.images.length})
+                          </Text>
                         </Group>
                         <SimpleGrid cols={{ base: 2, sm: 4 }} spacing="xs">
                           {bug.images.map((img: any) => (
-                            <Paper
-                              key={img.id}
-                              withBorder
-                              radius="md"
-                              style={{ overflow: 'hidden', cursor: 'zoom-in' }}
-                              onClick={() => setPreviewImage(img.imageUrl)}
-                            >
-                              <Image src={img.imageUrl} alt="Error screenshot" height={100} fit="cover" />
-                            </Paper>
+                            <Tooltip key={img.id} label="Click to preview" withArrow>
+                              <Paper
+                                withBorder
+                                radius="md"
+                                style={{ overflow: 'hidden', cursor: 'zoom-in' }}
+                                onClick={() => setPreviewImage(img.imageUrl)}
+                              >
+                                <Image src={img.imageUrl} alt="Error screenshot" height={100} fit="cover" />
+                              </Paper>
+                            </Tooltip>
                           ))}
                         </SimpleGrid>
                       </Box>
                     )}
 
-                    {/* Logs / History */}
                     {bug.logs && bug.logs.length > 0 && (
                       <Box>
                         <Group justify="space-between" mb={showLogs[bug.id] ? 12 : 0}>
                           <Group gap="xs">
-                            <TbHistory size={16} color="gray" />
-                            <Text size="xs" fw={700} c="dimmed">ACTIVITY LOG ({bug.logs.length})</Text>
+                            <TbHistory size={14} color="gray" />
+                            <Text size="xs" fw={700} c="dimmed" tt="uppercase">
+                              Activity Log ({bug.logs.length})
+                            </Text>
                           </Group>
-                          <Button
-                            variant="subtle"
-                            size="compact-xs"
-                            color="gray"
-                            onClick={() => toggleLogs(bug.id)}
-                          >
+                          <Button variant="subtle" size="compact-xs" color="gray" onClick={() => toggleLogs(bug.id)}>
                             {showLogs[bug.id] ? 'Hide' : 'Show'}
                           </Button>
                         </Group>
@@ -690,12 +598,16 @@ function AppErrorsPage() {
                               <Timeline.Item
                                 key={log.id}
                                 bullet={
-                                  <Badge size="xs" circle color={log.status === 'RESOLVED' ? 'teal' : 'blue'}> </Badge>
+                                  <Badge size="xs" circle color={STATUS_COLOR[log.status] ?? 'blue'}> </Badge>
+                                }
+                                title={
+                                  <Text size="sm" fw={600}>
+                                    {STATUS_LABEL[log.status] ?? log.status}
+                                  </Text>
                                 }
-                                title={<Text size="sm" fw={600}>{log.status}</Text>}
                               >
                                 <Text size="xs" c="dimmed" mb={4}>
-                                  {new Date(log.createdAt).toLocaleString()} by {log.user?.name || 'Unknown'}
+                                  {dayjs(log.createdAt).format('D MMM YYYY, HH:mm')} · {log.user?.name ?? 'Unknown'}
                                 </Text>
                                 <Text size="sm">{log.description}</Text>
                               </Timeline.Item>
@@ -706,16 +618,30 @@ function AppErrorsPage() {
                     )}
 
                     <Group justify="flex-end" pt="sm">
-                      <Button variant="light" size="compact-xs" color="blue" onClick={() => {
-                        setSelectedBugId(bug.id)
-                        setFeedbackForm({ feedBack: bug.feedBack || '' })
-                        openFeedbackModal()
-                      }}>Developer Feedback</Button>
-                      <Button variant="light" size="compact-xs" color="teal" onClick={() => {
-                        setSelectedBugId(bug.id)
-                        setUpdateForm({ status: bug.status, description: '' })
-                        openUpdateModal()
-                      }}>Update Status</Button>
+                      <Button
+                        variant="light"
+                        size="compact-sm"
+                        color="blue"
+                        onClick={() => {
+                          setSelectedBugId(bug.id)
+                          setFeedbackForm({ feedBack: bug.feedBack || '' })
+                          openFeedbackModal()
+                        }}
+                      >
+                        Developer Feedback
+                      </Button>
+                      <Button
+                        variant="light"
+                        size="compact-sm"
+                        color="teal"
+                        onClick={() => {
+                          setSelectedBugId(bug.id)
+                          setUpdateForm({ status: bug.status, description: '' })
+                          openUpdateModal()
+                        }}
+                      >
+                        Update Status
+                      </Button>
                     </Group>
                   </Stack>
                 </Accordion.Panel>
@@ -726,7 +652,7 @@ function AppErrorsPage() {
 
         {totalPages > 1 && (
           <Group justify="center" mt="xl">
-            <Pagination total={totalPages} value={page} onChange={setPage} radius="xl" />
+            <Pagination total={totalPages} value={page} onChange={setPage} size="sm" radius="xl" />
           </Group>
         )}
       </Paper>

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

@@ -1,30 +1,40 @@
-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,
   Text,
   Textarea,
   TextInput,
-  Title
+  Title,
+  Tooltip,
 } from '@mantine/core'
 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,
-  TbVersions
+  TbChevronDown,
+  TbChevronUp,
+  TbFileText,
+  TbRefresh,
+  TbVersions,
 } from 'react-icons/tb'
 import useSWR from 'swr'
 import { API_URLS } from '../config/api'
@@ -42,42 +52,50 @@ 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)
 
-  // Form State
   const [latestVersion, setLatestVersion] = useState('')
   const [minVersion, setMinVersion] = useState('')
   const [messageUpdate, setMessageUpdate] = useState('')
   const [maintenance, setMaintenance] = useState(false)
   const [isSaving, setIsSaving] = useState(false)
 
-  // Data Fetching
-  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 || []
 
-  // Initialize form when data loads or modal opens
+  // 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 () => {
@@ -98,37 +116,283 @@ function AppOverviewPage() {
         await fetch(API_URLS.createLog(), {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ type: 'UPDATE', message: `Update version information: ${JSON.stringify({ latestVersion, minVersion, maintenance, messageUpdate })}` })
+          body: JSON.stringify({ type: 'UPDATE', message: `Updated version info: latest=${latestVersion}, min=${minVersion}, maintenance=${maintenance}` }),
         }).catch(console.error)
 
-        notifications.show({
-          title: 'Update Successful',
-          message: 'Application version information has been updated.',
-          color: 'teal',
-        })
+        notifications.show({ title: 'Updated', message: 'Application version information has been saved.', color: 'teal' })
         mutateGrid()
         closeVersionModal()
       } else {
-        notifications.show({
-          title: 'Update Failed',
-          message: 'Failed to update version information. Please check your data.',
-          color: 'red',
-        })
+        notifications.show({ title: 'Failed', message: 'Could not update version info. Please try again.', color: 'red' })
       }
-    } catch (error) {
-      notifications.show({
-        title: 'Network Error',
-        message: 'Could not connect to the server. Please try again later.',
-        color: 'red',
-      })
+    } catch {
+      notifications.show({ title: 'Network Error', message: 'Could not connect to the server.', color: 'red' })
     } finally {
       setIsSaving(false)
     }
   }
 
+  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 (
     <>
-      <Modal opened={versionModalOpened} onClose={closeVersionModal} title="Update Version Information" radius="md">
+      <Modal
+        opened={versionModalOpened}
+        onClose={closeVersionModal}
+        title={<Text fw={700} size="lg">Update Version Info</Text>}
+        radius="xl"
+        overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+      >
         <Stack gap="md">
           <TextInput
             label="Active Version"
@@ -156,22 +420,55 @@ function AppOverviewPage() {
             checked={maintenance}
             onChange={(e) => setMaintenance(e.currentTarget.checked)}
           />
-          <Button fullWidth onClick={handleSaveVersion} loading={isSaving}>Save Changes</Button>
+          <Button
+            fullWidth
+            mt="md"
+            variant="gradient"
+            gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
+            onClick={handleSaveVersion}
+            loading={isSaving}
+          >
+            Save Changes
+          </Button>
         </Stack>
       </Modal>
 
       <Stack gap="xl">
-        <Group justify="space-between">
-          <Stack gap={0}>
+        <Group justify="space-between" align="flex-start">
+          <Stack gap={4}>
             <Title order={3}>Overview</Title>
-            <Text size="sm" c="dimmed">Detailed metrics for {isDesaPlus ? 'Desa+' : appId}</Text>
+            <Text size="sm" c="dimmed">
+              Real-time metrics and activity for {isDesaPlus ? 'Desa+' : appId}.
+            </Text>
           </Stack>
-
-          {/* <Group gap="md">
-            <ActionIcon variant="light" color="brand-blue" size="lg" radius="md" onClick={handleRefresh}>
-              <TbRefresh size={20} />
-            </ActionIcon>
-          </Group> */}
+          <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">
@@ -185,12 +482,12 @@ function AppOverviewPage() {
             <Group justify="space-between" mt="md">
               <Stack gap={0}>
                 <Text size="xs" c="dimmed">Min. Version</Text>
-                <Text size="sm" fw={600}>{grid?.version?.mobile_minimum_version || '-'}</Text>
+                <Text size="sm" fw={600}>{grid?.version?.mobile_minimum_version || '—'}</Text>
               </Stack>
               <Stack gap={0} align="flex-end">
                 <Text size="xs" c="dimmed">Maintenance</Text>
-                <Badge size="sm" color={grid?.version?.mobile_maintenance === 'true' ? 'red' : 'gray'} variant="light">
-                  {grid?.version?.mobile_maintenance?.toUpperCase() || 'FALSE'}
+                <Badge size="sm" color={maintenanceOn ? 'orange' : 'teal'} variant="light">
+                  {maintenanceOn ? 'On' : 'Off'}
                 </Badge>
               </Stack>
             </Group>
@@ -198,41 +495,105 @@ function AppOverviewPage() {
 
           <SummaryCard
             title="Total Activity Today"
-            value={gridLoading ? '...' : (grid?.activity?.today?.toLocaleString() || '0')}
+            value={gridLoading ? '...' : (grid?.activity?.today?.toLocaleString() ?? '0')}
             icon={TbActivity}
             color="teal"
-            trend={grid?.activity?.increase ? { value: `${grid.activity.increase}%`, positive: grid.activity.increase > 0 } : undefined}
+            trend={grid?.activity?.increase != null && Number(grid.activity.increase) !== 0
+              ? { value: `${grid.activity.increase}%`, positive: Number(grid.activity.increase) > 0 }
+              : undefined}
           />
 
           <SummaryCard
-            title="Total Villages Active"
-            value={gridLoading ? '...' : (grid?.village?.active || '0')}
+            title="Active Villages"
+            value={gridLoading ? '...' : (grid?.village?.active ?? '0')}
             icon={TbBuildingCommunity}
             color="indigo"
             onClick={() => navigate({ to: `/apps/${appId}/villages` })}
           >
             <Group justify="space-between" mt="md">
-              <Text size="xs" c="dimmed">Nonactive Villages</Text>
-              <Badge size="sm" color="red" variant="light">{grid?.village?.inactive || 0}</Badge>
+              <Text size="xs" c="dimmed">Inactive</Text>
+              <Badge size="sm" color="red" variant="light">{grid?.village?.inactive ?? 0}</Badge>
             </Group>
           </SummaryCard>
 
           <SummaryCard
-            title="Errors Open"
-            value={appLoading ? '...' : (appData?.errors || '0')}
+            title="Open Errors"
+            value={appLoading ? '...' : (appData?.errors ?? 0)}
             icon={TbAlertTriangle}
             color="red"
-            isError={true}
+            isError
             onClick={() => navigate({ to: `/apps/${appId}/errors` })}
           />
         </SimpleGrid>
 
-        <SimpleGrid cols={{ base: 1, lg: 2 }} spacing="lg">
-          <VillageActivityLineChart data={dailyData} isLoading={dailyLoading} />
-          <VillageComparisonBarChart data={comparisonData} isLoading={comparisonLoading} />
-        </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>
 
-        <ErrorDataTable appId={appId} />
+            <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>
+            <Text size="sm" c="dimmed">Activity trends and village comparisons.</Text>
+          </Stack>
+        </Group>
+
+        <SimpleGrid cols={{ base: 1, lg: 2 }} spacing="lg">
+          <VillageActivityLineChart data={dailyData} isLoading={dailyLoading} range={dailyRange} onRangeChange={setDailyRange} />
+          <VillageComparisonBarChart data={comparisonData} isLoading={comparisonLoading} range={comparisonRange} onRangeChange={setComparisonRange} />
+        </SimpleGrid>
+        <ErrorDataTable ref={errorTableRef} appId={appId} />
       </Stack>
     </>
   )

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

@@ -1,34 +1,36 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import useSWR from 'swr'
 import {
-  Badge,
-  Group,
-  Stack,
-  Text,
-  Title,
-  Paper,
-  Table,
-  TextInput,
   ActionIcon,
+  Anchor,
   Avatar,
-  Code,
+  Badge,
   Button,
-  Box,
+  Code,
+  Group,
+  Loader,
   Pagination,
-  ThemeIcon,
+  Paper,
   ScrollArea,
-  Container,
+  Select,
+  Stack,
+  Table,
+  Text,
+  TextInput,
+  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 {
-  TbSearch,
-  TbDownload,
-  TbX,
-  TbHistory,
+  TbAlertCircle,
   TbCalendar,
-  TbUser,
-  TbHome2
+  TbDownload,
+  TbHistory,
+  TbHome2,
+  TbSearch,
+  TbX,
 } from 'react-icons/tb'
 import { API_URLS } from '../config/api'
 
@@ -43,30 +45,124 @@ interface LogEntry {
   desc: string
   username: string
   village: string
+  idVillage: string
 }
 
 const fetcher = (url: string) => fetch(url).then((res) => res.json())
 
+const ACTION_COLOR: Record<string, string> = {
+  LOGIN: 'teal',
+  LOGOUT: 'gray',
+  CREATE: 'blue',
+  UPDATE: 'yellow',
+  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('')
@@ -74,162 +170,188 @@ function AppLogsPage() {
     setPage(1)
   }
 
-  const getActionColor = (action: string) => {
-    const a = action.toUpperCase()
-    if (a === 'LOGIN') return 'blue'
-    if (a === 'LOGOUT') return 'gray'
-    if (a === 'CREATE') return 'teal'
-    if (a === 'UPDATE') return 'orange'
-    if (a === 'DELETE') return 'red'
-    return 'brand-blue'
-  }
-
   if (!isDesaPlus) {
     return (
-      <Container size="xl" py="xl">
-        <Paper p="xl" radius="xl" className="glass" style={{ textAlign: 'center' }}>
-          <TbHistory size={48} color="gray" opacity={0.5} />
-          <Title order={3} mt="md">Activity Logs</Title>
-          <Text c="dimmed">This feature is currently customized for Desa+. Other apps coming soon.</Text>
-        </Paper>
-      </Container>
+      <Paper withBorder radius="2xl" className="glass" p="xl">
+        <Stack align="center" gap="xs" py="xl">
+          <TbHistory size={36} style={{ opacity: 0.25 }} />
+          <Text fw={600} size="sm">Activity Logs — Coming Soon</Text>
+          <Text size="sm" c="dimmed">This feature is currently available for Desa+. Other apps coming soon.</Text>
+        </Stack>
+      </Paper>
     )
   }
 
   return (
     <Stack gap="xl" py="md">
-      <Paper withBorder radius="2xl" p="xl" className="glass" style={{ borderLeft: '6px solid #7C3AED' }}>
-        <Stack gap="lg">
-          <Group justify="space-between" align="center">
-            <Stack gap={4}>
-              <Group gap="xs">
-                <ThemeIcon variant="light" color="violet" size="lg" radius="md">
-                  <TbHistory size={22} />
-                </ThemeIcon>
-                <Title order={3}>Activity Logs</Title>
-              </Group>
-              <Text size="sm" c="dimmed" ml={40}>
-                {isLoading ? 'Loading logs...' : `Auditing ${response?.data?.total || 0} events across all villages`}
-              </Text>
-            </Stack>
-            {/* <Button
-              variant="light"
-              color="gray"
-              leftSection={<TbDownload size={18} />}
-              radius="md"
-              size="md"
-            >
-              Export
-            </Button> */}
-          </Group>
+      <Group justify="space-between" align="flex-start">
+        <Stack gap={4}>
+          <Title order={3}>Activity Logs</Title>
+          <Text size="sm" c="dimmed">
+            {isLoading
+              ? 'Loading logs...'
+              : `${(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">
+        <Stack gap="sm">
           <TextInput
-            placeholder="Search action or village..."
-            leftSection={<TbSearch size={18} />}
-            size="md"
+            placeholder="Search by user name or village..."
+            leftSection={<TbSearch size={16} />}
+            size="sm"
             rightSection={
               search ? (
-                <ActionIcon variant="transparent" color="gray" onClick={handleClearSearch} size="md">
-                  <TbX size={18} />
-                </ActionIcon>
+                <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)}
+            onChange={(e) => setSearch(e.currentTarget.value)}
             radius="md"
-            style={{ maxWidth: 500 }}
-            ml={40}
           />
+          <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 ? (
-        <Paper p="xl" radius="xl" withBorder style={{ textAlign: 'center' }}>
-          <Text c="dimmed">Fetching activity logs...</Text>
-        </Paper>
+        <Group justify="center" py="xl">
+          <Loader type="dots" />
+        </Group>
       ) : error ? (
-        <Paper p="xl" radius="xl" withBorder style={{ textAlign: 'center' }}>
-          <Text c="red">Failed to load logs from API.</Text>
+        <Paper withBorder radius="2xl" className="glass" p="md">
+          <Stack align="center" gap="xs" py="xl">
+            <TbAlertCircle size={32} style={{ opacity: 0.4, color: 'var(--mantine-color-red-6)' }} />
+            <Text size="sm" c="dimmed">Failed to load logs from the API.</Text>
+          </Stack>
         </Paper>
       ) : logs.length === 0 ? (
-        <Paper p="xl" radius="xl" withBorder style={{ textAlign: 'center' }}>
-          <TbHistory size={40} color="gray" opacity={0.4} />
-          <Text c="dimmed" mt="md">No activity found for this search.</Text>
+        <Paper withBorder radius="2xl" className="glass" p="md">
+          <Stack align="center" gap="xs" py="xl">
+            <TbHistory size={32} style={{ opacity: 0.25 }} />
+            <Text size="sm" c="dimmed">
+              {searchQuery || filterAction || filterVillageId || dateFrom ? 'No activity found for this filter.' : 'No activity logs yet.'}
+            </Text>
+          </Stack>
         </Paper>
       ) : (
         <Paper withBorder radius="2xl" className="glass" style={{ overflow: 'hidden' }}>
           <ScrollArea h={isMobile ? undefined : 'auto'} offsetScrollbars>
-            <Table 
-              verticalSpacing="lg" 
-              horizontalSpacing="xl" 
-              highlightOnHover 
+            <Table
+              className="data-table"
+              verticalSpacing="sm"
+              horizontalSpacing="lg"
+              highlightOnHover
               withColumnBorders={false}
-              style={{ 
-                tableLayout: isMobile ? 'auto' : 'fixed', 
+              style={{
+                tableLayout: isMobile ? 'auto' : 'fixed',
                 width: '100%',
-                minWidth: isMobile ? 900 : 'unset'
+                minWidth: isMobile ? 900 : 'unset',
               }}
             >
-              <Table.Thead bg="rgba(0,0,0,0.05)">
+              <Table.Thead>
                 <Table.Tr>
-                  <Table.Th style={{ border: 'none', width: isMobile ? undefined : '15%' }}>Timestamp</Table.Th>
-                  <Table.Th style={{ border: 'none', width: isMobile ? undefined : '20%' }}>User & Village</Table.Th>
-                  <Table.Th style={{ border: 'none', width: isMobile ? undefined : '15%' }}>Action</Table.Th>
-                  <Table.Th style={{ border: 'none', width: isMobile ? undefined : '40%' }}>Description</Table.Th>
+                  <Table.Th style={{ width: isMobile ? undefined : '18%' }}>Timestamp</Table.Th>
+                  <Table.Th style={{ width: isMobile ? undefined : '22%' }}>User & Village</Table.Th>
+                  <Table.Th style={{ width: isMobile ? undefined : '14%' }}>Action</Table.Th>
+                  <Table.Th>Description</Table.Th>
                 </Table.Tr>
               </Table.Thead>
               <Table.Tbody>
                 {logs.map((log) => (
-                  <Table.Tr key={log.id} style={{ borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
+                  <Table.Tr key={log.id}>
                     <Table.Td>
-                      <Group gap={8} wrap="nowrap" align="flex-start">
-                        <ThemeIcon variant="transparent" color="gray" size="sm">
-                          <TbCalendar size={14} />
-                        </ThemeIcon>
-                        {log.createdAt.endsWith('lalu') ? (
-                          <Text size="xs" fw={700}>{log.createdAt}</Text>
-                        ) : (
-                          <Stack gap={0}>
-                            <Text size="xs" fw={700}>
-                              {log.createdAt.split(' ').slice(1).join(' ')}
-                            </Text>
-                            <Text size="xs" c="dimmed">
-                              {log.createdAt.split(' ')[0]}
-                            </Text>
-                          </Stack>
-                        )}
-                      </Group>
+                      <LogTimestamp value={log.createdAt} />
                     </Table.Td>
                     <Table.Td>
                       <Stack gap={4} style={{ overflow: 'hidden' }}>
-                        <Group gap={8} wrap="nowrap">
+                        <Group gap={6} wrap="nowrap">
                           <Avatar size="xs" radius="xl" color="brand-blue" variant="light">
                             {log.username.charAt(0)}
                           </Avatar>
-                          <Text size="xs" fw={700} truncate="end">{log.username}</Text>
+                          <Text size="xs" fw={600} truncate="end">{log.username}</Text>
                         </Group>
-                        <Group gap={8} wrap="nowrap">
+                        <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>
                     <Table.Td>
-                      <Badge 
-                        variant="dot" 
-                        color={getActionColor(log.action)} 
-                        radius="sm" 
-                        size="xs"
-                        styles={{ 
-                          root: { fontWeight: 800 },
-                          label: { textOverflow: 'clip', overflow: 'visible' }
-                        }}
+                      <Badge
+                        variant="light"
+                        color={getActionColor(log.action)}
+                        size="sm"
+                        tt="capitalize"
                       >
                         {log.action}
                       </Badge>
                     </Table.Td>
                     <Table.Td>
-                      <Code color="brand-blue" bg="rgba(37, 99, 235, 0.05)" fw={600} style={{ fontSize: '11px', display: 'block', whiteSpace: 'normal' }}>
+                      <Code
+                        color="brand-blue"
+                        bg="rgba(37, 99, 235, 0.05)"
+                        fw={600}
+                        style={{ fontSize: 11, display: 'block', whiteSpace: 'normal' }}
+                      >
                         {log.desc}
                       </Code>
                     </Table.Td>
@@ -241,12 +363,13 @@ function AppLogsPage() {
         </Paper>
       )}
 
-      {!isLoading && !error && response?.data?.totalPage > 0 && (
-        <Group justify="center" mt="xl">
+      {!isLoading && !error && response?.data?.totalPage > 1 && (
+        <Group justify="center">
           <Pagination
             value={page}
             onChange={setPage}
             total={response.data.totalPage}
+            size="sm"
             radius="md"
             withEdges={false}
             siblings={1}

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

@@ -1,38 +1,101 @@
 import { DashboardLayout } from '@/frontend/components/DashboardLayout'
+import { APP_CONFIGS } from '@/frontend/config/appMenus'
 import {
+  Badge,
   Box,
   Container,
   Divider,
   Group,
+  Skeleton,
   Stack,
   Text,
-  Title
+  Title,
 } from '@mantine/core'
-import { createFileRoute, Outlet, useNavigate, useParams } from '@tanstack/react-router'
+import { useQuery } from '@tanstack/react-query'
+import { createFileRoute, Outlet, useParams } from '@tanstack/react-router'
+import { TbAlertTriangle, TbTools } from 'react-icons/tb'
 
 export const Route = createFileRoute('/apps/$appId')({
   component: AppDetailLayout,
 })
 
+const STATUS_COLOR: Record<string, string> = {
+  active: 'teal',
+  warning: 'orange',
+  error: 'red',
+}
+const STATUS_LABEL: Record<string, string> = {
+  active: 'Active',
+  warning: 'Warning',
+  error: 'Error',
+}
+
 function AppDetailLayout() {
   const { appId } = useParams({ from: '/apps/$appId' })
-  const navigate = useNavigate()
 
-  // Format app ID for display (e.g., desa-plus -> Desa+)
-  const appName = appId
-    .split('-')
-    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-    .join(' ')
-    .replace('Plus', '+')
+  const { data: appData, isLoading } = useQuery({
+    queryKey: ['apps', appId],
+    queryFn: () => fetch(`/api/apps/${appId}`).then((r) => r.json()),
+    staleTime: 30_000,
+  })
+
+  const configName = APP_CONFIGS[appId]?.name
+  const displayName = appData?.name ?? configName ?? appId
+
+  const statusKey = appData?.maintenance ? 'maintenance' : (appData?.status ?? 'active')
+  const statusColor = appData?.maintenance ? 'gray' : (STATUS_COLOR[appData?.status] ?? 'gray')
+  const statusLabel = appData?.maintenance ? 'Maintenance' : (STATUS_LABEL[appData?.status] ?? appData?.status)
 
   return (
     <DashboardLayout>
       <Container size="xl" py="lg">
         <Stack gap="md">
-          <Group justify="space-between" align="flex-end">
-            <Stack gap={4}>
-              <Title order={1} className="gradient-text" style={{ fontSize: '2.5rem' }}>{appName}</Title>
-              <Text c="dimmed" size="sm" fw={500}>Application ID: <span style={{ fontFamily: 'monospace' }}>{appId}</span></Text>
+          <Group justify="space-between" align="flex-start">
+            <Stack gap={6}>
+              <Group gap="sm" align="center">
+                {isLoading ? (
+                  <Skeleton height={36} width={180} radius="md" />
+                ) : (
+                  <Title order={2} className="gradient-text">{displayName}</Title>
+                )}
+                {!isLoading && appData && (
+                  <Badge color={statusColor} variant="dot" size="md">
+                    {statusLabel}
+                  </Badge>
+                )}
+              </Group>
+
+              <Group gap="xs" align="center">
+                <Text size="xs" c="dimmed" fw={500} style={{ fontFamily: 'monospace' }}>
+                  {appId}
+                </Text>
+                {isLoading ? (
+                  <Skeleton height={20} width={60} radius="xl" />
+                ) : (
+                  <>
+                    {(appData?.errors ?? 0) > 0 && (
+                      <Badge
+                        variant="light"
+                        color="red"
+                        size="sm"
+                        leftSection={<TbAlertTriangle size={10} />}
+                      >
+                        {appData.errors} open {appData.errors === 1 ? 'error' : 'errors'}
+                      </Badge>
+                    )}
+                    {appData?.maintenance && (
+                      <Badge
+                        variant="light"
+                        color="orange"
+                        size="sm"
+                        leftSection={<TbTools size={10} />}
+                      >
+                        Maintenance mode
+                      </Badge>
+                    )}
+                  </>
+                )}
+              </Group>
             </Stack>
           </Group>
 

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

@@ -1,23 +1,32 @@
-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,
   ThemeIcon,
-  Title
+  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,
@@ -25,12 +34,16 @@ import {
   TbCalendar,
   TbCalendarEvent,
   TbChartBar,
+  TbClock,
   TbEdit,
+  TbFileText,
   TbHome2,
   TbLayoutKanban,
   TbMapPin,
   TbPower,
+  TbTestPipe,
   TbUser,
+  TbUserOff,
   TbUsers,
   TbUsersGroup,
   TbWifi
@@ -61,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)',
@@ -75,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
@@ -91,26 +109,42 @@ 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 ? (
         <Stack h={280} align="center" justify="center">
-          <Text size="sm" c="dimmed">Loading chart data...</Text>
+          <Loader type="dots" />
         </Stack>
       ) : (
         <AreaChart
@@ -119,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))',
+              },
+            },
           }}
         />
       )}
@@ -136,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() {
@@ -152,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
@@ -160,7 +460,8 @@ function VillageDetailPage() {
   const openEdit = () => {
     setEditForm({
       name: village?.name || '',
-      desc: village?.desc || ''
+      desc: village?.desc || '',
+      isDummy: village?.isDummy ?? false,
     })
     openEditModal()
   }
@@ -187,7 +488,8 @@ function VillageDetailPage() {
         body: JSON.stringify({
           id: village.id,
           name: editForm.name,
-          desc: editForm.desc
+          desc: editForm.desc,
+          isDummy: editForm.isDummy,
         })
       })
 
@@ -195,7 +497,7 @@ function VillageDetailPage() {
         await fetch(API_URLS.createLog(), {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ type: 'UPDATE', message: `Data desa (${appId}) diperbarui: ${editForm.name}-${village.id}` })
+          body: JSON.stringify({ type: 'UPDATE', message: `Village data updated (${appId}): ${editForm.name} - ${village.id}` })
         }).catch(console.error)
 
         notifications.show({
@@ -212,7 +514,7 @@ function VillageDetailPage() {
           color: 'red'
         })
       }
-    } catch (error) {
+    } catch {
       notifications.show({
         title: 'Error',
         message: 'A network error occurred.',
@@ -223,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
 
@@ -243,7 +755,7 @@ function VillageDetailPage() {
         await fetch(API_URLS.createLog(), {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ type: 'UPDATE', message: `Status desa (${appId}) diperbarui (${!village.isActive ? 'activated' : 'deactivated'}): ${village.name}-${village.id}` })
+          body: JSON.stringify({ type: 'UPDATE', message: `Village status updated (${appId}): ${village.name} ${!village.isActive ? 'activated' : 'deactivated'} - ${village.id}` })
         }).catch(console.error)
 
         notifications.show({
@@ -260,7 +772,7 @@ function VillageDetailPage() {
           color: 'red'
         })
       }
-    } catch (error) {
+    } catch {
       notifications.show({
         title: 'Error',
         message: 'A network error occurred.',
@@ -275,9 +787,9 @@ function VillageDetailPage() {
 
   if (infoLoading || gridLoading) {
     return (
-      <Stack align="center" py="xl" gap="md">
-        <Text c="dimmed">Loading village data...</Text>
-      </Stack>
+      <Group justify="center" py="xl">
+        <Loader type="dots" />
+      </Group>
     )
   }
 
@@ -312,16 +824,28 @@ 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}
             disabled={!isDeveloper}
           >
-            {village.isActive ? 'Deactivate' : 'Active'}
+            {village.isActive ? 'Deactivate' : 'Activate'}
           </Button>
           <Button
             variant="light"
@@ -360,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)" />
@@ -427,58 +964,61 @@ 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
         opened={confirmModalOpened}
         onClose={closeConfirmModal}
-        title={<Text fw={700}>Confirm Status Change</Text>}
-        radius="xl"
+        radius="md"
+        title={<Text fw={700} size="lg">Confirm Status Change</Text>}
         centered
+        overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
       >
         <Stack gap="md">
           <Text size="sm">
@@ -505,7 +1045,7 @@ function VillageDetailPage() {
         opened={editModalOpened}
         onClose={closeEditModal}
         title={<Text fw={700}>Edit Village Details</Text>}
-        radius="xl"
+        radius="md"
         size="md"
       >
         <Stack gap="md">
@@ -524,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

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

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

src/frontend/routes/dashboard.tsx

@@ -14,10 +14,11 @@ import {
   Table,
   Text,
   Title,
+  Tooltip,
 } from '@mantine/core'
 import { useQuery } from '@tanstack/react-query'
 import { createFileRoute, Link, redirect } from '@tanstack/react-router'
-import { TbApps, TbChevronRight, TbMessageReport, TbUsers } from 'react-icons/tb'
+import { TbAlertCircle, TbApps, TbChevronRight, TbMessageReport, TbUsers } from 'react-icons/tb'
 
 export const Route = createFileRoute('/dashboard')({
   beforeLoad: async ({ context }) => {
@@ -35,6 +36,39 @@ export const Route = createFileRoute('/dashboard')({
   component: DashboardPage,
 })
 
+function getGreeting() {
+  const hour = new Date().getHours()
+  if (hour < 12) return 'Good morning'
+  if (hour < 17) return 'Good afternoon'
+  return 'Good evening'
+}
+
+function formatTimeAgo(dateStr: string) {
+  const diff = new Date().getTime() - new Date(dateStr).getTime()
+  const minutes = Math.floor(diff / 60000)
+  if (minutes < 1) return 'Just now'
+  if (minutes < 60) return `${minutes}m ago`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours}h ago`
+  const days = Math.floor(hours / 24)
+  if (days === 1) return 'Yesterday'
+  if (days < 7) return `${days}d ago`
+  return new Date(dateStr).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' })
+}
+
+const SEVERITY_COLOR: Record<string, string> = {
+  OPEN: 'red',
+  IN_PROGRESS: 'blue',
+  ON_HOLD: 'orange',
+  RESOLVED: 'teal',
+  RELEASED: 'green',
+  CLOSED: 'gray',
+}
+
+function formatSeverityLabel(s: string) {
+  return s.replace(/_/g, ' ')
+}
+
 function DashboardPage() {
   const { data: sessionData } = useSession()
   const user = sessionData?.user
@@ -54,34 +88,42 @@ function DashboardPage() {
     queryFn: () => fetch('/api/dashboard/recent-errors').then((r) => r.json()),
   })
 
-  const formatTimeAgo = (dateStr: string) => {
-    const diff = new Date().getTime() - new Date(dateStr).getTime()
-    const minutes = Math.floor(diff / 60000)
-    if (minutes < 60) return `${minutes || 1} mins ago`
-    const hours = Math.floor(minutes / 60)
-    if (hours < 24) return `${hours} hours ago`
-    return `${Math.floor(hours / 24)} days ago`
-  }
+  const today = new Date().toLocaleDateString('en-GB', {
+    weekday: 'long',
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  })
+
+  const firstName = user?.name?.split(' ')[0] ?? user?.name
 
   return (
     <DashboardLayout>
       <Container size="xl" py="lg">
         <Stack gap="xl">
-          <Group justify="space-between" align="center">
-            <Stack gap={0}>
-              <Title order={2} className="gradient-text">Overview Dashboard</Title>
-              <Text size="sm" c="dimmed">Welcome back, {user?.name}. Here is what's happening today.</Text>
+          <Group justify="space-between" align="flex-start">
+            <Stack gap={4}>
+              <Text size="xs" c="dimmed" fw={500} tt="uppercase" style={{ letterSpacing: '0.05em' }}>
+                {today}
+              </Text>
+              <Title order={2} className="gradient-text">
+                {getGreeting()}, {firstName}.
+              </Title>
+              <Text size="sm" c="dimmed">
+                Here's a real-time overview of all your monitored applications.
+              </Text>
             </Stack>
-            {/* <Button
+            <Button
               variant="gradient"
               gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
               leftSection={<TbApps size={18} />}
               radius="md"
               component={Link}
               to="/apps"
+              size="sm"
             >
-              Manage All Apps
-            </Button> */}
+              Manage Apps
+            </Button>
           </Group>
 
           {statsLoading ? (
@@ -89,33 +131,43 @@ function DashboardPage() {
           ) : (
             <SimpleGrid cols={{ base: 1, sm: 3 }}>
               <StatsCard
-                title="Total Applications"
-                value={stats?.totalApps || 0}
+                title="Applications"
+                value={stats?.totalApps ?? 0}
+                description="Registered platforms"
                 icon={TbApps}
                 color="brand-blue"
-              // trend={{ value: stats?.trends?.totalApps.toString() || '0', positive: true }}
               />
               <StatsCard
-                title="New Errors"
-                value={stats?.newErrors || 0}
+                title="Open Errors"
+                value={stats?.newErrors ?? 0}
+                description="Unresolved bug reports"
                 icon={TbMessageReport}
-                color="brand-purple"
-              // trend={{ value: stats?.trends?.newErrors.toString() || '0', positive: false }}
+                color="red"
               />
               <StatsCard
-                title="Users"
-                value={stats?.activeUsers || 0}
+                title="Operators"
+                value={stats?.activeUsers ?? 0}
+                description="Active platform users"
                 icon={TbUsers}
                 color="teal"
-              // trend={{ value: stats?.trends?.activeUsers.toString() || '0', positive: true }}
               />
             </SimpleGrid>
           )}
 
-          <Group justify="space-between" mt="md">
-            <Title order={3}>Registered Applications</Title>
-            <Button variant="subtle" color="brand-blue" rightSection={<TbChevronRight size={16} />} component={Link} to="/apps">
-              View All Apps
+          <Group justify="space-between" align="flex-end" mt="md">
+            <Stack gap={2}>
+              <Title order={3}>Registered Applications</Title>
+              <Text size="sm" c="dimmed">All monitored apps on this platform.</Text>
+            </Stack>
+            <Button
+              variant="subtle"
+              color="brand-blue"
+              rightSection={<TbChevronRight size={16} />}
+              component={Link}
+              to="/apps"
+              size="sm"
+            >
+              View All
             </Button>
           </Group>
 
@@ -129,22 +181,32 @@ function DashboardPage() {
             </SimpleGrid>
           )}
 
-          <Group justify="space-between" mt="md">
-            <Title order={3}>Recent Error Reports</Title>
-            <Button variant="subtle" color="brand-blue" rightSection={<TbChevronRight size={16} />} component={Link} to="/bug-reports">
-              View All Errors
+          <Group justify="space-between" align="flex-end" mt="md">
+            <Stack gap={2}>
+              <Title order={3}>Recent Error Reports</Title>
+              <Text size="sm" c="dimmed">Latest bug submissions across all apps.</Text>
+            </Stack>
+            <Button
+              variant="subtle"
+              color="brand-blue"
+              rightSection={<TbChevronRight size={16} />}
+              component={Link}
+              to="/bug-reports"
+              size="sm"
+            >
+              View All
             </Button>
           </Group>
 
-          <Paper withBorder radius="2xl" className="glass" p="md">
-            <Table className="data-table" verticalSpacing="md">
+          <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>Application</Table.Th>
+                  <Table.Th style={{ whiteSpace: 'nowrap' }}>App</Table.Th>
                   <Table.Th>Error Message</Table.Th>
-                  <Table.Th>Version</Table.Th>
-                  <Table.Th>Time</Table.Th>
-                  <Table.Th>Severity</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>
@@ -156,30 +218,39 @@ function DashboardPage() {
                   </Table.Tr>
                 ) : recentErrors.length === 0 ? (
                   <Table.Tr>
-                    <Table.Td colSpan={5} align="center" py="xl">
-                      <Text c="dimmed" size="sm">No recent errors found.</Text>
+                    <Table.Td colSpan={5}>
+                      <Stack align="center" gap="xs" py="xl">
+                        <TbAlertCircle size={32} style={{ opacity: 0.25 }} />
+                        <Text c="dimmed" size="sm">No error reports yet — all systems are running smoothly.</Text>
+                      </Stack>
                     </Table.Td>
                   </Table.Tr>
                 ) : recentErrors.map((error: any) => (
                   <Table.Tr key={error.id}>
-                    <Table.Td>
-                      <Text fw={600} size="sm" style={{ textTransform: 'uppercase' }}>{error.app}</Text>
+                    <Table.Td style={{ whiteSpace: 'nowrap' }}>
+                      <Text fw={600} size="sm" tt="uppercase">{error.app}</Text>
                     </Table.Td>
-                    <Table.Td>
-                      <Text size="sm" c="dimmed" lineClamp={1}>{error.message}</Text>
+                    <Table.Td style={{ maxWidth: 280 }}>
+                      <Tooltip label={error.message} multiline maw={320} withArrow position="top-start">
+                        <Text size="sm" c="dimmed" lineClamp={1} style={{ cursor: 'default' }}>
+                          {error.message}
+                        </Text>
+                      </Tooltip>
                     </Table.Td>
-                    <Table.Td>
-                      <Badge variant="light" color="gray">v{error.version}</Badge>
+                    <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={error.severity === 'OPEN' ? 'red' : error.severity === 'IN_PROGRESS' || error.severity === 'ON_HOLD' ? 'orange' : 'yellow'}
-                        variant="dot"
+                        color={SEVERITY_COLOR[error.severity] ?? 'gray'}
+                        variant="light"
+                        size="sm"
+                        tt="capitalize"
                       >
-                        {error.severity.toUpperCase()}
+                        {formatSeverityLabel(error.severity)}
                       </Badge>
                     </Table.Td>
                   </Table.Tr>

src/frontend/routes/dev.tsx

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

src/frontend/routes/index.tsx

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

src/frontend/routes/login.tsx

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

src/frontend/routes/logs.tsx

@@ -1,24 +1,26 @@
 import {
   ActionIcon,
   Badge,
-  Center,
+  Box,
   Container,
   Group,
   Loader,
   Pagination,
+  Paper,
   SegmentedControl,
   Select,
   Stack,
   Table,
   Text,
   Title,
+  Tooltip,
 } from '@mantine/core'
 import { DatePickerInput, type DatesRangeValue } from '@mantine/dates'
 import dayjs from 'dayjs'
 import 'dayjs/locale/id'
 import { useMemo, useState } from 'react'
 import { createFileRoute } from '@tanstack/react-router'
-import { TbRefresh } from 'react-icons/tb'
+import { TbHistory, TbRefresh } from 'react-icons/tb'
 import { DashboardLayout } from '@/frontend/components/DashboardLayout'
 import useSWR from 'swr'
 import { API_URLS } from '../config/api'
@@ -30,8 +32,16 @@ export const Route = createFileRoute('/logs')({
 const fetcher = (url: string) => fetch(url, { credentials: 'include' }).then((r) => r.json())
 
 const LOG_TYPES = ['all', 'LOGIN', 'LOGOUT', 'CREATE', 'UPDATE', 'DELETE'] as const
+const LOG_TYPE_LABEL: Record<string, string> = {
+  all: 'All',
+  LOGIN: 'Login',
+  LOGOUT: 'Logout',
+  CREATE: 'Create',
+  UPDATE: 'Update',
+  DELETE: 'Delete',
+}
 const LOG_TYPE_COLOR: Record<string, string> = {
-  LOGIN: 'green',
+  LOGIN: 'teal',
   LOGOUT: 'gray',
   CREATE: 'blue',
   UPDATE: 'yellow',
@@ -47,9 +57,9 @@ function GlobalLogsPage() {
   const { data: operatorsData } = useSWR(API_URLS.getLogOperators(), fetcher)
 
   const operatorOptions = useMemo(() => {
-    if (!operatorsData || !Array.isArray(operatorsData)) return [{ value: 'all', label: 'Semua operator' }]
+    if (!operatorsData || !Array.isArray(operatorsData)) return [{ value: 'all', label: 'All users' }]
     return [
-      { value: 'all', label: 'Semua user' },
+      { value: 'all', label: 'All users' },
       ...operatorsData.map((op: any) => ({ value: op.id, label: op.name })),
     ]
   }, [operatorsData])
@@ -69,88 +79,153 @@ function GlobalLogsPage() {
   return (
     <DashboardLayout>
       <Container size="xl" py="lg">
-        <Stack>
-          <Group justify="space-between">
-            <Title order={3}>Activity Logs</Title>
-            <ActionIcon variant="subtle" color="gray" onClick={() => mutate()}>
-              <TbRefresh size={16} />
-            </ActionIcon>
+        <Stack gap="xl">
+          <Group justify="space-between" align="flex-start">
+            <Stack gap={4}>
+              <Title order={2} className="gradient-text">Activity Logs</Title>
+              <Text size="sm" c="dimmed">
+                Track all user actions and system events across the platform.
+              </Text>
+            </Stack>
+            <Tooltip label="Refresh logs" withArrow>
+              <ActionIcon
+                variant="light"
+                color="brand-blue"
+                size="lg"
+                onClick={() => mutate()}
+                loading={isLoading}
+              >
+                <TbRefresh size={16} />
+              </ActionIcon>
+            </Tooltip>
           </Group>
 
-          <Group gap="sm" wrap="wrap">
-            <Select
-              placeholder="Filter user"
-              value={operatorId}
-              onChange={(v) => { setOperatorId(v ?? 'all'); setPage(1) }}
-              data={operatorOptions}
-              w={180}
-              clearable
-            />
-            <DatePickerInput
-              type="range"
-              placeholder="Filter tanggal"
-              value={dateRange}
-              onChange={(v) => { setDateRange(v); setPage(1) }}
-              locale="id"
-              valueFormat="DD MMM YYYY"
-              clearable
-              w={300}
-            />
-            <SegmentedControl
-              value={type}
-              onChange={(v) => { setType(v); setPage(1) }}
-              data={LOG_TYPES.map((t) => ({ label: t === 'all' ? 'All' : t, value: t }))}
-            />
-          </Group>
+          <Paper withBorder radius="xl" p="md" className="glass">
+            <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>
+                <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>
+            </Stack>
+          </Paper>
 
-          {isLoading ? (
-            <Center py="xl"><Loader /></Center>
+          {isLoading && !data ? (
+            <Group justify="center" py="xl">
+              <Loader type="dots" />
+            </Group>
           ) : (
-            <>
+            <Paper withBorder radius="2xl" className="glass" p="md">
               <Table.ScrollContainer minWidth={600}>
-                <Table striped highlightOnHover fz="xs" style={{ tableLayout: 'fixed', width: '100%' }}>
+                <Table
+                  className="data-table"
+                  highlightOnHover
+                  verticalSpacing="sm"
+                  fz="sm"
+                  style={{ tableLayout: 'fixed', width: '100%' }}
+                >
                   <colgroup>
-                    <col style={{ width: 160 }} />
-                    <col style={{ width: 200 }} />
-                    <col style={{ width: 100 }} />
+                    <col style={{ width: 155 }} />
+                    <col style={{ width: 210 }} />
+                    <col style={{ width: 105 }} />
                     <col />
                   </colgroup>
                   <Table.Thead>
                     <Table.Tr>
-                      <Table.Th>Time</Table.Th>
-                      <Table.Th>Operator</Table.Th>
-                      <Table.Th>Type</Table.Th>
-                      <Table.Th>Message</Table.Th>
+                      <Table.Th>Timestamp</Table.Th>
+                      <Table.Th>User</Table.Th>
+                      <Table.Th>Action</Table.Th>
+                      <Table.Th>Description</Table.Th>
                     </Table.Tr>
                   </Table.Thead>
                   <Table.Tbody>
                     {logs.map((log: any) => (
                       <Table.Tr key={log.id}>
                         <Table.Td style={{ whiteSpace: 'nowrap' }}>
-                          {new Date(log.createdAt).toLocaleString('id-ID')}
+                          <Stack gap={0}>
+                            <Text size="xs" fw={500}>
+                              {dayjs(log.createdAt).locale('id').format('D MMM YYYY')}
+                            </Text>
+                            <Text size="xs" c="dimmed">
+                              {dayjs(log.createdAt).format('HH:mm:ss')}
+                            </Text>
+                          </Stack>
                         </Table.Td>
                         <Table.Td>
                           {log.user ? (
-                            <div>
-                              <Text fw={500} truncate>{log.user.name}</Text>
-                              <Text c="dimmed" truncate>{log.user.email}</Text>
-                            </div>
-                          ) : <Text c="dimmed">—</Text>}
+                            <Stack gap={0}>
+                              <Text size="sm" fw={600} truncate>{log.user.name}</Text>
+                              <Text size="xs" c="dimmed" truncate>{log.user.email}</Text>
+                            </Stack>
+                          ) : (
+                            <Text c="dimmed" size="sm">—</Text>
+                          )}
                         </Table.Td>
                         <Table.Td>
-                          <Badge color={LOG_TYPE_COLOR[log.type] ?? 'gray'} variant="light">
-                            {log.type}
+                          <Badge
+                            color={LOG_TYPE_COLOR[log.type] ?? 'gray'}
+                            variant="light"
+                            size="sm"
+                            tt="capitalize"
+                          >
+                            {LOG_TYPE_LABEL[log.type] ?? log.type}
                           </Badge>
                         </Table.Td>
                         <Table.Td>
-                          <Text>{log.message}</Text>
+                          <Tooltip
+                            label={log.message}
+                            multiline
+                            maw={340}
+                            withArrow
+                            position="top-start"
+                            disabled={(log.message?.length ?? 0) < 60}
+                          >
+                            <Text size="sm" lineClamp={2} style={{ cursor: 'default' }}>
+                              {log.message}
+                            </Text>
+                          </Tooltip>
                         </Table.Td>
                       </Table.Tr>
                     ))}
                     {logs.length === 0 && (
                       <Table.Tr>
                         <Table.Td colSpan={4}>
-                          <Center py="xl"><Text c="dimmed">Belum ada log aktivitas</Text></Center>
+                          <Stack align="center" gap="xs" py="xl">
+                            <TbHistory size={32} style={{ opacity: 0.25 }} />
+                            <Text c="dimmed" size="sm">
+                              No activity logs found for the selected filters.
+                            </Text>
+                          </Stack>
                         </Table.Td>
                       </Table.Tr>
                     )}
@@ -158,11 +233,11 @@ function GlobalLogsPage() {
                 </Table>
               </Table.ScrollContainer>
               {totalPages > 1 && (
-                <Center>
+                <Group justify="center" mt="md">
                   <Pagination total={totalPages} value={page} onChange={setPage} size="sm" />
-                </Center>
+                </Group>
               )}
-            </>
+            </Paper>
           )}
         </Stack>
       </Container>

src/frontend/routes/users.tsx

@@ -11,6 +11,7 @@ import {
   Divider,
   Group,
   List,
+  Loader,
   Modal,
   Pagination,
   Paper,
@@ -41,6 +42,7 @@ import {
   TbTrash,
   TbUserCheck,
   TbUserPlus,
+  TbUsers,
 } from 'react-icons/tb'
 import useSWR from 'swr'
 import { API_URLS } from '../config/api'
@@ -52,45 +54,50 @@ export const Route = createFileRoute('/users')({
 
 const fetcher = (url: string) => fetch(url).then((res) => res.json())
 
-const getRoleColor = (role: string) => {
-  if (role === 'DEVELOPER') return 'violet'
-  if (role === 'ADMIN') return 'brand-blue'
-  return 'gray'
+const ROLE_COLOR: Record<string, string> = {
+  DEVELOPER: 'violet',
+  ADMIN: 'brand-blue',
+  USER: 'gray',
+}
+const ROLE_LABEL: Record<string, string> = {
+  DEVELOPER: 'Developer',
+  ADMIN: 'Admin',
+  USER: 'User',
 }
 
 const roles = [
   {
     name: 'DEVELOPER',
     color: 'violet',
-    description: 'Super admin dengan akses penuh ke seluruh sistem termasuk Dev Console.',
+    description: 'Super admin with full system access, including the Dev Console.',
     permissions: [
-      'Akses Dev Console (/dev)',
-      'Manajemen user & role',
-      'Kelola bug report & feedback',
-      'Lihat semua app & log aktivitas',
-      'Kelola versi & status aplikasi',
-      'Hapus log sistem',
+      'Access Dev Console (/dev)',
+      'User & role management',
+      'Manage bug reports & feedback',
+      'View all apps & activity logs',
+      'Manage app versions & status',
+      'Delete system logs',
     ],
   },
   {
     name: 'ADMIN',
     color: 'blue',
-    description: 'Operator yang dapat mengelola aplikasi, bug, dan melihat log aktivitas.',
+    description: 'Operator who can manage applications, bugs, and view activity logs.',
     permissions: [
-      'Lihat & kelola semua aplikasi',
-      'Kelola bug report',
-      'Lihat log aktivitas',
-      'Lihat data user, desa, orders',
-      'Update status village & produk',
+      'View & manage all applications',
+      'Manage bug reports',
+      'View activity logs',
+      'View user, village, and order data',
+      'Update village & product status',
     ],
   },
   {
     name: 'USER',
     color: 'gray',
-    description: 'Akun baru yang belum disetujui. Menunggu approval dari Admin atau Developer.',
+    description: 'New account pending approval. Awaiting review by an Admin or Developer.',
     permissions: [
-      'Akses halaman profil',
-      'Lihat status persetujuan akun',
+      'Access profile page',
+      'View account approval status',
     ],
   },
 ]
@@ -110,7 +117,7 @@ function UsersPage() {
   const { data: stats, mutate: mutateStats } = useSWR(API_URLS.getOperatorStats(), fetcher)
   const { data: response, isLoading, mutate: mutateOperators } = useSWR(
     API_URLS.getOperators(page, debouncedSearch),
-    fetcher
+    fetcher,
   )
 
   const operators = response?.data || []
@@ -118,19 +125,13 @@ function UsersPage() {
   // ── Create User Modal ──
   const [createOpened, { open: openCreate, close: closeCreate }] = useDisclosure(false)
   const [isCreating, setIsCreating] = useState(false)
-  const [createForm, setCreateForm] = useState({
-    name: '',
-    email: '',
-    password: '',
-    role: 'ADMIN',
-  })
+  const [createForm, setCreateForm] = useState({ name: '', email: '', password: '', role: 'ADMIN' })
 
   const handleCreateUser = async () => {
     if (!createForm.name || !createForm.email || !createForm.password) {
       notifications.show({ title: 'Validation Error', message: 'Please fill in all required fields.', color: 'red' })
       return
     }
-
     setIsCreating(true)
     try {
       const res = await fetch(API_URLS.createOperator(), {
@@ -138,7 +139,6 @@ function UsersPage() {
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(createForm),
       })
-
       if (res.ok) {
         notifications.show({ title: 'Success', message: 'User has been created.', color: 'teal', icon: <TbCircleCheck size={18} /> })
         mutateOperators()
@@ -160,11 +160,7 @@ function UsersPage() {
   const [editOpened, { open: openEdit, close: closeEdit }] = useDisclosure(false)
   const [isEditing, setIsEditing] = useState(false)
   const [editingUserId, setEditingUserId] = useState<string | null>(null)
-  const [editForm, setEditForm] = useState({
-    name: '',
-    email: '',
-    role: '',
-  })
+  const [editForm, setEditForm] = useState({ name: '', email: '', role: '' })
 
   const handleOpenEdit = (user: any) => {
     setEditingUserId(user.id)
@@ -174,7 +170,6 @@ function UsersPage() {
 
   const handleEditUser = async () => {
     if (!editingUserId || !editForm.name || !editForm.email) return
-
     setIsEditing(true)
     try {
       const res = await fetch(API_URLS.editOperator(editingUserId), {
@@ -182,7 +177,6 @@ function UsersPage() {
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(editForm),
       })
-
       if (res.ok) {
         notifications.show({ title: 'Success', message: 'User has been updated.', color: 'teal', icon: <TbCircleCheck size={18} /> })
         mutateOperators()
@@ -190,14 +184,14 @@ function UsersPage() {
       } else {
         throw new Error('Failed to update user')
       }
-    } catch (e) {
+    } catch {
       notifications.show({ title: 'Error', message: 'Something went wrong.', color: 'red', icon: <TbCircleX size={18} /> })
     } finally {
       setIsEditing(false)
     }
   }
 
-  // ── Delete User ──
+  // ── Delete User Modal ──
   const [deleteOpened, { open: openDelete, close: closeDelete }] = useDisclosure(false)
   const [isDeleting, setIsDeleting] = useState(false)
   const [deletingUser, setDeletingUser] = useState<any>(null)
@@ -209,13 +203,9 @@ function UsersPage() {
 
   const handleDeleteUser = async () => {
     if (!deletingUser) return
-
     setIsDeleting(true)
     try {
-      const res = await fetch(API_URLS.deleteOperator(deletingUser.id), {
-        method: 'DELETE',
-      })
-
+      const res = await fetch(API_URLS.deleteOperator(deletingUser.id), { method: 'DELETE' })
       if (res.ok) {
         notifications.show({ title: 'Success', message: 'User has been deleted.', color: 'teal', icon: <TbCircleCheck size={18} /> })
         mutateOperators()
@@ -242,7 +232,7 @@ function UsersPage() {
         body: JSON.stringify({ active: true }),
       })
       if (res.ok) {
-        notifications.show({ title: 'Success', message: `${user.name} telah diaktifkan kembali.`, color: 'teal', icon: <TbCircleCheck size={18} /> })
+        notifications.show({ title: 'Success', message: `${user.name} has been reactivated.`, color: 'teal', icon: <TbCircleCheck size={18} /> })
         mutateOperators()
         mutateStats()
       } else {
@@ -258,39 +248,52 @@ function UsersPage() {
     <DashboardLayout>
       <Container size="xl" py="lg">
         <Stack gap="xl">
-          <Group justify="space-between" align="center">
-            <Stack gap={0}>
-              <Title order={2} className="gradient-text">Users</Title>
-              <Text size="sm" c="dimmed">Manage system users, security roles, and application access control.</Text>
-            </Stack>
-          </Group>
+          <Stack gap={4}>
+            <Title order={2} className="gradient-text">User Management</Title>
+            <Text size="sm" c="dimmed">Manage platform users, security roles, and access control.</Text>
+          </Stack>
 
           <SimpleGrid cols={{ base: 1, sm: 3 }} spacing="lg">
-            <StatsCard title="Total Staff" value={stats?.totalStaff ?? 0} icon={TbUserCheck} color="brand-blue" />
-            <StatsCard title="Active Now" value={stats?.activeNow ?? 0} icon={TbAccessPoint} color="teal" />
-            <StatsCard title="Security Roles" value={stats?.rolesCount ?? 0} icon={TbShieldCheck} color="purple-primary" />
+            <StatsCard
+              title="Total Staff"
+              value={stats?.totalStaff ?? 0}
+              description="Registered platform users"
+              icon={TbUserCheck}
+              color="brand-blue"
+            />
+            <StatsCard
+              title="Active Now"
+              value={stats?.activeNow ?? 0}
+              description="Users with active sessions"
+              icon={TbAccessPoint}
+              color="teal"
+            />
+            <StatsCard
+              title="Security Roles"
+              value={stats?.rolesCount ?? 0}
+              description="Defined permission levels"
+              icon={TbShieldCheck}
+              color="purple-primary"
+            />
           </SimpleGrid>
 
           <Tabs defaultValue="users" color="brand-blue" variant="pills" radius="md">
             <Tabs.List>
               <Tabs.Tab value="users" leftSection={<TbUserCheck size={16} />}>User Management</Tabs.Tab>
-              <Tabs.Tab value="roles" leftSection={<TbShieldCheck size={16} />}>Role Management</Tabs.Tab>
+              <Tabs.Tab value="roles" leftSection={<TbShieldCheck size={16} />}>Role Reference</Tabs.Tab>
             </Tabs.List>
 
             <Tabs.Panel value="users" pt="xl">
               <Stack gap="md">
                 <Group justify="space-between">
                   <TextInput
-                    placeholder="Search users..."
+                    placeholder="Search by name or email..."
                     leftSection={<TbSearch size={16} />}
                     radius="md"
-                    w={350}
+                    w={320}
                     variant="filled"
                     value={search}
-                    onChange={(e) => {
-                      setSearch(e.currentTarget.value)
-                      setPage(1)
-                    }}
+                    onChange={(e) => { setSearch(e.currentTarget.value); setPage(1) }}
                   />
                   {isDeveloper && (
                     <Button
@@ -298,6 +301,7 @@ function UsersPage() {
                       gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
                       leftSection={<TbPlus size={18} />}
                       radius="md"
+                      size="sm"
                       onClick={openCreate}
                     >
                       Add New User
@@ -305,36 +309,47 @@ 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 Date</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>
                       {isLoading ? (
                         <Table.Tr>
-                          <Table.Td colSpan={4} align="center">
-                            <Text size="sm" c="dimmed" py="xl">Loading user data...</Text>
+                          <Table.Td colSpan={4}>
+                            <Group justify="center" py="xl">
+                              <Loader size="sm" type="dots" />
+                            </Group>
                           </Table.Td>
                         </Table.Tr>
                       ) : operators.length === 0 ? (
                         <Table.Tr>
-                          <Table.Td colSpan={4} align="center">
-                            <Text size="sm" c="dimmed" py="xl">No users found.</Text>
+                          <Table.Td colSpan={4}>
+                            <Stack align="center" gap="xs" py="xl">
+                              <TbUsers size={32} style={{ opacity: 0.25 }} />
+                              <Text size="sm" c="dimmed">No users found.</Text>
+                            </Stack>
                           </Table.Td>
                         </Table.Tr>
                       ) : (
                         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' }}>
-                                  <Avatar size="sm" radius="xl" color={user.active === false ? 'gray' : getRoleColor(user.role)} src={user.image}>
+                              <Group gap="sm" wrap="nowrap">
+                                <Box style={{ position: 'relative', flexShrink: 0 }}>
+                                  <Avatar
+                                    size="sm"
+                                    radius="xl"
+                                    color={user.active === false ? 'gray' : ROLE_COLOR[user.role] ?? 'gray'}
+                                    src={user.image}
+                                  >
                                     {user.name.charAt(0)}
                                   </Avatar>
                                   {user.active === false && (
@@ -350,7 +365,9 @@ function UsersPage() {
                                 </Box>
                                 <Stack gap={0}>
                                   <Group gap={6}>
-                                    <Text fw={600} size="sm" c={user.active === false ? 'dimmed' : undefined}>{user.name}</Text>
+                                    <Text fw={600} size="sm" c={user.active === false ? 'dimmed' : undefined}>
+                                      {user.name}
+                                    </Text>
                                     {user.active === false && (
                                       <Badge size="xs" color="red" variant="light">Inactive</Badge>
                                     )}
@@ -360,31 +377,61 @@ function UsersPage() {
                               </Group>
                             </Table.Td>
                             <Table.Td style={{ opacity: user.active === false ? 0.45 : 1 }}>
-                              <Badge variant="light" color={user.active === false ? 'gray' : getRoleColor(user.role)}>
-                                {user.role}
+                              <Badge
+                                variant="light"
+                                size="sm"
+                                color={user.active === false ? 'gray' : ROLE_COLOR[user.role] ?? 'gray'}
+                              >
+                                {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', month: 'short', year: 'numeric' })}
+                                {new Date(user.createdAt).toLocaleDateString('en-GB', {
+                                  day: 'numeric',
+                                  month: 'short',
+                                  year: 'numeric',
+                                })}
                               </Text>
                             </Table.Td>
                             <Table.Td>
                               <Group gap="xs">
                                 {user.active === false ? (
-                                  <Tooltip label="Aktifkan user" withArrow>
-                                    <ActionIcon disabled={!isDeveloper} variant="light" size="sm" color="teal" onClick={() => handleActivateUser(user)}>
+                                  <Tooltip label="Reactivate user" withArrow>
+                                    <ActionIcon
+                                      disabled={!isDeveloper}
+                                      variant="light"
+                                      size="sm"
+                                      color="teal"
+                                      onClick={() => handleActivateUser(user)}
+                                    >
                                       <TbUserPlus size={14} />
                                     </ActionIcon>
                                   </Tooltip>
                                 ) : (
                                   <>
-                                    <ActionIcon disabled={!isDeveloper} variant="light" size="sm" color="blue" onClick={() => handleOpenEdit(user)}>
-                                      <TbPencil size={14} />
-                                    </ActionIcon>
-                                    <ActionIcon disabled={!isDeveloper} variant="light" size="sm" color="red" onClick={() => handleOpenDelete(user)}>
-                                      <TbTrash size={14} />
-                                    </ActionIcon>
+                                    <Tooltip label="Edit user" withArrow>
+                                      <ActionIcon
+                                        disabled={!isDeveloper}
+                                        variant="light"
+                                        size="sm"
+                                        color="blue"
+                                        onClick={() => handleOpenEdit(user)}
+                                      >
+                                        <TbPencil size={14} />
+                                      </ActionIcon>
+                                    </Tooltip>
+                                    <Tooltip label="Delete user" withArrow>
+                                      <ActionIcon
+                                        disabled={!isDeveloper}
+                                        variant="light"
+                                        size="sm"
+                                        color="red"
+                                        onClick={() => handleOpenDelete(user)}
+                                      >
+                                        <TbTrash size={14} />
+                                      </ActionIcon>
+                                    </Tooltip>
                                   </>
                                 )}
                               </Group>
@@ -394,16 +441,12 @@ function UsersPage() {
                       )}
                     </Table.Tbody>
                   </Table>
+                  </Table.ScrollContainer>
                 </Paper>
 
                 {response?.totalPages > 1 && (
                   <Group justify="center" mt="md">
-                    <Pagination
-                      total={response.totalPages}
-                      value={page}
-                      onChange={setPage}
-                      radius="md"
-                    />
+                    <Pagination total={response.totalPages} value={page} onChange={setPage} size="sm" radius="md" />
                   </Group>
                 )}
               </Stack>
@@ -414,20 +457,18 @@ function UsersPage() {
                 {roles.map((role) => (
                   <Card key={role.name} withBorder radius="2xl" padding="xl" className="glass">
                     <Stack gap="md">
-                      <Group justify="space-between">
-                        <ThemeIcon size="xl" radius="md" color={role.color} variant="light">
-                          <TbShieldCheck size={28} />
-                        </ThemeIcon>
-                      </Group>
+                      <ThemeIcon size="xl" radius="md" color={role.color} variant="light">
+                        <TbShieldCheck size={28} />
+                      </ThemeIcon>
 
                       <Stack gap={4}>
-                        <Title order={4}>{role.name}</Title>
+                        <Title order={4}>{ROLE_LABEL[role.name] ?? role.name}</Title>
                         <Text size="sm" c="dimmed">{role.description}</Text>
                       </Stack>
 
                       <Divider />
 
-                      <Text size="xs" fw={700} c="dimmed" style={{ textTransform: 'uppercase' }}>Key Permissions</Text>
+                      <Text size="xs" fw={700} c="dimmed" tt="uppercase">Key Permissions</Text>
                       <List
                         spacing="xs"
                         size="sm"
@@ -442,10 +483,6 @@ function UsersPage() {
                           <List.Item key={p}>{p}</List.Item>
                         ))}
                       </List>
-
-                      {/* <Button fullWidth variant="light" color={role.color} mt="md" radius="md">
-                        Edit Permissions
-                      </Button> */}
                     </Stack>
                   </Card>
                 ))}
@@ -460,7 +497,7 @@ function UsersPage() {
         opened={createOpened}
         onClose={closeCreate}
         title={<Text fw={700} size="lg">Add New User</Text>}
-        radius="xl"
+        radius="md"
         overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
       >
         <Stack gap="md">
@@ -492,7 +529,7 @@ function UsersPage() {
               { value: 'DEVELOPER', label: 'Developer' },
             ]}
             value={createForm.role}
-            onChange={(val) => setCreateForm({ ...createForm, role: val || 'USER' })}
+            onChange={(val) => setCreateForm({ ...createForm, role: val || 'ADMIN' })}
           />
           <Button
             fullWidth
@@ -512,7 +549,7 @@ function UsersPage() {
         opened={editOpened}
         onClose={closeEdit}
         title={<Text fw={700} size="lg">Edit User</Text>}
-        radius="xl"
+        radius="md"
         overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
       >
         <Stack gap="md">
@@ -558,21 +595,19 @@ function UsersPage() {
         opened={deleteOpened}
         onClose={closeDelete}
         title={<Text fw={700} size="lg">Delete User</Text>}
-        radius="xl"
+        radius="md"
         size="sm"
         overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
       >
         <Stack gap="md">
           <Text size="sm">
-            Are you sure you want to delete <Text component="span" fw={700}>{deletingUser?.name}</Text>? This action cannot be undone.
+            Are you sure you want to delete{' '}
+            <Text component="span" fw={700}>{deletingUser?.name}</Text>?
+            This action cannot be undone.
           </Text>
           <Group justify="flex-end" mt="md">
-            <Button variant="subtle" color="gray" onClick={closeDelete}>
-              Cancel
-            </Button>
-            <Button color="red" loading={isDeleting} onClick={handleDeleteUser}>
-              Delete User
-            </Button>
+            <Button variant="subtle" color="gray" onClick={closeDelete}>Cancel</Button>
+            <Button color="red" loading={isDeleting} onClick={handleDeleteUser}>Delete User</Button>
           </Group>
         </Stack>
       </Modal>

src/lib/presence.ts

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

src/lib/seafile.ts

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

src/logo.svg

@@ -1 +1,17 @@
-<svg id="Bun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 70"><title>Bun Logo</title><path id="Shadow" d="M71.09,20.74c-.16-.17-.33-.34-.5-.5s-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5A26.46,26.46,0,0,1,75.5,35.7c0,16.57-16.82,30.05-37.5,30.05-11.58,0-21.94-4.23-28.83-10.86l.5.5.5.5.5.5.5.5.5.5.5.5.5.5C19.55,65.3,30.14,69.75,42,69.75c20.68,0,37.5-13.48,37.5-30C79.5,32.69,76.46,26,71.09,20.74Z"/><g id="Body"><path id="Background" d="M73,35.7c0,15.21-15.67,27.54-35,27.54S3,50.91,3,35.7C3,26.27,9,17.94,18.22,13S33.18,3,38,3s8.94,4.13,19.78,10C67,17.94,73,26.27,73,35.7Z" style="fill:#fbf0df"/><path id="Bottom_Shadow" data-name="Bottom Shadow" d="M73,35.7a21.67,21.67,0,0,0-.8-5.78c-2.73,33.3-43.35,34.9-59.32,24.94A40,40,0,0,0,38,63.24C57.3,63.24,73,50.89,73,35.7Z" style="fill:#f6dece"/><path id="Light_Shine" data-name="Light Shine" d="M24.53,11.17C29,8.49,34.94,3.46,40.78,3.45A9.29,9.29,0,0,0,38,3c-2.42,0-5,1.25-8.25,3.13-1.13.66-2.3,1.39-3.54,2.15-2.33,1.44-5,3.07-8,4.7C8.69,18.13,3,26.62,3,35.7c0,.4,0,.8,0,1.19C9.06,15.48,20.07,13.85,24.53,11.17Z" style="fill:#fffefc"/><path id="Top" d="M35.12,5.53A16.41,16.41,0,0,1,29.49,18c-.28.25-.06.73.3.59,3.37-1.31,7.92-5.23,6-13.14C35.71,5,35.12,5.12,35.12,5.53Zm2.27,0A16.24,16.24,0,0,1,39,19c-.12.35.31.65.55.36C41.74,16.56,43.65,11,37.93,5,37.64,4.74,37.19,5.14,37.39,5.49Zm2.76-.17A16.42,16.42,0,0,1,47,17.12a.33.33,0,0,0,.65.11c.92-3.49.4-9.44-7.17-12.53C40.08,4.54,39.82,5.08,40.15,5.32ZM21.69,15.76a16.94,16.94,0,0,0,10.47-9c.18-.36.75-.22.66.18-1.73,8-7.52,9.67-11.12,9.45C21.32,16.4,21.33,15.87,21.69,15.76Z" style="fill:#ccbea7;fill-rule:evenodd"/><path id="Outline" d="M38,65.75C17.32,65.75.5,52.27.5,35.7c0-10,6.18-19.33,16.53-24.92,3-1.6,5.57-3.21,7.86-4.62,1.26-.78,2.45-1.51,3.6-2.19C32,1.89,35,.5,38,.5s5.62,1.2,8.9,3.14c1,.57,2,1.19,3.07,1.87,2.49,1.54,5.3,3.28,9,5.27C69.32,16.37,75.5,25.69,75.5,35.7,75.5,52.27,58.68,65.75,38,65.75ZM38,3c-2.42,0-5,1.25-8.25,3.13-1.13.66-2.3,1.39-3.54,2.15-2.33,1.44-5,3.07-8,4.7C8.69,18.13,3,26.62,3,35.7,3,50.89,18.7,63.25,38,63.25S73,50.89,73,35.7C73,26.62,67.31,18.13,57.78,13,54,11,51.05,9.12,48.66,7.64c-1.09-.67-2.09-1.29-3-1.84C42.63,4,40.42,3,38,3Z"/></g><g id="Mouth"><g id="Background-2" data-name="Background"><path d="M45.05,43a8.93,8.93,0,0,1-2.92,4.71,6.81,6.81,0,0,1-4,1.88A6.84,6.84,0,0,1,34,47.71,8.93,8.93,0,0,1,31.12,43a.72.72,0,0,1,.8-.81H44.26A.72.72,0,0,1,45.05,43Z" style="fill:#b71422"/></g><g id="Tongue"><path id="Background-3" data-name="Background" d="M34,47.79a6.91,6.91,0,0,0,4.12,1.9,6.91,6.91,0,0,0,4.11-1.9,10.63,10.63,0,0,0,1-1.07,6.83,6.83,0,0,0-4.9-2.31,6.15,6.15,0,0,0-5,2.78C33.56,47.4,33.76,47.6,34,47.79Z" style="fill:#ff6164"/><path id="Outline-2" data-name="Outline" d="M34.16,47a5.36,5.36,0,0,1,4.19-2.08,6,6,0,0,1,4,1.69c.23-.25.45-.51.66-.77a7,7,0,0,0-4.71-1.93,6.36,6.36,0,0,0-4.89,2.36A9.53,9.53,0,0,0,34.16,47Z"/></g><path id="Outline-3" data-name="Outline" d="M38.09,50.19a7.42,7.42,0,0,1-4.45-2,9.52,9.52,0,0,1-3.11-5.05,1.2,1.2,0,0,1,.26-1,1.41,1.41,0,0,1,1.13-.51H44.26a1.44,1.44,0,0,1,1.13.51,1.19,1.19,0,0,1,.25,1h0a9.52,9.52,0,0,1-3.11,5.05A7.42,7.42,0,0,1,38.09,50.19Zm-6.17-7.4c-.16,0-.2.07-.21.09a8.29,8.29,0,0,0,2.73,4.37A6.23,6.23,0,0,0,38.09,49a6.28,6.28,0,0,0,3.65-1.73,8.3,8.3,0,0,0,2.72-4.37.21.21,0,0,0-.2-.09Z"/></g><g id="Face"><ellipse id="Right_Blush" data-name="Right Blush" cx="53.22" cy="40.18" rx="5.85" ry="3.44" style="fill:#febbd0"/><ellipse id="Left_Bluch" data-name="Left Bluch" cx="22.95" cy="40.18" rx="5.85" ry="3.44" style="fill:#febbd0"/><path id="Eyes" d="M25.7,38.8a5.51,5.51,0,1,0-5.5-5.51A5.51,5.51,0,0,0,25.7,38.8Zm24.77,0A5.51,5.51,0,1,0,45,33.29,5.5,5.5,0,0,0,50.47,38.8Z" style="fill-rule:evenodd"/><path id="Iris" d="M24,33.64a2.07,2.07,0,1,0-2.06-2.07A2.07,2.07,0,0,0,24,33.64Zm24.77,0a2.07,2.07,0,1,0-2.06-2.07A2.07,2.07,0,0,0,48.75,33.64Z" style="fill:#fff;fill-rule:evenodd"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#2563EB"/>
+      <stop offset="1" stop-color="#7C3AED"/>
+    </linearGradient>
+  </defs>
+  <rect width="32" height="32" rx="7" fill="url(#g)"/>
+  <polyline
+    points="3,16 9,16 12,8 16,24 19,16 29,16"
+    stroke="white"
+    stroke-width="2.2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    fill="none"
+  />
+</svg>