feat : update member

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

@@ -1,20 +1,150 @@
 'use client'
-import { WARNA } from "@/module/_global";
+import { API_ADDRESS, WARNA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
 import { Box, Button, Select, Stack, TextInput } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
 import toast from "react-hot-toast";
 import { HiUser } from "react-icons/hi2";
 
-export default function EditMember() {
+type dataMember = {
-   const [isModal, setModal] = useState(false)
+   id: string;
+   nik: string;
+   name: string;
+   phone: string;
+   email: string;
+   gender: string;
+   idGroup: string;
+   idPosition: string;
+   idUserRole: string;
+}
 
-   function onTrue(val: boolean) {
+type dataGroup = {
-      if (val) {
+   id: string;
-         toast.success("Sukses! Data tersimpan");
+   name: string;
+};
+type dataPosition = {
+   id: string;
+   name: string;
+};
+
+type dataROleUser = {
+   id: string;
+   name: string;
+}
+
+export default function EditMember({ id }: { id: string | undefined }) {
+   const [isModal, setModal] = useState(false)
+   const router = useRouter()
+   const [listGroup, setListGorup] = useState<dataGroup[]>([])
+   const [listPosition, setListPosition] = useState<dataPosition[]>([])
+   const [listUserRole, setListUserRole] = useState<dataROleUser[]>([])
+   const [data, setData] = useState<dataMember>({
+      id: "",
+      nik: "",
+      name: "",
+      phone: "",
+      email: "",
+      gender: "",
+      idGroup: "",
+      idPosition: "",
+      idUserRole: "",
+   })
+   const [listData, setListData] = useState<dataMember>()
+
+   async function getAllGroup() {
+      try {
+         const res = await fetch(`${API_ADDRESS.apiGetAllGroup}&villageId=desa1&active=true`)
+         const data = await res.json()
+         setListGorup(data)
+      } catch (error) {
+         console.error(error)
       }
-      setModal(false)
    }
+
+   async function getOneData() {
+      try {
+         const res = await fetch(`${API_ADDRESS.apiGetOneUser}&userID=${id}`)
+         const data = await res.json()
+         setData(data)
+         getAllPosition(data?.idGroup)
+      } catch (error) {
+         console.error(error)
+      }
+   }
+
+   async function getAllPosition(val: any) {
+      try {
+         const res = await fetch(`${API_ADDRESS.apiGetAllPosition}&groupId=${val}&active=true`)
+         const data = await res.json()
+         setListPosition(data)
+
+      } catch (error) {
+         console.error(error)
+      }
+   }
+
+   async function getAllUserRole() {
+      try {
+         const res = await fetch(`${API_ADDRESS.apiGetRoleUser}`)
+         const data = await res.json()
+         setListUserRole(data)
+      } catch (error) {
+         console.error(error)
+      }
+   }
+
+   async function changeGrup(val: any) {
+      setListPosition([])
+      setData({
+         ...data,
+         idGroup: val,
+         idPosition: ""
+      })
+      getAllPosition(val)
+   }
+
+   useShallowEffect(() => {
+      getAllGroup()
+      getOneData()
+      getAllUserRole()
+   }, [])
+
+
+   async function onSubmit(val: boolean) {
+      try {
+         const res = await fetch(API_ADDRESS.apiUpdateUser, {
+            method: "POST",
+            headers: {
+               "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+               id: data.id,
+               nik: data.nik,
+               name: data.name,
+               phone: data.phone,
+               email: data.email,
+               gender: data.gender,
+               idGroup: data.idGroup,
+               idPosition: data.idPosition,
+               idUserRole: data.idUserRole
+            }),
+         })
+
+         const respon = await res.json()
+
+         if (res.status == 200) {
+            toast.success(respon.message)
+         } else {
+            toast.error(respon.message)
+         }
+         router.push('/member')
+      } catch (error) {
+         toast.error('Error');
+      }
+   }
+
    return (
       <Box>
          <Stack
@@ -39,7 +169,18 @@ export default function EditMember() {
                      borderColor: WARNA.biruTua,
                   },
                }}
-               data={['Dinas', 'Adat', 'LPD', 'PKK']}
+               data={
+                  listGroup
+                     ? listGroup.map((data) => ({
+                        value: data.id,
+                        label: data.name,
+                     }))
+                     : []
+               }
+               onChange={(val: any) => {
+                  changeGrup(val)
+               }}
+               value={data?.idGroup}
             />
             <Select
                placeholder="Pilih Jabatan" label="Jabatan" w={"100%"} size="md" required withAsterisk radius={30}
@@ -50,7 +191,36 @@ export default function EditMember() {
                      borderColor: WARNA.biruTua,
                   },
                }}
-               data={['Kepala', 'Sekretaris', 'Bendahara', 'Anggota']}
+               data={
+                  listPosition
+                     ? listPosition.map((data) => ({
+                        value: data.id,
+                        label: data.name,
+                     }))
+                     : []
+               }
+               onChange={(val: any) => setData({ ...data, idPosition: val })}
+               value={(data?.idPosition == "") ? null : data.idPosition}
+            />
+            <Select
+               placeholder="Pilih Role" label="User Role" w={"100%"} size="md" required withAsterisk radius={30}
+               styles={{
+                  input: {
+                     color: WARNA.biruTua,
+                     borderRadius: WARNA.biruTua,
+                     borderColor: WARNA.biruTua,
+                  },
+               }}
+               data={
+                  listUserRole
+                     ? listUserRole.map((data) => ({
+                        value: data.id,
+                        label: data.name,
+                     }))
+                     : []
+               }
+               onChange={(val: any) => setData({ ...data, idUserRole: val })}
+               value={data?.idUserRole}
             />
             <TextInput
                size="md" type="number" radius={30} placeholder="NIK" withAsterisk label="NIK" w={"100%"}
@@ -61,6 +231,8 @@ export default function EditMember() {
                      borderColor: WARNA.biruTua,
                   },
                }}
