upd: dashbaord admin/

Deksirps:
- format surat
- view file
- api

No Issues

src/components/ModalFile.tsx

@@ -1,10 +1,12 @@
+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 [viewImg, setViewImg] = useState<string>("");
+   const [viewFile, setViewFile] = useState<string>("");
    const [loading, setLoading] = useState<boolean>(false);
+   const [typeFile, setTypeFile] = useState<string>("");
 
    useEffect(() => {
       if (open && fileName) {
@@ -12,12 +14,18 @@ export default function ModalFile({ open, onClose, folder, fileName }: { open: b
       }
    }, [open, fileName]);
 
+
    const loadImage = async () => {
       try {
-         setViewImg("");
+         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;
-         // Fetch manual agar mendapatkan Response asli
          const res = await fetch(urlApi);
          if (!res.ok)
             return notification({
@@ -28,7 +36,7 @@ export default function ModalFile({ open, onClose, folder, fileName }: { open: b
          const blob = await res.blob();
          const url = URL.createObjectURL(blob);
 
-         setViewImg(url);
+         setViewFile(url);
       } catch (err) {
          console.error("Gagal load gambar:", err);
       } finally {
@@ -43,7 +51,7 @@ export default function ModalFile({ open, onClose, folder, fileName }: { open: b
          opened={open}
          onClose={onClose}
          overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
-         size="lg"
+         size="xl"
          withCloseButton
          removeScrollProps={{ allowPinchZoom: true }}
          title="File"
@@ -53,13 +61,19 @@ export default function ModalFile({ open, onClose, folder, fileName }: { open: b
                <Loader />
             </Flex>
          )}
-         {viewImg && (
-            <Image
-               radius="md"
-               h={300}
-               fit="contain"
-               src={viewImg}
-            />
+         {viewFile && (
+            <>
+               {typeFile == "pdf" ? (
+                  <embed src={viewFile} type="application/pdf" width="100%" height="100%" />
+               ) : (
+                  <Image
+                     radius="md"
+                     h={300}
+                     fit="contain"
+                     src={viewFile}
+                  />
+               )}
+            </>
          )}
       </Modal>
    );