diff --git a/api.http b/api.http
index 1ae6373..6b0931c 100644
--- a/api.http
+++ b/api.http
@@ -224,4 +224,26 @@ Content-Type: application/json
 
 {
     "id": "clz6naf9s000ib3mlf5aujk92"
+}
+
+
+###
+POST http://localhost:3000/api/announcement HTTP/1.1
+Content-Type: application/json
+
+{
+    "title": "cobaannouncement1 dsdsd",
+    "desc": "coba announcement sdsdsd",
+    "groups": [
+        {
+        "id": "group1",
+        "name": "Dinas",
+            "Division": [
+                {
+                    "id": "1",
+                    "name": "sasasasa"
+                }
+            ]
+        }
+  ]
 }
\ No newline at end of file
diff --git a/src/app/(application)/announcement/create/page.tsx b/src/app/(application)/announcement/create/page.tsx
index 7e09362..a5ca3d3 100644
--- a/src/app/(application)/announcement/create/page.tsx
+++ b/src/app/(application)/announcement/create/page.tsx
@@ -1,9 +1,9 @@
+import { CreateAnnouncement } from "@/module/announcement";
 
 
 function Page() {
    return (
-      ""
-      // <ViewCreateAnnouncement />
+      <CreateAnnouncement />
    )
 }
 
diff --git a/src/app/api/announcement/route.ts b/src/app/api/announcement/route.ts
index 327a073..9ff899e 100644
--- a/src/app/api/announcement/route.ts
+++ b/src/app/api/announcement/route.ts
@@ -1,3 +1,4 @@
+import { Group } from '@mantine/core';
 import { prisma } from "@/module/_global";
 import { funGetUserByCookies } from "@/module/auth";
 import _ from "lodash";
@@ -22,7 +23,7 @@ export async function GET(request: Request) {
                 isActive: true,
                 title: {
                     contains: (name == undefined || name == null) ? "" : name,
-                    mode: "insensitive"                 
+                    mode: "insensitive"
                 }
             },
             select: {
@@ -44,3 +45,53 @@ export async function GET(request: Request) {
         return NextResponse.json({ success: false, message: "Gagal mendapatkan pengumuman, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
     }
 }
+
+
+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 { title, desc, createBy, groups } = (await request.json());
+        const villaId = "desa1"
+        const roleId = "superAdminLukman"
+
+        const data = await prisma.announcement.create({
+            data: {
+                title,
+                desc,
+                idVillage: String(villaId),
+                createdBy: String(roleId),
+            },
+            select: {
+                id: true,
+                title: true,
+                desc: true,
+                createdAt: true,
+            }
+        });
+
+        const dataMember = groups.map((group: any) => ({
+            idAnnoucement: data.id,
+            idGroup: group.id,
+            idDivision: group.Division.map((division: any) => ({
+                id: division.id,
+                name: division.name,
+            })),
+            isActive: true,
+        }));
+        
+        console.log("test data", dataMember)
+        // await prisma.announcementMember.createMany({
+        //     data: dataMember
+        // })
+
+        return NextResponse.json({ success: true, message: "Berhasil mendapatkan 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 });
+    }
+}
\ No newline at end of file
diff --git a/src/app/api/group/get-division/route.ts b/src/app/api/group/get-division/route.ts
new file mode 100644
index 0000000..a067bcb
--- /dev/null
+++ b/src/app/api/group/get-division/route.ts
@@ -0,0 +1,39 @@
+import { prisma } from "@/module/_global";
+import { funGetUserByCookies } from "@/module/auth";
+import { revalidatePath, revalidateTag } from "next/cache";
+import { NextResponse } from "next/server";
+
+export const dynamic = 'force-dynamic'
+export const revalidate = true
+export async function GET(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 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 });
+    }
+}
\ No newline at end of file
diff --git a/src/module/announcement/index.ts b/src/module/announcement/index.ts
index dd0ec6c..9ae4abe 100644
--- a/src/module/announcement/index.ts
+++ b/src/module/announcement/index.ts
@@ -1,4 +1,5 @@
 import { apiAnnouncement } from "./api/api_announcement";
+import CreateAnnouncement from "./ui/create_announcement";
 import ListAnnouncement from "./ui/list_announcement";
 import NavbarAnnouncement from "./ui/navbar_announcement";
 import ViewDetailAnnouncement from "./ui/view_detail_anouncement"
