feat : update member

Deskripsi:
- update api member
- update type member
- update list member
- update create member
- update edit member
- update active and non active

No Issue

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

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

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

@@ -1,8 +1,13 @@
-import { ViewCreateMember } from "@/module/user/member";
+import { LayoutNavbarNew } from "@/module/_global";
+import { CreateMember } from "@/module/user/member";
+import { Box } from "@mantine/core";
 
 function Page() {
   return (
-      <ViewCreateMember />
+    <Box>
+      <LayoutNavbarNew back="" title="Tambah Anggota" menu={<></>} />
+      <CreateMember />
+    </Box>
   );
 }
 

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

@@ -1,9 +1,14 @@
-import { ViewEditMember } from "@/module/user/member";
+import { LayoutNavbarNew } from "@/module/_global";
+import { EditMember } from "@/module/user/member";
+import { Box } from "@mantine/core";
 
 function Page({ params }: { params: { id: string } }) {
   return (
-      <ViewEditMember data={params.id}/>
+    <Box>
-   )
+      <LayoutNavbarNew back="" title="Edit Anggota" menu={<></>} />
+      <EditMember id={params.id} />
+    </Box>
+  );
 }
 
 export default Page;

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

@@ -1,13 +1,16 @@
 import { ViewFilter } from "@/module/_global";
-import { ViewListMember } from "@/module/user/member";
+import { ListMember, NavbarListMember } from "@/module/user/member";
+import { Box } from "@mantine/core";
 
 function Page({ searchParams }: { searchParams: { page: string } }) {
-   if (searchParams.page == "filter")
+  if (searchParams.page == "filter") return <ViewFilter linkFilter="member" />;
-      return <ViewFilter linkFilter="member"/>
 
   return (
-      <ViewListMember />
+    <Box>
-   )
+      <NavbarListMember />
+      <ListMember />
+    </Box>
+  );
 }
 
 export default Page;

src/app/api/role-user/route.ts

@@ -0,0 +1,23 @@
+import { prisma } from "@/module/_global";
+import { funGetUserByCookies } from "@/module/auth";
+import { NextResponse } from "next/server";
+
+export async function GET(request: Request) {
+    try {
+        const user = await funGetUserByCookies()
+        if (user.id == undefined) {
+            return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
+        }
+        const res = await prisma.userRole.findMany({
+            select: {
+                id: true,
+                name: true,
+            },
+        });
+
+        return NextResponse.json({ success: true, message: "Berhasil role user", data: res, }, { status: 200 });
+    } catch (error) {
+        console.error(error);
+        return NextResponse.json({ success: false, message: "Gagal mendapatkan role user, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
+    }
+}

src/app/api/user/[id]/route.ts

@@ -61,7 +61,7 @@ export async function GET(request: Request, context: { params: { id: string } })
             {
                 success: true,
                 message: "Berhasil mendapatkan anggota",
-                omitData,
+                data: omitData,
             },
             { status: 200 }
         );

src/app/api/user/route.ts

@@ -54,8 +54,9 @@ export async function GET(request: Request) {
         });
 
         const allData = users.map((v: any) => ({
-            ..._.omit(v, ["Group"]),
+            ..._.omit(v, ["Group", "Position" ]),
-            group: v.Group.name
+          group: v.Group.name,
+          position: v.Position.name
         }))
 
         return NextResponse.json({ success: true, message: "Berhasil member", data: allData, }, { status: 200 });

src/module/announcement/api/get/getOneAnnouncement.ts

@@ -37,7 +37,6 @@ export async function getOneAnnouncement(req: NextRequest) {
       group: v.Group.name,
     }))
 
