upd: member

Deskripsi:
- update header new
- ganti local state
- pengaplikasian modal konfirmasi

NO Issues

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