@@ -7,4 +8,5 @@ import ViewDetailAnnouncement from "./ui/view_detail_anouncement"
 export { ViewDetailAnnouncement };
 export { apiAnnouncement };
 export { ListAnnouncement }
-export { NavbarAnnouncement }
\ No newline at end of file
+export { NavbarAnnouncement }
+export { CreateAnnouncement }
\ 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 4e94996..79583dc 100644
--- a/src/module/announcement/lib/type_announcement.ts
+++ b/src/module/announcement/lib/type_announcement.ts
@@ -21,4 +21,13 @@ export interface IRootAllAnnouncement {
     idGroup: string
     idDivision: string
     group: string
+ }
+
+ export interface GroupData {
+   id: string;
+   name: string;
+   Division: {
+     id: string;
+     name: string;
+   }[];
  }
\ No newline at end of file
diff --git a/src/module/announcement/lib/val_announcement.ts b/src/module/announcement/lib/val_announcement.ts
new file mode 100644
index 0000000..806fcf2
--- /dev/null
+++ b/src/module/announcement/lib/val_announcement.ts
@@ -0,0 +1,5 @@
+import { hookstate } from "@hookstate/core";
+import { GroupData } from "./type_announcement";
+
+
+export const globalMemberAnnouncement = 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 0a8e1d8..6ef7112 100644
--- a/src/module/announcement/ui/create_announcement.tsx
+++ b/src/module/announcement/ui/create_announcement.tsx
@@ -1,7 +1,10 @@
 '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 { Box, Button, 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";
