diff --git a/src/app/(application)/announcement/[id]/page.tsx b/src/app/(application)/announcement/[id]/page.tsx
index 872826e..8bd5211 100644
--- a/src/app/(application)/announcement/[id]/page.tsx
+++ b/src/app/(application)/announcement/[id]/page.tsx
@@ -1,8 +1,12 @@
-import { ViewDetailAnnouncement } from "@/module/announcement";
+import { DetailAnnouncement, NavbarDetailAnnouncement } from "@/module/announcement";
+import { Box } from "@mantine/core";
 
 function Page({ params }: { params: { id: string } }) {
    return (
-      <ViewDetailAnnouncement data={params.id} />
+      <Box>
+         <NavbarDetailAnnouncement />
+         <DetailAnnouncement id={params.id} />
+      </Box>
    )
 }
 
diff --git a/src/app/(application)/announcement/edit/[id]/page.tsx b/src/app/(application)/announcement/edit/[id]/page.tsx
index 11a0820..31ddb52 100644
--- a/src/app/(application)/announcement/edit/[id]/page.tsx
+++ b/src/app/(application)/announcement/edit/[id]/page.tsx
@@ -1,9 +1,11 @@
-// import { ViewEditAnnouncement } from "@/module/announcement";
+import { EditAnnouncement } from "@/module/announcement";
+import { Box } from "@mantine/core";
 
 function Page({ params }: { params: { id: any } }) {
    return (
-      // <ViewEditAnnouncement data={params.id} />
-      ""
+      <Box>
+         <EditAnnouncement />
+      </Box>
    )
 }
 
diff --git a/src/app/api/announcement/[id]/route.ts b/src/app/api/announcement/[id]/route.ts
index 6f86b70..95535bd 100644
--- a/src/app/api/announcement/[id]/route.ts
+++ b/src/app/api/announcement/[id]/route.ts
@@ -3,15 +3,19 @@ import { funGetUserByCookies } from "@/module/auth";
 import _ from "lodash";
 import { NextResponse } from "next/server";
 
