Merge pull request #105 from bipproduction/lukman/12-agustus-2024

feat : update member

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} />
-   )
+  return (
+    <Box>
+      <NavbarDetailMember id={params.id} />
+    </Box>
+  );
 }
 
 export default Page;
-

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

@@ -1,9 +1,14 @@
-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 />
-   );
+  return (
+    <Box>
+      <LayoutNavbarNew back="" title="Tambah Anggota" menu={<></>} />
+      <CreateMember />
+    </Box>
+  );
 }
 
-export default Page;
+export default Page;

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}/>
-   )
+  return (
+    <Box>
+      <LayoutNavbarNew back="" title="Edit Anggota" menu={<></>} />
+      <EditMember id={params.id} />
+    </Box>
+  );
 }
 
-export default Page;
+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")
-      return <ViewFilter linkFilter="member"/>
-      
-   return (
-      <ViewListMember />
-   )
+  if (searchParams.page == "filter") return <ViewFilter linkFilter="member" />;
+
+  return (
+    <Box>
+      <NavbarListMember />
+      <ListMember />
+    </Box>
+  );
 }
 
-export default Page;
+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"]),
-            group: v.Group.name
+            ..._.omit(v, ["Group", "Position" ]),
+          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 ViewDetailMember from "./ui/view_detail_member";
-import ViewEditMember from "./ui/view_edit_member";
-import ViewListMember from "./ui/view_list_member";
+import CreateMember from "./ui/create_member";
+import EditMember from "./ui/edit_member";
+import ListMember from "./ui/list_member";
+import NavbarDetailMember from "./ui/navbar_detail_member";
+import NavbarListMember from "./ui/navbar_list_member";
 
