upd: task divisi

Deskripsi:
- upload file
- view file

No Issues
This commit is contained in:
amel
2024-09-12 15:39:09 +08:00
parent e01dbed1eb
commit ad6bd2cbfb
9 changed files with 226 additions and 212 deletions

View File

@@ -452,6 +452,7 @@ model ContainerFileDivision {
id String @id @default(cuid()) id String @id @default(cuid())
Division Division @relation(fields: [idDivision], references: [id]) Division Division @relation(fields: [idDivision], references: [id])
idDivision String idDivision String
idStorage String?
name String name String
extension String extension String
isActive Boolean @default(true) isActive Boolean @default(true)

View File

@@ -90,7 +90,8 @@ export async function GET(request: Request, context: { params: { id: string } })
select: { select: {
id: true, id: true,
name: true, name: true,
extension: true extension: true,
idStorage: true
} }
} }
} }
@@ -101,6 +102,7 @@ export async function GET(request: Request, context: { params: { id: string } })
nameInStorage: v.ContainerFileDivision.id, nameInStorage: v.ContainerFileDivision.id,
name: v.ContainerFileDivision.name, name: v.ContainerFileDivision.name,
extension: v.ContainerFileDivision.extension, extension: v.ContainerFileDivision.extension,
idStorage: v.ContainerFileDivision.idStorage,
})) }))
allData = fix allData = fix
@@ -287,7 +289,7 @@ export async function PUT(request: Request, context: { params: { id: string } })
// create log user // create log user
const log = await createLogUser({ act: 'UPDATE', desc: 'User mengupdate data tugas divisi', table: 'divisionProject', data: id }) const log = await createLogUser({ act: 'UPDATE', desc: 'User mengupdate data tugas divisi', table: 'divisionProject', data: id })
return NextResponse.json( { success: true, message: "Tugas berhasil diedit", }, { status: 200 } ); return NextResponse.json({ success: true, message: "Tugas berhasil diedit", }, { status: 200 });
} catch (error) { } catch (error) {
console.error(error); console.error(error);
return NextResponse.json({ success: false, message: "Gagal mengedit tugas, coba lagi nanti", reason: (error as Error).message, }, { status: 500 }); return NextResponse.json({ success: false, message: "Gagal mengedit tugas, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });

View File

@@ -1,4 +1,4 @@
import { prisma } from "@/module/_global"; import { DIR, funDeleteFile, funUploadFile, prisma } from "@/module/_global";
import { funGetUserByCookies } from "@/module/auth"; import { funGetUserByCookies } from "@/module/auth";
import _ from "lodash"; import _ from "lodash";
import { NextResponse } from "next/server"; import { NextResponse } from "next/server";
@@ -42,7 +42,7 @@ export async function DELETE(request: Request, context: { params: { id: string }
} }
}) })
fs.unlink(`./public/file/task/${dataFile?.id}.${dataFile?.extension}`, (err) => { }) await funDeleteFile({ fileId: String(dataFile?.idStorage) })
const deleteRelasi = await prisma.divisionProjectFile.delete({ const deleteRelasi = await prisma.divisionProjectFile.delete({
where: { where: {
@@ -57,7 +57,7 @@ export async function DELETE(request: Request, context: { params: { id: string }
}); });
// create log user // create log user
const log = await createLogUser({ act: 'DELETE', desc: 'User menghpus file divisi', table: 'divisionProject', data: String(dataRelasi?.idProject) }) const log = await createLogUser({ act: 'DELETE', desc: 'User menghapus file tugas divisi', table: 'divisionProject', data: String(dataRelasi?.idProject) })
return NextResponse.json({ success: true, message: "File berhasil dihapus", data, }, { status: 200 }); return NextResponse.json({ success: true, message: "File berhasil dihapus", data, }, { status: 200 });
@@ -115,34 +115,29 @@ export async function POST(request: Request, context: { params: { id: string } }
const fName = file.name.replace("." + fExt, "") const fName = file.name.replace("." + fExt, "")
const insertToContainer = await prisma.containerFileDivision.create({ const upload = await funUploadFile({ file: file, dirId: DIR.task })
data: { if (upload.success) {
idDivision: String(dataProject?.idDivision), const insertToContainer = await prisma.containerFileDivision.create({
name: fName, data: {
extension: String(fExt) idDivision: String(dataProject?.idDivision),
}, name: fName,
select: { extension: String(fExt),
id: true idStorage: upload.data.id
},
select: {
id: true
}
})
const dataFile = {
idProject: id,
idDivision: dataProject?.idDivision,
idFile: insertToContainer.id,
createdBy: user.id,
} }
})
const nameFix = insertToContainer.id + '.' + fExt fileFix.push(dataFile)
const filePath = path.join(root, nameFix)
// Konversi ArrayBuffer ke Buffer
const buffer = Buffer.from(await file.arrayBuffer());
// Tulis file ke sistem
fs.writeFileSync(filePath, buffer);
const dataFile = {
idProject: id,
idDivision: dataProject?.idDivision,
idFile: insertToContainer.id,
createdBy: user.id,
} }
fileFix.push(dataFile)
} }
} }
@@ -152,12 +147,12 @@ export async function POST(request: Request, context: { params: { id: string } }
} }
// create log user // create log user
const log = await createLogUser({ act: 'CREATE', desc: 'User meambahkan file tugas divisi baru', table: 'divisionProject', data: id }) const log = await createLogUser({ act: 'CREATE', desc: 'User menambahkan file tugas divisi baru', table: 'divisionProject', data: id })
return NextResponse.json({ success: true, message: "Berhasil membuat tugas divisi" }, { status: 200 }); return NextResponse.json({ success: true, message: "Berhasil menambahkan file" }, { status: 200 });
} catch (error) { } catch (error) {
console.error(error); console.error(error);
return NextResponse.json({ success: false, message: "Gagal membuat tugas divisi, coba lagi nanti", reason: (error as Error).message, }, { status: 500 }); return NextResponse.json({ success: false, message: "Gagal menambahkan filae, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
} }
} }

