From ea9f0be5ea8fd2d01dea45af4ffd9be89f958ea5 Mon Sep 17 00:00:00 2001
From: amel <amel@amel.local>
Date: Fri, 5 Jul 2024 11:42:50 +0800
Subject: [PATCH 1/2] upd: pengumuman

Deskripsi :
- list pengumuman
- tambah pengumuman
- routing list dan tambah pengumuman
- drawer list pengumuman

No Issues
---
 .../announcement/create/page.tsx              |  9 ++
 src/app/(application)/announcement/page.tsx   |  9 ++
 .../component/list_announcement.tsx           | 87 +++++++++++++++++++
 .../component/ui/drawer_announcement.tsx      | 48 ++++++++++
 .../component/ui/navbar_announcement.tsx      | 37 ++++++++
 .../ui/navbar_create_announcement.tsx         | 21 +++++
 src/module/announcement/index.ts              |  5 ++
 .../view/view_create_announcement.tsx         | 60 +++++++++++++
 .../view/view_list_announcement.tsx           | 12 +++
 src/module/home/components/features.tsx       |  2 +-
 10 files changed, 289 insertions(+), 1 deletion(-)
 create mode 100644 src/app/(application)/announcement/create/page.tsx
 create mode 100644 src/app/(application)/announcement/page.tsx
 create mode 100644 src/module/announcement/component/list_announcement.tsx
 create mode 100644 src/module/announcement/component/ui/drawer_announcement.tsx
 create mode 100644 src/module/announcement/component/ui/navbar_announcement.tsx
 create mode 100644 src/module/announcement/component/ui/navbar_create_announcement.tsx
 create mode 100644 src/module/announcement/view/view_create_announcement.tsx
 create mode 100644 src/module/announcement/view/view_list_announcement.tsx

