upd: dahsboard admin

Deskripsi:
- tampil image
- tampil ttd pada setting desa

No Issues

src/components/DesaSetting.tsx

@@ -18,13 +18,17 @@ import { useDisclosure, useShallowEffect } from "@mantine/hooks";
 import { IconEdit } from "@tabler/icons-react";
 import { useState } from "react";
 import useSWR from "swr";
+import ModalFile from "./ModalFile";
 import notification from "./notificationGlobal";
+import _ from "lodash";
 
 export default function DesaSetting() {
   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(),
   );
@@ -95,11 +99,7 @@ export default function DesaSetting() {
   }
 
 
-  function chooseEdit({
+  function chooseEdit({ data }: { data: { id: string; value: string; name: string }; }) {
-    data,
-  }: {
-    data: { id: string; value: string; name: string };
-  }) {
     setDataEdit(data);
     open();
   }
@@ -173,6 +173,12 @@ export default function DesaSetting() {
         </Stack>
       </Modal>
 
+      <ModalFile
+        open={openedPreview && !_.isEmpty(viewImg)}
+        onClose={() => setOpenedPreview(false)}
+        folder="syarat-dokumen"
+        fileName={viewImg}
+      />
 
       <Stack gap={"md"}>
         <Flex align="center" justify="space-between">
@@ -198,7 +204,7 @@ export default function DesaSetting() {
                     {
                       v.name == "TTD"
                         ?
-                        <Anchor href="https://mantine.dev/" target="_blank" underline="always">
+                        <Anchor href="#" onClick={() => { setViewImg(v.value); setOpenedPreview(true); }} underline="always">
                           Lihat
                         </Anchor>
                         :

src/components/ModalFile.tsx

@@ -0,0 +1,66 @@
+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 [viewImg, setViewImg] = useState<string>("");
+   const [loading, setLoading] = useState<boolean>(false);
+
+   useEffect(() => {
+      if (open && fileName) {
+         loadImage();
+      }
+   }, [open, fileName]);
+
+   const loadImage = async () => {
+      try {
+         setViewImg("");
+         setLoading(true);
+         const urlApi = '/api/pengaduan/image?folder=' + folder + '&fileName=' + fileName;
+         // Fetch manual agar mendapatkan Response asli
+         const res = await fetch(urlApi);
+         if (!res.ok)
+            return notification({
+               title: "Error",
+               message: "Failed to load image",
+               type: "error",
+            });
+         const blob = await res.blob();
+         const url = URL.createObjectURL(blob);
+
+         setViewImg(url);
+      } catch (err) {
+         console.error("Gagal load gambar:", err);
+      } finally {
+         setLoading(false);
+      }
+   };
+
+
+
+   return (
+      <Modal
+         opened={open}
+         onClose={onClose}
+         overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+         size="lg"
+         withCloseButton
+         removeScrollProps={{ allowPinchZoom: true }}
+         title="File"
+      >
+         {loading && (
+            <Flex justify="center" align="center" h={200}>
+               <Loader />
+            </Flex>
+         )}
+         {viewImg && (
+            <Image
+               radius="md"
+               h={300}
+               fit="contain"
+               src={viewImg}
+            />
+         )}
+      </Modal>
+   );
+}

src/server/lib/seafile.ts

@@ -128,11 +128,15 @@ export async function listFiles(config: Config): Promise<{ name: string }[]> {
    }
 }
 
-export async function catFile(config: Config, fileName: string): Promise<string> {
+export async function catFile(config: Config, folder: string, fileName: string): Promise<ArrayBuffer> {
-   const downloadUrlResponse = await fetchWithAuth(config, `${config.URL}/${config.REPO}/file/?p=/${fileName}`);
+   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> {

src/server/routes/pengaduan_route.ts

@@ -7,7 +7,7 @@ import { generateNoPengaduan } from "../lib/no-pengaduan"
 import { normalizePhoneNumber } from "../lib/normalizePhone"
 import { prisma } from "../lib/prisma"
 import { renameFile } from "../lib/rename-file"
-import { catFile, defaultConfigSF, testConnection, uploadFile, uploadFileBase64 } from "../lib/seafile"
+import { catFile, defaultConfigSF, uploadFile, uploadFileBase64 } from "../lib/seafile"
 
 const PengaduanRoute = new Elysia({
    prefix: "pengaduan",
@@ -723,14 +723,10 @@ Respon:
       }
    })
    .get("/image", async ({ query, set }) => {
-      const { fileName } = query
+      const { fileName, folder } = query;
 
-      const connect = await testConnection(defaultConfigSF)
+      const hasil = await catFile(defaultConfigSF, folder, fileName);
-      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"
@@ -740,16 +736,21 @@ Respon:
                : "application/octet-stream";
 
       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",
+         summary: "View Gambar",
-         description: `tool untuk mendapatkan gambar pengaduan warga`,
+         description: "tool untuk mendapatkan gambar",
       }
    })
+
+
    ;
 
 export default PengaduanRoute