+
+
+// GET ONE PENGUMUMAN, UNTUK TAMPIL DETAIL PENGUMUMAN
 export async function GET(request: Request, context: { params: { id: string } }) {
     try {
         const { id } = context.params;
+        const { searchParams } = new URL(request.url);
+        const kategori = searchParams.get('category');
         const user = await funGetUserByCookies()
         if (user.id == undefined) {
             return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
         }
-        const { searchParams } = new URL(request.url);
-        // const announcementId = searchParams.get("announcement");
+
         const announcement = await prisma.announcement.findUnique({
             where: {
                 id: id,
@@ -22,12 +26,12 @@ export async function GET(request: Request, context: { params: { id: string } })
                 desc: true,
             },
         });
+
         const announcementMember = await prisma.announcementMember.findMany({
             where: {
                 idAnnouncement: id,
             },
             select: {
-                idAnnouncement: true,
                 idGroup: true,
                 idDivision: true,
                 Group: {
@@ -35,24 +39,162 @@ export async function GET(request: Request, context: { params: { id: string } })
                         name: true,
                     },
                 },
+                Division: {
+                    select: {
+                        name: true,
+                    },
+                },
             },
         });
 
-        const allAnnouncementMember = announcementMember.map((v: any) => ({
-            ..._.omit(v, ["Group"]),
+        const formatMember = announcementMember.map((v: any) => ({
+            ..._.omit(v, ["Group", "Division"]),
+            idGroup: v.idGroup,
+            idDivision: v.idDivision,
             group: v.Group.name,
+            division: v.Division.name
         }))
 
+        const fixMember = Object.groupBy(formatMember, ({ group }) => group);
+
         return NextResponse.json(
             {
                 success: true,
                 message: "Berhasil mendapatkan announcement",
-                announcement, allAnnouncementMember
+                data: announcement,
+                member: fixMember
             },
             { status: 200 }
         );
+
+
+
     } catch (error) {
         console.error(error);
         return NextResponse.json({ success: false, message: "Gagal mendapatkan announcement, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
     }
-}
\ No newline at end of file
+}
+
+
+
+// HAPUS PENGUMUMAN
+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 data = await prisma.announcement.count({
+            where: {
+                id: id,
+            },
+        });
+
+        if (data == 0) {
+            return NextResponse.json(
+                {
+                    success: false,
+                    message: "Hapus pengumuman gagal, data tidak ditemukan",
+                },
+                { status: 404 }
+            );
+        }
+
+        const update = await prisma.announcement.update({
+            where: {
+                id: id,
+            },
+            data: {
+                isActive: false,
+            },
+        });
+
+        return NextResponse.json(
+            {
+                success: true,
+                message: "Pengumuman berhasil dihapus",
+                data,
+            },
+            { status: 200 }
+        );
+    } catch (error) {
+        console.log(error);
+        return NextResponse.json({ success: false, message: "Gagal mendapatkan pengumuman, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
+    }
+}
+
+
+
+//  EDIT PENGUMUMAN
+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 { title, desc, groups } = (await request.json());
+        const { id } = context.params;
+
+        const data = await prisma.announcement.count({
+            where: {
+                id: id,
+            },
+        });
+
+        if (data == 0) {
+            return NextResponse.json(
+                {
+                    success: false,
+                    message: "Hapus pengumuman gagal, data tidak ditemukan",
+                },
+                { status: 404 }
+            );
+        }
+
+        const update = await prisma.announcement.update({
+            where: {
+                id: id
+            },
+            data: {
+                title,
+                desc,
+            },
+        });
+
+        // hapus semua member divisi pengumuman
+        const hapus = await prisma.announcementMember.deleteMany({
+            where: {
+                idAnnouncement: id
+            }
+        })
+
+        let memberDivision = []
+
+        for (var i = 0, l = groups.length; i < l; i++) {
+            var obj = groups[i].Division;
+            for (let index = 0; index < obj.length; index++) {
+                const element = obj[index];
+                const fix = {
+                    idAnnouncement: id,
+                    idGroup: groups[i].id,
+                    idDivision: element.id
+                }
+                memberDivision.push(fix)
+            }
+        }
+
+        const announcementMember = await prisma.announcementMember.createMany({
+            data: memberDivision,
+        });
+
+        return NextResponse.json({ success: true, message: "Berhasil mengedit pengumuman" }, { status: 200 });
+
+    } catch (error) {
+        console.error(error);
+        return NextResponse.json({ success: false, message: "Gagal mengedit pengumuman, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
+    }
+}
+
diff --git a/src/app/api/announcement/get/route.ts b/src/app/api/announcement/get/route.ts
deleted file mode 100644
index baf9e82..0000000
--- a/src/app/api/announcement/get/route.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { apiAnnouncement } from "@/module/announcement";
-import { NextRequest } from "next/server";
-
-export async function GET(req: NextRequest) {
-    return apiAnnouncement(req, "GET")
-}
\ No newline at end of file
diff --git a/src/app/api/announcement/post/route.ts b/src/app/api/announcement/post/route.ts
deleted file mode 100644
index 138ee81..0000000
--- a/src/app/api/announcement/post/route.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { apiAnnouncement } from "@/module/announcement";
-import { NextRequest } from "next/server";
-
-export async function POST(req: NextRequest) {
-  return apiAnnouncement(req, "POST");
-}
diff --git a/src/app/api/announcement/route.ts b/src/app/api/announcement/route.ts
index c3c2af1..90cfd9c 100644
--- a/src/app/api/announcement/route.ts
+++ b/src/app/api/announcement/route.ts
@@ -7,6 +7,10 @@ import "moment/locale/id";
 import { NextResponse } from "next/server";
 
 export const dynamic = 'force-dynamic'
+
+
+
+// GET ALL PENGUMUMAN
 export async function GET(request: Request) {
     try {
         const user = await funGetUserByCookies();
@@ -32,6 +36,9 @@ export async function GET(request: Request) {
                 desc: true,
                 createdAt: true,
             },
+            orderBy: {
+                createdAt: 'desc'
+            }
         });
 
         const allData = announcements.map((v: any) => ({
@@ -47,6 +54,8 @@ export async function GET(request: Request) {
 }
 
 
+
+// CREATE PENGUMUMAN
 export async function POST(request: Request) {
     try {
         const user = await funGetUserByCookies();
@@ -54,40 +63,45 @@ export async function POST(request: Request) {
             return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
         }
 
-        const { title, desc, createBy, groups } = (await request.json());
+        const { title, desc, groups } = (await request.json());
         const villaId = user.idVillage
-        const roleId = user.idUserRole
+        const userId = user.id
 
         const data = await prisma.announcement.create({
             data: {
                 title,
                 desc,
                 idVillage: String(villaId),
-                createdBy: String(roleId),
+                createdBy: String(userId),
             },
             select: {
                 id: true,
-                title: true,
-                desc: true,
-                createdAt: true,
             }
         });
 
-        const dataMember = groups.map((group: any) => ({
-            idAnnouncement: data.id,
-            idGroup: group.idGroup,
-            idDivision: group.idDivision,
-            isActive: true,
-        }));
+        let memberDivision = []
+
+        for (var i = 0, l = groups.length; i < l; i++) {
+            var obj = groups[i].Division;
+            for (let index = 0; index < obj.length; index++) {
+                const element = obj[index];
+                const fix = {
+                    idAnnouncement: data.id,
+                    idGroup: groups[i].id,
+                    idDivision: element.id
+                }
+                memberDivision.push(fix)
+            }
+        }
 
         const announcementMember = await prisma.announcementMember.createMany({
-            data: dataMember,
+            data: memberDivision,
         });
 
-        return NextResponse.json({data, groups: announcementMember, success: true, message: "Berhasil mendapatkan pengumuman"}, { status: 200 });
+        return NextResponse.json({ success: true, message: "Berhasil membuat pengumuman" }, { status: 200 });
 
     } catch (error) {
         console.error(error);
-        return NextResponse.json({ success: false, message: "Gagal mendapatkan pengumuman, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
+        return NextResponse.json({ success: false, message: "Gagal membuat pengumuman, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
     }
 }
\ No newline at end of file
diff --git a/src/app/api/user/route.ts b/src/app/api/user/route.ts
index 37d587d..1d7f3b0 100644
--- a/src/app/api/user/route.ts
+++ b/src/app/api/user/route.ts
@@ -25,7 +25,7 @@ export async function GET(request: Request) {
 
         const users = await prisma.user.findMany({
             where: {
-                isActive: active == "true" ? true : false,
+                isActive: active == 'false' ? false : true,
                 idGroup: String(fixGroup),
                 name: {
                     contains: (name == undefined || name == null) ? "" : name,
diff --git a/src/module/announcement/api/api_announcement.ts b/src/module/announcement/api/api_announcement.ts
deleted file mode 100644
index 91a75cb..0000000
--- a/src/module/announcement/api/api_announcement.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { NextRequest } from "next/server";
-import { API_INDEX_ANNOUNCEMENT } from "./api_index";
-
-type Method = "GET" | "POST";
-export async function apiAnnouncement(req: NextRequest, method: Method) {
-  const { searchParams } = new URL(req.url);
-  const path = searchParams.get("path");
-  const act = API_INDEX_ANNOUNCEMENT.find(
-    (v) => v.path === path && v.method === method
-  );
-  if (!path)
-    return Response.json({ message: "page not found" }, { status: 404 });
-  if (act) return act.bin(req);
-
-  return Response.json({ message: "404" });
-}
diff --git a/src/module/announcement/api/api_index.ts b/src/module/announcement/api/api_index.ts
deleted file mode 100644
index deed158..0000000
--- a/src/module/announcement/api/api_index.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { getAllAnnouncement } from "./get/getAllAnnouncement";
-import { getOneAnnouncement } from "./get/getOneAnnouncement";
-import { getUserAnnouncement } from "./get/getUserAnnouncement";
-import { createAnnouncement } from "./post/createAnnouncement";
-import { deleteAnnouncement } from "./post/deleteAnnouncement";
-import { updateAnnouncement } from "./post/updateAnnouncement";
-
-export const API_INDEX_ANNOUNCEMENT = [
-    {
-      path: "get-all-announcement",
-      method: "GET",
-      bin: getAllAnnouncement,
-    },
-    {
-      path: "get-one-announcement",
-      method: "GET",
-      bin: getOneAnnouncement,
-    },
-    {
-      path: "get-user-announcement",
-      method: "GET",
-      bin: getUserAnnouncement,
-    },
-    {
-      path: "create-announcement",
-      method: "POST",
-      bin: createAnnouncement,
-    },
-    {
-      path: "update-announcement",
-      method: "POST",
-      bin: updateAnnouncement,
-    },
-    {
-      path: "delete-announcement",
-      method: "POST",
-      bin: deleteAnnouncement,
-    },
-  ];
-  
\ No newline at end of file
diff --git a/src/module/announcement/api/get/getAllAnnouncement.ts b/src/module/announcement/api/get/getAllAnnouncement.ts
deleted file mode 100644
index c4042b0..0000000
--- a/src/module/announcement/api/get/getAllAnnouncement.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { prisma } from "@/module/_global";
-import { funGetUserByCookies } from "@/module/auth";
-import _ from "lodash";
-import moment from "moment";
-import "moment/locale/id";
-import { NextRequest } from "next/server";
-
-export async function getAllAnnouncement(req: NextRequest) {
-  try {
-    const user = await funGetUserByCookies();
-    const villageId = user.idVillage
-    const announcements = await prisma.announcement.findMany({
-      where: {
-        idVillage: String(villageId),
-        isActive: true,
-      },
-      select: {
-        id: true,
-        title: true,
-        desc: true,
-        createdAt: true,
-      },
-    });
-
-    const allData = announcements.map((v: any) => ({
-      ..._.omit(v, ["createdAt"]),
-      createdAt: moment(v.createdAt).format("LL")
-    }))
-
-    return Response.json(allData);
-  } catch (error) {
-    console.error(error);
-    return Response.json(
-      { message: "Internal Server Error", success: false },
-      { status: 500 }
-    );
-  }
-}
diff --git a/src/module/announcement/api/get/getOneAnnouncement.ts b/src/module/announcement/api/get/getOneAnnouncement.ts
deleted file mode 100644
index 2d9e164..0000000
--- a/src/module/announcement/api/get/getOneAnnouncement.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { prisma } from "@/module/_global";
-import _ from "lodash";
-import { NextRequest } from "next/server";
-
-export async function getOneAnnouncement(req: NextRequest) {
-  try {
-    const searchParams = req.nextUrl.searchParams;
-    const announcementId = searchParams.get("announcementId");
-    const announcement = await prisma.announcement.findUnique({
-      where: {
-        id: String(announcementId),
-      },
-      select: {
-        id: true,
-        title: true,
-        desc: true,
-      },
-    });
-    const announcementMember = await prisma.announcementMember.findMany({
-      where: {
-        idAnnouncement: String(announcementId),
-      },
-      select: {
-        idAnnouncement: true,
-        idGroup: true,
-        idDivision: true,
-        Group: {
-          select: {
-            name: true,
-          },
-        },
-      },
-    });
-
-    const allAnnouncementMember = announcementMember.map((v: any) => ({
-      ..._.omit(v, ["Group"]),
-      group: v.Group.name,
-    }))
-
-
-    return Response.json({ announcement, allAnnouncementMember });
-  } catch (error) {
-    console.error(error);
-    return Response.json(
-      { message: "Internal Server Error", success: false },
-      { status: 500 }
-    );
-  }
-}
diff --git a/src/module/announcement/api/get/getUserAnnouncement.ts b/src/module/announcement/api/get/getUserAnnouncement.ts
deleted file mode 100644
index c667173..0000000
--- a/src/module/announcement/api/get/getUserAnnouncement.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { prisma } from "@/module/_global";
-import { funGetUserByCookies } from "@/module/auth";
-import { revalidatePath, revalidateTag } from "next/cache";
-import { NextRequest, NextResponse } from "next/server";
-
-export const dynamic = 'force-dynamic'
-export const revalidate = true
-export async function getUserAnnouncement(req: NextRequest) {
-    try {
-        const user = await funGetUserByCookies()
-        if (user.id == undefined) {
-            return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
-        }
-
-        const villaId = user.idVillage
-        const data = await prisma.group.findMany({
-            where: {
-                isActive: true,
-                idVillage: String(villaId)
-            },
-            select: {
-                id: true,
-                name: true,
-                Division: {
-                    select: {
-                        id: true,
-                        name: true
-                    }
-                }
-            }
-        });
-
-        return NextResponse.json({ success: true, message: "Berhasil mendapatkan grup", data, }, { status: 200 });
-
-    } catch (error) {
-        console.log(error);
-        return NextResponse.json({ success: false, message: "Gagal mendapatkan grup, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
-    }
-}
diff --git a/src/module/announcement/api/post/createAnnouncement.ts b/src/module/announcement/api/post/createAnnouncement.ts
deleted file mode 100644
index 039986b..0000000
--- a/src/module/announcement/api/post/createAnnouncement.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { prisma } from "@/module/_global";
-import { NextRequest } from "next/server";
-
-export async function createAnnouncement(req: NextRequest) {
-  try {
-    const data = await req.json();
-    const announcement = await prisma.announcement.create({
-      data: {
-        title: data.title,
-        desc: data.desc,
-        idVillage: data.idVillage,
-        createdBy: data.createBy,
-        isActive: true,
-      },
-      select: {
-        id: true,
-        title: true,
-        desc: true,
-      },
-    });
-
-    const dataMember = data.groups.map((group: any) => ({
-      idAnnoucement: announcement.id,
-      idGroup: group.idGroup,
-      idDivision: group.idDivision,
-      isActive: true,
-    }));
-
-    const announcementMember = await prisma.announcementMember.createMany({
-      data: dataMember,
-    });
-
-    return Response.json({
-      announcement: announcement,
-      announcementMember: announcementMember,
-    });
-  } catch (error) {
-    console.error(error);
-    return Response.json(
-      { message: "Internal Server Error", success: false },
-      { status: 500 }
-    );
-  }
-}
diff --git a/src/module/announcement/api/post/deleteAnnouncement.ts b/src/module/announcement/api/post/deleteAnnouncement.ts
deleted file mode 100644
index a0a6044..0000000
--- a/src/module/announcement/api/post/deleteAnnouncement.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { prisma } from "@/module/_global";
-import { NextRequest } from "next/server";
-
-export async function deleteAnnouncement(req: NextRequest) {
-  try {
-    const data = await req.json();
-    const update = await prisma.announcement.update({
-      where: {
-        id: data.id,
-      },
-      data: {
-        isActive: false,
-      },
-    });
-
-    return Response.json(
-      { success: true, message: "Sukses Delete Announcement" },
-      { status: 200 }
-    );
-  } catch (error) {
-    console.error(error);
-    return Response.json(
-      { message: "Internal Server Error", success: false },
-      { status: 500 }
-    );
-  }
-}
diff --git a/src/module/announcement/api/post/updateAnnouncement.ts b/src/module/announcement/api/post/updateAnnouncement.ts
deleted file mode 100644
index 0f5059b..0000000
--- a/src/module/announcement/api/post/updateAnnouncement.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { prisma } from "@/module/_global";
-import { NextRequest } from "next/server";
-
-export async function updateAnnouncement(req: NextRequest) {
-  try {
-    const data = await req.json();
-    const udpate = await prisma.announcement.update({
-      where: {
-        id: data.id,
-      },
-      data: {
-        title: data.title,
-        desc: data.desc,
-        idVillage: data.idVillage,
-        createdBy: data.createBy,
-        isActive: true,
-      },
-    });
-
-    const deleteAnnouncement = await prisma.announcementMember.deleteMany({
-      where: {
-        idAnnouncement: data.id,
-      },
-    });
-
-    const dataMember = data.groups.map((group: any) => ({
-      idAnnoucement: data.id,
-      idGroup: group.idGroup,
-      idDivision: group.idDivision,
-      isActive: true,
-    }));
-
-    const announcementMember = await prisma.announcementMember.createMany({
-      data: dataMember,
-    });
-
-    return Response.json({
-      success: true,
-      message: "Sukses Update Announcement",
-    });
-  } catch (error) {
-    console.error(error);
-    return Response.json(
-      { message: "Internal Server Error", success: false },
-      { status: 500 }
-    );
-  }
-}
diff --git a/src/module/announcement/index.ts b/src/module/announcement/index.ts
index 9ae4abe..bae423b 100644
--- a/src/module/announcement/index.ts
+++ b/src/module/announcement/index.ts
@@ -1,12 +1,14 @@
-import { apiAnnouncement } from "./api/api_announcement";
 import CreateAnnouncement from "./ui/create_announcement";
+import DetailAnnouncement from "./ui/detail_announcement";
+import EditAnnouncement from "./ui/edit_announcement";
 import ListAnnouncement from "./ui/list_announcement";
 import NavbarAnnouncement from "./ui/navbar_announcement";
-import ViewDetailAnnouncement from "./ui/view_detail_anouncement"
+import NavbarDetailAnnouncement from "./ui/navbar_detail_announcement";
 
 
-export { ViewDetailAnnouncement };
-export { apiAnnouncement };
 export { ListAnnouncement }
 export { NavbarAnnouncement }
-export { CreateAnnouncement }
\ No newline at end of file
+export { CreateAnnouncement }
+export { NavbarDetailAnnouncement }
+export { DetailAnnouncement }
+export { EditAnnouncement }
\ No newline at end of file
diff --git a/src/module/announcement/lib/api_announcement.ts b/src/module/announcement/lib/api_announcement.ts
index 0b36a4a..58e95f5 100644
--- a/src/module/announcement/lib/api_announcement.ts
+++ b/src/module/announcement/lib/api_announcement.ts
@@ -1,16 +1,22 @@
-import { ICreateData } from "./type_announcement";
+import { ICreateData, IFormCreateAnnouncement } from "./type_announcement";
 
 export const funGetAllAnnouncement = async (path?: string) => {
     const response = await fetch(`/api/announcement${(path) ? path : ''}`, { next: { tags: ['announcement'] } });
     return await response.json().catch(() => null);
-} 
+}
 
 export const funGetAnnouncementById = async (path: string) => {
     const response = await fetch(`/api/announcement/${path}`);
     return await response.json().catch(() => null);
 }
 
-export const funCreateAnnouncement = async (data: ICreateData) => {
+export const funCreateAnnouncement = async (data: IFormCreateAnnouncement) => {
+    if (data.title == "" || data.desc == "")
+        return { success: false, message: 'Silahkan lengkapi form tambah pengumuman' }
+
+    if (data.groups.length == 0)
+        return { success: false, message: 'Silahkan pilih divisi penerima pengumuman' }
+
     const response = await fetch("/api/announcement", {
         method: "POST",
         headers: {
@@ -19,4 +25,31 @@ export const funCreateAnnouncement = async (data: ICreateData) => {
         body: JSON.stringify(data),
     });
     return await response.json().catch(() => null);
+}
+
+export const funDeleteAnnouncement = async (path: string) => {
+    const response = await fetch(`/api/announcement/${path}`, {
+        method: "DELETE",
+        headers: {
+            "Content-Type": "application/json",
+        },
+    });
+    return await response.json().catch(() => null);
+};
+
+export const funEditAnnouncement = async (path: string, data: IFormCreateAnnouncement) => {
+    if (data.title == "" || data.desc == "")
+        return { success: false, message: 'Silahkan lengkapi form edit pengumuman' }
+
+    if (data.groups.length == 0)
+        return { success: false, message: 'Silahkan pilih divisi penerima pengumuman' }
+
+    const response = await fetch(`/api/announcement/${path}`, {
+        method: "PUT",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+    });
+    return await response.json().catch(() => null);
 }
\ No newline at end of file
diff --git a/src/module/announcement/lib/type_announcement.ts b/src/module/announcement/lib/type_announcement.ts
index 6b19299..0e96345 100644
--- a/src/module/announcement/lib/type_announcement.ts
+++ b/src/module/announcement/lib/type_announcement.ts
@@ -6,8 +6,8 @@ export interface IListDataAnnouncement {
 }
 
 export interface IRootAllAnnouncement {
-   announcement: IAnnouncement
-   allAnnouncementMember: IAllAnnouncementMember[]
+   data: IAnnouncement
+   member: IAllAnnouncementMember
 }
 
 export interface IAnnouncement {
@@ -17,10 +17,12 @@ export interface IAnnouncement {
 }
 
 export interface IAllAnnouncementMember {
-   idAnnouncement: string
-   idGroup: string
-   idDivision: string
-   group: string
+   group: {
+      idGroup: string
+      idDivision: string
+      group: string
+      division: string
+   }[]
 }
 
 export interface GroupData {
@@ -32,10 +34,26 @@ export interface GroupData {
    }[];
 }
 
+export interface GroupDataEditAnnouncement {
+   id: string;
+   name: string;
+   Division: {
+      idGroup: string;
+      idDivision: string;
+      group: string;
+      division: string;
+   }[];
+}
+
 export interface ICreateData {
    title: string
    desc: string
+}
 
+export interface IFormCreateAnnouncement {
+   title: string
+   desc: string
+   groups: GroupData[]
 }
 
 export interface IGroupData {
diff --git a/src/module/announcement/lib/val_announcement.ts b/src/module/announcement/lib/val_announcement.ts
index 806fcf2..912ac66 100644
--- a/src/module/announcement/lib/val_announcement.ts
+++ b/src/module/announcement/lib/val_announcement.ts
@@ -1,5 +1,6 @@
 import { hookstate } from "@hookstate/core";
-import { GroupData } from "./type_announcement";
+import { GroupData, GroupDataEditAnnouncement } from "./type_announcement";
 
 
-export const globalMemberAnnouncement = hookstate<GroupData[]>([])
\ No newline at end of file
+export const globalMemberAnnouncement = hookstate<GroupData[]>([])
+export const globalMemberEditAnnouncement = hookstate<GroupData[]>([])
\ No newline at end of file
diff --git a/src/module/announcement/ui/create_announcement.tsx b/src/module/announcement/ui/create_announcement.tsx
index f4b89f7..b95ca24 100644
--- a/src/module/announcement/ui/create_announcement.tsx
+++ b/src/module/announcement/ui/create_announcement.tsx
@@ -1,40 +1,25 @@
 'use client'
 import { LayoutNavbarNew, WARNA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
-import { globalMemberDivision } from "@/module/division_new/lib/val_division";
 import { useHookstate } from "@hookstate/core";
 import { Avatar, Box, Button, Flex, Group, Stack, Text, Textarea, TextInput } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
-import { useRouter } from "next/navigation";
 import { useState } from "react";
 import toast from "react-hot-toast";
-import { HiOutlineChevronRight } from "react-icons/hi2";
 import { IoIosArrowForward } from "react-icons/io";
 import CreateUsersAnnouncement from "./create_users_announcement";
 import { globalMemberAnnouncement } from "../lib/val_announcement";
 import { funCreateAnnouncement } from "../lib/api_announcement";
-import { group } from "console";
 import { GroupData, ICreateData, IGroupData } from "../lib/type_announcement";
 
-export type DataMember = DataGroup[]
-
-export interface DataGroup {
-  id: string
-  name: string
-  Division: Division[]
-}
-
-export interface Division {
-  id: string
-  name: string
-}
 
 
 export default function CreateAnnouncement() {
    const [isOpen, setOpen] = useState(false)
    const memberGroup = useHookstate(globalMemberAnnouncement)
    const memberValue = memberGroup.get() as GroupData[]
-   const [selectedFiles, setSelectedFiles] = useState<any>([]);
+   const [selectedFiles, setSelectedFiles] = useState<any>([])
+
 
    const [isChooseMember, setIsChooseMember] = useState(false)
    const [isData, setisData] = useState({
@@ -43,27 +28,31 @@ export default function CreateAnnouncement() {
    })
 
 
+   async function onSubmit() {
+      try {
+         const response = await funCreateAnnouncement({
+            title: isData.title,
+            desc: isData.desc,
+            groups: memberValue
+         })
 
-   function onTrue(val: boolean) {
-      if (val) {
-         toast.success("Sukses! Data tersimpan");
+         if (response.success) {
+            toast.success(response.message)
+            setisData({
+               ...isData,
+               title: "",
+               desc: "",
+            })
+            memberGroup.set([])
+         } else {
+            toast.error(response.message)
+         }
+      } catch (error) {
+         console.log(error)
+         toast.error("Gagal menambahkan pengumuman, coba lagi nanti");
       }
-      setOpen(false)
-   }
 
-   async function onSubmit(val: boolean) {
-      // const response = await funCreateAnnouncement(
-      //    {
-      //       title: isData.title,
-      //       desc: isData.desc,
-      //       groups: memberValue
-      //    },
-         
-      // )
       setOpen(false)
-      console.log(isData)
-      console.log(memberValue)
-
    }
 
    async function loadData() {
@@ -78,7 +67,7 @@ export default function CreateAnnouncement() {
       setIsChooseMember(true)
    }
 
-   if (isChooseMember) return <CreateUsersAnnouncement  onClose={() => { setIsChooseMember(false) }} />
+   if (isChooseMember) return <CreateUsersAnnouncement onClose={() => { setIsChooseMember(false) }} />
 
    return (
       <Box>
@@ -95,6 +84,7 @@ export default function CreateAnnouncement() {
                      borderColor: WARNA.biruTua,
                   },
                }}
+               value={isData.title}
                onChange={(e) => { setisData({ ...isData, title: e.target.value }) }}
             />
             <Textarea
@@ -111,6 +101,7 @@ export default function CreateAnnouncement() {
                      borderColor: WARNA.biruTua,
                   },
                }}
+               value={isData.desc}
                onChange={(e) => { setisData({ ...isData, desc: e.target.value }) }}
             />
             <Box pt={10}>
@@ -122,29 +113,29 @@ export default function CreateAnnouncement() {
                   onClick={() => { onToChooseMember() }}
                >
                   <Text size="sm">
-                     Tambah Anggota
+                     Tambah divisi penerima pengumuman
                   </Text>
                   <IoIosArrowForward />
                </Group>
             </Box>
             <Box pt={20}>
-            <Text c={WARNA.biruTua} mb={10}>Anggota Terpilih</Text>
-            {(memberGroup.length === 0) ? (
-               <Text c="dimmed" ta={"center"} fs={"italic"}>Belum ada anggota</Text>
-            ) : memberGroup.get().map((v: any, i: any) => {
-               return (
-                  <Box key={i} mt={10}>
-                     <Text fw={"bold"}>{v.name}</Text>
-                     <Box pl={20}>
-                        <Flex direction={"column"} gap={"md"}>
-                           {v.Division.map((division: any) => (
-                              <li key={division.id}>{division.name}</li>
-                           ))}
-                        </Flex>
+               <Text c={WARNA.biruTua} mb={10}>Divisi Terpilih</Text>
+               {(memberGroup.length === 0) ? (
+                  <Text c="dimmed" ta={"center"} fs={"italic"}>Belum ada anggota</Text>
+               ) : memberGroup.get().map((v: any, i: any) => {
+                  return (
+                     <Box key={i} mt={10}>
+                        <Text fw={"bold"}>{v.name}</Text>
+                        <Box pl={20}>
+                           <Flex direction={"column"} gap={"md"}>
+                              {v.Division.map((division: any) => (
+                                 <li key={division.id}>{division.name}</li>
+                              ))}
+                           </Flex>
+                        </Box>
                      </Box>
-                  </Box>
-               );
-            })}
+                  );
+               })}
             </Box>
          </Stack>
          <Box mt={30} mx={20}>
@@ -161,7 +152,12 @@ export default function CreateAnnouncement() {
          </Box>
          <LayoutModal opened={isOpen} onClose={() => setOpen(false)}
             description="Apakah Anda yakin ingin menambahkan data?"
-            onYes={(val) => { onSubmit(val) }} />
+            onYes={(val) => {
+               if (val) {
+                  onSubmit()
+               }
+               setOpen(false)
+            }} />
       </Box>
 
    )
diff --git a/src/module/announcement/ui/create_users_announcement.tsx b/src/module/announcement/ui/create_users_announcement.tsx
index 18b99f1..bb2f4e0 100644
--- a/src/module/announcement/ui/create_users_announcement.tsx
+++ b/src/module/announcement/ui/create_users_announcement.tsx
@@ -8,6 +8,8 @@ import { FaCheck } from 'react-icons/fa';
 import { GroupData } from '../lib/type_announcement';
 import { useHookstate } from '@hookstate/core';
 import { globalMemberAnnouncement } from '../lib/val_announcement';
+import { FaMinus } from 'react-icons/fa6';
+import toast from 'react-hot-toast';
 
 
 
@@ -15,7 +17,7 @@ interface CheckedState {
   [key: string]: string[];
 }
 
-export default function CreateUsersAnnouncement({ onClose}: { onClose: (val: any) => void }) {
+export default function CreateUsersAnnouncement({ onClose }: { onClose: (val: any) => void }) {
   const [checked, setChecked] = useState<CheckedState>({});
   const [selectAll, setSelectAll] = useState(false);
   const [isData, setIsData] = useState<GroupData[]>([])
@@ -26,6 +28,9 @@ export default function CreateUsersAnnouncement({ onClose}: { onClose: (val: any
     if (newChecked[groupId]) {
       if (newChecked[groupId].includes(divisionId)) {
         newChecked[groupId] = newChecked[groupId].filter(item => item !== divisionId);
+        if (newChecked[groupId].length === 0) {
+          delete newChecked[groupId];
+        }
       } else {
         newChecked[groupId].push(divisionId);
       }
@@ -33,18 +38,20 @@ export default function CreateUsersAnnouncement({ onClose}: { onClose: (val: any
       newChecked[groupId] = [divisionId];
     }
     setChecked(newChecked);
-    console.log(newChecked)
   };
 
+
   const handleGroupCheck = (groupId: string) => {
     const newChecked = { ...checked };
     if (newChecked[groupId]) {
       delete newChecked[groupId];
     } else {
+      if (isData.find(item => item.id === groupId)?.Division.length == 0) {
+        return toast.error("Tidak ada divisi pada grup ini")
+      }
       newChecked[groupId] = isData.find(item => item.id === groupId)?.Division.map(item => item.id) || [];
     }
     setChecked(newChecked);
-    console.log(newChecked)
   };
 
   const handleSelectAll = () => {
@@ -52,10 +59,11 @@ export default function CreateUsersAnnouncement({ onClose}: { onClose: (val: any
     if (!selectAll) {
       const newChecked: CheckedState = {};
       isData.forEach(item => {
-        newChecked[item.id] = item.Division.map(division => division.id);
+        if (item.Division.length > 0) {
+          newChecked[item.id] = item.Division.map(division => division.id);
+        }
       });
       setChecked(newChecked);
-      console.log(newChecked)
     } else {
       setChecked({});
     }
@@ -63,9 +71,18 @@ export default function CreateUsersAnnouncement({ onClose}: { onClose: (val: any
 
   async function getData() {
     const response = await funGetGroupDivision()
-    console.log(response)
     setIsData(response.data)
+
+    if (memberGroup.length > 0) {
+      const formatArray = memberGroup.get().reduce((result: any, obj: any) => {
+        result[obj.id] = obj.Division.map((item: any) => item.id);
+        return result;
+      }, {})
+
+      setChecked(formatArray)
+    }
   }
+
   const handleSubmit = () => {
     const selectedGroups: GroupData[] = [];
     Object.keys(checked).forEach((groupId) => {
@@ -78,6 +95,7 @@ export default function CreateUsersAnnouncement({ onClose}: { onClose: (val: any
         });
       }
     });
+
     memberGroup.set(selectedGroups);
     onClose(true);
   };
@@ -88,7 +106,7 @@ export default function CreateUsersAnnouncement({ onClose}: { onClose: (val: any
 
   return (
     <div>
-      <LayoutNavbarNew back="" title="Tambah Anggota" menu={<></>} />
+      <LayoutNavbarNew back="" title="Tambah Divisi Penerima Pengumuman" menu={<></>} />
       <Box p={20}>
         <Group justify='flex-end' mb={20}>
           <Text
@@ -118,7 +136,8 @@ export default function CreateUsersAnnouncement({ onClose}: { onClose: (val: any
               </Text>
               <Text
               >
-                {checked[item.id] && checked[item.id].length === item.Division.length ? <FaCheck style={{ marginRight: 10 }} /> : ""}
+                {checked[item.id] && checked[item.id].length === item.Division.length ? <FaCheck style={{ marginRight: 10 }} />
+                  : (checked[item.id] && checked[item.id].length > 0 && checked[item.id].length < item.Division.length) ? <FaMinus style={{ marginRight: 10 }} /> : ""}
               </Text>
             </Group>
             <Divider />
diff --git a/src/module/announcement/ui/detail_announcement.tsx b/src/module/announcement/ui/detail_announcement.tsx
index bac0836..4369059 100644
--- a/src/module/announcement/ui/detail_announcement.tsx
+++ b/src/module/announcement/ui/detail_announcement.tsx
@@ -1,34 +1,39 @@
 "use client"
-import { Box, Flex, Grid, Group, Spoiler, Stack, Text } from "@mantine/core";
+import { Box, Flex, Grid, Group, List, Skeleton, Spoiler, Stack, Text } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useState } from "react";
 import { BsCardText } from "react-icons/bs";
 import { TfiAnnouncement } from "react-icons/tfi";
-import { IRootAllAnnouncement } from "../lib/type_announcement";
+import { IAnnouncement } from "../lib/type_announcement";
 import { funGetAnnouncementById } from "../lib/api_announcement";
 import toast from "react-hot-toast";
 
 
-
-
 export default function DetailAnnouncement({ id }: { id: string }) {
-   const [isData, setIsData] = useState<IRootAllAnnouncement>()
+   const [isData, setIsData] = useState<IAnnouncement>()
+   const [isMember, setIsMember] = useState<any>({})
+   const [loading, setLoading] = useState(false)
 
    async function fetchOneAnnouncement() {
       try {
+         setLoading(true)
          const res = await funGetAnnouncementById(id)
          if (res.success) {
-            setIsData(res)
+            setIsData(res.data)
+            setIsMember(res.member)
          } else {
             toast.error(res.message)
          }
 
       } catch (error) {
          console.error(error)
-        toast.error("Gagal mendapatkan announcement, coba lagi nanti")
+         toast.error("Gagal mendapatkan pengumuman, coba lagi nanti")
+      } finally {
+         setLoading(false)
       }
    }
 
+
    useShallowEffect(() => {
       fetchOneAnnouncement()
    }, [])
@@ -39,31 +44,59 @@ export default function DetailAnnouncement({ id }: { id: string }) {
             <Stack>
                <Group>
                   <TfiAnnouncement size={25} />
-                  <Text fw={'bold'}>{isData?.announcement.title}</Text>
+                  {
+                     loading ?
+                        <Skeleton height={10} radius="md" m={0} width={200} />
+                        : <Text fw={'bold'}>{isData?.title}</Text>
+                  }
+
                </Group>
                <Grid gutter={'md'}>
                   <Grid.Col span={1}>
                      <BsCardText size={25} />
                   </Grid.Col>
                   <Grid.Col span={11}>
-                     <Spoiler maxHeight={100} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
-                        <Text>{isData?.announcement.desc}</Text>
-                     </Spoiler>
+                     {
+                        loading ? Array(3)
+                           .fill(null)
+                           .map((_, i) => (
+                              <Skeleton key={i} height={10} radius="md" mb={5} width={"100%"} />
+                           ))
+
+                           : <Spoiler maxHeight={100} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
+                              <Text>{isData?.desc}</Text>
+                           </Spoiler>
+                     }
+
                   </Grid.Col>
                </Grid>
             </Stack>
          </Box>
          <Box my={15} p={20} style={{ borderRadius: 10, border: '1px solid #E5E5E5' }} bg={'white'} >
-            {isData?.allAnnouncementMember.map((v, i) => {
-               return (
-                  <Stack key={i}>
-                     <Text fw={'bold'}>Anggota</Text>
-                     <Flex direction={"column"} gap={10}>
-                        <Text>{v.group}</Text>
-                     </Flex>
-                  </Stack>
-               )
-            })}
+
+            {
+               loading ? Array(6)
+                  .fill(null)
+                  .map((_, i) => (
+                     <Skeleton key={i} height={10} radius="md" mb={5} width={"100%"} />
+                  ))
+
+                  : Object.keys(isMember).map((v: any, i: any) => {
+                     return (
+                        <Box key={i} mb={10}>
+                           <Text>{isMember[v]?.[0].group}</Text>
+                           <List>
+                              {
+                                 isMember[v].map((item: any, x: any) => {
+                                    return <List.Item key={x}>{item.division}</List.Item>
+                                 })
+                              }
+                           </List>
+                        </Box>
+                     )
+
+                  })
+            }
          </Box>
       </Box>
    )
diff --git a/src/module/announcement/ui/drawer_detail_announcement.tsx b/src/module/announcement/ui/drawer_detail_announcement.tsx
index 313e413..057a35a 100644
--- a/src/module/announcement/ui/drawer_detail_announcement.tsx
+++ b/src/module/announcement/ui/drawer_detail_announcement.tsx
@@ -1,20 +1,31 @@
 import { WARNA } from '@/module/_global';
 import LayoutModal from '@/module/_global/layout/layout_modal';
 import { Box, Flex, SimpleGrid, Stack, Text, } from '@mantine/core';
-import { useRouter } from 'next/navigation';
+import { useParams, useRouter } from 'next/navigation';
 import React, { useState } from 'react';
 import toast from 'react-hot-toast';
 import { FaPencil, FaTrash } from 'react-icons/fa6';
+import { funDeleteAnnouncement } from '../lib/api_announcement';
 
 export default function DrawerDetailAnnouncement({ onDeleted }: { onDeleted: (val: boolean) => void }) {
    const router = useRouter()
    const [isOpen, setOpen] = useState(false)
+   const param = useParams<{ id: string }>()
 
-   function onTrue(val: boolean) {
+   async function onTrue(val: boolean) {
       if (val) {
-         toast.success('Sukses! Data terhapus')
-         onDeleted(true)
+         const response = await funDeleteAnnouncement(param.id)
+         if (response.success) {
+            toast.success(response.message)
+            onDeleted(true)
+         } else {
+            toast.error(response.message)
+            onDeleted(false)
+         }
+      } else {
+         onDeleted(false)
       }
+
       setOpen(false)
    }
    return (
@@ -33,7 +44,7 @@ export default function DrawerDetailAnnouncement({ onDeleted }: { onDeleted: (va
                </Flex>
 
                <Flex justify={'center'} align={'center'} direction={'column'} onClick={() => {
-                  router.push('edit/123')
+                  router.push('edit/' + param.id)
                }} style={{ cursor: 'pointer' }}>
                   <Box>
                      <FaPencil size={30} color={WARNA.biruTua} />
diff --git a/src/module/announcement/ui/edit_announcement.tsx b/src/module/announcement/ui/edit_announcement.tsx
index 14eac42..2450d7c 100644
--- a/src/module/announcement/ui/edit_announcement.tsx
+++ b/src/module/announcement/ui/edit_announcement.tsx
@@ -1,20 +1,101 @@
 'use client'
 import { LayoutNavbarNew, WARNA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
-import { Box, Button, Stack, Textarea, TextInput } from "@mantine/core";
+import { Box, Button, Flex, List, Stack, Text, Textarea, TextInput } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 import { useState } from "react";
 import toast from "react-hot-toast";
 import { HiOutlineChevronRight } from "react-icons/hi2";
+import { funEditAnnouncement, funGetAnnouncementById } from "../lib/api_announcement";
+import { useParams } from "next/navigation";
+import { useHookstate } from "@hookstate/core";
+import { globalMemberEditAnnouncement } from "../lib/val_announcement";
+import { GroupData, GroupDataEditAnnouncement } from "../lib/type_announcement";
+import EditChooseMember from "./edit_choose_member";
 
 export default function EditAnnouncement() {
    const [isOpen, setOpen] = useState(false)
+   const [isChooseDivisi, setChooseDivisi] = useState(false)
+   const param = useParams<{ id: string }>()
+   const [body, setBody] = useState({
+      title: "",
+      desc: "",
+   })
+   const memberGroup = useHookstate(globalMemberEditAnnouncement)
 
-   function onTrue(val: boolean) {
-      if (val) {
-         toast.success("Sukses! Data tersimpan");
+
+   async function fetchOneAnnouncement() {
+      try {
+         memberGroup.set([])
+         const res = await funGetAnnouncementById(param.id)
+         if (res.success) {
+            setBody({
+               title: res.data.title,
+               desc: res.data.desc
+            })
+
+            const arrNew: GroupData[] = []
+            const coba = Object.keys(res.member).map((v: any, i: any) => {
+               const newObject = {
+                  "id": res.member[v][0].idGroup,
+                  "name": v,
+                  "Division": res.member[v]
+               }
+
+               res.member[v].map((v: any, i: any) => {
+                  newObject["Division"][i] = {
+                     "id": v.idDivision,
+                     "name": v.division
+                  }
+               })
+               arrNew.push(newObject)
+            })
+
+
+            memberGroup.set(arrNew)
+
+         } else {
+            toast.error(res.message)
+         }
+
+      } catch (error) {
+         console.error(error)
+         toast.error("Gagal mendapatkan pengumuman, coba lagi nanti")
       }
+   }
+
+
+   useShallowEffect(() => {
+      fetchOneAnnouncement()
+   }, [])
+
+   async function onSubmit() {
+      try {
+         const response = await funEditAnnouncement(param.id, {
+            title: body.title,
+            desc: body.desc,
+            groups: memberGroup.get() as GroupData[]
+         })
+
+         if (response.success) {
+            toast.success(response.message)
+         } else {
+            toast.error(response.message)
+         }
+      } catch (error) {
+         console.log(error)
+         toast.error("Gagal mengedit pengumuman, coba lagi nanti");
+      }
+
       setOpen(false)
    }
+
+
+
+
+   if (isChooseDivisi) return <EditChooseMember onClose={() => { setChooseDivisi(false) }} />
+
+
    return (
       <>
          <LayoutNavbarNew back="" title="Edit Pengumuman" menu={<></>} />
@@ -34,6 +115,8 @@ export default function EditAnnouncement() {
                      borderColor: WARNA.biruTua,
                   },
                }}
+               value={body.title}
+               onChange={(val) => setBody({ ...body, title: val.target.value })}
             />
             <Textarea
                size="md"
@@ -49,12 +132,36 @@ export default function EditAnnouncement() {
                      borderColor: WARNA.biruTua,
                   },
                }}
+               value={body.desc}
+               onChange={(val) => setBody({ ...body, desc: val.target.value })}
             />
 
-            <Button rightSection={<HiOutlineChevronRight size={14} />} variant="default" fullWidth radius={30} size="md" mt={10}>
-               Pilih Anggota
+            <Button onClick={() => { setChooseDivisi(true) }} rightSection={<HiOutlineChevronRight size={14} />} variant="default" fullWidth radius={30} size="md" mt={10}>
+               Pilih Divisi
             </Button>
          </Stack>
+         <Box mt={20} mx={20}>
+            {
+               memberGroup.get().map((v: any, i: any) => {
+                  return (
+                     <Box key={i} mt={10}>
+                        <Text fw={"bold"}>{v.name}</Text>
+                        <Box pl={20}>
+                           <Flex direction={"column"} gap={"md"}>
+                              {v.Division.map((division: any) => (
+                                 <li key={division.id}>{division.name}</li>
+                              ))}
+                           </Flex>
+                        </Box>
+                     </Box>
+                  );
+
+               }
+               )
+            }
+
+         </Box>
+
          <Box mt={30} mx={20}>
             <Button
                c={"white"}
@@ -69,7 +176,12 @@ export default function EditAnnouncement() {
          </Box>
          <LayoutModal opened={isOpen} onClose={() => setOpen(false)}
             description="Apakah Anda yakin ingin mengubah data?"
-            onYes={(val) => { onTrue(val) }} />
+            onYes={(val) => {
+               if (val) {
+                  onSubmit()
+               }
+               setOpen(false)
+            }} />
       </>
    )
 }
\ No newline at end of file
diff --git a/src/module/announcement/ui/edit_choose_member.tsx b/src/module/announcement/ui/edit_choose_member.tsx
new file mode 100644
index 0000000..232f258
--- /dev/null
+++ b/src/module/announcement/ui/edit_choose_member.tsx
@@ -0,0 +1,196 @@
+"use client";
+import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { funGetGroupDivision } from '@/module/group/lib/api_group';
+import { Box, Button, Divider, Flex, Group, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import React, { useState } from 'react';
+import { FaCheck } from 'react-icons/fa';
+import { GroupData, GroupDataEditAnnouncement } from '../lib/type_announcement';
+import { useHookstate } from '@hookstate/core';
+import { globalMemberEditAnnouncement } from '../lib/val_announcement';
+import { FaMinus } from 'react-icons/fa6';
+import toast from 'react-hot-toast';
+
+
+
+interface CheckedState {
+   [key: string]: string[];
+}
+
+export default function EditChooseMember({ onClose }: { onClose: (val: any) => void }) {
+   const [checked, setChecked] = useState<CheckedState>({});
+   const [selectAll, setSelectAll] = useState(false);
+   const [isData, setIsData] = useState<GroupData[]>([])
+   const memberGroup = useHookstate(globalMemberEditAnnouncement)
+
+   const handleCheck = (groupId: string, divisionId: string) => {
+      const newChecked = { ...checked };
+      if (newChecked[groupId]) {
+         if (newChecked[groupId].includes(divisionId)) {
+            newChecked[groupId] = newChecked[groupId].filter(item => item !== divisionId);
+            if (newChecked[groupId].length === 0) {
+               delete newChecked[groupId];
+            }
+         } else {
+            newChecked[groupId].push(divisionId);
+         }
+      } else {
+         newChecked[groupId] = [divisionId];
+      }
+      setChecked(newChecked);
+   };
+
+
+   const handleGroupCheck = (groupId: string) => {
+      const newChecked = { ...checked };
+      if (newChecked[groupId]) {
+         delete newChecked[groupId];
+      } else {
+         if (isData.find(item => item.id === groupId)?.Division.length == 0) {
+            return toast.error("Tidak ada divisi pada grup ini")
+         }
+         newChecked[groupId] = isData.find(item => item.id === groupId)?.Division.map(item => item.id) || [];
+      }
+      setChecked(newChecked);
+   };
+
+   const handleSelectAll = () => {
+      setSelectAll(!selectAll);
+      if (!selectAll) {
+         const newChecked: CheckedState = {};
+         isData.forEach(item => {
+            if (item.Division.length > 0) {
+               newChecked[item.id] = item.Division.map(division => division.id);
+            }
+         });
+         setChecked(newChecked);
+      } else {
+         setChecked({});
+      }
+   };
+
+   async function getData() {
+      const response = await funGetGroupDivision()
+      setIsData(response.data)
+
+      if (memberGroup.length > 0) {
+         const formatArray = memberGroup.get().reduce((result: any, obj: any) => {
+            result[obj.id] = obj.Division.map((item: any) => item.id);
+            return result;
+         }, {})
+
+         setChecked(formatArray)
+      }
+   }
+
+   const handleSubmit = () => {
+      const selectedGroups: GroupData[] = [];
+      Object.keys(checked).forEach((groupId) => {
+         const group = isData.find((item) => item.id === groupId);
+         if (group) {
+            selectedGroups.push({
+               id: group.id,
+               name: group.name,
+               Division: group.Division.filter((division) => checked[groupId].includes(division.id)),
+            });
+         }
+      });
+
+      memberGroup.set(selectedGroups);
+      onClose(true);
+   };
+
+   useShallowEffect(() => {
+      getData()
+   }, [])
+
+   return (
+      <div>
+         <LayoutNavbarNew back="" title="Tambah Divisi Penerima Pengumuman" menu={<></>} />
+         <Box p={20}>
+            <Group justify='flex-end' mb={20}>
+               <Text
+                  onClick={handleSelectAll}
+                  style={{
+                     cursor: 'pointer',
+                     display: 'flex',
+                     alignItems: 'center',
+                  }}
+                  fw={selectAll ? 'bold' : 'normal'}
+               >
+                  Pilih Semua
+               </Text>
+            </Group>
+            {isData.map((item) => (
+               <Stack mb={30} key={item.id}>
+                  <Group onClick={() => handleGroupCheck(item.id)} justify='space-between' align='center'>
+                     <Text
+                        style={{
+                           cursor: 'pointer',
+                           display: 'flex',
+                           alignItems: 'center',
+                        }}
+                        fw={checked[item.id] && checked[item.id].length === item.Division.length ? 'bold' : 'normal'}
+                     >
+                        {item.name}
+                     </Text>
+                     <Text
+                     >
+                        {checked[item.id] && checked[item.id].length === item.Division.length ? <FaCheck style={{ marginRight: 10 }} />
+                           : (checked[item.id] && checked[item.id].length > 0 && checked[item.id].length < item.Division.length) ? <FaMinus style={{ marginRight: 10 }} /> : ""}
+                     </Text>
+                  </Group>
+                  <Divider />
+                  {item.Division.map((division) => (
+                     <Box key={division.id}>
+                        <Group onClick={() => handleCheck(item.id, division.id)} justify='space-between' align='center'>
+                           <Text
+                              style={{
+                                 cursor: 'pointer',
+                                 display: 'flex',
+                                 alignItems: 'center',
+                                 paddingLeft: 20,
+                              }}
+                           >
+                              {division.name}
+                           </Text>
+                           <Text
+                              style={{
+                                 cursor: 'pointer',
+                                 display: 'flex',
+                                 alignItems: 'center',
+                                 paddingLeft: 20,
+                              }}
+                           >
+                              {checked[item.id] && checked[item.id].includes(division.id) ? <FaCheck style={{ marginRight: 10 }} /> : ""}
+                           </Text>
+                        </Group>
+                        <Box pt={15}>
+                           <Divider />
+                        </Box>
+                     </Box>
+
+                  ))}
+               </Stack>
+            ))}
+
+            <Box mt="xl">
+               <Button
+                  color="white"
+                  bg={WARNA.biruTua}
+
+                  size="lg"
+                  radius={30}
+                  fullWidth
+                  onClick={() => {
+                     handleSubmit()
+                  }}
+               >
+                  Simpan
+               </Button>
+            </Box>
+
+         </Box>
+      </div>
+   );
+}
\ No newline at end of file
diff --git a/src/module/announcement/ui/list_announcement.tsx b/src/module/announcement/ui/list_announcement.tsx
index bc1cf55..f65a163 100644
--- a/src/module/announcement/ui/list_announcement.tsx
+++ b/src/module/announcement/ui/list_announcement.tsx
@@ -1,6 +1,6 @@
 'use client'
-import { WARNA } from '@/module/_global';
-import { ActionIcon, Box, Center, Divider, Grid, Group, Spoiler, Text, TextInput } from '@mantine/core';
+import { SkeletonSingle, WARNA } from '@/module/_global';
+import { ActionIcon, Box, Center, Divider, Grid, Group, Spoiler, Stack, Text, TextInput } from '@mantine/core';
 import React, { useState } from 'react';
 import { TfiAnnouncement } from "react-icons/tfi";
 import { HiMagnifyingGlass } from 'react-icons/hi2';
@@ -15,9 +15,11 @@ export default function ListAnnouncement() {
    const [isData, setIsData] = useState<IListDataAnnouncement[]>([])
    const [searchQuery, setSearchQuery] = useState('')
    const router = useRouter()
+   const [loading, setLoading] = useState(true);
 
    const fetchData = async () => {
       try {
+         setLoading(true);
          const response = await funGetAllAnnouncement('?search=' + searchQuery)
 
          if (response.success) {
@@ -25,10 +27,12 @@ export default function ListAnnouncement() {
          } else {
             toast.error(response.message);
          }
-
+         setLoading(false);
       } catch (error) {
          toast.error("Gagal mendapatkan announcement, coba lagi nanti");
          console.error(error);
+      } finally {
+         setLoading(false);
       }
    }
 
@@ -51,39 +55,52 @@ export default function ListAnnouncement() {
             leftSection={<HiMagnifyingGlass size={20} />}
             placeholder="Pencarian"
             onChange={(e) => setSearchQuery(e.target.value)}
-            />
-         {isData.map((v, i) => {
-            return (
-               <Box key={i} mt={15}>
-                  <Box >
-                     <Grid>
-                        <Grid.Col span={2}>
-                           <Center>
-                              <ActionIcon variant="light" bg={'#FCAA4B'} size={50} radius={100} aria-label="icon">
-                                 <TfiAnnouncement color={WARNA.biruTua} size={25} />
-                              </ActionIcon>
-                           </Center>
-                        </Grid.Col>
-                        <Grid.Col span={10}>
-                           <Group justify='space-between' mb={5} onClick={() => {
-                              router.push(`/announcement/${v.id}`)
-                           }}>
-                              <Text fw={'bold'} c={WARNA.biruTua}>{v.title}</Text>
-                              <Text fw={'lighter'} c={WARNA.biruTua} fz={13}>{v.createdAt}</Text>
-                           </Group>
-                           {/* <Text c={WARNA.biruTua} lineClamp={2}>{v.desc}</Text> */}
-                           <Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
-                              <Text c={WARNA.biruTua} onClick={() => {
-                                 router.push(`/announcement/${v.id}`)
-                              }} >{v.desc}</Text>
-                           </Spoiler>
-                        </Grid.Col>
-                     </Grid>
+         />
+         {loading
+            ? Array(6)
+               .fill(null)
+               .map((_, i) => (
+                  <Box key={i}>
+                     <SkeletonSingle />
                   </Box>
-                  <Divider my={15} />
-               </Box>
-            )
-         })}
+               ))
+            : (isData.length === 0) ?
+               <Stack align="stretch" justify="center" w={"100%"} h={200}>
+                  <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada pengumuman</Text>
+               </Stack>
+               :
+               isData.map((v, i) => {
+                  return (
+                     <Box key={i} mt={15}>
+                        <Box >
+                           <Grid>
+                              <Grid.Col span={2}>
+                                 <Center>
+                                    <ActionIcon variant="light" bg={'#FCAA4B'} size={50} radius={100} aria-label="icon">
+                                       <TfiAnnouncement color={WARNA.biruTua} size={25} />
+                                    </ActionIcon>
+                                 </Center>
+                              </Grid.Col>
+                              <Grid.Col span={10}>
+                                 <Group justify='space-between' mb={5} onClick={() => {
+                                    router.push(`/announcement/${v.id}`)
+                                 }}>
+                                    <Text fw={'bold'} c={WARNA.biruTua}>{v.title}</Text>
+                                    <Text fw={'lighter'} c={WARNA.biruTua} fz={13}>{v.createdAt}</Text>
+                                 </Group>
+                                 {/* <Text c={WARNA.biruTua} lineClamp={2}>{v.desc}</Text> */}
+                                 <Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
+                                    <Text c={WARNA.biruTua} onClick={() => {
+                                       router.push(`/announcement/${v.id}`)
+                                    }} >{v.desc}</Text>
+                                 </Spoiler>
+                              </Grid.Col>
+                           </Grid>
+                        </Box>
+                        <Divider my={15} />
+                     </Box>
+                  )
+               })}
       </Box>
    );
 }
diff --git a/src/module/announcement/ui/navbar_detail_announcement.tsx b/src/module/announcement/ui/navbar_detail_announcement.tsx
index 481bd45..3133ec0 100644
--- a/src/module/announcement/ui/navbar_detail_announcement.tsx
+++ b/src/module/announcement/ui/navbar_detail_announcement.tsx
@@ -4,9 +4,11 @@ import { ActionIcon, Box } from "@mantine/core";
 import { HiMenu } from "react-icons/hi";
 import DrawerDetailAnnouncement from "./drawer_detail_announcement";
 import { useState } from "react";
+import { useRouter } from "next/navigation";
 
 export default function NavbarDetailAnnouncement() {
    const [isOpenDrawer, setOpenDrawer] = useState(false)
+   const router = useRouter()
    return (
       <Box>
          <LayoutNavbarNew back="" title="Pengumuman"
@@ -16,7 +18,12 @@ export default function NavbarDetailAnnouncement() {
                </ActionIcon>}
          />
          <LayoutDrawer opened={isOpenDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
-            <DrawerDetailAnnouncement onDeleted={() => setOpenDrawer(false)} />
+            <DrawerDetailAnnouncement onDeleted={(val) => {
+               if (val) {
+                  router.replace('/announcement')
+                  setOpenDrawer(false)
+               }
+            }} />
          </LayoutDrawer>
       </Box>
    )
diff --git a/src/module/announcement/ui/view_detail_anouncement.tsx b/src/module/announcement/ui/view_detail_anouncement.tsx
deleted file mode 100644
index 75b0353..0000000
--- a/src/module/announcement/ui/view_detail_anouncement.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Box } from "@mantine/core";
-import DetailAnnouncement from "./detail_announcement";
-import NavbarDetailAnnouncement from "./navbar_detail_announcement";
-
-export default function ViewDetailAnnouncement({ data }: { data: string }) {
-   return (
-      <Box>
-         <NavbarDetailAnnouncement />
-         <DetailAnnouncement id={data} />
-      </Box>
-   )
-}
\ No newline at end of file
diff --git a/src/module/user/member/ui/list_member.tsx b/src/module/user/member/ui/list_member.tsx
index f0e1b48..d5e4f1a 100644
--- a/src/module/user/member/ui/list_member.tsx
+++ b/src/module/user/member/ui/list_member.tsx
@@ -13,6 +13,7 @@ export default function ListMember() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const status = searchParams.get("active");
+  const group = searchParams.get("group");
 
   return (
     <Box p={20}>
@@ -35,7 +36,7 @@ export default function ListMember() {
             w={"45%"}
             leftSection={<IoMdCheckmarkCircleOutline style={iconStyle} />}
             onClick={() => {
-              router.push("/member?active=true");
+              router.push("/member?active=true&group=" + group);
             }}
           >
             Aktif
@@ -45,7 +46,7 @@ export default function ListMember() {
             w={"53%"}
             leftSection={<IoCloseCircleOutline style={iconStyle} />}
             onClick={() => {
-              router.push("/member?active=false");
+              router.push("/member?active=false&group=" + group);
             }}
           >
             Tidak Aktif