diff --git a/src/app/api/task/[id]/member/route.ts b/src/app/api/task/[id]/member/route.ts
index 02e96e2..ca5f340 100644
--- a/src/app/api/task/[id]/member/route.ts
+++ b/src/app/api/task/[id]/member/route.ts
@@ -1,7 +1,6 @@
 import { prisma } from "@/module/_global";
 import { funGetUserByCookies } from "@/module/auth";
 import _ from "lodash";
-import moment from "moment";
 import { NextResponse } from "next/server";
 
 // ADD MEMBER TASK DIVISI
@@ -21,8 +20,6 @@ export async function POST(request: Request, context: { params: { id: string } }
          },
       });
 
-      console.log(member, idDivision)
-
       if (data == 0) {
          return NextResponse.json(
             {
@@ -58,4 +55,56 @@ export async function POST(request: Request, context: { params: { id: string } }
       console.log(error);
       return NextResponse.json({ success: false, message: "Gagal menambah anggota tugas, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
    }
-}
\ No newline at end of file
+}
+
+// MENGELUARKAN ANGGOTA
+export async function DELETE(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 { idUser } = (await request.json());
+
+      const data = await prisma.divisionProject.count({
+         where: {
+            id: id,
+         },
+      });
+
+
+      if (data == 0) {
+         return NextResponse.json(
+            {
+               success: false,
+               message: "Gagal, data tugas tidak ditemukan",
+            },
+            { status: 404 }
+         );
+      }
+
+      console.log(id, idUser)
+
+
+      const del = await prisma.divisionProjectMember.deleteMany({
+         where: {
+            idUser: idUser,
+            idProject: id
+         }
+      })
+
+
+      return NextResponse.json(
+         {
+            success: true,
+            message: "Berhasil mengeluarkan anggota",
+         },
+         { status: 200 }
+      );
+   } catch (error) {
+      console.log(error);
+      return NextResponse.json({ success: false, message: "Gagal mengeluarkan anggota, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
+   }
+}
diff --git a/src/module/task/lib/api_task.ts b/src/module/task/lib/api_task.ts
index 959fe28..b96b676 100644
--- a/src/module/task/lib/api_task.ts
+++ b/src/module/task/lib/api_task.ts
@@ -89,6 +89,17 @@ export const funAddMemberTask = async (path: string, data: IFormAddMemberTask) =
    return await response.json().catch(() => null);
 };
 
+export const funDeleteMemberTask = async (path: string, data: { idUser: string }) => {
+   const response = await fetch(`/api/task/${path}/member`, {
+      method: "DELETE",
+      headers: {
+         "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+   });
+   return await response.json().catch(() => null);
+};
+
 
 export const funCancelTask = async (path: string, data: { reason: string }) => {
    const response = await fetch(`/api/task/${path}`, {
diff --git a/src/module/task/ui/detail_list_anggota_task.tsx b/src/module/task/ui/detail_list_anggota_task.tsx
index eec2fbb..d31accc 100644
--- a/src/module/task/ui/detail_list_anggota_task.tsx
+++ b/src/module/task/ui/detail_list_anggota_task.tsx
@@ -1,18 +1,26 @@
 'use client'
-import { WARNA } from "@/module/_global";
-import { Box, Group, Flex, Avatar, Text } from "@mantine/core";
+import { LayoutDrawer, WARNA } from "@/module/_global";
+import { Box, Group, Flex, Avatar, Text, SimpleGrid, Stack } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
-import { useParams } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
 import toast from "react-hot-toast";
-import { funGetTaskDivisionById } from "../lib/api_task";
+import { funDeleteMemberTask, funGetTaskDivisionById } from "../lib/api_task";
 import { IDataMemberTaskDivision } from "../lib/type_task";
+import { FaUser } from "react-icons/fa6";
+import { IoIosCloseCircle } from "react-icons/io";
+import LayoutModal from "@/module/_global/layout/layout_modal";
 
 
 export default function ListAnggotaDetailTask() {
    const [isData, setData] = useState<IDataMemberTaskDivision[]>([])
    const [loading, setLoading] = useState(true)
    const param = useParams<{ id: string, detail: string }>()
+   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)
@@ -36,6 +44,24 @@ export default function ListAnggotaDetailTask() {
    }, [param.detail])
 
 
+   async function onSubmit() {
+      try {
+         const res = await funDeleteMemberTask(param.detail, { 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 tugas divisi, coba lagi nanti");
+      }
+   }
+
+
    return (
       <Box pt={20}>
          <Group justify="space-between">
@@ -62,6 +88,10 @@ export default function ListAnggotaDetailTask() {
                                     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" />
@@ -83,6 +113,44 @@ export default function ListAnggotaDetailTask() {
                </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>
    )
 }
\ No newline at end of file