upd: pengumuman

Deskripsi:
- mengganti layout navbar terbaru
- mengganti global state menjadi local state
- memakai modal konfirmasi

NO Issues

src/module/announcement/component/create_announcement.tsx

@@ -0,0 +1,76 @@
+'use client'
+import { WARNA } from "@/module/_global";
+import LayoutModal from "@/module/_global/layout/layout_modal";
+import { Box, Button, Stack, Textarea, TextInput } from "@mantine/core";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import { HiOutlineChevronRight } from "react-icons/hi2";
+
+export default function CreateAnnouncement() {
+   const [isOpen, setOpen] = useState(false)
+
+   function onTrue(val: boolean) {
+      if (val) {
+         toast.success("Sukses! Data tersimpan");
+      }
+      setOpen(false)
+   }
+
+   return (
+      <Box>
+         <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
+               onClick={() => { setOpen(true) }}
+            >
+               Simpan
+            </Button>
+         </Box>
+         <LayoutModal opened={isOpen} onClose={() => setOpen(false)}
+            description="Apakah Anda yakin ingin menambahkan data?"
+            onYes={(val) => { onTrue(val) }} />
+      </Box>
+
+   )
+}

src/module/announcement/component/edit_announcement.tsx

@@ -0,0 +1,74 @@
+'use client'
+import { WARNA } from "@/module/_global";
+import LayoutModal from "@/module/_global/layout/layout_modal";
+import { Box, Button, Stack, Textarea, TextInput } from "@mantine/core";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import { HiOutlineChevronRight } from "react-icons/hi2";
+
+export default function EditAnnouncement() {
+   const [isOpen, setOpen] = useState(false)
+
+   function onTrue(val: boolean) {
+      if (val) {
+         toast.success("Sukses! Data tersimpan");
+      }
+      setOpen(false)
+   }
+   return (
+      <>
+         <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
+               onClick={() => { setOpen(true) }}
+            >
+               Simpan
+            </Button>
+         </Box>
+         <LayoutModal opened={isOpen} onClose={() => setOpen(false)}
+            description="Apakah Anda yakin ingin mengubah data?"
+            onYes={(val) => { onTrue(val) }} />
+      </>
+   )
+}

src/module/announcement/component/ui/drawer_announcement.tsx

