member

Deskripsi:
- edit member

No Issues

src/app/(application)/member/edit/[id]/page.tsx

@@ -0,0 +1,9 @@
+import { ViewEditMember } from "@/module/user/member";
+
+function Page() {
+   return (
+      <ViewEditMember />
+   )
+}
+
+export default Page;

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

@@ -0,0 +1,44 @@
+'use client'
+import { isDrawer, WARNA } from "@/module/_global";
+import { useHookstate } from "@hookstate/core";
+import { Box, Flex, SimpleGrid, Stack, Text } from "@mantine/core";
+import { useRouter } from "next/navigation";
+import { FaPencil } from "react-icons/fa6";
+import { ImUserCheck } from "react-icons/im";
+
+export default function DrawerDetailMember() {
+   const router = useRouter()
+   const openDrawer = useHookstate(isDrawer)
+   return (
+      <Box>
+         <Stack pt={10}>
+            <SimpleGrid
+               cols={{ base: 3, sm: 3, lg: 3 }}
+            >
+               <Flex justify={'center'} align={'center'} direction={'column'}>
+                  <Box>
+                     <ImUserCheck size={30} color={WARNA.biruTua} />
+                  </Box>
+                  <Box>
+                     <Text c={WARNA.biruTua} ta='center'>Status</Text>
+                  </Box>
+               </Flex>
+
+               <Flex justify={'center'} align={'center'} direction={'column'}
+                  onClick={() => {
+                     router.push('/member/edit/123')
+                     openDrawer.set(false)
+                  }}
+               >
+                  <Box>
+                     <FaPencil size={30} color={WARNA.biruTua} />
+                  </Box>
+                  <Box>
+                     <Text c={WARNA.biruTua} ta='center'>Edit</Text>
+                  </Box>
+               </Flex>
+            </SimpleGrid>
+         </Stack>
+      </Box>
+   )
+}

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

@@ -0,0 +1,35 @@
+'use client'
+import { LayoutNavbarHome, LayoutIconBack, WARNA, LayoutDrawer, isDrawer } 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";
+
+export default function NavbarDetailMember() {
+   const openDrawer = useHookstate(isDrawer)
+   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">
+                  <HiMenu size={20} color='white' />
+               </ActionIcon>
+            </Group>
+            <Stack
+               align="center"
+               justify="center"
+               gap="xs"
+            >
+               <HiUser size={100} color='white' />
+               <Text c={'white'} fw={'bold'} fz={25}>Fibra Marcell</Text>
+               <Text c={'white'} fw={'lighter'} fz={15}>Kepala Urusan Pengembangan</Text>
+            </Stack>
+         </LayoutNavbarHome>
+         <LayoutDrawer opened={openDrawer.get()} title={'MENU'} onClose={() => openDrawer.set(false)}>
+            <DrawerDetailMember />
+         </LayoutDrawer>
+      </Box>
+   )
+} 

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

@@ -0,0 +1,23 @@
+'use client'
+import { LayoutIconBack, LayoutNavbarHome } from '@/module/_global';
+import { Box, Grid, Text } from '@mantine/core';
+import React from 'react';
+
+export default function NavbarEditMember() {
+   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 Anggota</Text>
+               </Grid.Col>
+               <Grid.Col span="auto"></Grid.Col>
+            </Grid>
+         </LayoutNavbarHome>
+      </Box>
+   );
+}
+

src/module/user/member/index.ts

@@ -1,7 +1,9 @@
 import ViewCreateMember from "./view/view_create_member";
 import ViewDetailMember from "./view/view_detail_member";
+import ViewEditMember from "./view/view_edit_member";
 import ViewListMember from "./view/view_list_member";
 
 export { ViewListMember }
 export { ViewCreateMember }
-export { ViewDetailMember }
+export { ViewDetailMember }
+export { ViewEditMember }

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

@@ -1,31 +1,17 @@
-import { LayoutNavbarHome, LayoutIconBack, WARNA } from "@/module/_global";
+import { LayoutNavbarHome, LayoutIconBack, WARNA, LayoutDrawer, isDrawer } from "@/module/_global";
+import { useHookstate } from "@hookstate/core";
 import { ActionIcon, Box, Group, Stack, Text } from "@mantine/core";
-import { BsInfo } from "react-icons/bs";
 import { FaSquarePhone } from "react-icons/fa6";
+import { HiMenu } from "react-icons/hi";
 import { HiUser } from "react-icons/hi2";
 import { MdEmail } from "react-icons/md";
 import { RiIdCardFill } from "react-icons/ri";
+import NavbarDetailMember from "../component/ui/navbar_detail_member";
 
 export default function ViewDetailMember({ data }: { data: string }) {
    return (
       <Box>
-         <LayoutNavbarHome>
-            <Group justify="space-between">
-               <LayoutIconBack />
-               <ActionIcon variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Info">
-                  <BsInfo size={20} color='white' />
-               </ActionIcon>
-            </Group>
-            <Stack
-               align="center"
-               justify="center"
-               gap="xs"
-            >
-               <HiUser size={100} color='white' />
-               <Text c={'white'} fw={'bold'} fz={25}>Fibra Marcell</Text>
-               <Text c={'white'} fw={'lighter'} fz={15}>Kepala Urusan Pengembangan</Text>
-            </Stack>
-         </LayoutNavbarHome>
+         <NavbarDetailMember />
          <Box p={20}>
             <Group justify="space-between" grow py={5}>
                <Group>
@@ -48,7 +34,6 @@ export default function ViewDetailMember({ data }: { data: string }) {
                </Group>
                <Text fz={18} fw={'bold'} ta={"right"}>marcel@gmail.com</Text>
             </Group>
-
          </Box>
       </Box>
    )

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

@@ -0,0 +1,77 @@
+import { 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";
+
+export default function ViewEditMember() {
+   return (
+      <Box>
+         <NavbarEditMember />
+         <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
+            >
+               Simpan
+            </Button>
+         </Box>
+      </Box>
+   )
+}