feat : update project

src/module/project/ui/add_detail_task_project.tsx

@@ -0,0 +1,133 @@
+"use client"
+import { useParams, useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import toast from 'react-hot-toast';
+import { funCreateDetailProject } from '../lib/api_project';
+import { Box, Button, Group, Input, SimpleGrid, Stack, Text } from '@mantine/core';
+import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { DatePicker } from '@mantine/dates';
+import moment from 'moment';
+import LayoutModal from '@/module/_global/layout/layout_modal';
+
+export default function AddDetailTaskProject() {
+  const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
+  const router = useRouter()
+  const [name, setName] = useState("")
+  const [openModal, setOpenModal] = useState(false)
+  const param = useParams<{ id: string }>()
+
+  function onVerification() {
+    if (value[0] == null || value[1] == null)
+       return toast.error("Error! harus memilih tanggal")
+
+    if (name == "")
+       return toast.error("Error! harus memasukkan judul tugas")
+
+    setOpenModal(true)
+  }
+  
+  async function onSubmit() {
+    try {
+      const res = await funCreateDetailProject(param.id, {
+        name,
+        dateStart: (value[0] != null) ? value[0] : new Date,
+        dateEnd: (value[1] != null) ? value[1] : new Date,
+      })
+
+      if (res.success) {
+        toast.success(res.message)
+        setOpenModal(false)
+        router.push(`/project/${param.id}`)
+      } else {
+        toast.error(res.message)
+      }
+    } catch (error) {
+      console.log(error)
+      toast.error("Gagal menambahkan tugas, coba lagi nanti")
+    }
+  }
+
+  return (
+    <Box>
+    <LayoutNavbarNew back="" title={"Tambah Proyek"} menu />
+    <Box p={20}>
+       <Group
+          justify="center"
+          bg={"white"}
+          py={20}
+          style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
+       >
+          <DatePicker
+             styles={{}}
+             type="range"
+             value={value}
+             onChange={setValue}
+             size="md"
+             c={WARNA.biruTua}
+          />
+       </Group>
+       <SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
+          <Box>
+             <Text>Tanggal Mulai</Text>
+             <Group
+                justify="center"
+                bg={"white"}
+                h={45}
+                style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
+             >
+                <Text>{value[0] ? `${moment(value[0]).format('DD-MM-YYYY')}` : ""}</Text>
+             </Group>
+          </Box>
+          <Box>
+             <Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
+             <Group
+                justify="center"
+                bg={"white"}
+                h={45}
+                style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
+             >
+                <Text>{value[1] ? `${moment(value[1]).format('DD-MM-YYYY')}` : ""}</Text>
+             </Group>
+          </Box>
+       </SimpleGrid>
+       <Stack pt={15}>
+          <Input
+             styles={{
+                input: {
+                   border: `1px solid ${"#D6D8F6"}`,
+                   borderRadius: 10,
+                },
+             }}
+             placeholder="Input Nama Tahapan"
+             size="md"
+             value={name}
+             onChange={(e) => setName(e.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 menambahkan tugas?"
+       onYes={(val) => {
+          if (val) {
+             onSubmit()
+          }
+          setOpenModal(false)
+       }} />
+ </Box>
+  );
+}
+

src/module/project/ui/add_member_detail_project.tsx

@@ -0,0 +1,191 @@
+"use client"
+import { useParams, useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import { IDataMemberProject, IDataMemberProjectDetail } from '../lib/type_project';
+import toast from 'react-hot-toast';
+import { funAddMemberProject, funGetAllMemberById, funGetOneProjectById } from '../lib/api_project';
+import { funGetDivisionById } from '@/module/division_new';
+import { useShallowEffect } from '@mantine/hooks';
+import { Avatar, Box, Button, Divider, Flex, Group, Stack, Text } from '@mantine/core';
+import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { FaCheck } from 'react-icons/fa6';
+import LayoutModal from '@/module/_global/layout/layout_modal';
+
+export default function AddMemberDetailProject() {
+  const router = useRouter()
+  const param = useParams<{ id: string }>()
+  const [selectedFiles, setSelectedFiles] = useState<any>([])
+  const [isData, setData] = useState<IDataMemberProjectDetail[]>([])
+  const [isDataMember, setDataMember] = useState<IDataMemberProject[]>([])
+  const [selectAll, setSelectAll] = useState(false)
+  const [openModal, setOpenModal] = useState(false)
+
+
+  async function getData() {
+    try {
+      const response = await funGetAllMemberById(param.id)
+      if (response.success) {
+        setData(response.data.member)
+      } else {
+        toast.error(response.message)
+      }
+
+      const res = await funGetOneProjectById(param.id, 'member');
+      if (res.success) {
+        setDataMember(res.data)
+      } else {
+        toast.error(res.message);
+      }
+    } catch (error) {
+      console.log(error)
+      toast.error("Gagal mendapatkan anggota, coba lagi nanti");
+    }
+  }
+
+  const handleFileClick = (index: number) => {
+    if (selectedFiles.some((i: any) => i.idUser == isData[index].idUser)) {
+      setSelectedFiles(selectedFiles.filter((i: any) => i.idUser != isData[index].idUser))
+    } else {
+      setSelectedFiles([...selectedFiles, { idUser: isData[index].idUser, name: isData[index].name }])
+    }
+  };
+
+
+
+  const handleSelectAll = () => {
+    setSelectAll(!selectAll);
+    if (!selectAll) {
+      for (let index = 0; index < isData.length; index++) {
+        if (!isDataMember.some((i: any) => i.idUser == isData[index].idUser)) {
+          if (!selectedFiles.some((i: any) => i.idUser == isData[index].idUser)) {
+            const newArr = {
+              idUser: isData[index].idUser, name: isData[index].name
+            }
+            setSelectedFiles((selectedFiles: any) => [...selectedFiles, newArr])
+          }
+        }
+
+      }
+    } else {
+      setSelectedFiles([]);
+    }
+  };
+
+
+  function onVerifikasi() {
+    if (selectedFiles.length == 0) {
+      return toast.error("Error! silahkan pilih anggota")
+    }
+
+    setOpenModal(true)
+  }
+
+  useShallowEffect(() => {
+    getData()
+  }, []);
+
+  async function onSubmit() {
+    try {
+      const res = await funAddMemberProject(param.id, { member: selectedFiles });
+      if (res.success) {
+        toast.success(res.message)
+        router.back()
+      } else {
+        toast.error(res.message)
+      }
+    } catch (error) {
+      console.log(error)
+      toast.error("Gagal menambahkan anggota, coba lagi nanti");
+    }
+  }
+
+  return (
+    <Box>
+      <LayoutNavbarNew
+        back=""
+        title="Pilih Anggotak"
+        menu
+      />
+      <pre>{JSON.stringify(isData, null, 1)}</pre>
+      <pre>{JSON.stringify(isDataMember, null, 1)}</pre>
+      <Box p={20}>
+        {/* <TextInput
+     styles={{
+       input: {
+         color: WARNA.biruTua,
+         borderRadius: WARNA.biruTua,
+         borderColor: WARNA.biruTua,
+       },
+     }}
+     size="md"
+     radius={30}
+     leftSection={<HiMagnifyingGlass size={20} />}
+     placeholder="Pencarian"
+   /> */}
+        <Group justify="space-between" mt={20} onClick={handleSelectAll}>
+          <Text c={WARNA.biruTua} fw={"bold"}>
+            Pilih Semua Anggota
+          </Text>
+          {selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
+        </Group>
+        <Box mt={15}>
+          {isData.map((v, i) => {
+            const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
+            const found = isDataMember.some((i: any) => i.idUser == v.idUser)
+            return (
+              <Box mb={15} key={i} onClick={() => (!found) ? handleFileClick(i) : null}>
+                <Flex justify={"space-between"} align={"center"}>
+                  <Group>
+                    <Avatar src={"v.image"} alt="it's me" size="lg" />
+                    <Stack align="flex-start" justify="flex-start">
+                      <Text style={{
+                        cursor: 'pointer',
+                        display: 'flex',
+                        alignItems: 'center',
+                      }}>
+                        {v.name}
+                      </Text>
+                      <Text c={"dimmed"}>{(found) ? "sudah menjadi anggota" : ""}</Text>
+                    </Stack>
+                  </Group>
+                  <Text
+                    style={{
+                      cursor: 'pointer',
+                      display: 'flex',
+                      alignItems: 'center',
+                      paddingLeft: 20,
+                    }}
+                  >
+                    {isSelected ? <FaCheck style={{ marginRight: 10 }} /> : ""}
+                  </Text>
+                </Flex>
+                <Divider my={"md"} />
+              </Box>
+            );
+          })}
+        </Box>
+        <Box mt={"xl"}>
+          <Button
+            c={"white"}
+            bg={WARNA.biruTua}
+            size="lg"
+            radius={30}
+            fullWidth
+            onClick={() => { onVerifikasi() }}
+          >
+            Simpan
+          </Button>
+        </Box>
+      </Box>
+
+      <LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
+        description="Apakah Anda yakin ingin menambahkan anggota?"
+        onYes={(val) => {
+          if (val) {
+            onSubmit()
+          }
+          setOpenModal(false)
+        }} />
+    </Box>
+  );
+}

src/module/project/ui/cancel_project.tsx

@@ -0,0 +1,80 @@
+"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>
+  );
+}
+

src/module/project/ui/edit_detail_task_project.tsx

@@ -0,0 +1,148 @@
+"use client"
+import { useParams } from 'next/navigation';
+import React, { useState } from 'react';
+import toast from 'react-hot-toast';
+import { funEditDetailProject, funGetDetailProject } from '../lib/api_project';
+import moment from 'moment';
+import { useShallowEffect } from '@mantine/hooks';
+import { Box, Button, Group, Input, SimpleGrid, Stack, Text } from '@mantine/core';
+import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { DatePicker } from '@mantine/dates';
+import LayoutModal from '@/module/_global/layout/layout_modal';
+
+export default function EditDetailTaskProject() {
+  const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
+  const [name, setName] = useState("")
+  const param = useParams<{ id: string}>()
+  const [openModal, setOpenModal] = useState(false)
+
+  async function onSubmit() {
+    if (value[0] == null || value[1] == null)
+      return toast.error("Error! harus memilih tanggal")
+
+    if (name == "")
+      return toast.error("Error! harus memasukkan judul tugas")
+
+    try {
+      const res = await funEditDetailProject(param.id, {
+        name: name,
+        dateStart: value[0],
+        dateEnd: value[1],
+
+      })
+
+      if (res.success) {
+        toast.success(res.message);
+      } else {
+        toast.error(res.message);
+      }
+    } catch (error) {
+      console.error(error);
+      toast.error("Gagal edit detail tugas proyek, coba lagi nanti");
+    }
+  }
+
+  async function getOneData() {
+    try {
+      const res = await funGetDetailProject(param.id);
+      if (res.success) {
+        setName(res.data.name)
+        setValue([
+          new Date(moment(res.data.dateStart).format('YYYY-MM-DD')),
+          new Date(moment(res.data.dateEnd).format('YYYY-MM-DD')),
+        ])
+      } else {
+        toast.error(res.message);
+      }
+    } catch (error) {
+      console.error(error);
+      toast.error("Gagal mendapatkan detail tugas proyek, coba lagi nanti");
+    }
+  }
+
+  useShallowEffect(() => {
+    getOneData();
+  }, [param.id])
+
+  return (
+    <Box>
+    <LayoutNavbarNew back="" title={"Edit Detail Proyek"} menu />
+    <Box p={20}>
+       <Group
+          justify="center"
+          bg={"white"}
+          py={20}
+          style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
+       >
+          <DatePicker
+             styles={{}}
+             type="range"
+             value={value}
+             onChange={setValue}
+             size="md"
+             c={WARNA.biruTua}
+          />
+       </Group>
+       <SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
+          <Box>
+             <Text>Tanggal Mulai</Text>
+             <Group
+                justify="center"
+                bg={"white"}
+                h={45}
+                style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
+             >
+                <Text>{value[0] ? `${moment(value[0]).format('DD-MM-YYYY')}` : ""}</Text>
+             </Group>
+          </Box>
+          <Box>
+             <Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
+             <Group
+                justify="center"
+                bg={"white"}
+                h={45}
+                style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
+             >
+                <Text>{value[1] ? `${moment(value[1]).format('DD-MM-YYYY')}` : ""}</Text>
+             </Group>
+          </Box>
+       </SimpleGrid>
+       <Stack pt={15}>
+          <Input
+             styles={{
+                input: {
+                   border: `1px solid ${"#D6D8F6"}`,
+                   borderRadius: 10,
+                },
+             }}
+             placeholder="Input Nama Tahapan"
+             size="md"
+             value={name}
+             onChange={(e) => { setName(e.target.value) }}
+          />
+       </Stack>
+       <Box mt={"xl"}>
+          <Button
+             c={"white"}
+             bg={WARNA.biruTua}
+             size="lg"
+             radius={30}
+             fullWidth
+             onClick={() => { setOpenModal(true) }}
+          >
+             Simpan
+          </Button>
+       </Box>
+    </Box>
+
+    <LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
+       description="Apakah Anda yakin ingin mengubah data?"
+       onYes={(val) => {
+          if (val) {
+             onSubmit()
+          }
+          setOpenModal(false)
+       }} />
+ </Box>
+  );
+}

src/module/project/ui/edit_task_project.tsx

@@ -0,0 +1,102 @@
+"use client"
+import { useParams, useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import toast from 'react-hot-toast';
+import { funEditProject, funGetOneProjectById } from '../lib/api_project';
+import { useShallowEffect } from '@mantine/hooks';
+import { Box, Button, Input, Stack } from '@mantine/core';
+import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import LayoutModal from '@/module/_global/layout/layout_modal';
+
+export default function EditTaskProject() {
+  const router = useRouter()
+  const [name, setName] = useState("")
+  const [openModal, setOpenModal] = useState(false)
+  const param = useParams<{ id: string }>()
+
+  function onVerification() {
+    if (name == "")
+      return toast.error("Error! harus memasukkan judul tugas")
+
+    setOpenModal(true)
+  }
+
+  async function onSubmit() {
+    try {
+      const res = await funEditProject(param.id, { name })
+      if (res.success) {
+        toast.success(res.message)
+        router.push("./")
+      } else {
+        toast.error(res.message)
+      }
+    } catch (error) {
+      console.log(error)
+      toast.error("Gagal mengedit proyek, coba lagi nanti")
+    }
+  }
+
+  async function getOneData() {
+    try {
+      const res = await funGetOneProjectById(param.id, 'data');
+      if (res.success) {
+        setName(res.data.name);
+      } else {
+        toast.error(res.message);
+      }
+
+    } catch (error) {
+      console.error(error);
+      toast.error("Gagal mendapatkan data proyek, coba lagi nanti");
+    }
+  }
+
+  useShallowEffect(() => {
+    getOneData();
+  }, [param.id])
+
+  return (
+    <Box>
+      <LayoutNavbarNew back="" title={"Edit Judul Tugas"} menu />
+      <Box p={20}>
+        <Stack pt={15}>
+          <Input
+            styles={{
+              input: {
+                border: `1px solid ${"#D6D8F6"}`,
+                borderRadius: 10,
+              },
+            }}
+            placeholder="Tugas"
+            size="md"
+            value={name}
+            onChange={(e) => { setName(e.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 mengedit tugas ini?"
+        onYes={(val) => {
+          if (val) {
+            onSubmit()
+          }
+          setOpenModal(false)
+        }} />
+    </Box>
+  );
+}
+

src/module/project/ui/liat_anggota_detail_project.tsx

@@ -1,93 +0,0 @@
-'use client'
-import { WARNA } from '@/module/_global';
-import { Avatar, Box, Flex, Group, Text } from '@mantine/core';
-import React, { useState } from 'react';
-import { funGetOneProjectById } from '../lib/api_project';
-import toast from 'react-hot-toast';
-import { useParams } from 'next/navigation';
-import { useShallowEffect } from '@mantine/hooks';
-import { IDataMemberProject } from '../lib/type_project';
-
-
-export default function LiatAnggotaDetailProject() {
-  const [isData, setData] = useState<IDataMemberProject[]>([])
-  const param = useParams<{ id: string }>()
-  const [loading, setLoading] = useState(true)
-
-  async function getOneData() {
-    try {
-      setLoading(true)
-      const res = await funGetOneProjectById(param.id, 'member');
-      if (res.success) {
-        setData(res.data)
-      } else {
-        toast.error(res.message);
-      }
-
-    } catch (error) {
-      console.error(error);
-      toast.error("Gagal mendapatkan member proyek, coba lagi nanti");
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  useShallowEffect(() => {
-    getOneData();
-  }, [param.id])
-
-  return (
-    <Box pt={20}>
-      <Group justify="space-between">
-        <Text c={WARNA.biruTua}>Anggota Terpilih</Text>
-        <Text c={WARNA.biruTua}>Total {isData.length} Anggota</Text>
-      </Group>
-      <Box pt={10}>
-        <Box mb={20}>
-          <Box
-            style={{
-              border: `1px solid ${"#C7D6E8"}`,
-              borderRadius: 10,
-            }}
-            px={20}
-            py={10}
-          >
-            {
-              loading ? <Text>loading</Text> :
-                isData.length === 0 ? <Text>Tidak ada anggota</Text> :
-                  isData.map((v, i) => {
-                    return (
-                      <Flex
-                        justify={"space-between"}
-                        align={"center"}
-                        mt={20}
-                        key={i}
-                        onClick={() => {
-                          // setDataChoose({ id: v.idUser, name: v.name })
-                          // setOpenDrawer(true)
-                        }}
-                      >
-                        <Group>
-                          <Avatar src={""} alt="it's me" size="lg" />
-                          <Box>
-                            <Text c={WARNA.biruTua} fw={"bold"}>
-                              {v.name}
-                            </Text>
-                            <Text c={"#5A687D"} fz={14}>
-                              {v.email}
-                            </Text>
-                          </Box>
-                        </Group>
-                        <Text c={WARNA.biruTua} fw={"bold"}>
-                          Anggota
-                        </Text>
-                      </Flex>
-                    );
-                  })}
-          </Box>
-        </Box>
-      </Box>
-    </Box>
-  );
-}
-

src/module/project/ui/list_anggota_detail_project.tsx

@@ -0,0 +1,155 @@
+'use client'
+import { LayoutDrawer, WARNA } from '@/module/_global';
+import { Avatar, Box, Flex, Group, SimpleGrid, Stack, Text } from '@mantine/core';
+import React, { useState } from 'react';
+import { funDeleteMemberProject, funGetOneProjectById } from '../lib/api_project';
+import toast from 'react-hot-toast';
+import { useParams, useRouter } from 'next/navigation';
+import { useShallowEffect } from '@mantine/hooks';
+import { IDataMemberProject } from '../lib/type_project';
+import { FaUser } from 'react-icons/fa6';
+import { IoIosCloseCircle } from 'react-icons/io';
+import LayoutModal from '@/module/_global/layout/layout_modal';
+
+
+export default function ListAnggotaDetailProject() {
+  const [isData, setData] = useState<IDataMemberProject[]>([])
+  const param = useParams<{ id: string }>()
+  const [loading, setLoading] = useState(true)
+  const [openDrawer, setOpenDrawer] = useState(false)
+  const [isOpenModal, setOpenModal] = useState(false)
+  const [dataChoose, setDataChoose] = useState({ id: '', name: '' })
+  const router = useRouter()
+
+  async function getOneData() {
+    try {
+      setLoading(true)
+      const res = await funGetOneProjectById(param.id, 'member');
+      if (res.success) {
+        setData(res.data)
+      } else {
+        toast.error(res.message);
+      }
+
+    } catch (error) {
+      console.error(error);
+      toast.error("Gagal mendapatkan member proyek, coba lagi nanti");
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useShallowEffect(() => {
+    getOneData();
+  }, [param.id])
+
+  async function onSubmit() {
+    try {
+      const res = await funDeleteMemberProject(param.id, { idUser: dataChoose.id });
+      if (res.success) {
+        toast.success(res.message)
+        setDataChoose({ id: '', name: '' })
+        getOneData()
+        setOpenDrawer(false)
+      } else {
+        toast.error(res.message)
+      }
+    } catch (error) {
+      console.error(error);
+      toast.error("Gagal menghapus anggota proyek, coba lagi nanti");
+    }
+  }
+
+  return (
+    <Box pt={20}>
+      <Group justify="space-between">
+        <Text c={WARNA.biruTua}>Anggota Terpilih</Text>
+        <Text c={WARNA.biruTua}>Total {isData.length} Anggota</Text>
+      </Group>
+      <Box pt={10}>
+        <Box mb={20}>
+          <Box
+            style={{
+              border: `1px solid ${"#C7D6E8"}`,
+              borderRadius: 10,
+            }}
+            px={20}
+            py={10}
+          >
+            {
+              loading ? <Text>loading</Text> :
+                isData.length === 0 ? <Text>Tidak ada anggota</Text> :
+                  isData.map((v, i) => {
+                    return (
+                      <Flex
+                        justify={"space-between"}
+                        align={"center"}
+                        mt={20}
+                        key={i}
+                        onClick={() => {
+                          setDataChoose({ id: v.idUser, name: v.name })
+                          setOpenDrawer(true)
+                        }}
+                      >
+                        <Group>
+                          <Avatar src={""} alt="it's me" size="lg" />
+                          <Box>
+                            <Text c={WARNA.biruTua} fw={"bold"}>
+                              {v.name}
+                            </Text>
+                            <Text c={"#5A687D"} fz={14}>
+                              {v.email}
+                            </Text>
+                          </Box>
+                        </Group>
+                        <Text c={WARNA.biruTua} fw={"bold"}>
+                          Anggota
+                        </Text>
+                      </Flex>
+                    );
+                  })}
+          </Box>
+        </Box>
+      </Box>
+
+      <LayoutDrawer opened={openDrawer} title={dataChoose.name} onClose={() => setOpenDrawer(false)}>
+            <Box>
+               <Stack pt={10}>
+                  <SimpleGrid
+                     cols={{ base: 3, sm: 3, lg: 3 }}
+                  >
+                     <Flex onClick={() => { router.push('/member/' + dataChoose.id) }} justify={'center'} align={'center'} direction={'column'} >
+                        <Box>
+                           <FaUser size={30} color={WARNA.biruTua} />
+                        </Box>
+                        <Box>
+                           <Text c={WARNA.biruTua}>Lihat profil</Text>
+                        </Box>
+                     </Flex>
+
+                     <Flex onClick={() => { setOpenModal(true) }} justify={'center'} align={'center'} direction={'column'} >
+                        <Box>
+                           <IoIosCloseCircle size={30} color={WARNA.biruTua} />
+                        </Box>
+                        <Box>
+                           <Text c={WARNA.biruTua}>Keluarkan anggota</Text>
+                        </Box>
+                     </Flex>
+                  </SimpleGrid>
+               </Stack>
+            </Box>
+         </LayoutDrawer>
+
+         <LayoutModal opened={isOpenModal} onClose={() => setOpenModal(false)}
+            description="Apakah Anda yakin ingin mengeluarkan anggota?"
+            onYes={(val) => {
+               if (val) {
+                  onSubmit()
+               }
+               setOpenModal(false)
+            }} />
+
+    </Box>
+  );
+}
+

src/module/project/ui/list_tugas_detail_project.tsx

@@ -1,18 +1,29 @@
 'use client'
-import { WARNA } from '@/module/_global';
-import { Box, Center, Checkbox, Divider, Grid, Group, SimpleGrid, Text } from '@mantine/core';
+import { LayoutDrawer, WARNA } from '@/module/_global';
+import { Box, Center, Checkbox, Divider, Flex, Grid, Group, SimpleGrid, Stack, Text } from '@mantine/core';
 import React, { useState } from 'react';
 import toast from 'react-hot-toast';
-import { AiOutlineFileSync } from 'react-icons/ai';
-import { funGetOneProjectById } from '../lib/api_project';
-import { useParams } from 'next/navigation';
+import { AiOutlineFileDone, AiOutlineFileSync } from 'react-icons/ai';
+import { funDeleteDetailProject, funGetOneProjectById, funUpdateStatusProject } from '../lib/api_project';
+import { useParams, useRouter } from 'next/navigation';
 import { useShallowEffect } from '@mantine/hooks';
 import { IDataListTaskProject } from '../lib/type_project';
+import { useHookstate } from '@hookstate/core';
+import { globalRefreshProject, valStatusDetailProject } from '../lib/val_project';
+import { FaCheck, FaPencil, FaTrash } from 'react-icons/fa6';
+import LayoutModal from '@/module/_global/layout/layout_modal';
 
 export default function ListTugasDetailProject() {
   const [isData, setData] = useState<IDataListTaskProject[]>([])
   const [loading, setLoading] = useState(true)
   const param = useParams<{ id: string }>()
+  const [openDrawer, setOpenDrawer] = useState(false)
+  const [idData, setIdData] = useState('')
+  const refresh = useHookstate(globalRefreshProject)
+  const [statusData, setStatusData] = useState(0)
+  const [openDrawerStatus, setOpenDrawerStatus] = useState(false)
+  const [isOpenModal, setOpenModal] = useState(false)
+  const router = useRouter()
 
   async function getOneData() {
     try {
@@ -36,6 +47,42 @@ export default function ListTugasDetailProject() {
     getOneData();
   }, [param.id])
 
+  async function onDelete() {
+    try {
+      const res = await funDeleteDetailProject(idData);
+      if (res.success) {
+        toast.success(res.message);
+        getOneData();
+        setIdData("")
+        setOpenDrawer(false)
+      } else {
+        toast.error(res.message);
+      }
+    } catch (error) {
+      console.error(error);
+      toast.error("Gagal hapus tugas proyek, coba lagi nanti");
+    }
+  }
+
+  async function onUpdateStatus(val: number) {
+    try {
+      const res = await funUpdateStatusProject(idData, { status: val, idProject: param.id });
+      if (res.success) {
+        toast.success(res.message);
+        getOneData();
+        setIdData("")
+        setOpenDrawer(false)
+        setOpenDrawerStatus(false)
+        refresh.set(true)
+      } else {
+        toast.error(res.message);
+      }
+    } catch (error) {
+      console.error(error);
+      toast.error("Gagal update status tugas proyek, coba lagi nanti");
+    }
+  }
+
   return (
     <>
       <Box pt={20}>
@@ -58,9 +105,9 @@ export default function ListTugasDetailProject() {
                     <Box key={index}>
                       <Grid
                         onClick={() => {
-                          // setIdData(item.id)
-                          // setStatusData(item.status)
-                          // setOpenDrawer(true)
+                          setIdData(item.id)
+                          setStatusData(item.status)
+                          setOpenDrawer(true)
                         }}
                       >
                         <Grid.Col span={"auto"}>
@@ -115,12 +162,96 @@ export default function ListTugasDetailProject() {
                           </Box>
                         </Grid.Col>
                       </Grid>
-                      <Divider my={"lg"}/>
+                      <Divider my={"lg"} />
                     </Box>
                   )
                 })
           }
         </Box>
+        <LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
+          <Box>
+            <Stack pt={10}>
+              <SimpleGrid
+                cols={{ base: 3, sm: 3, lg: 3 }}
+              >
+                <Flex onClick={() => { setOpenDrawerStatus(true) }} justify={'center'} align={'center'} direction={'column'} >
+                  <Box>
+                    <AiOutlineFileDone size={30} color={WARNA.biruTua} />
+                  </Box>
+                  <Box>
+                    <Text c={WARNA.biruTua}>Update status</Text>
+                  </Box>
+                </Flex>
+
+                <Flex onClick={() => { router.push('update/' + idData) }} justify={'center'} align={'center'} direction={'column'} >
+                  <Box>
+                    <FaPencil size={30} color={WARNA.biruTua} />
+                  </Box>
+                  <Box>
+                    <Text c={WARNA.biruTua}>Edit tugas</Text>
+                  </Box>
+                </Flex>
+
+                <Flex onClick={() => { setOpenModal(true) }} justify={'center'} align={'center'} direction={'column'} >
+                  <Box>
+                    <FaTrash size={30} color={WARNA.biruTua} />
+                  </Box>
+                  <Box>
+                    <Text c={WARNA.biruTua}>Hapus tugas</Text>
+                  </Box>
+                </Flex>
+              </SimpleGrid>
+            </Stack>
+          </Box>
+        </LayoutDrawer>
+
+        <LayoutModal opened={isOpenModal} onClose={() => setOpenModal(false)}
+            description="Apakah Anda yakin ingin menghapus proyek ini?"
+            onYes={(val) => {
+               if (val) {
+                  onDelete()
+               }
+               setOpenModal(false)
+          }} />
+        
+        <LayoutDrawer opened={openDrawerStatus} title={'Status'} onClose={() => setOpenDrawerStatus(false)}>
+            <Box>
+               <Stack pt={10}>
+                  {
+                     valStatusDetailProject.map((item, index) => {
+                        return (
+                           <Box mb={5} key={index} onClick={() => { onUpdateStatus(item.value) }}>
+                              <Flex justify={"space-between"} align={"center"}>
+                                 <Group>
+                                    <Text style={{
+                                       cursor: 'pointer',
+                                       display: 'flex',
+                                       alignItems: 'center',
+                                    }}>
+                                       {item.name}
+                                    </Text>
+                                 </Group>
+                                 <Text
+                                    style={{
+                                       cursor: 'pointer',
+                                       display: 'flex',
+                                       alignItems: 'center',
+                                       paddingLeft: 20,
+                                    }}
+                                 >
+                                    {statusData === item.value ? <FaCheck style={{ marginRight: 10 }} /> : ""}
+                                 </Text>
+                              </Flex>
+                              <Divider my={"md"} />
+                           </Box>
+                        )
+                     })
+                  }
+
+               </Stack>
+            </Box>
+         </LayoutDrawer>
+
       </Box>
     </>
   );

src/module/project/ui/navbar_detail_project.tsx

@@ -3,16 +3,39 @@ import { LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
 import { ActionIcon, Box, Flex, SimpleGrid, Stack, Text } from '@mantine/core';
 import { useParams, useRouter } from 'next/navigation';
 import React, { useState } from 'react';
+import toast from 'react-hot-toast';
 import { FaPencil, FaUsers } from 'react-icons/fa6';
 import { HiMenu } from 'react-icons/hi';
 import { IoAddCircle } from 'react-icons/io5';
 import { MdCancel } from 'react-icons/md';
+import { funGetOneProjectById } from '../lib/api_project';
+import { useShallowEffect } from '@mantine/hooks';
 
 export default function NavbarDetailProject() {
   const router = useRouter()
   const param = useParams<{ id: string }>()
   const [name, setName] = useState('')
   const [isOpen, setOpen] = useState(false)
+
+  async function getOneData() {
+    try {
+      const res = await funGetOneProjectById(param.id, 'data');
+      if (res.success) {
+        setName(res.data.name);
+      } else {
+        toast.error(res.message);
+      }
+
+    } catch (error) {
+      console.error(error);
+      toast.error("Gagal mendapatkan data proyek, coba lagi nanti");
+    }
+  }
+
+  useShallowEffect(() => {
+    getOneData();
+  }, [param.id])
+
   return (
     <>
       <LayoutNavbarNew back="" title={name} menu={
@@ -28,7 +51,6 @@ export default function NavbarDetailProject() {
         </ActionIcon>
       } />
 
-
       <LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>
         <Box>
           <Stack pt={10}>

src/module/project/ui/progress_detail_project.tsx

@@ -19,7 +19,6 @@ export default function ProgressDetailProject() {
   async function getOneData() {
     try {
       const res = await funGetOneProjectById(param.id, 'progress');
-      console.log("data",res)
       if (res.success) {
         setValProgress(res.data.progress);
         setValLastUpdate(res.data.lastUpdate);