Merge pull request #20 from bipproduction/amalia/5-jul-24

Amalia/5 jul 24

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

@@ -0,0 +1,10 @@
+import { ViewDetailMember } from "@/module/user/member";
+
+function Page({ params }: { params: { id: string } }) {
+   return (
+      <ViewDetailMember data={params.id} />
+   )
+}
+
+export default Page;
+

src/app/(application)/member/create/page.tsx

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

src/app/(application)/member/page.tsx

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

src/module/home/view/view_detail_feature.tsx

@@ -56,7 +56,7 @@ export default function ViewDetailFeature() {
                 <Text fz={15} c={WARNA.biruTua}>Proyek</Text>
               </Center>
             </Box>
-            <Box>
+            <Box onClick={() => router.push('/announcement')}>
               <Center>
                 <ActionIcon variant="gradient"
                   size={68}
@@ -70,7 +70,7 @@ export default function ViewDetailFeature() {
                 <Text fz={15} c={WARNA.biruTua}>Pengumuman</Text>
               </Center>
             </Box>
-            <Box>
+            <Box onClick={() => router.push('/member')}>
               <Center>
                 <ActionIcon variant="gradient"
                   size={68}

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

@@ -0,0 +1,91 @@
+'use client'
+import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
+import { ActionIcon, Anchor, Box, Group, Text, TextInput } from '@mantine/core';
+import React from 'react';
+import { HiMagnifyingGlass, HiMiniUser } from 'react-icons/hi2';
+import { useRouter } from 'next/navigation';
+
+const dataMember = [
+   {
+      id: 1,
+      name: 'Ali akbar',
+      desc: 'Perbekel'
+   },
+   {
+      id: 2,
+      name: 'Fibra Marcell',
+      desc: 'Kasi Kesejahteraan'
+   },
+   {
+      id: 3,
+      name: 'Burhan',
+      desc: 'Kasi Kesejahteraan'
+   },
+   {
+      id: 4,
+      name: 'Chandra',
+      desc: 'Kasi Kesejahteraan'
+   },
+   {
+      id: 5,
+      name: 'Ayu',
+      desc: 'Kasi Kesejahteraan'
+   },
+   {
+      id: 6,
+      name: 'Heriawan',
+      desc: 'Kasi Kesejahteraan'
+   },
+   {
+      id: 7,
+      name: 'Jinan',
+      desc: 'Kasi Kesejahteraan'
+   },
+   {
+      id: 8,
+      name: 'Rizal',
+      desc: 'Kasi Kesejahteraan'
+   },
+]
+
+export default function ListMember() {
+   const router = useRouter()
+   return (
+      <Box p={20}>
+         <TextInput
+            styles={{
+               input: {
+                  color: WARNA.biruTua,
+                  borderRadius: WARNA.biruTua,
+                  borderColor: WARNA.biruTua,
+               },
+            }}
+            size="md"
+            radius={30}
+            leftSection={<HiMagnifyingGlass size={20} />}
+            placeholder="Pencarian"
+         />
+         {dataMember.map((v, i) => {
+            return (
+               <Box pt={20} key={i} onClick={() => {
+                  router.push(`/member/${v.id}`)
+               }}>
+                  <Group align='center' style={{
+                     borderBottom: `1px solid #D9D9D9`,
+                     padding: 10,
+                  }} >
+                     <Box>
+                        <ActionIcon variant="light" bg={WARNA.biruTua} size={50} radius={100} aria-label="icon">
+                           <HiMiniUser color={'white'} size={25} />
+                        </ActionIcon>
+                     </Box>
+                     <Box>
+                        <Text fw={'bold'} c={WARNA.biruTua}>{v.name}</Text>
+                     </Box>
+                  </Group>
+               </Box>
+            )
+         })}
+      </Box>
+   );
+}

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

@@ -0,0 +1,48 @@
+import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
+import { useHookstate } from '@hookstate/core';
+import { Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import { IoAddCircle } from "react-icons/io5";
+import { RiFilter2Line } from 'react-icons/ri';
+
+export default function DrawerListMember() {
+   const openDrawer = useHookstate(isDrawer)
+   const router = useRouter()
+
+   function onCLose() {
+      openDrawer.set(false)
+   }
+   return (
+      <Box>
+         <Stack pt={10}>
+            <SimpleGrid
+               cols={{ base: 3, sm: 3, lg: 3 }}
+            >
+               <Flex justify={'center'} align={'center'} direction={'column'}
+                  onClick={() => {
+                     router.push('/member/create')
+                     onCLose()
+                  }}
+               >
+                  <Box>
+                     <IoAddCircle size={30} color={WARNA.biruTua} />
+                  </Box>
+                  <Box>
+                     <Text c={WARNA.biruTua} ta='center'>Tambah Anggota</Text>
+                  </Box>
+               </Flex>
+
+               <Flex justify={'center'} align={'center'} direction={'column'} >
+                  <Box>
+                     <RiFilter2Line size={30} color={WARNA.biruTua} />
+                  </Box>
+                  <Box>
+                     <Text c={WARNA.biruTua} ta='center'>Filter</Text>
+                  </Box>
+               </Flex>
+            </SimpleGrid>
+         </Stack>
+      </Box>
+   );
+}

src/module/user/member/component/ui/navbar_create_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 NavbarCreateMember() {
+   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'}>Tambah Anggota</Text>
+               </Grid.Col>
+               <Grid.Col span="auto"></Grid.Col>
+            </Grid>
+         </LayoutNavbarHome>
+      </Box>
+   );
+}
+

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

@@ -0,0 +1,34 @@
+'use client'
+import { isDrawer, LayoutDrawer, LayoutIconBack, LayoutNavbarHome, WARNA } from "@/module/_global";
+import { useHookstate } from "@hookstate/core";
+import { ActionIcon, Box, Grid, Group, Text } from "@mantine/core";
+import { HiMenu } from "react-icons/hi";
+import DrawerListMember from "./drawer_list_member";
+
+export default function NavbarListMember() {
+   const openDrawer = useHookstate(isDrawer)
+   return (
+      <>
+         <LayoutNavbarHome>
+            <Grid justify='center' align='center'>
+               <Grid.Col span="auto">
+                  <LayoutIconBack back='/home' />
+               </Grid.Col>
+               <Grid.Col span={6}>
+                  <Text ta={'center'} fw={'bold'} c={'white'}>ANGGOTA</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)}>
+            <DrawerListMember />
+         </LayoutDrawer>
+      </>
+   )
+}