-    console.log(allAnnouncementMember)
 
     return Response.json({ announcement, allAnnouncementMember });
   } catch (error) {

src/module/announcement/api/post/createAnnouncement.ts

@@ -29,7 +29,6 @@ export async function createAnnouncement(req: NextRequest) {
     const announcementMember = await prisma.announcementMember.createMany({
       data: dataMember,
     });
-    console.log(announcementMember)
 
     return Response.json({
       announcement: announcement,

src/module/user/api/get/getOneUser.ts

@@ -50,7 +50,6 @@ export async function getOneUser(req: NextRequest) {
     const result = { ...userData, group, position, idUserRole };
 
     const omitData = _.omit(result, ["Group", "Position", "UserRole"])
-    console.log(omitData)
     return Response.json(omitData);
   } catch (error) {
     console.error(error);

src/module/user/member/index.ts

@@ -1,9 +1,11 @@
-import ViewCreateMember from "./ui/view_create_member";
+import CreateMember from "./ui/create_member";
-import ViewDetailMember from "./ui/view_detail_member";
+import EditMember from "./ui/edit_member";
-import ViewEditMember from "./ui/view_edit_member";
+import ListMember from "./ui/list_member";
-import ViewListMember from "./ui/view_list_member";
+import NavbarDetailMember from "./ui/navbar_detail_member";
+import NavbarListMember from "./ui/navbar_list_member";
 
-export { ViewListMember }
+export { NavbarListMember }
-export { ViewCreateMember }
+export { ListMember }
-export { ViewDetailMember }
+export { CreateMember }
-export { ViewEditMember }
+export { NavbarDetailMember }
+export {EditMember}

src/module/user/member/lib/api_member.ts

@@ -1,30 +1,34 @@
 import { IEditDataMember, IFormMember, IStatusmember } from "./type_member";
 
 export const funGetAllmember = async (path?: string) => {
-    const response = await fetch(`/api/member${(path) ? path : ''}`, { next: { tags: ['member'] } });
+    const response = await fetch(`/api/user${(path) ? path : ''}`, { next: { tags: ['member'] } });
     return await response.json().catch(() => null);
 }
 
+export const funGetRoleUser= async (path?: string) => {
+    const response = await fetch(`/api/role-user${(path) ? path : ''}`, { next: { tags: ['member'] } });
+    return await response.json().catch(() => null);
+}
 
 export const funGetOneMember = async (path: string) => {
-    const response = await fetch(`/api/member/${path}`);
+    const response = await fetch(`/api/user/${path}`);
     return await response.json().catch(() => null);
 }
 
 export const funCreateMember = async (data: IFormMember) => {
 
     if (data.name.length < 3)
-        return { success: false, message: 'Minimal 3 karakter' }
+        return { success: false, message: 'Name minimal 3 karakter' }
     if (data.email.length < 3)
-        return { success: false, message: 'Minimal 3 karakter' }
+        return { success: false, message: 'Email minimal 3 karakter' }
 
     if (data.phone.length < 10)
-        return { success: false, message: 'Minimal 10 karakter' }
+        return { success: false, message: 'Phone minimal 10 karakter' }
 
-    if (data.nik.length == 16)
+    if (data.nik.length < 16)
         return { success: false, message: 'NIK harus 16 karakter' }
 
-    const response = await fetch("/api/member", {
+    const response = await fetch("/api/user", {
         method: "POST",
         headers: {
             "Content-Type": "application/json",
@@ -37,7 +41,7 @@ export const funCreateMember = async (data: IFormMember) => {
 
 export const funEditStatusMember = async (path: string, data: IStatusmember) => {
 
-    const response = await fetch(`/api/member/${path}`, {
+    const response = await fetch(`/api/user/${path}`, {
         method: "DELETE",
         headers: {
             "Content-Type": "application/json",
@@ -53,7 +57,7 @@ export const funEditMember = async (path: string, data: IEditDataMember) => {
     if (data.name.length < 3)
         return { success: false, message: 'Minimal 3 karakter' }
 
-    const response = await fetch(`/api/member/${path}`, {
+    const response = await fetch(`/api/user/${path}`, {
         method: "PUT",
         headers: {
             "Content-Type": "application/json",

src/module/user/member/lib/type_member.ts

@@ -1,13 +1,13 @@
 export interface IListMember {
     id: string,
-    isActive: boolean
-    nik: string,
     name: string,
-    phone: string,
+    nik: string,
     email: string,
+    phone: string,
     gender: string,
-    group: string,
     position: string,
+    group: string,
+    isActive: boolean
 }
 
 export interface IFormMember  {
@@ -47,3 +47,7 @@ export interface IEditDataMember  {
     id: string;
     name: string;
  }
+
+export interface IMember{
+   id: string
+ }

src/module/user/member/ui/create_member.tsx

@@ -1,4 +1,4 @@
-'use client'
+"use client";
 import { API_ADDRESS, WARNA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
 import { funGetAllGroup, IDataGroup } from "@/module/group";
@@ -7,24 +7,16 @@ import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import { HiUser } from "react-icons/hi2";
-
+import { IDataPositionMember, IDataROleMember } from "../lib/type_member";
-
+import { funGetAllPosition } from "@/module/position/lib/api_position";
-type dataPosition = {
+import { funCreateMember, funGetRoleUser } from "../lib/api_member";
-   id: string;
-   name: string;
-};
-
-type dataROleUser = {
-   id: string;
-   name: string;
-}
 
 export default function CreateMember() {
-   const router = useRouter()
+  const router = useRouter();
-   const [isModal, setModal] = useState(false)
+  const [isModal, setModal] = useState(false);
-   const [listGroup, setListGorup] = useState<IDataGroup[]>([])
+  const [listGroup, setListGorup] = useState<IDataGroup[]>([]);
-   const [listPosition, setListPosition] = useState<dataPosition[]>([])
+  const [listPosition, setListPosition] = useState<IDataPositionMember[]>([]);
-   const [listUserRole, setListUserRole] = useState<dataROleUser[]>([])
+  const [listUserRole, setListUserRole] = useState<IDataROleMember[]>([]);
 
   const [listData, setListData] = useState({
     nik: "",
@@ -35,19 +27,18 @@ export default function CreateMember() {
     idGroup: "",
     idPosition: "",
     idUserRole: "",
-   })
+  });
-
 
   async function getAllGroup() {
     try {
-         const response = await funGetAllGroup('?active=true')
+      const response = await funGetAllGroup("?active=true");
       if (response.success) {
         setListGorup(response.data);
       } else {
         toast.error(response.message);
       }
     } catch (error) {
-         console.error(error)
+      console.error(error);
       toast.error("Gagal mendapatkan grup, coba lagi nanti");
     }
   }
@@ -55,50 +46,41 @@ export default function CreateMember() {
   async function getAllPosition(val: any) {
     try {
       if (val != null) {
-            const res = await fetch(`${API_ADDRESS.apiGetAllPosition}&groupId=${val}&active=true`)
+        const res = await funGetAllPosition(
-            const data = await res.json()
+          "?active=true" + "&group=" + `${val}`
-            setListPosition(data)
+        );
+        setListPosition(res.data);
       } else {
-            setListPosition([])
+        setListPosition([]);
       }
-
     } catch (error) {
-         console.error(error)
+      console.error(error);
     }
   }
 
   async function getAllUserRole() {
     try {
-         const res = await fetch(`${API_ADDRESS.apiGetRoleUser}`)
+      const res = await funGetRoleUser();
-         const data = await res.json()
+      setListUserRole(res.data);
-         setListUserRole(data)
     } catch (error) {
-         console.error(error)
+      console.error(error);
     }
   }
 
-
   async function changeGrup(val: any) {
-      setListPosition([])
+    setListPosition([]);
     setListData({
       ...listData,
       idGroup: val,
-         idPosition: ""
+      idPosition: "",
-      })
+    });
-
-      getAllPosition(val)
 
+    getAllPosition(val);
   }
 
-
   async function onSubmit(val: boolean) {
     try {
-         const res = await fetch(API_ADDRESS.apiCreateUser, {
+      const res = await funCreateMember({
-            method: 'POST',
-            headers: {
-               'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
         nik: listData.nik,
         name: listData.name,
         phone: listData.phone,
@@ -106,48 +88,50 @@ export default function CreateMember() {
         gender: listData.gender,
         idGroup: listData.idGroup,
         idPosition: listData.idPosition,
-               idUserRole: listData.idUserRole
+        idUserRole: listData.idUserRole,
-            })
+      });
-         })
-         toast.success("Sukses! Data tersimpan");
-         setModal(false)
-         router.push('/member')
-      } catch (error) {
-         toast.error('Error')
-         toast.error("Sukses! Data tersimpan");
-      }
-   }
 
+      if (res.success) {
+        toast.success(res.message);
+        setModal(false);
+        router.push("/member?active=true");
+      } else {
+        toast.error(res.message);
+      }
+    } catch (error) {
+      toast.error("Error");
+    } finally {
+      setModal(false);
+    }
+  }
 
   useEffect(() => {
-      getAllGroup()
+    getAllGroup();
-      getAllUserRole()
+    getAllUserRole();
-   }, [])
+  }, []);
 
-   function onTrue(val: boolean) {
-      if (val) {
-         toast.success("Sukses! Data tersimpan");
-      }
-      setModal(false)
-   }
 
   return (
     <Box>
-         <Stack
+      <Stack align="center" justify="center" gap="xs" pt={30} px={20}>
-            align="center"
+        <Box
-            justify="center"
+          bg={WARNA.biruTua}
-            gap="xs"
+          py={30}
-            pt={30}
+          px={50}
-            px={20}
-         >
-            <Box bg={WARNA.biruTua} py={30} px={50}
           style={{
             borderRadius: 10,
-               }}>
+          }}
+        >
           <HiUser size={100} color={WARNA.bgWhite} />
         </Box>
         <Select
-               placeholder="Pilih Grup" label="Grup" w={"100%"} size="md" required withAsterisk radius={30}
+          placeholder="Pilih Grup"
+          label="Grup"
+          w={"100%"}
+          size="md"
+          required
+          withAsterisk
+          radius={30}
           styles={{
             input: {
               color: WARNA.biruTua,
@@ -164,11 +148,17 @@ export default function CreateMember() {
               : []
           }
           onChange={(val: any) => {
-                  changeGrup(val)
+            changeGrup(val);
           }}
         />
         <Select
-               placeholder="Pilih Jabatan" label="Jabatan" w={"100%"} size="md" required withAsterisk radius={30}
+          placeholder="Pilih Jabatan"
+          label="Jabatan"
+          w={"100%"}
+          size="md"
+          required
+          withAsterisk
+          radius={30}
           styles={{
             input: {
               color: WARNA.biruTua,
@@ -184,14 +174,22 @@ export default function CreateMember() {
                 }))
               : []
           }
-               onChange={(val: any) => setListData({
+          onChange={(val: any) =>
+            setListData({
               ...listData,
-                  idPosition: val
+              idPosition: val,
-               })}
+            })
-               value={(listData.idPosition == "") ? null : listData.idPosition}
+          }
+          value={listData.idPosition == "" ? null : listData.idPosition}
         />
         <Select
-               placeholder="Pilih Role" label="User Role" w={"100%"} size="md" required withAsterisk radius={30}
+          placeholder="Pilih Role"
+          label="User Role"
+          w={"100%"}
+          size="md"
+          required
+          withAsterisk
+          radius={30}
           styles={{
             input: {
               color: WARNA.biruTua,
@@ -207,13 +205,21 @@ export default function CreateMember() {
                 }))
               : []
           }
-               onChange={(val: any) => setListData({
+          onChange={(val: any) =>
+            setListData({
               ...listData,
-                  idUserRole: val
+              idUserRole: val,
-               })}
+            })
+          }
         />
         <TextInput
-               size="md" type="number" radius={30} placeholder="NIK" withAsterisk label="NIK" w={"100%"}
+          size="md"
+          type="number"
+          radius={30}
+          placeholder="NIK"
+          withAsterisk
+          label="NIK"
+          w={"100%"}
           styles={{
             input: {
               color: WARNA.biruTua,
@@ -221,13 +227,21 @@ export default function CreateMember() {
               borderColor: WARNA.biruTua,
             },
           }}
-               onChange={(event: any) => setListData({
+          onChange={(event: any) =>
+            setListData({
               ...listData,
-                  nik: event.target.value
+              nik: event.target.value,
-               })}
+            })
+          }
         />
         <TextInput
-               size="md" type="text" radius={30} placeholder="Nama" withAsterisk label="Nama" w={"100%"}
+          size="md"
+          type="text"
+          radius={30}
+          placeholder="Nama"
+          withAsterisk
+          label="Nama"
+          w={"100%"}
           styles={{
             input: {
               color: WARNA.biruTua,
@@ -235,13 +249,21 @@ export default function CreateMember() {
               borderColor: WARNA.biruTua,
             },
           }}
-               onChange={(event: any) => setListData({
+          onChange={(event: any) =>
+            setListData({
               ...listData,
-                  name: event.target.value
+              name: event.target.value,
-               })}
+            })
+          }
         />
         <TextInput
-               size="md" type="email" radius={30} placeholder="Email" withAsterisk label="Email" w={"100%"}
+          size="md"
+          type="email"
+          radius={30}
+          placeholder="Email"
+          withAsterisk
+          label="Email"
+          w={"100%"}
           styles={{
             input: {
               color: WARNA.biruTua,
@@ -249,13 +271,21 @@ export default function CreateMember() {
               borderColor: WARNA.biruTua,
             },
           }}
-               onChange={(event: any) => setListData({
+          onChange={(event: any) =>
+            setListData({
               ...listData,
-                  email: event.target.value
+              email: event.target.value,
-               })}
+            })
+          }
         />
         <TextInput
-               size="md" type="number" radius={30} placeholder="+62...." withAsterisk label="Nomor Telepon" w={"100%"}
+          size="md"
+          type="number"
+          radius={30}
+          placeholder="+62...."
+          withAsterisk
+          label="Nomor Telepon"
+          w={"100%"}
           styles={{
             input: {
               color: WARNA.biruTua,
@@ -263,13 +293,21 @@ export default function CreateMember() {
               borderColor: WARNA.biruTua,
             },
           }}
-               onChange={(event: any) => setListData({
+          onChange={(event: any) =>
+            setListData({
               ...listData,
-                  phone: event.target.value
+              phone: event.target.value,
-               })}
+            })
+          }
         />
         <Select
-               placeholder="Pilih Gender" label="Gender" w={"100%"} size="md" required withAsterisk radius={30}
+          placeholder="Pilih Gender"
+          label="Gender"
+          w={"100%"}
+          size="md"
+          required
+          withAsterisk
+          radius={30}
           styles={{
             input: {
               color: WARNA.biruTua,
@@ -278,13 +316,15 @@ export default function CreateMember() {
             },
           }}
           data={[
-                  { value: 'M', label: 'Laki-laki' },
+            { value: "M", label: "Laki-laki" },
-                  { value: 'F', label: 'Perempuan' },
+            { value: "F", label: "Perempuan" },
           ]}
-               onChange={(val: any) => setListData({
+          onChange={(val: any) =>
+            setListData({
               ...listData,
-                  gender: val
+              gender: val,
-               })}
+            })
+          }
         />
       </Stack>
       <Box mt={30} mx={20} pb={20}>
@@ -299,9 +339,14 @@ export default function CreateMember() {
           Simpan
         </Button>
       </Box>
-         <LayoutModal opened={isModal} onClose={() => setModal(false)}
+      <LayoutModal
+        opened={isModal}
+        onClose={() => setModal(false)}
         description="Apakah Anda yakin ingin menambahkan data?"
-            onYes={(val) => { onSubmit(val) }} />
+        onYes={(val) => {
+          onSubmit(val);
+        }}
+      />
     </Box>
-   )
+  );
 }

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

@@ -1,4 +1,4 @@
-'use client'
+"use client";
 import { API_ADDRESS, WARNA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
 import { Box, Flex, SimpleGrid, Stack, Text } from "@mantine/core";
@@ -8,33 +8,36 @@ import { useState } from "react";
 import toast from "react-hot-toast";
 import { FaPencil, FaToggleOff } from "react-icons/fa6";
 import { ImUserCheck } from "react-icons/im";
+import { funEditStatusMember } from "../lib/api_member";
 
-export default function DrawerDetailMember({ onDeleted, id, status }: { onDeleted: (val: boolean) => void, id: string | undefined, status: boolean |undefined }) {
+export default function DrawerDetailMember({
-   const router = useRouter()
+  onDeleted,
-   const [isModal, setModal] = useState(false)
+  id,
-
+  status,
+}: {
+  onDeleted: (val: boolean) => void;
+  id: string;
+  status: boolean;
+}) {
+  const router = useRouter();
+  const [isModal, setModal] = useState(false);
 
   async function nonActive(val: boolean) {
     try {
-         const res = await fetch(API_ADDRESS.apiDeleteUser, {
+      const res = await funEditStatusMember(id, {
-            method: 'POST',
+        isActive: status,
-            headers: {
+      });
-               'Content-Type': 'application/json',
+
-            },
+       if (res.success) {
-            body: JSON.stringify({
+        toast.success(res.message);
-               id,
-               isActive: status
-            }),
-         })
-         if (res.status == 200) {
         onDeleted(true);
       } else {
         onDeleted(false);
       }
-         router.push('/member')
+      router.push("/member?active=true");
-         setModal(false)
+      setModal(false);
     } catch (error) {
-         console.error(error)
+      console.error(error);
       setModal(false);
       toast.error("Terjadi kesalahan");
     }
@@ -43,41 +46,55 @@ export default function DrawerDetailMember({ onDeleted, id, status }: { onDelete
   return (
     <Box>
       <Stack pt={10}>
-            <SimpleGrid
+        <SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }}>
-               cols={{ base: 3, sm: 3, lg: 3 }}
+          <Flex
-            >
+            justify={"center"}
-               <Flex justify={'center'} align={'center'} direction={'column'}
+            align={"center"}
-                  style={{ cursor: 'pointer' }}
+            direction={"column"}
+            style={{ cursor: "pointer" }}
             onClick={() => {
-                     setModal(true)
+              setModal(true);
             }}
           >
             <Box>
               <FaToggleOff size={30} color={WARNA.biruTua} />
             </Box>
             <Box>
-                     <Text c={WARNA.biruTua} ta='center'> {status === false ? "Aktifkan" : "Non Aktifkan"}</Text>
+              <Text c={WARNA.biruTua} ta="center">
+                {" "}
+                {status === false ? "Aktifkan" : "Non Aktifkan"}
+              </Text>
             </Box>
           </Flex>
 
-               <Flex justify={'center'} align={'center'} direction={'column'}
+          <Flex
-                  style={{ cursor: 'pointer' }}
+            justify={"center"}
+            align={"center"}
+            direction={"column"}
+            style={{ cursor: "pointer" }}
             onClick={() => {
-                     router.push(`/member/edit/${id}`)
+              router.push(`/member/edit/${id}`);
             }}
           >
             <Box>
               <FaPencil size={30} color={WARNA.biruTua} />
             </Box>
             <Box>
-                     <Text c={WARNA.biruTua} ta='center'>Edit</Text>
+              <Text c={WARNA.biruTua} ta="center">
+                Edit
+              </Text>
             </Box>
           </Flex>
         </SimpleGrid>
       </Stack>
-         <LayoutModal opened={isModal} onClose={() => setModal(false)}
+      <LayoutModal
+        opened={isModal}
+        onClose={() => setModal(false)}
         description="Apakah Anda yakin ingin mengubah status aktifasi anggota?"
-            onYes={(val) => { nonActive(val) }} />
+        onYes={(val) => {
+          nonActive(val);
+        }}
+      />
     </Box>
-   )
+  );
 }

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

@@ -2,43 +2,24 @@
 import { API_ADDRESS, WARNA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
 import { funGetAllGroup, IDataGroup } from "@/module/group";
+import { funGetAllPosition } from "@/module/position/lib/api_position";
 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";
-
+import { IDataPositionMember, IDataROleMember, IEditDataMember, IFormMember } from "../lib/type_member";
-type dataMember = {
+import { funEditMember, funGetOneMember, funGetRoleUser } from "../lib/api_member";
-   id: string;
-   nik: string;
-   name: string;
-   phone: string;
-   email: string;
-   gender: string;
-   idGroup: string;
-   idPosition: string;
-   idUserRole: string;
-}
 
 
-type dataPosition = {
+export default function EditMember({ id }: { id: string}) {
-   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<IDataGroup[]>([])
-   const [listPosition, setListPosition] = useState<dataPosition[]>([])
+   const [listPosition, setListPosition] = useState<IDataPositionMember[]>([])
-   const [listUserRole, setListUserRole] = useState<dataROleUser[]>([])
+   const [listUserRole, setListUserRole] = useState<IDataROleMember[]>([])
-   const [data, setData] = useState<dataMember>({
+   const [data, setData] = useState<IEditDataMember>({
       id: "",
       nik: "",
       name: "",
@@ -49,7 +30,6 @@ export default function EditMember({ id }: { id: string | undefined }) {
       idPosition: "",
       idUserRole: "",
    })
-   const [listData, setListData] = useState<dataMember>()
 
    async function getAllGroup() {
       try {
@@ -67,10 +47,9 @@ export default function EditMember({ id }: { id: string | undefined }) {
 
    async function getOneData() {
       try {
-         const res = await fetch(`${API_ADDRESS.apiGetOneUser}&userID=${id}`)
+         const res =  await funGetOneMember(id)
-         const data = await res.json()
+         setData(res.data)
-         setData(data)
+         getAllPosition(res.data?.idGroup)
-         getAllPosition(data?.idGroup)
       } catch (error) {
          console.error(error)
       }
@@ -78,9 +57,10 @@ export default function EditMember({ id }: { id: string | undefined }) {
 
    async function getAllPosition(val: any) {
       try {
-         const res = await fetch(`${API_ADDRESS.apiGetAllPosition}&groupId=${val}&active=true`)
+         const res = await funGetAllPosition(
-         const data = await res.json()
+            "?active=true" + "&group=" + `${val}`
-         setListPosition(data)
+          );
+          setListPosition(res.data);
 
       } catch (error) {
          console.error(error)
@@ -89,9 +69,8 @@ export default function EditMember({ id }: { id: string | undefined }) {
 
    async function getAllUserRole() {
       try {
-         const res = await fetch(`${API_ADDRESS.apiGetRoleUser}`)
+         const res = await funGetRoleUser();
-         const data = await res.json()
+         setListUserRole(res.data)
-         setListUserRole(data)
       } catch (error) {
          console.error(error)
       }
@@ -116,12 +95,8 @@ export default function EditMember({ id }: { id: string | undefined }) {
 
    async function onSubmit(val: boolean) {
       try {
-         const res = await fetch(API_ADDRESS.apiUpdateUser, {
+
-            method: "POST",
+         const res = await funEditMember(id,{
-            headers: {
-               "Content-Type": "application/json",
-            },
-            body: JSON.stringify({
             id: data.id,
             nik: data.nik,
             name: data.name,
@@ -131,17 +106,11 @@ export default function EditMember({ id }: { id: string | undefined }) {
             idGroup: data.idGroup,
             idPosition: data.idPosition,
             idUserRole: data.idUserRole
-            }),
          })
 
-         const respon = await res.json()
+         toast.success(res.message)
+         router.push(`/member?active=true`)
 
-         if (res.status == 200) {
-            toast.success(respon.message)
-         } else {
-            toast.error(respon.message)
-         }
-         router.push('/member')
       } catch (error) {
          toast.error('Error');
       }

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

@@ -1,39 +1,57 @@
-'use client'
+"use client";
-import { WARNA } from '@/module/_global';
+import { WARNA } from "@/module/_global";
-import { Box, rem, Tabs, TextInput } from '@mantine/core';
+import { Box, rem, Tabs, TextInput } from "@mantine/core";
-import React from 'react';
+import React from "react";
-import { HiMagnifyingGlass, HiMiniUser } from 'react-icons/hi2';
+import { HiMagnifyingGlass, HiMiniUser } from "react-icons/hi2";
-import { IoMdCheckmarkCircleOutline } from 'react-icons/io';
+import { IoMdCheckmarkCircleOutline } from "react-icons/io";
-import { IoCloseCircleOutline } from 'react-icons/io5';
+import { IoCloseCircleOutline } from "react-icons/io5";
-import TabListMember from './tab_list_member';
+import TabListMember from "./tab_list_member";
+import { useRouter, useSearchParams } from "next/navigation";
 
 export default function ListMember() {
   const iconStyle = { width: rem(20), height: rem(20) };
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const status = searchParams.get("active");
 
   return (
     <Box p={20}>
-         <Tabs variant="pills" color='#FF9861' radius="xl" defaultValue="aktif">
+      <Tabs
-            <Tabs.List bg={"white"} style={{
+        variant="pills"
+        color="#FF9861"
+        radius="xl"
+        defaultValue={status == "false" ? "false" : "true"}
+      >
+        <Tabs.List
+          bg={"white"}
+          style={{
             border: `1px solid ${"#EDEDED"}`,
             padding: 5,
-               borderRadius: 100
+            borderRadius: 100,
-            }}>
+          }}
-               <Tabs.Tab value="aktif" w={"45%"} leftSection={<IoMdCheckmarkCircleOutline style={iconStyle} />}>
+        >
+          <Tabs.Tab
+            value="true"
+            w={"45%"}
+            leftSection={<IoMdCheckmarkCircleOutline style={iconStyle} />}
+            onClick={() => {
+              router.push("/member?active=true");
+            }}
+          >
             Aktif
           </Tabs.Tab>
-               <Tabs.Tab value="tidak-aktif" w={"53%"} leftSection={<IoCloseCircleOutline style={iconStyle} />}>
+          <Tabs.Tab
+            value="tidak-aktif"
+            w={"53%"}
+            leftSection={<IoCloseCircleOutline style={iconStyle} />}
+            onClick={() => {
+              router.push("/member?active=false");
+            }}
+          >
             Tidak Aktif
           </Tabs.Tab>
         </Tabs.List>
-
+        <TabListMember />
-            <Tabs.Panel value="aktif">
-               <TabListMember status={true} />
-            </Tabs.Panel>
-
-            <Tabs.Panel value="tidak-aktif">
-               <TabListMember status={false} />
-               {/* <TabListMember /> */}
-            </Tabs.Panel>
       </Tabs>
     </Box>
   );

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

@@ -11,26 +11,16 @@ import { MdEmail } from "react-icons/md";
 import { IoMaleFemale } from "react-icons/io5";
 import { useShallowEffect } from "@mantine/hooks";
 import Link from "next/link";
+import { funGetOneMember } from "../lib/api_member";
+import toast from "react-hot-toast";
+import { IListMember, IMember } from "../lib/type_member";
 
-interface IdMember {
-   id: string
-}
 
-interface DataMember {
+export default function NavbarDetailMember({ id }: IMember) {
-   id: string
-   name: string
-   nik: string
-   email: string
-   phone: string
-   gender: string
-   position: string
-   group: string
-   isActive: boolean | undefined
-}
-
-export default function NavbarDetailMember({ id }: IdMember) {
    const [isOpen, setOpen] = useState(false)
-   const [dataOne, setDataOne] = useState<DataMember>()
+   const [dataOne, setDataOne] = useState<IListMember>()
+   const [selectId, setSelectId] = useState<string>('');
+   const [active, setActive] = useState<boolean>(false)
 
    useShallowEffect(() => {
       featchGetOne()
@@ -39,11 +29,17 @@ export default function NavbarDetailMember({ id }: IdMember) {
 
    async function featchGetOne() {
       try {
-         const response = await fetch(API_ADDRESS.apiGetOneUser + `&userID=${id}`)
+         const respose = await funGetOneMember(id)
-         const data = await response.json()
+         if (respose.success) {
-         setDataOne(data)
+            setDataOne(respose.data)
+            setActive(respose.data?.isActive)
+            setSelectId(respose.data?.id)
+         } else {
+            toast.error(respose.message)
+         }
       } catch (error) {
          console.error(error)
+         toast.error("Gagal mendapatkan detail user, coba lagi nanti");
       }
    }
 
@@ -103,7 +99,7 @@ export default function NavbarDetailMember({ id }: IdMember) {
                </Group>
             </Box>
             <LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>
-               <DrawerDetailMember id={dataOne?.id} status={dataOne?.isActive} onDeleted={() => setOpen(false)} />
+               <DrawerDetailMember id={selectId} status={active} onDeleted={() => setOpen(false)} />
             </LayoutDrawer>
          </Box>
       </Box>

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

@@ -5,35 +5,25 @@ import { useShallowEffect } from "@mantine/hooks"
 import { useRouter, useSearchParams } from "next/navigation"
 import { useEffect, useState } from "react"
 import { HiMagnifyingGlass, HiMiniUser } from "react-icons/hi2"
+import { IListMember } from "../lib/type_member"
+import { funGetAllmember } from "../lib/api_member"
 
-type dataMember = {
-   id: string,
-   isActive: boolean
-   nik: string,
-   name: string,
-   phone: string,
-   email: string,
-   gender: string,
-   group: string,
-   position: string,
-}
 
-export default function TabListMember({ status }: { status: boolean }) {
+export default function TabListMember() {
    const router = useRouter()
    const [loading, setLoading] = useState(true);
-   const [dataMember, setDataMember] = useState<dataMember[]>([])
+   const [dataMember, setDataMember] = useState<IListMember[]>([])
    const searchParams = useSearchParams()
    const [searchQuery, setSearchQuery] = useState('')
    const group = searchParams.get('group')
+   const status = searchParams.get('active')
 
 
    async function getAllUser() {
       try {
          setLoading(true)
-         const res = await fetch(`${API_ADDRESS.apiGetAllUser}&active=${status}&groupId=${group}&name=${searchQuery}`)
+         const res = await funGetAllmember('?active=' + status + '&group=' + group + '&search=' + searchQuery)
-         const data = await res.json()
+         setDataMember(res.data)
-
-         setDataMember(data)
       } catch (error) {
          console.error(error)
          throw new Error("Error")

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

@@ -1,14 +0,0 @@
-import { Box } from "@mantine/core";
-import NavbarCreateMember from "./navbar_create_member";
-import { LayoutNavbarNew, WARNA } from "@/module/_global";
-import CreateMember from "./create_member";
-
-export default function ViewCreateMember() {
-   return (
-      <Box>
-         {/* <NavbarCreateMember /> */}
-         <LayoutNavbarNew back="" title="Tambah Anggota" menu={<></>} />
-         <CreateMember />
-      </Box>
-   )
-}

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

@@ -1,14 +0,0 @@
-import { Box, Group, Text } from "@mantine/core";
-import { FaSquarePhone } from "react-icons/fa6";
-import { MdEmail } from "react-icons/md";
-import { RiIdCardFill } from "react-icons/ri";
-import NavbarDetailMember from "./navbar_detail_member";
-import { IoMaleFemale } from "react-icons/io5";
-
-export default function ViewDetailMember({ data }: { data: string }) {
-   return (
-      <Box>
-         <NavbarDetailMember id={data} />
-      </Box>
-   )
-}

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

@@ -1,14 +0,0 @@
-import { LayoutNavbarHome, LayoutNavbarNew, WARNA } from "@/module/_global";
-import { Box, Stack, TextInput, Button } from "@mantine/core";
-import { HiUser } from "react-icons/hi2";
-import NavbarEditMember from "./navbar_edit_member";
-import EditMember from "./edit_member";
-
-export default function ViewEditMember({ data }: { data: string }) {
-   return (
-      <Box>
-         <LayoutNavbarNew back="" title="Edit Anggota" menu={<></>} />
-         <EditMember id={data} />
-      </Box>
-   )
-}

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

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