@@ -1,18 +1,13 @@
-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 { WARNA } from '@/module/_global';
+import { Box, Flex, SimpleGrid, Stack, Text } 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}>
@@ -22,7 +17,6 @@ export default function DrawerAnnouncement() {
                <Flex justify={'center'} align={'center'} direction={'column'}
                   onClick={() => {
                      router.push('/announcement/create')
-                     onCLose()
                   }}
                >
                   <Box>

src/module/announcement/component/ui/drawer_detail_announcement.tsx

@@ -1,16 +1,21 @@
-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 { 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 React, { useState } from 'react';
+import toast from 'react-hot-toast';
 import { FaPencil, FaTrash } from 'react-icons/fa6';
 
-export default function DrawerDetailAnnouncement() {
-   const openDrawer = useHookstate(isDrawer)
+export default function DrawerDetailAnnouncement({ onDeleted }: { onDeleted: (val: boolean) => void }) {
    const router = useRouter()
+   const [isOpen, setOpen] = useState(false)
 
-   function onCLose() {
-      openDrawer.set(false)
+   function onTrue(val: boolean) {
+      if (val) {
+         toast.success('Sukses! Data terhapus')
+         onDeleted(true)
+      }
+      setOpen(false)
    }
    return (
       <Box>
@@ -18,7 +23,7 @@ export default function DrawerDetailAnnouncement() {
             <SimpleGrid
                cols={{ base: 3, sm: 3, lg: 3 }}
             >
-               <Flex justify={'center'} align={'center'} direction={'column'}>
+               <Flex style={{ cursor: 'pointer' }} justify={'center'} align={'center'} direction={'column'} onClick={() => setOpen(true)}>
                   <Box>
                      <FaTrash size={30} color={WARNA.biruTua} />
                   </Box>
@@ -29,8 +34,7 @@ export default function DrawerDetailAnnouncement() {
 
                <Flex justify={'center'} align={'center'} direction={'column'} onClick={() => {
                   router.push('edit/123')
-                  onCLose()
-               }}>
+               }} style={{ cursor: 'pointer' }}>
                   <Box>
                      <FaPencil size={30} color={WARNA.biruTua} />
                   </Box>
@@ -40,6 +44,9 @@ export default function DrawerDetailAnnouncement() {
                </Flex>
             </SimpleGrid>
          </Stack>
+         <LayoutModal opened={isOpen} onClose={() => setOpen(false)}
+            description="Apakah Anda yakin ingin menghapus data?"
+            onYes={(val) => { onTrue(val) }} />
       </Box>
    );
 }

src/module/announcement/component/ui/navbar_announcement.tsx

@@ -1,23 +1,23 @@
 "use client"
-import { isDrawer, LayoutDrawer, LayoutIconBack, LayoutNavbarHome, LayoutNavbarNew, WARNA } from '@/module/_global';
-import { ActionIcon, Box, Drawer, Grid, Group, Text } from '@mantine/core';
-import { useRouter } from 'next/navigation';
-import React from 'react';
+import { isDrawer, LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
+import { ActionIcon } from '@mantine/core';
+import React, { useState } 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)
+  const [isOpen, setOpen] = useState(false)
   return (
     <>
       <LayoutNavbarNew back='/home' title='pengumuman'
         menu={
-          <ActionIcon onClick={() => openDrawer.set(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+          <ActionIcon onClick={() => setOpen(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
             <HiMenu size={20} color='white' />
           </ActionIcon>
         } />
-      <LayoutDrawer opened={openDrawer.get()} title={'MENU'} onClose={() => openDrawer.set(false)}>
+      <LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>
         <DrawerAnnouncement />
       </LayoutDrawer>
     </>

src/module/announcement/component/ui/navbar_detail_announcement.tsx

@@ -1,33 +1,22 @@
 '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 { LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
+import { ActionIcon, Box } from "@mantine/core";
 import { HiMenu } from "react-icons/hi";
 import DrawerDetailAnnouncement from "./drawer_detail_announcement";
+import { useState } from "react";
 
 export default function NavbarDetailAnnouncement() {
-   const openDrawer = useHookstate(isDrawer)
+   const [isOpenDrawer, setOpenDrawer] = useState(false)
    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 />
+         <LayoutNavbarNew back="" title="Pengumuman"
+            menu={
+               <ActionIcon onClick={() => setOpenDrawer(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+                  <HiMenu size={20} color='white' />
+               </ActionIcon>}
+         />
+         <LayoutDrawer opened={isOpenDrawer} title={'MENU'} onClose={() => setOpenDrawer(false)}>
+            <DrawerDetailAnnouncement onDeleted={() => setOpenDrawer(false)} />
          </LayoutDrawer>
       </Box>
    )

src/module/announcement/view/view_create_announcement.tsx

@@ -1,60 +1,14 @@
-import { WARNA } from "@/module/_global";
+import { LayoutNavbarNew, 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";
+import CreateAnnouncement from "../component/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>
+         {/* <NavbarCreateAnnouncement /> */}
+         <LayoutNavbarNew back="" title="Tambah Pengumuman" menu={<></>} />
+         <CreateAnnouncement/>
       </Box>
    )
 }

src/module/announcement/view/view_edit_announcement.tsx

@@ -1,60 +1,14 @@
 import { Box, Button, Stack, Textarea, TextInput } from "@mantine/core";
-import NavbarEditAnnouncement from "../component/ui/navbar_edit_announcement";
-import { WARNA } from "@/module/_global";
+import { LayoutNavbarNew, WARNA } from "@/module/_global";
 import { HiOutlineChevronRight } from "react-icons/hi2";
+import EditAnnouncement from "../component/edit_announcement";
 
 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>
+         {/* <NavbarEditAnnouncement /> */}
+         <LayoutNavbarNew back="" title="Edit Pengumuman" menu={<></>} />
+         <EditAnnouncement />
       </Box>
    )
 }