upd: api upload

Deskripsi:
- summary upload file form data

No Issues'

bun.lock

@@ -22,6 +22,8 @@
         "@types/uuid": "^11.0.0",
         "add": "^2.0.6",
         "elysia": "^1.4.15",
+        "html2canvas": "^1.4.1",
+        "jspdf": "^3.0.3",
         "jwt-decode": "^4.0.0",
         "lodash": "^4.17.21",
         "react": "^19.2.0",
@@ -139,10 +141,16 @@
 
     "@types/node": ["@types/node@24.10.0", "", { "dependencies": { "undici-types": "~7.16.0" } }, "sha512-qzQZRBqkFsYyaSWXuEHc2WR9c0a0CXwiE5FWUvn7ZM+vdy1uZLfCunD38UzhuB7YN/J11ndbDBcTmOdxJo9Q7A=="],
 
+    "@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.2", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA=="],
 
     "@types/react-dom": ["@types/react-dom@19.2.2", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw=="],
 
+    "@types/trusted-types": ["@types/trusted-types@2.0.7", "", {}, "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="],
+
     "@types/uuid": ["@types/uuid@11.0.0", "", { "dependencies": { "uuid": "*" } }, "sha512-HVyk8nj2m+jcFRNazzqyVKiZezyhDKrGUA3jlEcg/nZ6Ms+qHwocba1Y/AaVaznJTAM9xpdFSh+ptbNrhOGvZA=="],
 
     "@unhead/schema": ["@unhead/schema@1.11.20", "", { "dependencies": { "hookable": "^5.5.3", "zhead": "^2.2.4" } }, "sha512-0zWykKAaJdm+/Y7yi/Yds20PrUK7XabLe9c3IRcjnwYmSWY6z0Cr19VIs3ozCj8P+GhR+/TI2mwtGlueCEYouA=="],
@@ -175,6 +183,8 @@
 
     "balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],
 
+    "base64-arraybuffer": ["base64-arraybuffer@1.0.2", "", {}, "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ=="],
+
     "bcrypt-pbkdf": ["bcrypt-pbkdf@1.0.2", "", { "dependencies": { "tweetnacl": "^0.14.3" } }, "sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w=="],
 
     "biome": ["biome@0.3.3", "", { "dependencies": { "bluebird": "^3.4.1", "chalk": "^1.1.3", "commander": "^2.9.0", "editor": "^1.0.0", "fs-promise": "^0.5.0", "inquirer-promise": "0.0.3", "request-promise": "^3.0.0", "untildify": "^3.0.2", "user-home": "^2.0.0" }, "bin": { "biome": "./dist/index.js" } }, "sha512-4LXjrQYbn9iTXu9Y4SKT7ABzTV0WnLDHCVSd2fPUOKsy1gQ+E4xPFmlY1zcWexoi0j7fGHItlL6OWA2CZ/yYAQ=="],
@@ -197,6 +207,8 @@
 
     "camelcase-css": ["camelcase-css@2.0.1", "", {}, "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="],
 
+    "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=="],
+
     "caseless": ["caseless@0.12.0", "", {}, "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw=="],
 
     "chalk": ["chalk@1.1.3", "", { "dependencies": { "ansi-styles": "^2.2.1", "escape-string-regexp": "^1.0.2", "has-ansi": "^2.0.0", "strip-ansi": "^3.0.0", "supports-color": "^2.0.0" } }, "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A=="],
@@ -231,7 +243,7 @@
 
     "cookie-signature": ["cookie-signature@1.2.2", "", {}, "sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg=="],
 
-    "core-js": ["core-js@2.6.12", "", {}, "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="],
+    "core-js": ["core-js@3.47.0", "", {}, "sha512-c3Q2VVkGAUyupsjRnaNX6u8Dq2vAdzm9iuPj5FW0fRxzlxgq9Q39MDq10IvmQSpLgHQNyQzQmOo6bgGHmH3NNg=="],
 
     "core-util-is": ["core-util-is@1.0.2", "", {}, "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ=="],
 
@@ -239,6 +251,8 @@
 
     "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.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
@@ -265,6 +279,8 @@
 
     "dom-helpers": ["dom-helpers@5.2.1", "", { "dependencies": { "@babel/runtime": "^7.8.7", "csstype": "^3.0.2" } }, "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA=="],
 
+    "dompurify": ["dompurify@3.3.0", "", { "optionalDependencies": { "@types/trusted-types": "^2.0.7" } }, "sha512-r+f6MYR1gGN1eJv0TVQbhA7if/U7P87cdPl3HN5rikqaBSBxLiCb/b9O+2eG0cxz0ghyU+mU1QkbsOwERMYlWQ=="],
+
     "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=="],
@@ -323,6 +339,8 @@
 
     "fast-json-stable-stringify": ["fast-json-stable-stringify@2.1.0", "", {}, "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="],
 