+               onChange={(e) => setData({ ...data, nik: e.target.value })}
+               value={data.nik}
             />
             <TextInput
                size="md" type="text" radius={30} placeholder="Nama" withAsterisk label="Nama" w={"100%"}
@@ -71,6 +243,8 @@ export default function EditMember() {
                      borderColor: WARNA.biruTua,
                   },
                }}
+               onChange={(e) => setData({ ...data, name: e.target.value })}
+               value={data.name}
             />
             <TextInput
                size="md" type="email" radius={30} placeholder="Email" withAsterisk label="Email" w={"100%"}
@@ -81,6 +255,8 @@ export default function EditMember() {
                      borderColor: WARNA.biruTua,
                   },
                }}
+               onChange={(e) => setData({ ...data, email: e.target.value })}
+               value={data.email}
             />
             <TextInput
                size="md" type="number" radius={30} placeholder="+62...." withAsterisk label="Nomor Telepon" w={"100%"}
@@ -91,6 +267,8 @@ export default function EditMember() {
                      borderColor: WARNA.biruTua,
                   },
                }}
+               onChange={(e) => setData({ ...data, phone: e.target.value })}
+               value={data.phone}
             />
             <Select
                placeholder="Pilih Gender" label="Gender" w={"100%"} size="md" required withAsterisk radius={30}
@@ -101,7 +279,20 @@ export default function EditMember() {
                      borderColor: WARNA.biruTua,
                   },
                }}
-               data={['Laki-laki', 'Perempuan']}
+               data={
+                  [
+                     {
+                        value: "M",
+                        label: "Laki-laki"
+                     },
+                     {
+                        value: "F",
+                        label: "Perempuan"
+                     }
+                  ]
+               }
+               onChange={(val: any) => setData({ ...data, gender: val })}
+               value={data.gender}
             />
          </Stack>
          <Box mt={30} mx={20} pb={20}>
@@ -118,7 +309,12 @@ export default function EditMember() {
          </Box>
          <LayoutModal opened={isModal} onClose={() => setModal(false)}
             description="Apakah Anda yakin ingin mengubah data?"
-            onYes={(val) => { onTrue(val) }} />
+            onYes={(val) => {
+               if (val)
+                  onSubmit(val)
+               setModal(false)
+            }
+            } />
       </Box>
    )
 }

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