diff --git a/src/app/(application)/announcement/create/page.tsx b/src/app/(application)/announcement/create/page.tsx
new file mode 100644
index 0000000..c4f77f1
--- /dev/null
+++ b/src/app/(application)/announcement/create/page.tsx
@@ -0,0 +1,9 @@
+import { ViewCreateAnnouncement } from "@/module/announcement";
+
+function Page() {
+   return (
+      <ViewCreateAnnouncement />
+   )
+}
+
+export default Page;
\ No newline at end of file
diff --git a/src/app/(application)/announcement/page.tsx b/src/app/(application)/announcement/page.tsx
new file mode 100644
index 0000000..4551abb
--- /dev/null
+++ b/src/app/(application)/announcement/page.tsx
@@ -0,0 +1,9 @@
+import { ViewListAnnouncement } from "@/module/announcement";
+
+function Page() {
+   return (
+      <ViewListAnnouncement/>
+   )
+}
+
+export default Page;
\ No newline at end of file
diff --git a/src/module/announcement/component/list_announcement.tsx b/src/module/announcement/component/list_announcement.tsx
new file mode 100644
index 0000000..89a3dc6
--- /dev/null
+++ b/src/module/announcement/component/list_announcement.tsx
@@ -0,0 +1,87 @@
+import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
+import { ActionIcon, Box, Group, Text, TextInput } from '@mantine/core';
+import React from 'react';
+import { TfiAnnouncement } from "react-icons/tfi";
+import { HiMagnifyingGlass } from 'react-icons/hi2';
+
+const dataPengumuman = [
+   {
+      id: 1,
+      name: 'Lembaga Pengkreditan Desa',
+      desc: 'Diharapkan semua untuk melakukan upacara ben...'
+   },
+   {
+      id: 2,
+      name: 'Lembaga Pengkreditan Desa',
+      desc: 'Diharapkan semua untuk melakukan upacara ben...'
+   },
+   {
+      id: 3,
+      name: 'Lembaga Pengkreditan Desa',
+      desc: 'Diharapkan semua untuk melakukan upacara ben...'
+   },
+   {
+      id: 4,
+      name: 'Lembaga Pengkreditan Desa',
+      desc: 'Diharapkan semua untuk melakukan upacara ben...'
+   },
+   {
+      id: 5,
+      name: 'Lembaga Pengkreditan Desa',
+      desc: 'Diharapkan semua untuk melakukan upacara ben...'
+   },
+   {
+      id: 6,
+      name: 'Lembaga Pengkreditan Desa',
+      desc: 'Diharapkan semua untuk melakukan upacara ben...'
+   },
+   {
+      id: 7,
+      name: 'Lembaga Pengkreditan Desa',
+      desc: 'Diharapkan semua untuk melakukan upacara ben...'
+   },
+   {
+      id: 8,
+      name: 'Lembaga Pengkreditan Desa',
+      desc: 'Diharapkan semua untuk melakukan upacara ben...'
+   },
+]
+
+export default function ListAnnouncement() {
+   return (
+      <Box p={20}>
+         <TextInput
+            styles={{
+               input: {
+                  color: WARNA.biruTua,
+                  borderRadius: WARNA.biruTua,
+                  borderColor: WARNA.biruTua,
+               },
+            }}
+            size="md"
+            radius={30}
+            leftSection={<HiMagnifyingGlass size={20} />}
+            placeholder="Pencarian"
+         />
+         {dataPengumuman.map((v, i) => {
+            return (
+               <Box pt={20} key={i}>
+                  <Group align='center' style={{
+                     borderBottom: `1px solid #D9D9D9`,
+                     padding: 10,
+                  }} >
+                     <Box>
+                        <ActionIcon variant="light" bg={'#FCAA4B'} size={50} radius={100} aria-label="icon">
+                           <TfiAnnouncement color={WARNA.biruTua} size={25} />
+                        </ActionIcon>
+                     </Box>
+                     <Box>
+                        <Text fw={'bold'} c={WARNA.biruTua}>{v.name}</Text>
+                     </Box>
+                  </Group>
+               </Box>
+            )
+         })}
+      </Box>
+   );
+}
diff --git a/src/module/announcement/component/ui/drawer_announcement.tsx b/src/module/announcement/component/ui/drawer_announcement.tsx
new file mode 100644
index 0000000..7eccd40
--- /dev/null
+++ b/src/module/announcement/component/ui/drawer_announcement.tsx
@@ -0,0 +1,48 @@
+import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
+import { useHookstate } from '@hookstate/core';
+import { Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import { IoAddCircle } from "react-icons/io5";
+import { RiFilter2Line } from "react-icons/ri";
+
+export default function DrawerAnnouncement() {
+   const openDrawer = useHookstate(isDrawer)
+   const router = useRouter()
+
+   function onCLose() {
+      openDrawer.set(false)
+   }
+   return (
+      <Box>
+         <Stack pt={10}>
+            <SimpleGrid
+               cols={{ base: 3, sm: 3, lg: 3 }}
+            >
+               <Flex justify={'center'} align={'center'} direction={'column'}
+                  onClick={() => {
+                     router.push('/announcement/create')
+                     onCLose()
+                  }}
+               >
+                  <Box>
+                     <IoAddCircle size={30} color={WARNA.biruTua} />
+                  </Box>
+                  <Box>
+                     <Text c={WARNA.biruTua} ta='center'>Tambah Pengumuman</Text>
+                  </Box>
+               </Flex>
+
+               <Flex justify={'center'} align={'center'} direction={'column'} >
+                  <Box>
+                     <RiFilter2Line size={30} color={WARNA.biruTua} />
+                  </Box>
+                  <Box>
+                     <Text c={WARNA.biruTua} ta='center'>Filter</Text>
+                  </Box>
+               </Flex>
+            </SimpleGrid>
+         </Stack>
+      </Box>
+   );
+}
diff --git a/src/module/announcement/component/ui/navbar_announcement.tsx b/src/module/announcement/component/ui/navbar_announcement.tsx
new file mode 100644
index 0000000..782be67
--- /dev/null
+++ b/src/module/announcement/component/ui/navbar_announcement.tsx
@@ -0,0 +1,37 @@
+"use client"
+import { isDrawer, LayoutDrawer, LayoutIconBack, LayoutNavbarHome, WARNA } from '@/module/_global';
+import { ActionIcon, Box, Drawer, Grid, Group, Text } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+import { HiMenu } from "react-icons/hi";
+import { useHookstate } from '@hookstate/core';
+import DrawerAnnouncement from './drawer_announcement';
+
+export default function NavbarAnnouncement() {
+  const openDrawer = useHookstate(isDrawer)
+  return (
+    <>
+      <LayoutNavbarHome>
+        <Grid justify='center' align='center'>
+          <Grid.Col span="auto">
+            <LayoutIconBack back='/home' />
+          </Grid.Col>
+          <Grid.Col span={6}>
+            <Text ta={'center'} fw={'bold'} c={'white'}>PENGUMUMAN</Text>
+          </Grid.Col>
+          <Grid.Col span="auto">
+            <Group justify='flex-end'>
+              <ActionIcon onClick={() => openDrawer.set(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+                <HiMenu size={20} color='white' />
+              </ActionIcon>
+            </Group>
+          </Grid.Col>
+        </Grid>
+      </LayoutNavbarHome>
+      <LayoutDrawer opened={openDrawer.get()} title={'MENU'} onClose={() => openDrawer.set(false)}>
+        <DrawerAnnouncement />
+      </LayoutDrawer>
+    </>
+  );
+}
+
diff --git a/src/module/announcement/component/ui/navbar_create_announcement.tsx b/src/module/announcement/component/ui/navbar_create_announcement.tsx
new file mode 100644
index 0000000..cb25c3e
--- /dev/null
+++ b/src/module/announcement/component/ui/navbar_create_announcement.tsx
@@ -0,0 +1,21 @@
+'use client'
+import { LayoutIconBack, LayoutNavbarHome } from "@/module/_global";
+import { Box, Grid, Text } from "@mantine/core";
+
+export default function NavbarCreateAnnouncement() {
+   return (
+      <Box>
+         <LayoutNavbarHome>
+            <Grid justify='center' align='center'>
+               <Grid.Col span="auto">
+                  <LayoutIconBack />
+               </Grid.Col>
+               <Grid.Col span={6}>
+                  <Text ta={'center'} fw={'bold'} c={'white'}>Tambah Pengumuman</Text>
+               </Grid.Col>
+               <Grid.Col span="auto"></Grid.Col>
+            </Grid>
+         </LayoutNavbarHome>
+      </Box>
+   )
+}
\ No newline at end of file
diff --git a/src/module/announcement/index.ts b/src/module/announcement/index.ts
index e69de29..632be5b 100644
--- a/src/module/announcement/index.ts
+++ b/src/module/announcement/index.ts
@@ -0,0 +1,5 @@
+import ViewCreateAnnouncement from "./view/view_create_announcement";
+import ViewListAnnouncement from "./view/view_list_announcement";
+
+export { ViewListAnnouncement }
+export { ViewCreateAnnouncement }
\ No newline at end of file
diff --git a/src/module/announcement/view/view_create_announcement.tsx b/src/module/announcement/view/view_create_announcement.tsx
new file mode 100644
index 0000000..4774ad5
--- /dev/null
+++ b/src/module/announcement/view/view_create_announcement.tsx
@@ -0,0 +1,60 @@
+import { WARNA } from "@/module/_global";
+import { Box, Stack, TextInput, Button, Textarea } from "@mantine/core";
+import { HiOutlineChevronRight, HiUser } from "react-icons/hi2";
+import NavbarCreateAnnouncement from "../component/ui/navbar_create_announcement";
+
+export default function ViewCreateAnnouncement() {
+   return (
+      <Box>
+         <NavbarCreateAnnouncement />
+         <Stack
+            align="center"
+            justify="center"
+            gap="xs"
+            pt={30}
+            px={20}
+         >
+            <TextInput
+               size="md" type="text" radius={30} placeholder="Judul Pengumuman" withAsterisk label="Judul" w={"100%"}
+               styles={{
+                  input: {
+                     color: WARNA.biruTua,
+                     borderRadius: WARNA.biruTua,
+                     borderColor: WARNA.biruTua,
+                  },
+               }}
+            />
+            <Textarea
+               size="md"
+               radius={20}
+               w={"100%"}
+               label="Pengumuman"
+               withAsterisk
+               placeholder="Deskripsi Pengumuman"
+               styles={{
+                  input: {
+                     color: WARNA.biruTua,
+                     borderRadius: WARNA.biruTua,
+                     borderColor: WARNA.biruTua,
+                  },
+               }}
+            />
+
+            <Button rightSection={<HiOutlineChevronRight  size={14} />} variant="default" fullWidth radius={30} size="md" mt={10}>
+               Pilih Anggota
+            </Button>
+         </Stack>
+         <Box mt={30} mx={20}>
+            <Button
+               c={"white"}
+               bg={WARNA.biruTua}
+               size="md"
+               radius={30}
+               fullWidth
+            >
+               Simpan
+            </Button>
+         </Box>
+      </Box>
+   )
+}
\ No newline at end of file
diff --git a/src/module/announcement/view/view_list_announcement.tsx b/src/module/announcement/view/view_list_announcement.tsx
new file mode 100644
index 0000000..4af77e6
--- /dev/null
+++ b/src/module/announcement/view/view_list_announcement.tsx
@@ -0,0 +1,12 @@
+import { Box } from "@mantine/core";
+import NavbarAnnouncement from "../component/ui/navbar_announcement";
+import ListAnnouncement from "../component/list_announcement";
+
+export default function ViewListAnnouncement() {
+   return (
+      <Box>
+         <NavbarAnnouncement />
+         <ListAnnouncement />
+      </Box>
+   )
+}
\ No newline at end of file
diff --git a/src/module/home/components/features.tsx b/src/module/home/components/features.tsx
index bdfd62e..5a842d5 100644
--- a/src/module/home/components/features.tsx
+++ b/src/module/home/components/features.tsx
@@ -42,7 +42,7 @@ export default function Features() {
               <Text fz={15} c={WARNA.biruTua}>Proyek</Text>
             </Center>
           </Box>
-          <Box>
+          <Box onClick={() => router.push('/announcement')}>
             <Center>
               <ActionIcon variant="gradient"
                 size={68}

From 0e36aca193b03a7ac134a385b29cee7eae6fbfe8 Mon Sep 17 00:00:00 2001
From: amel <amel@amel.local>
Date: Fri, 5 Jul 2024 14:59:58 +0800
Subject: [PATCH 2/2] upd: pengumuman

Deskripsi:
- tambah pengumuman
- detail pengumuman
- edit pengumuman

No Issues
---
 .../(application)/announcement/[id]/page.tsx  |  9 +++
 .../announcement/edit/[id]/page.tsx           |  9 +++
 .../component/detail_announcement.tsx         | 37 ++++++++++++
 .../component/list_announcement.tsx           |  9 ++-
 .../ui/drawer_detail_announcement.tsx         | 45 ++++++++++++++
 .../ui/navbar_detail_announcement.tsx         | 34 +++++++++++
 .../component/ui/navbar_edit_announcement.tsx | 21 +++++++
 src/module/announcement/index.ts              |  6 +-
 .../view/view_detail_anouncement.tsx          | 12 ++++
 .../view/view_edit_announcement.tsx           | 60 +++++++++++++++++++
 10 files changed, 239 insertions(+), 3 deletions(-)
 create mode 100644 src/app/(application)/announcement/[id]/page.tsx
 create mode 100644 src/app/(application)/announcement/edit/[id]/page.tsx
 create mode 100644 src/module/announcement/component/detail_announcement.tsx
 create mode 100644 src/module/announcement/component/ui/drawer_detail_announcement.tsx
 create mode 100644 src/module/announcement/component/ui/navbar_detail_announcement.tsx
 create mode 100644 src/module/announcement/component/ui/navbar_edit_announcement.tsx
 create mode 100644 src/module/announcement/view/view_detail_anouncement.tsx
 create mode 100644 src/module/announcement/view/view_edit_announcement.tsx

diff --git a/src/app/(application)/announcement/[id]/page.tsx b/src/app/(application)/announcement/[id]/page.tsx
new file mode 100644
index 0000000..872826e
--- /dev/null
+++ b/src/app/(application)/announcement/[id]/page.tsx
@@ -0,0 +1,9 @@
+import { ViewDetailAnnouncement } from "@/module/announcement";
+
+function Page({ params }: { params: { id: string } }) {
+   return (
+      <ViewDetailAnnouncement data={params.id} />
+   )
+}
+
+export default Page;
\ No newline at end of file
diff --git a/src/app/(application)/announcement/edit/[id]/page.tsx b/src/app/(application)/announcement/edit/[id]/page.tsx
new file mode 100644
index 0000000..b9f348b
--- /dev/null
+++ b/src/app/(application)/announcement/edit/[id]/page.tsx
@@ -0,0 +1,9 @@
+import { ViewEditAnnouncement } from "@/module/announcement";
+
+function Page({ params }: { params: { id: any } }) {
+   return (
+      <ViewEditAnnouncement data={params.id} />
+   )
+}
+
+export default Page;
\ No newline at end of file
diff --git a/src/module/announcement/component/detail_announcement.tsx b/src/module/announcement/component/detail_announcement.tsx
new file mode 100644
index 0000000..47b74ea
--- /dev/null
+++ b/src/module/announcement/component/detail_announcement.tsx
@@ -0,0 +1,37 @@
+import { Box, Group, Stack, Text } from "@mantine/core";
+import { BsCardText } from "react-icons/bs";
+import { TfiAnnouncement } from "react-icons/tfi";
+
+export default function DetailAnnouncement() {
+   return (
+      <Box py={30} px={20}>
+         <Box p={20} style={{ borderRadius: 10, border: '1px solid #E5E5E5' }} bg={'white'} >
+            <Stack>
+               <Group>
+                  <TfiAnnouncement size={25} />
+                  <Text fw={'bold'}>Pengumuman Dinas</Text>
+               </Group>
+               <Group>
+                  <BsCardText size={25} />
+                  <Text>Pengumuman agar menggunakan</Text>
+               </Group>
+            </Stack>
+         </Box>
+         <Box my={15} p={20} style={{ borderRadius: 10, border: '1px solid #E5E5E5' }} bg={'white'} >
+            <Stack>
+               <Text fw={'bold'}>Anggota</Text>
+               <Group>
+                  <Text>LPD</Text>
+               </Group>
+               <Group>
+                  <Text>PKK</Text>
+               </Group>
+               <Group>
+                  <Text>Karang Taruna</Text>
+               </Group>
+            </Stack>
+         </Box>
+      </Box>
+
+   )
+}
\ No newline at end of file
diff --git a/src/module/announcement/component/list_announcement.tsx b/src/module/announcement/component/list_announcement.tsx
index 89a3dc6..c1317a6 100644
--- a/src/module/announcement/component/list_announcement.tsx
+++ b/src/module/announcement/component/list_announcement.tsx
@@ -1,8 +1,10 @@
+'use client'
 import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
-import { ActionIcon, Box, Group, Text, TextInput } from '@mantine/core';
+import { ActionIcon, Anchor, Box, Group, Text, TextInput } from '@mantine/core';
 import React from 'react';
 import { TfiAnnouncement } from "react-icons/tfi";
 import { HiMagnifyingGlass } from 'react-icons/hi2';
+import { useRouter } from 'next/navigation';
 
 const dataPengumuman = [
    {
@@ -48,6 +50,7 @@ const dataPengumuman = [
 ]
 
 export default function ListAnnouncement() {
+   const router = useRouter()
    return (
       <Box p={20}>
          <TextInput
@@ -65,7 +68,9 @@ export default function ListAnnouncement() {
          />
          {dataPengumuman.map((v, i) => {
             return (
-               <Box pt={20} key={i}>
+               <Box pt={20} key={i} onClick={() => {
+                  router.push(`/announcement/${v.id}`)
+               }}>
                   <Group align='center' style={{
                      borderBottom: `1px solid #D9D9D9`,
                      padding: 10,
diff --git a/src/module/announcement/component/ui/drawer_detail_announcement.tsx b/src/module/announcement/component/ui/drawer_detail_announcement.tsx
new file mode 100644
index 0000000..71824e5
--- /dev/null
+++ b/src/module/announcement/component/ui/drawer_detail_announcement.tsx
@@ -0,0 +1,45 @@
+import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
+import { useHookstate } from '@hookstate/core';
+import { Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import { FaPencil, FaTrash } from 'react-icons/fa6';
+
+export default function DrawerDetailAnnouncement() {
+   const openDrawer = useHookstate(isDrawer)
+   const router = useRouter()
+
+   function onCLose() {
+      openDrawer.set(false)
+   }
+   return (
+      <Box>
+         <Stack pt={10}>
+            <SimpleGrid
+               cols={{ base: 3, sm: 3, lg: 3 }}
+            >
+               <Flex justify={'center'} align={'center'} direction={'column'}>
+                  <Box>
+                     <FaTrash size={30} color={WARNA.biruTua} />
+                  </Box>
+                  <Box>
+                     <Text c={WARNA.biruTua} ta='center'>Hapus</Text>
+                  </Box>
+               </Flex>
+
+               <Flex justify={'center'} align={'center'} direction={'column'} onClick={() => {
+                  router.push('edit/123')
+                  onCLose()
+               }}>
+                  <Box>
+                     <FaPencil size={30} color={WARNA.biruTua} />
+                  </Box>
+                  <Box>
+                     <Text c={WARNA.biruTua} ta='center'>Edit</Text>
+                  </Box>
+               </Flex>
+            </SimpleGrid>
+         </Stack>
+      </Box>
+   );
+}
diff --git a/src/module/announcement/component/ui/navbar_detail_announcement.tsx b/src/module/announcement/component/ui/navbar_detail_announcement.tsx
new file mode 100644
index 0000000..a2584ae
--- /dev/null
+++ b/src/module/announcement/component/ui/navbar_detail_announcement.tsx
@@ -0,0 +1,34 @@
+'use client'
+import { isDrawer, LayoutDrawer, LayoutIconBack, LayoutNavbarHome, WARNA } from "@/module/_global";
+import { useHookstate } from "@hookstate/core";
+import { ActionIcon, Box, Grid, Group, Text } from "@mantine/core";
+import { HiMenu } from "react-icons/hi";
+import DrawerDetailAnnouncement from "./drawer_detail_announcement";
+
+export default function NavbarDetailAnnouncement() {
+   const openDrawer = useHookstate(isDrawer)
+   return (
+      <Box>
+         <LayoutNavbarHome>
+            <Grid justify='center' align='center'>
+               <Grid.Col span="auto">
+                  <LayoutIconBack />
+               </Grid.Col>
+               <Grid.Col span={6}>
+                  <Text ta={'center'} fw={'bold'} c={'white'}>PENGUMUMAN</Text>
+               </Grid.Col>
+               <Grid.Col span="auto">
+                  <Group justify='flex-end'>
+                     <ActionIcon onClick={() => openDrawer.set(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+                        <HiMenu size={20} color='white' />
+                     </ActionIcon>
+                  </Group>
+               </Grid.Col>
+            </Grid>
+         </LayoutNavbarHome>
+         <LayoutDrawer opened={openDrawer.get()} title={'MENU'} onClose={() => openDrawer.set(false)}>
+            <DrawerDetailAnnouncement />
+         </LayoutDrawer>
+      </Box>
+   )
+}
\ No newline at end of file
diff --git a/src/module/announcement/component/ui/navbar_edit_announcement.tsx b/src/module/announcement/component/ui/navbar_edit_announcement.tsx
new file mode 100644
index 0000000..3add416
--- /dev/null
+++ b/src/module/announcement/component/ui/navbar_edit_announcement.tsx
@@ -0,0 +1,21 @@
+'use client'
+import { LayoutIconBack, LayoutNavbarHome } from "@/module/_global";
+import { Box, Grid, Text } from "@mantine/core";
+
+export default function NavbarEditAnnouncement() {
+   return (
+      <Box>
+         <LayoutNavbarHome>
+            <Grid justify='center' align='center'>
+               <Grid.Col span="auto">
+                  <LayoutIconBack />
+               </Grid.Col>
+               <Grid.Col span={6}>
+                  <Text ta={'center'} fw={'bold'} c={'white'}>Edit Pengumuman</Text>
+               </Grid.Col>
+               <Grid.Col span="auto"></Grid.Col>
+            </Grid>
+         </LayoutNavbarHome>
+      </Box>
+   )
+}
\ No newline at end of file
diff --git a/src/module/announcement/index.ts b/src/module/announcement/index.ts
index 632be5b..297f4d5 100644
--- a/src/module/announcement/index.ts
+++ b/src/module/announcement/index.ts
@@ -1,5 +1,9 @@
 import ViewCreateAnnouncement from "./view/view_create_announcement";
+import ViewDetailAnnouncement from "./view/view_detail_anouncement";
+import ViewEditAnnouncement from "./view/view_edit_announcement";
 import ViewListAnnouncement from "./view/view_list_announcement";
 
 export { ViewListAnnouncement }
-export { ViewCreateAnnouncement }
\ No newline at end of file
+export { ViewCreateAnnouncement }
+export { ViewDetailAnnouncement }
+export { ViewEditAnnouncement }
\ No newline at end of file
diff --git a/src/module/announcement/view/view_detail_anouncement.tsx b/src/module/announcement/view/view_detail_anouncement.tsx
new file mode 100644
index 0000000..885049b
--- /dev/null
+++ b/src/module/announcement/view/view_detail_anouncement.tsx
@@ -0,0 +1,12 @@
+import { Box } from "@mantine/core";
+import DetailAnnouncement from "../component/detail_announcement";
+import NavbarDetailAnnouncement from "../component/ui/navbar_detail_announcement";
+
+export default function ViewDetailAnnouncement({ data }: { data: string }) {
+   return (
+      <Box>
+         <NavbarDetailAnnouncement />
+         <DetailAnnouncement />
+      </Box>
+   )
+}
\ No newline at end of file
diff --git a/src/module/announcement/view/view_edit_announcement.tsx b/src/module/announcement/view/view_edit_announcement.tsx
new file mode 100644
index 0000000..4b2bb39
--- /dev/null
+++ b/src/module/announcement/view/view_edit_announcement.tsx
@@ -0,0 +1,60 @@
+import { Box, Button, Stack, Textarea, TextInput } from "@mantine/core";
+import NavbarEditAnnouncement from "../component/ui/navbar_edit_announcement";
+import { WARNA } from "@/module/_global";
+import { HiOutlineChevronRight } from "react-icons/hi2";
+
+export default function ViewEditAnnouncement({ data }: { data: string }) {
+   return (
+      <Box>
+         <NavbarEditAnnouncement />
+         <Stack
+            align="center"
+            justify="center"
+            gap="xs"
+            pt={30}
+            px={20}
+         >
+            <TextInput
+               size="md" type="text" radius={30} placeholder="Judul Pengumuman" withAsterisk label="Judul" w={"100%"}
+               styles={{
+                  input: {
+                     color: WARNA.biruTua,
+                     borderRadius: WARNA.biruTua,
+                     borderColor: WARNA.biruTua,
+                  },
+               }}
+            />
+            <Textarea
+               size="md"
+               radius={20}
+               w={"100%"}
+               label="Pengumuman"
+               withAsterisk
+               placeholder="Deskripsi Pengumuman"
+               styles={{
+                  input: {
+                     color: WARNA.biruTua,
+                     borderRadius: WARNA.biruTua,
+                     borderColor: WARNA.biruTua,
+                  },
+               }}
+            />
+
+            <Button rightSection={<HiOutlineChevronRight size={14} />} variant="default" fullWidth radius={30} size="md" mt={10}>
+               Pilih Anggota
+            </Button>
+         </Stack>
+         <Box mt={30} mx={20}>
+            <Button
+               c={"white"}
+               bg={WARNA.biruTua}
+               size="md"
+               radius={30}
+               fullWidth
+            >
+               Simpan
+            </Button>
+         </Box>
+      </Box>
+   )
+}
\ No newline at end of file