upd: tambah surat

deskripsi:
- layout form
- seeder category pelayanan
- api tambah surat

No Issues

bak/mcp_route.ts.txt

@@ -0,0 +1,250 @@
+import { Elysia } from "elysia";
+import { getMcpTools } from "../lib/mcp_tool_convert";
+
+var tools = [] as any[];
+const OPENAPI_URL = process.env.BUN_PUBLIC_BASE_URL + "/docs/json";
+const FILTER_TAG = "mcp";
+
+if (!process.env.BUN_PUBLIC_BASE_URL) {
+    throw new Error("BUN_PUBLIC_BASE_URL environment variable is not set");
+}
+
+// =====================
+// MCP Protocol Types
+// =====================
+type JSONRPCRequest = {
+    jsonrpc: "2.0";
+    id: string | number;
+    method: string;
+    params?: any;
+};
+
+type JSONRPCResponse = {
+    jsonrpc: "2.0";
+    id: string | number;
+    result?: any;
+    error?: {
+        code: number;
+        message: string;
+        data?: any;
+    };
+};
+
+// =====================
+// Tool Executor
+// =====================
+export async function executeTool(
+    tool: any,
+    args: Record<string, any> = {},
+    baseUrl: string
+) {
+    const x = tool["x-props"] || {};
+
+    const method = (x.method || "GET").toUpperCase();
+    const path = x.path || `/${tool.name}`;
+    const url = `${baseUrl}${path}`;
+
+    const opts: RequestInit = {
+        method,
+        headers: { "Content-Type": "application/json" },
+    };
+
+    if (["POST", "PUT", "PATCH", "DELETE"].includes(method)) {
+        opts.body = JSON.stringify(args || {});
+    }
+
+    const res = await fetch(url, opts);
+    const contentType = res.headers.get("content-type") || "";
+    const data = contentType.includes("application/json")
+        ? await res.json()
+        : await res.text();
+
+    return {
+        success: res.ok,
+        status: res.status,
+        method,
+        path,
+        data,
+    };
+}
+
+// =====================
+// MCP Handler (Async)
+// =====================
+async function handleMCPRequestAsync(
+    request: JSONRPCRequest
+): Promise<JSONRPCResponse> {
+    const { id, method, params } = request;
+
+    switch (method) {
+        case "initialize":
+            return {
+                jsonrpc: "2.0",
+                id,
+                result: {
+                    protocolVersion: "2024-11-05",
+                    capabilities: { tools: {} },
+                    serverInfo: { name: "elysia-mcp-server", version: "1.0.0" },
+                },
+            };
+
+        case "tools/list":
+            return {
+                jsonrpc: "2.0",
+                id,
+                result: {
+                    tools: tools.map(({ name, description, inputSchema, ["x-props"]: x }) => ({
+                        name,
+                        description,
+                        inputSchema,
+                        "x-props": x,
+                    })),
+                },
+            };
+
+        case "tools/call": {
+            const toolName = params?.name;
+            const tool = tools.find((t) => t.name === toolName);
+
+            if (!tool) {
+                return {
+                    jsonrpc: "2.0",
+                    id,
+                    error: { code: -32601, message: `Tool '${toolName}' not found` },
+                };
+            }
+
+            try {
+                const baseUrl =
+                    process.env.BUN_PUBLIC_BASE_URL || "http://localhost:3000";
+                const result = await executeTool(tool, params?.arguments || {}, baseUrl);
+                const data = result.data.data;
+                const isObject = typeof data === "object" && data !== null;
+
+                return {
+                    jsonrpc: "2.0",
+                    id,
+                    result: {
+                        content: [
+                            isObject
+                                ? { type: "json", data: data }
+                                : { type: "text", text: JSON.stringify(data || result.data || result) },
+                        ],
+                    },
+                };
+            } catch (error: any) {
+                return {
+                    jsonrpc: "2.0",
+                    id,
+                    error: { code: -32603, message: error.message },
+                };
+            }
+        }
+
+        case "ping":
+            return { jsonrpc: "2.0", id, result: {} };
+
+        default:
+            return {
+                jsonrpc: "2.0",
+                id,
+                error: { code: -32601, message: `Method '${method}' not found` },
+            };
+    }
+}
+
+// =====================
+// Elysia MCP Server
+// =====================
+export const MCPRoute = new Elysia({
+    tags: ["MCP Server"]
+})
+    .post("/mcp", async ({ request, set }) => {
+        if (!tools.length) {
+            tools = await getMcpTools(OPENAPI_URL, FILTER_TAG);
+        }
+        set.headers["Content-Type"] = "application/json";
+        set.headers["Access-Control-Allow-Origin"] = "*";
+
+        try {
+            const body = await request.json();
+
+            if (!Array.isArray(body)) {
+                const res = await handleMCPRequestAsync(body);
+                return res;
+            }
+
+            const results = await Promise.all(
+                body.map((req) => handleMCPRequestAsync(req))
+            );
+            return results;
+        } catch (error: any) {
+            set.status = 400;
+            return {
+                jsonrpc: "2.0",
+                id: null,
+                error: {
+                    code: -32700,
+                    message: "Parse error",
+                    data: error.message,
+                },
+            };
+        }
+    })
+
+    // Tools list (debug)
+    .get("/mcp/tools", async ({ set }) => {
+        if (!tools.length) {
+
+            tools = await getMcpTools(OPENAPI_URL, FILTER_TAG);
+        }
+        set.headers["Access-Control-Allow-Origin"] = "*";
+        return {
+            tools: tools.map(({ name, description, inputSchema, ["x-props"]: x }) => ({
+                name,
+                description,
+                inputSchema,
+                "x-props": x,
+            })),
+        };
+    })
+
+    // MCP status
+    .get("/mcp/status", ({ set }) => {
+        set.headers["Access-Control-Allow-Origin"] = "*";
+        return { status: "active", timestamp: Date.now() };
+    })
+
+    // Health check
+    .get("/health", ({ set }) => {
+        set.headers["Access-Control-Allow-Origin"] = "*";
+        return { status: "ok", timestamp: Date.now(), tools: tools.length };
+    })
+    .get("/mcp/init", async ({ set }) => {
+
+        const _tools = await getMcpTools(OPENAPI_URL, FILTER_TAG);
+        tools = _tools;
+        return {
+            success: true,
+            message: "MCP initialized",
+            tools: tools.length,
+        };
+    })
+
+    // CORS
+    .options("/mcp", ({ set }) => {
+        set.headers["Access-Control-Allow-Origin"] = "*";
+        set.headers["Access-Control-Allow-Methods"] = "GET,POST,OPTIONS";
+        set.headers["Access-Control-Allow-Headers"] =
+            "Content-Type,Authorization,X-API-Key";
+        set.status = 204;
+        return "";
+    })
+    .options("/mcp/tools", ({ set }) => {
+        set.headers["Access-Control-Allow-Origin"] = "*";
+        set.headers["Access-Control-Allow-Methods"] = "GET,OPTIONS";
+        set.headers["Access-Control-Allow-Headers"] =
+            "Content-Type,Authorization,X-API-Key";
+        set.status = 204;
+        return "";
+    });

bak/mcp_tool_convert.ts.txt

@@ -0,0 +1,381 @@
+import _ from "lodash";
+
+interface McpTool {
+    name: string;
+    description: string;
+    inputSchema: any;
+    "x-props": {
+        method: string;
+        path: string;
+        operationId?: string;
+        tag?: string;
+        deprecated?: boolean;
+        summary?: string;
+    };
+}
+
+/**
+ * Convert OpenAPI 3.x JSON spec into MCP-compatible tool definitions.
+ */
+export function convertOpenApiToMcpTools(openApiJson: any, filterTag: string): McpTool[] {
+    const tools: McpTool[] = [];
+    
+    if (!openApiJson || typeof openApiJson !== "object") {
+        console.warn("Invalid OpenAPI JSON");
+        return tools;
+    }
+
+    const paths = openApiJson.paths || {};
+    
+    if (Object.keys(paths).length === 0) {
+        console.warn("No paths found in OpenAPI spec");
+        return tools;
+    }
+
+    for (const [path, methods] of Object.entries(paths)) {
+        if (!path || typeof path !== "string") continue;
+        if (path.startsWith("/mcp")) continue;
+
+        if (!methods || typeof methods !== "object") continue;
+
+        for (const [method, operation] of Object.entries<any>(methods)) {
+            const validMethods = ["get", "post", "put", "delete", "patch", "head", "options"];
+            if (!validMethods.includes(method.toLowerCase())) continue;
+
+            if (!operation || typeof operation !== "object") continue;
+
+            const tags: string[] = Array.isArray(operation.tags) ? operation.tags : [];
+
+            if (!tags.length || !tags.some(t => 
+                typeof t === "string" && t.toLowerCase().includes(filterTag)
+            )) continue;
+
+            try {
+                const tool = createToolFromOperation(path, method, operation, tags);
+                if (tool) {
+                    tools.push(tool);
+                }
+            } catch (error) {
+                console.error(`Error creating tool for ${method.toUpperCase()} ${path}:`, error);
+                continue;
+            }
+        }
+    }
+
+    return tools;
+}
+
+/**
+ * Buat MCP tool dari operation OpenAPI
+ */
+function createToolFromOperation(
+    path: string,
+    method: string,
+    operation: any,
+    tags: string[]
+): McpTool | null {
+    try {
+        const rawName = _.snakeCase(operation.operationId || `${method}_${path}`) || "unnamed_tool";
+        const name = cleanToolName(rawName);
+
+        if (!name || name === "unnamed_tool") {
+            console.warn(`Invalid tool name for ${method} ${path}`);
+            return null;
+        }
+
+        const description =
+            operation.description ||
+            operation.summary ||
+            `Execute ${method.toUpperCase()} ${path}`;
+
+        // ✅ Extract schema berdasarkan method
+        let schema;
+        if (method.toLowerCase() === "get") {
+            // ✅ Untuk GET, ambil dari parameters (query/path)
+            schema = extractParametersSchema(operation.parameters || []);
+        } else {
+            // ✅ Untuk POST/PUT/etc, ambil dari requestBody
+            schema = extractRequestBodySchema(operation);
+        }
+        
+        const inputSchema = createInputSchema(schema);
+
+        return {
+            name,
+            description,
+            "x-props": {
+                method: method.toUpperCase(),
+                path,
+                operationId: operation.operationId,
+                tag: tags[0],
+                deprecated: operation.deprecated || false,
+                summary: operation.summary,
+            },
+            inputSchema,
+        };
+    } catch (error) {
+        console.error(`Failed to create tool from operation:`, error);
+        return null;
+    }
+}
+
+/**
+ * Extract schema dari parameters (untuk GET requests)
+ */
+function extractParametersSchema(parameters: any[]): any {
+    if (!Array.isArray(parameters) || parameters.length === 0) {
+        return null;
+    }
+
+    const properties: any = {};
+    const required: string[] = [];
+
+    for (const param of parameters) {
+        if (!param || typeof param !== "object") continue;
+
+        // ✅ Support path, query, dan header parameters
+        if (["path", "query", "header"].includes(param.in)) {
+            const paramName = param.name;
+            if (!paramName || typeof paramName !== "string") continue;
+
+            properties[paramName] = {
+                type: param.schema?.type || "string",
+                description: param.description || `${param.in} parameter: ${paramName}`,
+            };
+
+            // ✅ Copy field tambahan dari schema
+            if (param.schema) {
+                const allowedFields = ["examples", "example", "default", "enum", "pattern", "minLength", "maxLength", "minimum", "maximum", "format"];
+                for (const field of allowedFields) {
+                    if (param.schema[field] !== undefined) {
+                        properties[paramName][field] = param.schema[field];
+                    }
+                }
+            }
+
+            if (param.required === true) {
+                required.push(paramName);
+            }
+        }
+    }
+
+    if (Object.keys(properties).length === 0) {
+        return null;
+    }
+
+    return {
+        type: "object",
+        properties,
+        required,
+    };
+}
+
+/**
+ * Extract schema dari requestBody (untuk POST/PUT/etc requests)
+ */
+function extractRequestBodySchema(operation: any): any {
+    if (!operation.requestBody?.content) {
+        return null;
+    }
+
+    const content = operation.requestBody.content;
+
+    const contentTypes = [
+        "application/json",
+        "multipart/form-data",
+        "application/x-www-form-urlencoded",
+        "text/plain",
+    ];
+
+    for (const contentType of contentTypes) {
+        if (content[contentType]?.schema) {
+            return content[contentType].schema;
+        }
+    }
+
+    for (const [_, value] of Object.entries<any>(content)) {
+        if (value?.schema) {
+            return value.schema;
+        }
+    }
+
+    return null;
+}
+
+/**
+ * Buat input schema yang valid untuk MCP
+ */
+function createInputSchema(schema: any): any {
+    const defaultSchema = {
+        type: "object",
+        properties: {},
+        additionalProperties: false,
+    };
+
+    if (!schema || typeof schema !== "object") {
+        return defaultSchema;
+    }
+
+    try {
+        const properties: any = {};
+        const required: string[] = [];
+        const originalRequired = Array.isArray(schema.required) ? schema.required : [];
+
+        if (schema.properties && typeof schema.properties === "object") {
+            for (const [key, prop] of Object.entries<any>(schema.properties)) {
+                if (!key || typeof key !== "string") continue;
+
+                try {
+                    const cleanProp = cleanProperty(prop);
+                    if (cleanProp) {
+                        properties[key] = cleanProp;
+
+                        // ✅ PERBAIKAN: Check optional flag dengan benar
+                        const isOptional = prop?.optional === true || prop?.optional === "true";
+                        const isInRequired = originalRequired.includes(key);
+                        
+                        // ✅ Hanya masukkan ke required jika memang required DAN bukan optional
+                        if (isInRequired && !isOptional) {
+                            required.push(key);
+                        }
+                    }
+                } catch (error) {
+                    console.error(`Error cleaning property ${key}:`, error);
+                    continue;
+                }
+            }
+        }
+
+        return {
+            type: "object",
+            properties,
+            required,
+            additionalProperties: false,
+        };
+    } catch (error) {
+        console.error("Error creating input schema:", error);
+        return defaultSchema;
+    }
+}
+
+/**
+ * Bersihkan property dari field custom
+ */
+function cleanProperty(prop: any): any | null {
+    if (!prop || typeof prop !== "object") {
+        return { type: "string" };
+    }
+
+    try {
+        const cleaned: any = {
+            type: prop.type || "string",
+        };
+
+        const allowedFields = [
+            "description",
+            "examples",
+            "example",
+            "default",
+            "enum",
+            "pattern",
+            "minLength",
+            "maxLength",
+            "minimum",
+            "maximum",
+            "format",
+            "multipleOf",
+            "exclusiveMinimum",
+            "exclusiveMaximum",
+        ];
+
+        for (const field of allowedFields) {
+            if (prop[field] !== undefined && prop[field] !== null) {
+                cleaned[field] = prop[field];
+            }
+        }
+
+        if (prop.properties && typeof prop.properties === "object") {
+            cleaned.properties = {};
+            for (const [key, value] of Object.entries(prop.properties)) {
+                const cleanedNested = cleanProperty(value);
+                if (cleanedNested) {
+                    cleaned.properties[key] = cleanedNested;
+                }
+            }
+            
+            if (Array.isArray(prop.required)) {
+                cleaned.required = prop.required.filter((r: any) => typeof r === "string");
+            }
+        }
+
+        if (prop.items) {
+            cleaned.items = cleanProperty(prop.items);
+        }
+
+        if (Array.isArray(prop.oneOf)) {
+            cleaned.oneOf = prop.oneOf.map(cleanProperty).filter(Boolean);
+        }
+        if (Array.isArray(prop.anyOf)) {
+            cleaned.anyOf = prop.anyOf.map(cleanProperty).filter(Boolean);
+        }
+        if (Array.isArray(prop.allOf)) {
+            cleaned.allOf = prop.allOf.map(cleanProperty).filter(Boolean);
+        }
+
+        return cleaned;
+    } catch (error) {
+        console.error("Error cleaning property:", error);
+        return null;
+    }
+}
+
+/**
+ * Bersihkan nama tool
+ */
+function cleanToolName(name: string): string {
+    if (!name || typeof name !== "string") {
+        return "unnamed_tool";
+    }
+
+    try {
+        return name
+            .replace(/[{}]/g, "")
+            .replace(/[^a-zA-Z0-9_]/g, "_")
+            .replace(/_+/g, "_")
+            .replace(/^_|_$/g, "")
+            .replace(/^(get|post|put|delete|patch|api)_/i, "")
+            .replace(/^(get_|post_|put_|delete_|patch_|api_)+/gi, "")
+            .replace(/(^_|_$)/g, "")
+            || "unnamed_tool";
+    } catch (error) {
+        console.error("Error cleaning tool name:", error);
+        return "unnamed_tool";
+    }
+}
+
+/**
+ * Ambil OpenAPI JSON dari endpoint dan konversi ke tools MCP
+ */
+export async function getMcpTools(url: string, filterTag: string): Promise<McpTool[]> {
+    try {
+        
+        console.log(`Fetching OpenAPI spec from: ${url}`);
+
+        const response = await fetch(url);
+        
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const openApiJson = await response.json();
+        const tools = convertOpenApiToMcpTools(openApiJson, filterTag);
+        
+        console.log(`✅ Successfully generated ${tools.length} MCP tools`);
+        
+        return tools;
+    } catch (error) {
+        console.error("Error fetching MCP tools:", error);
+        throw error;
+    }
+}
+

bun.lock

@@ -1,5 +1,6 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "jenna-mcp",
@@ -21,7 +22,11 @@
         "@types/lodash": "^4.17.20",
         "@types/uuid": "^11.0.0",
         "add": "^2.0.6",
+        "echarts": "^6.0.0",
+        "echarts-for-react": "^3.0.5",
         "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 +144,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 +186,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 +210,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 +246,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 +254,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 +282,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=="],
@@ -273,6 +292,10 @@
 
     "ecc-jsbn": ["ecc-jsbn@0.1.2", "", { "dependencies": { "jsbn": "~0.1.0", "safer-buffer": "^2.1.0" } }, "sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw=="],
 
