rev: file upload ekstensi

Deskripsi:
- tambah type ekstensi file upload pada project, task divisi dan dokumen divisi

No Issues

src/module/document/ui/drawer_menu_document_division.tsx

@@ -149,7 +149,7 @@ export default function DrawerMenuDocumentDivision() {
                 }}
                 activateOnClick={false}
                 maxSize={3 * 1024 ** 2}
-                accept={['text/csv', 'image/png', 'image/jpeg', 'image/heic', 'application/pdf']}
+                accept={['image/png', 'image/jpeg', 'image/heic', 'application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']}
                 onReject={(files) => {
                   refresh.set(true)
                   setOpenModal(false)

src/module/document/ui/navbar_document_division.tsx

@@ -34,6 +34,7 @@ export default function NavbarDocumentDivision() {
   const [isOpenModalView, setOpenModalView] = useState(false);
   const [isExtension, setExtension] = useState("");
   const [idStorage, setIdStorage] = useState("");
+  const [nameFileFull, setNameFileFull] = useState("");
   const [name, setName] = useState("");
   const [isOpen, setOpen] = useState(false);
   const [isDelete, setIsDelete] = useState(false);
@@ -253,9 +254,18 @@ export default function NavbarDocumentDivision() {
     setRename(true);
   }
 
-  const onDownload = async () => {
+  const onDownload = async (kategori: string, file?: { idFile: string, nameFile: string }) => {
     try {
-      const fileUrl = `https://wibu-storage.wibudev.com/api/files/${selectedFiles[0].idStorage}`;
+      let idStorageDownload, nameFileDownload = ""
+      if (kategori == "selected") {
+        idStorageDownload = selectedFiles[0].idStorage
+        nameFileDownload = `${selectedFiles[0].name}.${selectedFiles[0].extension}`
+      } else if (kategori == "klik") {
+        idStorageDownload = file?.idFile
+        nameFileDownload = String(file?.nameFile)
+      }
+
+      const fileUrl = `https://wibu-storage.wibudev.com/api/files/${idStorageDownload}`;
       const response = await fetch(fileUrl);
       const blob = await response.blob();
 
@@ -263,7 +273,7 @@ export default function NavbarDocumentDivision() {
       const link = document.createElement("a");
       const url = window.URL.createObjectURL(blob);
       link.href = url;
-      link.download = `${selectedFiles[0].name}.${selectedFiles[0].extension}`; // Nama file yang akan diunduh
+      link.download = nameFileDownload; // Nama file yang akan diunduh
       document.body.appendChild(link);
       link.click();
 
@@ -341,7 +351,7 @@ export default function NavbarDocumentDivision() {
                   direction={"column"}
                   onClick={() => {
                     if (selectedFiles.length > 0 && copyAllowed) {
-                      onDownload();
+                      onDownload("selected");
                     }
                   }}
                 >
@@ -663,9 +673,7 @@ export default function NavbarDocumentDivision() {
                 </Box>
               ) : (
                 dataDocument.map((v, i) => {
-                  const isSelected = selectedFiles.some(
+                  const isSelected = selectedFiles.some((i: any) => i?.id == v.id);
-                    (i: any) => i?.id == v.id
-                  );
                   return (
                     <Box key={i}>
                       <Box mt={10} mb={10}>
@@ -680,20 +688,17 @@ export default function NavbarDocumentDivision() {
                               xl: 1,
                             }}
                             onClick={() => {
-                              if (
+                              if (v.category == "FOLDER" && selectedFiles.length == 0 && !dariSelectAll) {
-                                v.category == "FOLDER" &&
-                                selectedFiles.length == 0 &&
-                                !dariSelectAll
-                              ) {
                                 router.push("?path=" + v.id);
-                              } else if (
+                              } else if (v.category == "FILE" && selectedFiles.length == 0 && !dariSelectAll) {
-                                v.category == "FILE" &&
-                                selectedFiles.length == 0 &&
-                                !dariSelectAll
-                              ) {
                                 setExtension(v.extension);
                                 setIdStorage(v.idStorage);
-                                setOpenModalView(true);
+                                setNameFileFull(v.name + "." + v.extension)
+                                if (v.extension != "doc" && v.extension != "docx" && v.extension != "xls" && v.extension != "xlsx" && v.extension != "ppt" && v.extension != "pptx") {
+                                  setOpenModalView(true);
+                                } else {
+                                  onDownload("klik", { idFile: v.idStorage, nameFile: v.name + "." + v.extension })
+                                }
                               }
                             }}
                           >
@@ -712,7 +717,13 @@ export default function NavbarDocumentDivision() {
                                     {v.category == "FOLDER" ? (
                                       <FcFolder size={isMobile ? 40 : 50} />
                                     ) : v.extension == "pdf" ||
-                                      v.extension == "csv" ? (
+                                      v.extension == "csv" ||
+                                      v.extension == "doc" ||
+                                      v.extension == "docx" ||
+                                      v.extension == "xls" ||
+                                      v.extension == "xlsx" ||
+                                      v.extension == "ppt" ||
+                                      v.extension == "pptx" ? (
                                       <FcDocument size={isMobile ? 40 : 50} />
                                     ) : (
                                       <FcImageFile size={isMobile ? 40 : 50} />
@@ -723,7 +734,13 @@ export default function NavbarDocumentDivision() {
                                     {v.category == "FOLDER" ? (
                                       <FcFolder size={isMobile ? 40 : 50} />
                                     ) : v.extension == "pdf" ||
-                                      v.extension == "csv" ? (
+                                      v.extension == "csv" ||
+                                      v.extension == "doc" ||
+                                      v.extension == "docx" ||
+                                      v.extension == "xls" ||
+                                      v.extension == "xlsx" ||
+                                      v.extension == "ppt" ||
+                                      v.extension == "pptx" ? (
                                       <FcDocument size={isMobile ? 40 : 50} />
                                     ) : (
                                       <FcImageFile size={isMobile ? 40 : 50} />
@@ -747,20 +764,17 @@ export default function NavbarDocumentDivision() {
                               <Flex
                                 direction={"column"}
                                 onClick={() => {
-                                  if (
+                                  if (v.category == "FOLDER" && selectedFiles.length == 0 && !dariSelectAll) {
-                                    v.category == "FOLDER" &&
-                                    selectedFiles.length == 0 &&
-                                    !dariSelectAll
-                                  ) {
                                     router.push("?path=" + v.id);
-                                  } else if (
+                                  } else if (v.category == "FILE" && selectedFiles.length == 0 && !dariSelectAll) {
-                                    v.category == "FILE" &&
-                                    selectedFiles.length == 0 &&
-                                    !dariSelectAll
-                                  ) {
                                     setExtension(v.extension);
                                     setIdStorage(v.idStorage);
-                                    setOpenModalView(true);
+                                    setNameFileFull(v.name + "." + v.extension)
+                                    if (v.extension != "doc" && v.extension != "docx" && v.extension != "xls" && v.extension != "xlsx" && v.extension != "ppt" && v.extension != "pptx") {
+                                      setOpenModalView(true);
+                                    } else {
+                                      onDownload("klik", { idFile: v.idStorage, nameFile: v.name + "." + v.extension })
+                                    }
                                   }
                                 }}
                               >

src/module/project/ui/add_file_detail_project.tsx

@@ -69,7 +69,6 @@ export default function AddFileDetailProject() {
          }
 
          const response = await funAddFileProject(param.id, fd)
-         console.group(response)
          if (response.success) {
             setDataRealtime([{
                category: "project-detail-file",
@@ -107,7 +106,7 @@ export default function AddFileDetailProject() {
                   }}
                   activateOnClick={false}
                   maxSize={3 * 1024 ** 2}
-                  accept={['image/png', 'image/jpeg', 'image/heic', 'application/pdf']}
+                  accept={['image/png', 'image/jpeg', 'image/heic', 'application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']}
                   onReject={(files) => {
                      return toast.error('File yang diizinkan: .png, .jpg, .heic, .pdf dengan ukuran maksimal 3 MB')
                   }}

src/module/project/ui/create_project.tsx

@@ -413,7 +413,7 @@ export default function CreateProject() {
         }}
         activateOnClick={false}
         maxSize={3 * 1024 ** 2}
-        accept={['image/png', 'image/jpeg', 'image/heic', 'application/pdf']}
+        accept={['image/png', 'image/jpeg', 'image/heic', 'application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']}
         onReject={(files) => {
           return toast.error('File yang diizinkan: .png, .jpg, .heic, .pdf dengan ukuran maksimal 3 MB')
         }}

src/module/project/ui/list_file_detail_project.tsx

@@ -7,8 +7,9 @@ import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
 import { useParams } from 'next/navigation';
 import { useState } from 'react';
 import toast from 'react-hot-toast';
-import { BsFileTextFill, BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from 'react-icons/bs';
+import { BsFileTextFill, BsFiletypeCsv, BsFiletypeDocx, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng, BsFiletypePptx, BsFiletypeXlsx } from 'react-icons/bs';
 import { FaTrash } from 'react-icons/fa6';
+import { ImDownload3 } from "react-icons/im";
 import { useWibuRealtime } from 'wibu-realtime';
 import { funDeleteFileProject, funGetOneProjectById } from '../lib/api_project';
 import { IDataFileProject } from '../lib/type_project';
@@ -113,6 +114,28 @@ export default function ListFileDetailProject() {
     }
   }, [dataRealTime])
 
+  const onDownload = async () => {
+    try {
+      const fileUrl = `https://wibu-storage.wibudev.com/api/files/${idStorage}`;
+      const response = await fetch(fileUrl);
+      const blob = await response.blob();
+
+      // Create a link element, use Blob URL
+      const link = document.createElement("a");
+      const url = window.URL.createObjectURL(blob);
+      link.href = url;
+      link.download = `${nameData}`; // Nama file yang akan diunduh
+      document.body.appendChild(link);
+      link.click();
+
+      // Cleanup
+      window.URL.revokeObjectURL(url);
+      document.body.removeChild(link);
+    } catch (error) {
+      alert(error);
+    }
+  };
+
   return (
     <>
       <Box pt={20}>
@@ -167,13 +190,12 @@ export default function ListFileDetailProject() {
                         }}>
                           {item.extension == "pdf" && <BsFiletypePdf size={30} />}
                           {item.extension == "csv" && <BsFiletypeCsv size={30} />}
-                          {item.extension == "png" && <BsFiletypePng size={30} />}
+                          {(item.extension == "png" || item.extension == "PNG") && <BsFiletypePng size={30} />}
-                          {item.extension == "jpg" && <BsFiletypeJpg size={30} />}
+                          {(item.extension == "jpg" || item.extension == "jpeg" || item.extension == "JPG" || item.extension == "JPEG") && <BsFiletypeJpg size={30} />}
-                          {item.extension == "jpeg" && <BsFiletypeJpg size={30} />}
-                          {item.extension == "PNG" && <BsFiletypePng size={30} />}
-                          {item.extension == "JPG" && <BsFiletypeJpg size={30} />}
-                          {item.extension == "JPEG" && <BsFiletypeJpg size={30} />}
                           {item.extension == "heic" && <BsFiletypeHeic size={30} />}
+                          {(item.extension == "doc" || item.extension == "docx") && <BsFiletypeDocx size={30} />}
+                          {(item.extension == "xls" || item.extension == "xlsx") && <BsFiletypeXlsx size={30} />}
+                          {(item.extension == "ppt" || item.extension == "pptx") && <BsFiletypePptx size={30} />}
                         </Grid.Col>
                         <Grid.Col
                           span={{
@@ -203,15 +225,25 @@ export default function ListFileDetailProject() {
         <LayoutDrawer opened={openDrawer} title={<Text truncate="end">{nameData}</Text>} onClose={() => setOpenDrawer(false)}>
           <Box>
             <Stack pt={10}>
-              <SimpleGrid
+              <SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }}>
-                cols={{ base: 3, sm: 3, lg: 3 }}
+                {
-              >
+                  (isExtension != "doc" && isExtension != "docx" && isExtension != "xls" && isExtension != "xlsx" && isExtension != "ppt" && isExtension != "pptx") &&
-                <Flex onClick={() => { setOpenModalView(true) }} justify={'center'} align={'center'} direction={'column'} >
+                  <Flex onClick={() => { setOpenModalView(true) }} justify={'center'} align={'center'} direction={'column'} >
+                    <Box>
+                      <BsFileTextFill size={30} color={tema.get().utama} />
+                    </Box>
+                    <Box>
+                      <Text c={tema.get().utama}>Lihat file</Text>
+                    </Box>
+                  </Flex>
+                }
+
+                <Flex onClick={() => { onDownload() }} justify={'center'} align={'center'} direction={'column'} >
                   <Box>
-                    <BsFileTextFill size={30} color={tema.get().utama} />
+                    <ImDownload3 size={30} color={tema.get().utama} />
                   </Box>
                   <Box>
-                    <Text c={tema.get().utama}>Lihat file</Text>
+                    <Text c={tema.get().utama}>Download</Text>
                   </Box>
                 </Flex>
 
@@ -227,7 +259,7 @@ export default function ListFileDetailProject() {
                         <FaTrash size={30} color={reason == null ? tema.get().utama : "gray"} />
                       </Box>
                       <Box>
-                        <Text c={reason == null ? tema.get().utama : "gray"}>Hapus file</Text>
+                        <Text c={reason == null ? tema.get().utama : "gray"}>Hapus</Text>
                       </Box>
                     </Flex>
                 }

src/module/project/ui/results_file.tsx

@@ -1,10 +1,38 @@
-
 import { Box, Center, Grid, Group, Text } from '@mantine/core';
-import React from 'react';
+import { useShallowEffect } from '@mantine/hooks';
-import { BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from 'react-icons/bs';
+import { useState } from 'react';
+import { BsFiletypeCsv, BsFiletypeDocx, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng, BsFiletypePptx, BsFiletypeXlsx } from 'react-icons/bs';
 import { IListFileTaskProject } from '../lib/type_project';
 
 export default function ResultsFile({ name, extension }: IListFileTaskProject) {
+  const [fixed, setFixed] = useState(extension)
+
+  function cekExtension() {
+    let jadi = extension
+    if (extension == "msword") {
+      jadi = "doc"
+    } else if (extension == "vnd.openxmlformats-officedocument.wordprocessingml.document") {
+      jadi = "docx"
+    } else if (extension == "vnd.ms-excel") {
+      jadi = "xls"
+    } else if (extension == "vnd.openxmlformats-officedocument.spreadsheetml.sheet") {
+      jadi = "xlsx"
+    } else if (extension == "vnd.ms-powerpoint") {
+      jadi = "ppt"
+    } else if (extension == "vnd.openxmlformats-officedocument.presentationml.presentation") {
+      jadi = "pptx"
+    } else {
+      jadi = extension
+    }
+
+    setFixed(jadi)
+  }
+
+
+  useShallowEffect(() => {
+    cekExtension()
+  }, []);
+
   return (
     <Box style={{
       borderRadius: 10,
@@ -14,11 +42,14 @@ export default function ResultsFile({ name, extension }: IListFileTaskProject) {
       <Grid gutter={"sm"} justify='flex-start' align='flex-start'>
         <Grid.Col span={"auto"}>
           <Center >
-            {extension == "pdf" && <BsFiletypePdf size={30} />}
+            {fixed == "pdf" && <BsFiletypePdf size={30} />}
-            {extension == "csv" && <BsFiletypeCsv size={30} />}
+            {fixed == "csv" && <BsFiletypeCsv size={30} />}
-            {extension == "png" && <BsFiletypePng size={30} />}
+            {fixed == "png" && <BsFiletypePng size={30} />}
-            {extension == "jpg" || extension == "jpeg" && <BsFiletypeJpg size={30} />}
+            {fixed == "jpg" || fixed == "jpeg" && <BsFiletypeJpg size={30} />}
-            {extension == "heic" && <BsFiletypeHeic size={30} />}
+            {fixed == "heic" && <BsFiletypeHeic size={30} />}
+            {fixed == "doc" || fixed == "docx" && <BsFiletypeDocx size={30} />}
+            {fixed == "xls" || fixed == "xlsx" && <BsFiletypeXlsx size={30} />}
+            {fixed == "ppt" || fixed == "pptx" && <BsFiletypePptx size={30} />}
           </Center>
         </Grid.Col>
         <Grid.Col span={10}>

src/module/task/ui/add_file_detail_task.tsx

@@ -107,7 +107,7 @@ export default function AddFileDetailTask() {
                   }}
                   activateOnClick={false}
                   maxSize={3 * 1024 ** 2}
-                  accept={['image/png', 'image/jpeg', 'image/heic', 'application/pdf']}
+                  accept={['image/png', 'image/jpeg', 'image/heic', 'application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']}
                   onReject={(files) => {
                      return toast.error('File yang diizinkan: .png, .jpg, .heic, .pdf dengan ukuran maksimal 3 MB')
                   }}

src/module/task/ui/create_task.tsx

@@ -336,7 +336,7 @@ export default function CreateTask() {
         }}
         activateOnClick={false}
         maxSize={3 * 1024 ** 2}
-        accept={['image/png', 'image/jpeg', 'image/heic', 'application/pdf']}
+        accept={['image/png', 'image/jpeg', 'image/heic', 'application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']}
         onReject={(files) => {
           return toast.error('File yang diizinkan: .png, .jpg, .heic, .pdf dengan ukuran maksimal 3 MB')
         }}

src/module/task/ui/detail_list_file_task.tsx

@@ -1,18 +1,19 @@
 'use client'
 import { globalRole, keyWibu, LayoutDrawer, LayoutModalViewFile, TEMA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
+import { globalIsMemberDivision } from "@/module/division_new";
 import { useHookstate } from "@hookstate/core";
 import { Box, Center, Flex, Grid, Group, SimpleGrid, Skeleton, Stack, Text } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useParams } from "next/navigation";
 import { useState } from "react";
 import toast from "react-hot-toast";
-import { BsFileTextFill, BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from "react-icons/bs";
+import { BsFileTextFill, BsFiletypeCsv, BsFiletypeDocx, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng, BsFiletypePptx, BsFiletypeXlsx } from "react-icons/bs";
 import { FaTrash } from "react-icons/fa6";
+import { ImDownload3 } from "react-icons/im";
 import { useWibuRealtime } from "wibu-realtime";
 import { funDeleteFileTask, funGetTaskDivisionById } from "../lib/api_task";
 import { IDataFileTaskDivision } from "../lib/type_task";
-import { globalIsMemberDivision } from "@/module/division_new";
 
 export default function ListFileDetailTask() {
    const roleLogin = useHookstate(globalRole)
@@ -111,6 +112,28 @@ export default function ListFileDetailTask() {
       }
    }, [dataRealTime])
 
+   const onDownload = async () => {
+      try {
+         const fileUrl = `https://wibu-storage.wibudev.com/api/files/${idDataStorage}`;
+         const response = await fetch(fileUrl);
+         const blob = await response.blob();
+
+         // Create a link element, use Blob URL
+         const link = document.createElement("a");
+         const url = window.URL.createObjectURL(blob);
+         link.href = url;
+         link.download = `${nameData}`; // Nama file yang akan diunduh
+         document.body.appendChild(link);
+         link.click();
+
+         // Cleanup
+         window.URL.revokeObjectURL(url);
+         document.body.removeChild(link);
+      } catch (error) {
+         alert(error);
+      }
+   };
+
    return (
       <Box pt={20}>
          <Text fw={'bold'} c={tema.get().utama}>File</Text>
@@ -159,13 +182,12 @@ export default function ListFileDetailTask() {
                                     <Center >
                                        {item.extension == "pdf" && <BsFiletypePdf size={30} />}
                                        {item.extension == "csv" && <BsFiletypeCsv size={30} />}
-                                       {item.extension == "png" && <BsFiletypePng size={30} />}
+                                       {(item.extension == "png" || item.extension == "PNG") && <BsFiletypePng size={30} />}
-                                       {item.extension == "jpg" && <BsFiletypeJpg size={30} />}
+                                       {(item.extension == "jpg" || item.extension == "jpeg" || item.extension == "JPG" || item.extension == "JPEG") && <BsFiletypeJpg size={30} />}
-                                       {item.extension == "jpeg" && <BsFiletypeJpg size={30} />}
-                                       {item.extension == "PNG" && <BsFiletypePng size={30} />}
-                                       {item.extension == "JPG" && <BsFiletypeJpg size={30} />}
-                                       {item.extension == "JPEG" && <BsFiletypeJpg size={30} />}
                                        {item.extension == "heic" && <BsFiletypeHeic size={30} />}
+                                       {(item.extension == "doc" || item.extension == "docx") && <BsFiletypeDocx size={30} />}
+                                       {(item.extension == "xls" || item.extension == "xlsx") && <BsFiletypeXlsx size={30} />}
+                                       {(item.extension == "ppt" || item.extension == "pptx") && <BsFiletypePptx size={30} />}
                                     </Center>
                                  </Grid.Col>
                                  <Grid.Col span={10}>
@@ -185,15 +207,24 @@ export default function ListFileDetailTask() {
          <LayoutDrawer opened={openDrawer} title={<Text truncate={'end'}>{nameData}</Text>} onClose={() => setOpenDrawer(false)}>
             <Box>
                <Stack pt={10}>
-                  <SimpleGrid
+                  <SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }} >
-                     cols={{ base: 3, sm: 3, lg: 3 }}
+                     {
-                  >
+                        (isExtension != "doc" && isExtension != "docx" && isExtension != "xls" && isExtension != "xlsx" && isExtension != "ppt" && isExtension != "pptx") &&
-                     <Flex onClick={() => { setOpenModalView(true) }} justify={'center'} align={'center'} direction={'column'} >
+                        <Flex onClick={() => { setOpenModalView(true) }} justify={'center'} align={'center'} direction={'column'} >
+                           <Box>
+                              <BsFileTextFill size={30} color={tema.get().utama} />
+                           </Box>
+                           <Box>
+                              <Text c={tema.get().utama}>Lihat file</Text>
+                           </Box>
+                        </Flex>
+                     }
+                     <Flex onClick={() => { onDownload() }} justify={'center'} align={'center'} direction={'column'} >
                         <Box>
-                           <BsFileTextFill size={30} color={tema.get().utama} />
+                           <ImDownload3 size={30} color={tema.get().utama} />
                         </Box>
                         <Box>
-                           <Text c={tema.get().utama}>Lihat file</Text>
+                           <Text c={tema.get().utama}>Download</Text>
                         </Box>
                      </Flex>
                      {

src/module/task/ui/results_file.tsx

@@ -1,9 +1,38 @@
 import { Box, Center, Grid, Group, Text } from '@mantine/core';
-import React from 'react';
+import React, { useState } from 'react';
-import { BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from 'react-icons/bs';
+import { BsFiletypeCsv, BsFiletypeDocx, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng, BsFiletypePptx, BsFiletypeXlsx } from 'react-icons/bs';
 import { IListFileTask } from '../lib/type_task';
+import { useShallowEffect } from '@mantine/hooks';
 
 export default function ResultsFile({ name, extension }: IListFileTask) {
+  const [fixed, setFixed] = useState(extension)
+
+  function cekExtension() {
+    let jadi = extension
+    if (extension == "msword") {
+      jadi = "doc"
+    } else if (extension == "vnd.openxmlformats-officedocument.wordprocessingml.document") {
+      jadi = "docx"
+    } else if (extension == "vnd.ms-excel") {
+      jadi = "xls"
+    } else if (extension == "vnd.openxmlformats-officedocument.spreadsheetml.sheet") {
+      jadi = "xlsx"
+    } else if (extension == "vnd.ms-powerpoint") {
+      jadi = "ppt"
+    } else if (extension == "vnd.openxmlformats-officedocument.presentationml.presentation") {
+      jadi = "pptx"
+    } else {
+      jadi = extension
+    }
+
+    setFixed(jadi)
+  }
+
+
+  useShallowEffect(() => {
+    cekExtension()
+  }, []);
+
   return (
     <Box style={{
       borderRadius: 10,
@@ -13,15 +42,14 @@ export default function ResultsFile({ name, extension }: IListFileTask) {
       <Grid gutter={"sm"} justify='flex-start' align='flex-start'>
         <Grid.Col span={"auto"}>
           <Center>
-            {extension == "pdf" && <BsFiletypePdf size={30} />}
+            {fixed == "pdf" && <BsFiletypePdf size={30} />}
-            {extension == "csv" && <BsFiletypeCsv size={30} />}
+            {fixed == "csv" && <BsFiletypeCsv size={30} />}
-            {extension == "png" && <BsFiletypePng size={30} />}
+            {fixed == "png" && <BsFiletypePng size={30} />}
-            {extension == "jpg" && <BsFiletypeJpg size={30} />}
+            {fixed == "jpg" || fixed == "jpeg" && <BsFiletypeJpg size={30} />}
-            {extension == "jpeg" && <BsFiletypeJpg size={30} />}
+            {fixed == "heic" && <BsFiletypeHeic size={30} />}
-            {extension == "PNG" && <BsFiletypePng size={30} />}
+            {fixed == "doc" || fixed == "docx" && <BsFiletypeDocx size={30} />}
-            {extension == "JPG" && <BsFiletypeJpg size={30} />}
+            {fixed == "xls" || fixed == "xlsx" && <BsFiletypeXlsx size={30} />}
-            {extension == "JPEG" && <BsFiletypeJpg size={30} />}
+            {fixed == "ppt" || fixed == "pptx" && <BsFiletypePptx size={30} />}
-            {extension == "heic" && <BsFiletypeHeic size={30} />}
           </Center>
         </Grid.Col>
         <Grid.Col span={10}>