@@ -1,5 +1,5 @@
 'use client'
-import { WARNA } from "@/module/_global";
+import { API_ADDRESS, WARNA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
 import { Box, Flex, SimpleGrid, Stack, Text } from "@mantine/core";
 import { useRouter } from "next/navigation";
@@ -8,17 +8,33 @@ import toast from "react-hot-toast";
 import { FaPencil, FaToggleOff } from "react-icons/fa6";
 import { ImUserCheck } from "react-icons/im";
 
-export default function DrawerDetailMember({ onDeleted }: { onDeleted: (val: boolean) => void }) {
+export default function DrawerDetailMember({ onDeleted, id }: { onDeleted: (val: boolean) => void, id: string | undefined }) {
    const router = useRouter()
    const [isModal, setModal] = useState(false)
 
-   function onTrue(val: boolean) {
+   async function nonActive(val: boolean) {
-      if (val) {
+      // try {
-         toast.success('Sukses! data tersimpan')
+      //    if (val) {
-         onDeleted(true)
+      //       const res = await fetch(API_ADDRESS.apiDeleteUser, {
-      }
+      //          method: 'POST',
-
+      //          headers: {
-      setModal(false)
+      //             'Content-Type': 'application/json',
+      //          },
+      //          body: JSON.stringify({ id: id}),
+      //       })
+      //       if (res.status == 200) {
+      //          onDeleted(true);
+      //       } else {
+      //          onDeleted(false);
+      //       }
+      //    }
+      //    router.push('/member')
+      //    setModal(false)
+      // } catch (error) {
+      //    console.error(error)
+      //    setModal(false);
+      //    toast.error("Terjadi kesalahan");
+      // }
    }
 
    return (
@@ -44,7 +60,7 @@ export default function DrawerDetailMember({ onDeleted }: { onDeleted: (val: boo
                <Flex justify={'center'} align={'center'} direction={'column'}
                   style={{ cursor: 'pointer' }}
                   onClick={() => {
-                     router.push('/member/edit/123')
+                     router.push(`/member/edit/${id}`)
                   }}
                >
                   <Box>
@@ -58,7 +74,7 @@ export default function DrawerDetailMember({ onDeleted }: { onDeleted: (val: boo
          </Stack>
          <LayoutModal opened={isModal} onClose={() => setModal(false)}
             description="Apakah Anda yakin ingin mengubah status aktifasi anggota?"
-            onYes={(val) => { onTrue(val) }} />
+            onYes={(val) => { nonActive(val) }} />
       </Box>
    )
 }

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

@@ -1,37 +1,110 @@
 'use client'
-import { LayoutNavbarHome, LayoutIconBack, WARNA, LayoutDrawer } from "@/module/_global";
+import { LayoutNavbarHome, LayoutIconBack, WARNA, LayoutDrawer, API_ADDRESS } from "@/module/_global";
 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";
 import { useState } from "react";
+import { RiIdCardFill } from "react-icons/ri";
+import { FaSquarePhone } from "react-icons/fa6";
+import { MdEmail } from "react-icons/md";
+import { IoMaleFemale } from "react-icons/io5";
+import { useShallowEffect } from "@mantine/hooks";
+import Link from "next/link";
 
-export default function NavbarDetailMember() {
+interface IdMember {
+   id: string
+}
+
+interface DataMember {
+   id: string
+   name: string
+   nik: string
+   email: string
+   phone: string
+   gender: string
+   position: string
+   group: string
+}
+
+export default function NavbarDetailMember({ id }: IdMember) {
    const [isOpen, setOpen] = useState(false)
+   const [dataOne, setDataOne] = useState<DataMember>()
+
+   useShallowEffect(() => {
+      featchGetOne()
+   }, [])
+
+
+   async function featchGetOne() {
+      try {
+         const response = await fetch(API_ADDRESS.apiGetOneUser + `&userID=${id}`)
+         const data = await response.json()
+         setDataOne(data)
+      } catch (error) {
+         console.error(error)
+      }
+   }
+
+
    return (
       <Box>
-         <LayoutNavbarHome>
+         <Box>
-            <Group justify="space-between">
+            <LayoutNavbarHome>
-               <LayoutIconBack />
+               <Group justify="space-between">
-               <ActionIcon onClick={() => setOpen(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Info">
+                  <LayoutIconBack />
-                  <HiMenu size={20} color='white' />
+                  <ActionIcon onClick={() => setOpen(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Info">
-               </ActionIcon>
+                     <HiMenu size={20} color='white' />
-            </Group>
+                  </ActionIcon>
-            <Stack
+               </Group>
-               align="center"
+               <Stack
-               justify="center"
+                  align="center"
-               gap="xs"
+                  justify="center"
-            >
+                  gap="xs"
-               <Center>
+               >
-                  <Avatar src={'https://i.pravatar.cc/1000?img=25'} alt="it's me" size="xl" />
+                  <Center>
-               </Center>
+                     <Avatar src={'https://i.pravatar.cc/1000?img=25'} alt="it's me" size="xl" />
-               <Text c={'white'} fw={'bold'} fz={25}>Fibra Marcell</Text>
+                  </Center>
-               <Text c={'white'} fw={'lighter'} fz={15}>Dinas - Kepala Urusan Pengembangan</Text>
+                  <Text c={'white'} fw={'bold'} fz={25}>{dataOne?.name}</Text>
-            </Stack>
+                  <Text c={'white'} fw={'lighter'} fz={15}>{dataOne?.group} - {dataOne?.position}</Text>
-         </LayoutNavbarHome>
+               </Stack>
-         <LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>
+            </LayoutNavbarHome>
-            <DrawerDetailMember onDeleted={() => setOpen(false)} />
+            <Box p={20}>
-         </LayoutDrawer>
+               <Group justify="space-between" grow py={5}>
+                  <Group>
+                     <RiIdCardFill size={28} />
+                     <Text fz={18}>NIK</Text>
+                  </Group>
+                  <Text fz={18} fw={'bold'} ta={"right"}>{dataOne?.nik}</Text>
+               </Group>
+               <Group justify="space-between" grow py={5}>
+                  <Group>
+                     <FaSquarePhone size={28} />
+                     <Text fz={18}>No Telepon</Text>
+                  </Group>
+                  <Text fz={18} fw={'bold'} ta={"right"}>{dataOne?.phone}</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"}>{dataOne?.email}</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"}>
+                     {dataOne?.gender === 'M' ? 'Laki-laki' : dataOne?.gender === 'F' ? 'Perempuan' : ''}
+                  </Text>
+               </Group>
+            </Box>
+            <LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>
+               <DrawerDetailMember id={dataOne?.id} onDeleted={() => setOpen(false)} />
+            </LayoutDrawer>
+         </Box>
       </Box>
    )
 } 

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

@@ -33,6 +33,7 @@ export default function TabListMember({ status }: { status: boolean }) {
          setDataMember(data)
       } catch (error) {
          console.error(error)
+         throw new Error("Error")
       } finally {
          setLoading(false)
       }

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

@@ -8,37 +8,7 @@ import { IoMaleFemale } from "react-icons/io5";
 export default function ViewDetailMember({ data }: { data: string }) {
    return (
       <Box>
-         <NavbarDetailMember />
+         <NavbarDetailMember id={data} />
-         <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}>No Telepon</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>
-            <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>
    )
 }

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

@@ -4,12 +4,11 @@ import { HiUser } from "react-icons/hi2";
 import NavbarEditMember from "../component/ui/navbar_edit_member";
 import EditMember from "../component/edit_member";
 
-export default function ViewEditMember() {
+export default function ViewEditMember({data}: {data: string}) {
    return (
       <Box>
-         {/* <NavbarEditMember /> */}
          <LayoutNavbarNew back="" title="Edit Anggota" menu={<></>} />
-         <EditMember />
+         <EditMember id={data} />
       </Box>
    )
 }