+    "echarts": ["echarts@6.0.0", "", { "dependencies": { "tslib": "2.3.0", "zrender": "6.0.0" } }, "sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ=="],
+
+    "echarts-for-react": ["echarts-for-react@3.0.5", "", { "dependencies": { "fast-deep-equal": "^3.1.3", "size-sensor": "^1.0.1" }, "peerDependencies": { "echarts": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0", "react": "^15.0.0 || >=16.0.0" } }, "sha512-YpEI5Ty7O/2nvCfQ7ybNa+S90DwE8KYZWacGvJW4luUqywP7qStQ+pxDlYOmr4jGDu10mhEkiAuMKcUlT4W5vg=="],
+
     "editor": ["editor@1.0.0", "", {}, "sha512-SoRmbGStwNYHgKfjOrX2L0mUvp9bUVv0uPppZSOMAntEbcFtoC3MKF5b3T6HQPXKIV+QGY3xPO3JK5it5lVkuw=="],
 
     "ee-first": ["ee-first@1.1.1", "", {}, "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="],
@@ -323,6 +346,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 +404,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 +422,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 +452,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 +518,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 +572,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 +606,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 +616,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=="],
@@ -615,10 +652,14 @@
 
     "side-channel-weakmap": ["side-channel-weakmap@1.0.2", "", { "dependencies": { "call-bound": "^1.0.2", "es-errors": "^1.3.0", "get-intrinsic": "^1.2.5", "object-inspect": "^1.13.3", "side-channel-map": "^1.0.1" } }, "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A=="],
 
+    "size-sensor": ["size-sensor@1.0.2", "", {}, "sha512-2NCmWxY7A9pYKGXNBfteo4hy14gWu47rg5692peVMst6lQLPKrVjhY+UTEsPI5ceFRJSl3gVgMYaUi/hKuaiKw=="],
+
     "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
 
     "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 +672,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=="],
@@ -651,7 +696,7 @@
 
     "tough-cookie": ["tough-cookie@2.5.0", "", { "dependencies": { "psl": "^1.1.28", "punycode": "^2.1.1" } }, "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g=="],
 
-    "tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+    "tslib": ["tslib@2.3.0", "", {}, "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="],
 
     "tunnel-agent": ["tunnel-agent@0.6.0", "", { "dependencies": { "safe-buffer": "^5.0.1" } }, "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w=="],
 
@@ -687,6 +732,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=="],
@@ -705,12 +752,18 @@
 
     "zod-to-json-schema": ["zod-to-json-schema@3.24.6", "", { "peerDependencies": { "zod": "^3.24.1" } }, "sha512-h/z3PKvcTcTetyjl1fkj79MHNEjm+HpD6NXheWjzOekY7kV+lwDYnHw+ivHkijnCSMz1yJaWBD9vu/Fcmk+vEg=="],
 
+    "zrender": ["zrender@6.0.0", "", { "dependencies": { "tslib": "2.3.0" } }, "sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg=="],
+
     "@scalar/themes/@scalar/types": ["@scalar/types@0.1.7", "", { "dependencies": { "@scalar/openapi-types": "0.2.0", "@unhead/schema": "^1.11.11", "nanoid": "^5.1.5", "type-fest": "^4.20.0", "zod": "^3.23.8" } }, "sha512-irIDYzTQG2KLvFbuTI8k2Pz/R4JR+zUUSykVTbEMatkzMmVFnn1VzNSMlODbadycwZunbnL2tA27AXed9URVjw=="],
 
     "body-parser/iconv-lite": ["iconv-lite@0.6.3", "", { "dependencies": { "safer-buffer": ">= 2.1.2 < 3.0.0" } }, "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw=="],
 
     "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=="],
@@ -727,12 +780,22 @@
 
     "pkg-types/pathe": ["pathe@2.0.3", "", {}, "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w=="],
 
+    "react-remove-scroll/tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+
+    "react-remove-scroll-bar/tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+
+    "react-style-singleton/tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+
     "request/mime-types": ["mime-types@2.1.35", "", { "dependencies": { "mime-db": "1.52.0" } }, "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw=="],
 
     "request/qs": ["qs@6.5.3", "", {}, "sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA=="],
 
     "request/uuid": ["uuid@3.4.0", "", { "bin": { "uuid": "./bin/uuid" } }, "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="],
 
+    "use-callback-ref/tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+
+    "use-sidecar/tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+
     "@scalar/themes/@scalar/types/@scalar/openapi-types": ["@scalar/openapi-types@0.2.0", "", { "dependencies": { "zod": "^3.23.8" } }, "sha512-waiKk12cRCqyUCWTOX0K1WEVX46+hVUK+zRPzAahDJ7G0TApvbNkuy5wx7aoUyEk++HHde0XuQnshXnt8jsddA=="],
 
     "@scalar/themes/@scalar/types/nanoid": ["nanoid@5.1.6", "", { "bin": { "nanoid": "bin/nanoid.js" } }, "sha512-c7+7RQ+dMB5dPwwCp4ee1/iV/q2P6aK1mTZcfr1BTuVlyW9hJYiMPybJCcnBlQtuSmTIWNeazm/zqNoZSSElBg=="],

kirim.sh

@@ -0,0 +1,3 @@
+curl -X POST https://cld-dkr-prod-jenna-mcp.wibudev.com/api/pengaduan/upload-file-form-data \
+  -H "Accept: application/json" \
+  -F "file=@image.png"

package.json

@@ -28,7 +28,11 @@
     "@types/lodash": "^4.17.20",
     "@types/uuid": "^11.0.0",
     "add": "^2.0.6",
+    "echarts": "^6.0.0",
+    "echarts-for-react": "^3.0.5",
     "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 {
@@ -108,7 +110,8 @@ model CategoryPelayanan {
   id                     String                   @id @default(cuid())
   name                   String
   syaratDokumen          Json[]
-  dataText               String[]
+  dataText               String[]                 @default([])
+  dataPelengkap          Json[]                   @default([])
   isActive               Boolean                  @default(true)
   createdAt              DateTime                 @default(now())
   updatedAt              DateTime                 @updatedAt
@@ -184,8 +187,8 @@ model SuratPelayanan {
   Warga              Warga             @relation(fields: [idWarga], references: [id])
   idWarga            String
   noSurat            String
-  dateExpired        DateTime          @db.Date
-  status             Int
+  dateExpired        DateTime?         @db.Date
+  status             Int               @default(0)
   isActive           Boolean           @default(true)
   createdAt          DateTime          @default(now())
   updatedAt          DateTime          @updatedAt

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/AppRoutes.tsx

@@ -14,6 +14,7 @@ import FormSuratKeteranganBelumKawin from "./pages/darmasaba/form_surat_keterang
 import FormKeteranganKelahiran from "./pages/darmasaba/form_keterangan_kelahiran";
 import FormSuratKeteranganTempatUsaha from "./pages/darmasaba/form_surat_keterangan_tempat_usaha";
 import FormSuratKeteranganKelakuanBaik from "./pages/darmasaba/form_surat_keterangan_kelakuan_baik";
+import Surat from "./pages/darmasaba/surat";
 import Home from "./pages/Home";
 import CredentialPage from "./pages/scr/dashboard/credential/credential_page";
 import DashboardHome from "./pages/scr/dashboard/dashboard_home";
@@ -84,6 +85,7 @@ export default function AppRoutes() {
             path="/darmasaba/surat-keterangan-kelakuan-baik"
             element={<FormSuratKeteranganKelakuanBaik />}
           />
+          <Route path="/darmasaba/surat" element={<Surat />} />
         </Route>
         <Route path="/" element={<Home />} />
 

src/clientRoutes.ts

@@ -14,6 +14,7 @@ const clientRoutes = {
   "/darmasaba/keterangan-kelahiran": "/darmasaba/keterangan-kelahiran",
   "/darmasaba/surat-keterangan-tempat-usaha": "/darmasaba/surat-keterangan-tempat-usaha",
   "/darmasaba/surat-keterangan-kelakuan-baik": "/darmasaba/surat-keterangan-kelakuan-baik",
+  "/darmasaba/surat": "/darmasaba/surat",
   "/": "/",
   "/scr": "/scr",
   "/scr/dashboard": "/scr/dashboard",

src/components/DashboardCountData.tsx

@@ -0,0 +1,101 @@
+import apiFetch from "@/lib/apiFetch";
+import { Card, Flex, Grid, Group, Stack, Text } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import {
+  IconFileCertificate,
+  IconMessageReport,
+  IconUsers,
+} from "@tabler/icons-react";
+import useSWR from "swr";
+
+export default function DashboardCountData() {
+  const { data, mutate, isLoading } = useSWR("/", () =>
+    apiFetch.api.dashboard.count.get(),
+  );
+
+  useShallowEffect(() => {
+    mutate();
+  }, []);
+
+  return (
+    <Grid>
+      <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
+        <MetricCard
+          icon={<IconMessageReport size={28} />}
+          label="Pengaduan Hari Ini"
+          value={String(data?.data?.pengaduan?.today)}
+          change={String(data?.data?.pengaduan?.kenaikan) + "%"}
+          color={"gray"}
+        />
+      </Grid.Col>
+      <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
+        <MetricCard
+          icon={<IconFileCertificate size={28} />}
+          label="Pengajuan Surat Hari Ini"
+          value={String(data?.data?.pelayanan?.today)}
+          change={String(data?.data?.pelayanan?.kenaikan) + "%"}
+          color="gray"
+        />
+      </Grid.Col>
+      <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
+        <MetricCard
+          icon={<IconUsers size={28} />}
+          label="Warga"
+          value={String(data?.data?.warga)}
+          color="blue"
+        />
+      </Grid.Col>
+    </Grid>
+  );
+}
+
+function MetricCard({
+  icon,
+  label,
+  value,
+  change,
+  color,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  value: string;
+  change?: string;
+  color: string;
+}) {
+  return (
+    <Card
+      radius="lg"
+      p="md"
+      withBorder
+      style={{
+        background:
+          "linear-gradient(145deg, rgba(30,30,30,0.95), rgba(55,55,55,0.9))",
+        borderColor: "rgba(100,100,100,0.2)",
+        transition: "transform 0.15s ease, box-shadow 0.15s ease",
+      }}
+      onMouseEnter={(e) =>
+        (e.currentTarget.style.boxShadow = "0 0 10px rgba(0,255,200,0.2)")
+      }
+      onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
+    >
+      <Stack gap={6}>
+        <Group gap={6}>
+          {icon}
+          <Text size="sm" c="dimmed">
+            {label}
+          </Text>
+        </Group>
+        <Flex align="center" justify="space-between">
+          <Text fw={600} size="xl" c="gray.0">
+            {value}
+          </Text>
+          {change && (
+            <Text size="sm" c={color}>
+              {change}
+            </Text>
+          )}
+        </Flex>
+      </Stack>
+    </Card>
+  );
+}

src/components/DashboardGrafik.tsx

@@ -0,0 +1,77 @@
+import apiFetch from "@/lib/apiFetch";
+import { Card, Divider, Flex, Stack, Text, Title } from "@mantine/core";
+import { IconChartBar } from "@tabler/icons-react";
+import type { EChartsOption } from "echarts";
+import EChartsReact from "echarts-for-react";
+import { useEffect, useState } from "react";
+import useSWR from "swr";
+
+export default function DashboardGrafik() {
+  const [options, setOptions] = useState<EChartsOption>({});
+  const { data, mutate, isLoading } = useSWR("grafik-dashboard", async () => {
+    return apiFetch.api.dashboard.grafik.get().then((res) => res.data);
+  });
+
+  const loadData = () => {
+    if (!data) return;
+    const option: EChartsOption = {
+      darkMode: true,
+      animation: true,
+      legend: {
+        textStyle: { color: "#fff" },
+      },
+      tooltip: {},
+      dataset: {
+        dimensions: data.dimensions,
+        source: data.source,
+      },
+      xAxis: {
+        type: "category",
+        axisLabel: { color: "#fff" },
+      },
+      yAxis: {
+        type: "value",
+        minInterval: 1,
+        axisLabel: { color: "#fff" },
+      },
+      color: ["#1abc9c", "#10816aff"],
+      series: [{ type: "bar" }, { type: "bar" }],
+    };
+
+    setOptions(option);
+  };
+
+  useEffect(() => {
+    if (data) loadData();
+  }, [data]);
+
+  return (
+    <Card
+      radius="lg"
+      p="xl"
+      withBorder
+      style={{
+        background:
+          "linear-gradient(145deg, rgba(25,25,25,0.95), rgba(45,45,45,0.85))",
+        borderColor: "rgba(100,100,100,0.2)",
+        boxShadow: "0 0 25px rgba(0,255,200,0.08)",
+      }}
+    >
+      <Stack gap="sm">
+        <Flex align="center" justify="space-between">
+          <Flex direction={"column"}>
+            <Title order={4} c="gray.0">
+              Grafik Pengaduan dan Pelayanan Surat
+            </Title>
+            <Text size="sm">7 Hari Terakhir</Text>
+          </Flex>
+          <IconChartBar size={20} color="gray" />
+        </Flex>
+        <Divider my="xs" />
+        <Stack gap="sm">
+          <EChartsReact style={{ height: 400 }} option={options} />
+        </Stack>
+      </Stack>
+    </Card>
+  );
+}

src/components/DashboardLastData.tsx

@@ -0,0 +1,210 @@
+import apiFetch from "@/lib/apiFetch";
+import {
+  Badge,
+  Button,
+  Card,
+  Flex,
+  Group,
+  Stack,
+  Text,
+  Title,
+  Tooltip,
+} from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useNavigate } from "react-router-dom";
+import useSWR from "swr";
+
+export default function DashboardLastData() {
+  const navigate = useNavigate();
+  const { data, mutate, isLoading } = useSWR("last-update", async () => {
+    const res = await apiFetch.api.dashboard["last-update"].get();
+    return res.data;
+  });
+
+  useShallowEffect(() => {
+    mutate();
+  }, []);
+
+  return (
+    <Flex justify="flex-start" gap="md">
+      <Card
+        radius="lg"
+        p="xl"
+        withBorder
+        w={"50%"}
+        style={{
+          background:
+            "linear-gradient(145deg, rgba(25,25,25,0.95), rgba(45,45,45,0.85))",
+          borderColor: "rgba(100,100,100,0.2)",
+          boxShadow: "0 0 25px rgba(0,255,200,0.08)",
+        }}
+      >
+        <Stack gap="sm">
+          <Flex
+            align="center"
+            pb={"sm"}
+            justify="space-between"
+            style={{ borderBottom: "1px solid rgba(255,255,255,0.1)" }}
+          >
+            <Title order={4} c="gray.0">
+              Last update pengaduan
+            </Title>
+            <Button
+              variant="subtle"
+              size="xs"
+              radius="md"
+              onClick={() => navigate(`/scr/dashboard/pengaduan/list`)}
+            >
+              View All
+            </Button>
+          </Flex>
+          <Stack gap="sm" mt="md" align="stretch" justify="center">
+            {data &&
+            Array.isArray(data.pengaduan) &&
+            data.pengaduan.length > 0 ? (
+              data.pengaduan.map((item: any, index: number) => (
+                <PengaduanSection
+                  key={index}
+                  id={item.id}
+                  nomer={item.noPengaduan}
+                  judul={item.title}
+                  status={item.status}
+                  updated={item.updatedAt}
+                  kategori="pengaduan"
+                />
+              ))
+            ) : (
+              <Text c="dimmed" ta={"center"}>
+                Tidak ada data
+              </Text>
+            )}
+          </Stack>
+        </Stack>
+      </Card>
+
+      <Card
+        radius="lg"
+        p="xl"
+        withBorder
+        w={"50%"}
+        style={{
+          background:
+            "linear-gradient(145deg, rgba(25,25,25,0.95), rgba(45,45,45,0.85))",
+          borderColor: "rgba(100,100,100,0.2)",
+          boxShadow: "0 0 25px rgba(0,255,200,0.08)",
+        }}
+      >
+        <Stack gap="sm">
+          <Flex
+            align="center"
+            pb={"sm"}
+            justify="space-between"
+            style={{ borderBottom: "1px solid rgba(255,255,255,0.1)" }}
+          >
+            <Title order={4} c="gray.0">
+              Last update pelayanan surat
+            </Title>
+            <Button
+              variant="subtle"
+              size="xs"
+              radius="md"
+              onClick={() =>
+                navigate(`/scr/dashboard/pelayanan-surat/list-pelayanan`)
+              }
+            >
+              View All
+            </Button>
+          </Flex>
+          <Stack gap="sm" mt="md" align="stretch" justify="center">
+            {data &&
+            Array.isArray(data.pelayanan) &&
+            data.pelayanan.length > 0 ? (
+              data.pelayanan.map((item: any, index: number) => (
+                <PengaduanSection
+                  key={index}
+                  id={item.id}
+                  nomer={item.noPengajuan}
+                  judul={item.title}
+                  status={item.status}
+                  updated={item.updatedAt}
+                  kategori="pelayanan"
+                />
+              ))
+            ) : (
+              <Text c="dimmed" ta={"center"}>
+                Tidak ada data
+              </Text>
+            )}
+          </Stack>
+        </Stack>
+      </Card>
+    </Flex>
+  );
+}
+
+function PengaduanSection({
+  id,
+  nomer,
+  judul,
+  status,
+  updated,
+  kategori,
+}: {
+  id: string;
+  nomer: string;
+  judul: string;
+  status: string;
+  updated: string;
+  kategori: "pengaduan" | "pelayanan";
+}) {
+  const navigate = useNavigate();
+
+  return (
+    <Stack
+      gap="xs"
+      onClick={() =>
+        navigate(
+          kategori == "pelayanan"
+            ? `/scr/dashboard/pelayanan-surat/detail-pelayanan?id=${id}`
+            : `/scr/dashboard/pengaduan/detail?id=${id}`,
+        )
+      }
+    >
+      <Flex
+        align="center"
+        pb={"sm"}
+        justify="space-between"
+        gap="md"
+        style={{ borderBottom: "1px solid rgba(255,255,255,0.1)" }}
+      >
+        <Flex direction={"column"}>
+          <Text size="md" c="gray.2" lineClamp={1}>
+            {judul}
+          </Text>
+          <Group>
+            <Text size="sm" c="dimmed">
+              #{nomer} ∙ {updated}
+            </Text>
+          </Group>
+        </Flex>
+        <Tooltip label={status}>
+          <Badge
+            size="xs"
+            circle
+            color={
+              status === "diterima"
+                ? "green"
+                : status === "ditolak"
+                  ? "red"
+                  : status === "selesai"
+                    ? "blue"
+                    : status === "dikerjakan"
+                      ? "gray"
+                      : "yellow"
+            }
+          />
+        </Tooltip>
+      </Flex>
+    </Stack>
+  );
+}

src/components/DesaSetting.tsx

@@ -1,8 +1,10 @@
 import apiFetch from "@/lib/apiFetch";
 import {
   ActionIcon,
+  Anchor,
   Button,
   Divider,
+  FileInput,
   Flex,
   Group,
   Input,
@@ -14,14 +16,24 @@ import {
 } 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 +51,37 @@ 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();
@@ -100,18 +142,31 @@ 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 +174,7 @@ export default function DesaSetting() {
             <Button
               variant="filled"
               onClick={handleEdit}
-              disabled={btnDisable}
+              disabled={btnDisable || (dataEdit.name == "TTD" && !img)}
               loading={btnLoading}
             >
               Simpan
@@ -127,6 +182,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 +210,40 @@ 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" ? (
+                      v.value ? (
+                        <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/FullScreenLoading.tsx

@@ -0,0 +1,43 @@
+import { Center, Loader, Overlay, Stack, Text } from "@mantine/core"
+
+type FullScreenLoadingProps = {
+   visible: boolean
+   text?: string
+}
+
+export default function FullScreenLoading({
+   visible,
+   text = "Memproses data..."
+}: FullScreenLoadingProps) {
+   if (!visible) return null
+
+   return (
+      <Overlay
+         fixed
+         blur={6}
+         backgroundOpacity={0.3}
+         zIndex={10000}
+      >
+         <Center h="100%">
+            <Stack align="center" justify="center">
+               <Loader size="lg" />
+               <Text size="sm" c="dimmed">
+                  {text}
+               </Text>
+            </Stack>
+         </Center>
+      </Overlay>
+   )
+}
+
+const overlayStyle: React.CSSProperties = {
+   position: "fixed",
+   inset: 0,
+   zIndex: 9999,
+   backdropFilter: "blur(6px)",
+   backgroundColor: "rgba(255, 255, 255, 0.6)"
+}
+
+const contentStyle: React.CSSProperties = {
+   flexDirection: "column"
+}

src/components/KategoriPelayananSurat.tsx

@@ -18,11 +18,16 @@ 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 }] =
@@ -533,15 +538,17 @@ 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 +579,15 @@ 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 +596,24 @@ 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 +623,11 @@ 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,16 @@ 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 +298,17 @@ 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 +325,38 @@ 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",
+                            ) || v.id == "lainnya"
+                          }
                         >
                           <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 +366,11 @@ export default function KategoriPengaduan() {
                             setDataDelete(v.id);
                             openDelete();
                           }}
+                          disabled={
+                            !permissions.includes(
+                              "setting.kategori_pengaduan.delete",
+                            ) || v.id == "lainnya"
+                          }
                         >
                           <IconTrash size={20} />
                         </ActionIcon>

src/components/ModalFile.tsx

@@ -0,0 +1,102 @@
+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>("");
+  const [error, setError] = useState<boolean>(false);
+
+  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) {
+        setError(true);
+        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) {
+      setError(true);
+      notification({
+        title: "Error",
+        message: "Failed to load image",
+        type: "error",
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (error) {
+      onClose();
+    }
+  }, [error]);
+
+  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,146 @@
+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,68 @@
+import { groupPermissions } from "@/lib/groupPermission";
+import { Anchor, Flex, 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 size="sm">- {node.label}</Text>
+
+      {/* Children */}
+      {sub.map((child: any, i) => (
+        <RenderNode key={i} node={child} />
+      ))}
+    </Stack>
+  );
+}
+
+function RenderNode2({ node }: { node: Node }) {
+  const sub = Object.values(node.children || {});
+
+  return (
+    <Flex direction={"row"} wrap={"wrap"} gap={6}>
+      {/* Title */}
+      <Text size="sm">{node.label},</Text>
+
+      {/* Children */}
+      {sub.map((child: any, i) => (
+        <RenderNode2 key={i} node={child} />
+      ))}
+    </Flex>
+  );
+}
+
+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="sm">
+      {showAll
+        ? rootNodes.map((node: any, idx) => (
+            <RenderNode key={idx} node={node} />
+          ))
+        : rootNodes
+            .slice(0, 2)
+            .map((node: any, idx) => <RenderNode2 key={idx} node={node} />)}
+      <Anchor size="xs" onClick={() => setShowAll(!showAll)}>
+        {showAll ? "View less" : "View more"}
+      </Anchor>
+    </Stack>
+  );
+}

src/components/PermissionTree.tsx

@@ -0,0 +1,183 @@
+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
+        .filter(
+          (menu: Node) =>
+            !menu.key.startsWith("api") && !menu.key.startsWith("credential"),
+        )
+        .map((menu: Node) => (
+          <RenderMenu key={menu.key} menu={menu} />
+        ))}
+    </Stack>
+  );
+}

src/components/ProfileUser.tsx

@@ -9,10 +9,15 @@ 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 +131,17 @@ 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/SuccessPengajuanSurat.tsx

@@ -0,0 +1,50 @@
+import { Badge, Button, Card, Center, Stack, Text, Title } from "@mantine/core"
+import { IconCheck } from "@tabler/icons-react"
+
+type SuccessPengajuanProps = {
+   noPengajuan: string
+   onClose?: () => void
+}
+
+export default function SuccessPengajuan({
+   noPengajuan,
+   onClose
+}: SuccessPengajuanProps) {
+   return (
+      <Center h="100vh">
+         <Card
+            shadow="md"
+            radius="md"
+            p="xl"
+            withBorder
+            maw={520}
+            w="100%"
+         >
+            <Stack align="center" gap="md">
+               <IconCheck size={56} color="green" />
+
+               <Title order={3} ta="center">
+                  Pengajuan Berhasil Dibuat
+               </Title>
+
+               <Text ta="center" size="sm" c="dimmed">
+                  Pengajuan layanan surat sudah dibuat dengan nomor:
+               </Text>
+
+               <Badge size="xl" variant="light" color="green">
+                  {noPengajuan}
+               </Badge>
+
+               <Text ta="center" size="sm">
+                  Nomor ini akan digunakan untuk mengakses dan memantau status
+                  pengajuan surat Anda.
+               </Text>
+
+               <Button fullWidth mt="md" onClick={onClose}>
+                  Selesai
+               </Button>
+            </Stack>
+         </Card>
+      </Center>
+   )
+}

src/components/UserRoleSetting.tsx

