upd: member

Deskripsi:
- tab status member
- edit form
- informasi gender

No Issues

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

@@ -1,7 +1,7 @@
 'use client'
 import { WARNA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
-import { Box, Button, Stack, TextInput } from "@mantine/core";
+import { Box, Button, Select, Stack, TextInput } from "@mantine/core";
 import { useState } from "react";
 import toast from "react-hot-toast";
 import { HiUser } from "react-icons/hi2";
@@ -30,6 +30,28 @@ export default function EditMember() {
                }}>
                <HiUser size={100} color={WARNA.bgWhite} />
             </Box>
+            <Select
+               placeholder="Pilih Grup" label="Grup" w={"100%"} size="md" required withAsterisk radius={30}
+               styles={{
+                  input: {
+                     color: WARNA.biruTua,
+                     borderRadius: WARNA.biruTua,
+                     borderColor: WARNA.biruTua,
+                  },
+               }}
+               data={['Dinas', 'Adat', 'LPD', 'PKK']}
+            />
+            <Select
+               placeholder="Pilih Jabatan" label="Jabatan" w={"100%"} size="md" required withAsterisk radius={30}
+               styles={{
+                  input: {
+                     color: WARNA.biruTua,
+                     borderRadius: WARNA.biruTua,
+                     borderColor: WARNA.biruTua,
+                  },
+               }}
+               data={['Kepala', 'Sekretaris', 'Bendahara', 'Anggota']}
+            />
             <TextInput
                size="md" type="number" radius={30} placeholder="NIK" withAsterisk label="NIK" w={"100%"}
                styles={{
@@ -70,8 +92,19 @@ export default function EditMember() {
                   },
                }}
             />
+            <Select
+               placeholder="Pilih Gender" label="Gender" w={"100%"} size="md" required withAsterisk radius={30}
+               styles={{
+                  input: {
+                     color: WARNA.biruTua,
+                     borderRadius: WARNA.biruTua,
+                     borderColor: WARNA.biruTua,
+                  },
+               }}
+               data={['Laki-laki', 'Perempuan']}
+            />
          </Stack>
-         <Box mt={30} mx={20}>
+         <Box mt={30} mx={20} pb={20}>
             <Button
                c={"white"}
                bg={WARNA.biruTua}

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

@@ -1,100 +1,54 @@
 'use client'
 import { WARNA } from '@/module/_global';
-import { ActionIcon, Box, Group, Text, TextInput } from '@mantine/core';
+import { Box, rem, Tabs, 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',
-      grup: 'Dinas'
-   },
-   {
-      id: 2,
-      name: 'Fibra Marcell',
-      desc: 'Kasi Kesejahteraan',
-      grup: 'Dinas'
-   },
-   {
-      id: 3,
-      name: 'Burhan',
-      desc: 'Kasi Kesejahteraan',
-      grup: 'Dinas'
-   },
-   {
-      id: 4,
-      name: 'Chandra',
-      desc: 'Kasi Kesejahteraan',
-      grup: 'Dinas'
-   },
-   {
-      id: 5,
-      name: 'Ayu',
-      desc: 'Kasi Kesejahteraan',
-      grup: 'PKK'
-   },
-   {
-      id: 6,
-      name: 'Heriawan',
-      desc: 'Kasi Kesejahteraan',
-      grup: 'Karang Taruna'
-   },
-   {
-      id: 7,
-      name: 'Jinan',
-      desc: 'Kasi Kesejahteraan',
-      grup: 'Dinas'
-   },
-   {
-      id: 8,
-      name: 'Rizal',
-      desc: 'Kasi Kesejahteraan',
-      grup: 'LPD'
-   },
-]
+import { IoMdCheckmarkCircleOutline } from 'react-icons/io';
+import { IoCloseCircleOutline } from 'react-icons/io5';
+import TabListMember from './ui/tab_list_member';
 
 export default function ListMember() {
-   const router = useRouter()
+   const iconStyle = { width: rem(20), height: rem(20) };
+
    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>
-                        <Text fw={'lighter'} fz={12}>{v.grup + ' - ' + v.desc}</Text>
-                     </Box>
-                  </Group>
-               </Box>
-            )
-         })}
+         <Tabs variant="pills" color='#FF9861' radius="xl" defaultValue="aktif">
+            <Tabs.List bg={"white"} style={{
+               border: `1px solid ${"#EDEDED"}`,
+               padding: 5,
+               borderRadius: 100
+            }}>
+               <Tabs.Tab value="aktif" w={"45%"} leftSection={<IoMdCheckmarkCircleOutline style={iconStyle} />}>
+                  Aktif
+               </Tabs.Tab>
+               <Tabs.Tab value="tidak-aktif" w={"53%"} leftSection={<IoCloseCircleOutline style={iconStyle} />}>
+                  Tidak Aktif
+               </Tabs.Tab>
+            </Tabs.List>
+
+            <TextInput
+               styles={{
+                  input: {
+                     color: WARNA.biruTua,
+                     borderRadius: WARNA.biruTua,
+                     borderColor: WARNA.biruTua,
+                  },
+               }}
+               size="md"
+               radius={30}
+               leftSection={<HiMagnifyingGlass size={20} />}
+               placeholder="Pencarian" 
+               my={10}
+            />
+
+            <Tabs.Panel value="aktif">
+               <TabListMember />
+            </Tabs.Panel>
+
+            <Tabs.Panel value="tidak-aktif">
+               <TabListMember />
+            </Tabs.Panel>
+         </Tabs>
       </Box>
    );
 }

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

