diff --git a/src/pages/scr/dashboard/pengaduan/detail_page.tsx b/src/pages/scr/dashboard/pengaduan/detail_page.tsx
index dedffa2..5509c67 100644
--- a/src/pages/scr/dashboard/pengaduan/detail_page.tsx
+++ b/src/pages/scr/dashboard/pengaduan/detail_page.tsx
@@ -9,6 +9,7 @@ import {
   Flex,
   Grid,
   Group,
+  Image,
   Modal,
   Stack,
   Table,
@@ -56,6 +57,22 @@ export default function DetailPengaduanPage() {
 function DetailDataPengaduan() {
   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);
+
+  async function handleLihatGambar() {
+    const res = await apiFetch.api.pengaduan.image.get({
+      query: {
+        fileName: "57d5ce89-7d18-4244-9f4c-ca21b70adb7e",
+      },
+    });
+    console.error('client',res)
+    // const blob = await res.data?.blob();
+    // setImageSrc(URL.createObjectURL(blob!));
+    // openModalImage();
+  }
+
 
   return (
     <>
@@ -99,6 +116,16 @@ function DetailDataPengaduan() {
         </Stack>
       </Modal>
 
+      <Modal
+        opened={openedModalImage}
+        onClose={closeModalImage}
+        title="Gambar Pengaduan"
+        centered
+        overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+      >
+        <Image src={imageSrc!} />
+      </Modal>
+
       <Card
         radius="md"
         p="lg"
@@ -170,7 +197,7 @@ function DetailDataPengaduan() {
                     <IconPhotoScan size={20} />
                     <Text size="md">Gambar</Text>
                   </Group>
-                  <Anchor href="https://mantine.dev/" target="_blank">
+                  <Anchor href="#" onClick={handleLihatGambar}>
                     Lihat Gambar
                   </Anchor>
                 </Flex>
diff --git a/src/server/lib/seafile.ts b/src/server/lib/seafile.ts
index 65b03ba..5c09a8e 100644
--- a/src/server/lib/seafile.ts
+++ b/src/server/lib/seafile.ts
@@ -225,49 +225,4 @@ export async function downloadFile(config: Config, remoteFile: string, localFile
 export async function getFileLink(config: Config, fileName: string): Promise<string> {
    const downloadUrlResponse = await fetchWithAuth(config, `${config.URL}/${config.REPO}/file/?p=/${fileName}`);
    return `🔗 Link for ${fileName}:\n${(await downloadUrlResponse.text()).replace(/"/g, '')}`
-}
-
-// function showHelp(): void {
-//     return `note - simple CLI for wibu not
-// Usage:
-//   not3 ls                      List files
-//   not3 cat <file>              Show file content
-//   not3 cp <local> [remote]     Upload file
-//   not3 rm <remote>             Remove file
-//   not3 mv <old> <new>          Rename/move file
-//   not3 get <remote> [local]    Download file
-//   not3 link <file>             Get file link/URL
-//   not3 test                    Test API connection
-//   not3 config                  Edit config (~/.note.conf)
-
-// Config (~/.note.conf):
-//   TOKEN=your_seafile_token
-//   REPO=repos/<repo-id>
-//   URL=your_seafile_url/api2
-
-// Version: ${version}`);
-// }
-
-// --- Main ---
-// async function not3(): Promise<void> {
-//     const [cmd, ...args] = process.argv.slice(2);
-//     if (cmd === 'config') return editConfig();
-
-//     const config = await loadConfig();
-//     switch (cmd) {
-//         case 'test': return testConnection(config);
-//         case 'ls': return listFiles(config);
-//         case 'cat': return args[0] ? catFile(config, args[0]) : console.error('Usage: bun note.ts cat <file>');
-//         case 'cp': return args[0] ? uploadFile(config, args[0], args[1]) : console.error('Usage: bun note.ts cp <local_file> [remote_file]');
-//         case 'rm': return args[0] ? removeFile(config, args[0]) : console.error('Usage: bun note.ts rm <remote_file>');
-//         case 'mv': return args[1] ? moveFile(config, args[0]!, args[1]) : console.error('Usage: bun note.ts mv <old_name> <new_name>');
-//         case 'get': return args[0] ? downloadFile(config, args[0], args[1]) : console.error('Usage: bun note.ts get <remote_file> [local_file]');
-//         case 'link': return args[0] ? getFileLink(config, args[0]) : console.error('Usage: bun note.ts link <file>');
-//         default: return showHelp();
-//     }
-// }
-
-// not3().catch((error) => {
-//     console.error('❌ Error:', error);
-//     process.exit(1);
-// });
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/server/routes/pengaduan_route.ts b/src/server/routes/pengaduan_route.ts
index bd3129c..966a033 100644
--- a/src/server/routes/pengaduan_route.ts
+++ b/src/server/routes/pengaduan_route.ts
@@ -6,7 +6,7 @@ import { mimeToExtension } from "../lib/mimetypeToExtension"
 import { generateNoPengaduan } from "../lib/no-pengaduan"
 import { normalizePhoneNumber } from "../lib/normalizePhone"
 import { prisma } from "../lib/prisma"
-import { defaultConfigSF, uploadFile, uploadFileBase64 } from "../lib/seafile"
+import { catFile, defaultConfigSF, testConnection, uploadFile, uploadFileBase64 } from "../lib/seafile"
 
 const PengaduanRoute = new Elysia({
    prefix: "pengaduan",
@@ -487,7 +487,6 @@ const PengaduanRoute = new Elysia({
          consumes: ["multipart/form-data"]
       },
    })
-
    .get("/list", async ({ query }) => {
       const { take, page, search, status } = query
       const skip = !page ? 0 : (Number(page) - 1) * (!take ? 10 : Number(take))
@@ -619,6 +618,34 @@ const PengaduanRoute = new Elysia({
          description: `tool untuk mendapatkan jumlah pengaduan warga`,
       }
    })
+   .get("/image", async ({ query, set }) => {
+      const { fileName } = query
+
+      const connect = await testConnection(defaultConfigSF)
+      console.log({connect})
+
+      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";
+
+      set.headers["Content-Type"] = mime;
+      return new Response(hasil);
+   }, {
+      query: t.Object({
+         fileName: t.String(),
+      }),
+      detail: {
+         summary: "Gambar Pengaduan Warga",
+         description: `tool untuk mendapatkan gambar pengaduan warga`,
+      }
+   })
    ;
 
 export default PengaduanRoute