@@ -0,0 +1,472 @@
+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 listMenu from "../lib/listPermission.json";
+import notification from "./notificationGlobal";
+import PermissionRole from "./PermissionRole";
+import PermissionTree from "./PermissionTree";
+
+interface MenuNode {
+  key: string;
+  label: string;
+  default: boolean;
+  children?: MenuNode[];
+}
+
+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 });
+    }
+  }
+
+  function buildOrderList(menus: MenuNode[]): string[] {
+    const list: string[] = [];
+
+    const traverse = (nodes: MenuNode[]) => {
+      nodes.forEach((node) => {
+        list.push(node.key);
+        if (node.children) traverse(node.children);
+      });
+    };
+
+    traverse(menus);
+    return list;
+  }
+
+  function sortByJsonOrder(arrayData: string[]): string[] {
+    const orderList = buildOrderList(listMenu.menus);
+
+    return arrayData.sort((a, b) => {
+      return orderList.indexOf(a) - orderList.indexOf(b);
+    });
+  }
+
+  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: sortByJsonOrder(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: sortByJsonOrder(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 w={"150"}>{v.name}</Table.Td>
+                    <Table.Td>
+                      <PermissionRole permissions={v.permissions} />
+                    </Table.Td>
+                    <Table.Td w={"100"}>
+                      <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") ||
+                              v.id == "developer"
+                            }
+                          >
+                            <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",
+                              ) || v.id == "developer"
+                            }
+                          >
+                            <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,16 @@ 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);
@@ -106,19 +111,19 @@ export default function UserSetting() {
   async function handleEdit() {
     try {
       setBtnLoading(true);
-      const res = await apiFetch.api.pengaduan.category.update.post(dataEdit);
+      const res = await apiFetch.api.user.update.post(dataEdit);
       if (res.status === 200) {
         mutate();
         close();
         notification({
           title: "Success",
-          message: "Your category have been saved",
+          message: "Your data have been saved",
           type: "success",
         });
       } else {
         notification({
           title: "Error",
-          message: "Failed to edit category",
+          message: "Failed to edit user",
           type: "error",
         });
       }
@@ -126,7 +131,7 @@ export default function UserSetting() {
       console.error(error);
       notification({
         title: "Error",
-        message: "Failed to edit category",
+        message: "Failed to edit user2",
         type: "error",
       });
     } finally {
@@ -221,9 +226,10 @@ export default function UserSetting() {
         overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
       >
         <Stack gap="ld">
-          <Input.Wrapper label="Edit Kategori">
+          <Input.Wrapper label="Nama">
             <Input
               value={dataEdit.name}
+              error={error.name ? "Field is required" : ""}
               onChange={(e) =>
                 onValidation({
                   kat: "name",
@@ -233,6 +239,51 @@ export default function UserSetting() {
               }
             />
           </Input.Wrapper>
+          <Select
+            label="Role"
+            placeholder="Pilih Role"
+            data={listRole.map((r: any) => ({
+              value: r.id,
+              label: r.name,
+            }))}
+            value={dataEdit.roleId || null}
+            error={error.roleId ? "Field is required" : ""}
+            onChange={(_value, option) => {
+              onValidation({
+                kat: "roleId",
+                value: option?.value,
+                aksi: "edit",
+              });
+            }}
+          />
+          <Input.Wrapper label="Phone" description="">
+            <Input
+              value={dataEdit.phone}
+              onChange={(e) =>
+                onValidation({
+                  kat: "phone",
+                  value: e.target.value,
+                  aksi: "edit",
+                })
+              }
+            />
+          </Input.Wrapper>
+          <Input.Wrapper
+            label="Email"
+            description=""
+            error={error.email ? "Field is required" : ""}
+          >
+            <Input
+              value={dataEdit.email}
+              onChange={(e) =>
+                onValidation({
+                  kat: "email",
+                  value: e.target.value,
+                  aksi: "edit",
+                })
+              }
+            />
+          </Input.Wrapper>
           <Group justify="center" grow>
             <Button variant="light" onClick={close}>
               Batal
@@ -390,15 +441,17 @@ 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"}>
@@ -413,26 +466,42 @@ export default function UserSetting() {
               </Table.Tr>
             </Table.Thead>
             <Table.Tbody>
-              {list.length > 0 ? (
+              {list && Array.isArray(list) && list.length > 0 ? (
                 list?.map((v: any) => (
                   <Table.Tr key={v.id}>
                     <Table.Td>{v.name}</Table.Td>
                     <Table.Td>{v.phone}</Table.Td>
                     <Table.Td>{v.email}</Table.Td>
-                    <Table.Td>{v.roleId}</Table.Td>
+                    <Table.Td>{v.nameRole}</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") ||
+                              v.roleId == "developer"
+                            }
                           >
                             <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 +511,10 @@ export default function UserSetting() {
                               setDataDelete(v.id);
                               openDelete();
                             }}
+                            disabled={
+                              !permissions.includes("setting.user.delete") ||
+                              v.roleId == "developer"
+                            }
                           >
                             <IconTrash size={20} />
                           </ActionIcon>

src/components/surat/SKBedaBiodataDiri.tsx

@@ -0,0 +1,244 @@
+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,168 @@
+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,165 @@
+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,246 @@
+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,155 @@
+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,203 @@
+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,182 @@
+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,144 @@
+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,120 @@
+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,219 @@
+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,212 @@
+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

@@ -10,10 +10,12 @@ import Auth from "./server/routes/auth_route";
 import ConfigurationDesaRoute from "./server/routes/configuration_desa_route";
 import CredentialRoute from "./server/routes/credential_route";
 import DarmasabaRoute from "./server/routes/darmasaba_route";
+import DashboardRoute from "./server/routes/dashboard_route";
 import LayananRoute from "./server/routes/layanan_route";
 import { MCPRoute } from "./server/routes/mcp_route";
 import PelayananRoute from "./server/routes/pelayanan_surat_route";
 import PengaduanRoute from "./server/routes/pengaduan_route";
+import SuratRoute from "./server/routes/surat_route";
 import TestPengaduanRoute from "./server/routes/test_pengaduan";
 import UserRoute from "./server/routes/user_route";
 import WargaRoute from "./server/routes/warga_route";
@@ -30,10 +32,12 @@ const Api = new Elysia({
   prefix: "/api",
   tags: ["api"],
 })
+  .use(DashboardRoute)
   .use(PengaduanRoute)
   .use(PelayananRoute)
   .use(ConfigurationDesaRoute)
   .use(WargaRoute)
+  .use(SuratRoute)
   .use(TestPengaduanRoute)
   .use(apiAuth)
   .use(ApiKeyRoute)

src/lib/categoryPelayananSurat.ts

@@ -3,107 +3,369 @@ export const categoryPelayananSurat = [
     id: "skbedabiodata",
     name: "Surat Keterangan Beda Biodata Diri",
     syaratDokumen: [
-      { name: "pengantar kelian", desc: "Surat Pengantar Kelian Banjar Dinas di Wilayah Masing-masing" },
-      { name: "ktp/kk", desc: "Fotokopi KTP atau Kartu Keluarga" },
-      { name: "dokumen yang beda", desc: "Fotokopi dokumen bersangkutan yang terdapat perbedaan biodata diri, misalnya: Sertifikat Tanah, Ijazah, Polis Asuransi, dan lainnya." }
+      {
+        key: "pengantar_kelian",
+        name: "Pengantar Kelian",
+        desc: "Surat Pengantar Kelian Banjar Dinas di Wilayah Masing-masing"
+      },
+      {
+        key: "ktp_kk",
+        name: "KTP / KK",
+        desc: "Fotokopi KTP atau Kartu Keluarga"
+      },
+      {
+        key: "dokumen_beda",
+        name: "Dokumen Pendukung",
+        desc: "Fotokopi dokumen yang terdapat perbedaan biodata (ijazah, sertifikat, dll)"
+      }
     ],
-    dataText: ["nik", "nama", "tempat tanggal lahir", "jenis kelamin", "alamat", "pekerjaan", "dokumen", "tertulis pada dokumen a", "tertulis pada dokumen b"]
+    dataText: [],
+    dataPelengkap: [
+      { key: "nik", name: "NIK", desc: "Nomor Induk Kependudukan" },
+      { key: "nama", name: "Nama Lengkap", desc: "Nama sesuai KTP" },
+      { key: "ttl", name: "Tempat & Tanggal Lahir", desc: "Tempat dan tanggal lahir pemohon" },
+      { key: "jenis_kelamin", name: "Jenis Kelamin", desc: "Jenis kelamin pemohon" },
+      { key: "alamat", name: "Alamat", desc: "Alamat lengkap tempat tinggal" },
+      { key: "pekerjaan", name: "Pekerjaan", desc: "Pekerjaan pemohon" },
+      { key: "dokumen", name: "Nama Dokumen", desc: "Jenis dokumen yang mengalami perbedaan biodata" },
+      { key: "dokumen_a", name: "Data pada Dokumen A", desc: "Data biodata yang tertulis pada dokumen pertama" },
+      { key: "dokumen_b", name: "Data pada Dokumen B", desc: "Data biodata yang tertulis pada dokumen kedua" }
+    ]
   },
   {
     id: "skbelumkawin",
     name: "Surat Keterangan Belum Kawin",
     syaratDokumen: [
-      { name: "pengantar kelian", desc: "Surat Pengantar Kelian Banjar Dinas" },
-      { name: "ktp/kk", desc: "Fotokopi KTP atau Kartu Keluarga" },
-      { name: "akta cerai", desc: "Fotokopi Akta Cerai bagi yang berstatus janda/duda" }
+      {
+        key: "pengantar_kelian",
+        name: "Pengantar Kelian",
+        desc: "Surat Pengantar Kelian Banjar Dinas"
+      },
+      {
+        key: "ktp_kk",
+        name: "KTP / KK",
+        desc: "Fotokopi KTP atau Kartu Keluarga"
+      },
+      {
+        key: "akta_cerai",
+        name: "Akta Cerai",
+        desc: "Fotokopi akta cerai (jika berstatus janda/duda)"
+      }
     ],
-    dataText: ["nik", "nama", "tempat tanggal lahir", "jenis kelamin", "alamat", "status perkawinan"]
+    dataText: [],
+    dataPelengkap: [
+      { key: "nik", name: "NIK", desc: "Nomor Induk Kependudukan" },
+      { key: "nama", name: "Nama Lengkap", desc: "Nama sesuai KTP" },
+      { key: "ttl", name: "Tempat & Tanggal Lahir", desc: "Tempat dan tanggal lahir" },
+      { key: "jenis_kelamin", name: "Jenis Kelamin", desc: "Jenis kelamin pemohon" },
+      { key: "alamat", name: "Alamat", desc: "Alamat tempat tinggal" },
+      { key: "agama", name: "Agama", desc: "Agama pemohon" },
+      { key: "pekerjaan", name: "Pekerjaan", desc: "Pekerjaan pemohon" }
+    ]
   },
   {
     id: "skdomisiliorganisasi",
     name: "Surat Keterangan Domisili Organisasi",
     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"}
+      {
+        key: "pengantar_kelian",
+        name: "Pengantar Kelian",
+        desc: "Surat Pengantar Kelian Banjar Dinas"
+      },
+      {
+        key: "skt_organisasi",
+        name: "SKT Organisasi",
+        desc: "Fotokopi SKT Organisasi atau pengukuhan kelompok"
+      },
+      {
+        key: "susunan_pengurus",
+        name: "Susunan Pengurus",
+        desc: "Susunan pengurus lengkap dengan kop organisasi"
+      }
     ],
-    dataText: ["nama organisasi", "alamat organisasi", "nama pemohon", "jabatan pemohon", "kontak", "penanggung jawab", "tanggal berdiri"]
+    dataText: [],
+    dataPelengkap: [
+      { key: "nama_organisasi", name: "Nama Organisasi", desc: "Nama resmi organisasi" },
+      { key: "jenis_organisasi", name: "Jenis Organisasi", desc: "Jenis atau bentuk organisasi" },
+      { key: "alamat_organisasi", name: "Alamat Organisasi", desc: "Alamat sekretariat organisasi" },
+      { key: "no_telepon", name: "Nomor Telepon", desc: "Nomor telepon organisasi" },
+      { key: "nama_pimpinan", name: "Nama Pimpinan", desc: "Nama pimpinan organisasi" },
+      { key: "keperluan", name: "Keperluan", desc: "Keperluan pembuatan surat" }
+    ]
   },
   {
     id: "skkelahiran",
     name: "Surat Keterangan Kelahiran",
     syaratDokumen: [
-      { name: "pengantar kelian", desc: "Surat Pengantar Kelian Banjar Dinas" },
-      { name: "surat lahir", desc: "Fotokopi Surat Keterangan Lahir dari Bidan/Dokter (jika ada)" }
+      {
+        key: "pengantar_kelian",
+        name: "Pengantar Kelian",
+        desc: "Surat Pengantar Kelian Banjar Dinas"
+      },
+      {
+        key: "surat_lahir",
+        name: "Surat Keterangan Lahir",
+        desc: "Surat keterangan lahir dari bidan/dokter (jika ada)"
+      }
     ],
-    dataText: ["nama ayah", "nama ibu", "nama anak", "tanggal lahir", "tempat lahir", "jenis kelamin", "nama pelapor"]
+    dataText: [],
+    dataPelengkap: [
+      { key: "nama_ayah", name: "Nama Ayah", desc: "Nama lengkap ayah" },
+      { key: "nama_ibu", name: "Nama Ibu", desc: "Nama lengkap ibu" },
+      { key: "nama_anak", name: "Nama Anak", desc: "Nama bayi/anak" },
+      { key: "tanggal_lahir_anak", name: "Tanggal Lahir Anak", desc: "Tanggal lahir anak" },
+      { key: "pukul_lahir", name: "Pukul Lahir", desc: "Waktu kelahiran anak" },
+      { key: "tempat_lahir", name: "Tempat Lahir", desc: "Tempat kelahiran anak" },
+      { key: "jenis_kelamin", name: "Jenis Kelamin Anak", desc: "Jenis kelamin anak" },
+      { key: "anak_ke", name: "Anak Ke-", desc: "Urutan kelahiran anak" },
+      { key: "nik_ibu", name: "NIK Ibu", desc: "NIK ibu kandung" },
+      { key: "nik_ayah", name: "NIK Ayah", desc: "NIK ayah kandung" },
+      { key: "nama_pelapor", name: "Nama Pelapor", desc: "Nama pihak yang melaporkan" },
+      { key: "hubungan_pelapor", name: "Hubungan Pelapor", desc: "Hubungan pelapor dengan anak" },
+      { key: "alamat_pelapor", name: "Alamat Pelapor", desc: "Alamat pelapor" }
+    ]
   },
   {
     id: "skkelakuanbaik",
     name: "Surat Keterangan Kelakuan Baik (Pengantar SKCK)",
     syaratDokumen: [
-      { name: "pengantar kelian", desc: "Surat Pengantar Kelian Banjar Dinas" },
-      { name: "ktp/kk", desc: "Fotokopi KTP atau Kartu Keluarga" }
+      {
+        key: "pengantar_kelian",
+        name: "Pengantar Kelian",
+        desc: "Surat Pengantar Kelian Banjar Dinas"
+      },
+      {
+        key: "ktp_kk",
+        name: "KTP / KK",
+        desc: "Fotokopi KTP atau Kartu Keluarga"
+      }
     ],
-    dataText: ["nik", "nama", "tempat tanggal lahir", "jenis kelamin", "alamat", "keperluan"]
+    dataText: [],
+    dataPelengkap: [
+      { key: "nik", name: "NIK", desc: "Nomor Induk Kependudukan" },
+      { key: "nama", name: "Nama Lengkap", desc: "Nama sesuai KTP" },
+      { key: "ttl", name: "Tempat & Tanggal Lahir", desc: "Tempat dan tanggal lahir" },
+      { key: "jenis_kelamin", name: "Jenis Kelamin", desc: "Jenis kelamin pemohon" },
+      { key: "agama", name: "Agama", desc: "Agama pemohon" },
+      { key: "alamat", name: "Alamat", desc: "Alamat tempat tinggal" },
+      { key: "pekerjaan", name: "Pekerjaan", desc: "Pekerjaan pemohon" },
+      { key: "polsek", name: "Polsek Tujuan", desc: "Polsek tujuan pembuatan SKCK" }
+    ]
   },
   {
     id: "skkematian",
     name: "Surat Keterangan Kematian",
     syaratDokumen: [
-      { name: "pengantar kelian", desc: "Surat Pengantar Kelian Banjar Dinas" },
-      { name: "ktp/kk", desc: "Fotokopi KTP atau Kartu Keluarga" },
-      { name: "surat kematian", desc: "Surat Keterangan Kematian dari Rumah Sakit/Dokter (jika ada)" }
+      {
+        key: "pengantar_kelian",
+        name: "Pengantar Kelian",
+        desc: "Surat Pengantar Kelian Banjar Dinas"
+      },
+      {
+        key: "ktp_kk",
+        name: "KTP / KK",
+        desc: "Fotokopi KTP atau Kartu Keluarga"
+      },
+      {
+        key: "surat_kematian",
+        name: "Surat Keterangan Kematian",
+        desc: "Surat keterangan kematian dari rumah sakit/dokter (jika ada)"
+      }
     ],
-    dataText: ["nama almarhum", "nik", "tempat tanggal lahir", "alamat", "tanggal kematian", "waktu kematian", "penyebab kematian"]
+    dataText: [],
+    dataPelengkap: [
+      { key: "nik_pelapor", name: "NIK Pelapor", desc: "Nomor Induk Kependudukan pelapor" },
+      { key: "nama_pelapor", name: "Nama Pelapor", desc: "Nama lengkap pelapor" },
+      { key: "pekerjaan_pelapor", name: "Pekerjaan Pelapor", desc: "Pekerjaan pelapor" },
+      { key: "alamat_pelapor", name: "Alamat Pelapor", desc: "Alamat tempat tinggal pelapor" },
+      { key: "hubungan_pelapor", name: "Hubungan dengan Almarhum", desc: "Hubungan pelapor dengan almarhum" },
+      { key: "nama_almarhum", name: "Nama Almarhum", desc: "Nama lengkap almarhum" },
+      { key: "nik_almarhum", name: "NIK Almarhum", desc: "Nomor Induk Kependudukan almarhum" },
+      { key: "ttl_almarhum", name: "Tempat & Tanggal Lahir Almarhum", desc: "Tempat dan tanggal lahir almarhum" },
+      { key: "alamat_almarhum", name: "Alamat Almarhum", desc: "Alamat terakhir almarhum" },
+      { key: "agama_almarhum", name: "Agama Almarhum", desc: "Agama almarhum" },
+      { key: "tanggal_kematian", name: "Tanggal Kematian", desc: "Tanggal meninggal dunia" },
+      { key: "waktu_kematian", name: "Waktu Kematian", desc: "Waktu meninggal dunia" },
+      { key: "tempat_kematian", name: "Tempat Kematian", desc: "Tempat meninggal dunia" },
+      { key: "penyebab_kematian", name: "Penyebab Kematian", desc: "Penyebab meninggal dunia" }
+    ]
   },
   {
     id: "skpenghasilan",
     name: "Surat Keterangan Penghasilan",
     syaratDokumen: [
-      { name: "pengantar kelian", desc: "Surat Pengantar Kelian Banjar Dinas" },
-      { name: "ktp ortu/kk", desc: "Fotokopi KTP orang tua atau Kartu Keluarga" },
-      { name: "surat pernyataan", desc: "Surat Pernyataan Penghasilan bermaterai" }
+      {
+        key: "pengantar_kelian",
+        name: "Pengantar Kelian",
+        desc: "Surat Pengantar Kelian Banjar Dinas"
+      },
+      {
+        key: "ktp_ortu_kk",
+        name: "KTP Orang Tua / KK",
+        desc: "Fotokopi KTP orang tua atau Kartu Keluarga"
+      },
+      {
+        key: "surat_pernyataan",
+        name: "Surat Pernyataan",
+        desc: "Surat pernyataan penghasilan bermaterai"
+      }
     ],
-    dataText: ["nama", "nik", "alamat", "pekerjaan", "jenis usaha", "penghasilan"]
+    dataText: [],
+    dataPelengkap: [
+      { key: "nama", name: "Nama Lengkap", desc: "Nama pemohon" },
+      { key: "ttl", name: "Tempat & Tanggal Lahir", desc: "Tempat dan tanggal lahir" },
+      { key: "jenis_kelamin", name: "Jenis Kelamin", desc: "Jenis kelamin pemohon" },
+      { key: "alamat", name: "Alamat", desc: "Alamat tempat tinggal" },
+      { key: "pekerjaan", name: "Pekerjaan", desc: "Pekerjaan pemohon/orang tua" },
+      { key: "penghasilan", name: "Penghasilan", desc: "Jumlah penghasilan per bulan" },
+      { key: "alasan", name: "Alasan Permohonan", desc: "Alasan pengajuan surat penghasilan" }
+    ]
   },
   {
     id: "sktempatusaha",
     name: "Surat Keterangan Tempat Usaha",
     syaratDokumen: [
-      { name: "pengantar kelian", desc: "Surat Pengantar Kelian Banjar Dinas" },
-      { 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" },
-      { name: "sppt/sertifikat/sewa", desc: "Fotokopi SPPT, Sertifikat Hak Milik, Surat Perjanjian Sewa, atau Kwitansi Pembayaran Sewa 3 bulan terakhir" }
+      {
+        key: "pengantar_kelian",
+        name: "Pengantar Kelian",
+        desc: "Surat Pengantar Kelian Banjar Dinas"
+      },
+      {
+        key: "ktp_kk",
+        name: "KTP / KK",
+        desc: "Fotokopi KTP atau Kartu Keluarga"
+      },
+      {
+        key: "foto_lokasi",
+        name: "Foto Lokasi Usaha",
+        desc: "Foto lokasi usaha dicetak dan distempel oleh Kelian"
+      },
+      {
+        key: "dokumen_lahan",
+        name: "Dokumen Lahan",
+        desc: "SPPT, Sertifikat, atau surat sewa tempat usaha"
+      }
     ],
-    dataText: ["nama usaha", "bidang usaha", "alamat usaha", "status tempat usaha", "luas tempat usaha", "jumlah karyawan", "tujuan pembuatan surat"]
+    dataText: [],
+    dataPelengkap: [
+      { key: "nik", name: "NIK", desc: "Nomor Induk Kependudukan" },
+      { key: "nama_pemilik", name: "Nama Pemilik", desc: "Nama pemilik usaha" },
+      { key: "ttl", name: "Tempat & Tanggal Lahir", desc: "Tempat dan tanggal lahir" },
+      { key: "alamat_pemilik", name: "Alamat Pemilik", desc: "Alamat pemilik usaha" },
+      { key: "nama_usaha", name: "Nama Usaha", desc: "Nama usaha" },
+      { key: "bidang_usaha", name: "Bidang Usaha", desc: "Bidang atau jenis usaha" },
+      { key: "alamat_usaha", name: "Alamat Usaha", desc: "Alamat lokasi usaha" },
+      { key: "status_tempat", name: "Status Tempat Usaha", desc: "Status kepemilikan tempat usaha" },
+      { key: "luas_usaha", name: "Luas Tempat Usaha", desc: "Luas tempat usaha (m²)" },
+      { key: "jumlah_karyawan", name: "Jumlah Karyawan", desc: "Jumlah tenaga kerja" },
+      { key: "tujuan", name: "Tujuan Pembuatan Surat", desc: "Tujuan pembuatan surat keterangan" }
+    ]
   },
   {
     id: "sktidakmampu",
     name: "Surat Keterangan Tidak Mampu",
     syaratDokumen: [
-      { name: "pengantar kelian", desc: "Surat Pengantar Kelian Banjar Dinas" },
-      { name: "ktp/kia/kk", desc: "Fotokopi KTP, KIA, atau Kartu Keluarga" }
+      {
+        key: "pengantar_kelian",
+        name: "Pengantar Kelian",
+        desc: "Surat Pengantar Kelian Banjar Dinas"
+      },
+      {
+        key: "ktp_kia_kk",
+        name: "KTP / KIA / KK",
+        desc: "Fotokopi KTP, KIA, atau Kartu Keluarga"
+      }
     ],
-    dataText: ["nik", "nama", "tempat tanggal lahir", "alamat", "alasan permohonan"]
+    dataText: [],
+    dataPelengkap: [
+      {
+        key: "nik",
+        name: "NIK",
+        desc: "Nomor Induk Kependudukan pemohon"
+      },
+      {
+        key: "nama",
+        name: "Nama Lengkap",
+        desc: "Nama lengkap pemohon"
+      },
+      {
+        key: "ttl",
+        name: "Tempat & Tanggal Lahir",
+        desc: "Tempat dan tanggal lahir pemohon"
+      },
+      {
+        key: "alamat",
+        name: "Alamat",
+        desc: "Alamat tempat tinggal pemohon"
+      },
+      {
+        key: "alasan",
+        name: "Alasan Permohonan",
+        desc: "Alasan pengajuan Surat Keterangan Tidak Mampu"
+      }
+    ]
   },
   {
     id: "skusaha",
     name: "Surat Keterangan Usaha",
     syaratDokumen: [
-      { name: "pengantar kelian", desc: "Surat Pengantar Kelian Banjar Dinas" },
-      { 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" }
+      {
+        key: "pengantar_kelian",
+        name: "Pengantar Kelian",
+        desc: "Surat Pengantar Kelian Banjar Dinas"
+      },
+      {
+        key: "ktp_kk",
+        name: "KTP / KK",
+        desc: "Fotokopi KTP atau Kartu Keluarga"
+      },
+      {
+        key: "foto_lokasi",
+        name: "Foto Lokasi Usaha",
+        desc: "Foto lokasi usaha dicetak dan distempel oleh Kelian"
+      }
     ],
-    dataText: ["jenis usaha", "alamat usaha"]
+    dataText: [],
+    dataPelengkap: [
+      { key: "nama", name: "Nama Lengkap", desc: "Nama pemilik usaha" },
+      { key: "jenis_kelamin", name: "Jenis Kelamin", desc: "Jenis kelamin pemilik usaha" },
+      { key: "ttl", name: "Tempat & Tanggal Lahir", desc: "Tempat dan tanggal lahir" },
+      { key: "negara", name: "Kewarganegaraan", desc: "Kewarganegaraan pemilik usaha" },
+      { key: "agama", name: "Agama", desc: "Agama pemilik usaha" },
+      { key: "status_perkawinan", name: "Status Perkawinan", desc: "Status perkawinan" },
+      { key: "alamat", name: "Alamat", desc: "Alamat tempat tinggal" },
+      { key: "pekerjaan", name: "Pekerjaan", desc: "Pekerjaan pemilik usaha" },
+      { key: "jenis_usaha", name: "Jenis Usaha", desc: "Jenis usaha yang dijalankan" },
+      { key: "alamat_usaha", name: "Alamat Usaha", desc: "Alamat lokasi usaha" }
+    ]
   },
   {
     id: "skyatimpiatu",
     name: "Surat Keterangan Yatim / Piatu / Yatim Piatu",
     syaratDokumen: [
-      { name: "pengantar kelian", desc: "Surat Pengantar Kelian Banjar Dinas" },
-      { name: "ktp/kia/kk", desc: "Fotokopi KTP, KIA, atau Kartu Keluarga" }
+      {
+        key: "pengantar_kelian",
+        name: "Pengantar Kelian",
+        desc: "Surat Pengantar Kelian Banjar Dinas"
+      },
+      {
+        key: "ktp_kia_kk",
+        name: "KTP / KIA / KK",
+        desc: "Fotokopi KTP, KIA, atau Kartu Keluarga"
+      }
     ],
-    dataText: ["nama anak", "nama ayah", "status ayah", "nama ibu", "status ibu"]
+    dataText: [],
+    dataPelengkap: [
+      { key: "nik", name: "NIK", desc: "Nomor Induk Kependudukan" },
+      { key: "nama", name: "Nama Lengkap", desc: "Nama anak" },
+      { key: "ttl", name: "Tempat & Tanggal Lahir", desc: "Tempat dan tanggal lahir anak" },
+      { key: "jenis_kelamin", name: "Jenis Kelamin", desc: "Jenis kelamin anak" },
+      { key: "alamat", name: "Alamat", desc: "Alamat tempat tinggal" },
+      { key: "pekerjaan", name: "Pekerjaan", desc: "Pekerjaan (jika ada)" },
+      { key: "nama_ayah", name: "Nama Ayah", desc: "Nama ayah kandung" },
+      { key: "status_ayah", name: "Status Ayah", desc: "Status ayah (hidup / meninggal)" },
+      { key: "nama_ibu", name: "Nama Ibu", desc: "Nama ibu kandung" },
+      { key: "status_ibu", name: "Status Ibu", desc: "Status ibu (hidup / meninggal)" }
+    ]
   }
 ];

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/Login.tsx

@@ -1,20 +1,53 @@
+import clientRoutes from "@/clientRoutes";
 import {
   Button,
   Container,
   Group,
+  PasswordInput,
   Stack,
   Text,
   TextInput,
 } from "@mantine/core";
 import { useState } from "react";
 import apiFetch from "../lib/apiFetch";
-import clientRoutes from "@/clientRoutes";
 
 export default function Login() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [loading, setLoading] = useState(false);
 
+  function navigateToRoute(akses: string) {
+    switch (akses) {
+      case "dashboard":
+        window.location.href = clientRoutes["/scr/dashboard/dashboard-home"];
+        break;
+      case "pengaduan":
+        window.location.href = clientRoutes["/scr/dashboard/pengaduan/list"];
+        break;
+      case "warga":
+        window.location.href = clientRoutes["/scr/dashboard/warga/list-warga"];
+        break;
+      case "credential":
+        window.location.href =
+          clientRoutes["/scr/dashboard/credential/credential"];
+        break;
+      case "setting":
+        window.location.href =
+          clientRoutes["/scr/dashboard/setting/detail-setting"];
+        break;
+      case "api_key":
+        window.location.href = clientRoutes["/scr/dashboard/apikey/apikey"];
+        break;
+      case "pelayanan":
+        window.location.href =
+          clientRoutes["/scr/dashboard/pelayanan-surat/list-pelayanan"];
+        break;
+      default:
+        window.location.href = clientRoutes["/scr/dashboard"];
+        break;
+    }
+  }
+
   const handleSubmit = async () => {
     setLoading(true);
     try {
@@ -25,7 +58,7 @@ export default function Login() {
 
       if (response.data?.token) {
         localStorage.setItem("token", response.data.token);
-        window.location.href = clientRoutes["/scr/dashboard"];
+        navigateToRoute(response.data.akses || "dashboard");
         return;
       }
 
@@ -48,7 +81,7 @@ export default function Login() {
           value={email}
           onChange={(e) => setEmail(e.target.value)}
         />
-        <TextInput
+        <PasswordInput
           placeholder="Password"
           value={password}
           onChange={(e) => setPassword(e.target.value)}

src/pages/darmasaba/surat.tsx

@@ -0,0 +1,496 @@
+import FullScreenLoading from "@/components/FullScreenLoading";
+import notification from "@/components/notificationGlobal";
+import SuccessPengajuan from "@/components/SuccessPengajuanSurat";
+import apiFetch from "@/lib/apiFetch";
+import { fromSlug, toSlug } from "@/server/lib/slug_converter";
+import {
+   ActionIcon,
+   Badge,
+   Box,
+   Button,
+   Card,
+   Container,
+   Divider,
+   FileInput,
+   Flex,
+   Grid,
+   Group,
+   Select,
+   Stack,
+   Text,
+   TextInput,
+   Tooltip
+} from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import {
+   IconBuildingCommunity,
+   IconInfoCircle,
+   IconUpload,
+   IconUser
+} from "@tabler/icons-react";
+import React, { useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import useSWR from "swr";
+
+type DataItem = {
+   key: string;
+   value: string;
+};
+
+type FormSurat = {
+   kategoriId: string;
+   nama: string;
+   phone: string;
+   dataPelengkap: DataItem[];
+   syaratDokumen: DataItem[];
+};
+
+
+export default function FormSurat() {
+   const [noPengajuan, setNoPengajuan] = useState("")
+   const [submitLoading, setSubmitLoading] = useState(false)
+   const navigate = useNavigate();
+   const { search } = useLocation();
+   const query = new URLSearchParams(search);
+   const jenisSurat = query.get("jenis");
+   const { data, mutate, isLoading } = useSWR("category-pelayanan-list", () =>
+      apiFetch.api.pelayanan.category.get(),
+   );
+   const [jenisSuratFix, setJenisSuratFix] = useState({ name: "", id: "" });
+   const [dataSurat, setDataSurat] = useState<any>({})
+   const [formSurat, setFormSurat] = useState<FormSurat>({
+      nama: "",
+      phone: "",
+      kategoriId: "",
+      dataPelengkap: [],
+      syaratDokumen: [],
+   })
+
+   const listCategory = data?.data || [];
+
+   function onResetAll() {
+      setNoPengajuan("")
+      setSubmitLoading(false)
+      setFormSurat({
+         nama: "",
+         phone: "",
+         kategoriId: "",
+         dataPelengkap: [],
+         syaratDokumen: [],
+      })
+   }
+
+   function onGetJenisSurat() {
+      try {
+         if (!jenisSurat || jenisSurat == "null") {
+            setJenisSuratFix({ name: "", id: "" });
+         } else {
+            const namaJenis = fromSlug(jenisSurat);
+            const data = listCategory.find((item: any) => item.name == namaJenis);
+            if (!data) return;
+            setJenisSuratFix(data);
+         }
+
+      } catch (error) {
+         console.error(error);
+      }
+   }
+
+   async function getDetailJenisSurat() {
+      try {
+         const get: any = await apiFetch.api.pelayanan.category.detail.get({
+            query: {
+               id: jenisSuratFix.id,
+            },
+         })
+
+         setDataSurat(get.data)
+         setFormSurat({
+            kategoriId: jenisSuratFix.id,
+            nama: "",
+            phone: "",
+            dataPelengkap: (get.data?.dataPelengkap || []).map((item: { key: string }) => ({
+               key: item.key,
+               value: "",
+            })),
+            syaratDokumen: (get.data?.syaratDokumen || []).map(
+               (item: { key: string }) => ({
+                  key: item.key,
+                  value: "",
+               })
+            ),
+         });
+      } catch (error) {
+         console.error(error);
+      }
+   }
+
+
+   useShallowEffect(() => {
+      mutate();
+   }, []);
+
+
+   useShallowEffect(() => {
+      if (listCategory.length > 0) {
+         onGetJenisSurat();
+      }
+   }, [jenisSurat, listCategory]);
+
+
+   useShallowEffect(() => {
+      if (jenisSuratFix.id != "") {
+         getDetailJenisSurat();
+      }
+   }, [jenisSuratFix.id]);
+
+   async function onSubmit() {
+      const isFormKosong = Object.values(formSurat).some((value) => {
+         if (Array.isArray(value)) {
+            return (
+               value.length === 0 ||
+               value.some(
+                  (item) => typeof item.value === "string" && item.value.trim() === ""
+               )
+            )
+         }
+
+         if (typeof value === "string") {
+            return value.trim() === ""
+         }
+
+         return false
+      })
+
+      if (isFormKosong) {
+         return notification({
+            title: "Gagal",
+            message: "Silahkan lengkapi form surat",
+            type: "error",
+         })
+      }
+
+      try {
+         setSubmitLoading(true)
+         // 🔥 CLONE state SEKALI
+         let finalFormSurat = structuredClone(formSurat)
+
+         // 2️⃣ Upload satu per satu
+         for (const itemUpload of finalFormSurat.syaratDokumen) {
+            const updImg = await apiFetch.api.pengaduan.upload.post({
+               file: itemUpload.value,
+               folder: "syarat-dokumen",
+            })
+
+            if (updImg.status === 200) {
+               // 🔥 UPDATE OBJECT LOKAL (BUKAN STATE)
+               finalFormSurat.syaratDokumen = updateArrayByKey(
+                  finalFormSurat.syaratDokumen,
+                  itemUpload.key,
+                  updImg.data?.filename || ""
+               )
+            }
+         }
+
+         // 3️⃣ SET STATE SEKALI (optional, untuk UI)
+         setFormSurat(finalFormSurat)
+
+         // 4️⃣ SUBMIT KE API
+         const res = await apiFetch.api.pelayanan.create.post(finalFormSurat)
+
+         if (res.status === 200) {
+            notification({
+               title: "Berhasil",
+               message: res.data?.message || "Pengajuan surat berhasil dibuat",
+               type: "success",
+            })
+         } else {
+            notification({
+               title: "Gagal",
+               message: "Pengajuan surat gagal dibuat, silahkan coba beberapa saat lagi",
+               type: "error",
+            })
+         }
+      } catch (error) {
+         notification({
+            title: "Gagal",
+            message: "Server Error",
+            type: "error"
+         })
+      } finally {
+         setSubmitLoading(false)
+      }
+   }
+
+
+   function updateArrayByKey(list: DataItem[], targetKey: string, value: string): DataItem[] {
+      return list.map(item =>
+         item.key === targetKey
+            ? { ...item, value }
+            : item
+      )
+   }
+
+   function validationForm({ key, value }: { key: 'nama' | 'phone' | 'dataPelengkap' | 'syaratDokumen', value: any }) {
+      if (key == "dataPelengkap" || key == "syaratDokumen") {
+         setFormSurat(prev => ({
+            ...prev,
+            [key]: updateArrayByKey(
+               prev[key],
+               value.key,
+               value.value
+            )
+         }))
+      } else {
+         setFormSurat({
+            ...formSurat,
+            [key]: value,
+         })
+      }
+   }
+
+   return (
+      <Container size="md" w={"100%"}>
+         <FullScreenLoading visible={submitLoading} />
+         {
+            noPengajuan != "" &&
+            <SuccessPengajuan noPengajuan={noPengajuan} onClose={() => { onResetAll(); navigate("/darmasaba/surat") }} />
+         }
+         <Box>
+            <Stack gap="lg">
+               <Group justify="space-between" align="center">
+                  <Group align="center">
+                     <IconBuildingCommunity size={28} />
+                     <div>
+                        <Text fw={800} size="xl">
+                           Layanan Pengajuan Surat Administrasi
+                        </Text>
+                        <Text size="sm" c="dimmed">
+                           Formulir resmi untuk mengajukan berbagai jenis surat administrasi desa/kelurahan secara online.
+                        </Text>
+                     </div>
+                  </Group>
+                  <Group>
+                     <Badge radius="sm">Form Length: 3 Sections</Badge>
+                  </Group>
+               </Group>
+               <Stack gap="lg">
+                  {/* Header Section */}
+                  <FormSection
+                     title="Pemohon"
+                     icon={<IconUser size={16} />}
+                     description="Informasi identitas pemohon"
+                  >
+                     <Grid>
+                        <Grid.Col span={6}>
+                           <TextInput
+                              label={
+                                 <FieldLabel
+                                    label="Nama"
+                                    hint="Nama pemohon"
+                                 />
+                              }
+                              placeholder="Budi Setiawan"
+                              value={formSurat.nama}
+                              onChange={(e) => validationForm({ key: "nama", value: e.target.value })}
+                           />
+                        </Grid.Col>
+
+                        <Grid.Col span={6}>
+                           <TextInput
+                              label={
+                                 <FieldLabel
+                                    label="Nomor Telephone"
+                                    hint="Nomor telephone yang dapat dihubungi / terhubung dengan whatsapp"
+                                 />
+                              }
+                              placeholder="08123456789"
+                              value={formSurat.phone}
+                              onChange={(e) => validationForm({ key: "phone", value: e.target.value })}
+                           />
+                        </Grid.Col>
+
+                        <Grid.Col span={12}>
+                           <Select
+                              label={<FieldLabel label="Jenis Surat" hint="Jenis surat yang ingin diajukan" />}
+                              placeholder="Pilih jenis surat"
+                              data={listCategory.map((item: any) => ({
+                                 value: item.name,
+                                 label: item.name,
+                              }))}
+                              value={jenisSuratFix.name}
+                              onChange={(value) => {
+                                 const slug = toSlug(String(value))
+                                 navigate("/darmasaba/surat?jenis=" + slug)
+                              }}
+                           />
+                        </Grid.Col>
+                     </Grid>
+                  </FormSection>
+
+                  {
+                     jenisSuratFix.id != "" && dataSurat && dataSurat.dataPelengkap &&
+                     <>
+                        <FormSection
+                           title="Data Pelengkap"
+                           description="Data pelengkap yang diperlukan"
+                        >
+                           <Grid>
+                              {
+                                 dataSurat.dataPelengkap.map((item: any, index: number) => (
+                                    <Grid.Col span={6} key={index}>
+                                       <TextInput
+                                          label={
+                                             <FieldLabel
+                                                label={item.name}
+                                                hint={item.desc}
+                                             />
+                                          }
+                                          placeholder={item.name}
+                                          onChange={(e) => validationForm({ key: "dataPelengkap", value: { key: item.key, value: e.target.value } })}
+                                          value={formSurat.dataPelengkap.find((n: any) => n.key == item.key)?.value}
+                                       />
+                                    </Grid.Col>
+                                 ))
+                              }
+                           </Grid>
+                        </FormSection>
+
+                        <FormSection
+                           title="Syarat Dokumen"
+                           description="Syarat dokumen yang diperlukan"
+                        >
+                           <Grid>
+                              {
+                                 dataSurat.syaratDokumen.map((item: any, index: number) => (
+                                    <Grid.Col span={6} key={index}>
+                                       <FileInputWrapper
+                                          label={item.desc}
+                                          placeholder={"Upload file "}
+                                          accept="image/*,application/pdf"
+                                          onChange={(file) => validationForm({ key: "syaratDokumen", value: { key: item.key, value: file } })}
+                                          name={item.name}
+                                       />
+                                    </Grid.Col>
+                                 ))
+                              }
+                           </Grid>
+                        </FormSection>
+
+                        {/* Actions */}
+                        <Group justify="right" mt="md">
+                           <Button variant="default" onClick={() => { }}>
+                              Reset
+                           </Button>
+                           <Button onClick={onSubmit}>Kirim</Button>
+                        </Group>
+                     </>
+
+                  }
+               </Stack>
+            </Stack>
+         </Box>
+      </Container>
+   );
+}
+
+function FieldLabel({ label, hint }: { label: string; hint?: string }) {
+   return (
+      <Group justify="apart" gap="xs" align="center">
+         <Text fw={600}>{label}</Text>
+         {hint && (
+            <Tooltip label={hint} withArrow>
+               <ActionIcon size={24} variant="subtle">
+                  <IconInfoCircle size={16} />
+               </ActionIcon>
+            </Tooltip>
+         )}
+      </Group>
+   );
+}
+
+function FormSection({
+   title,
+   icon,
+   children,
+   description,
+}: {
+   title: string;
+   icon?: React.ReactNode;
+   children: React.ReactNode;
+   description?: string;
+}) {
+   return (
+      <Card radius="md" shadow="sm" withBorder>
+         <Group justify="apart" align="center" mb="xs">
+            <Group align="center" gap="xs">
+               {icon}
+               <Text fw={700}>{title}</Text>
+            </Group>
+            {description && <Badge variant="light">{description}</Badge>}
+         </Group>
+
+         <Divider mb="sm" />
+         <Stack gap="sm">{children}</Stack>
+      </Card>
+   );
+}
+
+function FileInputWrapper({
+   label,
+   placeholder,
+   accept,
+   onChange,
+   preview,
+   name,
+   description,
+}: {
+   label: string;
+   placeholder?: string;
+   accept?: string;
+   onChange: (file: File | null) => void;
+   preview?: string | null;
+   name: string;
+   description?: string;
+}) {
+   return (
+      <Stack gap="xs">
+         <Flex direction={"column"}>
+            <Group justify="apart" align="center">
+               <Text fw={500}>{label}</Text>
+            </Group>
+            {description && (
+               <Text size="sm" c="dimmed" mt={4} style={{ lineHeight: 1.2 }}>
+                  {description}
+               </Text>
+            )}
+         </Flex>
+
+         <FileInput
+            accept={accept}
+            placeholder={placeholder}
+            onChange={(f) => onChange(f)}
+            leftSection={<IconUpload />}
+            aria-label={label}
+            name={name}
+         />
+
+         {preview ? (
+            <div>
+               <Text size="xs" color="dimmed">
+                  Preview:
+               </Text>
+               {/* If preview is an image it will show; pdf preview might not render as image */}
+               {/* Use <object> or <img> depending on file type — keep simple here */}
+               <div style={{ marginTop: 6 }}>
+                  <img
+                     src={preview}
+                     alt={`${label} preview`}
+                     style={{ maxWidth: "200px", borderRadius: 4 }}
+                  />
+               </div>
+            </div>
+         ) : null}
+      </Stack>
+   );
+}

src/pages/scr/dashboard/dashboard_home.tsx

@@ -1,25 +1,16 @@
+import DashboardCountData from "@/components/DashboardCountData";
+import DashboardGrafik from "@/components/DashboardGrafik";
+import DashboardLastData from "@/components/DashboardLastData";
 import {
-  Card,
+  Badge,
   Container,
   Flex,
   Group,
+  Progress,
   Stack,
   Text,
   Title,
-  Progress,
-  Badge,
-  Button,
-  Grid,
-  Divider,
 } from "@mantine/core";
-import {
-  IconActivity,
-  IconUsers,
-  IconServer,
-  IconDatabase,
-  IconSettings,
-  IconArrowRight,
-} from "@tabler/icons-react";
 
 export default function Dashboard() {
   return (
@@ -43,144 +34,15 @@ export default function Dashboard() {
               Live
             </Badge>
           </Group>
-          <Button
-            variant="gradient"
-            gradient={{ from: "teal", to: "cyan", deg: 45 }}
-            radius="md"
-            rightSection={<IconArrowRight size={18} />}
-            style={{
-              boxShadow: "0 0 12px rgba(0,255,200,0.3)",
-            }}
-          >
-            View Details
-          </Button>
         </Flex>
-
-        <Grid>
-          <Grid.Col span={{ base: 12, sm: 6, md: 3 }}>
-            <MetricCard
-              icon={<IconUsers size={28} />}
-              label="Active Users"
-              value="1,248"
-              change="+12%"
-              color="teal"
-            />
-          </Grid.Col>
-          <Grid.Col span={{ base: 12, sm: 6, md: 3 }}>
-            <MetricCard
-              icon={<IconServer size={28} />}
-              label="Server Uptime"
-              value="99.98%"
-              change="+0.02%"
-              color="cyan"
-            />
-          </Grid.Col>
-          <Grid.Col span={{ base: 12, sm: 6, md: 3 }}>
-            <MetricCard
-              icon={<IconDatabase size={28} />}
-              label="Database Ops"
-              value="82.4K"
-              change="+5.6%"
-              color="blue"
-            />
-          </Grid.Col>
-          <Grid.Col span={{ base: 12, sm: 6, md: 3 }}>
-            <MetricCard
-              icon={<IconActivity size={28} />}
-              label="System Health"
-              value="Stable"
-              change=""
-              color="green"
-            />
-          </Grid.Col>
-        </Grid>
-
-        <Card
-          radius="lg"
-          p="xl"
-          withBorder
-          style={{
-            background:
-              "linear-gradient(145deg, rgba(25,25,25,0.95), rgba(45,45,45,0.85))",
-            borderColor: "rgba(100,100,100,0.2)",
-            boxShadow: "0 0 25px rgba(0,255,200,0.08)",
-          }}
-        >
-          <Stack gap="md">
-            <Flex align="center" justify="space-between">
-              <Title order={4} c="gray.0">
-                System Performance
-              </Title>
-              <IconSettings size={20} color="gray" />
-            </Flex>
-            <Divider my="xs" />
-            <Text size="sm" c="dimmed">
-              Resource usage and performance indicators.
-            </Text>
-            <Stack gap="sm" mt="md">
-              <ProgressSection label="CPU Usage" value={68} color="teal" />
-              <ProgressSection label="Memory Usage" value={75} color="cyan" />
-              <ProgressSection label="Network Load" value={42} color="blue" />
-              <ProgressSection label="Disk Space" value={88} color="red" />
-            </Stack>
-          </Stack>
-        </Card>
+        <DashboardCountData />
+        <DashboardGrafik />
+        <DashboardLastData />
       </Stack>
     </Container>
   );
 }
 
-function MetricCard({
-  icon,
-  label,
-  value,
-  change,
-  color,
-}: {
-  icon: React.ReactNode;
-  label: string;
-  value: string;
-  change?: string;
-  color: string;
-}) {
-  return (
-    <Card
-      radius="lg"
-      p="md"
-      withBorder
-      style={{
-        background:
-          "linear-gradient(145deg, rgba(30,30,30,0.95), rgba(55,55,55,0.9))",
-        borderColor: "rgba(100,100,100,0.2)",
-        transition: "transform 0.15s ease, box-shadow 0.15s ease",
-      }}
-      onMouseEnter={(e) =>
-        (e.currentTarget.style.boxShadow = "0 0 10px rgba(0,255,200,0.2)")
-      }
-      onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
-    >
-      <Stack gap={6}>
-        <Group gap={6}>
-          {icon}
-          <Text size="sm" c="dimmed">
-            {label}
-          </Text>
-        </Group>
-        <Flex align="center" justify="space-between">
-          <Text fw={600} size="xl" c="gray.0">
-            {value}
-          </Text>
-          {change && (
-            <Text size="sm" c={color}>
-              {change}
-            </Text>
-          )}
-        </Flex>
-      </Stack>
-    </Card>
-  );
-}
-
 function ProgressSection({
   label,
   value,

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,45 +285,47 @@ function NavigationDashboard() {
 
   return (
     <Stack gap="xs" p="sm">
-      {navItems.map((item) => (
-        <NavLink
-          key={item.path}
-          active={isActive(item.path as keyof typeof clientRoute)}
-          leftSection={item.icon}
-          label={
-            <Flex align="center" gap={6}>
-              <Text fw={500}>{item.label}</Text>
-              {isActive(item.path as keyof typeof clientRoute) && (
-                <Badge
-                  variant="light"
-                  color="teal"
-                  radius="sm"
-                  size="xs"
-                  style={{ textTransform: "none" }}
-                >
-                  Active
-                </Badge>
-              )}
-            </Flex>
-          }
-          description={item.description}
-          onClick={() =>
-            navigate(clientRoutes[item.path as keyof typeof clientRoute])
-          }
-          style={{
-            backgroundColor: isActive(item.path as keyof typeof clientRoute)
-              ? "rgba(0,255,200,0.1)"
-              : "transparent",
-            borderRadius: "8px",
-            transition: "all 0.2s ease",
-          }}
-          styles={{
-            label: { color: "white" },
-            description: { color: "#aaa" },
-            section: { color: "teal" },
-          }}
-        />
-      ))}
+      {navItems
+        .filter((item) => permissions.includes(item.key))
+        .map((item) => (
+          <NavLink
+            key={item.path}
+            active={isActive(item.path as keyof typeof clientRoute)}
+            leftSection={item.icon}
+            label={
+              <Flex align="center" gap={6}>
+                <Text fw={500}>{item.label}</Text>
+                {isActive(item.path as keyof typeof clientRoute) && (
+                  <Badge
+                    variant="light"
+                    color="teal"
+                    radius="sm"
+                    size="xs"
+                    style={{ textTransform: "none" }}
+                  >
+                    Active
+                  </Badge>
+                )}
+              </Flex>
+            }
+            description={item.description}
+            onClick={() =>
+              navigate(clientRoutes[item.path as keyof typeof clientRoute])
+            }
+            style={{
+              backgroundColor: isActive(item.path as keyof typeof clientRoute)
+                ? "rgba(0,255,200,0.1)"
+                : "transparent",
+              borderRadius: "8px",
+              transition: "all 0.2s ease",
+            }}
+            styles={{
+              label: { color: "white" },
+              description: { color: "#aaa" },
+              section: { color: "teal" },
+            }}
+          />
+        ))}
     </Stack>
   );
 }

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

@@ -1,3 +1,6 @@
+import ModalFile from "@/components/ModalFile";
+import ModalSurat from "@/components/ModalSurat";
+import notification from "@/components/notificationGlobal";
 import apiFetch from "@/lib/apiFetch";
 import {
   Anchor,
@@ -9,95 +12,241 @@ import {
   Flex,
   Grid,
   Group,
+  List,
   Modal,
   Stack,
   Table,
   Text,
   Textarea,
+  ThemeIcon,
   Title,
 } from "@mantine/core";
 import { useDisclosure, useShallowEffect } from "@mantine/hooks";
 import {
   IconAlignJustified,
-  IconCategory,
+  IconCheck,
   IconFileCertificate,
-  IconInfoTriangle,
-  IconMapPin,
+  IconFileCheck,
   IconMessageReport,
-  IconPhotoScan,
+  IconPhone,
   IconUser,
 } from "@tabler/icons-react";
-import { useState } from "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";
 import useSwr from "swr";
 
-export default function DetailPelayananPage() {
+export default function DetailPengajuanPage() {
   const { search } = useLocation();
   const query = new URLSearchParams(search);
   const id = query.get("id");
+  const { data, mutate, isLoading } = useSwr("/", () =>
+    apiFetch.api.pelayanan.detail.get({
+      query: {
+        id: id!,
+      },
+    }),
+  );
+
+  useShallowEffect(() => {
+    mutate();
+  }, []);
 
   return (
     <Container size="xl" py="xl" w={"100%"}>
       <Grid>
         <Grid.Col span={8}>
           <Stack gap={"xl"}>
-            <DetailDataPelayanan />
-            <DetailDataHistori />
+            <DetailDataPengajuan
+              data={data?.data?.pengajuan}
+              syaratDokumen={data?.data?.syaratDokumen}
+              dataText={data?.data?.dataText}
+              onAction={() => {
+                mutate();
+              }}
+            />
+            <DetailDataHistori data={data?.data?.history} />
           </Stack>
         </Grid.Col>
         <Grid.Col span={4}>
-          <DetailUserPelayanan />
+          <DetailUserPengajuan data={data?.data?.warga} />
         </Grid.Col>
       </Grid>
     </Container>
   );
 }
 
-function DetailDataPelayanan() {
+function DetailDataPengajuan({
+  data,
+  syaratDokumen,
+  dataText,
+  onAction,
+}: {
+  data: any;
+  syaratDokumen: any;
+  dataText: any;
+  onAction: () => void;
+}) {
   const [opened, { open, close }] = useDisclosure(false);
   const [catModal, setCatModal] = useState<"tolak" | "terima">("tolak");
+  const [keterangan, setKeterangan] = useState("");
+  const [host, setHost] = useState<User | null>(null);
+  const [noSurat, setNoSurat] = useState("");
+  const [openedPreview, setOpenedPreview] = useState(false);
+  const [openedPreviewFile, setOpenedPreviewFile] = useState(false);
+  const [permissions, setPermissions] = useState<JsonValue[]>([]);
+  const [viewImg, setViewImg] = useState("");
+
+  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();
+  }, []);
+
+  const handleKonfirmasi = async (cat: "terima" | "tolak") => {
+    try {
+      const res = await apiFetch.api.pelayanan["update-status"].post({
+        id: data?.id,
+        status:
+          cat == "tolak"
+            ? "ditolak"
+            : data.status == "antrian"
+              ? "diterima"
+              : "selesai",
+        keterangan: keterangan,
+        idUser: host?.id ?? "",
+        noSurat: noSurat,
+      });
+
+      if (res?.status === 200) {
+        onAction();
+        close();
+        notification({
+          title: "Success",
+          message: "Success update pengajuan surat",
+          type: "success",
+        });
+      } else {
+        notification({
+          title: "Error",
+          message: "Failed to update pengajuan surat",
+          type: "error",
+        });
+      }
+    } catch (error) {
+      console.error(error);
+      notification({
+        title: "Error",
+        message: "Failed to update pengajuan surat",
+        type: "error",
+      });
+    }
+  };
+
+  useShallowEffect(() => {
+    if (viewImg) {
+      setOpenedPreviewFile(true);
+    }
+  }, [viewImg]);
 
   return (
     <>
+      <ModalFile
+        open={openedPreviewFile && !_.isEmpty(viewImg)}
+        onClose={() => {
+          setOpenedPreviewFile(false);
+        }}
+        folder="syarat-dokumen"
+        fileName={viewImg}
+      />
+
+      {/* MODAL KONFIRMASI */}
       <Modal
         opened={opened}
         onClose={close}
         title={"Konfirmasi"}
-        centered
         overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
       >
         <Stack gap="sm">
           {catModal === "tolak" ? (
             <>
               <Text>
-                Anda yakin ingin menolak pengaduan ini? Berikan alasan penolakan
+                Anda yakin ingin menolak pengajuan surat ini? Berikan alasan
+                penolakan
               </Text>
-
-              <Textarea size="md" minRows={5} />
+              <Textarea
+                size="md"
+                minRows={5}
+                value={keterangan}
+                onChange={(e) => setKeterangan(e.target.value)}
+              />
               <Group justify="center" grow>
                 <Button variant="light" onClick={close}>
                   Batal
                 </Button>
-                <Button variant="filled" color="red" onClick={close}>
+                <Button
+                  variant="filled"
+                  color="red"
+                  disabled={keterangan.length < 1}
+                  onClick={() => handleKonfirmasi("tolak")}
+                >
                   Tolak
                 </Button>
               </Group>
             </>
           ) : (
             <>
-              <Text>Anda yakin ingin menerima pengaduan ini?</Text>
+              <Text>
+                Anda yakin ingin{" "}
+                {data?.status == "antrian" ? "menerima" : "menyetujui"}{" "}
+                pengajuan surat ini?
+                {data.status == "diterima" &&
+                  "Masukkan nomer surat yang akan dibuat"}
+              </Text>
+              {data.status == "diterima" && (
+                <Textarea
+                  size="md"
+                  minRows={5}
+                  value={noSurat}
+                  onChange={(e) => setNoSurat(e.target.value)}
+                  placeholder="Contoh : 08/D-IV/11/2025"
+                />
+              )}
               <Group justify="center" grow>
                 <Button variant="light" onClick={close}>
-                  Batal
+                  Tidak
                 </Button>
-                <Button variant="filled" color="green" onClick={close}>
-                  Terima
+                <Button
+                  variant="filled"
+                  color="green"
+                  onClick={() => handleKonfirmasi("terima")}
+                  disabled={data.status == "diterima" && noSurat.length < 1}
+                >
+                  Ya
                 </Button>
               </Group>
             </>
           )}
         </Stack>
       </Modal>
+      {data?.status == "selesai" && (
+        <ModalSurat
+          open={openedPreview}
+          onClose={() => setOpenedPreview(false)}
+          surat={data?.idSurat}
+        />
+      )}
 
       <Card
         radius="md"
@@ -114,117 +263,151 @@ function DetailDataPelayanan() {
           <Flex align="center" justify="space-between">
             <Group gap="xs">
               <Title order={4} c="gray.2">
-                Pelayanan Surat
+                Pengajuan {data?.category}
               </Title>
               <Title order={4} c="dimmed">
-                #PGf-2345-33
+                #{data?.noPengajuan}
               </Title>
             </Group>
             <Badge
               size="xl"
               variant="light"
               radius="sm"
-              color={"yellow"}
+              color={
+                data?.status === "diterima"
+                  ? "green"
+                  : data?.status === "ditolak"
+                    ? "red"
+                    : data?.status === "selesai"
+                      ? "blue"
+                      : data?.status === "dikerjakan"
+                        ? "gray"
+                        : "yellow"
+              }
               style={{ textTransform: "none" }}
             >
-              antrian
+              {data?.status}
             </Badge>
           </Flex>
           <Divider my={0} />
           <Grid>
-            <Grid.Col span={6}>
-              <Stack gap="md">
+            <Grid.Col span={12}>
+              <Stack gap="lg">
+                <Flex direction={"column"} justify="flex-start">
+                  <Group gap="xs">
+                    <IconFileCheck size={20} />
+                    <Text size="md">Syarat Dokumen</Text>
+                  </Group>
+                  <List
+                    spacing="sm"
+                    pt={10}
+                    icon={
+                      <ThemeIcon variant="default" size={20} radius="xl">
+                        <IconCheck size={13} />
+                      </ThemeIcon>
+                    }
+                  >
+                    {syaratDokumen?.map((v: any) => (
+                      <List.Item key={v.id}>
+                        <Anchor
+                          onClick={() => {
+                            setViewImg(v.value);
+                          }}
+                        >
+                          {v.jenis}
+                        </Anchor>
+                      </List.Item>
+                    ))}
+                  </List>
+                </Flex>
+
                 <Flex direction={"column"} justify="flex-start">
                   <Group gap="xs">
                     <IconAlignJustified size={20} />
-                    <Text size="md">Judul</Text>
+                    <Text size="md">Data Pelengkap</Text>
                   </Group>
-                  <Text size="md" c={"white"}>
-                    Judul Pelayanan Surat
-                  </Text>
-                </Flex>
-                <Flex direction={"column"} justify="flex-start">
-                  <Group gap="xs">
-                    <IconMapPin size={20} />
-                    <Text size="md">Lokasi</Text>
-                  </Group>
-                  <Text size="md" c="white">
-                    fwef
-                  </Text>
-                </Flex>
-              </Stack>
-            </Grid.Col>
-            <Grid.Col span={6}>
-              <Stack gap="md">
-                <Flex direction={"column"} justify="flex-start">
-                  <Group gap="xs">
-                    <IconCategory size={20} />
-                    <Text size="md">Kategori</Text>
-                  </Group>
-                  <Text size="md" c="white">
-                    fwef
-                  </Text>
-                </Flex>
-                <Flex direction={"column"} justify="flex-start">
-                  <Group gap="xs">
-                    <IconPhotoScan size={20} />
-                    <Text size="md">Gambar</Text>
-                  </Group>
-                  <Anchor href="https://mantine.dev/" target="_blank">
-                    Lihat Gambar
-                  </Anchor>
+
+                  <Table withRowBorders={false}>
+                    <Table.Tbody>
+                      {dataText?.map((item: any) => (
+                        <Table.Tr key={item.id}>
+                          <Table.Td
+                            style={{ whiteSpace: "nowrap", width: "10%" }}
+                          >
+                            {_.upperFirst(item.jenis)}
+                          </Table.Td>
+                          <Table.Td>:</Table.Td>
+                          <Table.Td style={{ width: "85%" }}>
+                            {_.upperFirst(item.value)}
+                          </Table.Td>
+                        </Table.Tr>
+                      ))}
+                    </Table.Tbody>
+                  </Table>
                 </Flex>
               </Stack>
             </Grid.Col>
             <Grid.Col span={12}>
-              <Stack gap="md">
-                <Flex direction={"column"} justify="flex-start">
-                  <Group gap="xs">
-                    <IconAlignJustified size={20} />
-                    <Text size="md">Detail</Text>
-                  </Group>
-                  <Text size="md" c="white">
-                    Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-                    Illum, corporis iusto. Suscipit veritatis quas, non nobis
-                    fuga, laudantium accusantium tempora sint aliquid architecto
-                    totam esse eum excepturi nostrum fugiat ut.
-                  </Text>
-                </Flex>
-                <Flex direction={"column"} justify="flex-start">
-                  <Group gap="xs">
-                    <IconInfoTriangle size={20} />
-                    <Text size="md">Keterangan</Text>
-                  </Group>
-                  <Text size="md" c={"white"}>
-                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. At
-                    fugiat eligendi nesciunt dolore? Maiores a cumque vitae
-                    suscipit incidunt quos beatae modi, vel, id ullam quae
-                    voluptas, deserunt quas placeat.
-                  </Text>
-                </Flex>
-              </Stack>
-            </Grid.Col>
-            <Grid.Col span={12}>
-              <Group justify="center" grow>
-                <Button
-                  variant="light"
-                  onClick={() => {
-                    setCatModal("tolak");
-                    open();
-                  }}
-                >
-                  Tolak
-                </Button>
-                <Button
-                  variant="filled"
-                  onClick={() => {
-                    setCatModal("terima");
-                    open();
-                  }}
-                >
-                  Terima
-                </Button>
-              </Group>
+              {data?.status === "antrian" ? (
+                <Group justify="center" grow>
+                  <Button
+                    disabled={!permissions.includes("pelayanan.antrian.tolak")}
+                    variant="light"
+                    onClick={() => {
+                      setCatModal("tolak");
+                      open();
+                    }}
+                  >
+                    Tolak
+                  </Button>
+                  <Button
+                    disabled={!permissions.includes("pelayanan.antrian.terima")}
+                    variant="filled"
+                    onClick={() => {
+                      setCatModal("terima");
+                      open();
+                    }}
+                  >
+                    Terima
+                  </Button>
+                </Group>
+              ) : data?.status === "diterima" ? (
+                <Group justify="center" grow>
+                  <Button
+                    disabled={!permissions.includes("pelayanan.diterima.tolak")}
+                    variant="light"
+                    onClick={() => {
+                      setCatModal("tolak");
+                      open();
+                    }}
+                  >
+                    Tolak
+                  </Button>
+                  <Button
+                    disabled={
+                      !permissions.includes("pelayanan.diterima.setujui")
+                    }
+                    variant="filled"
+                    onClick={() => {
+                      setCatModal("terima");
+                      open();
+                    }}
+                  >
+                    Setujui
+                  </Button>
+                </Group>
+              ) : data?.status === "selesai" ? (
+                <Group justify="center" grow>
+                  <Button
+                    variant="light"
+                    onClick={() => setOpenedPreview(!openedPreview)}
+                  >
+                    Surat
+                  </Button>
+                </Group>
+              ) : (
+                <></>
+              )}
             </Grid.Col>
           </Grid>
         </Stack>
@@ -233,23 +416,7 @@ function DetailDataPelayanan() {
   );
 }
 
-function DetailDataHistori() {
-  const elements = [
-    { position: 6, mass: 12.011, symbol: "C", name: "Carbon" },
-    { position: 7, mass: 14.007, symbol: "N", name: "Nitrogen" },
-    { position: 39, mass: 88.906, symbol: "Y", name: "Yttrium" },
-    { position: 56, mass: 137.33, symbol: "Ba", name: "Barium" },
-    { position: 58, mass: 140.12, symbol: "Ce", name: "Cerium" },
-  ];
-
-  const rows = elements.map((element) => (
-    <Table.Tr key={element.name}>
-      <Table.Td>{element.position}</Table.Td>
-      <Table.Td>{element.name}</Table.Td>
-      <Table.Td>{element.symbol}</Table.Td>
-      <Table.Td>{element.mass}</Table.Td>
-    </Table.Tr>
-  ));
+function DetailDataHistori({ data }: { data: any }) {
   return (
     <Card
       radius="md"
@@ -265,7 +432,7 @@ function DetailDataHistori() {
       <Stack gap="md">
         <Flex align="center" justify="space-between">
           <Title order={4} c="gray.2">
-            Histori Pengaduan
+            Histori Pengajuan Surat
           </Title>
         </Flex>
         <Divider my={0} />
@@ -278,33 +445,34 @@ function DetailDataHistori() {
               <Table.Th>User</Table.Th>
             </Table.Tr>
           </Table.Thead>
-          <Table.Tbody>{rows}</Table.Tbody>
+          <Table.Tbody>
+            {data?.map((item: any) => (
+              <Table.Tr key={item.id}>
+                <Table.Td style={{ whiteSpace: "nowrap" }}>
+                  {item.createdAt.toLocaleString("id-ID", {
+                    day: "2-digit",
+                    month: "short",
+                    year: "numeric",
+                    hour: "2-digit",
+                    minute: "2-digit",
+                    hour12: false,
+                  })}
+                </Table.Td>
+                <Table.Td>{item.deskripsi}</Table.Td>
+                <Table.Td>{item.status}</Table.Td>
+                <Table.Td style={{ whiteSpace: "nowrap" }}>
+                  {item.nameUser ? item.nameUser : "-"}
+                </Table.Td>
+              </Table.Tr>
+            ))}
+          </Table.Tbody>
         </Table>
       </Stack>
     </Card>
   );
 }
 
-function DetailUserPelayanan() {
-  const [page, setPage] = useState(1);
-  const [value, setValue] = useState("");
-  const { data, mutate, isLoading } = useSwr("/", () =>
-    apiFetch.api.pengaduan.list.get({
-      query: {
-        status,
-        search: value,
-        take: "",
-        page: "",
-      },
-    }),
-  );
-
-  useShallowEffect(() => {
-    mutate();
-  }, [status, value]);
-
-  const list = data?.data || [];
-
+function DetailUserPengajuan({ data }: { data: any }) {
   return (
     <Card
       radius="md"
@@ -333,16 +501,16 @@ function DetailUserPelayanan() {
               <Text size="md">Nama</Text>
             </Group>
             <Text size="md" c={"white"}>
-              Amalia Dwi Yustiani
+              {data?.name}
             </Text>
           </Group>
           <Group justify="space-between">
             <Group gap="xs">
-              <IconMapPin size={20} />
+              <IconPhone size={20} />
               <Text size="md">Telepon</Text>
             </Group>
             <Text size="md" c="white">
-              08123456789
+              {data?.phone}
             </Text>
           </Group>
           <Group justify="space-between">
@@ -351,7 +519,7 @@ function DetailUserPelayanan() {
               <Text size="md">Jumlah Pengaduan</Text>
             </Group>
             <Text size="md" c="white">
-              10
+              {data?.pengaduan}
             </Text>
           </Group>
           <Group justify="space-between">
@@ -360,7 +528,7 @@ function DetailUserPelayanan() {
               <Text size="md">Jumlah Pelayanan Surat</Text>
             </Group>
             <Text size="md" c="white">
-              10
+              {data?.pelayanan}
             </Text>
           </Group>
         </Stack>

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

@@ -6,8 +6,10 @@ import {
   Container,
   Divider,
   Flex,
+  Grid,
   Group,
   Input,
+  Pagination,
   Stack,
   Tabs,
   Text,
@@ -15,16 +17,15 @@ import {
 } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import {
-  IconAlignJustified,
   IconClockHour3,
   IconFileSad,
-  IconMapPin,
   IconSearch,
+  IconUser,
 } from "@tabler/icons-react";
 import { useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import useSwr from "swr";
-import { proxy } from "valtio";
+import { proxy, subscribe } from "valtio";
 
 const state = proxy({ reload: "" });
 function reloadState() {
@@ -48,20 +49,24 @@ export default function PelayananSuratListPage() {
 
 function TabListPelayananSurat({ status }: { status: string }) {
   const navigate = useNavigate();
-  const dataCount = useSwr("/pelayanan-surat/count", () =>
-    apiFetch.api.pengaduan.count.get().then((res) => res.data),
+  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>
         <Tabs.Tab
-          value="all"
+          value="semua"
           onClick={() => {
             navigate("?status=semua");
           }}
         >
-          Semua ({dataCount?.data?.semua || 0})
+          Semua ({data?.semua || 0})
         </Tabs.Tab>
         <Tabs.Tab
           value="antrian"
@@ -69,7 +74,7 @@ function TabListPelayananSurat({ status }: { status: string }) {
             navigate("?status=antrian");
           }}
         >
-          Antrian ({dataCount?.data?.antrian || 0})
+          Antrian ({data?.antrian || 0})
         </Tabs.Tab>
         <Tabs.Tab
           value="diterima"
@@ -77,15 +82,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"
@@ -93,7 +90,7 @@ function TabListPelayananSurat({ status }: { status: string }) {
             navigate("?status=selesai");
           }}
         >
-          Selesai ({dataCount?.data?.selesai || 0})
+          Selesai ({data?.selesai || 0})
         </Tabs.Tab>
         <Tabs.Tab
           value="ditolak"
@@ -101,7 +98,7 @@ function TabListPelayananSurat({ status }: { status: string }) {
             navigate("?status=ditolak");
           }}
         >
-          Ditolak ({dataCount?.data?.ditolak || 0})
+          Ditolak ({data?.ditolak || 0})
         </Tabs.Tab>
       </Tabs.List>
     </Tabs>
@@ -118,21 +115,31 @@ type StatusKey =
 function ListPelayananSurat({ status }: { status: StatusKey }) {
   const [page, setPage] = useState(1);
   const [value, setValue] = useState("");
-  const { data, mutate, isLoading } = useSwr("/", () =>
-    apiFetch.api.pengaduan.list.get({
+  const { data, mutate, isLoading } = useSwr("/", async () =>
+    apiFetch.api.pelayanan.list.get({
       query: {
         status,
         search: value,
         take: "",
-        page: "",
+        page: page.toString(),
       },
     }),
   );
 
   useShallowEffect(() => {
+    setPage(1);
     mutate();
   }, [status, value]);
 
+  useShallowEffect(() => {
+    mutate();
+  }, [page]);
+
+  useShallowEffect(() => {
+    const unsubscribe = subscribe(state, () => mutate());
+    return () => unsubscribe();
+  }, []);
+
   const navigate = useNavigate();
 
   if (isLoading)
@@ -147,32 +154,53 @@ function ListPelayananSurat({ status }: { status: StatusKey }) {
         }}
       >
         <Text size="sm" c="dimmed">
-          Loading pengaduan...
+          Loading pelayanan surat...
         </Text>
       </Card>
     );
 
-  const list = data?.data || [];
+  const list = data?.data?.data || [];
+  const total = data?.data?.total || 0;
+  const totalPage = data?.data?.totalPages || 1;
+  const pageSize = data?.data?.pageSize || 10;
+  const pageNow = data?.data?.page || 1;
+  const toDate = (d: any) => new Date(d);
 
   return (
     <Stack gap="xl">
-      <Group grow>
-        <Input
-          value={value}
-          placeholder="Cari pengaduan..."
-          onChange={(event) => setValue(event.currentTarget.value)}
-          leftSection={<IconSearch size={16} />}
-          rightSectionPointerEvents="all"
-          rightSection={
-            <CloseButton
-              aria-label="Clear input"
-              onClick={() => setValue("")}
-              style={{ display: value ? undefined : "none" }}
+      <Grid>
+        <Grid.Col span={9}>
+          <Input
+            value={value}
+            placeholder="Cari pengajuan..."
+            onChange={(event) => setValue(event.currentTarget.value)}
+            leftSection={<IconSearch size={16} />}
+            rightSectionPointerEvents="all"
+            rightSection={
+              <CloseButton
+                aria-label="Clear input"
+                onClick={() => setValue("")}
+                style={{ display: value ? undefined : "none" }}
+              />
+            }
+          />
+        </Grid.Col>
+        <Grid.Col span={3}>
+          <Group justify="flex-end">
+            <Text
+              size="sm"
+              c="gray.5"
+            >{`${pageSize * (page - 1) + 1} – ${Math.min(total, pageSize * page)} of ${total}`}</Text>
+            <Pagination
+              total={totalPage}
+              value={page}
+              onChange={setPage}
+              withPages={false}
             />
-          }
-        />
-      </Group>
-      {list?.length === 0 ? (
+          </Group>
+        </Grid.Col>
+      </Grid>
+      {Array.isArray(list) && list?.length === 0 ? (
         <Flex justify="center" align="center" py={"xl"}>
           <Stack gap={4} align="center">
             <IconFileSad size={32} color="gray" />
@@ -182,6 +210,7 @@ function ListPelayananSurat({ status }: { status: StatusKey }) {
           </Stack>
         </Flex>
       ) : (
+        Array.isArray(list) &&
         list?.map((v: any) => (
           <Card
             key={v.id}
@@ -204,14 +233,14 @@ function ListPelayananSurat({ status }: { status: StatusKey }) {
               <Flex align="center" justify="space-between">
                 <Flex direction={"column"}>
                   <Title order={3} c="gray.2">
-                    {v.title}
+                    {v.category}
                   </Title>
                   <Group>
                     <Title order={6} c="gray.5">
-                      #{v.noPengaduan}
+                      #{v.noPengajuan}
                     </Title>
                     <Text size="sm" c="dimmed">
-                      {v.updatedAt}
+                      {String(v.updatedAt)}
                     </Text>
                   </Group>
                 </Flex>
@@ -227,7 +256,7 @@ function ListPelayananSurat({ status }: { status: StatusKey }) {
                         : v.status === "selesai"
                           ? "blue"
                           : v.status === "dikerjakan"
-                            ? "purple"
+                            ? "gray"
                             : "yellow"
                   }
                   style={{ textTransform: "none" }}
@@ -241,28 +270,25 @@ function ListPelayananSurat({ status }: { status: StatusKey }) {
                   <Group gap="xs">
                     <IconClockHour3 size={20} color="white" />
                     <Text size="md" c="white">
-                      Tanggal Aduan
+                      Tanggal Ajuan
                     </Text>
                   </Group>
-                  <Text size="md">{v.createdAt}</Text>
+                  <Text size="md">
+                    {toDate(v.createdAt).toLocaleDateString("id-ID", {
+                      day: "numeric",
+                      month: "long",
+                      year: "numeric",
+                    })}
+                  </Text>
                 </Flex>
                 <Flex direction={"column"} justify="flex-start">
                   <Group gap="xs">
-                    <IconMapPin size={20} color="white" />
+                    <IconUser size={20} color="white" />
                     <Text size="md" c="white">
-                      Lokasi
+                      Warga
                     </Text>
                   </Group>
-                  <Text size="md">{v.location}</Text>
-                </Flex>
-                <Flex direction={"column"} justify="flex-start">
-                  <Group gap="xs">
-                    <IconAlignJustified size={20} color="white" />
-                    <Text size="md" c="white">
-                      Detail
-                    </Text>
-                  </Group>
-                  <Text size="md">{v.detail}</Text>
+                  <Text size="md">{v.warga}</Text>
                 </Flex>
               </Stack>
             </Stack>

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

@@ -1,3 +1,4 @@
+import ModalFile from "@/components/ModalFile";
 import notification from "@/components/notificationGlobal";
 import apiFetch from "@/lib/apiFetch";
 import {
@@ -10,7 +11,6 @@ import {
   Flex,
   Grid,
   Group,
-  Image,
   Modal,
   Stack,
   Table,
@@ -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";
@@ -57,7 +58,12 @@ export default function DetailPengaduanPage() {
       <Grid>
         <Grid.Col span={8}>
           <Stack gap={"xl"}>
-            <DetailDataPengaduan data={data?.data?.pengaduan} onAction={() => { mutate(); }} />
+            <DetailDataPengaduan
+              data={data?.data?.pengaduan}
+              onAction={() => {
+                mutate();
+              }}
+            />
             <DetailDataHistori data={data?.data?.history} />
           </Stack>
         </Grid.Col>
@@ -69,19 +75,31 @@ export default function DetailPengaduanPage() {
   );
 }
 
-function DetailDataPengaduan({ data, onAction }: { data: any, onAction: () => void }) {
+function DetailDataPengaduan({
+  data,
+  onAction,
+}: {
+  data: any | null;
+  onAction: () => void;
+}) {
   const [opened, { open, close }] = useDisclosure(false);
   const [catModal, setCatModal] = useState<"tolak" | "terima">("tolak");
-  const [imageSrc, setImageSrc] = useState<string | null>(null);
-  const [openedModalImage, { open: openModalImage, close: closeModalImage }] =
-    useDisclosure(false);
+  const [openedPreview, setOpenedPreview] = useState(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();
   }, []);
@@ -90,9 +108,16 @@ function DetailDataPengaduan({ data, onAction }: { data: any, onAction: () => vo
     try {
       const res = await apiFetch.api.pengaduan["update-status"].post({
         id: data?.id,
-        status: cat == 'tolak' ? 'ditolak' : data.status == 'antrian' ? 'diterima' : data.status == 'diterima' ? 'dikerjakan' : 'selesai',
+        status:
+          cat == "tolak"
+            ? "ditolak"
+            : data.status == "antrian"
+              ? "diterima"
+              : data.status == "diterima"
+                ? "dikerjakan"
+                : "selesai",
         keterangan: keterangan,
-        idUser: host?.id ?? ""
+        idUser: host?.id ?? "",
       });
 
       if (res?.status === 200) {
@@ -110,7 +135,6 @@ function DetailDataPengaduan({ data, onAction }: { data: any, onAction: () => vo
           type: "error",
         });
       }
-
     } catch (error) {
       console.error(error);
       notification({
@@ -119,11 +143,10 @@ function DetailDataPengaduan({ data, onAction }: { data: any, onAction: () => vo
         type: "error",
       });
     }
-  }
+  };
 
   return (
     <>
-
       {/* MODAL KONFIRMASI */}
       <Modal
         opened={opened}
@@ -138,24 +161,46 @@ function DetailDataPengaduan({ data, onAction }: { data: any, onAction: () => vo
                 Anda yakin ingin menolak pengaduan ini? Berikan alasan penolakan
               </Text>
 
-              <Textarea size="md" minRows={5} value={keterangan} onChange={(e) => setKeterangan(e.target.value)} />
+              <Textarea
+                size="md"
+                minRows={5}
+                value={keterangan}
+                onChange={(e) => setKeterangan(e.target.value)}
+              />
               <Group justify="center" grow>
                 <Button variant="light" onClick={close}>
                   Batal
                 </Button>
-                <Button variant="filled" color="red" disabled={keterangan.length < 1} onClick={() => handleKonfirmasi("tolak")}>
+                <Button
+                  variant="filled"
+                  color="red"
+                  disabled={keterangan.length < 1}
+                  onClick={() => handleKonfirmasi("tolak")}
+                >
                   Tolak
                 </Button>
               </Group>
             </>
           ) : (
             <>
-              <Text>Anda yakin ingin {data?.status == 'antrian' ? 'menerima' : data.status == 'diterima' ? 'mengerjakan' : 'menyelesaikan'} pengaduan ini?</Text>
+              <Text>
+                Anda yakin ingin{" "}
+                {data?.status == "antrian"
+                  ? "menerima"
+                  : data.status == "diterima"
+                    ? "mengerjakan"
+                    : "menyelesaikan"}{" "}
+                pengaduan ini?
+              </Text>
               <Group justify="center" grow>
                 <Button variant="light" onClick={close}>
                   Tidak
                 </Button>
-                <Button variant="filled" color="green" onClick={() => handleKonfirmasi("terima")}>
+                <Button
+                  variant="filled"
+                  color="green"
+                  onClick={() => handleKonfirmasi("terima")}
+                >
                   Ya
                 </Button>
               </Group>
@@ -164,16 +209,13 @@ function DetailDataPengaduan({ data, onAction }: { data: any, onAction: () => vo
         </Stack>
       </Modal>
 
-
       {/* MODAL GAMBAR */}
-      <Modal
-        opened={openedModalImage}
-        onClose={closeModalImage}
-        title="Gambar Pengaduan"
-        overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
-      >
-        <Image src={imageSrc!} />
-      </Modal>
+      <ModalFile
+        open={openedPreview && !_.isEmpty(data?.image)}
+        onClose={() => setOpenedPreview(false)}
+        folder="pengaduan"
+        fileName={data?.image}
+      />
 
       <Card
         radius="md"
@@ -256,9 +298,20 @@ 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={() => {
+                        setOpenedPreview(true);
+                      }}
+                    >
+                      Lihat Gambar
+                    </Anchor>
+                  ) : (
+                    <Text size="md" c="white">
+                      -
+                    </Text>
+                  )}
                 </Flex>
               </Stack>
             </Grid.Col>
@@ -273,70 +326,76 @@ function DetailDataPengaduan({ data, onAction }: { data: any, onAction: () => vo
                     {_.upperFirst(data?.detail)}
                   </Text>
                 </Flex>
-                {
-                  data?.keterangan && (
-                    <Flex direction={"column"} justify="flex-start">
-                      <Group gap="xs">
-                        <IconInfoTriangle size={20} />
-                        <Text size="md">Keterangan</Text>
-                      </Group>
-                      <Text size="md" c={"white"}>
-                        {_.upperFirst(data?.keterangan)}
-                      </Text>
-                    </Flex>
-                  )
-                }
+                {data?.keterangan && (
+                  <Flex direction={"column"} justify="flex-start">
+                    <Group gap="xs">
+                      <IconInfoTriangle size={20} />
+                      <Text size="md">Keterangan</Text>
+                    </Group>
+                    <Text size="md" c={"white"}>
+                      {_.upperFirst(data?.keterangan)}
+                    </Text>
+                  </Flex>
+                )}
               </Stack>
             </Grid.Col>
             <Grid.Col span={12}>
-              {
-                data?.status === "antrian" ? (
-                  <Group justify="center" grow>
-                    <Button
-                      variant="light"
-                      onClick={() => {
-                        setCatModal("tolak");
-                        open();
-                      }}
-                    >
-                      Tolak
-                    </Button>
-                    <Button
-                      variant="filled"
-                      onClick={() => {
-                        setCatModal("terima");
-                        open();
-                      }}
-                    >
-                      Terima
-                    </Button>
-                  </Group>
-                ) : data?.status === "diterima" ? (
-                  <Group justify="center" grow>
-                    <Button
-                      variant="filled"
-                      onClick={() => {
-                        setCatModal("terima");
-                        open();
-                      }}
-                    >
-                      Kerjakan
-                    </Button>
-                  </Group>
-                ) : data?.status === "dikerjakan" ? (
-                  <Group justify="center" grow>
-                    <Button
-                      variant="filled"
-                      onClick={() => {
-                        setCatModal("terima");
-                        open();
-                      }}
-                    >
-                      Selesai
-                    </Button>
-                  </Group>
-                ) : <></>
-              }
+              {data?.status === "antrian" ? (
+                <Group justify="center" grow>
+                  <Button
+                    variant="light"
+                    disabled={!permissions.includes("pengaduan.antrian.tolak")}
+                    onClick={() => {
+                      setCatModal("tolak");
+                      open();
+                    }}
+                  >
+                    Tolak
+                  </Button>
+                  <Button
+                    variant="filled"
+                    disabled={!permissions.includes("pengaduan.antrian.terima")}
+                    onClick={() => {
+                      setCatModal("terima");
+                      open();
+                    }}
+                  >
+                    Terima
+                  </Button>
+                </Group>
+              ) : data?.status === "diterima" ? (
+                <Group justify="center" grow>
+                  <Button
+                    variant="filled"
+                    disabled={
+                      !permissions.includes("pengaduan.diterima.dikerjakan")
+                    }
+                    onClick={() => {
+                      setCatModal("terima");
+                      open();
+                    }}
+                  >
+                    Kerjakan
+                  </Button>
+                </Group>
+              ) : data?.status === "dikerjakan" ? (
+                <Group justify="center" grow>
+                  <Button
+                    variant="filled"
+                    disabled={
+                      !permissions.includes("pengaduan.dikerjakan.selesai")
+                    }
+                    onClick={() => {
+                      setCatModal("terima");
+                      open();
+                    }}
+                  >
+                    Selesai
+                  </Button>
+                </Group>
+              ) : (
+                <></>
+              )}
             </Grid.Col>
           </Grid>
         </Stack>
@@ -375,16 +434,25 @@ function DetailDataHistori({ data }: { data: any }) {
             </Table.Tr>
           </Table.Thead>
           <Table.Tbody>
-            {
-              data?.map((item: any) => (
-                <Table.Tr key={item.id}>
-                  <Table.Td style={{ whiteSpace: "nowrap" }}>{item.createdAt}</Table.Td>
-                  <Table.Td>{item.deskripsi}</Table.Td>
-                  <Table.Td>{item.status}</Table.Td>
-                  <Table.Td style={{ whiteSpace: "nowrap" }}>{item.nameUser ? item.nameUser : "-"}</Table.Td>
-                </Table.Tr>
-              ))
-            }
+            {data?.map((item: any) => (
+              <Table.Tr key={item.id}>
+                <Table.Td style={{ whiteSpace: "nowrap" }}>
+                  {item.createdAt.toLocaleString("id-ID", {
+                    day: "2-digit",
+                    month: "short",
+                    year: "numeric",
+                    hour: "2-digit",
+                    minute: "2-digit",
+                    hour12: false,
+                  })}
+                </Table.Td>
+                <Table.Td>{item.deskripsi}</Table.Td>
+                <Table.Td>{item.status}</Table.Td>
+                <Table.Td style={{ whiteSpace: "nowrap" }}>
+                  {item.nameUser ? item.nameUser : "-"}
+                </Table.Td>
+              </Table.Tr>
+            ))}
           </Table.Tbody>
         </Table>
       </Stack>

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

@@ -6,8 +6,10 @@ import {
   Container,
   Divider,
   Flex,
+  Grid,
   Group,
   Input,
+  Pagination,
   Stack,
   Tabs,
   Text,
@@ -124,22 +126,25 @@ function ListPengaduan({ status }: { status: StatusKey }) {
   const navigate = useNavigate();
   const [page, setPage] = useState(1);
   const [value, setValue] = useState("");
-  const { data, mutate, isLoading } = useSwr("/", async () => {
-    const res = await apiFetch.api.pengaduan.list.get({
+  const { data, mutate, isLoading } = useSwr("/", async () =>
+    apiFetch.api.pengaduan.list.get({
       query: {
         status,
         search: value,
         take: "",
-        page: "",
+        page: page.toString(),
       },
-    });
+    }),
+  );
 
-    return Array.isArray(res?.data) ? res.data : []; // ⬅ paksa return array
-  });
+  useShallowEffect(() => {
+    setPage(1);
+    mutate();
+  }, [status, value]);
 
   useShallowEffect(() => {
     mutate();
-  }, [status, value]);
+  }, [page]);
 
   useShallowEffect(() => {
     const unsubscribe = subscribe(state, () => mutate());
@@ -163,31 +168,48 @@ function ListPengaduan({ status }: { status: StatusKey }) {
       </Card>
     );
 
-  const list = data || [];
+  const list = data?.data?.data || [];
+  const total = data?.data?.total || 0;
+  const totalPage = data?.data?.totalPages || 1;
+  const pageSize = data?.data?.pageSize || 10;
+  const pageNow = data?.data?.page || 1;
+  const toDate = (d: any) => new Date(d);
 
   return (
     <Stack gap="xl">
-      <Group grow>
-        <Input
-          value={value}
-          placeholder="Cari pengaduan..."
-          onChange={(event) => setValue(event.currentTarget.value)}
-          leftSection={<IconSearch size={16} />}
-          rightSectionPointerEvents="all"
-          rightSection={
-            <CloseButton
-              aria-label="Clear input"
-              onClick={() => setValue("")}
-              style={{ display: value ? undefined : "none" }}
+      <Grid>
+        <Grid.Col span={9}>
+          <Input
+            value={value}
+            placeholder="Cari pengaduan..."
+            onChange={(event) => setValue(event.currentTarget.value)}
+            leftSection={<IconSearch size={16} />}
+            rightSectionPointerEvents="all"
+            rightSection={
+              <CloseButton
+                aria-label="Clear input"
+                onClick={() => setValue("")}
+                style={{ display: value ? undefined : "none" }}
+              />
+            }
+          />
+        </Grid.Col>
+        <Grid.Col span={3}>
+          <Group justify="flex-end">
+            <Text
+              size="sm"
+              c="gray.5"
+            >{`${pageSize * (page - 1) + 1} – ${Math.min(total, pageSize * page)} of ${total}`}</Text>
+            <Pagination
+              total={totalPage}
+              value={page}
+              onChange={setPage}
+              withPages={false}
             />
-          }
-        />
-        {/* <Group justify="flex-end">
-          <Text size="sm">Menampilkan {Number(data?.data?.length) * (page - 1) + 1} – {Math.min(10, Number(data?.data?.length) * page)} dari {Number(data?.data?.length)}</Text>
-          <Pagination total={Number(data?.data?.length)} value={page} onChange={setPage} withPages={false} />
-        </Group> */}
-      </Group>
-      {list.length === 0 ? (
+          </Group>
+        </Grid.Col>
+      </Grid>
+      {Array.isArray(list) && list.length === 0 ? (
         <Flex justify="center" align="center" py={"xl"}>
           <Stack gap={4} align="center">
             <IconFileSad size={32} color="gray" />
@@ -197,7 +219,8 @@ function ListPengaduan({ status }: { status: StatusKey }) {
           </Stack>
         </Flex>
       ) : (
-        Array.isArray(list) && list?.map((v: any) => (
+        Array.isArray(list) &&
+        list?.map((v: any) => (
           <Card
             key={v.id}
             radius="lg"
@@ -224,7 +247,7 @@ function ListPengaduan({ status }: { status: StatusKey }) {
                       #{v.noPengaduan}
                     </Title>
                     <Text size="sm" c="dimmed">
-                      {v.updatedAt}
+                      {String(v.updatedAt)}
                     </Text>
                   </Group>
                 </Flex>
@@ -257,7 +280,13 @@ function ListPengaduan({ status }: { status: StatusKey }) {
                       Tanggal Aduan
                     </Text>
                   </Group>
-                  <Text size="md">{v.createdAt}</Text>
+                  <Text size="md">
+                    {toDate(v.createdAt).toLocaleDateString("id-ID", {
+                      day: "numeric",
+                      month: "long",
+                      year: "numeric",
+                    })}
+                  </Text>
                 </Flex>
                 <Flex direction={"column"} justify="flex-start">
                   <Group gap="xs">

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

@@ -2,32 +2,87 @@ 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 {
-  Button,
-  Card,
-  Container,
-  Divider,
-  Flex,
-  Grid,
-  NavLink,
-  Stack,
-  Table,
-  Title,
-} from "@mantine/core";
+import apiFetch from "@/lib/apiFetch";
+import { Card, Container, Grid, NavLink } from "@mantine/core";
 import {
   IconBuildingBank,
   IconCategory2,
   IconMailSpark,
   IconUserCog,
+  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 +99,19 @@ 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 +127,47 @@ 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/detail_warga_page.tsx

@@ -37,10 +37,13 @@ export default function DetailWargaPage() {
     mutate();
   }, []);
 
-
   return (
     <>
-      <LoadingOverlay visible={isLoading} zIndex={1000} overlayProps={{ radius: "sm", blur: 2 }} />
+      <LoadingOverlay
+        visible={isLoading}
+        zIndex={1000}
+        overlayProps={{ radius: "sm", blur: 2 }}
+      />
       <Container size="xl" py="xl" w={"100%"}>
         <Grid>
           <Grid.Col span={4}>
@@ -48,18 +51,29 @@ export default function DetailWargaPage() {
           </Grid.Col>
           <Grid.Col span={8}>
             <Stack gap={"xl"}>
-              <DetailDataHistori data={data?.data?.pengaduan} kategori="pengaduan" />
-              <DetailDataHistori data={data?.data?.pelayanan} kategori="pelayanan" />
+              <DetailDataHistori
+                data={data?.data?.pengaduan}
+                kategori="pengaduan"
+              />
+              <DetailDataHistori
+                data={data?.data?.pelayanan}
+                kategori="pelayanan"
+              />
             </Stack>
           </Grid.Col>
         </Grid>
       </Container>
     </>
-
   );
 }
 
-function DetailDataHistori({ data, kategori }: { data: any, kategori: 'pengaduan' | 'pelayanan' }) {
+function DetailDataHistori({
+  data,
+  kategori,
+}: {
+  data: any;
+  kategori: "pengaduan" | "pelayanan";
+}) {
   const navigate = useNavigate();
 
   return (
@@ -85,43 +99,47 @@ function DetailDataHistori({ data, kategori }: { data: any, kategori: 'pengaduan
           <Table.Thead>
             <Table.Tr>
               <Table.Th>No {_.upperFirst(kategori)}</Table.Th>
-              <Table.Th>{kategori == "pengaduan" ? "Judul" : "Kategori"}</Table.Th>
+              <Table.Th>
+                {kategori == "pengaduan" ? "Judul" : "Kategori"}
+              </Table.Th>
               <Table.Th>Status</Table.Th>
               <Table.Th></Table.Th>
             </Table.Tr>
           </Table.Thead>
           <Table.Tbody>
-            {
-              data?.length > 0 ? (
-                data?.map((item: any, index: number) => (
-                  <Table.Tr key={index}>
-                    <Table.Td>{item.noPengaduan}</Table.Td>
-                    <Table.Td>{kategori == "pengaduan" ? item.title : item.category}</Table.Td>
-                    <Table.Td>{item.status}</Table.Td>
-                    <Table.Td>
-                      <Button
-                        variant="outline"
-                        onClick={() => {
-                          kategori == "pengaduan" ?
-                            navigate(
+            {data?.length > 0 ? (
+              data?.map((item: any, index: number) => (
+                <Table.Tr key={index}>
+                  <Table.Td>{item.noPengaduan}</Table.Td>
+                  <Table.Td>
+                    {kategori == "pengaduan" ? item.title : item.category}
+                  </Table.Td>
+                  <Table.Td>{item.status}</Table.Td>
+                  <Table.Td>
+                    <Button
+                      variant="outline"
+                      onClick={() => {
+                        kategori == "pengaduan"
+                          ? navigate(
                               `/scr/dashboard/pengaduan/detail?id=${item.id}`,
-                            ) :
-                            navigate(
-                              `/scr/dashboard/pelayanan-surat/detail-pelayanan?id=${item.id}`,
                             )
-                        }}
-                      >
-                        Detail
-                      </Button>
-                    </Table.Td>
-                  </Table.Tr>
-                ))
-              ) : (
-                <Table.Tr>
-                  <Table.Td colSpan={4} align="center">Tidak ada data</Table.Td>
+                          : navigate(
+                              `/scr/dashboard/pelayanan-surat/detail-pelayanan?id=${item.id}`,
+                            );
+                      }}
+                    >
+                      Detail
+                    </Button>
+                  </Table.Td>
                 </Table.Tr>
-              )
-            }
+              ))
+            ) : (
+              <Table.Tr>
+                <Table.Td colSpan={4} align="center">
+                  Tidak ada data
+                </Table.Td>
+              </Table.Tr>
+            )}
           </Table.Tbody>
         </Table>
       </Stack>

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

@@ -6,9 +6,12 @@ import {
   Container,
   Divider,
   Flex,
+  Group,
   Input,
+  Pagination,
   Stack,
   Table,
+  Text,
   Title,
 } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
@@ -19,22 +22,31 @@ import useSWR from "swr";
 
 export default function ListWargaPage() {
   const navigate = useNavigate();
-  const { data, mutate, isLoading } = useSWR("/", () =>
+  const [pages, setPages] = useState(1);
+  const [value, setValue] = useState("");
+  const { data, mutate } = useSWR("/", () =>
     apiFetch.api.warga.list.get({
       query: {
         search: value,
+        page: pages,
       },
     }),
   );
 
-  const list = data?.data || [];
-
-  const [value, setValue] = useState("");
+  const list = data?.data?.data || [];
+  const total = data?.data?.total || 0;
+  const totalPage = data?.data?.totalPages || 1;
+  const pageSize = data?.data?.pageSize || 10;
+  const pageNow = data?.data?.page || 1;
 
   useShallowEffect(() => {
+    setPages(1);
     mutate();
   }, [value]);
 
+  useShallowEffect(() => {
+    mutate();
+  }, [pages]);
 
   return (
     <Container size="xl" py="xl" w={"100%"}>
@@ -48,10 +60,10 @@ export default function ListWargaPage() {
         }}
       >
         <Stack gap="md">
+          <Title order={3} c="gray.2">
+            List Data Warga
+          </Title>
           <Flex align="center" justify="space-between">
-            <Title order={3} c="gray.2">
-              List Data Warga
-            </Title>
             <Input
               value={value}
               placeholder="Cari warga..."
@@ -66,6 +78,15 @@ export default function ListWargaPage() {
                 />
               }
             />
+            <Group>
+              <Text size="sm">{`${pageSize * (pages - 1) + 1} – ${Math.min(total, pageSize * pages)} of ${total}`}</Text>
+              <Pagination
+                total={totalPage}
+                value={pages}
+                onChange={setPages}
+                withPages={false}
+              />
+            </Group>
           </Flex>
           <Divider my={0} />
           <Table>
@@ -77,32 +98,33 @@ export default function ListWargaPage() {
               </Table.Tr>
             </Table.Thead>
             <Table.Tbody>
-              {
-                list?.length === 0 ? (
-                  <Table.Tr>
-                    <Table.Td colSpan={3} align="center">Tidak ada data</Table.Td>
+              {Array.isArray(list) && list?.length === 0 ? (
+                <Table.Tr>
+                  <Table.Td colSpan={3} align="center">
+                    Tidak ada data
+                  </Table.Td>
+                </Table.Tr>
+              ) : (
+                Array.isArray(list) &&
+                list?.map((item, i) => (
+                  <Table.Tr key={i}>
+                    <Table.Td>{item.name}</Table.Td>
+                    <Table.Td w={250}>{item.phone}</Table.Td>
+                    <Table.Td w={150}>
+                      <Button
+                        variant="outline"
+                        onClick={() => {
+                          navigate(
+                            `/scr/dashboard/warga/detail-warga?id=${item.id}`,
+                          );
+                        }}
+                      >
+                        Detail
+                      </Button>
+                    </Table.Td>
                   </Table.Tr>
-                ) : (
-                  list?.map((item, i) => (
-                    <Table.Tr key={i}>
-                      <Table.Td>{item.name}</Table.Td>
-                      <Table.Td>{item.phone}</Table.Td>
-                      <Table.Td>
-                        <Button
-                          variant="outline"
-                          onClick={() => {
-                            navigate(
-                              `/scr/dashboard/warga/detail-warga?id=${item.id}`,
-                            );
-                          }}
-                        >
-                          Detail
-                        </Button>
-                      </Table.Td>
-                    </Table.Tr>
-                  ))
-                )
-              }
+                ))
+              )}
             </Table.Tbody>
           </Table>
         </Stack>

src/server/lib/create-surat.ts

@@ -0,0 +1,24 @@
+import { prisma } from "./prisma"
+
+export async function createSurat({ idPengajuan, idCategory, idWarga, noSurat }: { idPengajuan: string, idCategory: string, idWarga: string, noSurat: string }) {
+   try {
+      const surat = await prisma.suratPelayanan.create({
+         data: {
+            idPengajuanLayanan: idPengajuan,
+            idCategory,
+            idWarga,
+            noSurat,
+         }
+      })
+
+      if (!surat.id) {
+         return { success: false, message: 'gagal membuat surat' }
+      }
+
+      return { success: true, message: 'surat sudah dibuat' }
+   } catch (error) {
+      console.log(error)
+      return { success: false, message: 'gagal membuat surat' }
+   }
+
+}

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/mcp_tool_convert.ts

@@ -16,8 +16,11 @@ interface McpTool {
 
 /**
  * Convert OpenAPI 3.x JSON spec into MCP-compatible tool definitions.
+ * * @param openApiJson OpenAPI JSON specification object.
+ * @param filterTag A string or array of strings. Operations must match at least one tag 
+ * (case-insensitive partial match).
  */
-export function convertOpenApiToMcpTools(openApiJson: any, filterTag: string): McpTool[] {
+export function convertOpenApiToMcpTools(openApiJson: any, filterTag: string | string[]): McpTool[] {
     const tools: McpTool[] = [];
     
     if (!openApiJson || typeof openApiJson !== "object") {
@@ -25,6 +28,15 @@ export function convertOpenApiToMcpTools(openApiJson: any, filterTag: string): M
         return tools;
     }
 
+    // Cast filterTag to an array and normalize to lowercase for comparison
+    const filterTags = _.castArray(filterTag)
+                        .filter(t => typeof t === "string" && t.trim() !== "")
+                        .map(t => t.toLowerCase());
+
+    if (filterTags.length === 0) {
+        console.warn("Filter tag is empty or invalid. Returning all tools with tags.");
+    }
+
     const paths = openApiJson.paths || {};
     
     if (Object.keys(paths).length === 0) {
@@ -34,7 +46,6 @@ export function convertOpenApiToMcpTools(openApiJson: any, filterTag: string): M
 
     for (const [path, methods] of Object.entries(paths)) {
         if (!path || typeof path !== "string") continue;
-        if (path.startsWith("/mcp")) continue;
 
         if (!methods || typeof methods !== "object") continue;
 
@@ -45,10 +56,19 @@ export function convertOpenApiToMcpTools(openApiJson: any, filterTag: string): M
             if (!operation || typeof operation !== "object") continue;
 
             const tags: string[] = Array.isArray(operation.tags) ? operation.tags : [];
+            const lowerCaseTags = tags.map(t => typeof t === "string" ? t.toLowerCase() : "");
 
-            if (!tags.length || !tags.some(t => 
-                typeof t === "string" && t.toLowerCase().includes(filterTag)
-            )) continue;
+            // ✅ MODIFIKASI: Pengecekan filterTags
+            if (filterTags.length > 0) {
+                const isTagMatch = lowerCaseTags.some(opTag =>
+                    filterTags.some(fTag => opTag.includes(fTag))
+                );
+                
+                if (!isTagMatch) continue;
+            } else if (tags.length === 0) {
+                // Jika tidak ada filter, hanya proses operation yang memiliki tags
+                continue;
+            }
 
             try {
                 const tool = createToolFromOperation(path, method, operation, tags);
@@ -75,18 +95,20 @@ function createToolFromOperation(
     tags: string[]
 ): McpTool | null {
     try {
-        const rawName = _.snakeCase(operation.operationId || `${method}_${path}`) || "unnamed_tool";
-        const name = cleanToolName(rawName);
+        const rawName = _.snakeCase(`${operation.operationId}` || `${method}_${path}`) || "unnamed_tool";
+        const name = _.snakeCase(cleanToolName(operation.summary)) || cleanToolName(rawName);
 
         if (!name || name === "unnamed_tool") {
             console.warn(`Invalid tool name for ${method} ${path}`);
             return null;
         }
 
-        const description =
+        let description =
             operation.description ||
-            operation.summary ||
-            `Execute ${method.toUpperCase()} ${path}`;
+            operation.summary;
+
+        description += `\n
+        Execute ${method.toUpperCase()} ${path}`;
 
         // ✅ Extract schema berdasarkan method
         let schema;
@@ -343,9 +365,8 @@ function cleanToolName(name: string): string {
             .replace(/[^a-zA-Z0-9_]/g, "_")
             .replace(/_+/g, "_")
             .replace(/^_|_$/g, "")
-            .replace(/^(get|post|put|delete|patch|api)_/i, "")
-            .replace(/^(get_|post_|put_|delete_|patch_|api_)+/gi, "")
-            .replace(/(^_|_$)/g, "")
+            // ❗️ METHOD PREFIX TIDAK DIHAPUS LAGI (agar tidak duplicate)
+            .toLowerCase()
             || "unnamed_tool";
     } catch (error) {
         console.error("Error cleaning tool name:", error);
@@ -353,10 +374,14 @@ function cleanToolName(name: string): string {
     }
 }
 
+
 /**
  * Ambil OpenAPI JSON dari endpoint dan konversi ke tools MCP
+ * * @param url URL of the OpenAPI spec.
+ * @param filterTag A string or array of strings. Operations must match at least one tag 
+ * (case-insensitive partial match).
  */
-export async function getMcpTools(url: string, filterTag: string): Promise<McpTool[]> {
+export async function getMcpTools(url: string, filterTag: string | string[]): Promise<McpTool[]> {
     try {
         
         console.log(`Fetching OpenAPI spec from: ${url}`);
@@ -370,12 +395,12 @@ export async function getMcpTools(url: string, filterTag: string): Promise<McpTo
         const openApiJson = await response.json();
         const tools = convertOpenApiToMcpTools(openApiJson, filterTag);
         
-        console.log(`✅ Successfully generated ${tools.length} MCP tools`);
+        const filterStr = _.castArray(filterTag).join(", ");
+        console.log(`✅ Successfully generated ${tools.length} MCP tools for tags: [${filterStr}]`);
         
         return tools;
     } catch (error) {
         console.error("Error fetching MCP tools:", error);
         throw error;
     }
-}
-
+}

src/server/lib/normalizePhone.ts

@@ -1,6 +1,12 @@
+export function isValidPhone(number: string): boolean {
+   const clean = number.replace(/[\s.-]/g, ""); // hapus spasi, titik, strip
+   const regex = /^(?:\+62|62|0)8\d{7,12}$/;
+   return regex.test(clean);
+}
+
 export function normalizePhoneNumber({ phone }: { phone: string }) {
    // Hapus semua spasi, tanda hubung, atau karakter non-digit (+ tetap dipertahankan untuk dicek)
-   let cleaned = phone.trim().replace(/[\s-]/g, "");
+   let cleaned = phone.trim().replace(/[\s.-]/g, "");
 
    // Jika diawali dengan +62 → ganti jadi 62
    if (cleaned.startsWith("+62")) {

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/lib/slug_converter.ts

@@ -0,0 +1,18 @@
+export function toSlug(text: string): string {
+   return encodeURIComponent(
+      text
+         .toLowerCase()
+         .trim()
+         .replace(/\s+/g, "-")
+   );
+}
+
+export function fromSlug(slug: string): string {
+   return decodeURIComponent(slug)
+      .replace(/-/g, " ")
+      .replace(/\b\w/g, c => c.toUpperCase());
+}
+
+export function capitalizeWords(text: string): string {
+   return text.replace(/\b\w/g, c => c.toUpperCase());
+}

src/server/routes/auth_route.ts

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { prisma } from '@/server/lib/prisma'
 import { jwt as jwtPlugin, type JWTPayloadSpec } from '@elysiajs/jwt'
 import Elysia, { t, type Cookie, type HTTPHeaders, type StatusMap } from 'elysia'
 import { type ElysiaCookie } from 'elysia/cookies'
-import { prisma } from '@/server/lib/prisma'
 
 const secret = process.env.JWT_SECRET
 if (!secret) {
@@ -75,6 +75,15 @@ async function login({
 
     const user = await prisma.user.findUnique({
       where: { email },
+      select: {
+        id: true,
+        password: true,
+        Role: {
+          select: {
+            permissions: true
+          }
+        }
+      }
     })
 
     if (!user) {
@@ -87,6 +96,12 @@ async function login({
       return { message: 'Invalid password' }
     }
 
+    const rawPermissions = user.Role?.permissions;
+
+    const akses = Array.isArray(rawPermissions)
+      ? rawPermissions[0]?.toString()
+      : undefined;
+
     const token = await issueToken({
       jwt,
       cookie,
@@ -94,7 +109,7 @@ async function login({
       role: 'user',
       expiresAt: Math.floor(Date.now() / 1000) + NINETY_YEARS,
     })
-    return { token }
+    return { token, akses }
   } catch (error) {
     console.error('Error logging in:', error)
     return {
@@ -146,7 +161,7 @@ const Auth = new Elysia({
       detail: {
         summary: 'logout',
         description: 'Logout (clear token cookie)',
-        
+
       },
     }
   )

src/server/routes/dashboard_route.ts

@@ -0,0 +1,278 @@
+import Elysia from "elysia";
+import { getLastUpdated } from "../lib/get-last-updated";
+import { prisma } from "../lib/prisma";
+
+const DashboardRoute = new Elysia({
+   prefix: "dashboard",
+   tags: ["dashboard"],
+})
+
+   .get("/count", async () => {
+      // ---- RANGE HARI INI ----
+      const now = new Date();
+
+      const startOfToday = new Date(now);
+      startOfToday.setHours(0, 0, 0, 0);
+
+      const endOfToday = new Date(now);
+      endOfToday.setHours(23, 59, 59, 999);
+
+      // ---- RANGE KEMARIN ----
+      const yesterday = new Date(now);
+      yesterday.setDate(yesterday.getDate() - 1);
+
+      const startOfYesterday = new Date(yesterday);
+      startOfYesterday.setHours(0, 0, 0, 0);
+
+      const endOfYesterday = new Date(yesterday);
+      endOfYesterday.setHours(23, 59, 59, 999);
+
+      // ---- QUERY ----
+
+      const dataWarga = await prisma.warga.count();
+
+      // Pengaduan
+      const dataPengaduanToday = await prisma.pengaduan.count({
+         where: {
+            isActive: true,
+            status: "antrian",
+            createdAt: {
+               gte: startOfToday,
+               lte: endOfToday,
+            },
+         },
+      });
+
+      const dataPengaduanYesterday = await prisma.pengaduan.count({
+         where: {
+            isActive: true,
+            status: "antrian",
+            createdAt: {
+               gte: startOfYesterday,
+               lte: endOfYesterday,
+            },
+         },
+      });
+
+      const kenaikanPengaduan =
+         dataPengaduanYesterday === 0
+            ? dataPengaduanToday > 0
+               ? dataPengaduanToday * 100
+               : 0
+            : ((dataPengaduanToday - dataPengaduanYesterday) / dataPengaduanYesterday) * 100;
+
+      // Pelayanan
+      const dataPelayananToday = await prisma.pelayananAjuan.count({
+         where: {
+            isActive: true,
+            status: "antrian",
+            createdAt: {
+               gte: startOfToday,
+               lte: endOfToday,
+            },
+         },
+      });
+
+      const dataPelayananYesterday = await prisma.pelayananAjuan.count({
+         where: {
+            isActive: true,
+            status: "antrian",
+            createdAt: {
+               gte: startOfYesterday,
+               lte: endOfYesterday,
+            },
+         },
+      });
+
+      const kenaikanPelayanan =
+         dataPelayananYesterday === 0
+            ? dataPelayananToday > 0
+               ? dataPelayananToday * 100
+               : 0
+            : ((dataPelayananToday - dataPelayananYesterday) / dataPelayananYesterday) * 100;
+
+      // ---- FINAL OUTPUT ----
+
+      const dataFix = {
+         warga: dataWarga,
+         pengaduan: {
+            today: dataPengaduanToday,
+            yesterday: dataPengaduanYesterday,
+            kenaikan: Number(kenaikanPengaduan.toFixed(2)), // dalam persen
+         },
+         pelayanan: {
+            today: dataPelayananToday,
+            yesterday: dataPelayananYesterday,
+            kenaikan: Number(kenaikanPelayanan.toFixed(2)), // dalam persen
+         },
+      };
+
+      return dataFix;
+
+   }, {
+      detail: {
+         summary: "Dashboard - Menghitung Data",
+         description: `tool untuk menghitung data pengaduan dan pelayanan yg masuk hari ini dan data warga`,
+      }
+   })
+   .get("/last-update", async () => {
+      const dataPengaduan = await prisma.pengaduan.findMany({
+         skip: 0,
+         take: 5,
+         orderBy: {
+            updatedAt: "desc",
+         },
+      })
+
+      const dataPengaduanFix = dataPengaduan.map((item) => {
+         return {
+            noPengaduan: item.noPengaduan,
+            id: item.id,
+            title: item.title,
+            status: item.status,
+            updatedAt: 'terakhir diperbarui ' + getLastUpdated(item.updatedAt),
+         }
+      })
+
+      const dataPelayanan = await prisma.pelayananAjuan.findMany({
+         skip: 0,
+         take: 5,
+         orderBy: {
+            updatedAt: "desc",
+         },
+         select: {
+            id: true,
+            status: true,
+            noPengajuan: true,
+            updatedAt: true,
+            CategoryPelayanan: {
+               select: {
+                  name: true,
+               }
+            }
+         }
+      })
+
+      const dataPelayananFix = dataPelayanan.map((item) => {
+         return {
+            id: item.id,
+            noPengajuan: item.noPengajuan,
+            title: item.CategoryPelayanan.name,
+            status: item.status,
+            updatedAt: 'terakhir diperbarui ' + getLastUpdated(item.updatedAt),
+         }
+      })
+
+
+
+      const dataFix = {
+         pengaduan: dataPengaduanFix,
+         pelayanan: dataPelayananFix,
+      }
+
+      return dataFix;
+   }, {
+      detail: {
+         summary: "Dashboard - List data pengaduan dan pelayanan terupdate",
+         description: `tool untuk mendapatkan list data pengaduan dan pelayanan yg terupdate`,
+      }
+   })
+   .get("/grafik", async () => {
+      const now = new Date();
+
+      const start7Days = new Date(now);
+      start7Days.setDate(start7Days.getDate() - 7);
+      start7Days.setHours(0, 0, 0, 0);
+
+      const endToday = new Date(now);
+      endToday.setHours(23, 59, 59, 999);
+
+      // Ambil semua data pengaduan & pelayanan dalam 7 hari
+      const pengaduan = await prisma.pengaduan.findMany({
+         where: {
+            createdAt: {
+               gte: start7Days,
+               lte: endToday,
+            },
+            isActive: true
+         },
+         select: {
+            createdAt: true
+         }
+      });
+
+
+      const pelayanan = await prisma.pelayananAjuan.findMany({
+         where: {
+            createdAt: {
+               gte: start7Days,
+               lte: endToday,
+            },
+            isActive: true
+         },
+         select: {
+            createdAt: true
+         }
+      });
+
+      // --- BUAT RANGE TANGGAL 7 HARI ---
+      const resultMap: Record<string, { pengaduan: number; pelayanan: number }> = {};
+
+      for (let i = 0; i < 8; i++) {
+         const d = new Date(start7Days);
+         d.setDate(d.getDate() + i);
+
+         const formatted = d.toLocaleDateString("id-ID", {
+            day: "numeric",
+            month: "long"
+         });
+
+         resultMap[formatted] = { pengaduan: 0, pelayanan: 0 };
+      }
+
+      // --- HITUNG PENGADUAN PER HARI ---
+      pengaduan.forEach((item) => {
+         const t = item.createdAt.toLocaleDateString("id-ID", {
+            day: "numeric",
+            month: "long"
+         });
+
+         if (resultMap[t]) {
+            resultMap[t].pengaduan += 1;
+         }
+      });
+
+      // --- HITUNG PELAYANAN PER HARI ---
+      pelayanan.forEach((item) => {
+         const t = item.createdAt.toLocaleDateString("id-ID", {
+            day: "numeric",
+            month: "long"
+         });
+
+         if (resultMap[t]) {
+            resultMap[t].pelayanan += 1;
+         }
+      });
+
+      // --- KONVERSI KE FORMAT FINAL ---
+      const source = Object.keys(resultMap).map((tanggal) => ({
+         tanggal,
+         pengaduan: resultMap[tanggal]?.pengaduan,
+         pelayanan: resultMap[tanggal]?.pelayanan,
+      }));
+
+      return {
+         dimensions: ["tanggal", "pengaduan", "pelayanan"],
+         source,
+      };
+   }, {
+      detail: {
+         summary: "Dashboard - Grafik data pengaduan dan pelayanan",
+         description: `tool untuk mendapatkan grafik data pengaduan dan pelayanan`,
+      }
+   })
+   ;
+
+;
+
+export default DashboardRoute

src/server/routes/mcp_route.ts

@@ -1,250 +1,485 @@
+// server/mcpServer.ts
 import { Elysia } from "elysia";
 import { getMcpTools } from "../lib/mcp_tool_convert";
 
-var tools = [] as any[];
-const OPENAPI_URL = process.env.BUN_PUBLIC_BASE_URL + "/docs/json";
-const FILTER_TAG = "mcp";
+/**
+ * Refactored Elysia-based MCP server
+ * - Fixes inconsistent "text/json" handling by normalizing response extraction
+ * - Robust executeTool: supports path/query/header/cookie/body params (if provided in x-props)
+ * - Proper baseUrl/path normalization and URLSearchParams building (repeated keys for arrays)
+ * - Consistent MCP content conversion: always returns either { type: 'json', data } or { type: 'text', text }
+ * - Safer error handling, batch support, Promise.allSettled to avoid full failure on single-item error
+ * - Lightweight in-memory tools cache with explicit init endpoint (keeps original behavior)
+ */
 
+/* -------------------------
+   Environment & Globals
+   ------------------------- */
 if (!process.env.BUN_PUBLIC_BASE_URL) {
-    throw new Error("BUN_PUBLIC_BASE_URL environment variable is not set");
+  throw new Error("BUN_PUBLIC_BASE_URL environment variable is not set");
 }
 
-// =====================
-// MCP Protocol Types
-// =====================
+const OPENAPI_URL = `${process.env.BUN_PUBLIC_BASE_URL.replace(/\/+$/, "")}/docs/json`;
+const FILTER_TAG = "mcp";
+
+let tools: any[] = [];
+
+/* -------------------------
+   MCP Types
+   ------------------------- */
 type JSONRPCRequest = {
-    jsonrpc: "2.0";
-    id: string | number;
-    method: string;
-    params?: any;
+  jsonrpc: "2.0";
+  id: string | number;
+  method: string;
+  params?: any;
+  credentials?: any;
 };
 
 type JSONRPCResponse = {
-    jsonrpc: "2.0";
-    id: string | number;
-    result?: any;
-    error?: {
-        code: number;
-        message: string;
-        data?: any;
-    };
+  jsonrpc: "2.0";
+  id: string | number | null;
+  result?: any;
+  error?: { code: number; message: string; data?: any };
 };
 
-// =====================
-// Tool Executor
-// =====================
+/* -------------------------
+   Helpers
+   ------------------------- */
+
+/** Ensure baseUrl doesn't end with slash; ensure path begins with slash */
+function joinBasePath(base: string, path: string) {
+  const normalizedBase = base.replace(/\/+$/, "");
+  const normalizedPath = path ? (path.startsWith("/") ? path : `/${path}`) : "";
+  return `${normalizedBase}${normalizedPath}`;
+}
+
+/** Serialize query object to repeated-key QS when arrays provided */
+function buildQueryString(q: Record<string, any>): string {
+  const parts: string[] = [];
+  for (const [k, v] of Object.entries(q)) {
+    if (v === undefined || v === null) continue;
+    if (Array.isArray(v)) {
+      for (const item of v) {
+        parts.push(`${encodeURIComponent(k)}=${encodeURIComponent(String(item))}`);
+      }
+    } else if (typeof v === "object") {
+      parts.push(`${encodeURIComponent(k)}=${encodeURIComponent(JSON.stringify(v))}`);
+    } else {
+      parts.push(`${encodeURIComponent(k)}=${encodeURIComponent(String(v))}`);
+    }
+  }
+  return parts.length ? `?${parts.join("&")}` : "";
+}
+
+/** Safely extract "useful" payload from a fetch result:
+ * Prefer resp.data if present, otherwise resp itself.
+ * If resp is a string, keep as string.
+ */
+function extractRaw(result: { data: any } | any) {
+  // If result shaped as { data: ... } prefer inner .data
+  if (result && typeof result === "object" && "data" in result) {
+    return result.data;
+  }
+  return result;
+}
+
+/** Convert various payloads into MCP content shape */
+function convertToMcpContent(payload: any) {
+  if (typeof payload === "string") {
+    return { type: "text", text: payload };
+  }
+
+  if (payload == null) {
+    return { type: "text", text: String(payload) };
+  }
+
+  // If payload looks like an image/audio wrapper produced by converter
+  if (payload?.__mcp_type === "image" && payload.base64) {
+    return { type: "image", data: payload.base64, mimeType: payload.mimeType || "image/png" };
+  }
+  if (payload?.__mcp_type === "audio" && payload.base64) {
+    return { type: "audio", data: payload.base64, mimeType: payload.mimeType || "audio/mpeg" };
+  }
+
+  // If already an object/array → return JSON
+  if (typeof payload === "object") {
+    return { type: "json", data: payload };
+  }
+
+  // Fallback — stringify
+  try {
+    return { type: "text", text: JSON.stringify(payload) };
+  } catch {
+    return { type: "text", text: String(payload) };
+  }
+}
+
+/* -------------------------
+   executeTool (robust)
+   ------------------------- */
+/**
+ * Execute a tool converted from OpenAPI -> expected x-props shape:
+ * x-props may contain:
+ *  - method, path
+ *  - parameters: [{ name, in, required? }]
+ *
+ * If x.parameters present, we inspect args and place them accordingly.
+ */
 export async function executeTool(
-    tool: any,
-    args: Record<string, any> = {},
-    baseUrl: string
+  tool: any,
+  args: Record<string, any> = {},
+  baseUrl: string,
+  xPayload: Record<string, any> = {}
 ) {
-    const x = tool["x-props"] || {};
+  const x = tool["x-props"] || {};
+  const method = (x.method || "GET").toUpperCase();
 
-    const method = (x.method || "GET").toUpperCase();
-    const path = x.path || `/${tool.name}`;
-    const url = `${baseUrl}${path}`;
+  // Start with provided path (may contain {param})
+  let path = x.path ?? `/${tool.name}`;
 
-    const opts: RequestInit = {
-        method,
-        headers: { "Content-Type": "application/json" },
-    };
+  // Headers, cookies, query, body collection
+  const headers: Record<string, any> = {
+    "Content-Type": "application/json",
+    ...(x.defaultHeaders || {}),
+  };
+  const query: Record<string, any> = {};
+  const cookies: string[] = [];
+  let bodyPayload: any = undefined;
 
-    if (["POST", "PUT", "PATCH", "DELETE"].includes(method)) {
-        opts.body = JSON.stringify(args || {});
+  // If parameters described, map args accordingly
+  if (Array.isArray(x.parameters)) {
+    for (const p of x.parameters) {
+      try {
+        const name: string = p.name;
+        const value = args?.[name];
+
+        // skip undefined unless required — we let API validate required semantics
+        if (value === undefined) continue;
+
+        switch (p.in) {
+          case "path":
+            if (path.includes(`{${name}}`)) {
+              path = path.replace(new RegExp(`{${name}}`, "g"), encodeURIComponent(String(value)));
+            } else {
+              // fallback to query
+              query[name] = value;
+            }
+            break;
+
+          case "query":
+            query[name] = value;
+            break;
+
+          case "header":
+            headers[name] = value;
+            break;
+
+          case "cookie":
+            cookies.push(`${name}=${value}`);
+            break;
+
+          case "body":
+          case "requestBody":
+            bodyPayload = value;
+            break;
+
+          default:
+            // unknown location -> place into body
+            bodyPayload = bodyPayload ?? {};
+            bodyPayload[name] = value;
+            break;
+        }
+      } catch (err) {
+        // best-effort: skip problematic param
+        console.warn(`[MCP] Skipping parameter ${String(p?.name)} due to error:`, err);
+      }
     }
+  } else {
+    // no param descriptions: assume all args are body
+    bodyPayload = Object.keys(args || {}).length ? args : undefined;
+  }
 
-    const res = await fetch(url, opts);
-    const contentType = res.headers.get("content-type") || "";
-    const data = contentType.includes("application/json")
-        ? await res.json()
-        : await res.text();
+  if (cookies.length) {
+    headers["Cookie"] = cookies.join("; ");
+  }
 
-    return {
-        success: res.ok,
-        status: res.status,
-        method,
-        path,
-        data,
-    };
+  // Build full URL
+  const urlBase = baseUrl || process.env.BUN_PUBLIC_BASE_URL!;
+  let url = joinBasePath(urlBase, path);
+  const qs = buildQueryString(query);
+  if (qs) url += qs;
+
+  // Build RequestInit
+  const opts: RequestInit & { headers?: Record<string, any> } = { method, headers };
+
+  // Body handling for applicable methods
+  const bodyMethods = new Set(["POST", "PUT", "PATCH", "DELETE"]);
+  const contentTypeLower = (headers["Content-Type"] || "").toLowerCase();
+
+  if (bodyMethods.has(method) && bodyPayload !== undefined) {
+    // Support tiny formdata marker shape: { __formdata: true, entries: [ [k,v], ... ] }
+    if (bodyPayload && bodyPayload.__formdata === true && Array.isArray(bodyPayload.entries)) {
+      const form = new FormData();
+      for (const [k, v] of bodyPayload.entries) {
+        form.append(k, v as any);
+      }
+      // Let fetch set boundary
+      delete opts.headers!["Content-Type"];
+      opts.body = form as any;
+    } else if (contentTypeLower.includes("application/x-www-form-urlencoded")) {
+      opts.body = new URLSearchParams(bodyPayload as Record<string, string>).toString();
+    } else if (contentTypeLower.includes("multipart/form-data")) {
+      // If caller explicitly requested multipart but didn't pass FormData — convert object to form
+      const form = new FormData();
+      if (typeof bodyPayload === "object") {
+        for (const [k, v] of Object.entries(bodyPayload)) {
+          form.append(k, (v as any) as any);
+        }
+      } else {
+        form.append("payload", String(bodyPayload));
+      }
+      delete opts.headers!["Content-Type"];
+      opts.body = form as any;
+    } else {
+      // Default JSON
+      opts.body = JSON.stringify(bodyPayload);
+    }
+  }
+
+  // Execute fetch
+  console.log(`[MCP] → ${method} ${url}`);
+  for(const [key, value] of Object.entries(xPayload)) {
+    opts.headers![key] = value;
+  }
+  const res = await fetch(url, opts);
+
+  const resContentType = (res.headers.get("content-type") || "").toLowerCase();
+
+  let data: any;
+  try {
+    if (resContentType.includes("application/json")) {
+      data = await res.json();
+    } else {
+      data = await res.text();
+    }
+  } catch (err) {
+    // fallback to text
+    try {
+      data = await res.text();
+    } catch {
+      data = null;
+    }
+  }
+
+  return {
+    success: res.ok,
+    status: res.status,
+    method,
+    url,
+    path,
+    headers: res.headers,
+    data,
+  };
 }
 
-// =====================
-// MCP Handler (Async)
-// =====================
-async function handleMCPRequestAsync(
-    request: JSONRPCRequest
-): Promise<JSONRPCResponse> {
-    const { id, method, params } = request;
+/* -------------------------
+   JSON-RPC Handler
+   ------------------------- */
+async function handleMCPRequestAsync(request: JSONRPCRequest, xPayload: Record<string, any>): Promise<JSONRPCResponse> {
+  const { id, method, params } = request;
 
-    switch (method) {
-        case "initialize":
+  const makeError = (code: number, message: string, data?: any): JSONRPCResponse => ({
+    jsonrpc: "2.0",
+    id: id ?? null,
+    error: { code, message, data },
+  });
+
+  switch (method) {
+    case "initialize":
+      return {
+        jsonrpc: "2.0",
+        id,
+        result: {
+          protocolVersion: "2024-11-05",
+          capabilities: { tools: {} },
+          serverInfo: { name: "elysia-mcp-server", version: "1.0.0" },
+        },
+      };
+
+    case "tools/list":
+      return {
+        jsonrpc: "2.0",
+        id,
+        result: {
+          tools: tools.map((t) => {
+            const inputSchema =
+              typeof t.inputSchema === "object" && t.inputSchema?.type === "object"
+                ? t.inputSchema
+                : { type: "object", properties: {}, required: [] };
             return {
-                jsonrpc: "2.0",
-                id,
-                result: {
-                    protocolVersion: "2024-11-05",
-                    capabilities: { tools: {} },
-                    serverInfo: { name: "elysia-mcp-server", version: "1.0.0" },
-                },
+              name: t.name,
+              description: t.description || "No description provided",
+              inputSchema,
+              "x-props": t["x-props"],
             };
+          }),
+        },
+      };
 
-        case "tools/list":
-            return {
-                jsonrpc: "2.0",
-                id,
-                result: {
-                    tools: tools.map(({ name, description, inputSchema, ["x-props"]: x }) => ({
-                        name,
-                        description,
-                        inputSchema,
-                        "x-props": x,
-                    })),
-                },
-            };
+    case "tools/call": {
+      const toolName = params?.name;
+      const tool = tools.find((t) => t.name === toolName);
+      if (!tool) return makeError(-32601, `Tool '${toolName}' not found`);
 
-        case "tools/call": {
-            const toolName = params?.name;
-            const tool = tools.find((t) => t.name === toolName);
+      try {
+        const baseUrl = (params?.credentials?.baseUrl as string) || process.env.BUN_PUBLIC_BASE_URL || "http://localhost:3000";
+        const args = params?.arguments || {};
 
-            if (!tool) {
-                return {
-                    jsonrpc: "2.0",
-                    id,
-                    error: { code: -32601, message: `Tool '${toolName}' not found` },
-                };
-            }
+        const result = await executeTool(tool, args, baseUrl, xPayload);
 
-            try {
-                const baseUrl =
-                    process.env.BUN_PUBLIC_BASE_URL || "http://localhost:3000";
-                const result = await executeTool(tool, params?.arguments || {}, baseUrl);
-                const data = result.data.data;
-                const isObject = typeof data === "object" && data !== null;
+        // Extract the meaningful payload (prefer nested .data if present)
+        const raw = extractRaw(result.data);
 
-                return {
-                    jsonrpc: "2.0",
-                    id,
-                    result: {
-                        content: [
-                            isObject
-                                ? { type: "json", data: data }
-                                : { type: "text", text: JSON.stringify(data || result.data || result) },
-                        ],
-                    },
-                };
-            } catch (error: any) {
-                return {
-                    jsonrpc: "2.0",
-                    id,
-                    error: { code: -32603, message: error.message },
-                };
-            }
-        }
+        // Normalize content shape consistently:
+        const contentItem = convertToMcpContent(raw ?? result.data ?? result);
 
-        case "ping":
-            return { jsonrpc: "2.0", id, result: {} };
-
-        default:
-            return {
-                jsonrpc: "2.0",
-                id,
-                error: { code: -32601, message: `Method '${method}' not found` },
-            };
+        return {
+          jsonrpc: "2.0",
+          id,
+          result: {
+            content: [contentItem],
+          },
+        };
+      } catch (err: any) {
+        // avoid leaking secrets — small debug
+        const dbg = { message: err?.message };
+        return makeError(-32603, err?.message ?? "Internal error", dbg);
+      }
     }
+
+    case "ping":
+      return { jsonrpc: "2.0", id, result: {} };
+
+    default:
+      return makeError(-32601, `Method '${method}' not found`);
+  }
 }
 
-// =====================
-// Elysia MCP Server
-// =====================
-export const MCPRoute = new Elysia({
-    tags: ["MCP Server"]
-})
-    .post("/mcp", async ({ request, set }) => {
-        if (!tools.length) {
-            tools = await getMcpTools(OPENAPI_URL, FILTER_TAG);
-        }
-        set.headers["Content-Type"] = "application/json";
-        set.headers["Access-Control-Allow-Origin"] = "*";
+/* -------------------------
+   Elysia App & Routes
+   ------------------------- */
+export const MCPRoute = new Elysia({ tags: ["MCP Server"] })
+  .post("/mcp", async ({ request, set, headers }) => {
+    set.headers["Content-Type"] = "application/json";
+    set.headers["Access-Control-Allow-Origin"] = "*";
 
-        try {
-            const body = await request.json();
+    // Lazy load the tools (keeps previous behavior)
+    if (!tools.length) {
+      try {
+        tools = await getMcpTools(OPENAPI_URL, FILTER_TAG);
+      } catch (err) {
+        console.error("[MCP] Failed to load tools during lazy init:", err);
+      }
+    }
 
-            if (!Array.isArray(body)) {
-                const res = await handleMCPRequestAsync(body);
-                return res;
-            }
+    const xPayload = {
+      ['x-user']: headers['x-user'] || "",
+      ['x-phone']: headers['x-phone'] || ""
+    }
 
-            const results = await Promise.all(
-                body.map((req) => handleMCPRequestAsync(req))
-            );
-            return results;
-        } catch (error: any) {
-            set.status = 400;
-            return {
+    try {
+      const body = await request.json();
+
+      // If batch array -> allSettled for resilience
+      if (Array.isArray(body)) {
+        const promises = body.map((req: JSONRPCRequest) => handleMCPRequestAsync(req, xPayload));
+        const settled = await Promise.allSettled(promises);
+        const responses = settled.map((s) =>
+          s.status === "fulfilled"
+            ? s.value
+            : ({
                 jsonrpc: "2.0",
                 id: null,
                 error: {
-                    code: -32700,
-                    message: "Parse error",
-                    data: error.message,
+                  code: -32000,
+                  message: "Unhandled handler error",
+                  data: String((s as PromiseRejectedResult).reason),
                 },
-            };
-        }
-    })
+              } as JSONRPCResponse)
+        );
+        return responses;
+      }
 
-    // Tools list (debug)
-    .get("/mcp/tools", async ({ set }) => {
-        if (!tools.length) {
+      const single = await handleMCPRequestAsync(body as JSONRPCRequest, xPayload);
+      return single;
+    } catch (err: any) {
+      set.status = 400;
+      return {
+        jsonrpc: "2.0",
+        id: null,
+        error: { code: -32700, message: "Parse error", data: err?.message ?? String(err) },
+      } as JSONRPCResponse;
+    }
+  })
 
-            tools = await getMcpTools(OPENAPI_URL, FILTER_TAG);
-        }
-        set.headers["Access-Control-Allow-Origin"] = "*";
-        return {
-            tools: tools.map(({ name, description, inputSchema, ["x-props"]: x }) => ({
-                name,
-                description,
-                inputSchema,
-                "x-props": x,
-            })),
-        };
-    })
+  /* Debug / management endpoints */
+  .get("/mcp/tools", async ({ set }) => {
+    set.headers["Access-Control-Allow-Origin"] = "*";
+    if (!tools.length) {
+      try {
+        tools = await getMcpTools(OPENAPI_URL, FILTER_TAG);
+      } catch (err) {
+        console.error("[MCP] Failed to load tools for /mcp/tools:", err);
+      }
+    }
+    return {
+      tools: tools.map((t) => ({
+        name: t.name,
+        description: t.description,
+        inputSchema: t.inputSchema,
+        "x-props": t["x-props"],
+      })),
+    };
+  })
 
-    // MCP status
-    .get("/mcp/status", ({ set }) => {
-        set.headers["Access-Control-Allow-Origin"] = "*";
-        return { status: "active", timestamp: Date.now() };
-    })
+  .get("/mcp/status", ({ set }) => {
+    set.headers["Access-Control-Allow-Origin"] = "*";
+    return { status: "active", timestamp: Date.now() };
+  })
 
-    // Health check
-    .get("/health", ({ set }) => {
-        set.headers["Access-Control-Allow-Origin"] = "*";
-        return { status: "ok", timestamp: Date.now(), tools: tools.length };
-    })
-    .get("/mcp/init", async ({ set }) => {
+  .get("/health", ({ set }) => {
+    set.headers["Access-Control-Allow-Origin"] = "*";
+    return { status: "ok", timestamp: Date.now(), tools: tools.length };
+  })
 
-        const _tools = await getMcpTools(OPENAPI_URL, FILTER_TAG);
-        tools = _tools;
-        return {
-            success: true,
-            message: "MCP initialized",
-            tools: tools.length,
-        };
-    })
+  // Force re-init (useful for admin / CI)
+  .get("/mcp/init", async ({ set }) => {
+    set.headers["Access-Control-Allow-Origin"] = "*";
+    try {
+      tools = await getMcpTools(OPENAPI_URL, FILTER_TAG);
+      return { success: true, message: "MCP initialized", tools: tools.length };
+    } catch (err) {
+      set.status = 500;
+      return { success: false, message: "Failed to initialize tools", error: String(err) };
+    }
+  })
 
-    // CORS
-    .options("/mcp", ({ set }) => {
-        set.headers["Access-Control-Allow-Origin"] = "*";
-        set.headers["Access-Control-Allow-Methods"] = "GET,POST,OPTIONS";
-        set.headers["Access-Control-Allow-Headers"] =
-            "Content-Type,Authorization,X-API-Key";
-        set.status = 204;
-        return "";
-    })
-    .options("/mcp/tools", ({ set }) => {
-        set.headers["Access-Control-Allow-Origin"] = "*";
-        set.headers["Access-Control-Allow-Methods"] = "GET,OPTIONS";
-        set.headers["Access-Control-Allow-Headers"] =
-            "Content-Type,Authorization,X-API-Key";
-        set.status = 204;
-        return "";
-    });
+  /* CORS preflight */
+  .options("/mcp", ({ set }) => {
+    set.headers["Access-Control-Allow-Origin"] = "*";
+    set.headers["Access-Control-Allow-Methods"] = "GET,POST,OPTIONS";
+    set.headers["Access-Control-Allow-Headers"] = "Content-Type,Authorization,X-API-Key";
+    set.status = 204;
+    return "";
+  })
+  .options("/mcp/tools", ({ set }) => {
+    set.headers["Access-Control-Allow-Origin"] = "*";
+    set.headers["Access-Control-Allow-Methods"] = "GET,OPTIONS";
+    set.headers["Access-Control-Allow-Headers"] = "Content-Type,Authorization,X-API-Key";
+    set.status = 204;
+    return "";
+  });
+
+/* -------------------------
+   End
+   ------------------------- */

src/server/routes/pengaduan_route.ts

@@ -1,12 +1,14 @@
 import Elysia, { t } from "elysia"
 import type { StatusPengaduan } from "generated/prisma"
+import _ from "lodash"
 import { v4 as uuidv4 } from "uuid"
 import { getLastUpdated } from "../lib/get-last-updated"
 import { mimeToExtension } from "../lib/mimetypeToExtension"
 import { generateNoPengaduan } from "../lib/no-pengaduan"
-import { normalizePhoneNumber } from "../lib/normalizePhone"
+import { isValidPhone, 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, uploadFileToFolder } from "../lib/seafile"
 
 const PengaduanRoute = new Elysia({
    prefix: "pengaduan",
@@ -105,70 +107,72 @@ const PengaduanRoute = new Elysia({
 
 
    // --- PENGADUAN ---
-   .post("/create", async ({ body }) => {
-      const { judulPengaduan, detailPengaduan, lokasi, namaGambar, kategoriId, wargaId, noTelepon } = body
+   .post("/create", async ({ body, headers }) => {
+      const { judulPengaduan, detailPengaduan, lokasi, namaGambar, kategoriId } = body
+      const namaWarga = headers['x-user'] || ""
+      const noTelepon = headers['x-phone'] || ""
       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"
       }
 
+      if (!isValidPhone(noTelepon)) {
+         return { success: false, message: `nomor telepon ${noTelepon} tidak valid, harap masukkan nomor yang benar` }
+      }
+
+      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,73 +197,48 @@ 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",
-            examples: ["kebersihan"],
-            description: "ID atau nama kategori pengaduan (contoh: kebersihan, keamanan, lainnya)"
-         }),
+         kategoriId: t.Optional(t.String({
+            examples: ["kebersihan", "infrastruktur", "keamanan"],
+            description: "Nama kategori pengaduan (contoh: kebersihan, keamanan, lainnya)"
+         })),
 
-         wargaId: t.String({
-            minLength: 1,
-            error: "ID warga harus diisi",
-            examples: ["budiman"],
-            description: "ID unik warga yang melapor (jika sudah terdaftar)"
-         }),
+         // namaWarga: t.String({
+         //    examples: ["budiman"],
+         //    description: "Nama warga yang melapor"
+         // }),
 
-         noTelepon: t.String({
-            minLength: 1,
-            error: "Nomor telepon harus diisi",
-            examples: ["08123456789", "+628123456789"],
-            description: "Nomor telepon warga pelapor"
-         }),
+         // noTelepon: t.String({
+         //    error: "Nomor telepon harus diisi",
+         //    examples: ["08123456789", "+628123456789"],
+         //    description: "Nomor telepon warga pelapor"
+         // }),
       }),
 
       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"]
       }
    })
@@ -278,7 +257,7 @@ Respon:
       })
 
       if (!pengaduan) {
-         throw new Error("gagal membuat pengaduan")
+         return { success: false, message: 'gagal update status pengaduan' }
       }
 
       if (status === "diterima") {
@@ -314,18 +293,90 @@ Respon:
          description: `tool untuk update status pengaduan`
       }
    })
+   .post("/update", async ({ body }) => {
+      const { noPengaduan, judul, detail, lokasi, namaGambar } = body
+      let dataUpdate = {}
+
+      const cek = await prisma.pengaduan.findFirst({
+         where: {
+            noPengaduan,
+         },
+         select: {
+            id: true
+         }
+      })
+
+
+      if (!cek) {
+         return { success: false, message: 'gagal update status pengaduan, nomer ' + noPengaduan + ' tidak ditemukan' }
+      }
+
+      if (judul) {
+         dataUpdate = { title: judul }
+      }
+
+      if (detail) {
+         dataUpdate = { ...dataUpdate, detail }
+      }
+
+      if (lokasi) {
+         dataUpdate = { ...dataUpdate, location: lokasi }
+      }
+
+      if (namaGambar) {
+         dataUpdate = { ...dataUpdate, image: namaGambar }
+      }
+
+      const pengaduan = await prisma.pengaduan.updateMany({
+         where: {
+            noPengaduan
+         },
+         data: dataUpdate
+      })
+
+      const keys = Object.keys(dataUpdate).join(", ");
+
+      await prisma.historyPengaduan.create({
+         data: {
+            idPengaduan: cek.id,
+            deskripsi: `Pengaduan diupdate oleh warga (data yg diupdate: ${keys})`,
+         }
+      })
+
+      return { success: true, message: 'pengaduan dengan nomer ' + noPengaduan + ' sudah diupdate' }
+   }, {
+      body: t.Object({
+         noPengaduan: t.String({
+            error: "nomer pengaduan harus diisi",
+            description: "Nomer pengaduan yang ingin diupdate"
+         }),
+         judul: t.Optional(t.String({
+            error: "judul harus diisi",
+            description: "Judul pengaduan yang ingin diupdate"
+         })),
+         detail: t.Optional(t.String({
+            description: "detail pengaduan yang ingin diupdate"
+         })),
+         lokasi: t.Optional(t.String({
+            description: "lokasi pengaduan yang ingin diupdate"
+         })),
+         namaGambar: t.Optional(t.String({
+            description: "Nama file gambar yang telah diupload untuk update data pengaduan"
+         })),
+      }),
+
+      detail: {
+         summary: "Update Data Pengaduan",
+         description: `tool untuk update data pengaduan`,
+         tags: ["mcp"]
+      }
+   })
    .get("/detail", async ({ query }) => {
       const { id } = query
 
       const data = await prisma.pengaduan.findFirst({
          where: {
-            OR: [
-               {
-                  noPengaduan: id
-               }, {
-                  id: id
-               }
-            ]
+            id: id
          },
          select: {
             id: true,
@@ -360,9 +411,19 @@ Respon:
          }
       })
 
+      if (!data) {
+         const datafix = {
+            pengaduan: {},
+            history: [],
+            warga: {},
+         }
+
+         return datafix
+      }
+
       const dataHistory = await prisma.historyPengaduan.findMany({
          where: {
-            idPengaduan: id,
+            idPengaduan: data?.id,
          },
          select: {
             id: true,
@@ -378,23 +439,13 @@ Respon:
          }
       })
 
-      const dataHistoryFix = dataHistory.map((item) => {
-         return {
-            id: item.id,
-            deskripsi: item.deskripsi,
-            status: item.status,
-            createdAt: item.createdAt.toLocaleString("id-ID", {
-               day: "2-digit",
-               month: "short",
-               year: "numeric",
-               hour: "2-digit",
-               minute: "2-digit",
-               hour12: false
-            }),
-            idUser: item.idUser,
-            nameUser: item.User?.name,
-         }
-      })
+
+      const dataHistoryFix = dataHistory.map((item: any) => ({
+         ..._.omit(item, ["User", "createdAt"]),
+         nameUser: item.User?.name,
+         createdAt: item.createdAt
+      }))
+
 
       const warga = {
          name: data?.Warga?.name,
@@ -424,50 +475,51 @@ Respon:
       }
 
       return datafix
+
    }, {
       detail: {
-         summary: "Detail Pengaduan Warga",
-         description: `tool untuk mendapatkan detail pengaduan warga / history pengaduan / mengecek status pengaduan berdasarkan id atau nomer Pengaduan`,
-         tags: ["mcp"]
+         summary: "Detail Pengaduan Warga By ID",
+         description: `tool untuk mendapatkan detail pengaduan warga / history pengaduan / mengecek status pengaduan berdasarkan id pengaduan`,
       }
    })
-   .get("/", async ({ query }) => {
-      const { take, page, search, phone } = query
-      const skip = !page ? 0 : (Number(page) - 1) * (!take ? 10 : Number(take))
+   .get("/", async ({ query, headers }) => {
+      // const { take, page, search } = query
+      const phone = headers['x-phone'] || ""
+      // const skip = !page ? 0 : (Number(page) - 1) * (!take ? 10 : Number(take))
 
       const data = await prisma.pengaduan.findMany({
-         skip,
-         take: !take ? 10 : Number(take),
+         // skip,
+         // take: !take ? 10 : Number(take),
          orderBy: {
             createdAt: "asc"
          },
          where: {
             isActive: true,
-            OR: [
-               {
-                  title: {
-                     contains: search ?? "",
-                     mode: "insensitive"
-                  },
-               },
-               {
-                  noPengaduan: {
-                     contains: search ?? "",
-                     mode: "insensitive"
-                  },
-               },
-               {
-                  detail: {
-                     contains: search ?? "",
-                     mode: "insensitive"
-                  },
-               }
-            ],
-            AND: {
-               Warga: {
-                  phone: phone
-               }
-            }
+            // OR: [
+            //    {
+            //       title: {
+            //          contains: search ?? "",
+            //          mode: "insensitive"
+            //       },
+            //    },
+            //    {
+            //       noPengaduan: {
+            //          contains: search ?? "",
+            //          mode: "insensitive"
+            //       },
+            //    },
+            //    {
+            //       detail: {
+            //          contains: search ?? "",
+            //          mode: "insensitive"
+            //       },
+            //    }
+            // ],
+            // AND: {
+            //    Warga: {
+            //       phone: phone
+            //    }
+            // }
          },
          select: {
             id: true,
@@ -502,12 +554,11 @@ Respon:
 
       return dataFix
    }, {
-      query: t.Object({
-         take: t.String({ optional: true }),
-         page: t.String({ optional: true }),
-         search: t.String({ optional: true }),
-         phone: t.String({ minLength: 11, error: "phone harus diisi" }),
-      }),
+      // query: t.Object({
+      //    take: t.String({ optional: true }),
+      //    page: t.String({ optional: true }),
+      //    search: t.String({ optional: true }),
+      // }),
       detail: {
          summary: "List Pengaduan Warga By Phone",
          description: `tool untuk mendapatkan list pengaduan warga by phone`,
@@ -515,39 +566,90 @@ 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",
-         tags: ["mcp"],
+         summary: "Upload File (FormData)",
+         description: "Tool untuk upload file ke folder tujuan dengan memakai FormData",
+         consumes: ["multipart/form-data"]
+      },
+   })
+   .post("/upload-file-form-data", async ({ body }) => {
+      const { file } = 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, renamedFile, 'pengaduan');
+      // if (result == 'gagal') {
+      //    return { success: false, message: "Upload gagal" };
+      // }
+
+      return {
+         success: true,
+         file: JSON.stringify(file),
+         fileInfo: {
+            name: file.name || 'kosong',
+            size: file.size || 0,
+            type: file.type || 'kosong'
+         }
+         // message: "Upload berhasil",
+         // filename: renamedFile.name,
+         // size: renamedFile.size,
+         // seafileResult: result
+      };
+   }, {
+      body: t.Object({
+         file: t.Any(),
+         // folder: t.String(),
+      }),
+      detail: {
+         summary: "Upload File (FormData)",
+         description: "Tool untuk upload file ke folder tujuan dengan memakai FormData",
          consumes: ["multipart/form-data"]
       },
    })
    .post("/upload-base64", async ({ body }) => {
-      const { data, mimetype } = body;
+      const { data, mimetype, kategori } = body;
       const ext = mimeToExtension(mimetype)
       const name = `${uuidv4()}.${ext}`
+      const kategoriFix = kategori === 'pengaduan' ? 'pengaduan' : 'syarat-dokumen';
 
       // Validasi file
       if (!data) {
@@ -559,7 +661,8 @@ Respon:
       // const base64String = Buffer.from(buffer).toString("base64");
 
       // (Opsional) jika perlu dikirim ke Seafile sebagai base64
-      const result = await uploadFileBase64(defaultConfigSF, { name: name, data: data });
+      // const result = await uploadFileBase64(defaultConfigSF, { name: name, data: data });
+      const result = await uploadFileToFolder(defaultConfigSF, { name: name, data: data }, kategoriFix);
 
       return {
          success: true,
@@ -568,17 +671,18 @@ Respon:
             name,
             mimetype,
             ext,
+            kategori,
          }
       };
    }, {
       body: t.Object({
          data: t.String(),
-         mimetype: t.String()
+         mimetype: t.String(),
+         kategori: t.String()
       }),
       detail: {
          summary: "Upload File (Base64)",
          description: "Tool untuk upload file ke Seafile dalam format Base64",
-         tags: ["mcp"],
          consumes: ["multipart/form-data"]
       },
    })
@@ -625,6 +729,10 @@ Respon:
          }
       }
 
+      const totalData = await prisma.pengaduan.count({
+         where
+      });
+
       const data = await prisma.pengaduan.findMany({
          skip,
          take: !take ? 10 : Number(take),
@@ -662,12 +770,20 @@ Respon:
             detail: item.detail,
             status: item.status,
             location: item.location,
-            createdAt: item.createdAt.toLocaleDateString("id-ID", { day: "numeric", month: "long", year: "numeric" }),
+            createdAt: item.createdAt.toISOString(),
             updatedAt: 'terakhir diperbarui ' + getLastUpdated(item.updatedAt),
          }
       })
 
-      return dataFix
+      const dataReturn = {
+         data: dataFix,
+         total: totalData,
+         page: Number(page) || 1,
+         pageSize: !take ? 10 : Number(take),
+         totalPages: Math.ceil(totalData / (!take ? 10 : Number(take)))
+      }
+
+      return dataReturn
    }, {
       query: t.Object({
          take: t.String({ optional: true }),
@@ -714,31 +830,171 @@ 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",
+      },
+   })
+   .post("/detail-data", async ({ body }) => {
+      const { nomerPengaduan } = body
+
+      const data = await prisma.pengaduan.findFirst({
+         where: {
+            noPengaduan: nomerPengaduan
+         },
+         select: {
+            id: true,
+            noPengaduan: true,
+            title: true,
+            detail: true,
+            location: true,
+            image: true,
+            idCategory: true,
+            idWarga: true,
+            status: true,
+            keterangan: true,
+            createdAt: true,
+            updatedAt: true,
+            CategoryPengaduan: {
+               select: {
+                  name: true
+               }
+            },
+            Warga: {
+               select: {
+                  name: true,
+                  phone: true,
+                  _count: {
+                     select: {
+                        Pengaduan: true,
+                        PelayananAjuan: true,
+                     }
+                  }
+               }
+            }
+         }
+      })
+
+      if (!data) {
+         return { success: false, message: "Data tidak ditemukan" };
+      }
+
+      const dataHistory = await prisma.historyPengaduan.findMany({
+         where: {
+            idPengaduan: data?.id,
+         },
+         select: {
+            id: true,
+            deskripsi: true,
+            status: true,
+            createdAt: true,
+            idUser: true,
+            User: {
+               select: {
+                  name: true,
+               }
+            }
+         }
+      })
+
+
+      const dataHistoryFix = dataHistory.map((item: any) => ({
+         ..._.omit(item, ["User", "createdAt"]),
+         nameUser: item.User?.name,
+         createdAt: item.createdAt
+      }))
+
+
+      const warga = {
+         name: data?.Warga?.name,
+         phone: data?.Warga?.phone,
+         pengaduan: data?.Warga?._count.Pengaduan,
+         pelayanan: data?.Warga?._count.PelayananAjuan,
+      }
+
+      const dataPengaduan = {
+         id: data?.id,
+         noPengaduan: data?.noPengaduan,
+         title: data?.title,
+         detail: data?.detail,
+         location: data?.location,
+         image: data?.image,
+         category: data?.CategoryPengaduan.name,
+         status: data?.status,
+         keterangan: data?.keterangan,
+         createdAt: data?.createdAt,
+         updatedAt: data?.updatedAt,
+      }
+
+      const datafix = {
+         pengaduan: dataPengaduan,
+         history: dataHistoryFix,
+         warga: warga,
+      }
+
+      return datafix
+   }, {
+      body: t.Object({
+         nomerPengaduan: t.String({
+            description: "Nomer pengaduan yg ingin diakses",
+            examples: ["PGD-101225-001", "PGD-101225-002"],
+            error: "Nomer pengaduan harus diisi",
+         }),
+      }),
+      detail: {
+         summary: "Detail Pengaduan Warga By Nomor Pengaduan",
+         description: `tool untuk mendapatkan detail data pengaduan berdasarkan nomor pengaduan`,
+         tags: ["mcp"]
       }
    })
    ;

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

@@ -1,15 +1,22 @@
 import Elysia, { t } from "elysia";
 import type { User } from "generated/prisma";
+import _ from "lodash";
 import { prisma } from "../lib/prisma";
 
 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: {
@@ -139,10 +146,31 @@ const UserRoute = new Elysia({
                 NOT: {
                     id: user.id
                 }
+            },
+            select: {
+                id: true,
+                name: true,
+                phone: true,
+                email: true,
+                roleId: true,
+                Role: {
+                    select: {
+                        name: true
+                    }
+                }
             }
         })
 
-        return data
+        const dataFix = data.map((item: any) => ({
+            ..._.omit(item, ["Role"]),
+            nameRole: item.Role?.name,
+            name: String(item.name),
+            phone: String(item.phone),
+            email: String(item.email),
+            roleId: String(item.roleId),
+        }))
+
+        return dataFix
     }, {
         detail: {
             summary: "list",
@@ -150,7 +178,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 +217,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

@@ -9,9 +9,31 @@ const WargaRoute = new Elysia({
 })
 
    .get("/list", async ({ query }) => {
-      const { search } = query
+      const { search, page = 1 } = query
+      const dataSkip = page == null || page == undefined ? 0 : Number(page) * 10 - 10;
+
+      const totalData = await prisma.warga.count({
+         where: {
+            OR: [
+               {
+                  name: {
+                     contains: search,
+                     mode: "insensitive"
+                  }
+               },
+               {
+                  phone: {
+                     contains: search,
+                     mode: "insensitive"
+                  }
+               }
+            ]
+         }
+      });
 
       const data = await prisma.warga.findMany({
+         skip: dataSkip,
+         take: 10,
          where: {
             OR: [
                {
@@ -33,7 +55,15 @@ const WargaRoute = new Elysia({
          }
       })
 
-      return data
+      const dataFix = {
+         data,
+         total: totalData,
+         page: Number(page) || 1,
+         pageSize: 10,
+         totalPages: Math.ceil(totalData / 10)
+      };
+
+      return dataFix
    }, {
       detail: {
          summary: "List Warga",
@@ -62,8 +92,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 }) => {