@@ -5,7 +5,7 @@ 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 { FaPencil, FaToggleOff } from "react-icons/fa6";
 import { ImUserCheck } from "react-icons/im";
 
 export default function DrawerDetailMember({ onDeleted }: { onDeleted: (val: boolean) => void }) {
@@ -34,10 +34,10 @@ export default function DrawerDetailMember({ onDeleted }: { onDeleted: (val: boo
                   }}
                >
                   <Box>
-                     <ImUserCheck size={30} color={WARNA.biruTua} />
+                     <FaToggleOff size={30} color={WARNA.biruTua} />
                   </Box>
                   <Box>
-                     <Text c={WARNA.biruTua} ta='center'>Status</Text>
+                     <Text c={WARNA.biruTua} ta='center'>Non Aktifkan</Text>
                   </Box>
                </Flex>
 

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

@@ -1,6 +1,6 @@
 'use client'
 import { LayoutNavbarHome, LayoutIconBack, WARNA, LayoutDrawer } from "@/module/_global";
-import { Box, Group, ActionIcon, Stack, Text } from "@mantine/core";
+import { Box, Group, ActionIcon, Stack, Text, Center, Avatar } from "@mantine/core";
 import { HiMenu } from "react-icons/hi";
 import { HiUser } from "react-icons/hi2";
 import DrawerDetailMember from "./drawer_detail_member";
@@ -22,9 +22,11 @@ export default function NavbarDetailMember() {
                justify="center"
                gap="xs"
             >
-               <HiUser size={100} color='white' />
+               <Center>
+                  <Avatar src={'https://i.pravatar.cc/1000?img=25'} alt="it's me" size="xl" />
+               </Center>
                <Text c={'white'} fw={'bold'} fz={25}>Fibra Marcell</Text>
-               <Text c={'white'} fw={'lighter'} fz={15}>Kepala Urusan Pengembangan</Text>
+               <Text c={'white'} fw={'lighter'} fz={15}>Dinas - Kepala Urusan Pengembangan</Text>
             </Stack>
          </LayoutNavbarHome>
          <LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>

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

@@ -0,0 +1,86 @@
+import { WARNA } from "@/module/_global"
+import { Box, Group, ActionIcon, Text } from "@mantine/core"
+import { useRouter } from "next/navigation"
+import { HiMiniUser } from "react-icons/hi2"
+
+const dataMember = [
+   {
+      id: 1,
+      name: 'Ali akbar',
+      desc: 'Perbekel',
+      grup: 'Dinas'
+   },
+   {
+      id: 2,
+      name: 'Fibra Marcell',
+      desc: 'Kasi Kesejahteraan',
+      grup: 'Dinas'
+   },
+   {
+      id: 3,
+      name: 'Burhan',
+      desc: 'Kasi Kesejahteraan',
+      grup: 'Dinas'
+   },
+   {
+      id: 4,
+      name: 'Chandra',
+      desc: 'Kasi Kesejahteraan',
+      grup: 'Dinas'
+   },
+   {
+      id: 5,
+      name: 'Ayu',
+      desc: 'Kasi Kesejahteraan',
+      grup: 'PKK'
+   },
+   {
+      id: 6,
+      name: 'Heriawan',
+      desc: 'Kasi Kesejahteraan',
+      grup: 'Karang Taruna'
+   },
+   {
+      id: 7,
+      name: 'Jinan',
+      desc: 'Kasi Kesejahteraan',
+      grup: 'Dinas'
+   },
+   {
+      id: 8,
+      name: 'Rizal',
+      desc: 'Kasi Kesejahteraan',
+      grup: 'LPD'
+   },
+]
+
+export default function TabListMember() {
+   const router = useRouter()
+
+   return (
+      <>
+         {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>
+                        <Text fw={'lighter'} fz={12}>{v.grup + ' - ' + v.desc}</Text>
+                     </Box>
+                  </Group>
+               </Box>
+            )
+         })}
+      </>
+   )
+}

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

@@ -3,6 +3,7 @@ import { FaSquarePhone } from "react-icons/fa6";
 import { MdEmail } from "react-icons/md";
 import { RiIdCardFill } from "react-icons/ri";
 import NavbarDetailMember from "../component/ui/navbar_detail_member";
+import { IoMaleFemale } from "react-icons/io5";
 
 export default function ViewDetailMember({ data }: { data: string }) {
    return (
@@ -19,7 +20,7 @@ export default function ViewDetailMember({ data }: { data: string }) {
             <Group justify="space-between" grow py={5}>
                <Group>
                   <FaSquarePhone size={28} />
-                  <Text fz={18}>NoTelepon</Text>
+                  <Text fz={18}>No Telepon</Text>
                </Group>
                <Text fz={18} fw={'bold'} ta={"right"}>+62038939293</Text>
             </Group>
@@ -30,6 +31,13 @@ export default function ViewDetailMember({ data }: { data: string }) {
                </Group>
                <Text fz={18} fw={'bold'} ta={"right"}>marcel@gmail.com</Text>
             </Group>
+            <Group justify="space-between" grow py={5}>
+               <Group>
+                  <IoMaleFemale size={28} />
+                  <Text fz={18}>Gender</Text>
+               </Group>
+               <Text fz={18} fw={'bold'} ta={"right"}>Laki-laki</Text>
+            </Group>
          </Box>
       </Box>
    )