src/module/user/member/index.ts

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

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

@@ -0,0 +1,77 @@
+import { Box, Button, Stack, TextInput } from "@mantine/core";
+import NavbarCreateMember from "../component/ui/navbar_create_member";
+import { WARNA } from "@/module/_global";
+import { HiUser } from "react-icons/hi2";
+
+export default function ViewCreateMember() {
+   return (
+      <Box>
+         <NavbarCreateMember />
+         <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>
+   )
+}

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

@@ -0,0 +1,55 @@
+import { LayoutNavbarHome, LayoutIconBack, WARNA } from "@/module/_global";
+import { ActionIcon, Box, Group, Stack, Text } from "@mantine/core";
+import { BsInfo } from "react-icons/bs";
+import { FaSquarePhone } from "react-icons/fa6";
+import { HiUser } from "react-icons/hi2";
+import { MdEmail } from "react-icons/md";
+import { RiIdCardFill } from "react-icons/ri";
+
+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>
+         <Box p={20}>
+            <Group justify="space-between" grow py={5}>
+               <Group>
+                  <RiIdCardFill size={28} />
+                  <Text fz={18}>NIK</Text>
+               </Group>
+               <Text fz={18} fw={'bold'} ta={"right"}>513177782899</Text>
+            </Group>
+            <Group justify="space-between" grow py={5}>
+               <Group>
+                  <FaSquarePhone size={28} />
+                  <Text fz={18}>NoTelepon</Text>
+               </Group>
+               <Text fz={18} fw={'bold'} ta={"right"}>+62038939293</Text>
+            </Group>
+            <Group justify="space-between" grow py={5}>
+               <Group>
+                  <MdEmail size={28} />
+                  <Text fz={18}>Email</Text>
+               </Group>
+               <Text fz={18} fw={'bold'} ta={"right"}>marcel@gmail.com</Text>
+            </Group>
+
+         </Box>
+      </Box>
+   )
+}

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

@@ -0,0 +1,12 @@
+import { Box } from "@mantine/core";
+import NavbarListMember from "../component/ui/navbar_list_member";
+import ListMember from "../component/list_member";
+
+export default function ViewListMember() {
+   return (
+      <Box>
+         <NavbarListMember />
+         <ListMember />
+      </Box>
+   )
+}