+    "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=="],
 
     "fdir": ["fdir@6.5.0", "", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg=="],
@@ -379,6 +397,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.0", "", { "dependencies": { "depd": "2.0.0", "inherits": "2.0.4", "setprototypeof": "1.2.0", "statuses": "2.0.1", "toidentifier": "1.0.1" } }, "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ=="],
 
     "http-signature": ["http-signature@1.2.0", "", { "dependencies": { "assert-plus": "^1.0.0", "jsprim": "^1.2.2", "sshpk": "^1.7.0" } }, "sha512-CAbnr6Rz4CYQkLYUtSNXxQPUH2gK8f3iWexVlsnMeD+GjlsQ0Xsy1cOX+mN3dtxYomRy21CiOzU8Uhw6OwncEQ=="],
@@ -395,6 +415,8 @@
 
     "inquirer-promise": ["inquirer-promise@0.0.3", "", { "dependencies": { "earlgrey-runtime": ">=0.0.11", "inquirer": "^0.11.3" } }, "sha512-82CQX586JAV9GAgU9yXZsMDs+NorjA0nLhkfFx9+PReyOnuoHRbHrC1Z90sS95bFJI1Tm1gzMObuE0HabzkJpg=="],
 
+    "iobuffer": ["iobuffer@5.4.0", "", {}, "sha512-DRebOWuqDvxunfkNJAlc3IzWIPD5xVxwUNbHr7xKB8E6aLJxIPfNX3CoMJghcFjpv6RWQsrcJbghtEwSPoJqMA=="],
+
     "ipaddr.js": ["ipaddr.js@1.9.1", "", {}, "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g=="],
 
     "is-fullwidth-code-point": ["is-fullwidth-code-point@1.0.0", "", { "dependencies": { "number-is-nan": "^1.0.0" } }, "sha512-1pqUqRjkhPJ9miNq9SwMfdvi6lBJcd6eFxvfaivQhaH3SgisfiuudvFntdKOmxuee/77l+FPjKrQjWvmPjWrRw=="],
@@ -423,6 +445,8 @@
 
     "jsonfile": ["jsonfile@2.4.0", "", { "optionalDependencies": { "graceful-fs": "^4.1.6" } }, "sha512-PKllAqbgLgxHaj8TElYymKCAgrASebJrWpTnEkOaTowt23VKXXN0sUeriJ+eh7y6ufb/CC5ap11pz71/cM0hUw=="],
 
+    "jspdf": ["jspdf@3.0.3", "", { "dependencies": { "@babel/runtime": "^7.26.9", "fast-png": "^6.2.0", "fflate": "^0.8.1" }, "optionalDependencies": { "canvg": "^3.0.11", "core-js": "^3.6.0", "dompurify": "^3.2.4", "html2canvas": "^1.0.0-rc.5" } }, "sha512-eURjAyz5iX1H8BOYAfzvdPfIKK53V7mCpBTe7Kb16PaM8JSXEcUQNBQaiWMI8wY5RvNOPj4GccMjTlfwRBd+oQ=="],
+
     "jsprim": ["jsprim@1.4.2", "", { "dependencies": { "assert-plus": "1.0.0", "extsprintf": "1.3.0", "json-schema": "0.4.0", "verror": "1.10.0" } }, "sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw=="],
 
     "jwt-decode": ["jwt-decode@4.0.0", "", {}, "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA=="],
@@ -487,6 +511,8 @@
 
     "oxlint": ["oxlint@1.25.0", "", { "optionalDependencies": { "@oxlint/darwin-arm64": "1.25.0", "@oxlint/darwin-x64": "1.25.0", "@oxlint/linux-arm64-gnu": "1.25.0", "@oxlint/linux-arm64-musl": "1.25.0", "@oxlint/linux-x64-gnu": "1.25.0", "@oxlint/linux-x64-musl": "1.25.0", "@oxlint/win32-arm64": "1.25.0", "@oxlint/win32-x64": "1.25.0" }, "peerDependencies": { "oxlint-tsgolint": ">=0.4.0" }, "optionalPeers": ["oxlint-tsgolint"], "bin": { "oxlint": "bin/oxlint", "oxc_language_server": "bin/oxc_language_server" } }, "sha512-O6iJ9xeuy9eQCi8/EghvsNO6lzSaUPs0FR1uLy51Exp3RkVpjvJKyPPhd9qv65KLnfG/BNd2HE/rH0NbEfVVzA=="],
 
+    "pako": ["pako@2.1.0", "", {}, "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug=="],
+
     "parseurl": ["parseurl@1.3.3", "", {}, "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="],
 
     "path-is-absolute": ["path-is-absolute@1.0.1", "", {}, "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg=="],
@@ -539,6 +565,8 @@
 
     "qs": ["qs@6.14.0", "", { "dependencies": { "side-channel": "^1.1.0" } }, "sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w=="],
 
+    "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.1", "", { "dependencies": { "bytes": "3.1.2", "http-errors": "2.0.0", "iconv-lite": "0.7.0", "unpipe": "1.0.0" } }, "sha512-9G8cA+tuMS75+6G/TzW8OtLzmBDMo8p1JRxN5AZ+LAp8uxGA8V8GZm4GQ4/N5QNQEnLmg6SS7wyuSmbKepiKqA=="],
@@ -571,7 +599,7 @@
 
     "readline2": ["readline2@1.0.1", "", { "dependencies": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", "mute-stream": "0.0.5" } }, "sha512-8/td4MmwUB6PkZUbV25uKz7dfrmjYWxsW8DVfibWdlHRk/l/DfHKn4pU+dfcoGLFgWOdyGCzINRQD7jn+Bv+/g=="],
 
-    "regenerator-runtime": ["regenerator-runtime@0.9.6", "", {}, "sha512-D0Y/JJ4VhusyMOd/o25a3jdUqN/bC85EFsaoL9Oqmy/O4efCh+xhp7yj2EEOsj974qvMkcW8AwUzJ1jB/MbxCw=="],
+    "regenerator-runtime": ["regenerator-runtime@0.13.11", "", {}, "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="],
 
     "request": ["request@2.88.2", "", { "dependencies": { "aws-sign2": "~0.7.0", "aws4": "^1.8.0", "caseless": "~0.12.0", "combined-stream": "~1.0.6", "extend": "~3.0.2", "forever-agent": "~0.6.1", "form-data": "~2.3.2", "har-validator": "~5.1.3", "http-signature": "~1.2.0", "is-typedarray": "~1.0.0", "isstream": "~0.1.2", "json-stringify-safe": "~5.0.1", "mime-types": "~2.1.19", "oauth-sign": "~0.9.0", "performance-now": "^2.1.0", "qs": "~6.5.2", "safe-buffer": "^5.1.2", "tough-cookie": "~2.5.0", "tunnel-agent": "^0.6.0", "uuid": "^3.3.2" } }, "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw=="],
 
@@ -581,6 +609,8 @@
 
     "restore-cursor": ["restore-cursor@1.0.1", "", { "dependencies": { "exit-hook": "^1.0.0", "onetime": "^1.0.0" } }, "sha512-reSjH4HuiFlxlaBaFCiS6O76ZGG2ygKoSlCsipKdaZuKSPx/+bt9mULkn4l0asVzbEfQQmXRg6Wp6gv6m0wElw=="],
 
+    "rgbcolor": ["rgbcolor@1.0.1", "", {}, "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw=="],
+
     "rimraf": ["rimraf@2.7.1", "", { "dependencies": { "glob": "^7.1.3" }, "bin": { "rimraf": "./bin.js" } }, "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w=="],
 
     "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=="],
@@ -619,6 +649,8 @@
 
     "sshpk": ["sshpk@1.18.0", "", { "dependencies": { "asn1": "~0.2.3", "assert-plus": "^1.0.0", "bcrypt-pbkdf": "^1.0.0", "dashdash": "^1.12.0", "ecc-jsbn": "~0.1.1", "getpass": "^0.1.1", "jsbn": "~0.1.0", "safer-buffer": "^2.0.2", "tweetnacl": "~0.14.0" }, "bin": { "sshpk-conv": "bin/sshpk-conv", "sshpk-sign": "bin/sshpk-sign", "sshpk-verify": "bin/sshpk-verify" } }, "sha512-2p2KJZTSqQ/I3+HX42EpYOa2l3f8Erv8MWKsy2I9uf4wA7yFIkXRffYdsx86y6z4vHtV8u7g+pPlr8/4ouAxsQ=="],
 
+    "stackblur-canvas": ["stackblur-canvas@2.7.0", "", {}, "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ=="],
+
     "statuses": ["statuses@2.0.2", "", {}, "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw=="],
 
     "string-width": ["string-width@1.0.2", "", { "dependencies": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", "strip-ansi": "^3.0.0" } }, "sha512-0XsVpQLnVCXHJfyEs8tC0zpTVIr5PKKsQtkT29IwupnPTjtPmQ3xT/4yCREF9hYkV/3M3kzcUTSAZT6a6h81tw=="],
@@ -631,10 +663,14 @@
 
     "supports-color": ["supports-color@2.0.0", "", {}, "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g=="],
 
+    "svg-pathdata": ["svg-pathdata@6.0.3", "", {}, "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw=="],
+
     "swr": ["swr@2.3.6", "", { "dependencies": { "dequal": "^2.0.3", "use-sync-external-store": "^1.4.0" }, "peerDependencies": { "react": "^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-wfHRmHWk/isGNMwlLGlZX5Gzz/uTgo0o2IRuTMcf4CPuPFJZlq0rDaKUx+ozB5nBOReNV1kiOyzMfj+MBMikLw=="],
 
     "tabbable": ["tabbable@6.3.0", "", {}, "sha512-EIHvdY5bPLuWForiR/AN2Bxngzpuwn1is4asboytXtpTgsArc+WmSJKVLlhdh71u7jFcryDqB2A8lQvj78MkyQ=="],
 
+    "text-segmentation": ["text-segmentation@1.0.3", "", { "dependencies": { "utrie": "^1.0.2" } }, "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw=="],
+
     "thenify": ["thenify@3.3.1", "", { "dependencies": { "any-promise": "^1.0.0" } }, "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw=="],
 
     "thenify-all": ["thenify-all@1.6.0", "", { "dependencies": { "thenify": ">= 3.1.0 < 4" } }, "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA=="],
@@ -687,6 +723,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=="],
+
     "uuid": ["uuid@13.0.0", "", { "bin": { "uuid": "dist-node/bin/uuid" } }, "sha512-XQegIaBTVUjSHliKqcnFqYypAd4S+WCYt5NIeRs6w/UAry7z8Y9j5ZwRRL4kzq9U3sD6v+85er9FvkEaBpji2w=="],
 
     "valtio": ["valtio@2.2.0", "", { "dependencies": { "proxy-compare": "^3.0.1" }, "peerDependencies": { "@types/react": ">=18.0.0", "react": ">=18.0.0" }, "optionalPeers": ["@types/react", "react"] }, "sha512-l/zzQahUIm+dfUUP9fIecNVEWJLea9shMC1Bb1aK+v4XNOEzoq796Qax+yzMemmqpltuxfH7kPJy62FVGJDEtw=="],
@@ -711,6 +749,10 @@
 
     "c12/pathe": ["pathe@2.0.3", "", {}, "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w=="],
 
+    "earlgrey-runtime/core-js": ["core-js@2.6.12", "", {}, "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="],
+
+    "earlgrey-runtime/regenerator-runtime": ["regenerator-runtime@0.9.6", "", {}, "sha512-D0Y/JJ4VhusyMOd/o25a3jdUqN/bC85EFsaoL9Oqmy/O4efCh+xhp7yj2EEOsj974qvMkcW8AwUzJ1jB/MbxCw=="],
+
     "express/cookie": ["cookie@0.7.2", "", {}, "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w=="],
 
     "form-data/mime-types": ["mime-types@2.1.35", "", { "dependencies": { "mime-db": "1.52.0" } }, "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw=="],

package.json

@@ -29,6 +29,8 @@
     "@types/uuid": "^11.0.0",
     "add": "^2.0.6",
     "elysia": "^1.4.15",
+    "html2canvas": "^1.4.1",
+    "jspdf": "^3.0.3",
     "jwt-decode": "^4.0.0",
     "lodash": "^4.17.21",
     "react": "^19.2.0",

prisma/schema.prisma

@@ -9,11 +9,13 @@ datasource db {
 }
 
 model Role {
-  id        String   @id @default(cuid())
-  name      String
-  createdAt DateTime @default(now())
-  updatedAt DateTime @updatedAt
-  User      User[]
+  id          String   @id @default(cuid())
+  name        String
+  permissions Json?
+  isActive    Boolean  @default(true)
+  createdAt   DateTime @default(now())
+  updatedAt   DateTime @updatedAt
+  User        User[]
 }
 
 model User {

prisma/seed.ts

@@ -1,5 +1,6 @@
 import { categoryPelayananSurat } from "@/lib/categoryPelayananSurat";
 import { confDesa } from "@/lib/configurationDesa";
+import permissionConfig from "@/lib/listPermission.json"; // JSON yang kita buat
 import { prisma } from "@/server/lib/prisma";
 
 const category = [
@@ -29,14 +30,6 @@ const role = [
     {
         id: "developer",
         name: "developer"
-    },
-    {
-        id: "admin",
-        name: "admin"
-    },
-    {
-        id: "pelaksana",
-        name: "pelaksana"
     }
 ]
 
@@ -51,11 +44,30 @@ const user = [
 ];
 
 (async () => {
+    const allKeys: string[] = [];
+
+    function collectKeys(items: any[]) {
+        items.forEach((item) => {
+            allKeys.push(item.key);
+            if (item.children) collectKeys(item.children);
+        });
+    }
+
+    collectKeys(permissionConfig.menus);
+
+
     for (const r of role) {
         await prisma.role.upsert({
             where: { id: r.id },
-            create: r,
-            update: r
+            create: {
+                id: r.id,
+                name: r.name,
+                permissions: allKeys as any,
+            },
+            update: {
+                name: r.name,
+                permissions: allKeys as any,
+            }
         })
 
         console.log(`✅ Role ${r.name} seeded successfully`)

src/components/DesaSetting.tsx

@@ -1,8 +1,10 @@
 import apiFetch from "@/lib/apiFetch";
 import {
   ActionIcon,
+  Anchor,
   Button,
   Divider,
+  FileInput,
   Flex,
   Group,
   Input,
@@ -10,18 +12,24 @@ import {
   Stack,
   Table,
   Title,
-  Tooltip,
+  Tooltip
 } from "@mantine/core";
 import { useDisclosure, useShallowEffect } from "@mantine/hooks";
 import { IconEdit } from "@tabler/icons-react";
+import type { JsonValue } from "generated/prisma/runtime/library";
+import _ from "lodash";
 import { useState } from "react";
 import useSWR from "swr";
+import ModalFile from "./ModalFile";
 import notification from "./notificationGlobal";
 
-export default function DesaSetting() {
+export default function DesaSetting({ permissions }: { permissions: JsonValue[] }) {
   const [btnDisable, setBtnDisable] = useState(false);
   const [btnLoading, setBtnLoading] = useState(false);
   const [opened, { open, close }] = useDisclosure(false);
+  const [img, setImg] = useState<any>()
+  const [openedPreview, setOpenedPreview] = useState(false);
+  const [viewImg, setViewImg] = useState("");
   const { data, mutate, isLoading } = useSWR("/", () =>
     apiFetch.api["configuration-desa"].list.get(),
   );
@@ -39,7 +47,32 @@ export default function DesaSetting() {
   async function handleEdit() {
     try {
       setBtnLoading(true);
-      const res = await apiFetch.api["configuration-desa"].edit.post(dataEdit);
+
+      let finalData = { ...dataEdit }; // ← buffer data terbaru
+
+      if (dataEdit.name === "TTD") {
+        const oldImg = await apiFetch.api.pengaduan["delete-image"].post({ file: dataEdit.value, folder: "lainnya" });
+        const resImg = await apiFetch.api.pengaduan.upload.post({ file: img, folder: "lainnya" });
+
+        if (resImg.status === 200) {
+          finalData = {
+            ...finalData,
+            value: resImg.data?.filename || ""
+          };
+
+          setDataEdit(finalData); // update state
+        } else {
+          return notification({
+            title: "Error",
+            message: "Failed to upload image",
+            type: "error",
+          });
+        }
+      }
+
+
+      const res = await apiFetch.api["configuration-desa"].edit.post(finalData);
+
       if (res.status === 200) {
         mutate();
         close();
@@ -67,11 +100,8 @@ export default function DesaSetting() {
     }
   }
 
-  function chooseEdit({
-    data,
-  }: {
-    data: { id: string; value: string; name: string };
-  }) {
+
+  function chooseEdit({ data }: { data: { id: string; value: string; name: string }; }) {
     setDataEdit(data);
     open();
   }
@@ -100,18 +130,35 @@ export default function DesaSetting() {
         opened={opened}
         onClose={close}
         title={"Edit"}
-        centered
         overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
       >
         <Stack gap="ld">
-          <Input.Wrapper label={dataEdit.name}>
-            <Input
-              value={dataEdit.value}
-              onChange={(e) =>
-                onValidation({ kat: "value", value: e.target.value })
-              }
-            />
-          </Input.Wrapper>
+          {
+            dataEdit.name == "TTD"
+              ?
+              (
+                <Input.Wrapper label={dataEdit.name}>
+                  <FileInput
+                    clearable
+                    placeholder="Upload TTD"
+                    accept="image/*"
+                    onChange={(e) => { setImg(e) }}
+                  />
+                </Input.Wrapper>
+              )
+              :
+              (
+                <Input.Wrapper label={dataEdit.name}>
+                  <Input
+                    value={dataEdit.value}
+                    onChange={(e) =>
+                      onValidation({ kat: "value", value: e.target.value })
+                    }
+                  />
+                </Input.Wrapper>
+              )
+          }
+
           <Group justify="center" grow>
             <Button variant="light" onClick={close}>
               Batal
@@ -119,7 +166,7 @@ export default function DesaSetting() {
             <Button
               variant="filled"
               onClick={handleEdit}
-              disabled={btnDisable}
+              disabled={btnDisable || (dataEdit.name == "TTD" && !img)}
               loading={btnLoading}
             >
               Simpan
@@ -127,6 +174,14 @@ export default function DesaSetting() {
           </Group>
         </Stack>
       </Modal>
+
+      <ModalFile
+        open={openedPreview && !_.isEmpty(viewImg)}
+        onClose={() => setOpenedPreview(false)}
+        folder="lainnya"
+        fileName={viewImg}
+      />
+
       <Stack gap={"md"}>
         <Flex align="center" justify="space-between">
           <Title order={4} c="gray.2">
@@ -147,14 +202,25 @@ export default function DesaSetting() {
               {list?.map((v: any) => (
                 <Table.Tr key={v.id}>
                   <Table.Td>{v.name}</Table.Td>
-                  <Table.Td>{v.value}</Table.Td>
                   <Table.Td>
-                    <Tooltip label="Edit Setting">
+                    {
+                      v.name == "TTD"
+                        ?
+                        <Anchor href="#" onClick={() => { setViewImg(v.value); setOpenedPreview(true); }} underline="always">
+                          Lihat
+                        </Anchor>
+                        :
+                        v.value
+                    }
+                  </Table.Td>
+                  <Table.Td>
+                    <Tooltip label={permissions.includes("setting.desa.edit") ? "Edit Setting" : "Edit Setting - Anda tidak memiliki akses"}>
                       <ActionIcon
                         variant="light"
                         size="sm"
                         style={{ boxShadow: "0 0 8px rgba(0,255,200,0.2)" }}
                         onClick={() => chooseEdit({ data: v })}
+                        disabled={!permissions.includes("setting.desa.edit")}
                       >
                         <IconEdit size={20} />
                       </ActionIcon>

src/components/KategoriPelayananSurat.tsx

@@ -18,11 +18,12 @@ import {
 } from "@mantine/core";
 import { useDisclosure, useShallowEffect } from "@mantine/hooks";
 import { IconEdit, IconEye, IconPlus, IconTrash } from "@tabler/icons-react";
+import type { JsonValue } from "generated/prisma/runtime/library";
 import { useState } from "react";
 import useSWR from "swr";
 import notification from "./notificationGlobal";
 
-export default function KategoriPelayananSurat() {
+export default function KategoriPelayananSurat({ permissions }: { permissions: JsonValue[] }) {
   const [openedDelete, { open: openDelete, close: closeDelete }] =
     useDisclosure(false);
   const [openedDetail, { open: openDetail, close: closeDetail }] =
@@ -52,6 +53,7 @@ export default function KategoriPelayananSurat() {
     mutate();
   }, []);
 
+
   async function handleCreate() {
     try {
       setBtnLoading(true);
@@ -533,15 +535,19 @@ export default function KategoriPelayananSurat() {
           <Title order={4} c="gray.2">
             Kategori Pelayanan Surat
           </Title>
-          <Tooltip label="Tambah Kategori Pelayanan Surat">
-            <Button
-              variant="light"
-              leftSection={<IconPlus size={20} />}
-              onClick={openTambah}
-            >
-              Tambah
-            </Button>
-          </Tooltip>
+          {
+            permissions.includes("setting.kategori_pelayanan.tambah") && (
+              <Tooltip label="Tambah Kategori Pelayanan Surat">
+                <Button
+                  variant="light"
+                  leftSection={<IconPlus size={20} />}
+                  onClick={openTambah}
+                >
+                  Tambah
+                </Button>
+              </Tooltip>
+            )
+          }
         </Flex>
         <Divider my={0} />
         <Stack gap={"md"}>
@@ -572,7 +578,7 @@ export default function KategoriPelayananSurat() {
                           <IconEye size={20} />
                         </ActionIcon>
                       </Tooltip>
-                      <Tooltip label="Edit Kategori">
+                      <Tooltip label={permissions.includes("setting.kategori_pelayanan.edit") ? "Edit Kategori" : "Edit Kategori - Anda tidak memiliki akses"}>
                         <ActionIcon
                           variant="light"
                           size="sm"
@@ -581,11 +587,12 @@ export default function KategoriPelayananSurat() {
                             setDataChoose(v);
                             open();
                           }}
+                          disabled={!permissions.includes("setting.kategori_pelayanan.edit")}
                         >
                           <IconEdit size={20} />
                         </ActionIcon>
                       </Tooltip>
-                      <Tooltip label="Delete Kategori">
+                      <Tooltip label={permissions.includes("setting.kategori_pelayanan.delete") ? "Hapus Kategori" : "Hapus Kategori - Anda tidak memiliki akses"}>
                         <ActionIcon
                           variant="light"
                           size="sm"
@@ -595,6 +602,7 @@ export default function KategoriPelayananSurat() {
                             setDataDelete(v.id);
                             openDelete();
                           }}
+                          disabled={!permissions.includes("setting.kategori_pelayanan.delete")}
                         >
                           <IconTrash size={20} />
                         </ActionIcon>

src/components/KategoriPengaduan.tsx

@@ -15,11 +15,12 @@ import {
 } from "@mantine/core";
 import { useDisclosure, useShallowEffect } from "@mantine/hooks";
 import { IconEdit, IconPlus, IconTrash } from "@tabler/icons-react";
+import type { JsonValue } from "generated/prisma/runtime/library";
 import { useState } from "react";
 import useSWR from "swr";
 import notification from "./notificationGlobal";
 
-export default function KategoriPengaduan() {
+export default function KategoriPengaduan({ permissions }: { permissions: JsonValue[] }) {
   const [openedDelete, { open: openDelete, close: closeDelete }] =
     useDisclosure(false);
   const [btnDisable, setBtnDisable] = useState(true);
@@ -293,15 +294,19 @@ export default function KategoriPengaduan() {
           <Title order={4} c="gray.2">
             Kategori Pengaduan
           </Title>
-          <Tooltip label="Tambah Kategori Pengaduan">
-            <Button
-              variant="light"
-              leftSection={<IconPlus size={20} />}
-              onClick={openTambah}
-            >
-              Tambah
-            </Button>
-          </Tooltip>
+          {
+            permissions.includes("setting.kategori_pengaduan.tambah") && (
+              <Tooltip label="Tambah Kategori Pengaduan">
+                <Button
+                  variant="light"
+                  leftSection={<IconPlus size={20} />}
+                  onClick={openTambah}
+                >
+                  Tambah
+                </Button>
+              </Tooltip>
+            )
+          }
         </Flex>
         <Divider my={0} />
         <Stack gap={"md"}>
@@ -318,17 +323,18 @@ export default function KategoriPengaduan() {
                   <Table.Td>{v.name}</Table.Td>
                   <Table.Td>
                     <Group>
-                      <Tooltip label="Edit Kategori">
+                      <Tooltip label={permissions.includes("setting.kategori_pengaduan.edit") ? "Edit Kategori" : "Edit Kategori - Anda tidak memiliki akses"}>
                         <ActionIcon
                           variant="light"
                           size="sm"
                           style={{ boxShadow: "0 0 8px rgba(0,255,200,0.2)" }}
                           onClick={() => chooseEdit({ data: v })}
+                          disabled={!permissions.includes("setting.kategori_pengaduan.edit")}
                         >
                           <IconEdit size={20} />
                         </ActionIcon>
                       </Tooltip>
-                      <Tooltip label="Delete Kategori">
+                      <Tooltip label={permissions.includes("setting.kategori_pengaduan.delete") ? "Hapus Kategori" : "Hapus Kategori - Anda tidak memiliki akses"}>
                         <ActionIcon
                           variant="light"
                           size="sm"
@@ -338,6 +344,7 @@ export default function KategoriPengaduan() {
                             setDataDelete(v.id);
                             openDelete();
                           }}
+                          disabled={!permissions.includes("setting.kategori_pengaduan.delete")}
                         >
                           <IconTrash size={20} />
                         </ActionIcon>

src/components/ModalFile.tsx

@@ -0,0 +1,80 @@
+import { detectFileType } from "@/server/lib/detect-type-of-file";
+import { Flex, Image, Loader, Modal } from "@mantine/core";
+import { useEffect, useState } from "react";
+import notification from "./notificationGlobal";
+
+export default function ModalFile({ open, onClose, folder, fileName }: { open: boolean, onClose: () => void, folder: string, fileName: string }) {
+   const [viewFile, setViewFile] = useState<string>("");
+   const [loading, setLoading] = useState<boolean>(false);
+   const [typeFile, setTypeFile] = useState<string>("");
+
+   useEffect(() => {
+      if (open && fileName) {
+         loadImage();
+      }
+   }, [open, fileName]);
+
+
+   const loadImage = async () => {
+      try {
+         setViewFile("");
+         setLoading(true);
+
+         // detect type of file
+         const { ext, type } = detectFileType(fileName);
+         setTypeFile(type || "");
+
+         // load file
+         const urlApi = '/api/pengaduan/image?folder=' + folder + '&fileName=' + fileName;
+         const res = await fetch(urlApi);
+         if (!res.ok)
+            return notification({
+               title: "Error",
+               message: "Failed to load image",
+               type: "error",
+            });
+         const blob = await res.blob();
+         const url = URL.createObjectURL(blob);
+
+         setViewFile(url);
+      } catch (err) {
+         console.error("Gagal load gambar:", err);
+      } finally {
+         setLoading(false);
+      }
+   };
+
+
+
+   return (
+      <Modal
+         opened={open}
+         onClose={onClose}
+         overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+         size="xl"
+         withCloseButton
+         removeScrollProps={{ allowPinchZoom: true }}
+         title="File"
+      >
+         {loading && (
+            <Flex justify="center" align="center" h={200}>
+               <Loader />
+            </Flex>
+         )}
+         {viewFile && (
+            <>
+               {typeFile == "pdf" ? (
+                  <embed src={viewFile} type="application/pdf" width="100%" height="950" />
+               ) : (
+                  <Image
+                     radius="md"
+                     h={300}
+                     fit="contain"
+                     src={viewFile}
+                  />
+               )}
+            </>
+         )}
+      </Modal>
+   );
+}

src/components/ModalSurat.tsx

@@ -0,0 +1,139 @@
+import apiFetch from "@/lib/apiFetch";
+import { ActionIcon, Flex, Modal } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { IconDownload, IconX } from "@tabler/icons-react";
+import html2canvas from "html2canvas";
+import jsPDF from "jspdf";
+import { useRef } from "react";
+import useSWR from "swr";
+import SKBedaBiodataDiri from "./surat/SKBedaBiodataDiri";
+import SKBelumKawin from "./surat/SKBelumKawin";
+import SKDomisiliOrganisasi from "./surat/SKDomisiliOrganisasi";
+import SKKelahiran from "./surat/SKKelahiran";
+import SKKelakuanBaik from "./surat/SKKelakuanBaik";
+import SKKematian from "./surat/SKKematian";
+import SKPenghasilan from "./surat/SKPenghasilan";
+import SKTempatUsaha from "./surat/SKTempatUsaha";
+import SKTidakMampu from "./surat/SKTidakMampu";
+import SKUsaha from "./surat/SKUsaha";
+import SKYatim from "./surat/SKYatimPiatu";
+
+export default function ModalSurat({ open, onClose, surat }: { open: boolean, onClose: () => void, surat: string }) {
+   const A4Style = {
+      width: "210mm",
+      height: "297mm",
+      padding: "20mm",
+      background: "#fff",
+      color: "#000",
+      fontSize: "14px",
+      fontFamily: "Times New Roman",
+   };
+   const hiddenRef = useRef<any>(null);
+   const { data, mutate, isLoading } = useSWR("surat", () =>
+      apiFetch.api.surat.detail.get({
+         query: {
+            id: surat,
+         },
+      }),
+   );
+
+   useShallowEffect(() => {
+      mutate();
+   }, []);
+
+
+   const downloadPDF = async () => {
+      const element = hiddenRef.current;
+      const canvas = await html2canvas(element, {
+         scale: 2,
+         useCORS: true,
+         allowTaint: true,
+         width: element.offsetWidth,
+         height: element.offsetHeight,
+      });
+
+      const imgData = canvas.toDataURL("image/jpeg", 1.0);
+
+      const pdf = new jsPDF("p", "mm", "a4");
+      const pageWidth = 210; // A4 width mm
+      const pageHeight = 297; // A4 height mm
+
+      const imgWidth = pageWidth;
+      const imgHeight = (canvas.height * pageWidth) / canvas.width;
+
+      pdf.addImage(imgData, "JPEG", 0, 0, imgWidth, imgHeight);
+
+      pdf.save(`${data?.data?.surat?.nameCategory}.pdf`);
+   };
+
+   return (
+      <>
+         <Modal
+            opened={open}
+            onClose={() => onClose()}
+            overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+            size="auto"
+            withCloseButton={false}
+            removeScrollProps={{ allowPinchZoom: true }}
+            styles={{
+               header: {
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  padding: "12px 16px",
+               },
+               title: {
+                  width: "100%",
+               }
+            }}
+            title={
+               <Flex justify="space-between" align="center" w="100%">
+                  <div style={{ fontSize: 18, fontWeight: 600 }}>
+                     Preview Surat
+                  </div>
+
+                  <Flex gap={8}>
+                     <ActionIcon size={32} variant="default">
+                        <IconDownload size={20} onClick={downloadPDF} />
+                     </ActionIcon>
+
+                     <ActionIcon size={32} variant="default" onClick={onClose}>
+                        <IconX size={20} />
+                     </ActionIcon>
+                  </Flex>
+               </Flex>
+            }
+         >
+            <div ref={hiddenRef} style={A4Style}>
+               {
+                  data && data.data
+                     ? data.data.surat.idCategory == "skusaha"
+                        ? <SKUsaha data={data.data} />
+                        : data.data.surat.idCategory == "skkelahiran"
+                           ? <SKKelahiran data={data.data} />
+                           : data.data.surat.idCategory == "skkelakuanbaik"
+                              ? <SKKelakuanBaik data={data.data} />
+                              : data.data.surat.idCategory == "skpenghasilan"
+                                 ? <SKPenghasilan data={data.data} />
+                                 : data.data.surat.idCategory == "sktidakmampu"
+                                    ? <SKTidakMampu data={data.data} />
+                                    : data.data.surat.idCategory == "skyatimpiatu"
+                                       ? <SKYatim data={data.data} />
+                                       : data.data.surat.idCategory == "skdomisiliorganisasi"
+                                          ? <SKDomisiliOrganisasi data={data.data} />
+                                          : data.data.surat.idCategory == "skbedabiodata"
+                                             ? <SKBedaBiodataDiri data={data.data} />
+                                             : data.data.surat.idCategory == "sktempatusaha"
+                                                ? <SKTempatUsaha data={data.data} />
+                                                : data.data.surat.idCategory == "skbelumkawin"
+                                                   ? <SKBelumKawin data={data.data} />
+                                                   : data.data.surat.idCategory == "skkematian"
+                                                      ? <SKKematian data={data.data} />
+                                                      : <></>
+                     : <></>
+               }
+            </div>
+         </Modal>
+      </>
+   )
+}

src/components/PermissionRole.tsx

@@ -0,0 +1,57 @@
+import { groupPermissions } from "@/lib/groupPermission";
+import { Button, Stack, Text } from "@mantine/core";
+import { useState } from "react";
+
+interface Node {
+   label: string;
+   children: any;
+   actions: string[];
+}
+
+function RenderNode({ node }: { node: Node }) {
+   const sub = Object.values(node.children || {});
+
+   return (
+      <Stack pl="md" gap={6}>
+         {/* Title */}
+         <Text fw={600}>- {node.label}</Text>
+
+         {/* Children */}
+         {sub.map((child: any, i) => (
+            <RenderNode key={i} node={child} />
+         ))}
+      </Stack>
+   );
+}
+
+export default function PermissionRole({ permissions }: { permissions: string[] }) {
+   const [showAll, setShowAll] = useState(false);
+   if (!permissions?.length) return <Text c="dimmed">-</Text>;
+
+   const groups = groupPermissions(permissions);
+   const rootNodes = Object.values(groups);
+
+   return (
+      <Stack gap="lg">
+         {
+            showAll ?
+               rootNodes.map((node: any, idx) => (
+                  <RenderNode key={idx} node={node} />
+               ))
+               :
+               rootNodes.slice(0, 2).map((node: any, idx) => (
+                  <RenderNode key={idx} node={node} />
+               ))
+         }
+         <Button
+            variant="subtle"
+            size="xs"
+            onClick={() => setShowAll(!showAll)}
+            w="fit-content"
+            ml="md"
+         >
+            {showAll ? "View less" : "View more"}
+         </Button>
+      </Stack>
+   );
+}

src/components/PermissionTree.tsx

@@ -0,0 +1,177 @@
+import permissionConfig from "@/lib/listPermission.json";
+import { ActionIcon, Checkbox, Collapse, Group, Stack, Text } from "@mantine/core";
+import { IconChevronDown, IconChevronRight } from "@tabler/icons-react";
+import { useState } from "react";
+
+interface Node {
+   label: string;
+   key: string;
+   children?: Node[];
+}
+
+export default function PermissionTree({
+   selected,
+   onChange,
+}: {
+   selected: string[];
+   onChange: (val: string[]) => void;
+}) {
+   // Ambil semua child dari node
+   const [openNodes, setOpenNodes] = useState<Record<string, boolean>>({});
+
+   function toggleNode(label: string) {
+      setOpenNodes(prev => ({ ...prev, [label]: !prev[label] }));
+   }
+
+   function getAllChildKeys(node: Node): string[] {
+      let result: string[] = [];
+      if (node.children) {
+         node.children.forEach((c) => {
+            result.push(c.key);
+            result = [...result, ...getAllChildKeys(c)];
+         });
+      }
+      return result;
+   }
+
+   // Dapatkan parentKey, jika ada
+   function getParentKey(key: string) {
+      const split = key.split(".");
+      if (split.length <= 1) return null;
+      split.pop();
+      return split.join(".");
+   }
+
+
+   // Update parent ke atas secara rekursif
+   function updateParent(next: string[], parentKey: string | null): string[] {
+      if (!parentKey) return next;
+
+      const allChildKeys = findAllChildKeysFromKey(parentKey);
+
+      const selectedChild = allChildKeys.filter((c) => next.includes(c));
+
+      if (selectedChild.length === 0) {
+         // Semua child uncheck → parent uncheck
+         next = next.filter((x) => x !== parentKey);
+      } else if (selectedChild.length === allChildKeys.length) {
+         // Semua child check → parent check
+         if (!next.includes(parentKey)) {
+            next.push(parentKey);
+         }
+      } else {
+         // Sebagian child check → parent intermediate (checked = true, rendered sebagai indeterminate)
+         if (!next.includes(parentKey)) {
+            next.push(parentKey);
+         }
+      }
+
+      // Rekursif naik ke atas
+      return updateParent(next, getParentKey(parentKey));
+   }
+
+   // dapatkan child dari string key
+   function findAllChildKeysFromKey(parentKey: string) {
+      const list: string[] = [];
+
+      function traverse(nodes: Node[]) {
+         nodes.forEach((n) => {
+            if (n.key.startsWith(parentKey + ".") && n.key !== parentKey) {
+               list.push(n.key);
+            }
+            if (n.children) traverse(n.children);
+         });
+      }
+
+      traverse(permissionConfig.menus);
+      return list;
+   }
+
+   const RenderMenu = ({ menu }: { menu: Node }) => {
+      const hasChild = menu.children && menu.children.length > 0;
+      const open = openNodes[menu.label] ?? false;
+      const childKeys = getAllChildKeys(menu);
+      const isChecked = selected.includes(menu.key);
+      const isIndeterminate =
+         !isChecked &&
+         selected.some(
+            (x) =>
+               typeof x === "string" &&
+               x.startsWith(menu.key + ".")
+         );
+
+      function handleCheck() {
+         let next = [...selected];
+
+         if (childKeys.length > 0) {
+            // klik parent
+            if (!isChecked) {
+               next = [...new Set([...next, menu.key, ...childKeys])];
+            } else {
+               next = next.filter((x) => x !== menu.key && !childKeys.includes(x));
+            }
+
+            next = updateParent(next, getParentKey(menu.key));
+            onChange(next);
+            return;
+         }
+
+         // klik child
+         if (isChecked) {
+            next = next.filter((x) => x !== menu.key);
+         } else {
+            next.push(menu.key);
+         }
+
+         next = updateParent(next, getParentKey(menu.key));
+         onChange(next);
+      }
+
+      return (
+         <Stack gap={4}>
+            <Group gap="xs">
+               {menu.children && menu.children.length > 0 ? (
+                  <ActionIcon
+                     variant="subtle"
+                     onClick={() => toggleNode(menu.label)}
+                  >
+                     {openNodes[menu.label] ? (
+                        <IconChevronDown size={16} />
+                     ) : (
+                        <IconChevronRight size={16} />
+                     )}
+                  </ActionIcon>
+               ) : (
+                  <div style={{ width: 28 }} />
+               )}
+
+               <Checkbox
+                  label={menu.label}
+                  checked={isChecked}
+                  indeterminate={isIndeterminate}
+                  onChange={handleCheck}
+               />
+            </Group>
+
+            {menu.children && (
+               <Collapse in={open}>
+                  <Stack gap={4} pl="md">
+                     {menu.children.map((child) => (
+                        <RenderMenu key={child.key} menu={child} />
+                     ))}
+                  </Stack>
+               </Collapse>
+            )}
+         </Stack>
+      );
+   };
+
+   return (
+      <Stack>
+         <Text size="sm">Hak Akses</Text>
+         {permissionConfig.menus.map((menu: Node) => (
+            <RenderMenu key={menu.key} menu={menu} />
+         ))}
+      </Stack>
+   );
+}

src/components/ProfileUser.tsx

@@ -9,10 +9,11 @@ import {
   Stack,
   Title,
 } from "@mantine/core";
+import type { JsonValue } from "generated/prisma/runtime/library";
 import { useEffect, useState } from "react";
 import notification from "./notificationGlobal";
 
-export default function ProfileUser() {
+export default function ProfileUser({ permissions }: { permissions: JsonValue[] }) {
   const [opened, setOpened] = useState(false);
   const [openedPassword, setOpenedPassword] = useState(false);
   const [pwdBaru, setPwdBaru] = useState("");
@@ -126,12 +127,21 @@ export default function ProfileUser() {
             Profile Pengguna
           </Title>
           <Group gap="md">
-            <Button variant="light" onClick={() => setOpened(true)}>
-              Edit
-            </Button>
-            <Button variant="light" onClick={() => setOpenedPassword(true)}>
-              Ubah Password
-            </Button>
+            {
+              permissions.includes("setting.profile.edit") && (
+                <Button variant="light" onClick={() => setOpened(true)}>
+                  Edit
+                </Button>
+              )
+            }
+
+            {
+              permissions.includes("setting.profile.password") && (
+                <Button variant="light" onClick={() => setOpenedPassword(true)}>
+                  Ubah Password
+                </Button>
+              )
+            }
           </Group>
         </Flex>
         <Divider my={0} />

src/components/UserRoleSetting.tsx

@@ -0,0 +1,398 @@
+import apiFetch from "@/lib/apiFetch";
+import {
+   ActionIcon,
+   Button,
+   Divider,
+   Flex,
+   Group,
+   Input,
+   Modal,
+   Stack,
+   Table,
+   Text,
+   Title,
+   Tooltip
+} from "@mantine/core";
+import { useDisclosure, useShallowEffect } from "@mantine/hooks";
+import { IconEdit, IconPlus, IconTrash } from "@tabler/icons-react";
+import type { JsonValue } from "generated/prisma/runtime/library";
+import { useState } from "react";
+import useSWR from "swr";
+import notification from "./notificationGlobal";
+import PermissionRole from "./PermissionRole";
+import PermissionTree from "./PermissionTree";
+
+export default function UserRoleSetting({ permissions }: { permissions: JsonValue[] }) {
+   const [btnDisable, setBtnDisable] = useState(true);
+   const [btnLoading, setBtnLoading] = useState(false);
+   const [opened, { open, close }] = useDisclosure(false);
+   const [openedDelete, { open: openDelete, close: closeDelete }] =
+      useDisclosure(false);
+   const [dataDelete, setDataDelete] = useState("");
+   const {
+      data: dataRole,
+      mutate: mutateRole,
+      isLoading: isLoadingRole,
+   } = useSWR("user-role", () => apiFetch.api.user.role.get());
+   const [openedTambah, { open: openTambah, close: closeTambah }] =
+      useDisclosure(false);
+   const { data, mutate, isLoading } = useSWR("role-list", () =>
+      apiFetch.api.user.role.get(),
+   );
+   const list = data?.data || [];
+   const listRole = dataRole?.data || [];
+   const [dataEdit, setDataEdit] = useState({
+      id: "",
+      name: "",
+      permissions: [],
+   });
+   const [dataTambah, setDataTambah] = useState({
+      name: "",
+      permissions: [],
+   });
+   const [error, setError] = useState({
+      name: false,
+      permissions: false,
+   });
+
+   useShallowEffect(() => {
+      mutate();
+   }, []);
+
+   async function handleCreate() {
+      try {
+         setBtnLoading(true);
+         const res = await apiFetch.api.user["role-create"].post(dataTambah as any);
+         if (res.status === 200) {
+            mutate();
+            closeTambah();
+            setDataTambah({
+               name: "",
+               permissions: [],
+            });
+            notification({
+               title: "Success",
+               message: "Your role have been saved",
+               type: "success",
+            });
+         } else {
+            notification({
+               title: "Error",
+               message: "Failed to create role",
+               type: "error",
+            });
+         }
+      } catch (error) {
+         console.error(error);
+         notification({
+            title: "Error",
+            message: "Failed to create role",
+            type: "error",
+         });
+      } finally {
+         setBtnLoading(false);
+      }
+   }
+
+   async function handleEdit() {
+      try {
+         setBtnLoading(true);
+         const res = await apiFetch.api.user["role-update"].post(dataEdit as any);
+         if (res.status === 200) {
+            mutate();
+            close();
+            notification({
+               title: "Success",
+               message: "Your role have been saved",
+               type: "success",
+            });
+         } else {
+            notification({
+               title: "Error",
+               message: "Failed to edit role",
+               type: "error",
+            });
+         }
+      } catch (error) {
+         console.error(error);
+         notification({
+            title: "Error",
+            message: "Failed to edit role",
+            type: "error",
+         });
+      } finally {
+         setBtnLoading(false);
+      }
+   }
+
+   async function handleDelete() {
+      try {
+         setBtnLoading(true);
+         const res = await apiFetch.api.user["role-delete"].post({ id: dataDelete });
+         if (res.status === 200) {
+            mutate();
+            closeDelete();
+            notification({
+               title: "Success",
+               message: "Your role have been deleted",
+               type: "success",
+            });
+         } else {
+            notification({
+               title: "Error",
+               message: "Failed to delete role",
+               type: "error",
+            });
+         }
+      } catch (error) {
+         console.error(error);
+         notification({
+            title: "Error",
+            message: "Failed to delete role",
+            type: "error",
+         });
+      } finally {
+         setBtnLoading(false);
+      }
+   }
+
+   function chooseEdit({ data }: { data: { id: string; name: string; permissions: []; }; }) {
+      setDataEdit({
+         id: data.id, name: data.name, permissions: data.permissions ? data.permissions : []
+      });
+      open();
+   }
+
+   function onValidation({ kat, value, aksi, }: { kat: "name" | "permission"; value: string | null; aksi: "edit" | "tambah"; }) {
+      if (value == null || value.length < 1) {
+         setBtnDisable(true);
+         setError({ ...error, [kat]: true });
+      } else {
+         setBtnDisable(false);
+         setError({ ...error, [kat]: false });
+      }
+
+      if (aksi === "edit") {
+         setDataEdit({ ...dataEdit, [kat]: value });
+      } else {
+         setDataTambah({ ...dataTambah, [kat]: value });
+      }
+   }
+
+
+   useShallowEffect(() => {
+      if (dataEdit.name.length > 0) {
+         setBtnDisable(false);
+      }
+   }, [dataEdit.id]);
+
+   return (
+      <>
+         {/* Modal Edit */}
+         <Modal
+            opened={opened}
+            onClose={close}
+            title={"Edit"}
+            overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+            size={"lg"}
+         >
+            <Stack gap="ld">
+               <Input.Wrapper label="Nama Role">
+                  <Input
+                     value={dataEdit.name}
+                     onChange={(e) =>
+                        onValidation({
+                           kat: "name",
+                           value: e.target.value,
+                           aksi: "edit",
+                        })
+                     }
+                  />
+               </Input.Wrapper>
+               <PermissionTree
+                  selected={dataEdit.permissions}
+                  onChange={(permissions) => {
+                     setDataEdit({ ...dataEdit, permissions: permissions as never[] });
+                  }}
+               />
+               <Group justify="center" grow>
+                  <Button variant="light" onClick={close}>
+                     Batal
+                  </Button>
+                  <Button
+                     variant="filled"
+                     onClick={handleEdit}
+                     disabled={
+                        btnDisable ||
+                        dataEdit.name.length < 1 ||
+                        dataEdit.permissions?.length < 1
+                     }
+                     loading={btnLoading}
+                  >
+                     Simpan
+                  </Button>
+               </Group>
+            </Stack>
+         </Modal>
+
+         {/* Modal Tambah */}
+         <Modal
+            opened={openedTambah}
+            onClose={closeTambah}
+            title={"Tambah"}
+            overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+            size={"lg"}
+         >
+            <Stack gap="ld">
+               <Input.Wrapper
+                  label="Nama Role"
+                  description=""
+                  error={error.name ? "Field is required" : ""}
+               >
+                  <Input
+                     value={dataTambah.name}
+                     onChange={(e) =>
+                        onValidation({
+                           kat: "name",
+                           value: e.target.value,
+                           aksi: "tambah",
+                        })
+                     }
+                  />
+               </Input.Wrapper>
+               <PermissionTree
+                  selected={dataTambah.permissions}
+                  onChange={(permissions) => {
+                     setDataTambah({ ...dataTambah, permissions: permissions as never[] });
+                  }}
+               />
+               <Group justify="center" grow>
+                  <Button variant="light" onClick={closeTambah}>
+                     Batal
+                  </Button>
+                  <Button
+                     variant="filled"
+                     onClick={handleCreate}
+                     disabled={
+                        btnDisable ||
+                        dataTambah.name.length < 1 ||
+                        dataTambah.permissions.length < 1
+                     }
+                     loading={btnLoading}
+                  >
+                     Simpan
+                  </Button>
+               </Group>
+            </Stack>
+         </Modal>
+
+         {/* Modal Delete */}
+         <Modal
+            opened={openedDelete}
+            onClose={closeDelete}
+            title={"Delete"}
+            overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+         >
+            <Stack gap="md">
+               <Text size="md" color="gray.6">
+                  Apakah anda yakin ingin menghapus role ini?
+               </Text>
+               <Group justify="center" grow>
+                  <Button variant="light" onClick={closeDelete}>
+                     Batal
+                  </Button>
+                  <Button
+                     variant="filled"
+                     color="red"
+                     onClick={handleDelete}
+                     loading={btnLoading}
+                  >
+                     Hapus
+                  </Button>
+               </Group>
+            </Stack>
+         </Modal>
+
+         <Stack gap={"md"}>
+            <Flex align="center" justify="space-between">
+               <Title order={4} c="gray.2">
+                  Daftar Role
+               </Title>
+               {
+                  permissions.includes('setting.user_role.tambah') && (
+                     <Tooltip label="Tambah Role">
+                        <Button
+                           variant="light"
+                           leftSection={<IconPlus size={20} />}
+                           onClick={openTambah}
+                        >
+                           Tambah
+                        </Button>
+                     </Tooltip>
+                  )
+               }
+            </Flex>
+            <Divider my={0} />
+            <Stack gap={"md"}>
+               <Table highlightOnHover>
+                  <Table.Thead>
+                     <Table.Tr>
+                        <Table.Th>Role</Table.Th>
+                        <Table.Th>Permission</Table.Th>
+                        <Table.Th>Aksi</Table.Th>
+                     </Table.Tr>
+                  </Table.Thead>
+                  <Table.Tbody>
+                     {list.length > 0 ? (
+                        list?.map((v: any) => (
+                           <Table.Tr key={v.id}>
+                              <Table.Td>{v.name}</Table.Td>
+                              <Table.Td>
+                                 <PermissionRole permissions={v.permissions} />
+                              </Table.Td>
+                              <Table.Td>
+                                 <Group>
+                                    <Tooltip label={permissions.includes('setting.user_role.edit') ? "Edit Role" : "Edit Role - Anda tidak memiliki akses"}>
+                                       <ActionIcon
+                                          variant="light"
+                                          size="sm"
+                                          style={{ boxShadow: "0 0 8px rgba(0,255,200,0.2)" }}
+                                          onClick={() => chooseEdit({ data: v })}
+                                          disabled={!permissions.includes('setting.user_role.edit')}
+                                       >
+                                          <IconEdit size={20} />
+                                       </ActionIcon>
+                                    </Tooltip>
+                                    <Tooltip label={permissions.includes('setting.user_role.delete') ? "Delete Role" : "Delete Role - Anda tidak memiliki akses"}>
+                                       <ActionIcon
+                                          variant="light"
+                                          size="sm"
+                                          color="red"
+                                          style={{ boxShadow: "0 0 8px rgba(0,255,200,0.2)" }}
+                                          onClick={() => {
+                                             setDataDelete(v.id);
+                                             openDelete();
+                                          }}
+                                          disabled={!permissions.includes('setting.user_role.delete')}
+                                       >
+                                          <IconTrash size={20} />
+                                       </ActionIcon>
+                                    </Tooltip>
+                                 </Group>
+                              </Table.Td>
+                           </Table.Tr>
+                        ))
+                     ) : (
+                        <Table.Tr>
+                           <Table.Td colSpan={5} align="center">
+                              Data Role Tidak Ditemukan
+                           </Table.Td>
+                        </Table.Tr>
+                     )}
+                  </Table.Tbody>
+               </Table>
+            </Stack>
+         </Stack>
+      </>
+   );
+}

src/components/UserSetting.tsx

@@ -16,11 +16,12 @@ import {
 } from "@mantine/core";
 import { useDisclosure, useShallowEffect } from "@mantine/hooks";
 import { IconEdit, IconPlus, IconTrash } from "@tabler/icons-react";
+import type { JsonValue } from "generated/prisma/runtime/library";
 import { useState } from "react";
 import useSWR from "swr";
 import notification from "./notificationGlobal";
 
-export default function UserSetting() {
+export default function UserSetting({ permissions }: { permissions: JsonValue[] }) {
   const [btnDisable, setBtnDisable] = useState(true);
   const [btnLoading, setBtnLoading] = useState(false);
   const [opened, { open, close }] = useDisclosure(false);
@@ -390,15 +391,20 @@ export default function UserSetting() {
           <Title order={4} c="gray.2">
             Daftar User
           </Title>
-          <Tooltip label="Tambah User">
-            <Button
-              variant="light"
-              leftSection={<IconPlus size={20} />}
-              onClick={openTambah}
-            >
-              Tambah
-            </Button>
-          </Tooltip>
+          {
+            permissions.includes('setting.user.tambah') && (
+              <Tooltip label="Tambah User">
+                <Button
+                  variant="light"
+                  leftSection={<IconPlus size={20} />}
+                  onClick={openTambah}
+                >
+                  Tambah
+                </Button>
+              </Tooltip>
+            )
+          }
+
         </Flex>
         <Divider my={0} />
         <Stack gap={"md"}>
@@ -422,17 +428,18 @@ export default function UserSetting() {
                     <Table.Td>{v.roleId}</Table.Td>
                     <Table.Td>
                       <Group>
-                        <Tooltip label="Edit User">
+                        <Tooltip label={permissions.includes('setting.user.edit') ? "Edit User" : "Edit User - Anda tidak memiliki akses"}>
                           <ActionIcon
                             variant="light"
                             size="sm"
                             style={{ boxShadow: "0 0 8px rgba(0,255,200,0.2)" }}
                             onClick={() => chooseEdit({ data: v })}
+                            disabled={!permissions.includes('setting.user.edit')}
                           >
                             <IconEdit size={20} />
                           </ActionIcon>
                         </Tooltip>
-                        <Tooltip label="Delete User">
+                        <Tooltip label={permissions.includes('setting.user.delete') ? "Delete User" : "Delete User - Anda tidak memiliki akses"}>
                           <ActionIcon
                             variant="light"
                             size="sm"
@@ -442,6 +449,7 @@ export default function UserSetting() {
                               setDataDelete(v.id);
                               openDelete();
                             }}
+                            disabled={!permissions.includes('setting.user.delete')}
                           >
                             <IconTrash size={20} />
                           </ActionIcon>

src/components/surat/SKBedaBiodataDiri.tsx

@@ -0,0 +1,159 @@
+import _ from "lodash";
+import { useEffect, useState } from "react";
+import notification from "../notificationGlobal";
+
+export default function SKBedaBiodataDiri({ data }: { data: any }) {
+   const [viewImg, setViewImg] = useState<string>();
+   const getValue = (jenis: string) =>
+      _.upperFirst(
+         data.surat.dataText.find((item: any) => item.jenis === jenis)?.value || ""
+      );
+
+   const loadImage = async () => {
+      try {
+         setViewImg("");
+         if (!data.setting.perbekelTTD) return;
+
+         const urlApi = '/api/pengaduan/image?folder=lainnya&fileName=' + data.setting.perbekelTTD;
+         // Fetch manual agar mendapatkan Response asli
+         const res = await fetch(urlApi);
+         if (!res.ok)
+            return notification({
+               title: "Error",
+               message: "Failed to load image sign",
+               type: "error",
+            });
+         const blob = await res.blob();
+         const url = URL.createObjectURL(blob);
+
+         setViewImg(url);
+      } catch (err) {
+         console.error("Gagal load gambar:", err);
+      }
+   };
+
+   useEffect(() => {
+      loadImage();
+   }, [data]);
+
+
+   return (
+      <div style={{ lineHeight: "1.25" }}>
+         {/* HEADER */}
+         <div style={{ textAlign: "center", marginBottom: "15px" }}>
+            <b>PEMERINTAH KABUPATEN {_.upperCase(data.setting.desaKabupaten)}</b><br />
+            <b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b><br />
+            <b>DESA / KELURAHAN {_.upperCase(data.setting.desaNama)}</b><br />
+            Alamat: {data.setting.desaAlamat}<br />
+            Kode Pos: {data.setting.desaPos}
+         </div>
+
+         {/* JUDUL */}
+         <div style={{ textAlign: "center" }}>
+            <b><u>SURAT KETERANGAN BEDA BIODATA DIRI</u></b><br />
+            Nomor: {data.surat.noSurat}
+         </div>
+
+         {/* YANG BERTANDA TANGAN */}
+         <div style={{ marginTop: "15px" }}>
+            Yang bertanda tangan di bawah ini:
+            <table style={{ width: "100%", marginTop: "5px" }}>
+               <tbody>
+                  <tr>
+                     <td style={{ width: "160px" }}>Nama</td>
+                     <td style={{ width: "10px" }}>:</td>
+                     <td>{data.setting.perbekelNama}</td>
+                  </tr>
+                  <tr>
+                     <td>Jabatan</td>
+                     <td>:</td>
+                     <td>{data.setting.perbekelJabatan + " " + data.setting.desaNama}</td>
+                  </tr>
+                  <tr>
+                     <td>Kecamatan</td>
+                     <td>:</td>
+                     <td>{data.setting.desaKecamatan}</td>
+                  </tr>
+                  <tr>
+                     <td>Kabupaten</td>
+                     <td>:</td>
+                     <td>{data.setting.desaKabupaten}</td>
+                  </tr>
+               </tbody>
+            </table>
+         </div>
+
+         {/* IDENTITAS ORANG YG MEMINTA SURAT */}
+         <div style={{ marginTop: "15px" }}>
+            Dengan ini menerangkan bahwa berdasarkan keterangan dari yang bersangkutan:
+            <table style={{ width: "100%", marginTop: "5px" }}>
+               <tbody>
+                  <tr><td style={{ width: "160px" }}>Nama</td><td style={{ width: "10px" }}>:</td><td>{getValue("nama")}</td></tr>
+                  <tr><td>Tempat/Tanggal Lahir</td><td>:</td><td>{getValue("tempat tanggal lahir")}</td></tr>
+                  <tr><td>Jenis Kelamin</td><td>:</td><td>{getValue("jenis kelamin")}</td></tr>
+                  <tr><td>Alamat</td><td>:</td><td>{getValue("alamat")}</td></tr>
+                  <tr><td>Pekerjaan</td><td>:</td><td>{getValue("pekerjaan")}</td></tr>
+                  <tr><td>NIK</td><td>:</td><td>{getValue("nik")}</td></tr>
+               </tbody>
+            </table>
+         </div>
+
+         <div style={{ marginTop: "15px" }}>
+            Bahwa orang tersebut di atas <b>benar merupakan orang yang sama</b>, meskipun terdapat <b>perbedaan data pribadi (biodata)</b> pada beberapa dokumen, sebagai berikut:
+         </div>
+
+         <div style={{ marginTop: "15px" }}>
+            <table style={{ width: "100%", marginTop: "5px" }}>
+               <tbody>
+                  <tr><td style={{ width: "160px" }}>1. Nama</td><td style={{ width: "10px" }}>:</td><td>{getValue("nama")}</td></tr>
+                  <tr><td>Tertulis pada dokumen A</td><td>:</td><td>{getValue("tertulis pada dokumen a")}</td></tr>
+                  <tr><td>Tertulis pada dokumen B</td><td>:</td><td>{getValue("tertulis pada dokumen b")}</td></tr>
+               </tbody>
+            </table>
+         </div>
+
+         <div style={{ marginTop: "15px" }}>
+            <table style={{ width: "100%", marginTop: "5px" }}>
+               <tbody>
+                  <tr><td style={{ width: "160px" }}>2. Tempat/Tanggal Lahir</td><td style={{ width: "10px" }}>:</td><td>{getValue("tempat tanggal lahir")}</td></tr>
+                  <tr><td>Tertulis pada dokumen A</td><td>:</td><td>{getValue("tertulis pada dokumen a")}</td></tr>
+                  <tr><td>Tertulis pada dokumen B</td><td>:</td><td>{getValue("tertulis pada dokumen b")}</td></tr>
+               </tbody>
+            </table>
+         </div>
+
+         <div style={{ marginTop: "15px" }}>
+            <table style={{ width: "100%", marginTop: "5px" }}>
+               <tbody>
+                  <tr><td style={{ width: "160px" }}>3. Nama Orang Tua</td><td style={{ width: "10px" }}>:</td><td>{getValue("nama orang tua")}</td></tr>
+                  <tr><td>Tertulis pada dokumen A</td><td>:</td><td>{getValue("tertulis pada dokumen a")}</td></tr>
+                  <tr><td>Tertulis pada dokumen B</td><td>:</td><td>{getValue("tertulis pada dokumen b")}</td></tr>
+               </tbody>
+            </table>
+         </div>
+
+         <div style={{ marginTop: "15px" }}>
+            Perbedaan tersebut terjadi karena <b>kesalahan penulisan/pencatatan administratif</b>, namun yang bersangkutan adalah <b>orang yang sama</b>.
+            <br />
+            Dengan surat keterangan ini dibuat dengan sebenar-benarnya untuk dipergunakan sebagaimana mestinya.
+         </div>
+
+         <div style={{ marginTop: "15px" }}>
+            Dikeluarkan di {data.setting.desaNama} <br />
+            Pada tanggal {data.surat.createdAt}
+         </div>
+
+         {/* TANDA TANGAN */}
+         <div style={{ marginTop: "0px", display: "flex", justifyContent: "flex-end", width: "100%" }}>
+            <div style={{ textAlign: "center" }}>
+               Kepala Desa / Lurah {data.setting.desaNama}
+               <br /><br />
+               <img src={viewImg || undefined} alt="ttd perbekel" width={100} /> <br />
+               <u>{data.setting.perbekelNama}</u> <br />
+               NIP. {data.setting.perbekelNIP}
+            </div>
+         </div>
+
+      </div>
+   );
+}

src/components/surat/SKBelumKawin.tsx

@@ -0,0 +1,110 @@
+import _ from "lodash";
+import { useEffect, useState } from "react";
+import notification from "../notificationGlobal";
+
+export default function SKBelumKawin({ data }: { data: any }) {
+   const [viewImg, setViewImg] = useState<string>();
+   const getValue = (jenis: string) =>
+      _.upperFirst(
+         data.surat.dataText.find((item: any) => item.jenis === jenis)?.value || ""
+      );
+
+   const loadImage = async () => {
+      try {
+         setViewImg("");
+         if (!data.setting.perbekelTTD) return;
+
+         const urlApi = '/api/pengaduan/image?folder=lainnya&fileName=' + data.setting.perbekelTTD;
+         // Fetch manual agar mendapatkan Response asli
+         const res = await fetch(urlApi);
+         if (!res.ok)
+            return notification({
+               title: "Error",
+               message: "Failed to load image sign",
+               type: "error",
+            });
+         const blob = await res.blob();
+         const url = URL.createObjectURL(blob);
+
+         setViewImg(url);
+      } catch (err) {
+         console.error("Gagal load gambar:", err);
+      }
+   };
+
+   useEffect(() => {
+      loadImage();
+   }, [data]);
+
+   return (
+      <div style={{ lineHeight: "1.3" }}>
+         {/* HEADER */}
+         <div style={{ textAlign: "center", marginBottom: "10px" }}>
+            <b>PEMERINTAH KABUPATEN {_.upperCase(data.setting.desaKabupaten)}</b><br />
+            <b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b><br />
+            <b>DESA / KELURAHAN {_.upperCase(data.setting.desaNama)}</b><br />
+            Alamat: {data.setting.desaAlamat}<br />
+            Kode Pos: {data.setting.desaPos}
+         </div>
+
+         {/* JUDUL */}
+         <div style={{ textAlign: "center", margin: "20px 0" }}>
+            <b><u>SURAT KETERANGAN BELUM KAWIN</u></b><br />
+            Nomor: {data.surat.noSurat}
+         </div>
+
+         {/* YANG BERTANDA TANGAN */}
+         <div style={{ marginTop: "15px" }}>
+            Yang bertanda tangan di bawah ini {data.setting.perbekelJabatan} {data.setting.desaNama}, Kecamatan {data.setting.desaKecamatan}, Kabupaten {data.setting.desaKabupaten}, dengan ini menerangkan bahwa:
+         </div>
+
+         {/* IDENTITAS ORANG YG MEMINTA SURAT */}
+         <div style={{ marginTop: "20px" }}>
+            <table style={{ width: "100%", marginTop: "5px" }}>
+               <tbody>
+                  <tr><td style={{ width: "160px" }}>Nama</td><td style={{ width: "10px" }}>:</td><td>{getValue("nama")}</td></tr>
+                  <tr><td>NIK</td><td>:</td><td>{getValue("nik")}</td></tr>
+                  <tr><td>Tempat/Tanggal Lahir</td><td>:</td><td>{getValue("tempat tanggal lahir")}</td></tr>
+                  <tr><td>Jenis Kelamin</td><td>:</td><td>{getValue("jenis kelamin")}</td></tr>
+                  <tr><td>Agama</td><td>:</td><td>{getValue("agama")}</td></tr>
+                  <tr><td>Pekerjaan</td><td>:</td><td>{getValue("pekerjaan")}</td></tr>
+                  <tr><td>Alamat</td><td>:</td><td>{getValue("alamat")}</td></tr>
+               </tbody>
+            </table>
+         </div>
+
+         <div style={{ marginTop: "20px" }}>
+            Berdasarkan keterangan dari yang bersangkutan dan data administrasi kependudukan yang ada di Desa {data.setting.desaNama},
+            yang bersangkutan benar sampai saat ini belum pernah menikah, baik secara adat, agama, maupun hukum negara.
+         </div>
+
+         <div style={{ marginTop: "20px" }}>
+            Demikian surat keterangan ini dibuat dengan sebenarnya agar dapat digunakan sebagaimana mestinya.
+         </div>
+
+         <div style={{ marginTop: "20px" }}>
+            Dikeluarkan di {data.setting.desaNama} <br />
+            Pada tanggal {data.surat.createdAt}
+         </div>
+
+         {/* TANDA TANGAN */}
+         <div style={{ marginTop: "40px", display: "flex", justifyContent: "space-between", width: "100%" }}>
+            <div style={{ textAlign: "center" }}>
+               <br /><br />
+               Pemohon
+               <br /><br /><br /><br /><br /><br />
+               <u>{getValue("nama")}</u> <br />
+            </div>
+            <div style={{ textAlign: "center" }}>
+               <br /><br />
+               Kepala Desa / Lurah {data.setting.desaNama}
+               <br /><br />
+               <img src={viewImg || undefined} alt="ttd perbekel" width={100} /> <br />
+               <u>{data.setting.perbekelNama}</u> <br />
+               NIP. {data.setting.perbekelNIP}
+            </div>
+         </div>
+
+      </div>
+   );
+}

src/components/surat/SKDomisiliOrganisasi.tsx

@@ -0,0 +1,123 @@
+import _ from "lodash";
+import { useEffect, useState } from "react";
+import notification from "../notificationGlobal";
+
+export default function SKDomisiliOrganisasi({ data }: { data: any }) {
+   const [viewImg, setViewImg] = useState<string>("");
+   const getValue = (jenis: string) =>
+      _.upperFirst(
+         data.surat.dataText.find((item: any) => item.jenis === jenis)?.value || ""
+      );
+
+   const loadImage = async () => {
+      try {
+         setViewImg("");
+         if (!data.setting.perbekelTTD) return;
+
+         const urlApi = '/api/pengaduan/image?folder=lainnya&fileName=' + data.setting.perbekelTTD;
+         // Fetch manual agar mendapatkan Response asli
+         const res = await fetch(urlApi);
+         if (!res.ok)
+            return notification({
+               title: "Error",
+               message: "Failed to load image sign",
+               type: "error",
+            });
+         const blob = await res.blob();
+         const url = URL.createObjectURL(blob);
+
+         setViewImg(url);
+      } catch (err) {
+         console.error("Gagal load gambar:", err);
+      }
+   };
+
+   useEffect(() => {
+      loadImage();
+   }, [data]);
+
+   return (
+      <div style={{ lineHeight: "1.3" }}>
+         {/* HEADER */}
+         <div style={{ textAlign: "center", marginBottom: "10px" }}>
+            <b>PEMERINTAH KABUPATEN {_.upperCase(data.setting.desaKabupaten)}</b><br />
+            <b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b><br />
+            <b>DESA / KELURAHAN {_.upperCase(data.setting.desaNama)}</b><br />
+            Alamat: {data.setting.desaAlamat}<br />
+            Kode Pos: {data.setting.desaPos}
+         </div>
+
+         {/* JUDUL */}
+         <div style={{ textAlign: "center", margin: "20px 0" }}>
+            <b><u>SURAT KETERANGAN DOMISILI ORGANISASI</u></b><br />
+            Nomor: {data.surat.noSurat}
+         </div>
+
+         {/* YANG BERTANDA TANGAN */}
+         <div style={{ marginTop: "15px" }}>
+            Yang bertanda tangan di bawah ini:
+            <table style={{ width: "100%", marginTop: "5px" }}>
+               <tbody>
+                  <tr>
+                     <td style={{ width: "160px" }}>Nama</td>
+                     <td style={{ width: "10px" }}>:</td>
+                     <td>{data.setting.perbekelNama}</td>
+                  </tr>
+                  <tr>
+                     <td>Jabatan</td>
+                     <td>:</td>
+                     <td>{data.setting.perbekelJabatan}</td>
+                  </tr>
+                  <tr>
+                     <td>Alamat Kantor</td>
+                     <td>:</td>
+                     <td>{data.setting.desaAlamat}</td>
+                  </tr>
+               </tbody>
+            </table>
+         </div>
+
+         {/* IDENTITAS ORANG YG MEMINTA SURAT */}
+         <div style={{ marginTop: "20px" }}>
+            Dengan ini menerangkan bahwa:
+            <table style={{ width: "100%", marginTop: "5px" }}>
+               <tbody>
+                  <tr><td style={{ width: "160px" }}>Nama Organisasi</td><td style={{ width: "10px" }}>:</td><td>{getValue("nama")}</td></tr>
+                  <tr><td>Jenis Organisasi</td><td>:</td><td>{getValue("jenis kelamin")}</td></tr>
+                  <tr><td>Alamat</td><td>:</td><td>{getValue("tempat tanggal lahir")}</td></tr>
+                  <tr><td>Nomor Telepon</td><td>:</td><td>{getValue("negara")}</td></tr>
+                  <tr><td>Nama Pimpinan</td><td>:</td><td>{getValue("agama")}</td></tr>
+               </tbody>
+            </table>
+         </div>
+
+         <div style={{ marginTop: "20px" }}>
+            Benar bahwa organisasi tersebut berdomisili di wilayah Desa / Kelurahan {data.setting.desaNama}, Kecamatan {data.setting.desaKecamatan}, Kabupaten {data.setting.desaKabupaten}.
+            Dan sampai saat ini masih aktif melakukan kegiatan sesuai dengan bidangnya.<br />
+            Surat keterangan ini dibuat untuk keperluan {getValue("keperluan")}.
+         </div>
+
+         <div style={{ marginTop: "20px" }}>
+            Demikian surat keterangan ini dibuat dengan sebenarnya agar dapat digunakan sebagaimana mestinya.
+         </div>
+
+         <div style={{ marginTop: "20px" }}>
+            Dikeluarkan di {data.setting.desaNama} <br />
+            Pada tanggal {data.surat.createdAt}
+         </div>
+
+         {/* TANDA TANGAN */}
+         <div style={{ marginTop: "40px", display: "flex", justifyContent: "flex-end", width: "100%" }}>
+            <div style={{ textAlign: "center" }}>
+               <br />
+               Kepala Desa / Lurah {data.setting.desaNama}
+               <br /><br />
+               <img src={viewImg || undefined} alt="ttd perbekel" width={100} /> <br />
+               <u>{data.setting.perbekelNama}</u> <br />
+               NIP. {data.setting.perbekelNIP}
+            </div>
+         </div>
+
+      </div>
+   );
+}

src/components/surat/SKKelahiran.tsx

@@ -0,0 +1,144 @@
+import _ from "lodash";
+import { useEffect, useState } from "react";
+import notification from "../notificationGlobal";
+
+export default function SKKelahiran({ data }: { data: any }) {
+   const [viewImg, setViewImg] = useState<string>("");
+   const getValue = (jenis: string) =>
+      _.upperFirst(
+         data.surat.dataText.find((item: any) => item.jenis === jenis)?.value || ""
+      );
+
+   const loadImage = async () => {
+      try {
+         setViewImg("");
+         if (!data.setting.perbekelTTD) return;
+
+         const urlApi = '/api/pengaduan/image?folder=lainnya&fileName=' + data.setting.perbekelTTD;
+         // Fetch manual agar mendapatkan Response asli
+         const res = await fetch(urlApi);
+         if (!res.ok)
+            return notification({
+               title: "Error",
+               message: "Failed to load image sign",
+               type: "error",
+            });
+         const blob = await res.blob();
+         const url = URL.createObjectURL(blob);
+
+         setViewImg(url);
+      } catch (err) {
+         console.error("Gagal load gambar:", err);
+      }
+   };
+
+   useEffect(() => {
+      loadImage();
+   }, [data]);
+
+   return (
+      <div style={{ lineHeight: "1.2" }}>
+
+         {/* HEADER */}
+         <div style={{ textAlign: "center", marginBottom: "20px" }}>
+            <b>PEMERINTAH KABUPATEN/KOTA {_.upperCase(data.setting.desaKabupaten)}</b><br />
+            <b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b><br />
+            <b>DESA / KELURAHAN {_.upperCase(data.setting.desaNama)}</b><br />
+            Alamat: {data.setting.desaAlamat}
+         </div>
+
+         {/* JUDUL */}
+         <div style={{ textAlign: "center", margin: "20px 0" }}>
+            <b><u>SURAT KETERANGAN KELAHIRAN</u></b><br />
+            Nomor : {data.surat.noSurat}
+         </div>
+
+         {/* PEMBUKA */}
+         <div>
+            Yang bertanda tangan di bawah ini, {data.setting.perbekelJabatan}
+            {` ${data.setting.desaNama}, Kecamatan ${data.setting.desaKecamatan}, Kabupaten/Kota ${data.setting.desaKabupaten}`}
+            , dengan ini menerangkan bahwa:
+         </div>
+
+         {/* DATA KELAHIRAN ANAK */}
+         <div style={{ marginTop: "20px" }}>
+            Telah lahir seorang anak pada:
+            <table style={{ width: "100%", marginTop: "5px" }}>
+               <tbody>
+                  <tr><td style={{ width: "200px" }}>Tanggal Lahir</td><td>:</td><td>{getValue("tanggal lahir anak")}</td></tr>
+                  <tr><td>Pukul</td><td>:</td><td>{getValue("pukul lahir anak")}</td></tr>
+                  <tr><td>Tempat Kelahiran</td><td>:</td><td>{getValue("tempat lahir anak")}</td></tr>
+                  <tr><td>Jenis Kelamin</td><td>:</td><td>{getValue("jenis kelamin anak")}</td></tr>
+                  <tr><td>Anak ke</td><td>:</td><td>{getValue("anak ke")}</td></tr>
+                  <tr><td>Nama Anak</td><td>:</td><td>{getValue("nama anak")}</td></tr>
+               </tbody>
+            </table>
+         </div>
+
+         {/* DATA IBU */}
+         <div style={{ marginTop: "20px" }}>
+            Dari seorang ibu bernama:
+            <table style={{ width: "100%", marginTop: "5px" }}>
+               <tbody>
+                  <tr><td style={{ width: "200px" }}>Nama Lengkap Ibu</td><td>:</td><td>{getValue("nama ibu")}</td></tr>
+                  <tr><td>NIK</td><td>:</td><td>{getValue("nik ibu")}</td></tr>
+                  <tr><td>Tempat & Tanggal Lahir</td><td>:</td><td>{getValue("tempat tanggal lahir ibu")}</td></tr>
+                  <tr><td>Pekerjaan</td><td>:</td><td>{getValue("pekerjaan ibu")}</td></tr>
+                  <tr><td>Alamat</td><td>:</td><td>{getValue("alamat ibu")}</td></tr>
+               </tbody>
+            </table>
+         </div>
+
+         {/* DATA AYAH */}
+         <div style={{ marginTop: "20px" }}>
+            Dan seorang ayah bernama:
+            <table style={{ width: "100%", marginTop: "5px" }}>
+               <tbody>
+                  <tr><td style={{ width: "200px" }}>Nama Lengkap Ayah</td><td>:</td><td>{getValue("nama ayah")}</td></tr>
+                  <tr><td>NIK</td><td>:</td><td>{getValue("nik ayah")}</td></tr>
+                  <tr><td>Tempat & Tanggal Lahir</td><td>:</td><td>{getValue("tempat tanggal lahir ayah")}</td></tr>
+                  <tr><td>Pekerjaan</td><td>:</td><td>{getValue("pekerjaan ayah")}</td></tr>
+                  <tr><td>Alamat</td><td>:</td><td>{getValue("alamat ayah")}</td></tr>
+               </tbody>
+            </table>
+         </div>
+
+         {/* DATA PELAPOR */}
+         <div style={{ marginTop: "20px" }}>
+            Berdasarkan laporan dari:
+            <table style={{ width: "100%", marginTop: "5px" }}>
+               <tbody>
+                  <tr><td style={{ width: "200px" }}>Nama Pelapor</td><td>:</td><td>{getValue("nama pelapor")}</td></tr>
+                  <tr><td>Hubungan dengan Anak</td><td>:</td><td>{getValue("hubungan pelapor")}</td></tr>
+                  <tr><td>Alamat</td><td>:</td><td>{getValue("alamat pelapor")}</td></tr>
+               </tbody>
+            </table>
+         </div>
+
+         {/* PENUTUP */}
+         <div style={{ marginTop: "20px", textAlign: "justify" }}>
+            Demikian Surat Keterangan Kelahiran ini dibuat dengan sebenarnya agar dapat digunakan sebagaimana mestinya.
+         </div>
+
+         {/* TEMPAT TANGGAL */}
+         <table style={{ width: "100%", marginTop: "20px" }}>
+            <tbody>
+               <tr><td style={{ width: "200px" }}>Dikeluarkan di</td><td>:</td><td>{data.setting.desaNama}</td></tr>
+               <tr><td>Pada tanggal</td><td>:</td><td>{data.surat.createdAt}</td></tr>
+            </tbody>
+         </table>
+
+         {/* TANDA TANGAN */}
+         <div style={{ marginTop: "40px", width: "100%", display: "flex", justifyContent: "flex-end" }}>
+            <div style={{ textAlign: "center" }}>
+               Kepala Desa / Lurah {data.setting.desaNama}
+               <br />
+               <img src={viewImg || undefined} alt="ttd perbekel" width={100} /> <br />
+               <u>{data.setting.perbekelNama}</u> <br />
+               NIP. {data.setting.perbekelNIP}
+            </div>
+         </div>
+
+      </div>
+   );
+}

src/components/surat/SKKelakuanBaik.tsx

@@ -0,0 +1,145 @@
+import _ from "lodash";
+import { useEffect, useState } from "react";
+import notification from "../notificationGlobal";
+
+export default function SKKelakuanBaik({ data }: { data: any }) {
+   const [viewImg, setViewImg] = useState<string>("");
+   const getValue = (jenis: string) =>
+      _.upperFirst(
+         data.surat.dataText.find((item: any) => item.jenis === jenis)?.value || ""
+      );
+
+   const loadImage = async () => {
+      try {
+         setViewImg("");
+         if (!data.setting.perbekelTTD) return;
+
+         const urlApi = '/api/pengaduan/image?folder=lainnya&fileName=' + data.setting.perbekelTTD;
+         // Fetch manual agar mendapatkan Response asli
+         const res = await fetch(urlApi);
+         if (!res.ok)
+            return notification({
+               title: "Error",
+               message: "Failed to load image sign",
+               type: "error",
+            });
+         const blob = await res.blob();
+         const url = URL.createObjectURL(blob);
+
+         setViewImg(url);
+      } catch (err) {
+         console.error("Gagal load gambar:", err);
+      }
+   };
+
+   useEffect(() => {
+      loadImage();
+   }, [data]);
+
+   return (
+      <div style={{ lineHeight: "1.3" }}>
+
+         {/* HEADER */}
+         <div style={{ textAlign: "center", marginBottom: "30px" }}>
+            <b style={{ fontSize: "18px" }}>SURAT KETERANGAN KELAKUAN BAIK</b><br />
+            (PENGANTAR SKCK)<br />
+            Nomor: {data.surat.noSurat}
+         </div>
+
+         {/* PEMBUKA */}
+         <div style={{ marginBottom: "15px" }}>
+            Yang bertanda tangan di bawah ini menerangkan dengan sebenarnya bahwa:
+         </div>
+
+         {/* IDENTITAS PENDUDUK */}
+         <table style={{ width: "100%", marginBottom: "15px" }}>
+            <tbody>
+               <tr>
+                  <td style={{ width: "180px" }}>Nama lengkap</td>
+                  <td style={{ width: "10px" }}>:</td>
+                  <td>{getValue("nama")}</td>
+               </tr>
+               <tr>
+                  <td>NIK</td>
+                  <td>:</td>
+                  <td>{getValue("nik")}</td>
+               </tr>
+               <tr>
+                  <td>Tempat/Tgl Lahir</td>
+                  <td>:</td>
+                  <td>{getValue("tempat tanggal lahir")}</td>
+               </tr>
+               <tr>
+                  <td>Jenis Kelamin</td>
+                  <td>:</td>
+                  <td>{getValue("jenis kelamin")}</td>
+               </tr>
+               <tr>
+                  <td>Agama</td>
+                  <td>:</td>
+                  <td>{getValue("agama")}</td>
+               </tr>
+               <tr>
+                  <td>Pekerjaan</td>
+                  <td>:</td>
+                  <td>{getValue("pekerjaan")}</td>
+               </tr>
+               <tr>
+                  <td>Alamat</td>
+                  <td>:</td>
+                  <td>{getValue("alamat")}</td>
+               </tr>
+            </tbody>
+         </table>
+
+         {/* ISI */}
+         <div style={{ textAlign: "justify", marginBottom: "15px" }}>
+            Adalah benar penduduk yang berdomisili di wilayah kami dan selama tinggal di lingkungan
+            Desa {data.setting.desaNama}, berkelakuan baik, tidak pernah terlibat perbuatan melanggar hukum,
+            serta dikenal sopan dan aktif dalam kegiatan kemasyarakatan.
+         </div>
+
+         <div style={{ textAlign: "justify", marginBottom: "15px" }}>
+            Surat keterangan ini diberikan sebagai pengantar permohonan penerbitan Surat Keterangan
+            Catatan Kepolisian (SKCK) ke Polsek/Polres {getValue("polsek")}.
+         </div>
+
+         <div style={{ textAlign: "justify", marginBottom: "15px" }}>
+            Surat ini berlaku selama 6 (enam) bulan sejak tanggal diterbitkan, kecuali terdapat perubahan
+            data yang mendasar.
+         </div>
+
+         <div style={{ textAlign: "justify", marginBottom: "20px" }}>
+            Demikian surat keterangan ini dibuat dengan sebenarnya untuk dipergunakan sebagaimana mestinya.
+         </div>
+
+         {/* TANGGAL */}
+         <table style={{ width: "100%", marginBottom: "40px" }}>
+            <tbody>
+               <tr>
+                  <td style={{ width: "180px" }}>Dikeluarkan di</td>
+                  <td style={{ width: "10px" }}>:</td>
+                  <td>{data.setting.desaNama}</td>
+               </tr>
+               <tr>
+                  <td>Pada tanggal</td>
+                  <td>:</td>
+                  <td>{data.surat.createdAt}</td>
+               </tr>
+            </tbody>
+         </table>
+
+         {/* TANDA TANGAN */}
+         <div style={{ width: "100%", display: "flex", justifyContent: "flex-end" }}>
+            <div style={{ textAlign: "center" }}>
+               Kepala Desa {data.setting.desaNama}
+               <br /> <br />
+               <img src={viewImg || undefined} alt="ttd perbekel" width={100} /> <br />
+               <u>{data.setting.perbekelNama}</u><br />
+               NIP. {data.setting.perbekelNIP}
+            </div>
+         </div>
+
+      </div>
+   );
+}

src/components/surat/SKKematian.tsx

@@ -0,0 +1,120 @@
+import _ from "lodash";
+import { useEffect, useState } from "react";
+import notification from "../notificationGlobal";
+
+export default function SKKematian({ data }: { data: any }) {
+   const [viewImg, setViewImg] = useState<string>("");
+   const getValue = (jenis: string) =>
+      _.upperFirst(
+         data.surat.dataText.find((item: any) => item.jenis === jenis)?.value || ""
+      );
+
+   const loadImage = async () => {
+      try {
+         setViewImg("");
+         if (!data.setting.perbekelTTD) return;
+
+         const urlApi = '/api/pengaduan/image?folder=lainnya&fileName=' + data.setting.perbekelTTD;
+         // Fetch manual agar mendapatkan Response asli
+         const res = await fetch(urlApi);
+         if (!res.ok)
+            return notification({
+               title: "Error",
+               message: "Failed to load image sign",
+               type: "error",
+            });
+         const blob = await res.blob();
+         const url = URL.createObjectURL(blob);
+
+         setViewImg(url);
+      } catch (err) {
+         console.error("Gagal load gambar:", err);
+      }
+   };
+
+   useEffect(() => {
+      loadImage();
+   }, [data]);
+
+   return (
+      <div style={{ lineHeight: "1.3" }}>
+         {/* HEADER */}
+         <div style={{ textAlign: "center", marginBottom: "10px" }}>
+            <b>PEMERINTAH KABUPATEN {_.upperCase(data.setting.desaKabupaten)}</b><br />
+            <b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b><br />
+            <b>DESA / KELURAHAN {_.upperCase(data.setting.desaNama)}</b><br />
+            Alamat: {data.setting.desaAlamat}<br />
+            Kode Pos: {data.setting.desaPos}
+         </div>
+
+         {/* JUDUL */}
+         <div style={{ textAlign: "center", margin: "20px 0" }}>
+            <b><u>SURAT KETERANGAN KEMATIAN</u></b><br />
+            Nomor: {data.surat.noSurat}
+         </div>
+
+         {/* YANG BERTANDA TANGAN */}
+         <div style={{ marginTop: "15px" }}>
+            Yang bertanda tangan di bawah ini:
+            <table style={{ width: "100%", marginTop: "5px" }}>
+               <tbody>
+                  <tr><td style={{ width: "160px" }}>Nama</td><td style={{ width: "10px" }}>:</td><td>{getValue("nama")}</td></tr>
+                  <tr><td>NIK</td><td>:</td><td>{getValue("nik")}</td></tr>
+                  <tr><td>Pekerjaan</td><td>:</td><td>{getValue("pekerjaan")}</td></tr>
+                  <tr><td>Alamat</td><td>:</td><td>{getValue("alamat")}</td></tr>
+                  <tr><td>Hubungan dengan almarhum/almarhumah</td><td>:</td><td>{getValue("hubungan dengan almarhum")}</td></tr>
+               </tbody>
+            </table>
+         </div>
+
+         <div style={{ marginTop: "20px" }}>
+            Melaporkan bahwa:
+            <table style={{ width: "100%", marginTop: "5px" }}>
+               <tbody>
+                  <tr><td style={{ width: "160px" }}>Nama</td><td style={{ width: "10px" }}>:</td><td>{getValue("nama")}</td></tr>
+                  <tr><td>NIK</td><td>:</td><td>{getValue("nik")}</td></tr>
+                  <tr><td>Jenis Kelamin</td><td>:</td><td>{getValue("jenis kelamin")}</td></tr>
+                  <tr><td>Tempat/Tanggal Lahir</td><td>:</td><td>{getValue("tempat tanggal lahir")}</td></tr>
+                  <tr><td>Agama</td><td>:</td><td>{getValue("agama")}</td></tr>
+                  <tr><td>Alamat</td><td>:</td><td>{getValue("alamat")}</td></tr>
+               </tbody>
+            </table>
+         </div>
+
+         <div style={{ marginTop: "20px" }}>
+            Telah meninggal dunia pada:
+            <table style={{ width: "100%", marginTop: "5px" }}>
+               <tbody>
+                  <tr><td style={{ width: "160px" }}>Tanggal Kematian</td><td style={{ width: "10px" }}>:</td><td>{getValue("tanggal kematian")}</td></tr>
+                  <tr><td>Waktu Kematian</td><td>:</td><td>{getValue("waktu kematian")}</td></tr>
+                  <tr><td>Tempat Kematian</td><td>:</td><td>{getValue("tempat kematian")}</td></tr>
+                  <tr><td>Penyebab Kematian</td><td>:</td><td>{getValue("penyebab kematian")}</td></tr>
+               </tbody>
+            </table>
+         </div>
+
+         <div style={{ marginTop: "20px" }}>
+            Demikian surat keterangan ini dibuat dengan sebenarnya agar dapat digunakan sebagaimana mestinya.
+         </div>
+
+         {/* TANDA TANGAN */}
+         <div style={{ marginTop: "40px", display: "flex", justifyContent: "space-between", width: "100%" }}>
+            <div style={{ textAlign: "center" }}>
+               <br /><br />
+               Pemohon
+               <br /><br /><br /><br /> <br />
+               <u>{getValue("nama")}</u> <br />
+            </div>
+            <div style={{ textAlign: "center" }}>
+               <br />
+               Kepala Desa / Lurah {data.setting.desaNama}
+               <br /><br />
+               <img src={viewImg || undefined} alt="ttd perbekel" width={100} /><br />
+               <u>{data.setting.perbekelNama}</u> <br />
+               NIP. {data.setting.perbekelNIP}
+            </div>
+         </div>
+
+      </div>
+   );
+}

src/components/surat/SKPenghasilan.tsx

@@ -0,0 +1,143 @@
+import _ from "lodash";
+import { useEffect, useState } from "react";
+import notification from "../notificationGlobal";
+
+export default function SKPenghasilan({ data }: { data: any }) {
+   const [viewImg, setViewImg] = useState<string>("");
+   const getValue = (jenis: string) =>
+      _.upperFirst(
+         data.surat.dataText.find((item: any) => item.jenis === jenis)?.value || ""
+      );
+
+   const loadImage = async () => {
+      try {
+         setViewImg("");
+         if (!data.setting.perbekelTTD) return;
+
+         const urlApi = '/api/pengaduan/image?folder=lainnya&fileName=' + data.setting.perbekelTTD;
+         // Fetch manual agar mendapatkan Response asli
+         const res = await fetch(urlApi);
+         if (!res.ok)
+            return notification({
+               title: "Error",
+               message: "Failed to load image sign",
+               type: "error",
+            });
+         const blob = await res.blob();
+         const url = URL.createObjectURL(blob);
+
+         setViewImg(url);
+      } catch (err) {
+         console.error("Gagal load gambar:", err);
+      }
+   };
+
+   useEffect(() => {
+      loadImage();
+   }, [data]);
+
+   return (
+      <div style={{ lineHeight: "1.3" }}>
+         {/* HEADER */}
+         <div style={{ textAlign: "center", marginBottom: "10px" }}>
+            <b>PEMERINTAH KABUPATEN {_.upperCase(data.setting.desaKabupaten)}</b><br />
+            <b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b><br />
+            <b>DESA / KELURAHAN {_.upperCase(data.setting.desaNama)}</b><br />
+            Alamat: {data.setting.desaAlamat}<br />
+            Kode Pos: {data.setting.desaPos}
+         </div>
+
+         {/* JUDUL */}
+         <div style={{ textAlign: "center", margin: "20px 0" }}>
+            <b><u>SURAT KETERANGAN PENGHASILAN</u></b><br />
+            Nomor: {data.surat.noSurat}
+         </div>
+
+         {/* YANG BERTANDA TANGAN */}
+         <div style={{ marginTop: "15px" }}>
+            Yang bertanda tangan di bawah ini:
+            <table style={{ width: "100%", marginTop: "5px" }}>
+               <tbody>
+                  <tr>
+                     <td style={{ width: "160px" }}>Nama</td>
+                     <td style={{ width: "10px" }}>:</td>
+                     <td>{data.setting.perbekelNama}</td>
+                  </tr>
+                  <tr>
+                     <td>Jabatan</td>
+                     <td>:</td>
+                     <td>{data.setting.perbekelJabatan}</td>
+                  </tr>
+                  <tr>
+                     <td>Kecamatan</td>
+                     <td>:</td>
+                     <td>{data.setting.desaKecamatan}</td>
+                  </tr>
+                  <tr>
+                     <td>Kabupaten</td>
+                     <td>:</td>
+                     <td>{data.setting.desaKabupaten}</td>
+                  </tr>
+               </tbody>
+            </table>
+         </div>
+
+         {/* IDENTITAS */}
+         <div style={{ marginTop: "20px" }}>
+            Dengan ini menerangkan bahwa:
+            <table style={{ width: "100%", marginTop: "5px" }}>
+               <tbody>
+                  <tr><td style={{ width: "160px" }}>Nama</td><td>:</td><td>{getValue("nama")}</td></tr>
+                  <tr><td>Jenis Kelamin</td><td>:</td><td>{getValue("jenis kelamin")}</td></tr>
+                  <tr><td>Tempat / Tanggal Lahir</td><td>:</td><td>{getValue("tempat tanggal lahir")}</td></tr>
+                  <tr><td>Pekerjaan</td><td>:</td><td>{getValue("pekerjaan")}</td></tr>
+                  <tr><td>Alamat</td><td>:</td><td>{getValue("alamat")}</td></tr>
+               </tbody>
+            </table>
+         </div>
+
+         {/* PENGHASILAN */}
+         <div style={{ marginTop: "20px" }}>
+            Berdasarkan keterangan yang bersangkutan, orang tersebut memiliki penghasilan rata-rata:
+            <table style={{ width: "100%", marginTop: "10px" }}>
+               <tbody>
+                  <tr>
+                     <td style={{ width: "160px" }}>Penghasilan</td>
+                     <td style={{ width: "10px" }}>:</td>
+                     <td>
+                        Rp {getValue("penghasilan")}
+                        {" "}
+                        ({getValue("penghasilan terbilang")}) per bulan
+                     </td>
+                  </tr>
+               </tbody>
+            </table>
+         </div>
+
+         {/* KEPERLUAN */}
+         <div style={{ marginTop: "20px" }}>
+            Surat keterangan ini dibuat untuk keperluan: <b>{getValue("alasan permohonan")}</b>.
+         </div>
+
+         <div style={{ marginTop: "20px" }}>
+            Demikian surat keterangan ini dibuat dengan sebenarnya untuk dapat dipergunakan sebagaimana mestinya.
+         </div>
+
+         {/* TANGGAL & TANDA TANGAN */}
+         <div style={{ marginTop: "20px" }}>
+            Dikeluarkan di {data.setting.desaNama} <br />
+            Pada tanggal {data.surat.createdAt}
+         </div>
+
+         <div style={{ marginTop: "40px", display: "flex", justifyContent: "flex-end" }}>
+            <div style={{ textAlign: "center" }}>
+               Kepala Desa / Lurah {data.setting.desaNama}
+               <br /> <br />
+               <img src={viewImg || undefined} alt="ttd perbekel" width={100} /><br />
+               <u>{data.setting.perbekelNama}</u> <br />
+               NIP. {data.setting.perbekelNIP}
+            </div>
+         </div>
+      </div>
+   );
+}

src/components/surat/SKTempatUsaha.tsx

@@ -0,0 +1,121 @@
+import _ from "lodash";
+import { useEffect, useState } from "react";
+import notification from "../notificationGlobal";
+
+export default function SKTempatUsaha({ data }: { data: any }) {
+   const [viewImg, setViewImg] = useState<string>("");
+   const getValue = (key: string) =>
+      _.upperFirst(data.surat.dataText.find((i: any) => i.jenis === key)?.value || "");
+
+   const loadImage = async () => {
+      try {
+         setViewImg("");
+         if (!data.setting.perbekelTTD) return;
+
+         const urlApi = '/api/pengaduan/image?folder=lainnya&fileName=' + data.setting.perbekelTTD;
+         // Fetch manual agar mendapatkan Response asli
+         const res = await fetch(urlApi);
+         if (!res.ok)
+            return notification({
+               title: "Error",
+               message: "Failed to load image sign",
+               type: "error",
+            });
+         const blob = await res.blob();
+         const url = URL.createObjectURL(blob);
+
+         setViewImg(url);
+      } catch (err) {
+         console.error("Gagal load gambar:", err);
+      }
+   };
+
+   useEffect(() => {
+      loadImage();
+   }, [data]);
+
+
+   return (
+      <div style={{ lineHeight: "1.5" }}>
+         {/* TITLE */}
+         <div style={{ textAlign: "center", marginBottom: "20px" }}>
+            <b style={{ fontSize: "16px" }}>SURAT KETERANGAN TEMPAT USAHA</b><br />
+            Nomor: {data.surat.noSurat}
+         </div>
+
+         {/* ISI */}
+         <div>
+            <div style={{ marginBottom: "10px" }}>
+               Yang bertanda tangan dibawah ini, saya:
+            </div>
+
+            {/* DATA PEJABAT */}
+            <div>
+               <Row label="Nama" value={data.setting.perbekelNama} />
+               <Row label="Jabatan" value={data.setting.perbekelJabatan} />
+               <Row label="Alamat" value={data.setting.desaAlamat} />
+            </div>
+
+            <br />
+
+            <div>Dengan ini menerangkan bahwa:</div>
+
+            {/* DATA WARGA */}
+            <div>
+               <Row label="Nama Pemilik Usaha" value={getValue("nama")} />
+               <Row label="Tempat/Tanggal Lahir" value={getValue("tempat tanggal lahir")} />
+               <Row label="Alamat Pemilik Usaha" value={getValue("alamat")} />
+               <Row label="Nomor KTP" value={getValue("nik")} />
+            </div>
+
+            <br />
+
+            <div>Benar yang bersangkutan memiliki tempat usaha dengan keterangan seperti berikut:</div>
+
+            <div>
+               <Row label="Nama Usaha" value={getValue("nama usaha")} />
+               <Row label="Bidang Usaha" value={getValue("bidang usaha")} />
+               <Row label="Alamat Usaha" value={getValue("alamat usaha")} />
+               <Row label="Status Tempat Usaha" value={getValue("status tempat usaha")} />
+               <Row label="Luas Tempat Usaha" value={getValue("luas tempat usaha")} />
+               <Row label="Jumlah Karyawan" value={getValue("jumlah karyawan")} />
+            </div>
+
+            <p style={{ textAlign: "justify" }}>
+               Surat keterangan ini dibuat untuk keperluan <b>{getValue("alasan permohonan")}.</b>
+            </p>
+
+            <p style={{ textAlign: "justify" }}>
+               Demikian surat keterangan ini dibuat dengan sebenarnya untuk dapat dipergunakan sebagaimana mestinya.
+            </p>
+
+            <div>
+               <Row label="Dikeluarkan di" value={data.setting.desaNama} />
+               <Row label="Pada tanggal" value={data.surat.createdAt} />
+            </div>
+
+            <br /><br />
+
+            {/* TANDA TANGAN */}
+            <div style={{ width: "100%", display: "flex", justifyContent: "flex-end" }}>
+               <div style={{ textAlign: "center" }}>
+                  {data.setting.desaKabupaten}, {data.surat.createdAt} <br /> <br />
+                  <img src={viewImg || undefined} alt="ttd perbekel" width={100} /><br />
+                  <u>{data.setting.perbekelNama}</u><br />
+                  {data.setting.perbekelJabatan + " " + data.setting.desaNama}
+               </div>
+            </div>
+         </div>
+      </div>
+   );
+}
+
+function Row({ label, value }: { label: string, value: string }) {
+   return (
+      <div style={{ display: "flex", marginBottom: "4px" }}>
+         <div style={{ width: "180px" }}>{label}</div>
+         <div style={{ width: "10px" }}>:</div>
+         <div>{value}</div>
+      </div>
+   );
+}

src/components/surat/SKTidakMampu.tsx

@@ -0,0 +1,112 @@
+import _ from "lodash";
+import { useEffect, useState } from "react";
+import notification from "../notificationGlobal";
+
+export default function SKTidakMampu({ data }: { data: any }) {
+   const [viewImg, setViewImg] = useState<string>("");
+   const getValue = (key: string) =>
+      _.upperFirst(data.surat.dataText.find((i: any) => i.jenis === key)?.value || "");
+
+
+   const loadImage = async () => {
+      try {
+         setViewImg("");
+         if (!data.setting.perbekelTTD) return;
+
+         const urlApi = '/api/pengaduan/image?folder=lainnya&fileName=' + data.setting.perbekelTTD;
+         // Fetch manual agar mendapatkan Response asli
+         const res = await fetch(urlApi);
+         if (!res.ok)
+            return notification({
+               title: "Error",
+               message: "Failed to load image sign",
+               type: "error",
+            });
+         const blob = await res.blob();
+         const url = URL.createObjectURL(blob);
+
+         setViewImg(url);
+      } catch (err) {
+         console.error("Gagal load gambar:", err);
+      }
+   };
+
+   useEffect(() => {
+      loadImage();
+   }, [data]);
+
+   return (
+      <div style={{ lineHeight: "1.5" }}>
+         {/* TITLE */}
+         <div style={{ textAlign: "center", marginBottom: "20px" }}>
+            <b style={{ fontSize: "16px" }}>SURAT KETERANGAN TIDAK MAMPU</b><br />
+            Nomor: {data.surat.noSurat}
+         </div>
+
+         {/* ISI */}
+         <div>
+            <div style={{ marginBottom: "10px" }}>
+               Yang bertanda tangan dibawah ini, saya
+            </div>
+
+            {/* DATA PEJABAT */}
+            <div>
+
+               <Row label="Nama" value={data.setting.perbekelNama} />
+               <Row label="Alamat" value={data.setting.desaAlamat} />
+               <Row label="Jabatan" value={data.setting.perbekelJabatan} />
+
+            </div>
+
+            <br />
+
+            <div>Dengan ini menerangkan bahwa:</div>
+
+            {/* DATA WARGA */}
+            <div>
+
+               <Row label="Nama" value={getValue("nama")} />
+               <Row label="Tempat Tgl Lahir" value={getValue("tempat tanggal lahir")} />
+               <Row label="Alamat" value={getValue("alamat")} />
+               <Row label="NIK" value={getValue("nik")} />
+
+            </div>
+
+            <br />
+
+            <p style={{ textAlign: "justify" }}>
+               Orang tersebut benar-benar penduduk desa {data.setting.desaNama} dan termasuk keluarga tidak mampu.
+               Surat keterangan ini dipergunakan untuk
+               <b>{getValue("alasan permohonan")}.</b>
+            </p>
+
+            <p style={{ textAlign: "justify" }}>
+               Demikian surat keterangan ini kami buat dengan sebenar-benarnya untuk dapat dipergunakan
+               sebagaimana mestinya.
+            </p>
+
+            <br /><br />
+
+            {/* TANDA TANGAN */}
+            <div style={{ width: "100%", display: "flex", justifyContent: "flex-end" }}>
+               <div style={{ textAlign: "center" }}>
+                  {data.setting.desaKabupaten}, {data.surat.createdAt} <br /> <br />
+                  <img src={viewImg || undefined} alt="ttd perbekel" width={100} /><br />
+                  <u>{data.setting.perbekelNama}</u><br />
+                  {data.setting.perbekelJabatan + " " + data.setting.desaNama}
+               </div>
+            </div>
+         </div>
+      </div>
+   );
+}
+
+function Row({ label, value }: { label: string, value: string }) {
+   return (
+      <div style={{ display: "flex", marginBottom: "4px" }}>
+         <div style={{ width: "180px" }}>{label}</div>
+         <div style={{ width: "10px" }}>:</div>
+         <div>{value}</div>
+      </div>
+   );
+}

src/components/surat/SKUsaha.tsx

@@ -0,0 +1,149 @@
+import _ from "lodash";
+import { useEffect, useState } from "react";
+import notification from "../notificationGlobal";
+
+export default function SKUsaha({ data }: { data: any }) {
+   const [viewImg, setViewImg] = useState<string>("");
+   const getValue = (jenis: string) =>
+      _.upperFirst(
+         data.surat.dataText.find((item: any) => item.jenis === jenis)?.value || ""
+      );
+
+   const loadImage = async () => {
+      try {
+         setViewImg("");
+         if (!data.setting.perbekelTTD) return;
+
+         const urlApi = '/api/pengaduan/image?folder=lainnya&fileName=' + data.setting.perbekelTTD;
+         // Fetch manual agar mendapatkan Response asli
+         const res = await fetch(urlApi);
+         if (!res.ok)
+            return notification({
+               title: "Error",
+               message: "Failed to load image sign",
+               type: "error",
+            });
+         const blob = await res.blob();
+         const url = URL.createObjectURL(blob);
+
+         setViewImg(url);
+      } catch (err) {
+         console.error("Gagal load gambar:", err);
+      }
+   };
+
+   useEffect(() => {
+      loadImage();
+   }, [data]);
+
+   return (
+      <div style={{ lineHeight: "1.3" }}>
+         {/* HEADER */}
+         <div style={{ textAlign: "center", marginBottom: "10px" }}>
+            <b>PEMERINTAH KABUPATEN {_.upperCase(data.setting.desaKabupaten)}</b><br />
+            <b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b><br />
+            <b>DESA / KELURAHAN {_.upperCase(data.setting.desaNama)}</b><br />
+            Alamat: {data.setting.desaAlamat}<br />
+            Kode Pos: {data.setting.desaPos}
+         </div>
+
+         {/* JUDUL */}
+         <div style={{ textAlign: "center", margin: "15px 0" }}>
+            <b><u>SURAT KETERANGAN USAHA</u></b><br />
+            Nomor: {data.surat.noSurat}
+         </div>
+
+         {/* YANG BERTANDA TANGAN */}
+         <div style={{ marginTop: "15px" }}>
+            Yang bertanda tangan di bawah ini:
+            <table style={{ width: "100%", marginTop: "5px" }}>
+               <tbody>
+                  <tr>
+                     <td style={{ width: "160px" }}>Nama</td>
+                     <td style={{ width: "10px" }}>:</td>
+                     <td>{data.setting.perbekelNama}</td>
+                  </tr>
+                  <tr>
+                     <td>Jabatan</td>
+                     <td>:</td>
+                     <td>{data.setting.perbekelJabatan}</td>
+                  </tr>
+                  <tr>
+                     <td>Kecamatan</td>
+                     <td>:</td>
+                     <td>{data.setting.desaKecamatan}</td>
+                  </tr>
+                  <tr>
+                     <td>Kabupaten</td>
+                     <td>:</td>
+                     <td>{data.setting.desaKabupaten}</td>
+                  </tr>
+               </tbody>
+            </table>
+         </div>
+
+         {/* IDENTITAS ORANG YG MEMINTA SURAT */}
+         <div style={{ marginTop: "20px" }}>
+            Dengan ini menerangkan dengan sesungguhnya bahwa:
+            <table style={{ width: "100%", marginTop: "5px" }}>
+               <tbody>
+                  <tr><td style={{ width: "160px" }}>Nama</td><td style={{ width: "10px" }}>:</td><td>{getValue("nama")}</td></tr>
+                  <tr><td>Jenis Kelamin</td><td>:</td><td>{getValue("jenis kelamin")}</td></tr>
+                  <tr><td>Tempat / Tanggal Lahir</td><td>:</td><td>{getValue("tempat tanggal lahir")}</td></tr>
+                  <tr><td>Warga Negara</td><td>:</td><td>{getValue("negara")}</td></tr>
+                  <tr><td>Agama</td><td>:</td><td>{getValue("agama")}</td></tr>
+                  <tr><td>Status</td><td>:</td><td>{getValue("status perkawinan")}</td></tr>
+                  <tr><td>Pekerjaan</td><td>:</td><td>{getValue("pekerjaan")}</td></tr>
+                  <tr><td>Alamat</td><td>:</td><td>{getValue("alamat")}</td></tr>
+               </tbody>
+            </table>
+         </div>
+
+         {/* DOMISILI */}
+         <div style={{ marginTop: "20px" }}>
+            Bahwa orang tersebut di atas benar-benar penduduk:
+            <table style={{ width: "100%", marginTop: "5px" }}>
+               <tbody>
+                  <tr><td style={{ width: "160px" }}>Desa / Kelurahan</td><td style={{ width: "10px" }}>:</td><td>{data.setting.desaNama}</td></tr>
+                  <tr><td>Kecamatan</td><td>:</td><td>{data.setting.desaKecamatan}</td></tr>
+                  <tr><td>Kabupaten</td><td>:</td><td>{data.setting.desaKabupaten}</td></tr>
+               </tbody>
+            </table>
+         </div>
+
+         {/* USAHA */}
+         <div style={{ marginTop: "20px" }}>
+            Dan yang bersangkutan benar memiliki usaha:
+            <table style={{ width: "100%", marginTop: "5px" }}>
+               <tbody>
+                  <tr><td style={{ width: "160px" }}>Jenis Usaha</td><td style={{ width: "10px" }}>:</td><td>{getValue("jenis usaha")}</td></tr>
+                  <tr><td>Alamat Usaha</td><td>:</td><td>{getValue("alamat usaha")}</td></tr>
+               </tbody>
+            </table>
+         </div>
+
+         <div style={{ marginTop: "20px" }}>
+            Surat keterangan ini dibuat dengan sebenarnya untuk dipergunakan sebagaimana mestinya.
+         </div>
+
+         <div style={{ marginTop: "20px" }}>
+            Dikeluarkan di {data.setting.desaNama} <br />
+            Pada tanggal {data.surat.createdAt}
+         </div>
+
+         {/* TANDA TANGAN */}
+         <div style={{ marginTop: "10px", display: "flex", justifyContent: "flex-end", width: "100%" }}>
+            <div style={{ textAlign: "center" }}>
+               <br />
+               Kepala Desa / Lurah {data.setting.desaNama}
+               <br /><br />
+               <img src={viewImg || undefined} alt="ttd perbekel" width={100} />
+               <br />
+               <u>{data.setting.perbekelNama}</u> <br />
+               NIP. {data.setting.perbekelNIP}
+            </div>
+         </div>
+
+      </div>
+   );
+}

src/components/surat/SKYatimPiatu.tsx

@@ -0,0 +1,194 @@
+import { useShallowEffect } from "@mantine/hooks";
+import _ from "lodash";
+import { useState } from "react";
+import notification from "../notificationGlobal";
+
+export default function SKYatim({ data }: { data: any }) {
+   const [viewImg, setViewImg] = useState<string>("");
+   const getValue = (key: string) =>
+      _.upperFirst(data.surat.dataText.find((i: any) => i.jenis === key)?.value || "");
+
+   const loadImage = async () => {
+      try {
+         setViewImg("");
+         if (!data.setting.perbekelTTD) return;
+
+         const urlApi = '/api/pengaduan/image?folder=lainnya&fileName=' + data.setting.perbekelTTD;
+         // Fetch manual agar mendapatkan Response asli
+         const res = await fetch(urlApi);
+         if (!res.ok)
+            return notification({
+               title: "Error",
+               message: "Failed to load image sign",
+               type: "error",
+            });
+         const blob = await res.blob();
+         const url = URL.createObjectURL(blob);
+
+         setViewImg(url);
+      } catch (err) {
+         console.error("Gagal load gambar:", err);
+      }
+   };
+
+   useShallowEffect(() => {
+      loadImage();
+   }, [data]);
+
+   return (
+      <div style={{ lineHeight: "1.3" }}>
+
+         {/* HEADER */}
+         <div style={{ textAlign: "center", marginBottom: "10px" }}>
+            <b>PEMERINTAH KABUPATEN {_.upperCase(data.setting.desaKabupaten)}</b><br />
+            <b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b><br />
+            <b>DESA {_.upperCase(data.setting.desaNama)}</b><br />
+            Alamat: {data.setting.desaAlamat}. Kode Pos: {data.setting.desaPos}
+         </div>
+
+         <div style={{ textAlign: "center", marginTop: "15px" }}>
+            <b><u>SURAT KETERANGAN YATIM / PIATU / YATIM PIATU</u></b><br />
+            Nomor: {data.surat.noSurat}
+         </div>
+
+         <br />
+
+         {/* BAGIAN PENANDATANGAN */}
+         <div>Yang bertanda tangan di bawah ini:</div>
+         <table style={{ width: "100%", marginTop: "5px" }}>
+            <tbody>
+               <tr>
+                  <td style={{ width: "180px" }}>Nama</td>
+                  <td>: {data.setting.perbekelNama}</td>
+               </tr>
+               <tr>
+                  <td>Jabatan</td>
+                  <td>: {data.setting.perbekelJabatan}</td>
+               </tr>
+               <tr>
+                  <td>Alamat Kantor</td>
+                  <td>: {data.setting.desaAlamat}</td>
+               </tr>
+            </tbody>
+         </table>
+
+         <br />
+
+         {/* BAGIAN IDENTITAS ANAK */}
+         <div>Dengan ini menerangkan bahwa:</div>
+
+         <table style={{ width: "100%", marginTop: "5px" }}>
+            <tbody>
+               <tr>
+                  <td style={{ width: "180px" }}>Nama</td>
+                  <td>: {getValue("nama")}</td>
+               </tr>
+               <tr>
+                  <td>Tempat/Tanggal Lahir</td>
+                  <td>: {getValue("tempat tanggal lahir")}</td>
+               </tr>
+               <tr>
+                  <td>Jenis Kelamin</td>
+                  <td>: {getValue("jenis kelamin")}</td>
+               </tr>
+               <tr>
+                  <td>Alamat</td>
+                  <td>: {getValue("alamat")}</td>
+               </tr>
+               <tr>
+                  <td>NIK</td>
+                  <td>: {getValue("nik")}</td>
+               </tr>
+               <tr>
+                  <td>Pekerjaan</td>
+                  <td>: {getValue("pekerjaan")}</td>
+               </tr>
+            </tbody>
+         </table>
+
+         <br />
+
+         {/* KETERANGAN ORANG TUA */}
+         <div>
+            Benar bahwa yang bersangkutan adalah <b>anak (Yatim / Piatu / Yatim Piatu)</b>,
+            dengan keterangan sebagai berikut:
+         </div>
+
+         <br />
+
+         <div><b>1. Nama Ayah</b></div>
+         <table style={{ width: "100%" }}>
+            <tbody>
+               <tr>
+                  <td style={{ width: "180px" }}>Nama Ayah</td>
+                  <td>: {getValue("nama ayah")}</td>
+               </tr>
+               <tr>
+                  <td>Status</td>
+                  <td>: {getValue("status ayah")}</td>
+               </tr>
+            </tbody>
+         </table>
+
+         <br />
+
+         <div><b>2. Nama Ibu</b></div>
+         <table style={{ width: "100%" }}>
+            <tbody>
+               <tr>
+                  <td style={{ width: "180px" }}>Nama Ibu</td>
+                  <td>: {getValue("nama ibu")}</td>
+               </tr>
+               <tr>
+                  <td>Status</td>
+                  <td>: {getValue("status ibu")}</td>
+               </tr>
+            </tbody>
+         </table>
+
+         <br />
+
+         <div>
+            Dengan demikian, berdasarkan keterangan pihak keluarga dan data di Kantor Desa,
+            maka benar bahwa yang bersangkutan adalah
+            <b> anak (Yatim / Piatu / Yatim Piatu).</b>
+         </div>
+
+         <br />
+
+         <div>
+            Surat keterangan ini dibuat dengan sebenar-benarnya untuk dipergunakan sebagaimana mestinya.
+         </div>
+
+         <br />
+
+         {/* TANGGAL & TEMPAT */}
+         <table style={{ width: "100%", marginTop: "10px" }}>
+            <tbody>
+               <tr>
+                  <td style={{ width: "180px" }}>Dikeluarkan di</td>
+                  <td>: {data.setting.desaNama}</td>
+               </tr>
+               <tr>
+                  <td>Pada tanggal</td>
+                  <td>: {data.surat.createdAt}</td>
+               </tr>
+            </tbody>
+         </table>
+
+         <br />
+
+         {/* TTD */}
+         <div style={{ width: "100%", display: "flex", justifyContent: "flex-end" }}>
+            <div style={{ textAlign: "center" }}>
+               Kepala Desa {data.setting.desaNama}
+               <br /><br />
+               <img src={viewImg || undefined} alt="ttd perbekel" width={100} /> <br />
+               <u>{data.setting.perbekelNama}</u> <br />
+               NIP. {data.setting.perbekelNIP}
+            </div>
+         </div>
+
+      </div>
+   );
+}

src/index.tsx

@@ -17,6 +17,7 @@ import PengaduanRoute from "./server/routes/pengaduan_route";
 import TestPengaduanRoute from "./server/routes/test_pengaduan";
 import UserRoute from "./server/routes/user_route";
 import WargaRoute from "./server/routes/warga_route";
+import SuratRoute from "./server/routes/surat_route";
 
 const Docs = new Elysia({
   tags: ["docs"],
@@ -34,6 +35,7 @@ const Api = new Elysia({
   .use(PelayananRoute)
   .use(ConfigurationDesaRoute)
   .use(WargaRoute)
+  .use(SuratRoute)
   .use(TestPengaduanRoute)
   .use(apiAuth)
   .use(ApiKeyRoute)

src/lib/categoryPelayananSurat.ts

@@ -25,7 +25,7 @@ export const categoryPelayananSurat = [
     syaratDokumen: [
       { name: "pengantar kelian", desc: "Surat Pengantar Kelian Banjar Dinas" },
       { name: "skt organisasi", desc: "Fotokopi Surat Keterangan Terdaftar (SKT) Organisasi atau Pengukuhan Kelompok" },
-      {name: "susunan pengurus", desc: "Jika Pengajuan baru pembuatan SKT maka melengkapi Susunan Pengurus lengkap denganKop Organisasi"}
+      { name: "susunan pengurus", desc: "Jika Pengajuan baru pembuatan SKT maka melengkapi Susunan Pengurus lengkap denganKop Organisasi" }
     ],
     dataText: ["nama organisasi", "alamat organisasi", "nama pemohon", "jabatan pemohon", "kontak", "penanggung jawab", "tanggal berdiri"]
   },
@@ -36,7 +36,7 @@ export const categoryPelayananSurat = [
       { name: "pengantar kelian", desc: "Surat Pengantar Kelian Banjar Dinas" },
       { name: "surat lahir", desc: "Fotokopi Surat Keterangan Lahir dari Bidan/Dokter (jika ada)" }
     ],
-    dataText: ["nama ayah", "nama ibu", "nama anak", "tanggal lahir", "tempat lahir", "jenis kelamin", "nama pelapor"]
+    dataText: ["nama ayah", "nama ibu", "nama anak", "tanggal lahir anak", "pukul lahir anak", "tempat lahir anak", "jenis kelamin anak", "anak ke", "nik ibu", "tempat tanggal lahir ibu", "pekerjaan ibu", "alamat ibu", "nik ayah", "tempat tanggal lahir ayah", "pekerjaan ayah", "alamat ayah", "nama pelapor", "hubungan pelapor", "alamat pelapor"]
   },
   {
     id: "skkelakuanbaik",
@@ -45,7 +45,7 @@ export const categoryPelayananSurat = [
       { name: "pengantar kelian", desc: "Surat Pengantar Kelian Banjar Dinas" },
       { name: "ktp/kk", desc: "Fotokopi KTP atau Kartu Keluarga" }
     ],
-    dataText: ["nik", "nama", "tempat tanggal lahir", "jenis kelamin", "alamat", "keperluan"]
+    dataText: ["nik", "nama", "tempat tanggal lahir", "jenis kelamin", "alamat", "polsek"]
   },
   {
     id: "skkematian",
@@ -65,7 +65,7 @@ export const categoryPelayananSurat = [
       { name: "ktp ortu/kk", desc: "Fotokopi KTP orang tua atau Kartu Keluarga" },
       { name: "surat pernyataan", desc: "Surat Pernyataan Penghasilan bermaterai" }
     ],
-    dataText: ["nama", "nik", "alamat", "pekerjaan", "jenis usaha", "penghasilan"]
+    dataText: ["nama", "nik", "alamat", "pekerjaan", "jenis usaha", "penghasilan", "alasan permohonan"]
   },
   {
     id: "sktempatusaha",
@@ -95,7 +95,7 @@ export const categoryPelayananSurat = [
       { name: "ktp/kk", desc: "Fotokopi KTP atau Kartu Keluarga" },
       { name: "foto lokasi", desc: "Foto lokasi usaha dicetak dalam selembar kertas, diparaf dan distempel oleh Kelian" }
     ],
-    dataText: ["jenis usaha", "alamat usaha"]
+    dataText: ["nama", "jenis kelamin", "tempat tanggal lahir", "negara", "agama", "status perkawinan", "alamat", "pekerjaan", "jenis usaha", "alamat usaha"]
   },
   {
     id: "skyatimpiatu",

src/lib/configurationDesa.ts

@@ -47,7 +47,7 @@ export const confDesa = [
    {
       id: "perbekelNIP",
       name: "NIP",
-      value: ""
+      value: "1122334455"
    },
    {
       id: "perbekelTTD",

src/lib/groupPermission.ts

@@ -0,0 +1,59 @@
+import config from "@/lib/listPermission.json";
+
+export interface PermissionNode {
+   key: string;
+   label: string;
+   children?: PermissionNode[];
+}
+
+interface Grouped {
+   [key: string]: {
+      label: string;
+      children: Grouped;
+      actions: string[];
+   };
+}
+
+/* --- Build lookup table --- */
+const permissionMap: Record<string, string[]> = {};
+
+function walk(nodes: PermissionNode[], path: string[] = []) {
+   nodes.forEach((n) => {
+      const full = [...path, n.label];
+      permissionMap[n.key] = full;
+      if (n.children) walk(n.children, full);
+   });
+}
+
+walk(config.menus);
+
+/* --- Convert keys → hierarchical grouped --- */
+export function groupPermissions(keys: string[]) {
+   const tree: Grouped = {};
+
+   keys.forEach((key) => {
+      const path = permissionMap[key];
+      if (!path) return;
+
+      let pointer = tree;
+
+      path.forEach((label, idx) => {
+         if (!pointer[label]) {
+            pointer[label] = {
+               label,
+               children: {},
+               actions: []
+            };
+         }
+
+         // last item = actual permission action
+         if (idx === path.length - 1) {
+            pointer[label].actions.push(label);
+         }
+
+         pointer = pointer[label].children;
+      });
+   });
+
+   return tree;
+}

src/lib/listPermission.json

@@ -0,0 +1,310 @@
+{
+  "menus": [
+    {
+      "key": "dashboard",
+      "label": "Dashboard",
+      "default": true,
+      "children": [
+        {
+          "key": "dashboard.view",
+          "label": "Melihat Dashboard",
+          "default": true
+        }
+      ]
+    },
+    {
+      "key": "pengaduan",
+      "label": "Pengaduan",
+      "default": true,
+      "children": [
+        {
+          "key": "pengaduan.view",
+          "label": "Melihat List & Detail",
+          "default": true
+        },
+        {
+          "key": "pengaduan.antrian",
+          "label": "Detail pengaduan dengan status antrian",
+          "default": true,
+          "children": [
+            {
+              "key": "pengaduan.antrian.tolak",
+              "label": "Menolak pengaduan",
+              "default": true
+            },
+            {
+              "key": "pengaduan.antrian.terima",
+              "label": "Menerima pengaduan",
+              "default": true
+            }
+          ]
+        },
+        {
+          "key": "pengaduan.diterima",
+          "label": "Detail pengaduan dengan status diterima",
+          "default": true,
+          "children": [
+            {
+              "key": "pengaduan.diterima.dikerjakan",
+              "label": "Menegerjakan pengaduan",
+              "default": true
+            }
+          ]
+        },
+        {
+          "key": "pengaduan.dikerjakan",
+          "label": "Detail pengaduan dengan status dikerjakan",
+          "default": true,
+          "children": [
+            {
+              "key": "pengaduan.dikerjakan.selesai",
+              "label": "Menyelesaikan pengaduan",
+              "default": true
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "key": "pelayanan",
+      "label": "Pelayanan",
+      "default": true,
+      "children": [
+        {
+          "key": "pelayanan.view",
+          "label": "Melihat List & Detail",
+          "default": true
+        },
+        {
+          "key": "pelayanan.antrian",
+          "label": "Detail pelayanan dengan status antrian",
+          "default": true,
+          "children": [
+            {
+              "key": "pelayanan.antrian.tolak",
+              "label": "Menolak pelayanan",
+              "default": true
+            },
+            {
+              "key": "pelayanan.antrian.terima",
+              "label": "Menerima pelayanan",
+              "default": true
+            }
+          ]
+        },
+        {
+          "key": "pelayanan.diterima",
+          "label": "Detail pelayanan dengan status diterima",
+          "default": true,
+          "children": [
+            {
+              "key": "pelayanan.diterima.tolak",
+              "label": "Menolak pelayanan",
+              "default": true
+            },
+            {
+              "key": "pelayanan.diterima.setujui",
+              "label": "Menyetujui pelayanan",
+              "default": true
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "key": "warga",
+      "label": "Warga",
+      "default": true,
+      "children": [
+        {
+          "key": "warga.view",
+          "label": "Melihat List & Detail",
+          "default": true
+        }
+      ]
+    },
+    {
+      "key": "setting",
+      "label": "Setting",
+      "default": true,
+      "children": [
+        {
+          "key": "setting.profile",
+          "label": "Profile",
+          "default": true,
+          "children": [
+            {
+              "key": "setting.profile.view",
+              "label": "View",
+              "default": true
+            },
+            {
+              "key": "setting.profile.edit",
+              "label": "Edit",
+              "default": true
+            },
+            {
+              "key": "setting.profile.password",
+              "label": "Ubah Password",
+              "default": true
+            }
+          ]
+        },
+        {
+          "key": "setting.user",
+          "label": "User",
+          "default": true,
+          "children": [
+            {
+              "key": "setting.user.view",
+              "label": "View List",
+              "default": true
+            },
+            {
+              "key": "setting.user.tambah",
+              "label": "Tambah",
+              "default": true
+            },
+            {
+              "key": "setting.user.edit",
+              "label": "Edit",
+              "default": true
+            },
+            {
+              "key": "setting.user.delete",
+              "label": "Delete",
+              "default": true
+            }
+          ]
+        },
+        {
+          "key": "setting.user_role",
+          "label": "User Role",
+          "default": true,
+          "children": [
+            {
+              "key": "setting.user_role.view",
+              "label": "View List",
+              "default": true
+            },
+            {
+              "key": "setting.user_role.tambah",
+              "label": "Tambah",
+              "default": true
+            },
+            {
+              "key": "setting.user_role.edit",
+              "label": "Edit",
+              "default": true
+            },
+            {
+              "key": "setting.user_role.delete",
+              "label": "Delete",
+              "default": true
+            }
+          ]
+        },
+        {
+          "key": "setting.kategori_pengaduan",
+          "label": "Kategori Pengaduan",
+          "default": true,
+          "children": [
+            {
+              "key": "setting.kategori_pengaduan.view",
+              "label": "View List",
+              "default": true
+            },
+            {
+              "key": "setting.kategori_pengaduan.tambah",
+              "label": "Tambah",
+              "default": true
+            },
+            {
+              "key": "setting.kategori_pengaduan.edit",
+              "label": "Edit",
+              "default": true
+            },
+            {
+              "key": "setting.kategori_pengaduan.delete",
+              "label": "Delete",
+              "default": true
+            }
+          ]
+        },
+        {
+          "key": "setting.kategori_pelayanan",
+          "label": "Kategori Pelayanan Surat",
+          "default": true,
+          "children": [
+            {
+              "key": "setting.kategori_pelayanan.view",
+              "label": "View List",
+              "default": true
+            },
+            {
+              "key": "setting.kategori_pelayanan.detail",
+              "label": "View Detail",
+              "default": true
+            },
+            {
+              "key": "setting.kategori_pelayanan.tambah",
+              "label": "Tambah",
+              "default": true
+            },
+            {
+              "key": "setting.kategori_pelayanan.edit",
+              "label": "Edit",
+              "default": true
+            },
+            {
+              "key": "setting.kategori_pelayanan.delete",
+              "label": "Delete",
+              "default": true
+            }
+          ]
+        },
+        {
+          "key": "setting.desa",
+          "label": "Desa",
+          "default": true,
+          "children": [
+            {
+              "key": "setting.desa.view",
+              "label": "View List",
+              "default": true
+            },
+            {
+              "key": "setting.desa.edit",
+              "label": "Edit",
+              "default": true
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "key": "api_key",
+      "label": "API Key",
+      "default": true,
+      "children": [
+        {
+          "key": "api_key.view",
+          "label": "View List",
+          "default": true
+        }
+      ]
+    },
+    {
+      "key": "credential",
+      "label": "Credential",
+      "default": true,
+      "children": [
+        {
+          "key": "credential.view",
+          "label": "View List",
+          "default": true
+        }
+      ]
+    }
+  ]
+}

src/pages/scr/dashboard/dashboard_layout.tsx

@@ -35,6 +35,7 @@ import {
   IconUsersGroup,
 } from "@tabler/icons-react";
 import type { User } from "generated/prisma";
+import type { JsonValue } from "generated/prisma/runtime/library";
 import { useEffect, useState } from "react";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
 
@@ -212,36 +213,54 @@ function HostView() {
 function NavigationDashboard() {
   const navigate = useNavigate();
   const location = useLocation();
+  const [permissions, setPermissions] = useState<JsonValue[]>([]);
+
+  useEffect(() => {
+    async function fetchPermissions() {
+      const { data } = await apiFetch.api.user.find.get();
+      if (Array.isArray(data?.permissions)) {
+        setPermissions(data.permissions);
+      } else {
+        setPermissions([]);
+      }
+    }
+    fetchPermissions();
+  }, []);
 
   const isActive = (path: keyof typeof clientRoute) =>
     location.pathname.startsWith(clientRoute[path]);
 
   const navItems = [
     {
+      key: "dashboard",
       path: "/scr/dashboard/dashboard-home",
       icon: <IconDashboard size={20} />,
       label: "Dashboard Overview",
       description: "Quick summary and insights",
     },
     {
+      key: "pengaduan",
       path: "/scr/dashboard/pengaduan/list",
       icon: <IconMessageReport size={20} />,
       label: "Pengaduan Warga",
       description: "Manage pengaduan warga",
     },
     {
+      key: "pelayanan",
       path: "/scr/dashboard/pelayanan-surat/list-pelayanan",
       icon: <IconFileCertificate size={20} />,
       label: "Pelayanan Surat",
       description: "Manage pelayanan surat",
     },
     {
+      key: "warga",
       path: "/scr/dashboard/warga/list-warga",
       icon: <IconUsersGroup size={20} />,
       label: "Warga",
       description: "Manage warga",
     },
     {
+      key: "setting",
       path: "/scr/dashboard/setting/detail-setting",
       icon: <IconSettings size={20} />,
       label: "Setting",
@@ -249,12 +268,14 @@ function NavigationDashboard() {
         "Manage setting (category pengaduan dan pelayanan surat, desa, etc)",
     },
     {
+      key: "api_key",
       path: "/scr/dashboard/apikey/apikey",
       icon: <IconKey size={20} />,
       label: "API Key Manager",
       description: "Create and manage API keys",
     },
     {
+      key: "credential",
       path: "/scr/dashboard/credential/credential",
       icon: <IconLock size={20} />,
       label: "Credentials",
@@ -264,7 +285,7 @@ function NavigationDashboard() {
 
   return (
     <Stack gap="xs" p="sm">
-      {navItems.map((item) => (
+      {navItems.filter((item) => permissions.includes(item.key)).map((item) => (
         <NavLink
           key={item.path}
           active={isActive(item.path as keyof typeof clientRoute)}

src/pages/scr/dashboard/pelayanan-surat/detail_pelayanan_page.tsx

@@ -1,6 +1,8 @@
+import ModalSurat from "@/components/ModalSurat";
 import notification from "@/components/notificationGlobal";
 import apiFetch from "@/lib/apiFetch";
 import {
+  Anchor,
   Badge,
   Button,
   Card,
@@ -29,6 +31,7 @@ import {
   IconUser
 } from "@tabler/icons-react";
 import type { User } from "generated/prisma";
+import type { JsonValue } from "generated/prisma/runtime/library";
 import _ from "lodash";
 import { useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
@@ -73,11 +76,18 @@ function DetailDataPengajuan({ data, syaratDokumen, dataText, onAction }: { data
   const [keterangan, setKeterangan] = useState("");
   const [host, setHost] = useState<User | null>(null);
   const [noSurat, setNoSurat] = useState("");
+  const [openedPreview, setOpenedPreview] = useState(false);
+  const [permissions, setPermissions] = useState<JsonValue[]>([]);
 
   useEffect(() => {
     async function fetchHost() {
       const { data } = await apiFetch.api.user.find.get();
       setHost(data?.user ?? null);
+
+      if (data?.permissions && Array.isArray(data.permissions)) {
+        const onlySetting = data.permissions.filter((p: any) => p.startsWith("pelayanan"));
+        setPermissions(onlySetting);
+      }
     }
     fetchHost();
   }, []);
@@ -169,6 +179,11 @@ function DetailDataPengajuan({ data, syaratDokumen, dataText, onAction }: { data
           )}
         </Stack>
       </Modal>
+      {
+        data?.status == "selesai" &&
+        (<ModalSurat open={openedPreview} onClose={() => setOpenedPreview(false)} surat={data?.idSurat} />)
+      }
+
 
       <Card
         radius="md"
@@ -224,13 +239,17 @@ function DetailDataPengajuan({ data, syaratDokumen, dataText, onAction }: { data
                     spacing="sm"
                     pt={10}
                     icon={
-                      <ThemeIcon color="green" size={20} radius="xl">
+                      <ThemeIcon variant="default" size={20} radius="xl">
                         <IconCheck size={13} />
                       </ThemeIcon>
                     }
                   >
                     {syaratDokumen?.map((v: any) => (
-                      <List.Item key={v.id}>{v.jenis}</List.Item>
+                      <List.Item key={v.id}>
+                        <Anchor href="https://mantine.dev/" target="_blank">
+                          {v.jenis}
+                        </Anchor>
+                      </List.Item>
                     ))}
                   </List>
                 </Flex>
@@ -264,6 +283,7 @@ function DetailDataPengajuan({ data, syaratDokumen, dataText, onAction }: { data
                 data?.status === "antrian" ? (
                   <Group justify="center" grow>
                     <Button
+                      disabled={!permissions.includes("pelayanan.antrian.tolak")}
                       variant="light"
                       onClick={() => {
                         setCatModal("tolak");
@@ -273,6 +293,7 @@ function DetailDataPengajuan({ data, syaratDokumen, dataText, onAction }: { data
                       Tolak
                     </Button>
                     <Button
+                      disabled={!permissions.includes("pelayanan.antrian.terima")}
                       variant="filled"
                       onClick={() => {
                         setCatModal("terima");
@@ -285,6 +306,7 @@ function DetailDataPengajuan({ data, syaratDokumen, dataText, onAction }: { data
                 ) : data?.status === "diterima" ? (
                   <Group justify="center" grow>
                     <Button
+                      disabled={!permissions.includes("pelayanan.diterima.tolak")}
                       variant="light"
                       onClick={() => {
                         setCatModal("tolak");
@@ -294,6 +316,7 @@ function DetailDataPengajuan({ data, syaratDokumen, dataText, onAction }: { data
                       Tolak
                     </Button>
                     <Button
+                      disabled={!permissions.includes("pelayanan.diterima.setujui")}
                       variant="filled"
                       onClick={() => {
                         setCatModal("terima");
@@ -307,15 +330,9 @@ function DetailDataPengajuan({ data, syaratDokumen, dataText, onAction }: { data
                   <Group justify="center" grow>
                     <Button
                       variant="light"
-                      onClick={() => { }}
+                      onClick={() => setOpenedPreview(!openedPreview)}
                     >
-                      Lihat Surat
-                    </Button>
-                    <Button
-                      variant="light"
-                      onClick={() => { }}
-                    >
-                      Download
+                      Surat
                     </Button>
                   </Group>
                 )

src/pages/scr/dashboard/pelayanan-surat/list_pelayanan_page.tsx

@@ -47,10 +47,14 @@ export default function PelayananSuratListPage() {
 
 function TabListPelayananSurat({ status }: { status: string }) {
   const navigate = useNavigate();
-  const dataCount = useSwr("/pelayanan-surat/count", () =>
+  const { data, mutate, isLoading } = useSwr("/pelayanan-surat/count", () =>
     apiFetch.api.pelayanan.count.get().then((res) => res.data),
   );
 
+  useShallowEffect(() => {
+    mutate();
+  }, []);
+
   return (
     <Tabs defaultValue={status || "semua"} color="teal">
       <Tabs.List grow>
@@ -60,7 +64,7 @@ function TabListPelayananSurat({ status }: { status: string }) {
             navigate("?status=semua");
           }}
         >
-          Semua ({dataCount?.data?.semua || 0})
+          Semua ({data?.semua || 0})
         </Tabs.Tab>
         <Tabs.Tab
           value="antrian"
@@ -68,7 +72,7 @@ function TabListPelayananSurat({ status }: { status: string }) {
             navigate("?status=antrian");
           }}
         >
-          Antrian ({dataCount?.data?.antrian || 0})
+          Antrian ({data?.antrian || 0})
         </Tabs.Tab>
         <Tabs.Tab
           value="diterima"
@@ -76,15 +80,7 @@ function TabListPelayananSurat({ status }: { status: string }) {
             navigate("?status=diterima");
           }}
         >
-          Diterima ({dataCount?.data?.diterima || 0})
-        </Tabs.Tab>
-        <Tabs.Tab
-          value="dikerjakan"
-          onClick={() => {
-            navigate("?status=dikerjakan");
-          }}
-        >
-          Dikerjakan ({dataCount?.data?.dikerjakan || 0})
+          Diterima ({data?.diterima || 0})
         </Tabs.Tab>
         <Tabs.Tab
           value="selesai"
@@ -92,7 +88,7 @@ function TabListPelayananSurat({ status }: { status: string }) {
             navigate("?status=selesai");
           }}
         >
-          Selesai ({dataCount?.data?.selesai || 0})
+          Selesai ({data?.selesai || 0})
         </Tabs.Tab>
         <Tabs.Tab
           value="ditolak"
@@ -100,7 +96,7 @@ function TabListPelayananSurat({ status }: { status: string }) {
             navigate("?status=ditolak");
           }}
         >
-          Ditolak ({dataCount?.data?.ditolak || 0})
+          Ditolak ({data?.ditolak || 0})
         </Tabs.Tab>
       </Tabs.List>
     </Tabs>
@@ -179,7 +175,7 @@ function ListPelayananSurat({ status }: { status: StatusKey }) {
           }
         />
       </Group>
-      {list?.length === 0 ? (
+      {Array.isArray(list) && list?.length === 0 ? (
         <Flex justify="center" align="center" py={"xl"}>
           <Stack gap={4} align="center">
             <IconFileSad size={32} color="gray" />
@@ -189,7 +185,7 @@ function ListPelayananSurat({ status }: { status: StatusKey }) {
           </Stack>
         </Flex>
       ) : (
-        list?.map((v: any) => (
+        Array.isArray(list) && list?.map((v: any) => (
           <Card
             key={v.id}
             radius="lg"

src/pages/scr/dashboard/pengaduan/detail_page.tsx

@@ -31,6 +31,7 @@ import {
   IconUser,
 } from "@tabler/icons-react";
 import type { User } from "generated/prisma";
+import type { JsonValue } from "generated/prisma/runtime/library";
 import _ from "lodash";
 import { useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
@@ -77,11 +78,17 @@ function DetailDataPengaduan({ data, onAction }: { data: any, onAction: () => vo
     useDisclosure(false);
   const [keterangan, setKeterangan] = useState("");
   const [host, setHost] = useState<User | null>(null);
+  const [permissions, setPermissions] = useState<JsonValue[]>([]);
 
   useEffect(() => {
     async function fetchHost() {
       const { data } = await apiFetch.api.user.find.get();
       setHost(data?.user ?? null);
+
+      if (data?.permissions && Array.isArray(data.permissions)) {
+        const onlySetting = data.permissions.filter((p: any) => p.startsWith("pengaduan"));
+        setPermissions(onlySetting);
+      }
     }
     fetchHost();
   }, []);
@@ -256,9 +263,18 @@ function DetailDataPengaduan({ data, onAction }: { data: any, onAction: () => vo
                     <IconPhotoScan size={20} />
                     <Text size="md">Gambar</Text>
                   </Group>
-                  <Anchor href="#" onClick={() => { }}>
-                    Lihat Gambar
-                  </Anchor>
+                  {
+                    data?.image != null && data?.image != ""
+                      ?
+                      <Anchor href="#" onClick={() => { }}>
+                        Lihat Gambar
+                      </Anchor>
+                      :
+                      <Text size="md" c="white">
+                        -
+                      </Text>
+                  }
+
                 </Flex>
               </Stack>
             </Grid.Col>
@@ -294,6 +310,7 @@ function DetailDataPengaduan({ data, onAction }: { data: any, onAction: () => vo
                   <Group justify="center" grow>
                     <Button
                       variant="light"
+                      disabled={!permissions.includes("pengaduan.antrian.tolak")}
                       onClick={() => {
                         setCatModal("tolak");
                         open();
@@ -303,6 +320,7 @@ function DetailDataPengaduan({ data, onAction }: { data: any, onAction: () => vo
                     </Button>
                     <Button
                       variant="filled"
+                      disabled={!permissions.includes("pengaduan.antrian.terima")}
                       onClick={() => {
                         setCatModal("terima");
                         open();
@@ -315,6 +333,7 @@ function DetailDataPengaduan({ data, onAction }: { data: any, onAction: () => vo
                   <Group justify="center" grow>
                     <Button
                       variant="filled"
+                      disabled={!permissions.includes("pengaduan.diterima.dikerjakan")}
                       onClick={() => {
                         setCatModal("terima");
                         open();
@@ -327,6 +346,7 @@ function DetailDataPengaduan({ data, onAction }: { data: any, onAction: () => vo
                   <Group justify="center" grow>
                     <Button
                       variant="filled"
+                      disabled={!permissions.includes("pengaduan.dikerjakan.selesai")}
                       onClick={() => {
                         setCatModal("terima");
                         open();

src/pages/scr/dashboard/setting/detail_setting_page.tsx

@@ -2,32 +2,92 @@ import DesaSetting from "@/components/DesaSetting";
 import KategoriPelayananSurat from "@/components/KategoriPelayananSurat";
 import KategoriPengaduan from "@/components/KategoriPengaduan";
 import ProfileUser from "@/components/ProfileUser";
+import UserRoleSetting from "@/components/UserRoleSetting";
 import UserSetting from "@/components/UserSetting";
+import apiFetch from "@/lib/apiFetch";
 import {
-  Button,
   Card,
   Container,
-  Divider,
-  Flex,
   Grid,
-  NavLink,
-  Stack,
-  Table,
-  Title,
+  NavLink
 } from "@mantine/core";
 import {
   IconBuildingBank,
   IconCategory2,
   IconMailSpark,
   IconUserCog,
-  IconUsersGroup,
+  IconUserScreen,
+  IconUsersGroup
 } from "@tabler/icons-react";
+import type { JsonValue } from "generated/prisma/runtime/library";
+import { useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
 
 export default function DetailSettingPage() {
   const { search } = useLocation();
   const query = new URLSearchParams(search);
   const type = query.get("type");
+  const [permissions, setPermissions] = useState<JsonValue[]>([]);
+
+  useEffect(() => {
+    async function fetchPermissions() {
+      const { data } = await apiFetch.api.user.find.get();
+      if (Array.isArray(data?.permissions)) {
+        const onlySetting = data.permissions.filter((p: any) => p.startsWith("setting"));
+        setPermissions(onlySetting);
+      } else {
+        setPermissions([]);
+      }
+    }
+    fetchPermissions();
+  }, []);
+
+
+  const navItems = [
+    {
+      key: "setting.profile",
+      path: "profile",
+      icon: <IconUserCog size={20} />,
+      label: "Profile",
+      description: "Manage profile settings",
+    },
+    {
+      key: "setting.user",
+      path: "user",
+      icon: <IconUsersGroup size={20} />,
+      label: "User",
+      description: "Manage user accounts",
+    },
+    {
+      key: "setting.user_role",
+      path: "role",
+      icon: <IconUserScreen size={20} />,
+      label: "Role",
+      description: "Manage user roles",
+    },
+    {
+      key: "setting.kategori_pengaduan",
+      path: "cat-pengaduan",
+      icon: <IconCategory2 size={20} />,
+      label: "Kategori Pengaduan",
+      description: "Manage complaint categories",
+    },
+    {
+      key: "setting.kategori_pelayanan",
+      path: "cat-pelayanan",
+      icon: <IconMailSpark size={20} />,
+      label: "Kategori Pelayanan Surat",
+      description: "Manage letter service categories",
+    },
+    {
+      key: "setting.desa",
+      path: "desa",
+      icon: <IconBuildingBank size={20} />,
+      label: "Desa",
+      description: "Manage desa information",
+    }
+
+  ];
 
   return (
     <Container size="xl" py="xl" w={"100%"}>
@@ -44,36 +104,17 @@ export default function DetailSettingPage() {
               boxShadow: "0 0 20px rgba(0,255,200,0.08)",
             }}
           >
-            <NavLink
-              href={`?type=profile`}
-              label="Profile"
-              leftSection={<IconUserCog size={16} stroke={1.5} />}
-              active={type === "profile" || !type}
-            />
-            <NavLink
-              href={`?type=user`}
-              label="User"
-              leftSection={<IconUsersGroup size={16} stroke={1.5} />}
-              active={type === "user"}
-            />
-            <NavLink
-              href={`?type=cat-pengaduan`}
-              label="Kategori Pengaduan"
-              leftSection={<IconCategory2 size={16} stroke={1.5} />}
-              active={type === "cat-pengaduan"}
-            />
-            <NavLink
-              href={`?type=cat-pelayanan`}
-              label="Kategori Pelayanan Surat"
-              leftSection={<IconMailSpark size={16} stroke={1.5} />}
-              active={type === "cat-pelayanan"}
-            />
-            <NavLink
-              href={`?type=desa`}
-              label="Desa"
-              leftSection={<IconBuildingBank size={16} stroke={1.5} />}
-              active={type === "desa"}
-            />
+            {
+              navItems.filter((item) => permissions.includes(item.key)).map((item) => (
+                <NavLink
+                  key={item.key}
+                  href={'?type=' + item.path}
+                  label={item.label}
+                  leftSection={item.icon}
+                  active={type === item.path || (!type && item.path === 'profile')}
+                />
+              ))
+            }
           </Card>
         </Grid.Col>
         <Grid.Col span={9}>
@@ -89,15 +130,17 @@ export default function DetailSettingPage() {
             }}
           >
             {type === "cat-pengaduan" ? (
-              <KategoriPengaduan />
+              <KategoriPengaduan permissions={permissions.filter((p) => typeof p === 'string' && p.startsWith("setting.kategori_pengaduan"))} />
             ) : type === "cat-pelayanan" ? (
-              <KategoriPelayananSurat />
+              <KategoriPelayananSurat permissions={permissions.filter((p) => typeof p === 'string' && p.startsWith("setting.kategori_pelayanan"))} />
             ) : type === "desa" ? (
-              <DesaSetting />
+              <DesaSetting permissions={permissions.filter((p) => typeof p === 'string' && p.startsWith("setting.desa"))} />
             ) : type === "user" ? (
-              <UserSetting />
+              <UserSetting permissions={permissions.filter((p) => typeof p === 'string' && p.startsWith("setting.user."))} />
+            ) : type === "role" ? (
+              <UserRoleSetting permissions={permissions.filter((p) => typeof p === 'string' && p.startsWith("setting.user_role"))} />
             ) : (
-              <ProfileUser />
+              <ProfileUser permissions={permissions.filter((p) => typeof p === 'string' && p.startsWith("setting.profile"))} />
             )}
           </Card>
         </Grid.Col>

src/pages/scr/dashboard/warga/list_warga_page.tsx

@@ -78,12 +78,12 @@ export default function ListWargaPage() {
             </Table.Thead>
             <Table.Tbody>
               {
-                list?.length === 0 ? (
+                Array.isArray(list) && list?.length === 0 ? (
                   <Table.Tr>
                     <Table.Td colSpan={3} align="center">Tidak ada data</Table.Td>
                   </Table.Tr>
                 ) : (
-                  list?.map((item, i) => (
+                  Array.isArray(list) && list?.map((item, i) => (
                     <Table.Tr key={i}>
                       <Table.Td>{item.name}</Table.Td>
                       <Table.Td>{item.phone}</Table.Td>

src/server/lib/detect-type-of-file.ts

@@ -0,0 +1,25 @@
+function getExtension(fileName: string): string | null {
+   if (!fileName || typeof fileName !== "string") return null;
+
+   const parts = fileName.split(".");
+   if (parts.length <= 1) return null;
+
+   return parts.pop()?.toLowerCase() || null;
+}
+
+
+export function detectFileType(fileName: string) {
+   const ext = getExtension(fileName);
+
+   if (!ext) return { ext: null, type: "unknown" };
+
+   if (["jpg", "jpeg", "png", "gif", "webp", "bmp"].includes(ext)) {
+      return { ext, type: "image" };
+   }
+
+   if (ext === "pdf") {
+      return { ext, type: "pdf" };
+   }
+
+   return { ext, type: "other" };
+}

src/server/lib/rename-file.ts

@@ -0,0 +1,12 @@
+import { v4 as uuidv4 } from "uuid";
+import { mimeToExtension } from "./mimetypeToExtension";
+
+export function renameFile({ oldFile, newName }: { oldFile: File; newName: string }) {
+   const ext = mimeToExtension(oldFile.type)
+   const nameFix = newName == 'random' ? `${uuidv4()}.${ext}` : newName
+
+   return new File([oldFile], nameFix, {
+      type: oldFile.type,
+      lastModified: oldFile.lastModified,
+   });
+}

src/server/lib/seafile.ts

@@ -94,7 +94,6 @@ export async function fetchWithAuth(config: Config, url: string, options: Reques
       } catch {
          console.error('🔍 Could not read response body');
       }
-      process.exit(1);
    }
    return response;
 }
@@ -128,14 +127,18 @@ export async function listFiles(config: Config): Promise<{ name: string }[]> {
    }
 }
 
-export async function catFile(config: Config, fileName: string): Promise<string> {
-   const downloadUrlResponse = await fetchWithAuth(config, `${config.URL}/${config.REPO}/file/?p=/${fileName}`);
+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, '');
-   const content = await (await fetchWithAuth(config, downloadUrl)).text();
-   return content
+
+   // 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): Promise<string> {
+export async function uploadFile(config: Config, file: File, folder: string): Promise<string> {
    const remoteName = path.basename(file.name);
 
    // 1. Dapatkan upload link (pakai Authorization)
@@ -148,7 +151,7 @@ export async function uploadFile(config: Config, file: File): Promise<string> {
    // 2. Siapkan form-data
    const formData = new FormData();
    formData.append("parent_dir", "/");
-   formData.append("relative_path", "syarat-dokumen"); // tanpa slash di akhir
+   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
@@ -159,7 +162,7 @@ export async function uploadFile(config: Config, file: File): Promise<string> {
 
    const text = await res.text();
 
-   if (!res.ok) throw new Error(`Upload failed: ${text}`);
+   if (!res.ok) return 'gagal'
    return `✅ Uploaded ${file.name} successfully`;
 }
 
@@ -228,10 +231,10 @@ export async function uploadFileToFolder(config: Config, base64File: { name: str
 }
 
 
+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' });
 
-
-export async function removeFile(config: Config, fileName: string): Promise<string> {
-   await fetchWithAuth(config, `${config.URL}/${config.REPO}/file/?p=/${fileName}`, { method: 'DELETE' });
+   if (!res.ok) return 'gagal menghapus file';
    return `🗑️  Removed ${fileName}`
 }
 

src/server/routes/pelayanan_surat_route.ts

@@ -170,6 +170,17 @@ const PelayananRoute = new Elysia({
          }
       })
 
+      const dataSurat = await prisma.suratPelayanan.findFirst({
+         where: {
+            idPengajuanLayanan: data?.id,
+            isActive: true
+         },
+         select: {
+            id: true,
+            idCategory: true,
+         }
+      })
+
       const dataSyarat = await prisma.syaratDokumenPelayanan.findMany({
          where: {
             idPengajuanLayanan: data?.id,
@@ -266,6 +277,7 @@ const PelayananRoute = new Elysia({
          status: data?.status,
          createdAt: data?.createdAt,
          updatedAt: data?.updatedAt,
+         idSurat: dataSurat?.id,
       }
 
       const datafix = {
@@ -275,7 +287,6 @@ const PelayananRoute = new Elysia({
          syaratDokumen: dataSyaratFix,
          dataText: dataTextFix,
       }
-
       return datafix
    }, {
       query: t.Object({
@@ -306,7 +317,7 @@ const PelayananRoute = new Elysia({
          })
 
          if (!cariCategory) {
-            throw new Error("kategori pelayanan surat tidak ditemukan")
+            return { success: false, message: 'kategori pelayanan surat tidak ditemukan' }
          } else {
             idCategoryFix = cariCategory.id
          }

src/server/routes/pengaduan_route.ts

@@ -6,7 +6,8 @@ import { mimeToExtension } from "../lib/mimetypeToExtension"
 import { generateNoPengaduan } from "../lib/no-pengaduan"
 import { normalizePhoneNumber } from "../lib/normalizePhone"
 import { prisma } from "../lib/prisma"
-import { catFile, defaultConfigSF, testConnection, uploadFile, uploadFileBase64 } from "../lib/seafile"
+import { renameFile } from "../lib/rename-file"
+import { catFile, defaultConfigSF, removeFile, uploadFile, uploadFileBase64 } from "../lib/seafile"
 
 const PengaduanRoute = new Elysia({
    prefix: "pengaduan",
@@ -106,69 +107,63 @@ const PengaduanRoute = new Elysia({
 
    // --- PENGADUAN ---
    .post("/create", async ({ body }) => {
-      const { judulPengaduan, detailPengaduan, lokasi, namaGambar, kategoriId, wargaId, noTelepon } = body
+      const { judulPengaduan, detailPengaduan, lokasi, namaGambar, kategoriId, namaWarga, noTelepon } = body
       let imageFix = namaGambar
       const noPengaduan = await generateNoPengaduan()
       let idCategoryFix = kategoriId
-      let idWargaFix = wargaId
-      const category = await prisma.categoryPengaduan.findUnique({
-         where: {
-            id: kategoriId,
-         }
-      })
+      let idWargaFix = ""
 
-      if (!category) {
-         const cariCategory = await prisma.categoryPengaduan.findFirst({
+      if (idCategoryFix) {
+         const category = await prisma.categoryPengaduan.findUnique({
             where: {
-               name: kategoriId,
+               id: idCategoryFix,
             }
          })
 
-         if (!cariCategory) {
-            idCategoryFix = "lainnya"
-         } else {
-            idCategoryFix = cariCategory.id
-         }
-
-      }
-
-      const warga = await prisma.warga.findUnique({
-         where: {
-            id: wargaId,
-         }
-      })
-
-      if (!warga) {
-         const nomorHP = normalizePhoneNumber({ phone: noTelepon })
-         const cariWarga = await prisma.warga.findUnique({
-            where: {
-               phone: nomorHP,
-            }
-         })
-
-         if (!cariWarga) {
-            const wargaCreate = await prisma.warga.create({
-               data: {
-                  name: wargaId,
-                  phone: nomorHP,
-               },
-               select: {
-                  id: true
+         if (!category) {
+            const cariCategory = await prisma.categoryPengaduan.findFirst({
+               where: {
+                  name: kategoriId,
                }
             })
-            idWargaFix = wargaCreate.id
-         } else {
-            idWargaFix = cariWarga.id
-         }
 
+            if (!cariCategory) {
+               idCategoryFix = "lainnya"
+            } else {
+               idCategoryFix = cariCategory.id
+            }
+
+         }
+      } else {
+         idCategoryFix = "lainnya"
       }
 
+      const nomorHP = normalizePhoneNumber({ phone: noTelepon })
+      const dataWarga = await prisma.warga.upsert({
+         where: {
+            phone: nomorHP
+         },
+         create: {
+            name: namaWarga,
+            phone: nomorHP,
+         },
+         update: {
+            name: namaWarga,
+         },
+         select: {
+            id: true
+         }
+      })
+
+      idWargaFix = dataWarga.id
+
+
       const pengaduan = await prisma.pengaduan.create({
          data: {
             title: judulPengaduan,
             detail: detailPengaduan,
             idCategory: idCategoryFix,
-            idWarga: idWargaFix,
+            idWarga: idWargaFix || "",
             location: lokasi,
             image: imageFix,
             noPengaduan,
@@ -193,48 +188,39 @@ const PengaduanRoute = new Elysia({
    }, {
       body: t.Object({
          judulPengaduan: t.String({
-            minLength: 3,
-            error: "Judul pengaduan harus diisi dan minimal 3 karakter",
+            error: "Judul pengaduan harus diisi",
             examples: ["Sampah menumpuk di depan rumah"],
             description: "Judul singkat dari pengaduan warga"
          }),
 
          detailPengaduan: t.String({
-            minLength: 5,
-            error: "Deskripsi pengaduan harus diisi dan minimal 10 karakter",
+            error: "Deskripsi pengaduan harus diisi",
             examples: ["Terdapat sampah yang menumpuk selama seminggu di depan rumah saya"],
             description: "Penjelasan lebih detail mengenai pengaduan"
          }),
 
          lokasi: t.String({
-            minLength: 5,
             error: "Lokasi pengaduan harus diisi",
             examples: ["Jl. Raya No. 1, RT 01 RW 02, Darmasaba"],
             description: "Alamat atau titik lokasi pengaduan"
          }),
 
-         namaGambar: t.String({
-            optional: true,
+         namaGambar: t.Optional(t.String({
             examples: ["sampah.jpg"],
             description: "Nama file gambar yang telah diupload (opsional)"
-         }),
+         })),
 
-         kategoriId: t.String({
-            minLength: 1,
-            error: "ID kategori pengaduan harus diisi",
+         kategoriId: t.Optional(t.String({
             examples: ["kebersihan"],
             description: "ID atau nama kategori pengaduan (contoh: kebersihan, keamanan, lainnya)"
-         }),
+         })),
 
-         wargaId: t.String({
-            minLength: 1,
-            error: "ID warga harus diisi",
+         namaWarga: t.Optional(t.String({
             examples: ["budiman"],
-            description: "ID unik warga yang melapor (jika sudah terdaftar)"
-         }),
+            description: "Nama warga yang melapor"
+         })),
 
          noTelepon: t.String({
-            minLength: 1,
             error: "Nomor telepon harus diisi",
             examples: ["08123456789", "+628123456789"],
             description: "Nomor telepon warga pelapor"
@@ -243,23 +229,7 @@ const PengaduanRoute = new Elysia({
 
       detail: {
          summary: "Buat Pengaduan Warga",
-         description: `
-Endpoint ini digunakan untuk membuat data pengaduan (laporan) baru dari warga.
-
-Alur proses:
-1. Sistem memvalidasi kategori pengaduan berdasarkan ID.
-   - Jika ID kategori tidak ditemukan, sistem akan mencari berdasarkan nama kategori.
-   - Jika tetap tidak ditemukan, kategori akan diset menjadi "lainnya".
-2. Sistem memvalidasi data warga berdasarkan ID.
-   - Jika warga tidak ditemukan, sistem akan mencari berdasarkan nomor telepon.
-   - Jika tetap tidak ditemukan, data warga baru akan dibuat secara otomatis.
-3. Sistem menghasilkan nomor pengaduan unik (noPengaduan).
-4. Data pengaduan akan disimpan ke database, termasuk judul, detail, lokasi, gambar (opsional), dan data warga.
-5. Sistem juga membuat catatan riwayat awal pengaduan dengan deskripsi "Pengaduan dibuat".
-
-Respon:
-- success: true jika pengaduan berhasil dibuat.
-- message: berisi pesan sukses dan nomor pengaduan yang dapat digunakan untuk melacak status pengaduan.`,
+         description: `Endpoint ini digunakan untuk membuat data pengaduan (laporan) baru dari warga`,
          tags: ["mcp"]
       }
    })
@@ -515,31 +485,39 @@ Respon:
       }
    })
    .post("/upload", async ({ body }) => {
-      const { file } = body;
+      const { file, folder } = body;
 
       // Validasi file
       if (!file) {
          return { success: false, message: "File tidak ditemukan" };
       }
 
+      // Rename file
+      const renamedFile = renameFile({ oldFile: file, newName: 'random' });
+
+
       // Upload ke Seafile (pastikan uploadFile menerima Blob atau ArrayBuffer)
       // const buffer = await file.arrayBuffer();
-      const result = await uploadFile(defaultConfigSF, file);
+      const result = await uploadFile(defaultConfigSF, renamedFile, folder);
+      if (result == 'gagal') {
+         return { success: false, message: "Upload gagal" };
+      }
 
       return {
          success: true,
          message: "Upload berhasil",
-         filename: file.name,
-         size: file.size,
+         filename: renamedFile.name,
+         size: renamedFile.size,
          seafileResult: result
       };
    }, {
       body: t.Object({
-         file: t.File({ format: "binary" })
+         file: t.Any(),
+         folder: t.String(),
       }),
       detail: {
-         summary: "Upload File",
-         description: "Tool untuk upload file ke Seafile",
+         summary: "Upload File (FormData)",
+         description: "Tool untuk upload file ke folder tujuan dengan memakai FormData",
          tags: ["mcp"],
          consumes: ["multipart/form-data"]
       },
@@ -714,33 +692,63 @@ Respon:
       }
    })
    .get("/image", async ({ query, set }) => {
-      const { fileName } = query
+      const { fileName, folder } = query;
 
-      const connect = await testConnection(defaultConfigSF)
-      console.log({ connect })
+      const hasil = await catFile(defaultConfigSF, folder, fileName);
 
-      const hasil = await catFile(defaultConfigSF, fileName)
-      console.log('hasilnya', hasil)
-      // Tentukan tipe MIME berdasarkan ekstensi
       const ext = fileName.split(".").pop()?.toLowerCase();
-      const mime =
-         ext === "jpg" || ext === "jpeg"
-            ? "image/jpeg"
-            : ext === "png"
-               ? "image/png"
-               : "application/octet-stream";
+      let mime = "application/octet-stream"; // default
+
+      if (["jpg", "jpeg"].includes(ext!)) mime = "image/jpeg";
+      if (["png"].includes(ext!)) mime = "image/png";
+      if (["gif"].includes(ext!)) mime = "image/gif";
+      if (["webp"].includes(ext!)) mime = "image/webp";
+      if (["svg"].includes(ext!)) mime = "image/svg+xml";
+      if (["pdf"].includes(ext!)) mime = "application/pdf";
 
       set.headers["Content-Type"] = mime;
+      set.headers["Content-Length"] = hasil.byteLength.toString();
+
       return new Response(hasil);
    }, {
       query: t.Object({
          fileName: t.String(),
+         folder: t.String()
       }),
       detail: {
-         summary: "Gambar Pengaduan Warga",
-         description: `tool untuk mendapatkan gambar pengaduan warga`,
+         summary: "View Gambar",
+         description: "tool untuk mendapatkan gambar",
       }
    })
+   .post("/delete-image", async ({ body }) => {
+      const { file, folder } = body;
+
+      // Validasi file
+      if (!file) {
+         return { success: false, message: "File tidak ditemukan" };
+      }
+
+      const result = await removeFile(defaultConfigSF, file, folder);
+      if (result == 'gagal') {
+         return { success: false, message: "Delete gagal" };
+      }
+
+      return {
+         success: true,
+         message: "Delete berhasil",
+      };
+   }, {
+      body: t.Object({
+         file: t.String(),
+         folder: t.String(),
+      }),
+      detail: {
+         summary: "Delete File",
+         description: "Tool untuk delete file Seafile",
+      },
+   })
+
+
    ;
 
 export default PengaduanRoute

src/server/routes/surat_route.ts

@@ -0,0 +1,65 @@
+import Elysia, { t } from "elysia";
+import { prisma } from "../lib/prisma";
+
+const SuratRoute = new Elysia({
+   prefix: "surat",
+   tags: ["surat"],
+})
+   .get("/detail", async ({ query }) => {
+      const { id } = query
+
+      const dataSurat = await prisma.suratPelayanan.findUnique({
+         where: {
+            id
+         },
+         select: {
+            id: true,
+            noSurat: true,
+            idCategory: true,
+            createdAt: true,
+            PelayananAjuan: {
+               select: {
+                  DataTextPelayanan: true,
+               }
+            },
+            CategoryPelayanan: {
+               select: {
+                  name: true,
+               }
+            }
+         }
+      })
+
+      const dataSetting = await prisma.configuration.findMany()
+
+      const toObject = (arr: any[]) =>
+         dataSetting.reduce((acc: any, item: any) => {
+            acc[item.id] = item.value;
+            return acc;
+         }, {});
+
+      return {
+         surat: {
+            id: dataSurat?.id,
+            idCategory: dataSurat?.idCategory,
+            nameCategory: dataSurat?.CategoryPelayanan?.name,
+            noSurat: dataSurat?.noSurat,
+            dataText: dataSurat?.PelayananAjuan?.DataTextPelayanan,
+            createdAt: dataSurat?.createdAt.toLocaleDateString("id-ID", { day: "numeric", month: "long", year: "numeric" }),
+         },
+         setting: toObject(dataSetting)
+      }
+
+   }, {
+      query: t.Object({
+         id: t.String({ minLength: 1, error: "id harus diisi" })
+      }),
+      detail: {
+         summary: "Detail Surat",
+         description: `tool untuk mendapatkan detail surat`,
+      }
+
+   })
+   ;
+
+export default SuratRoute

src/server/routes/test_pengaduan.ts

@@ -4,7 +4,8 @@ import { generateNoPengaduan } from "../lib/no-pengaduan";
 import { normalizePhoneNumber } from "../lib/normalizePhone";
 
 const TestPengaduanRoute = new Elysia({
-    prefix: "online-pengaduan"
+    prefix: "online-pengaduan",
+    tags: ["test"]
 })
     .get("/category", async () => {
         const data = await prisma.categoryPengaduan.findMany({
@@ -20,7 +21,6 @@ const TestPengaduanRoute = new Elysia({
             }
         })
 
-
         return { data }
     }, {
         detail: {
@@ -31,71 +31,61 @@ const TestPengaduanRoute = new Elysia({
     })
 
     .post("/create", async ({ body }) => {
-        const { judulPengaduan, detailPengaduan, lokasi, namaGambar, kategoriId, wargaId, noTelepon } = body
-        let imageFix = namaGambar
+        const { judulPengaduan, detailPengaduan, lokasi, kategoriId, noTelepon, image } = body
         const noPengaduan = await generateNoPengaduan()
         let idCategoryFix = kategoriId
-        let idWargaFix = wargaId
-        const category = await prisma.categoryPengaduan.findUnique({
-            where: {
-                id: kategoriId,
-            }
-        })
 
-        if (!category) {
-            const cariCategory = await prisma.categoryPengaduan.findFirst({
+        if (idCategoryFix) {
+            const category = await prisma.categoryPengaduan.findUnique({
                 where: {
-                    name: kategoriId,
+                    id: idCategoryFix,
                 }
             })
 
-            if (!cariCategory) {
-                idCategoryFix = "lainnya"
-            } else {
-                idCategoryFix = cariCategory.id
-            }
-
-        }
-
-        const warga = await prisma.warga.findUnique({
-            where: {
-                id: wargaId,
-            }
-        })
-
-        if (!warga) {
-            const nomorHP = normalizePhoneNumber({ phone: noTelepon })
-            const cariWarga = await prisma.warga.findUnique({
-                where: {
-                    phone: nomorHP,
-                }
-            })
-
-            if (!cariWarga) {
-                const wargaCreate = await prisma.warga.create({
-                    data: {
-                        name: wargaId,
-                        phone: nomorHP,
-                    },
-                    select: {
-                        id: true
+            if (!category) {
+                const cariCategory = await prisma.categoryPengaduan.findFirst({
+                    where: {
+                        name: kategoriId,
                     }
                 })
-                idWargaFix = wargaCreate.id
-            } else {
-                idWargaFix = cariWarga.id
-            }
 
+                if (!cariCategory) {
+                    idCategoryFix = "lainnya"
+                } else {
+                    idCategoryFix = cariCategory.id
+                }
+
+            }
+        } else {
+            idCategoryFix = "lainnya"
         }
 
+
+
+        const nomorHP = normalizePhoneNumber({ phone: "089697338821" })
+        const cariWarga = await prisma.warga.upsert({
+            where: {
+                phone: nomorHP,
+            },
+            create: {
+                name: "malik",
+                phone: nomorHP,
+            },
+            update: {
+                name: "malik",
+                phone: nomorHP,
+            },
+        })
+
+
         const pengaduan = await prisma.pengaduan.create({
             data: {
                 title: judulPengaduan,
                 detail: detailPengaduan,
                 idCategory: idCategoryFix,
-                idWarga: idWargaFix,
+                idWarga: cariWarga.id,
                 location: lokasi,
-                image: imageFix,
+                image: body.image || "",
                 noPengaduan,
             },
             select: {
@@ -117,69 +107,18 @@ const TestPengaduanRoute = new Elysia({
         return { success: true, message: 'pengaduan sudah dibuat dengan nomer ' + noPengaduan + ', nomer ini akan digunakan untuk mengakses pengaduan ini' }
     }, {
         body: t.Object({
-            judulPengaduan: t.String({
-                error: "Judul pengaduan harus diisi dan minimal 3 karakter",
-                examples: ["Sampah menumpuk di depan rumah"],
-                description: "Judul singkat dari pengaduan warga"
-            }),
-
-            detailPengaduan: t.String({
-                error: "Deskripsi pengaduan harus diisi dan minimal 10 karakter",
-                examples: ["Terdapat sampah yang menumpuk selama seminggu di depan rumah saya"],
-                description: "Penjelasan lebih detail mengenai pengaduan"
-            }),
-
-            lokasi: t.String({
-                error: "Lokasi pengaduan harus diisi",
-                examples: ["Jl. Raya No. 1, RT 01 RW 02, Darmasaba"],
-                description: "Alamat atau titik lokasi pengaduan"
-            }),
-
-            namaGambar: t.String({
-                optional: true,
-                examples: ["sampah.jpg"],
-                description: "Nama file gambar yang telah diupload (opsional)"
-            }),
-
-            kategoriId: t.String({
-                error: "ID kategori pengaduan harus diisi",
-                examples: ["kebersihan"],
-                description: "ID atau nama kategori pengaduan (contoh: kebersihan, keamanan, lainnya)"
-            }),
-
-            wargaId: t.String({
-                error: "ID warga harus diisi",
-                examples: ["budiman"],
-                description: "ID unik warga yang melapor (jika sudah terdaftar)"
-            }),
-
-            noTelepon: t.String({
-                error: "Nomor telepon harus diisi",
-                examples: ["08123456789", "+628123456789"],
-                description: "Nomor telepon warga pelapor"
-            }),
+            judulPengaduan: t.String(),
+            detailPengaduan: t.String(),
+            lokasi: t.String(),
+            kategoriId: t.String(),
+            noTelepon: t.Optional(t.String()),
+            image: t.Optional(t.String()),
         }),
 
         detail: {
             summary: "Buat Pengaduan Warga",
             description: `
-    Endpoint ini digunakan untuk membuat data pengaduan (laporan) baru dari warga.
-    
-    Alur proses:
-    1. Sistem memvalidasi kategori pengaduan berdasarkan ID.
-       - Jika ID kategori tidak ditemukan, sistem akan mencari berdasarkan nama kategori.
-       - Jika tetap tidak ditemukan, kategori akan diset menjadi "lainnya".
-    2. Sistem memvalidasi data warga berdasarkan ID.
-       - Jika warga tidak ditemukan, sistem akan mencari berdasarkan nomor telepon.
-       - Jika tetap tidak ditemukan, data warga baru akan dibuat secara otomatis.
-    3. Sistem menghasilkan nomor pengaduan unik (noPengaduan).
-    4. Data pengaduan akan disimpan ke database, termasuk judul, detail, lokasi, gambar (opsional), dan data warga.
-    5. Sistem juga membuat catatan riwayat awal pengaduan dengan deskripsi "Pengaduan dibuat".
-    
-    Respon:
-    - success: true jika pengaduan berhasil dibuat.
-    - message: berisi pesan sukses dan nomor pengaduan yang dapat digunakan untuk melacak status pengaduan.`,
-            tags: ["test"]
+Endpoint ini digunakan untuk membuat data pengaduan (laporan) baru dari warga.`
         }
     })
 

src/server/routes/user_route.ts

@@ -6,10 +6,16 @@ const UserRoute = new Elysia({
     prefix: "user",
     tags: ["user"],
 })
-    .get('/find', (ctx) => {
+    .get('/find', async (ctx) => {
         const { user } = ctx as any
+        const permissions = await prisma.role.findFirst({
+            where: { id: user?.roleId },
+            select: { permissions: true }
+        });
+
         return {
-            user: user as User
+            user: user as User,
+            permissions: permissions?.permissions || []
         }
     }, {
         detail: {
@@ -150,7 +156,14 @@ const UserRoute = new Elysia({
         }
     })
     .get("/role", async () => {
-        const data = await prisma.role.findMany()
+        const data = await prisma.role.findMany({
+            where: {
+                isActive: true
+            },
+            orderBy: {
+                name: "asc"
+            }
+        })
         return data
     }, {
         detail: {
@@ -182,5 +195,80 @@ const UserRoute = new Elysia({
             description: "delete user",
         }
     })
+    .post("role-create", async ({ body }) => {
+        const { name, permissions } = body;
+        const create = await prisma.role.create({
+            data: {
+                name,
+                permissions: permissions
+            }
+        });
+
+        return {
+            success: true,
+            message: "Role created successfully",
+        };
+    }, {
+        body: t.Object({
+            name: t.String({ minLength: 1, error: "name is required" }),
+            permissions: t.Any(),
+        }),
+        detail: {
+            summary: "create-role",
+            description: "create role",
+        }
+    })
+    .post("/role-update", async ({ body }) => {
+        const { id, name, permissions } = body;
+        const update = await prisma.role.update({
+            where: {
+                id
+            },
+            data: {
+                name,
+                permissions
+            }
+        });
+
+        return {
+            success: true,
+            message: "User role updated successfully",
+        };
+    }, {
+        body: t.Object({
+            id: t.String({ minLength: 1, error: "id is required" }),
+            name: t.String({ minLength: 1, error: "name is required" }),
+            permissions: t.Any()
+        }),
+        detail: {
+            summary: "update-role",
+            description: "update role",
+        }
+    })
+    .post("role-delete", async ({ body }) => {
+        const { id } = body;
+        await prisma.role.update({
+            where: {
+                id
+            },
+            data: {
+                isActive: false
+            }
+        });
+
+        return {
+            success: true,
+            message: "Role deleted successfully",
+        };
+    }, {
+        body: t.Object({
+            id: t.String({ minLength: 1, error: "id is required" })
+        }),
+        detail: {
+            summary: "delete-role",
+            description: "delete role",
+        }
+    })
+    ;
 
 export default UserRoute

src/server/routes/warga_route.ts

@@ -62,8 +62,8 @@ const WargaRoute = new Elysia({
          phone: t.String({ minLength: 1 })
       }),
       detail: {
-         summary: "edit konfigurasi desa",
-         description: `tool untuk edit konfigurasi desa`
+         summary: "Edit Warga",
+         description: `tool untuk edit warga`
       }
    })
    .get("/detail", async ({ query }) => {