Files
sistem-desa-mandiri/src/module/project/components/create_project.tsx
2024-07-18 16:28:29 +08:00

157 lines
4.4 KiB
TypeScript

"use client";
import { LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
import { Box, Button, Center, Flex, Group, Select, Stack, Text, TextInput } from "@mantine/core";
import { useRouter } from "next/navigation";
import React, { useState } from "react";
import { IoIosArrowDropright } from "react-icons/io";
import { BsFiletypeCsv } from "react-icons/bs";
import ResultsDateAndTask from "./results_date-and_task";
import ResultsFile from "./results_file";
import LayoutModal from "@/module/_global/layout/layout_modal";
import toast from "react-hot-toast";
export default function CreateProject({ searchParams }: { searchParams: any }) {
const router = useRouter();
const [openDrawer, setOpenDrawer] = useState(false);
const [isModal, setModal] = useState(false)
function onTrue(val: boolean) {
if (val) {
toast.success("Sukses! Data tersimpan");
router.push('/project')
}
setModal(false)
}
return (
<Box>
<LayoutNavbarNew back="/project" title="tambah proyek" menu />
<Box p={20}>
<Stack>
<Select
placeholder="Pilih Grup" label="Grup" w={"100%"} size="md" required withAsterisk radius={30}
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
data={['Dinas', 'Adat', 'LPD', 'PKK']}
/>
<TextInput
label="Proyek"
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
required withAsterisk
placeholder="Nama Proyek"
size="md"
/>
<Box onClick={() => router.push("/project/create?page=task")}>
<Group
justify="space-between"
p={10}
style={{
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
}}
>
<Text>Tambah Tanggal & Tugas</Text>
<IoIosArrowDropright size={25} />
</Group>
</Box>
<Group
justify="space-between"
p={10}
style={{
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
}}
onClick={() => setOpenDrawer(true)}
>
<Text>Upload File</Text>
<IoIosArrowDropright size={25} />
</Group>
</Stack>
{
(searchParams.anggota == 'yes') &&
<>
<ResultsDateAndTask />
</>
}
{(searchParams.files == 'yes') &&
<>
<ResultsFile />
</>
}
{
(searchParams.button == 'yes') &&
<>
<Box mt="xl">
<Button color="white" bg={WARNA.biruTua} size="lg" radius={30} fullWidth onClick={() => setModal(true)}>
Simpan
</Button>
</Box>
</>
}
</Box>
<LayoutDrawer
opened={openDrawer}
onClose={() => setOpenDrawer(false)}
title={"Pilih File"}
>
<Flex justify={"space-around"}>
<Box onClick={() => ""}>
<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 onClick={() => router.push("/project/create?page=file-save")}>
<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 yang
</Text>
<Text ta={"center"}>sudah ada</Text>
</Box>
</Flex>
</LayoutDrawer>
<LayoutModal opened={isModal} onClose={() => setModal(false)}
description="Apakah Anda yakin ingin mengubah data?"
onYes={(val) => { onTrue(val) }} />
</Box >
);
}