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({
-    data,
-  }: {
-    data: { id: string; value: string; name: string };
-  }) {
+  function chooseEdit({ 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>
+   );
+}