upd: pengumuman

Deskripsi:
- tambah pengumuman
- detail pengumuman
- edit pengumuman

No Issues

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;

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;

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>
+
+   )
+}

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,

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>
+   );
+}

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>
+   )
+}

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>
+   )
+}

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 }
+export { ViewCreateAnnouncement }
+export { ViewDetailAnnouncement }
+export { ViewEditAnnouncement }

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>
+   )
+}

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>
+   )
+}