-export { ViewListMember }
-export { ViewCreateMember }
-export { ViewDetailMember }
-export { ViewEditMember }
+export { NavbarListMember }
+export { ListMember }
+export { CreateMember }
+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  {
@@ -46,4 +46,8 @@ export interface IEditDataMember  {
  export interface IDataROleMember  {
     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,301 +7,346 @@ import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import { HiUser } from "react-icons/hi2";
-
-
-type dataPosition = {
-   id: string;
-   name: string;
-};
-
-type dataROleUser = {
-   id: string;
-   name: string;
-}
+import { IDataPositionMember, IDataROleMember } from "../lib/type_member";
+import { funGetAllPosition } from "@/module/position/lib/api_position";
+import { funCreateMember, funGetRoleUser } from "../lib/api_member";
 
 export default function CreateMember() {
-   const router = useRouter()
-   const [isModal, setModal] = useState(false)
-   const [listGroup, setListGorup] = useState<IDataGroup[]>([])
-   const [listPosition, setListPosition] = useState<dataPosition[]>([])
-   const [listUserRole, setListUserRole] = useState<dataROleUser[]>([])
+  const router = useRouter();
+  const [isModal, setModal] = useState(false);
+  const [listGroup, setListGorup] = useState<IDataGroup[]>([]);
+  const [listPosition, setListPosition] = useState<IDataPositionMember[]>([]);
+  const [listUserRole, setListUserRole] = useState<IDataROleMember[]>([]);
 
-   const [listData, setListData] = useState({
-      nik: "",
-      name: "",
-      phone: "",
-      email: "",
-      gender: "",
-      idGroup: "",
+  const [listData, setListData] = useState({
+    nik: "",
+    name: "",
+    phone: "",
+    email: "",
+    gender: "",
+    idGroup: "",
+    idPosition: "",
+    idUserRole: "",
+  });
+
+  async function getAllGroup() {
+    try {
+      const response = await funGetAllGroup("?active=true");
+      if (response.success) {
+        setListGorup(response.data);
+      } else {
+        toast.error(response.message);
+      }
+    } catch (error) {
+      console.error(error);
+      toast.error("Gagal mendapatkan grup, coba lagi nanti");
+    }
+  }
+
+  async function getAllPosition(val: any) {
+    try {
+      if (val != null) {
+        const res = await funGetAllPosition(
+          "?active=true" + "&group=" + `${val}`
+        );
+        setListPosition(res.data);
+      } else {
+        setListPosition([]);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  async function getAllUserRole() {
+    try {
+      const res = await funGetRoleUser();
+      setListUserRole(res.data);
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  async function changeGrup(val: any) {
+    setListPosition([]);
+    setListData({
+      ...listData,
+      idGroup: val,
       idPosition: "",
-      idUserRole: "",
-   })
+    });
 
+    getAllPosition(val);
+  }
 
-   async function getAllGroup() {
-      try {
-         const response = await funGetAllGroup('?active=true')
-         if (response.success) {
-            setListGorup(response.data);
-         } else {
-            toast.error(response.message);
-         }
-      } catch (error) {
-         console.error(error)
-         toast.error("Gagal mendapatkan grup, coba lagi nanti");
+  async function onSubmit(val: boolean) {
+    try {
+      const res = await funCreateMember({
+        nik: listData.nik,
+        name: listData.name,
+        phone: listData.phone,
+        email: listData.email,
+        gender: listData.gender,
+        idGroup: listData.idGroup,
+        idPosition: listData.idPosition,
+        idUserRole: listData.idUserRole,
+      });
+
+      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);
+    }
+  }
 
-   async function getAllPosition(val: any) {
-      try {
-         if (val != null) {
-            const res = await fetch(`${API_ADDRESS.apiGetAllPosition}&groupId=${val}&active=true`)
-            const data = await res.json()
-            setListPosition(data)
-         } else {
-            setListPosition([])
-         }
-
-      } 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)
-      }
-   }
+  useEffect(() => {
+    getAllGroup();
+    getAllUserRole();
+  }, []);
 
 
-   async function changeGrup(val: any) {
-      setListPosition([])
-      setListData({
-         ...listData,
-         idGroup: val,
-         idPosition: ""
-      })
-
-      getAllPosition(val)
-
-   }
-
-
-   async function onSubmit(val: boolean) {
-      try {
-         const res = await fetch(API_ADDRESS.apiCreateUser, {
-            method: 'POST',
-            headers: {
-               'Content-Type': 'application/json'
+  return (
+    <Box>
+      <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>
+        <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,
             },
-            body: JSON.stringify({
-               nik: listData.nik,
-               name: listData.name,
-               phone: listData.phone,
-               email: listData.email,
-               gender: listData.gender,
-               idGroup: listData.idGroup,
-               idPosition: listData.idPosition,
-               idUserRole: listData.idUserRole
+          }}
+          data={
+            listGroup
+              ? listGroup.map((data) => ({
+                  value: data.id,
+                  label: data.name,
+                }))
+              : []
+          }
+          onChange={(val: any) => {
+            changeGrup(val);
+          }}
+        />
+        <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={
+            listPosition
+              ? listPosition.map((data) => ({
+                  value: data.id,
+                  label: data.name,
+                }))
+              : []
+          }
+          onChange={(val: any) =>
+            setListData({
+              ...listData,
+              idPosition: val,
             })
-         })
-         toast.success("Sukses! Data tersimpan");
-         setModal(false)
-         router.push('/member')
-      } catch (error) {
-         toast.error('Error')
-         toast.error("Sukses! Data tersimpan");
-      }
-   }
-
-
-   useEffect(() => {
-      getAllGroup()
-      getAllUserRole()
-   }, [])
-
-   function onTrue(val: boolean) {
-      if (val) {
-         toast.success("Sukses! Data tersimpan");
-      }
-      setModal(false)
-   }
-
-   return (
-      <Box>
-         <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>
-            <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={
-                  listGroup
-                     ? listGroup.map((data) => ({
-                        value: data.id,
-                        label: data.name,
-                     }))
-                     : []
-               }
-               onChange={(val: any) => {
-                  changeGrup(val)
-               }}
-            />
-            <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={
-                  listPosition
-                     ? listPosition.map((data) => ({
-                        value: data.id,
-                        label: data.name,
-                     }))
-                     : []
-               }
-               onChange={(val: any) => setListData({
-                  ...listData,
-                  idPosition: val
-               })}
-               value={(listData.idPosition == "") ? null : listData.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) => setListData({
-                  ...listData,
-                  idUserRole: val
-               })}
-            />
-            <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,
-                  },
-               }}
-               onChange={(event: any) => setListData({
-                  ...listData,
-                  nik: event.target.value
-               })}
-            />
-            <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,
-                  },
-               }}
-               onChange={(event: any) => setListData({
-                  ...listData,
-                  name: event.target.value
-               })}
-            />
-            <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,
-                  },
-               }}
-               onChange={(event: any) => setListData({
-                  ...listData,
-                  email: event.target.value
-               })}
-            />
-            <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,
-                  },
-               }}
-               onChange={(event: any) => setListData({
-                  ...listData,
-                  phone: event.target.value
-               })}
-            />
-            <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={[
-                  { value: 'M', label: 'Laki-laki' },
-                  { value: 'F', label: 'Perempuan' },
-               ]}
-               onChange={(val: any) => setListData({
-                  ...listData,
-                  gender: val
-               })}
-            />
-         </Stack>
-         <Box mt={30} mx={20} pb={20}>
-            <Button
-               c={"white"}
-               bg={WARNA.biruTua}
-               size="md"
-               radius={30}
-               fullWidth
-               onClick={() => setModal(true)}
-            >
-               Simpan
-            </Button>
-         </Box>
-         <LayoutModal opened={isModal} onClose={() => setModal(false)}
-            description="Apakah Anda yakin ingin menambahkan data?"
-            onYes={(val) => { onSubmit(val) }} />
+          }
+          value={listData.idPosition == "" ? null : listData.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) =>
+            setListData({
+              ...listData,
+              idUserRole: val,
+            })
+          }
+        />
+        <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,
+            },
+          }}
+          onChange={(event: any) =>
+            setListData({
+              ...listData,
+              nik: event.target.value,
+            })
+          }
+        />
+        <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,
+            },
+          }}
+          onChange={(event: any) =>
+            setListData({
+              ...listData,
+              name: event.target.value,
+            })
+          }
+        />
+        <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,
+            },
+          }}
+          onChange={(event: any) =>
+            setListData({
+              ...listData,
+              email: event.target.value,
+            })
+          }
+        />
+        <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,
+            },
+          }}
+          onChange={(event: any) =>
+            setListData({
+              ...listData,
+              phone: event.target.value,
+            })
+          }
+        />
+        <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={[
+            { value: "M", label: "Laki-laki" },
+            { value: "F", label: "Perempuan" },
+          ]}
+          onChange={(val: any) =>
+            setListData({
+              ...listData,
+              gender: val,
+            })
+          }
+        />
+      </Stack>
+      <Box mt={30} mx={20} pb={20}>
+        <Button
+          c={"white"}
+          bg={WARNA.biruTua}
+          size="md"
+          radius={30}
+          fullWidth
+          onClick={() => setModal(true)}
+        >
+          Simpan
+        </Button>
       </Box>