@@ -10,7 +13,9 @@ import { IoIosArrowForward } from "react-icons/io";
 
 export default function CreateAnnouncement() {
    const [isOpen, setOpen] = useState(false)
+   const member = useHookstate(globalMemberDivision)
    const router = useRouter()
+   const [selectedFiles, setSelectedFiles] = useState<any>([]);
 
    function onTrue(val: boolean) {
       if (val) {
@@ -19,8 +24,19 @@ export default function CreateAnnouncement() {
       setOpen(false)
    }
 
+   async function loadData() {
+      setSelectedFiles(JSON.parse(JSON.stringify(member.get())))
+   }
+
+   useShallowEffect(() => {
+      loadData()
+   },[])
+
    return (
       <Box>
+         <pre>
+            {JSON.stringify(selectedFiles)}
+         </pre>
           <LayoutNavbarNew back="" title="Tambah Pengumuman" menu={<></>} />
          <Stack
             p={20}
diff --git a/src/module/announcement/ui/create_users_announcement.tsx b/src/module/announcement/ui/create_users_announcement.tsx
index 0b8d8fa..eb74bde 100644
--- a/src/module/announcement/ui/create_users_announcement.tsx
+++ b/src/module/announcement/ui/create_users_announcement.tsx
@@ -1,24 +1,15 @@
-"use client"
+"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 } from '../lib/type_announcement';
+import { useHookstate } from '@hookstate/core';
+import { globalMemberAnnouncement } from '../lib/val_announcement';
 
-interface GroupData {
-  group: string;
-  divisions: string[];
-}
 
-const groupData: GroupData[] = [
-  {
-    group: "Group 1",
-    divisions: ["Division 1", "Division 2", "Division 3"]
-  },
-  {
-    group: "Group 2",
-    divisions: ["Division 4", "Division 5"]
-  }
-];
 
 interface CheckedState {
   [key: string]: string[];
@@ -27,28 +18,30 @@ interface CheckedState {
 export default function CreateUsersAnnouncement() {
   const [checked, setChecked] = useState<CheckedState>({});
   const [selectAll, setSelectAll] = useState(false);
+  const [isData, setIsData] = useState<GroupData[]>([])
+  const memberGroup = useHookstate(globalMemberAnnouncement)
 
-  const handleCheck = (group: string, division: string) => {
+  const handleCheck = (groupId: string, divisionId: string) => {
     const newChecked = { ...checked };
-    if (newChecked[group]) {
-      if (newChecked[group].includes(division)) {
-        newChecked[group] = newChecked[group].filter(item => item !== division);
+    if (newChecked[groupId]) {
+      if (newChecked[groupId].includes(divisionId)) {
+        newChecked[groupId] = newChecked[groupId].filter(item => item !== divisionId);
       } else {
-        newChecked[group].push(division);
+        newChecked[groupId].push(divisionId);
       }
     } else {
-      newChecked[group] = [division];
+      newChecked[groupId] = [divisionId];
     }
     setChecked(newChecked);
     console.log(newChecked)
   };
 
-  const handleGroupCheck = (group: string) => {
+  const handleGroupCheck = (groupId: string) => {
     const newChecked = { ...checked };
-    if (newChecked[group]) {
-      delete newChecked[group];
+    if (newChecked[groupId]) {
+      delete newChecked[groupId];
     } else {
-      newChecked[group] = groupData.find(item => item.group === group)?.divisions || [];
+      newChecked[groupId] = isData.find(item => item.id === groupId)?.Division.map(item => item.id) || [];
     }
     setChecked(newChecked);
     console.log(newChecked)
@@ -58,8 +51,8 @@ export default function CreateUsersAnnouncement() {
     setSelectAll(!selectAll);
     if (!selectAll) {
       const newChecked: CheckedState = {};
-      groupData.forEach(item => {
-        newChecked[item.group] = item.divisions;
+      isData.forEach(item => {
+        newChecked[item.id] = item.Division.map(division => division.id);
       });
       setChecked(newChecked);
       console.log(newChecked)
@@ -68,6 +61,25 @@ export default function CreateUsersAnnouncement() {
     }
   };
 
+  async function getData() {
+    const response = await funGetGroupDivision()
+    console.log(response)
+    setIsData(response.data)
+  }
+  const handleSubmit = () => {
+    const selectedGroups: GroupData[] = [];
+    Object.keys(checked).forEach((groupId) => {
+      if (checked[groupId]) {
+        selectedGroups.push();
+      }
+    });
+    memberGroup.set(selectedGroups);
+  };
+
+  useShallowEffect(() => {
+    getData()
+  }, [])
+
   return (
     <div>
       <LayoutNavbarNew back="" title="Tambah Anggota" menu={<></>} />
@@ -85,42 +97,52 @@ export default function CreateUsersAnnouncement() {
             Pilih Semua
           </Text>
         </Group>
-        {groupData.map((item) => (
-          <Stack mb={30} key={item.group}>
-            <Group onClick={() => handleGroupCheck(item.group)} justify='space-between' align='center'>
+        {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.group] && checked[item.group].length === item.divisions.length ? 'bold' : 'normal'}
+                fw={checked[item.id] && checked[item.id].length === item.Division.length ? 'bold' : 'normal'}
               >
-                {item.group}
+                {item.name}
               </Text>
               <Text
               >
-                {checked[item.group] && checked[item.group].length === item.divisions.length ? <FaCheck style={{ marginRight: 10 }} /> : ""}
+                {checked[item.id] && checked[item.id].length === item.Division.length ? <FaCheck style={{ marginRight: 10 }} /> : ""}
               </Text>
             </Group>
-            <Divider/>
-            {item.divisions.map((division) => (
-              <Box key={division}>
-                <Text
-                  onClick={() => handleCheck(item.group, division)}
-                  style={{
-                    cursor: 'pointer',
-                    display: 'flex',
-                    alignItems: 'center',
-                    paddingLeft: 20,
-                  }}
-                >
-                  {checked[item.group] && checked[item.group].includes(division) ? <FaCheck style={{ marginRight: 10 }} /> : ""}
-                  {division}
-                </Text>
+            <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>
+                  <Divider />
+                </Box>
               </Box>
 
             ))}
@@ -131,11 +153,12 @@ export default function CreateUsersAnnouncement() {
           <Button
             color="white"
             bg={WARNA.biruTua}
+
             size="lg"
             radius={30}
             fullWidth
             onClick={() => {
-              ""
+              handleSubmit()
             }}
           >
             Simpan
diff --git a/src/module/group/lib/api_group.ts b/src/module/group/lib/api_group.ts
index 02d11eb..98d8d03 100644
--- a/src/module/group/lib/api_group.ts
+++ b/src/module/group/lib/api_group.ts
@@ -49,3 +49,7 @@ export const funEditGroup = async (path: string, data: IFormGroup) => {
    return await response.json().catch(() => null);
 };
 
+export const funGetGroupDivision = async (path?: string) => {
+   const response = await fetch(`/api/group/get-division${(path) ? path : ''}`, { next: { tags: ['group'] } });
+   return await response.json().catch(() => null);
+}
\ No newline at end of file