Merge pull request #138 from bipproduction/lukman/22-agustus-2024

feat : update project

src/app/(application)/project/[id]/add-member/page.tsx

@@ -0,0 +1,10 @@
+import { AddMemberDetailProject } from '@/module/project';
+import React from 'react';
+
+function Page() {
+  return (
+    <AddMemberDetailProject/>
+  );
+}
+
+export default Page;

src/app/(application)/project/[id]/add-task/page.tsx

@@ -0,0 +1,10 @@
+import { AddDetailTaskProject } from '@/module/project';
+import React from 'react';
+
+function Page() {
+  return (
+    <AddDetailTaskProject />
+  );
+}
+
+export default Page;

src/app/(application)/project/[id]/cancel/page.tsx

@@ -0,0 +1,10 @@
+import { CancelProject } from '@/module/project';
+import React from 'react';
+
+function Page() {
+  return (
+    <CancelProject />
+  );
+}
+
+export default Page;

src/app/(application)/project/[id]/edit/page.tsx

@@ -0,0 +1,10 @@
+import { EditTaskProject } from '@/module/project';
+import React from 'react';
+
+function Page() {
+  return (
+    <EditTaskProject />
+  );
+}
+
+export default Page;

src/app/(application)/project/[id]/page.tsx

@@ -1,4 +1,4 @@
-import { LiatAnggotaDetailProject, ListFileDetailProject, ListTugasDetailProject, NavbarDetailProject, ProgressDetailProject, ViewDetailProject } from '@/module/project';
+import { ListAnggotaDetailProject, ListFileDetailProject, ListTugasDetailProject, NavbarDetailProject, ProgressDetailProject, ViewDetailProject } from '@/module/project';
 import { Box } from '@mantine/core';
 import React from 'react';
 
@@ -10,7 +10,7 @@ function Page() {
         <ProgressDetailProject />
         <ListTugasDetailProject />
         <ListFileDetailProject />
-        <LiatAnggotaDetailProject />
+        <ListAnggotaDetailProject />
       </Box>
     </Box>
   );

src/app/(application)/project/update/[id]/page.tsx

@@ -1,6 +1,7 @@
 import {
   DetailCreateUserProject,
   DetailDateEndTask,
+  EditDetailTaskProject,
   FileUploadProgres,
   ViewUpdateProgres,
 } from "@/module/project";
