Files
sistem-desa-mandiri/src/module/project/ui/cancel_project.tsx
2024-08-22 15:22:29 +08:00

81 lines
2.2 KiB
TypeScript

"use client"
import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react';
import toast from 'react-hot-toast';
import { funCancelProject } from '../lib/api_project';
import { Box, Button, Stack, Textarea } from '@mantine/core';
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
export default function CancelProject() {
const router = useRouter()
const [alasan, setAlasan] = useState("")
const [openModal, setOpenModal] = useState(false)
const param = useParams<{ id: string }>()
function onVerification() {
if (alasan == "")
return toast.error("Error! harus memasukkan alasan pembatalan proyek")
setOpenModal(true)
}
async function onSubmit() {
try {
const res = await funCancelProject(param.id, { reason: alasan })
if (res.success) {
toast.success(res.message)
router.push("/project")
} else {
toast.error(res.message)
}
} catch (error) {
console.log(error)
toast.error("Gagal membatalkan proyek, coba lagi nanti")
}
}
return (
<Box>
<LayoutNavbarNew back="" title={"Pembatalan Proyek"} menu />
<Box p={20}>
<Stack pt={15}>
<Textarea styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
value={alasan}
size="md" placeholder='Contoh : proyek tidak sesuai' label="Alasan Pembatalan"
onChange={(event) => setAlasan(event.target.value)}
/>
</Stack>
<Box mt={"xl"}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => { onVerification() }}
>
Simpan
</Button>
</Box>
</Box>
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin membatalkan proyek ini? Pembatalan proyek bersifat permanen"
onYes={(val) => {
if (val) {
onSubmit()
}
setOpenModal(false)
}} />
</Box>
);
}