View File

@@ -1,4 +1,4 @@
import { prisma } from "@/module/_global"; import { DIR, funUploadFile, prisma } from "@/module/_global";
import { funGetUserByCookies } from "@/module/auth"; import { funGetUserByCookies } from "@/module/auth";
import _, { ceil } from "lodash"; import _, { ceil } from "lodash";
import { NextResponse } from "next/server"; import { NextResponse } from "next/server";
@@ -153,42 +153,35 @@ export async function POST(request: Request) {
let fileFix: any[] = [] let fileFix: any[] = []
if (cekFile) { if (cekFile) {
const root = path.join(process.cwd(), "./public/file/task/");
for (var pair of body.entries()) { for (var pair of body.entries()) {
if (String(pair[0]).substring(0, 4) == "file") { if (String(pair[0]).substring(0, 4) == "file") {
const file = body.get(pair[0]) as File const file = body.get(pair[0]) as File
const fExt = file.name.split(".").pop() const fExt = file.name.split(".").pop()
const fName = file.name.replace("." + fExt, "") const fName = file.name.replace("." + fExt, "")
const upload = await funUploadFile({ file: file, dirId: DIR.task })
if (upload.success) {
const insertToContainer = await prisma.containerFileDivision.create({
data: {
idDivision: idDivision,
name: fName,
extension: String(fExt),
idStorage: upload.data.id
},
select: {
id: true
}
})
const insertToContainer = await prisma.containerFileDivision.create({ const dataFile = {
data: { idProject: data.id,
idDivision: idDivision, idDivision: idDivision,
name: fName, idFile: insertToContainer.id,
extension: String(fExt) createdBy: user.id,
},
select: {
id: true
} }
})
const nameFix = insertToContainer.id + '.' + fExt fileFix.push(dataFile)
const filePath = path.join(root, nameFix)
// Konversi ArrayBuffer ke Buffer
const buffer = Buffer.from(await file.arrayBuffer());
// Tulis file ke sistem
fs.writeFileSync(filePath, buffer);
const dataFile = {
idProject: data.id,
idDivision: idDivision,
idFile: insertToContainer.id,
createdBy: user.id,
} }
fileFix.push(dataFile)
} }
} }

View File

@@ -68,5 +68,6 @@ export interface IDataFileTaskDivision {
id: string id: string
name: string name: string
extension: string, extension: string,
nameInStorage: string nameInStorage: string,
idStorage: string
} }

View File

@@ -1,6 +1,7 @@
"use client"; "use client";
import { LayoutNavbarNew, WARNA } from "@/module/_global"; import { LayoutNavbarNew, WARNA } from "@/module/_global";
import { import {
ActionIcon,
Avatar, Avatar,
Box, Box,
Button, Button,
@@ -19,9 +20,10 @@ import { useParams, useRouter } from "next/navigation";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import { IFormDateTask } from "../lib/type_task"; import { IFormDateTask } from "../lib/type_task";
import moment from "moment"; import moment from "moment";
import { HiChevronLeft } from "react-icons/hi2";
export default function ViewDateEndTask({ onClose }: { onClose: (val: IFormDateTask) => void }) { export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: boolean) => void, onSet: (val: IFormDateTask) => void }) {
const [value, setValue] = useState<[Date | null, Date | null]>([null, null]); const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
const router = useRouter() const router = useRouter()
const param = useParams<{ id: string }>() const param = useParams<{ id: string }>()
@@ -37,7 +39,7 @@ export default function ViewDateEndTask({ onClose }: { onClose: (val: IFormDateT
if (title == "") if (title == "")
return toast.error("Error! harus memasukkan judul tugas") return toast.error("Error! harus memasukkan judul tugas")
onClose( onSet(
{ {
dateStart: value[0], dateStart: value[0],
dateEnd: value[1], dateEnd: value[1],
@@ -49,7 +51,13 @@ export default function ViewDateEndTask({ onClose }: { onClose: (val: IFormDateT
return ( return (
<Box> <Box>
<LayoutNavbarNew back={`/division/${param.id}/task/create`} title={"Tanggal Tugas"} menu /> <LayoutNavbarNew state={
<Box>
<ActionIcon variant="light" onClick={() => { onClose(true) }} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiChevronLeft size={20} color='white' />
</ActionIcon>
</Box>
} title={"Tanggal Tugas"} menu />
<Box p={20}> <Box p={20}>
<Group <Group
justify="center" justify="center"
@@ -112,22 +120,22 @@ export default function ViewDateEndTask({ onClose }: { onClose: (val: IFormDateT
/> />
</Stack> </Stack>
</Box> </Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{ <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550), maxWidth: rem(550),
zIndex: 999, zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`, backgroundColor: `${WARNA.bgWhite}`,
}}> }}>
<Button <Button
c={"white"} c={"white"}
bg={WARNA.biruTua} bg={WARNA.biruTua}
size="lg" size="lg"
radius={30} radius={30}
fullWidth fullWidth
onClick={() => { onSubmit() }} onClick={() => { onSubmit() }}
> >
Simpan Simpan
</Button> </Button>
</Box> </Box>
</Box> </Box>
); );
} }

View File

@@ -76,7 +76,7 @@ export default function CreateTask() {
if (response.success) { if (response.success) {
toast.success(response.message) toast.success(response.message)
// setTitle("") setTitle("")
member.set([]) member.set([])
setFileForm([]) setFileForm([])
setListFile([]) setListFile([])
@@ -92,7 +92,7 @@ export default function CreateTask() {
} }
if (openTugas) return <ViewDateEndTask onClose={(val) => { if (openTugas) return <ViewDateEndTask onClose={(val) => { setOpenTugas(false) }} onSet={(val) => {
setDataTask([...dataTask, val]) setDataTask([...dataTask, val])
setOpenTugas(false) setOpenTugas(false)
}} />; }} />;
@@ -148,7 +148,10 @@ export default function CreateTask() {
border: `1px solid ${"#D6D8F6"}`, border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10, borderRadius: 10,
}} }}
onClick={() => setOpenDrawer(true)} onClick={() =>
// setOpenDrawer(true)
openRef.current?.()
}
> >
<Text>Upload File</Text> <Text>Upload File</Text>
<IoIosArrowDropright size={25} /> <IoIosArrowDropright size={25} />
@@ -168,103 +171,103 @@ export default function CreateTask() {
</Box> </Box>
</Stack> </Stack>
<Box pb={100}> <Box pb={100}>
{ {
dataTask.length > 0 && dataTask.length > 0 &&
<Box pt={20}> <Box pt={20}>
<Text fw={'bold'} c={WARNA.biruTua}>Tanggal & Tugas</Text> <Text fw={'bold'} c={WARNA.biruTua}>Tanggal & Tugas</Text>
{
dataTask.map((v, i) => {
return (
<Box key={i} onClick={() => {
setIndexDelTask(i)
setOpenDrawerTask(true)
}}>
<ResultsDateAndTask dateStart={v.dateStart} dateEnd={v.dateEnd} title={v.title} />
</Box>
)
})
}
</Box>
}
{
listFile.length > 0 &&
<Box pt={20}>
<Text fw={'bold'} c={WARNA.biruTua}>File</Text>
<Box bg={"white"} style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
padding: 20
}}>
{ {
listFile.map((v, i) => { dataTask.map((v, i) => {
return ( return (
<Box key={i} onClick={() => { <Box key={i} onClick={() => {
setIndexDelFile(i) setIndexDelTask(i)
setOpenDrawerFile(true) setOpenDrawerTask(true)
}}> }}>
<ResultsFile name={v.name} extension={v.extension} /> <ResultsDateAndTask dateStart={v.dateStart} dateEnd={v.dateEnd} title={v.title} />
</Box> </Box>
) )
}) })
} }
</Box> </Box>
</Box> }
}
{
{ listFile.length > 0 &&
member.length > 0 && <Box pt={20}>
<Box pt={30}> <Text fw={'bold'} c={WARNA.biruTua}>File</Text>
<Group justify="space-between"> <Box bg={"white"} style={{
<Text c={WARNA.biruTua}>Anggota Terpilih</Text> borderRadius: 10,
<Text c={WARNA.biruTua}>Total {member.length} Anggota</Text> border: `1px solid ${"#D6D8F6"}`,
</Group> padding: 20
<Box pt={10}> }}>
<Box mb={20}> {
<Box listFile.map((v, i) => {
style={{
border: `1px solid ${"#C7D6E8"}`,
borderRadius: 10,
}}
px={20}
py={10}
>
{member.get().map((v: any, i: any) => {
return ( return (
<Box key={i}> <Box key={i} onClick={() => {
<Grid align='center' mt={10} setIndexDelFile(i)
> setOpenDrawerFile(true)
<Grid.Col span={9}> }}>
<Group> <ResultsFile name={v.name} extension={v.extension} />
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={isMobile ? 'md' : 'lg'} /> </Box>
<Box w={{ )
base: isMobile ? 130 : 140, })
xl: 270 }
}}> </Box>
<Text c={WARNA.biruTua} fw={"bold"} lineClamp={1} fz={isMobile ? 14 : 16}> </Box>
{v.name} }
</Text>
</Box>
</Group> {
</Grid.Col> member.length > 0 &&
<Grid.Col span={3}> <Box pt={30}>
<Text c={WARNA.biruTua} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}> <Group justify="space-between">
Anggota <Text c={WARNA.biruTua}>Anggota Terpilih</Text>
</Text> <Text c={WARNA.biruTua}>Total {member.length} Anggota</Text>
</Grid.Col> </Group>
</Grid> <Box pt={10}>
<Box mt={10}> <Box mb={20}>
<Divider size={"xs"} /> <Box
style={{
border: `1px solid ${"#C7D6E8"}`,
borderRadius: 10,
}}
px={20}
py={10}
>
{member.get().map((v: any, i: any) => {
return (
<Box key={i}>
<Grid align='center' mt={10}
>
<Grid.Col span={9}>
<Group>
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={isMobile ? 'md' : 'lg'} />
<Box w={{
base: isMobile ? 130 : 140,
xl: 270
}}>
<Text c={WARNA.biruTua} fw={"bold"} lineClamp={1} fz={isMobile ? 14 : 16}>
{v.name}
</Text>
</Box>
</Group>
</Grid.Col>
<Grid.Col span={3}>
<Text c={WARNA.biruTua} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
Anggota
</Text>
</Grid.Col>
</Grid>
<Box mt={10}>
<Divider size={"xs"} />
</Box>
</Box> </Box>
</Box> );
); })}
})} </Box>
</Box> </Box>
</Box> </Box>
</Box> </Box>
</Box> }
}
</Box> </Box>
</Box> </Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{ <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
@@ -290,50 +293,52 @@ export default function CreateTask() {
</Button> </Button>
</Box> </Box>
<Dropzone
openRef={openRef}
onDrop={async (files) => {
if (!files || _.isEmpty(files))
return toast.error('Tidak ada file yang dipilih')
setFileForm([...fileForm, files[0]])
setListFile([...listFile, { name: files[0].name, extension: files[0].type.split("/")[1] }])
}}
activateOnClick={false}
maxSize={3 * 1024 ** 2}
accept={['text/csv', 'image/png', 'image/jpeg', 'image/heic', 'application/pdf']}
onReject={(files) => {
return toast.error('File yang diizinkan: .csv, .png, .jpg, .heic, .pdf dengan ukuran maksimal 3 MB')
}}
></Dropzone>
{/* Drawer pilih file */} {/* Drawer pilih file */}
<LayoutDrawer {/* <LayoutDrawer
opened={openDrawer} opened={openDrawer}
onClose={() => setOpenDrawer(false)} onClose={() => setOpenDrawer(false)}
title={"Pilih File"} title={"Pilih File"}
> >
<Flex justify={"flex-start"} px={20}> <Flex justify={"flex-start"} px={20}>
<Dropzone
openRef={openRef} <Box onClick={() => openRef.current?.()}>
onDrop={async (files) => { <Box
if (!files || _.isEmpty(files)) bg={"#DCEED8"}
return toast.error('Tidak ada file yang dipilih') style={{
setFileForm([...fileForm, files[0]]) border: `1px solid ${"#D6D8F6"}`,
setListFile([...listFile, { name: files[0].name, extension: files[0].type.split("/")[1] }]) padding: 20,
}} borderRadius: 10,
activateOnClick={false} }}
maxSize={3 * 1024 ** 2} >
accept={['text/csv', 'image/png', 'image/jpeg', 'image/heic', 'application/pdf']} <Center>
onReject={(files) => { <BsFiletypeCsv size={40} />
return toast.error('File yang diizinkan: .csv, .png, .jpg, .heic, .pdf dengan ukuran maksimal 3 MB') </Center>
}}
>
<Box onClick={() => openRef.current?.()}>
<Box
bg={"#DCEED8"}
style={{
border: `1px solid ${"#D6D8F6"}`,
padding: 20,
borderRadius: 10,
}}
>
<Center>
<BsFiletypeCsv size={40} />
</Center>
</Box>
<Text mt={10} ta={"center"}>
Pilih file
</Text>
<Text ta={"center"}>diperangkat</Text>
</Box> </Box>
</Dropzone> <Text mt={10} ta={"center"}>
{/* <Box onClick={() => router.push("/task/create?page=file-save")}> Pilih file
</Text>
<Text ta={"center"}>diperangkat</Text>
</Box>
<Box onClick={() => router.push("/task/create?page=file-save")}>
<Box <Box
bg={"#DCEED8"} bg={"#DCEED8"}
style={{ style={{
@@ -350,9 +355,9 @@ export default function CreateTask() {
Pilih file yang Pilih file yang
</Text> </Text>
<Text ta={"center"}>sudah ada</Text> <Text ta={"center"}>sudah ada</Text>
</Box> */} </Box>
</Flex> </Flex>
</LayoutDrawer> </LayoutDrawer> */}

View File

@@ -26,7 +26,7 @@ import { globalMemberTask } from "../lib/val_task";
import { FaCheck } from "react-icons/fa6"; import { FaCheck } from "react-icons/fa6";
import { RiListCheck } from "react-icons/ri"; import { RiListCheck } from "react-icons/ri";
import { BsListCheck } from "react-icons/bs"; import { BsListCheck } from "react-icons/bs";
import { HiMagnifyingGlass } from "react-icons/hi2"; import { HiChevronLeft, HiMagnifyingGlass } from "react-icons/hi2";
import { IoArrowBackOutline, IoClose } from "react-icons/io5"; import { IoArrowBackOutline, IoClose } from "react-icons/io5";
import { Carousel } from "@mantine/carousel"; import { Carousel } from "@mantine/carousel";
@@ -119,21 +119,27 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
async function fetchGetMember(val: string) { async function fetchGetMember(val: string) {
setSearchQuery(val) setSearchQuery(val)
try { try {
const res = await funGetSearchMemberDivision('?search=' + val, param.id); const res = await funGetSearchMemberDivision('?search=' + val, param.id);
if (res.success) { if (res.success) {
setData(res.data) setData(res.data)
} else { } else {
toast.error(res.message); toast.error(res.message);
} }
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} }
} }
return ( return (
<Box> <Box>
<LayoutNavbarNew <LayoutNavbarNew
// back="" state={
<Box>
<ActionIcon variant="light" onClick={() => { onClose(true) }} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiChevronLeft size={20} color='white' />
</ActionIcon>
</Box>
}
title="Pilih Anggota" title="Pilih Anggota"
menu={<ActionIcon onClick={handleSearchClick} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="search"> menu={<ActionIcon onClick={handleSearchClick} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="search">
<HiMagnifyingGlass size={20} color='white' /> <HiMagnifyingGlass size={20} color='white' />

View File

@@ -18,6 +18,7 @@ export default function ListFileDetailTask() {
const [openDrawer, setOpenDrawer] = useState(false) const [openDrawer, setOpenDrawer] = useState(false)
const [isOpenModal, setOpenModal] = useState(false) const [isOpenModal, setOpenModal] = useState(false)
const [idData, setIdData] = useState('') const [idData, setIdData] = useState('')
const [idDataStorage, setIdDataStorage] = useState('')
const [nameStorage, setNameStorage] = useState('') const [nameStorage, setNameStorage] = useState('')
const [nameData, setNameData] = useState('') const [nameData, setNameData] = useState('')
const [isOpenModalView, setOpenModalView] = useState(false) const [isOpenModalView, setOpenModalView] = useState(false)
@@ -52,6 +53,7 @@ export default function ListFileDetailTask() {
toast.success(res.message) toast.success(res.message)
getOneData() getOneData()
setIdData("") setIdData("")
setIdDataStorage("")
setOpenDrawer(false) setOpenDrawer(false)
} else { } else {
toast.error(res.message); toast.error(res.message);
@@ -102,6 +104,7 @@ export default function ListFileDetailTask() {
setExtension(item.extension) setExtension(item.extension)
setNameStorage(item.nameInStorage) setNameStorage(item.nameInStorage)
setIdData(item.id) setIdData(item.id)
setIdDataStorage(item.idStorage)
setOpenDrawer(true) setOpenDrawer(true)
}} }}
> >
@@ -167,7 +170,7 @@ export default function ListFileDetailTask() {
setOpenModal(false) setOpenModal(false)
}} /> }} />
<LayoutModalViewFile opened={isOpenModalView} onClose={() => setOpenModalView(false)} file={nameStorage + '.' + isExtension} extension={isExtension} fitur='task' /> <LayoutModalViewFile opened={isOpenModalView} onClose={() => setOpenModalView(false)} file={idDataStorage} extension={isExtension} fitur='task' />
</Box> </Box>
) )
} }