-   )
-}
+      <LayoutModal
+        opened={isModal}
+        onClose={() => setModal(false)}
+        description="Apakah Anda yakin ingin menambahkan data?"
+        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,76 +8,93 @@ 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 }) {
-   const router = useRouter()
-   const [isModal, setModal] = useState(false)
+export default function DrawerDetailMember({
+  onDeleted,
+  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 funEditStatusMember(id, {
+        isActive: status,
+      });
 
-   async function nonActive(val: boolean) {
-      try {
-         const res = await fetch(API_ADDRESS.apiDeleteUser, {
-            method: 'POST',
-            headers: {
-               'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({
-               id,
-               isActive: status
-            }),
-         })
-         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");
+       if (res.success) {
+        toast.success(res.message);
+        onDeleted(true);
+      } else {
+        onDeleted(false);
       }
-   }
+      router.push("/member?active=true");
+      setModal(false);
+    } catch (error) {
+      console.error(error);
+      setModal(false);
+      toast.error("Terjadi kesalahan");
+    }
+  }
 
-   return (
-      <Box>
-         <Stack pt={10}>
-            <SimpleGrid
-               cols={{ base: 3, sm: 3, lg: 3 }}
-            >
-               <Flex justify={'center'} align={'center'} direction={'column'}
-                  style={{ cursor: 'pointer' }}
-                  onClick={() => {
-                     setModal(true)
-                  }}
-               >
-                  <Box>
-                     <FaToggleOff size={30} color={WARNA.biruTua} />
-                  </Box>
-                  <Box>
-                     <Text c={WARNA.biruTua} ta='center'> {status === false ? "Aktifkan" : "Non Aktifkan"}</Text>
-                  </Box>
-               </Flex>
+  return (
+    <Box>
+      <Stack pt={10}>
+        <SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }}>
+          <Flex
+            justify={"center"}
+            align={"center"}
+            direction={"column"}
+            style={{ cursor: "pointer" }}
+            onClick={() => {
+              setModal(true);
+            }}
+          >
+            <Box>
+              <FaToggleOff size={30} color={WARNA.biruTua} />
+            </Box>
+            <Box>
+              <Text c={WARNA.biruTua} ta="center">
+                {" "}
+                {status === false ? "Aktifkan" : "Non Aktifkan"}
+              </Text>
+            </Box>
+          </Flex>
 
-               <Flex justify={'center'} align={'center'} direction={'column'}
-                  style={{ cursor: 'pointer' }}
-                  onClick={() => {
-                     router.push(`/member/edit/${id}`)
-                  }}
-               >
-                  <Box>
-                     <FaPencil size={30} color={WARNA.biruTua} />
-                  </Box>
-                  <Box>
-                     <Text c={WARNA.biruTua} ta='center'>Edit</Text>
-                  </Box>
-               </Flex>
-            </SimpleGrid>
-         </Stack>
-         <LayoutModal opened={isModal} onClose={() => setModal(false)}
-            description="Apakah Anda yakin ingin mengubah status aktifasi anggota?"
-            onYes={(val) => { nonActive(val) }} />
-      </Box>
-   )
-}
+          <Flex
+            justify={"center"}
+            align={"center"}
+            direction={"column"}
+            style={{ cursor: "pointer" }}
+            onClick={() => {
+              router.push(`/member/edit/${id}`);
+            }}
+          >
+            <Box>
+              <FaPencil size={30} color={WARNA.biruTua} />
+            </Box>
+            <Box>
+              <Text c={WARNA.biruTua} ta="center">
+                Edit
+              </Text>
+            </Box>
+          </Flex>
+        </SimpleGrid>
+      </Stack>
+      <LayoutModal
+        opened={isModal}
+        onClose={() => setModal(false)}
+        description="Apakah Anda yakin ingin mengubah status aktifasi anggota?"
+        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";
-
-type dataMember = {
-   id: string;
-   nik: string;
-   name: string;
-   phone: string;
-   email: string;
-   gender: string;
-   idGroup: string;
-   idPosition: string;
-   idUserRole: string;
-}
+import { IDataPositionMember, IDataROleMember, IEditDataMember, IFormMember } from "../lib/type_member";
+import { funEditMember, funGetOneMember, funGetRoleUser } from "../lib/api_member";
 
 
-type dataPosition = {
-   id: string;
-   name: string;
-};
-
-type dataROleUser = {
-   id: string;
-   name: string;
-}
-
-export default function EditMember({ id }: { id: string | undefined }) {
+export default function EditMember({ id }: { id: string}) {
    const [isModal, setModal] = useState(false)
    const router = useRouter()
    const [listGroup, setListGorup] = useState<IDataGroup[]>([])
-   const [listPosition, setListPosition] = useState<dataPosition[]>([])
-   const [listUserRole, setListUserRole] = useState<dataROleUser[]>([])
-   const [data, setData] = useState<dataMember>({
+   const [listPosition, setListPosition] = useState<IDataPositionMember[]>([])
+   const [listUserRole, setListUserRole] = useState<IDataROleMember[]>([])
+   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 data = await res.json()
-         setData(data)
-         getAllPosition(data?.idGroup)
+         const res =  await funGetOneMember(id)
+         setData(res.data)
+         getAllPosition(res.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 data = await res.json()
-         setListPosition(data)
+         const res = await funGetAllPosition(
+            "?active=true" + "&group=" + `${val}`
+          );
+          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 data = await res.json()
-         setListUserRole(data)
+         const res = await funGetRoleUser();
+         setListUserRole(res.data)
       } catch (error) {
          console.error(error)
       }
@@ -116,32 +95,22 @@ export default function EditMember({ id }: { id: string | undefined }) {
 
    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 res = await funEditMember(id,{
+            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()
+         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,40 +1,58 @@
-'use client'
-import { WARNA } from '@/module/_global';
-import { Box, rem, Tabs, TextInput } from '@mantine/core';
-import React from 'react';
-import { HiMagnifyingGlass, HiMiniUser } from 'react-icons/hi2';
-import { IoMdCheckmarkCircleOutline } from 'react-icons/io';
-import { IoCloseCircleOutline } from 'react-icons/io5';
-import TabListMember from './tab_list_member';
+"use client";
+import { WARNA } from "@/module/_global";
+import { Box, rem, Tabs, TextInput } from "@mantine/core";
+import React from "react";
+import { HiMagnifyingGlass, HiMiniUser } from "react-icons/hi2";
+import { IoMdCheckmarkCircleOutline } from "react-icons/io";
+import { IoCloseCircleOutline } from "react-icons/io5";
+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 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.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>
-
-            <Tabs.Panel value="aktif">
-               <TabListMember status={true} />
-            </Tabs.Panel>
-
-            <Tabs.Panel value="tidak-aktif">
-               <TabListMember status={false} />
-               {/* <TabListMember /> */}
-            </Tabs.Panel>
-         </Tabs>
-      </Box>
-   );
+  return (
+    <Box p={20}>
+      <Tabs
+        variant="pills"
+        color="#FF9861"
+        radius="xl"
+        defaultValue={status == "false" ? "false" : "true"}
+      >
+        <Tabs.List
+          bg={"white"}
+          style={{
+            border: `1px solid ${"#EDEDED"}`,
+            padding: 5,
+            borderRadius: 100,
+          }}
+        >
+          <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} />}
+            onClick={() => {
+              router.push("/member?active=false");
+            }}
+          >
+            Tidak Aktif
+          </Tabs.Tab>
+        </Tabs.List>
+        <TabListMember />
+      </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 {
-   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) {
+export default function NavbarDetailMember({ id }: IMember) {
    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 data = await response.json()
-         setDataOne(data)
+         const respose = await funGetOneMember(id)
+         if (respose.success) {
+            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 data = await res.json()
-
-         setDataMember(data)
+         const res = await funGetAllmember('?active=' + status + '&group=' + group + '&search=' + searchQuery)
+         setDataMember(res.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>
-   )
-}