@@ -8,12 +9,16 @@ import {
 import React from "react";
 
 function Page({ searchParams }: { searchParams: any }) {
-  if (searchParams.page == "upload-progres") return <FileUploadProgres kategori="project" />;
+  // if (searchParams.page == "upload-progres") return <FileUploadProgres kategori="project" />;
-  if (searchParams.page == "detail-create-user")
+  // if (searchParams.page == "detail-create-user")
-    return <DetailCreateUserProject kategori="project" />;
+  //   return <DetailCreateUserProject kategori="project" />;
-  if (searchParams.page == "detail-date-task") return <DetailDateEndTask kategori="project" />;
+  // if (searchParams.page == "detail-date-task") return <DetailDateEndTask kategori="project" />;
 
-  return <ViewUpdateProgres searchParams={searchParams} />;
+  // return <ViewUpdateProgres searchParams={searchParams} />;
+
+  return (
+    <EditDetailTaskProject/>
+  )
 }
 
 export default Page;

src/app/api/calender/[id]/route.ts

@@ -152,7 +152,6 @@ export async function DELETE(request: Request, context: { params: { id: string }
 export async function PUT(request: Request, context: { params: { id: string } }) {
     try {
 
-        console.log('amalai')
         const user = await funGetUserByCookies()
         if (user.id == undefined) {
             return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
@@ -168,8 +167,6 @@ export async function PUT(request: Request, context: { params: { id: string } })
             }
         })
 
-        console.log(id, title, desc, timeStart, dateStart, timeEnd, linkMeet, repeatEventTyper, member)
-
         if (cek == 0) {
             return NextResponse.json(
                 {
@@ -218,7 +215,6 @@ export async function PUT(request: Request, context: { params: { id: string } })
             data: omitMember
         });
 
-        console.log(omitMember)
 
 
         return NextResponse.json({ success: true, message: "Berhasil mengedit calender" }, { status: 200 });

src/app/api/project/[id]/member/route.ts

@@ -61,7 +61,7 @@ export async function DELETE(request: Request, context: { params: { id: string }
         const { id } = context.params
         const { idUser } = (await request.json());
 
-        const data = await prisma.divisionProject.count({
+        const data = await prisma.project.count({
             where: {
                 id: id,
             },
@@ -92,3 +92,93 @@ export async function DELETE(request: Request, context: { params: { id: string }
         return NextResponse.json({ success: false, message: "Gagal mengeluarkan anggota project, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
     }
 }
+
+//GET MEMBER ALL USER ID GROUP
+export async function GET(request: Request, context: { params: { id: string } }) {
+    try {
+        const user = await funGetUserByCookies()
+        if (user.id == undefined) {
+            return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
+        }
+
+        const { id } = context.params
+        const groupId = user.idGroup
+        const userId = user.id
+
+        const data = await prisma.project.findUnique({
+            where: {
+                id: String(id),
+                isActive: true
+            }
+        })
+
+        if (data == null) {
+            return NextResponse.json(
+                {
+                    success: false,
+                    message: "Gagal, data tugas tidak ditemukan",
+                },
+                { status: 404 }
+            );
+        }
+
+
+        // const member = await prisma.projectMember.findMany({
+        //     where: {
+        //         idProject: String(id),
+        //         isActive: true
+        //     },
+        //     select: {
+        //         id: true,
+        //         isLeader: true,
+        //         idUser: true,
+        //         User: {
+        //             select: {
+        //                 name: true
+        //             }
+        //         }
+        //     },
+        //     orderBy: {
+        //         isLeader: 'desc',
+        //     }
+        // })
+
+        // const fixMember = member.map((v: any) => ({
+        //     ..._.omit(v, ["User"]),
+        //     name: v.User.name
+        // }))
+
+        const member = await prisma.user.findMany({
+            where: {
+                idGroup: String(groupId),
+                id: {
+                    not: String(userId)
+                },
+                isActive: true
+            },
+            select: {
+                id: true,
+                name: true,
+                email: true,
+            }
+        })
+
+        const fixMember = member.map((v: any) => ({
+            idUser: v.id,
+            name: v.name,
+            email: v.email,
+
+        }))
+
+        const dataFix = {
+            project: data,
+            member: fixMember
+        }
+
+        return NextResponse.json({ success: true, message: "Berhasil mendapatkan project", data: dataFix, }, { status: 200 });
+
+    } catch (error) {
+        console.error(error);
+        return NextResponse.json({ success: false, message: "Gagal mendapatkan project, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
+    }
+}

src/app/api/project/[id]/route.ts

@@ -43,7 +43,6 @@ export async function GET(request: Request, context: { params: { id: string } })
                 }
             })
 
-            console.log(dataProgress)
             const semua = dataProgress.length
             const selesai = _.filter(dataProgress, { status: 1 }).length
             const progress = Math.ceil((selesai / semua) * 100)
@@ -185,10 +184,10 @@ export async function DELETE(request: Request, context: { params: { id: string }
         }
 
         const { id } = context.params
-        const { idTask } = await request.json()
+        const { reason } = await request.json()
-        const data = await prisma.projectTask.count({
+        const data = await prisma.project.count({
             where: {
-                id: String(idTask)
+                id: id
             }
         })
 
@@ -207,7 +206,7 @@ export async function DELETE(request: Request, context: { params: { id: string }
             },
             data: {
                 status: 3,
-                reason: idTask
+                reason: reason
             }
         })
 

src/app/api/project/detail/[id]/route.ts

@@ -1,5 +1,6 @@
 import { prisma } from "@/module/_global";
 import { funGetUserByCookies } from "@/module/auth";
+import moment from "moment";
 import { NextResponse } from "next/server";
 
 
@@ -52,3 +53,137 @@ export async function DELETE(request: Request, context: { params: { id: string }
 
 
 // EDIT STATUS DETAIL PROJECT
+export async function PUT(request: Request, context: { params: { id: string } }) {
+    try {
+        const user = await funGetUserByCookies()
+        if (user.id == undefined) {
+            return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
+        }
+
+        const { id } = context.params;
+        const { status, idProject } = (await request.json());
+
+        const data = await prisma.projectTask.count({
+            where: {
+                id
+            }
+        })
+
+        if (data == 0) {
+            return NextResponse.json(
+                {
+                    success: false, message: "Gagal mendapatkan project, data tidak ditemukan",
+                },
+                { status: 404 }
+            );
+        }
+
+        const dataCreate = await prisma.projectTask.update({
+            where: {
+                id
+            },
+            data: {
+                status: status
+            }
+        })
+
+        const dataTask = await prisma.projectTask.findMany({
+            where: {
+                isActive: true,
+                idProject: idProject,
+            }
+        })
+
+        const semua = dataTask.length
+        const selesai = dataTask.filter((item) => item.status == 1).length
+        const prosess = Math.ceil((selesai / semua) * 100)
+        let statusProject = 1
+
+        if (prosess == 100) {
+            statusProject = 2
+        } else if (prosess == 0) {
+            statusProject = 0
+        }
+
+
+        const update = await prisma.project.update({
+            where: {
+                id: idProject
+            },
+            data: {
+                status: statusProject
+            }
+        })
+
+
+        return NextResponse.json({ success: true, message: "Status detail Project berhasil diupdate", data }, { status: 200 });
+
+    } catch (error) {
+        console.error(error);
+        return NextResponse.json({ success: false, message: "Gagal membatalkan project, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
+    }
+}
+
+
+// GET ONE DETAIL PROJECT
+export async function GET(request: Request, context: { params: { id: string } }) {
+    try {
+        const user = await funGetUserByCookies()
+        if (user.id == undefined) {
+            return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
+        }
+
+        const { id } = context.params;
+        const data = await prisma.projectTask.findUnique({
+            where: {
+                id: String(id),
+                isActive: true
+            }
+        })
+
+        if (!data) {
+            return NextResponse.json(
+                {
+                    success: false, message: "Gagal mendapatkan project, data tidak ditemukan",
+                },
+                { status: 404 }
+            );
+        }
+
+        return NextResponse.json({ success: true, message: "Detail project berhasil ditemukan", data }, { status: 200 });
+    } catch (error) {
+        console.error(error);
+        return NextResponse.json({ success: false, message: "Gagal mendapatkan project, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
+    }
+}
+
+
+// EDIT DETAIL PROJECT
+export async function POST(request: Request, context: { params: { id: string } }) {
+    try {
+        const user = await funGetUserByCookies()
+        if (user.id == undefined) {
+            return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
+        }
+
+        const { id } = context.params;
+        const { name, dateStart, dateEnd } = (await request.json());
+
+        const data = await prisma.projectTask.update({
+            where: {
+                id
+            },
+            data: {
+                name: name,
+                dateStart: new Date(moment(dateStart).format('YYYY-MM-DD')),
+                dateEnd: new Date(moment(dateEnd).format('YYYY-MM-DD')),
+            }
+        })
+
+        return NextResponse.json({ success: true, message: "Detail project berhasil diupdate", data }, { status: 200 });
+
+    } catch (error) {
+        console.error(error);
+        return NextResponse.json({ success: false, message: "Gagal membatalkan project, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
+    }
+}

src/app/api/project/route.ts

@@ -1,6 +1,7 @@
 import { prisma } from "@/module/_global";
 import { funGetUserByCookies } from "@/module/auth";
 import _ from "lodash";
+import moment from "moment";
 import { NextResponse } from "next/server";
 
 
@@ -63,3 +64,88 @@ export async function GET(request: Request) {
         return NextResponse.json({ success: false, message: "Gagal mendapatkan project, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
     }
 }
+
+// CREATE PROJECT 
+export async function POST(request: Request) {
+    try {
+        const user = await funGetUserByCookies()
+        if (user.id == undefined) {
+            return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
+        }
+
+        const { idVillage, idGroup, name, task, member, file } = (await request.json())
+        const userId = user.id
+        
+
+        const data = await prisma.project.create({
+            data: {
+                idVillage: String(idVillage),
+                idGroup: String(idGroup),
+                name: name,
+                desc: "",
+                createdBy: String(userId)
+            },
+            select: {
+                id: true
+            }
+        })
+
+        if (task.length > 0) {
+            const dataProject = task.map((v: any) => ({
+                ..._.omit(v, ["dateStart", "dateEnd", "name"]),
+                idProject: data.id,
+                name: v.name,
+                dateStart: new Date(moment(v.dateStart).format('YYYY-MM-DD')),
+                dateEnd: new Date(moment(v.dateEnd).format('YYYY-MM-DD')),
+            }))
+
+            const insertTask = await prisma.projectTask.createMany({
+                data: dataProject
+            })
+        }
+
+        if (member.length > 0) {
+            const dataMember = member.map((v: any) => ({
+                ..._.omit(v, ["idUser", "name"]),
+                idProject: data.id,
+                idUser: v.idUser,
+                name: v.name
+            }))
+
+            const insertMember = await prisma.projectMember.createMany({
+                data: dataMember
+            })
+        }
+
+        let fileFix: any[] = []
+
+        if (file.length > 0) {
+            file.map((v: any, index: any) => {
+               const f: any = file[index].get('file')
+               const fName = f.name
+               const fExt = fName.split(".").pop()
+               // funUploadFile(fName, f)
+   
+               const dataFile = {
+                  name: fName,
+                   extension: fExt,
+                  idProject: data.id,
+               }
+   
+               fileFix.push(dataFile)
+            })
+   
+            const insertFile = await prisma.divisionProjectFile.createMany({
+               data: fileFix
+            })
+   
+         }
+
+
+        return NextResponse.json({ success: true, message: "Berhasil mendapatkan divisi", data: data, }, { status: 200 });
+
+    } catch (error) {
+        console.error(error);
+        return NextResponse.json({ success: false, message: "Gagal mendapatkan divisi, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
+    }
+}

src/module/project/index.ts

@@ -14,7 +14,13 @@ import NavbarDetailProject from "./ui/navbar_detail_project";
 import ProgressDetailProject from "./ui/progress_detail_project";
 import ListTugasDetailProject from "./ui/list_tugas_detail_project";
 import ListFileDetailProject from "./ui/list_file_detail_project";
-import LiatAnggotaDetailProject from "./ui/liat_anggota_detail_project";
+import LiatAnggotaDetailProject from "./ui/list_anggota_detail_project";
+import EditTaskProject from "./ui/edit_task_project";
+import EditDetailTaskProject from "./ui/edit_detail_task_project";
+import ListAnggotaDetailProject from "./ui/list_anggota_detail_project";
+import AddDetailTaskProject from "./ui/add_detail_task_project";
+import CancelProject from "./ui/cancel_project";
+import AddMemberDetailProject from "./ui/add_member_detail_project";
 
 export { ViewProject }
 export { ViewCreateProject }
@@ -32,4 +38,9 @@ export { NavbarDetailProject }
 export { ProgressDetailProject }
 export { ListTugasDetailProject }
 export { ListFileDetailProject }
-export { LiatAnggotaDetailProject }
+export { ListAnggotaDetailProject }
+export { EditTaskProject }
+export { EditDetailTaskProject }
+export { AddDetailTaskProject }
+export { CancelProject }
+export { AddMemberDetailProject }

src/module/project/lib/api_project.ts

@@ -1,3 +1,4 @@
+import { IFormAddDetailproject, IFormAddMemberProject, IFormDateProject, IFormProject } from "./type_project";
 
 
 export const funGetAllProject = async (path?: string) => {
@@ -5,7 +6,120 @@ export const funGetAllProject = async (path?: string) => {
     return await response.json().catch(() => null);
 }
 
+export const funCreateProject = async (data: IFormProject) => {
+    const response = await fetch(`/api/project`, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+    });
+    return await response.json().catch(() => null);
+}
+
 export const funGetOneProjectById = async (path: string, kategori: string) => {
     const response = await fetch(`/api/project/${path}?cat=${kategori}`);
     return await response.json().catch(() => null);
 }
+
+export const funGetAllMemberById = async (path?: string) => {
+    const response = await fetch(`/api/project/${path}/member`);
+    return await response.json().catch(() => null);
+}
+
+
+export const funDeleteDetailProject = async (path: string) => {
+    const response = await fetch(`/api/project/detail/${path}`, {
+        method: "DELETE",
+        headers: {
+            "Content-Type": "application/json",
+        },
+    });
+    return await response.json().catch(() => null);
+}
+
+
+export const funUpdateStatusProject = async (path: string, data: { status: number, idProject: string }) => {
+    const response = await fetch(`/api/project/detail/${path}`, {
+        method: "PUT",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+    });
+    return await response.json().catch(() => null);
+}
+
+
+export const funGetDetailProject = async (path: string) => {
+    const response = await fetch(`/api/project/detail/${path}`);
+    return await response.json().catch(() => null);
+}
+
+export const funEditDetailProject = async (path: string, data: IFormDateProject) => {
+    const response = await fetch(`/api/project/detail/${path}`, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+    });
+    return await response.json().catch(() => null);
+}
+
+
+export const funCreateDetailProject = async (path: string, data: IFormAddDetailproject) => {
+    const response = await fetch(`/api/project/${path}`, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+    });
+    return await response.json().catch(() => null);
+}
+
+export const funAddMemberProject = async (path: string, data: IFormAddMemberProject) => {
+    const response = await fetch(`/api/project/${path}/member`, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+    });
+    return await response.json().catch(() => null);
+}
+
+
+export const funDeleteMemberProject = async (path: string, data: { idUser: string }) => {
+    const response = await fetch(`/api/project/${path}/member`, {
+        method: "DELETE",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+    });
+    return await response.json().catch(() => null);
+}
+
+export const funCancelProject = async (path: string, data: { reason: string }) => {
+    const response = await fetch(`/api/project/${path}`, {
+        method: "DELETE",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+    });
+    return await response.json().catch(() => null);
+}
+
+export const funEditProject = async (path: string, data: { name: string }) => {
+    const response = await fetch(`/api/project/${path}`, {
+        method: "PUT",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+    });
+    return await response.json().catch(() => null);
+}

src/module/project/lib/type_project.ts

@@ -1,9 +1,9 @@
 export interface IDataProject {
-    id: string
+  id: string
-    name: string
+  name: string
-    desc: string
+  desc: string
-    status: number
+  status: number
-    member: number
+  member: number
 }
 
 export interface IDataListTaskProject {
@@ -27,3 +27,41 @@ export interface IDataMemberProject {
   name: string
   email: string
 }
+
+export interface IFormProject {
+  idDivision: string,
+  name: string,
+  task: IFormDateProject[] | [],
+  member: IFormMemberProject[] | [],
+  file: FormData[] | []
+}
+
+export interface IFormDateProject {
+  dateStart: Date,
+  dateEnd: Date,
+  name: string,
+}
+
+export interface IFormMemberProject {
+  idUser: string,
+  name: string
+}
+
+
+export interface IFormAddDetailproject {
+  dateStart: Date,
+  dateEnd: Date,
+  name: string
+}
+
+
+export interface IFormAddMemberProject {
+  member: IFormMemberProject[] | []
+}
+
+export interface IDataMemberProjectDetail {
+  id: string,
+  idUser: string,
+  isLeader: string,
+  name: string
+}

src/module/project/lib/val_project.ts

@@ -1,3 +1,14 @@
 import { hookstate } from "@hookstate/core";
 
 export const globalRefreshProject = hookstate<boolean>(false)
+
+export const valStatusDetailProject = [
+    {
+       name: "Belum Dikerjakan",
+       value: 0
+    },
+    {
+       name: "Selesai",
+       value: 1
+    }
+ ]

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 { LayoutDrawer, WARNA } from '@/module/_global';
-import { Box, Center, Checkbox, Divider, Grid, Group, SimpleGrid, Text } from '@mantine/core';
+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 { AiOutlineFileDone, AiOutlineFileSync } from 'react-icons/ai';
-import { funGetOneProjectById } from '../lib/api_project';
+import { funDeleteDetailProject, funGetOneProjectById, funUpdateStatusProject } from '../lib/api_project';
-import { useParams } from 'next/navigation';
+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)
+                          setIdData(item.id)
-                          // setStatusData(item.status)
+                          setStatusData(item.status)
-                          // setOpenDrawer(true)
+                          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);

src/module/task/ui/add_member_detail_task.tsx

@@ -117,9 +117,11 @@ export default function AddMemberDetailTask() {
       <Box>
          <LayoutNavbarNew
             back=""
-            title="Pilih Anggota"
+            title="Pilih Anggotak"
             menu
          />
+               <pre>{JSON.stringify(isData, null, 1)}</pre>
+               <pre>{JSON.stringify(isDataMember, null, 1)}</pre>
          <Box p={20}>
             {/* <TextInput
           styles={{