Merge pull request #28 from bipproduction/amalia/8-jul-24

Amalia/8 jul 24

src/module/_global/layout/layout_icon_back.tsx

@@ -11,7 +11,7 @@ function LayoutIconBack({ back }: { back?: string }) {
   return (
     <Box>
       <ActionIcon variant="light" onClick={() => {
-        if (!_.isUndefined(back) && !_.isNull(back)) {
+        if (!_.isUndefined(back) && !_.isNull(back) && !_.isEmpty(back)) {
           return router.push(back)
         } else {
           return router.back()

src/module/_global/layout/layout_modal.tsx

@@ -1,11 +1,12 @@
 import { useHookstate } from '@hookstate/core';
 import { Box, Button, Flex, Modal, Text } from '@mantine/core';
-import React from 'react';
+import React, { useState } from 'react';
 import { BsQuestionCircleFill } from 'react-icons/bs';
 import { isModal } from '../val/isModal';
 
 export default function LayoutModal({ opened, onClose, description, onYes }: { opened: boolean, onClose: () => void, description: string, onYes: (val: boolean) => void }) {
   const openModal = useHookstate(isModal)
+  const [isValModal, setValModal] = useState(opened)
   return (
     <Modal styles={{
       body: {
@@ -21,7 +22,7 @@ export default function LayoutModal({ opened, onClose, description, onYes }: { o
         <Text mt={30} ta={"center"} fw={"bold"} fz={18}>{description}</Text>
         <Box mt={30} w={'100%'}>
           <Button mb={20} fullWidth size="lg" radius={'xl'} bg={'#4754F0'} onClick={() => onYes(true)}>YA</Button>
-          <Button fullWidth size="lg" radius={'xl'} bg={'#DCE1FE'} c={'#4754F0'} onClick={() => openModal.set(false)}>TIDAK</Button>
+          <Button fullWidth size="lg" radius={'xl'} bg={'#DCE1FE'} c={'#4754F0'} onClick={() => onYes(false)}>TIDAK</Button>
         </Box>
       </Flex>
     </Modal>

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 { WARNA } from '@/module/_global';
-import { useHookstate } from '@hookstate/core';
+import { Box, Flex, SimpleGrid, Stack, Text } from '@mantine/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}>
@@ -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 { WARNA } from '@/module/_global';
-import { useHookstate } from '@hookstate/core';
+import LayoutModal from '@/module/_global/layout/layout_modal';
-import { Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+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() {
+export default function DrawerDetailAnnouncement({ onDeleted }: { onDeleted: (val: boolean) => void }) {
-   const openDrawer = useHookstate(isDrawer)
    const router = useRouter()
+   const [isOpen, setOpen] = useState(false)
 
-   function onCLose() {
+   function onTrue(val: boolean) {
-      openDrawer.set(false)
+      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 { isDrawer, LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
-import { ActionIcon, Box, Drawer, Grid, Group, Text } from '@mantine/core';
+import { ActionIcon } from '@mantine/core';
-import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
-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)
+  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 { LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
-import { useHookstate } from "@hookstate/core";
+import { ActionIcon, Box } from "@mantine/core";
-import { ActionIcon, Box, Grid, Group, Text } 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>
+         <LayoutNavbarNew back="" title="Pengumuman"
-            <Grid justify='center' align='center'>
+            menu={
-               <Grid.Col span="auto">
+               <ActionIcon onClick={() => setOpenDrawer(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
-                  <LayoutIconBack />
+                  <HiMenu size={20} color='white' />
-               </Grid.Col>
+               </ActionIcon>}
-               <Grid.Col span={6}>
+         />
-                  <Text ta={'center'} fw={'bold'} c={'white'}>PENGUMUMAN</Text>
+         <LayoutDrawer opened={isOpenDrawer} title={'MENU'} onClose={() => setOpenDrawer(false)}>
-               </Grid.Col>
+            <DrawerDetailAnnouncement onDeleted={() => setOpenDrawer(false)} />
-               <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/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 />
+         {/* <NavbarCreateAnnouncement /> */}
-         <Stack
+         <LayoutNavbarNew back="" title="Tambah Pengumuman" menu={<></>} />
-            align="center"
+         <CreateAnnouncement/>
-            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>
    )
 }

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 { LayoutNavbarNew, WARNA } from "@/module/_global";
-import { 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 />
+         {/* <NavbarEditAnnouncement /> */}
-         <Stack
+         <LayoutNavbarNew back="" title="Edit Pengumuman" menu={<></>} />
-            align="center"
+         <EditAnnouncement />
-            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>
    )
 }

src/module/position/component/ui/drawer_detail_position.tsx

@@ -1,25 +1,39 @@
 import { isDrawer, LayoutDrawer, WARNA } from "@/module/_global"
+import LayoutModal from "@/module/_global/layout/layout_modal"
 import { useHookstate } from "@hookstate/core"
 import { Box, Stack, SimpleGrid, Flex, Text, Select, TextInput, Button } from "@mantine/core"
 import router from "next/router"
 import { useState } from "react"
+import toast from "react-hot-toast"
 import { FaPencil } from "react-icons/fa6"
 import { ImUserCheck } from "react-icons/im"
 
-export default function DrawerDetailPosition() {
+export default function DrawerDetailPosition({ onUpdated }: { onUpdated: (val: boolean) => void }) {
    const [openDrawerGroup, setOpenDrawerGroup] = useState(false)
-   const openDrawer = useHookstate(isDrawer)
+   const [isModal, setModal] = useState(false)
+
    function onCLose() {
+      onUpdated(true)
       setOpenDrawerGroup(false)
-      openDrawer.set(false)
    }
+
+   function onTrue(val: boolean) {
+      if (val) {
+         onUpdated(true)
+      }
+      setModal(false)
+   }
+
    return (
       <Box>
          <Stack pt={10}>
             <SimpleGrid
                cols={{ base: 3, sm: 3, lg: 3 }}
             >
-               <Flex justify={'center'} align={'center'} direction={'column'}>
+               <Flex justify={'center'} align={'center'} direction={'column'}
+                  style={{ cursor: 'pointer' }}
+                  onClick={() => setModal(true)}
+               >
                   <Box>
                      <ImUserCheck size={30} color={WARNA.biruTua} />
                   </Box>
@@ -29,6 +43,7 @@ export default function DrawerDetailPosition() {
                </Flex>
 
                <Flex justify={'center'} align={'center'} direction={'column'}
+                  style={{ cursor: 'pointer' }}
                   onClick={() => setOpenDrawerGroup(true)}
                >
                   <Box>
@@ -87,6 +102,11 @@ export default function DrawerDetailPosition() {
                </Box>
             </Box>
          </LayoutDrawer>
+
+
+         <LayoutModal opened={isModal} onClose={() => setModal(false)}
+            description="Apakah Anda yakin ingin mengubah status aktifasi data?"
+            onYes={(val) => { onTrue(val) }} />
       </Box>
    )
 }

src/module/position/component/ui/drawer_list_position.tsx

@@ -1,16 +1,14 @@
 import { isDrawer, WARNA, LayoutDrawer } from "@/module/_global";
-import { useHookstate } from "@hookstate/core";
 import { Box, Stack, SimpleGrid, Flex, TextInput, Button, Text, Select } from "@mantine/core";
 import { useState } from "react";
 import { IoAddCircle } from "react-icons/io5";
 
-export default function DrawerListPosition() {
+export default function DrawerListPosition({ onCreated }: { onCreated: (val: boolean) => void }) {
    const [openDrawerGroup, setOpenDrawerGroup] = useState(false)
-   const openDrawer = useHookstate(isDrawer)
 
    function onCLose() {
       setOpenDrawerGroup(false)
-      openDrawer.set(false)
+      onCreated(true)
    }
    return (
       <Box>

src/module/position/component/ui/list_position_active.tsx

@@ -4,6 +4,7 @@ import React, { useState } from 'react';
 import { FaUserTie } from 'react-icons/fa6';
 import { HiMagnifyingGlass } from 'react-icons/hi2';
 import DrawerDetailPosition from './drawer_detail_position';
+import toast from 'react-hot-toast';
 
 const dataGroup = [
   {
@@ -42,6 +43,7 @@ const dataGroup = [
 
 export default function ListPositionActive() {
   const [openDrawer, setOpenDrawer] = useState(false)
+  const [isData, setData] = useState("")
   return (
     <Box pt={20}>
       <TextInput
@@ -64,7 +66,10 @@ export default function ListPositionActive() {
               border: `1px solid ${"#DCEED8"}`,
               padding: 10,
               borderRadius: 10
-            }} onClick={() => setOpenDrawer(true)} >
+            }} onClick={() => {
+              setData(v.name)
+              setOpenDrawer(true)
+            }} >
               <Box>
                 <ActionIcon variant="light" bg={'#DCEED8'} size={50} radius={100} aria-label="icon">
                   <FaUserTie color={WARNA.biruTua} size={25} />
@@ -77,8 +82,11 @@ export default function ListPositionActive() {
           </Box>
         )
       })}
-      <LayoutDrawer opened={openDrawer} onClose={() => setOpenDrawer(false)} title="LEMBAGA PENGKREDITAN DESA">
+      <LayoutDrawer opened={openDrawer} onClose={() => setOpenDrawer(false)} title={isData}>
-        <DrawerDetailPosition />
+        <DrawerDetailPosition onUpdated={() => {
+          setOpenDrawer(false)
+          toast.success('Sukses! data tersimpan')
+        }} />
       </LayoutDrawer>
     </Box>
   );

src/module/position/component/ui/list_position_nonactive.tsx

@@ -4,6 +4,7 @@ import React, { useState } from 'react';
 import { FaUserTie } from 'react-icons/fa6';
 import { HiMagnifyingGlass } from 'react-icons/hi2';
 import DrawerDetailPosition from './drawer_detail_position';
+import toast from 'react-hot-toast';
 
 const dataGroup = [
    {
@@ -42,6 +43,7 @@ const dataGroup = [
 
 export default function ListPositionNonActive() {
    const [openDrawer, setOpenDrawer] = useState(false)
+   const [isData, setData] = useState("")
    return (
       <Box pt={20}>
          <TextInput
@@ -64,7 +66,10 @@ export default function ListPositionNonActive() {
                      border: `1px solid ${"#DCEED8"}`,
                      padding: 10,
                      borderRadius: 10
-                  }} onClick={() => setOpenDrawer(true)}>
+                  }} onClick={() => {
+                     setData(v.name)
+                     setOpenDrawer(true)
+                  }}>
                      <Box>
                         <ActionIcon variant="light" bg={'#DCEED8'} size={50} radius={100} aria-label="icon">
                            <FaUserTie color={WARNA.biruTua} size={25} />
@@ -77,8 +82,11 @@ export default function ListPositionNonActive() {
                </Box>
             )
          })}
-         <LayoutDrawer opened={openDrawer} onClose={() => setOpenDrawer(false)} title="LEMBAGA PENGKREDITAN DESA">
+         <LayoutDrawer opened={openDrawer} onClose={() => setOpenDrawer(false)} title={isData}>
-            <DrawerDetailPosition />
+            <DrawerDetailPosition onUpdated={() => {
+               setOpenDrawer(false)
+               toast.success('Sukses! data tersimpan')
+            }} />
          </LayoutDrawer>
       </Box>
    );

src/module/position/component/ui/navbar_list_position.tsx

@@ -1,33 +1,27 @@
 'use client'
-import { LayoutNavbarHome, LayoutIconBack, WARNA, LayoutDrawer, isDrawer } from "@/module/_global";
+import { WARNA, LayoutDrawer, LayoutNavbarNew } from "@/module/_global";
-import { useHookstate } from "@hookstate/core";
+import { ActionIcon, Box } from "@mantine/core";
-import { Grid, Group, ActionIcon, Box, Text } from "@mantine/core";
 import { HiMenu } from "react-icons/hi";
 import DrawerListPosition from "./drawer_list_position";
+import { useState } from "react";
+import toast from "react-hot-toast";
 
 export default function NavbarListPosition() {
-   const openDrawerMenu = useHookstate(isDrawer)
+   const [isOpen, setOpen] = useState(false)
    return (
       <Box>
-         <LayoutNavbarHome>
+         <LayoutNavbarNew back="/home" title="Jabatan"
-            <Grid justify='center' align='center'>
+            menu={
-               <Grid.Col span="auto">
+               <ActionIcon onClick={() => setOpen(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
-                  <LayoutIconBack back='/home' />
+                  <HiMenu size={20} color='white' />
-               </Grid.Col>
+               </ActionIcon>
-               <Grid.Col span={6}>
+            }
-                  <Text ta={'center'} fw={'bold'} c={'white'}>Jabatan</Text>
+         />
-               </Grid.Col>
+         <LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>
-               <Grid.Col span="auto">
+            <DrawerListPosition onCreated={() => {
-                  <Group justify='flex-end'>
+               setOpen(false)
-                     <ActionIcon onClick={() => openDrawerMenu.set(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+               toast.success('Sukses! data tersimpan')
-                        <HiMenu size={20} color='white' />
+            }} />
-                     </ActionIcon>
-                  </Group>
-               </Grid.Col>
-            </Grid>
-         </LayoutNavbarHome>
-         <LayoutDrawer opened={openDrawerMenu.get()} title={'MENU'} onClose={() => openDrawerMenu.set(false)}>
-            <DrawerListPosition />
          </LayoutDrawer>
       </Box>
    );

src/module/user/member/component/create_member.tsx

@@ -0,0 +1,92 @@
+'use client'
+import { WARNA } from "@/module/_global";
+import LayoutModal from "@/module/_global/layout/layout_modal";
+import { Box, Button, Stack, TextInput } from "@mantine/core";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import { HiUser } from "react-icons/hi2";
+
+export default function CreateMember() {
+   const [isModal, setModal] = useState(false)
+
+   function onTrue(val: boolean) {
+      if (val) {
+         toast.success("Sukses! Data tersimpan");
+      }
+      setModal(false)
+   }
+
+   return (
+      <Box>
+         <Stack
+            align="center"
+            justify="center"
+            gap="xs"
+            pt={30}
+            px={20}
+         >
+            <Box bg={WARNA.biruTua} py={30} px={50}
+               style={{
+                  borderRadius: 10,
+               }}>
+               <HiUser size={100} color={WARNA.bgWhite} />
+            </Box>
+            <TextInput
+               size="md" type="number" radius={30} placeholder="NIK" withAsterisk label="NIK" w={"100%"}
+               styles={{
+                  input: {
+                     color: WARNA.biruTua,
+                     borderRadius: WARNA.biruTua,
+                     borderColor: WARNA.biruTua,
+                  },
+               }}
+            />
+            <TextInput
+               size="md" type="text" radius={30} placeholder="Nama" withAsterisk label="Nama" w={"100%"}
+               styles={{
+                  input: {
+                     color: WARNA.biruTua,
+                     borderRadius: WARNA.biruTua,
+                     borderColor: WARNA.biruTua,
+                  },
+               }}
+            />
+            <TextInput
+               size="md" type="email" radius={30} placeholder="Email" withAsterisk label="Email" w={"100%"}
+               styles={{
+                  input: {
+                     color: WARNA.biruTua,
+                     borderRadius: WARNA.biruTua,
+                     borderColor: WARNA.biruTua,
+                  },
+               }}
+            />
+            <TextInput
+               size="md" type="number" radius={30} placeholder="+62...." withAsterisk label="Nomor Telepon" w={"100%"}
+               styles={{
+                  input: {
+                     color: WARNA.biruTua,
+                     borderRadius: WARNA.biruTua,
+                     borderColor: WARNA.biruTua,
+                  },
+               }}
+            />
+         </Stack>
+         <Box mt={30} mx={20}>
+            <Button
+               c={"white"}
+               bg={WARNA.biruTua}
+               size="md"
+               radius={30}
+               fullWidth
+               onClick={() => setModal(true)}
+            >
+               Simpan
+            </Button>
+         </Box>
+         <LayoutModal opened={isModal} onClose={() => setModal(false)}
+            description="Apakah Anda yakin ingin menambahkan data?"
+            onYes={(val) => { onTrue(val) }} />
+      </Box>
+   )
+}

src/module/user/member/component/edit_member.tsx

@@ -0,0 +1,91 @@
+'use client'
+import { WARNA } from "@/module/_global";
+import LayoutModal from "@/module/_global/layout/layout_modal";
+import { Box, Button, Stack, TextInput } from "@mantine/core";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import { HiUser } from "react-icons/hi2";
+
+export default function EditMember() {
+   const [isModal, setModal] = useState(false)
+
+   function onTrue(val: boolean) {
+      if (val) {
+         toast.success("Sukses! Data tersimpan");
+      }
+      setModal(false)
+   }
+   return (
+      <Box>
+         <Stack
+            align="center"
+            justify="center"
+            gap="xs"
+            pt={30}
+            px={20}
+         >
+            <Box bg={WARNA.biruTua} py={30} px={50}
+               style={{
+                  borderRadius: 10,
+               }}>
+               <HiUser size={100} color={WARNA.bgWhite} />
+            </Box>
+            <TextInput
+               size="md" type="number" radius={30} placeholder="NIK" withAsterisk label="NIK" w={"100%"}
+               styles={{
+                  input: {
+                     color: WARNA.biruTua,
+                     borderRadius: WARNA.biruTua,
+                     borderColor: WARNA.biruTua,
+                  },
+               }}
+            />
+            <TextInput
+               size="md" type="text" radius={30} placeholder="Nama" withAsterisk label="Nama" w={"100%"}
+               styles={{
+                  input: {
+                     color: WARNA.biruTua,
+                     borderRadius: WARNA.biruTua,
+                     borderColor: WARNA.biruTua,
+                  },
+               }}
+            />
+            <TextInput
+               size="md" type="email" radius={30} placeholder="Email" withAsterisk label="Email" w={"100%"}
+               styles={{
+                  input: {
+                     color: WARNA.biruTua,
+                     borderRadius: WARNA.biruTua,
+                     borderColor: WARNA.biruTua,
+                  },
+               }}
+            />
+            <TextInput
+               size="md" type="number" radius={30} placeholder="+62...." withAsterisk label="Nomor Telepon" w={"100%"}
+               styles={{
+                  input: {
+                     color: WARNA.biruTua,
+                     borderRadius: WARNA.biruTua,
+                     borderColor: WARNA.biruTua,
+                  },
+               }}
+            />
+         </Stack>
+         <Box mt={30} mx={20}>
+            <Button
+               c={"white"}
+               bg={WARNA.biruTua}
+               size="md"
+               radius={30}
+               fullWidth
+               onClick={() => setModal(true)}
+            >
+               Simpan
+            </Button>
+         </Box>
+         <LayoutModal opened={isModal} onClose={() => setModal(false)}
+            description="Apakah Anda yakin ingin mengubah data?"
+            onYes={(val) => { onTrue(val) }} />
+      </Box>
+   )
+}

src/module/user/member/component/ui/drawer_detail_member.tsx

@@ -1,21 +1,39 @@
 'use client'
 import { isDrawer, WARNA } from "@/module/_global";
+import LayoutModal from "@/module/_global/layout/layout_modal";
 import { useHookstate } from "@hookstate/core";
 import { Box, Flex, SimpleGrid, Stack, Text } from "@mantine/core";
 import { useRouter } from "next/navigation";
+import { useState } from "react";
+import toast from "react-hot-toast";
 import { FaPencil } from "react-icons/fa6";
 import { ImUserCheck } from "react-icons/im";
 
-export default function DrawerDetailMember() {
+export default function DrawerDetailMember({ onDeleted }: { onDeleted: (val: boolean) => void }) {
    const router = useRouter()
-   const openDrawer = useHookstate(isDrawer)
+   const [isModal, setModal] = useState(false)
+
+   function onTrue(val: boolean) {
+      if (val) {
+         toast.success('Sukses! data tersimpan')
+         onDeleted(true)
+      }
+
+      setModal(false)
+   }
+
    return (
       <Box>
          <Stack pt={10}>
             <SimpleGrid
                cols={{ base: 3, sm: 3, lg: 3 }}
             >
-               <Flex justify={'center'} align={'center'} direction={'column'}>
+               <Flex justify={'center'} align={'center'} direction={'column'}
+                  style={{ cursor: 'pointer' }}
+                  onClick={() => {
+                     setModal(true)
+                  }}
+               >
                   <Box>
                      <ImUserCheck size={30} color={WARNA.biruTua} />
                   </Box>
@@ -25,9 +43,9 @@ export default function DrawerDetailMember() {
                </Flex>
 
                <Flex justify={'center'} align={'center'} direction={'column'}
+                  style={{ cursor: 'pointer' }}
                   onClick={() => {
                      router.push('/member/edit/123')
-                     openDrawer.set(false)
                   }}
                >
                   <Box>
@@ -39,6 +57,9 @@ export default function DrawerDetailMember() {
                </Flex>
             </SimpleGrid>
          </Stack>
+         <LayoutModal opened={isModal} onClose={() => setModal(false)}
+            description="Apakah Anda yakin ingin mengubah status aktifasi anggota?"
+            onYes={(val) => { onTrue(val) }} />
       </Box>
    )
 }

src/module/user/member/component/ui/navbar_detail_member.tsx

@@ -1,19 +1,19 @@
 'use client'
-import { LayoutNavbarHome, LayoutIconBack, WARNA, LayoutDrawer, isDrawer } from "@/module/_global";
+import { LayoutNavbarHome, LayoutIconBack, WARNA, LayoutDrawer } from "@/module/_global";
-import { useHookstate } from "@hookstate/core";
 import { Box, Group, ActionIcon, Stack, Text } from "@mantine/core";
 import { HiMenu } from "react-icons/hi";
 import { HiUser } from "react-icons/hi2";
 import DrawerDetailMember from "./drawer_detail_member";
+import { useState } from "react";
 
 export default function NavbarDetailMember() {
-   const openDrawer = useHookstate(isDrawer)
+   const [isOpen, setOpen] = useState(false)
    return (
       <Box>
          <LayoutNavbarHome>
             <Group justify="space-between">
                <LayoutIconBack />
-               <ActionIcon onClick={()=>{openDrawer.set(true)}} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Info">
+               <ActionIcon onClick={() => setOpen(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Info">
                   <HiMenu size={20} color='white' />
                </ActionIcon>
             </Group>
@@ -27,8 +27,8 @@ export default function NavbarDetailMember() {
                <Text c={'white'} fw={'lighter'} fz={15}>Kepala Urusan Pengembangan</Text>
             </Stack>
          </LayoutNavbarHome>
-         <LayoutDrawer opened={openDrawer.get()} title={'MENU'} onClose={() => openDrawer.set(false)}>
+         <LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>
-            <DrawerDetailMember />
+            <DrawerDetailMember onDeleted={() => setOpen(false)} />
          </LayoutDrawer>
       </Box>
    )

src/module/user/member/component/ui/navbar_list_member.tsx

@@ -1,32 +1,22 @@
 'use client'
-import { isDrawer, LayoutDrawer, LayoutIconBack, LayoutNavbarHome, WARNA } from "@/module/_global";
+import { LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
-import { useHookstate } from "@hookstate/core";
+import { ActionIcon } from "@mantine/core";
-import { ActionIcon, Box, Grid, Group, Text } from "@mantine/core";
 import { HiMenu } from "react-icons/hi";
 import DrawerListMember from "./drawer_list_member";
+import { useState } from "react";
 
 export default function NavbarListMember() {
-   const openDrawer = useHookstate(isDrawer)
+   const [isOpenDrawer, setOpenDrawer] = useState(false)
    return (
       <>
-         <LayoutNavbarHome>
+         <LayoutNavbarNew back="/home" title="Anggota"
-            <Grid justify='center' align='center'>
+            menu={
-               <Grid.Col span="auto">
+               <ActionIcon onClick={() => setOpenDrawer(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
-                  <LayoutIconBack back='/home' />
+                  <HiMenu size={20} color='white' />
-               </Grid.Col>
+               </ActionIcon>
-               <Grid.Col span={6}>
+            }
-                  <Text ta={'center'} fw={'bold'} c={'white'}>ANGGOTA</Text>
+         />
-               </Grid.Col>
+         <LayoutDrawer opened={isOpenDrawer} title={'MENU'} onClose={() => setOpenDrawer(false)}>
-               <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)}>
             <DrawerListMember />
          </LayoutDrawer>
       </>

src/module/user/member/view/view_create_member.tsx

@@ -1,77 +1,14 @@
-import { Box, Button, Stack, TextInput } from "@mantine/core";
+import { Box } from "@mantine/core";
 import NavbarCreateMember from "../component/ui/navbar_create_member";
-import { WARNA } from "@/module/_global";
+import { LayoutNavbarNew, WARNA } from "@/module/_global";
-import { HiUser } from "react-icons/hi2";
+import CreateMember from "../component/create_member";
 
 export default function ViewCreateMember() {
    return (
       <Box>
-         <NavbarCreateMember />
+         {/* <NavbarCreateMember /> */}
-         <Stack
+         <LayoutNavbarNew back="" title="Tambah Anggota" menu={<></>} />
-            align="center"
+         <CreateMember/>
-            justify="center"
-            gap="xs"
-            pt={30}
-            px={20}
-         >
-            <Box bg={WARNA.biruTua} py={30} px={50}
-               style={{
-                  borderRadius: 10,
-               }}>
-               <HiUser size={100} color={WARNA.bgWhite} />
-            </Box>
-            <TextInput
-               size="md" type="number" radius={30} placeholder="NIK" withAsterisk label="NIK" w={"100%"}
-               styles={{
-                  input: {
-                     color: WARNA.biruTua,
-                     borderRadius: WARNA.biruTua,
-                     borderColor: WARNA.biruTua,
-                  },
-               }}
-            />
-            <TextInput
-               size="md" type="text" radius={30} placeholder="Nama" withAsterisk label="Nama" w={"100%"}
-               styles={{
-                  input: {
-                     color: WARNA.biruTua,
-                     borderRadius: WARNA.biruTua,
-                     borderColor: WARNA.biruTua,
-                  },
-               }}
-            />
-            <TextInput
-               size="md" type="email" radius={30} placeholder="Email" withAsterisk label="Email" w={"100%"}
-               styles={{
-                  input: {
-                     color: WARNA.biruTua,
-                     borderRadius: WARNA.biruTua,
-                     borderColor: WARNA.biruTua,
-                  },
-               }}
-            />
-            <TextInput
-               size="md" type="number" radius={30} placeholder="+62...." withAsterisk label="Nomor Telepon" w={"100%"}
-               styles={{
-                  input: {
-                     color: WARNA.biruTua,
-                     borderRadius: WARNA.biruTua,
-                     borderColor: WARNA.biruTua,
-                  },
-               }}
-            />
-         </Stack>
-         <Box mt={30} mx={20}>
-            <Button
-               c={"white"}
-               bg={WARNA.biruTua}
-               size="md"
-               radius={30}
-               fullWidth
-            >
-               Simpan
-            </Button>
-         </Box>
       </Box>
    )
 }

src/module/user/member/view/view_edit_member.tsx

@@ -1,77 +1,15 @@
-import { WARNA } from "@/module/_global";
+import { LayoutNavbarHome, LayoutNavbarNew, WARNA } from "@/module/_global";
 import { Box, Stack, TextInput, Button } from "@mantine/core";
 import { HiUser } from "react-icons/hi2";
 import NavbarEditMember from "../component/ui/navbar_edit_member";
+import EditMember from "../component/edit_member";
 
 export default function ViewEditMember() {
    return (
       <Box>
-         <NavbarEditMember />
+         {/* <NavbarEditMember /> */}
-         <Stack
+         <LayoutNavbarNew back="" title="Edit Anggota" menu={<></>} />
-            align="center"
+         <EditMember />
-            justify="center"
-            gap="xs"
-            pt={30}
-            px={20}
-         >
-            <Box bg={WARNA.biruTua} py={30} px={50}
-               style={{
-                  borderRadius: 10,
-               }}>
-               <HiUser size={100} color={WARNA.bgWhite} />
-            </Box>
-            <TextInput
-               size="md" type="number" radius={30} placeholder="NIK" withAsterisk label="NIK" w={"100%"}
-               styles={{
-                  input: {
-                     color: WARNA.biruTua,
-                     borderRadius: WARNA.biruTua,
-                     borderColor: WARNA.biruTua,
-                  },
-               }}
-            />
-            <TextInput
-               size="md" type="text" radius={30} placeholder="Nama" withAsterisk label="Nama" w={"100%"}
-               styles={{
-                  input: {
-                     color: WARNA.biruTua,
-                     borderRadius: WARNA.biruTua,
-                     borderColor: WARNA.biruTua,
-                  },
-               }}
-            />
-            <TextInput
-               size="md" type="email" radius={30} placeholder="Email" withAsterisk label="Email" w={"100%"}
-               styles={{
-                  input: {
-                     color: WARNA.biruTua,
-                     borderRadius: WARNA.biruTua,
-                     borderColor: WARNA.biruTua,
-                  },
-               }}
-            />
-            <TextInput
-               size="md" type="number" radius={30} placeholder="+62...." withAsterisk label="Nomor Telepon" w={"100%"}
-               styles={{
-                  input: {
-                     color: WARNA.biruTua,
-                     borderRadius: WARNA.biruTua,
-                     borderColor: WARNA.biruTua,
-                  },
-               }}
-            />
-         </Stack>
-         <Box mt={30} mx={20}>
-            <Button
-               c={"white"}
-               bg={WARNA.biruTua}
-               size="md"
-               radius={30}
-               fullWidth
-            >
-               Simpan
-            </Button>
-         </Box>
       </Box>
    )
 }

src/module/user/profile/component/edit_profile.tsx

@@ -1,23 +1,24 @@
 "use client"
-import { isModal, WARNA } from "@/module/_global";
+import { LayoutNavbarNew, WARNA } from "@/module/_global";
 import { Box, Button, Flex, Modal, Stack, Text, TextInput } from "@mantine/core";
-import HeaderEditProfile from "../component/ui/header_edit_profile";
 import { HiUser } from "react-icons/hi2";
-import { useHookstate } from "@hookstate/core";
-import { BsQuestionCircleFill } from "react-icons/bs"
 import toast from "react-hot-toast";
 import LayoutModal from "@/module/_global/layout/layout_modal";
+import { useState } from "react";
 
 export default function EditProfile() {
-  const openModal = useHookstate(isModal)
+  const [isValModal, setValModal] = useState(false)
 
-  function onTrue() {
+  function onTrue(val: boolean) {
-    toast.success("Sukses! Data tersimpan");
+    if (val) {
-    openModal.set(false)
+      toast.success("Sukses! Data tersimpan");
+    }
+    setValModal(false)
   }
+
   return (
     <Box>
-      <HeaderEditProfile />
+      <LayoutNavbarNew back='' title='Edit Profil' menu='' />
       <Stack
         align="center"
         justify="center"
@@ -79,15 +80,15 @@ export default function EditProfile() {
           size="md"
           radius={30}
           fullWidth
-          onClick={() => openModal.set(true)}
+          onClick={() => setValModal(true)}
         >
           Simpan
         </Button>
       </Box>
-      <LayoutModal opened={openModal.get()} onClose={() => openModal.set(false)}
+      <LayoutModal opened={isValModal} onClose={() => setValModal(false)}
-        description="Apakah Anda Ingin Mengganti
+        description="Apakah Anda yakin ingin
-        Status Aktivasi Data?"
+        melakukan perubahan data?"
-        onYes={onTrue} />
+        onYes={(val) => { onTrue(val) }} />
     </Box>
   )
 }

src/module/user/profile/component/ui/header_edit_profile.tsx

@@ -1,21 +1,11 @@
 'use client'
-import { LayoutIconBack, LayoutNavbarHome } from '@/module/_global';
+import { LayoutIconBack, LayoutNavbarHome, LayoutNavbarNew } from '@/module/_global';
 import { Box, Grid, Text } from '@mantine/core';
 import React from 'react';
 
 export default function HeaderEditProfile() {
    return (
-         <LayoutNavbarHome>
+      <LayoutNavbarNew back='' title='Edit Profil' menu='' />
-            <Grid justify='center' align='center'>
-               <Grid.Col span="auto">
-                  <LayoutIconBack />
-               </Grid.Col>
-               <Grid.Col span={6}>
-                  <Text ta={'center'} fw={'bold'} c={'white'}>EDIT PROFIL</Text>
-               </Grid.Col>
-               <Grid.Col span="auto"></Grid.Col>
-            </Grid>
-         </LayoutNavbarHome>
    );
 }
 

src/module/user/profile/component/ui/ui_profile.tsx

@@ -8,7 +8,7 @@ export function InfoTitleProfile() {
    return (
       <Group justify="space-between" grow py={5}>
          <Text fw={'bold'} fz={20}>Informasi</Text>
-         <Text ta={"right"} c={"blue"} onClick={() => router.push('/profile/edit')}>Edit</Text>
+         <Text style={{ cursor: 'pointer' }} ta={"right"} c={"blue"} onClick={() => router.push('/profile/edit')}>Edit</Text>
       </Group>
    )
 }

src/module/user/profile/view/view_profile.tsx

@@ -13,9 +13,9 @@ export default function ViewProfile() {
          <LayoutNavbarHome>
             <Group justify="space-between">
                <LayoutIconBack />
-               <ActionIcon variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Info">
+               {/* <ActionIcon variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Info">
                   <BsInfo size={20} color='white' />
-               </ActionIcon>
+               </ActionIcon> */}
             </Group>
             <Stack
                align="center"