wibu/sistem-desa-mandiri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
feat : update member
This commit is contained in:
Amalia
2024-08-12 12:02:38 +08:00
committed by GitHub
parent 655df62dc6 43c4690a28
commit a4522dec29
23 changed files with 619 additions and 592 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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 } }) { function Page({ params }: { params: { id: string } }) {
return ( return (
<ViewDetailMember data={params.id} /> <Box>
) <NavbarDetailMember id={params.id} />
</Box>
);
} }
export default Page; export default Page;

15
src/app/(application)/member/create/page.tsx
View File

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

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

@@ -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 } }) { function Page({ params }: { params: { id: string } }) {
return ( return (
<ViewEditMember data={params.id}/> <Box>
) <LayoutNavbarNew back="" title="Edit Anggota" menu={<></>} />
<EditMember id={params.id} />
</Box>
);
} }
export default Page; export default Page;

19
src/app/(application)/member/page.tsx
View File

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

23
src/app/api/role-user/route.ts Normal file
View File

@@ -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 });
}
}

2
src/app/api/user/[id]/route.ts
View File

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

5
src/app/api/user/route.ts
View File

@@ -54,8 +54,9 @@ export async function GET(request: Request) {
}); });
const allData = users.map((v: any) => ({ 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 }); return NextResponse.json({ success: true, message: "Berhasil member", data: allData, }, { status: 200 });

1
src/module/announcement/api/get/getOneAnnouncement.ts
View File

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

1
src/module/announcement/api/post/createAnnouncement.ts
View File

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

1
src/module/user/api/get/getOneUser.ts
View File

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

18
src/module/user/member/index.ts
View File

@@ -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}

22
src/module/user/member/lib/api_member.ts
View File

@@ -1,30 +1,34 @@
import { IEditDataMember, IFormMember, IStatusmember } from "./type_member"; import { IEditDataMember, IFormMember, IStatusmember } from "./type_member";
export const funGetAllmember = async (path?: string) => { 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); 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) => { 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); return await response.json().catch(() => null);
} }
export const funCreateMember = async (data: IFormMember) => { export const funCreateMember = async (data: IFormMember) => {
if (data.name.length < 3) 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) 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) 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' } return { success: false, message: 'NIK harus 16 karakter' }
const response = await fetch("/api/member", { const response = await fetch("/api/user", {
method: "POST", method: "POST",
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
@@ -37,7 +41,7 @@ export const funCreateMember = async (data: IFormMember) => {
export const funEditStatusMember = async (path: string, data: IStatusmember) => { export const funEditStatusMember = async (path: string, data: IStatusmember) => {
const response = await fetch(`/api/member/${path}`, { const response = await fetch(`/api/user/${path}`, {
method: "DELETE", method: "DELETE",
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
@@ -53,7 +57,7 @@ export const funEditMember = async (path: string, data: IEditDataMember) => {
if (data.name.length < 3) if (data.name.length < 3)
return { success: false, message: 'Minimal 3 karakter' } return { success: false, message: 'Minimal 3 karakter' }
const response = await fetch(`/api/member/${path}`, { const response = await fetch(`/api/user/${path}`, {
method: "PUT", method: "PUT",
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",

12
src/module/user/member/lib/type_member.ts
View File

@@ -1,13 +1,13 @@
export interface IListMember { export interface IListMember {
id: string, id: string,
isActive: boolean
nik: string,
name: string, name: string,
phone: string, nik: string,
email: string, email: string,
phone: string,
gender: string, gender: string,
group: string,
position: string, position: string,
group: string,
isActive: boolean
} }
export interface IFormMember { export interface IFormMember {
@@ -46,4 +46,8 @@ export interface IEditDataMember {
export interface IDataROleMember { export interface IDataROleMember {
id: string; id: string;
name: string; name: string;
}
export interface IMember{
id: string
} }

617
src/module/user/member/ui/create_member.tsx
View File

@@ -1,4 +1,4 @@
'use client' "use client";
import { API_ADDRESS, WARNA } from "@/module/_global"; import { API_ADDRESS, WARNA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal"; import LayoutModal from "@/module/_global/layout/layout_modal";
import { funGetAllGroup, IDataGroup } from "@/module/group"; import { funGetAllGroup, IDataGroup } from "@/module/group";
@@ -7,301 +7,346 @@ import { useRouter } from "next/navigation";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import { HiUser } from "react-icons/hi2"; 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() { 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({ const [listData, setListData] = useState({
nik: "", nik: "",
name: "", name: "",
phone: "", phone: "",
email: "", email: "",
gender: "", gender: "",
idGroup: "", 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: "", idPosition: "",
idUserRole: "", });
})
getAllPosition(val);
}
async function getAllGroup() { async function onSubmit(val: boolean) {
try { try {
const response = await funGetAllGroup('?active=true') const res = await funCreateMember({
if (response.success) { nik: listData.nik,
setListGorup(response.data); name: listData.name,
} else { phone: listData.phone,
toast.error(response.message); email: listData.email,
} gender: listData.gender,
} catch (error) { idGroup: listData.idGroup,
console.error(error) idPosition: listData.idPosition,
toast.error("Gagal mendapatkan grup, coba lagi nanti"); 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) { useEffect(() => {
try { getAllGroup();
if (val != null) { getAllUserRole();
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)
}
}
async function changeGrup(val: any) { return (
setListPosition([]) <Box>
setListData({ <Stack align="center" justify="center" gap="xs" pt={30} px={20}>
...listData, <Box
idGroup: val, bg={WARNA.biruTua}
idPosition: "" py={30}
}) px={50}
style={{
getAllPosition(val) borderRadius: 10,
}}
} >
<HiUser size={100} color={WARNA.bgWhite} />
</Box>
async function onSubmit(val: boolean) { <Select
try { placeholder="Pilih Grup"
const res = await fetch(API_ADDRESS.apiCreateUser, { label="Grup"
method: 'POST', w={"100%"}
headers: { size="md"
'Content-Type': 'application/json' required
withAsterisk
radius={30}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
}, },
body: JSON.stringify({ }}
nik: listData.nik, data={
name: listData.name, listGroup
phone: listData.phone, ? listGroup.map((data) => ({
email: listData.email, value: data.id,
gender: listData.gender, label: data.name,
idGroup: listData.idGroup, }))
idPosition: listData.idPosition, : []
idUserRole: listData.idUserRole }
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"); value={listData.idPosition == "" ? null : listData.idPosition}
setModal(false) />
router.push('/member') <Select
} catch (error) { placeholder="Pilih Role"
toast.error('Error') label="User Role"
toast.error("Sukses! Data tersimpan"); w={"100%"}
} size="md"
} required
withAsterisk
radius={30}
useEffect(() => { styles={{
getAllGroup() input: {
getAllUserRole() color: WARNA.biruTua,
}, []) borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
function onTrue(val: boolean) { },
if (val) { }}
toast.success("Sukses! Data tersimpan"); data={
} listUserRole
setModal(false) ? listUserRole.map((data) => ({
} value: data.id,
label: data.name,
return ( }))
<Box> : []
<Stack }
align="center" onChange={(val: any) =>
justify="center" setListData({
gap="xs" ...listData,
pt={30} idUserRole: val,
px={20} })
> }
<Box bg={WARNA.biruTua} py={30} px={50} />
style={{ <TextInput
borderRadius: 10, size="md"
}}> type="number"
<HiUser size={100} color={WARNA.bgWhite} /> radius={30}
</Box> placeholder="NIK"
<Select withAsterisk
placeholder="Pilih Grup" label="Grup" w={"100%"} size="md" required withAsterisk radius={30} label="NIK"
styles={{ w={"100%"}
input: { styles={{
color: WARNA.biruTua, input: {
borderRadius: WARNA.biruTua, color: WARNA.biruTua,
borderColor: WARNA.biruTua, borderRadius: WARNA.biruTua,
}, borderColor: WARNA.biruTua,
}} },
data={ }}
listGroup onChange={(event: any) =>
? listGroup.map((data) => ({ setListData({
value: data.id, ...listData,
label: data.name, nik: event.target.value,
})) })
: [] }
} />
onChange={(val: any) => { <TextInput
changeGrup(val) size="md"
}} type="text"
/> radius={30}
<Select placeholder="Nama"
placeholder="Pilih Jabatan" label="Jabatan" w={"100%"} size="md" required withAsterisk radius={30} withAsterisk
styles={{ label="Nama"
input: { w={"100%"}
color: WARNA.biruTua, styles={{
borderRadius: WARNA.biruTua, input: {
borderColor: WARNA.biruTua, color: WARNA.biruTua,
}, borderRadius: WARNA.biruTua,
}} borderColor: WARNA.biruTua,
data={ },
listPosition }}
? listPosition.map((data) => ({ onChange={(event: any) =>
value: data.id, setListData({
label: data.name, ...listData,
})) name: event.target.value,
: [] })
} }
onChange={(val: any) => setListData({ />
...listData, <TextInput
idPosition: val size="md"
})} type="email"
value={(listData.idPosition == "") ? null : listData.idPosition} radius={30}
/> placeholder="Email"
<Select withAsterisk
placeholder="Pilih Role" label="User Role" w={"100%"} size="md" required withAsterisk radius={30} label="Email"
styles={{ w={"100%"}
input: { styles={{
color: WARNA.biruTua, input: {
borderRadius: WARNA.biruTua, color: WARNA.biruTua,
borderColor: WARNA.biruTua, borderRadius: WARNA.biruTua,
}, borderColor: WARNA.biruTua,
}} },
data={ }}
listUserRole onChange={(event: any) =>
? listUserRole.map((data) => ({ setListData({
value: data.id, ...listData,
label: data.name, email: event.target.value,
})) })
: [] }
} />
onChange={(val: any) => setListData({ <TextInput
...listData, size="md"
idUserRole: val type="number"
})} radius={30}
/> placeholder="+62...."
<TextInput withAsterisk
size="md" type="number" radius={30} placeholder="NIK" withAsterisk label="NIK" w={"100%"} label="Nomor Telepon"
styles={{ w={"100%"}
input: { styles={{
color: WARNA.biruTua, input: {
borderRadius: WARNA.biruTua, color: WARNA.biruTua,
borderColor: WARNA.biruTua, borderRadius: WARNA.biruTua,
}, borderColor: WARNA.biruTua,
}} },
onChange={(event: any) => setListData({ }}
...listData, onChange={(event: any) =>
nik: event.target.value setListData({
})} ...listData,
/> phone: event.target.value,
<TextInput })
size="md" type="text" radius={30} placeholder="Nama" withAsterisk label="Nama" w={"100%"} }
styles={{ />
input: { <Select
color: WARNA.biruTua, placeholder="Pilih Gender"
borderRadius: WARNA.biruTua, label="Gender"
borderColor: WARNA.biruTua, w={"100%"}
}, size="md"
}} required
onChange={(event: any) => setListData({ withAsterisk
...listData, radius={30}
name: event.target.value styles={{
})} input: {
/> color: WARNA.biruTua,
<TextInput borderRadius: WARNA.biruTua,
size="md" type="email" radius={30} placeholder="Email" withAsterisk label="Email" w={"100%"} borderColor: WARNA.biruTua,
styles={{ },
input: { }}
color: WARNA.biruTua, data={[
borderRadius: WARNA.biruTua, { value: "M", label: "Laki-laki" },
borderColor: WARNA.biruTua, { value: "F", label: "Perempuan" },
}, ]}
}} onChange={(val: any) =>
onChange={(event: any) => setListData({ setListData({
...listData, ...listData,
email: event.target.value gender: val,
})} })
/> }
<TextInput />
size="md" type="number" radius={30} placeholder="+62...." withAsterisk label="Nomor Telepon" w={"100%"} </Stack>
styles={{ <Box mt={30} mx={20} pb={20}>
input: { <Button
color: WARNA.biruTua, c={"white"}
borderRadius: WARNA.biruTua, bg={WARNA.biruTua}
borderColor: WARNA.biruTua, size="md"
}, radius={30}
}} fullWidth
onChange={(event: any) => setListData({ onClick={() => setModal(true)}
...listData, >
phone: event.target.value Simpan
})} </Button>
/>
<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> </Box>
) <LayoutModal
} opened={isModal}
onClose={() => setModal(false)}
description="Apakah Anda yakin ingin menambahkan data?"
onYes={(val) => {
onSubmit(val);
}}
/>
</Box>
);
}

153
src/module/user/member/ui/drawer_detail_member.tsx
View File

@@ -1,4 +1,4 @@
'use client' "use client";
import { API_ADDRESS, WARNA } from "@/module/_global"; import { API_ADDRESS, WARNA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal"; import LayoutModal from "@/module/_global/layout/layout_modal";
import { Box, Flex, SimpleGrid, Stack, Text } from "@mantine/core"; import { Box, Flex, SimpleGrid, Stack, Text } from "@mantine/core";
@@ -8,76 +8,93 @@ import { useState } from "react";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import { FaPencil, FaToggleOff } from "react-icons/fa6"; import { FaPencil, FaToggleOff } from "react-icons/fa6";
import { ImUserCheck } from "react-icons/im"; 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 funEditStatusMember(id, {
isActive: status,
});
async function nonActive(val: boolean) { if (res.success) {
try { toast.success(res.message);
const res = await fetch(API_ADDRESS.apiDeleteUser, { onDeleted(true);
method: 'POST', } else {
headers: { onDeleted(false);
'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");
} }
} router.push("/member?active=true");
setModal(false);
} catch (error) {
console.error(error);
setModal(false);
toast.error("Terjadi kesalahan");
}
}
return ( return (
<Box> <Box>
<Stack pt={10}> <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"}
onClick={() => { style={{ cursor: "pointer" }}
setModal(true) onClick={() => {
}} setModal(true);
> }}
<Box> >
<FaToggleOff size={30} color={WARNA.biruTua} /> <Box>
</Box> <FaToggleOff size={30} color={WARNA.biruTua} />
<Box> </Box>
<Text c={WARNA.biruTua} ta='center'> {status === false ? "Aktifkan" : "Non Aktifkan"}</Text> <Box>
</Box> <Text c={WARNA.biruTua} ta="center">
</Flex> {" "}
{status === false ? "Aktifkan" : "Non Aktifkan"}
</Text>
</Box>
</Flex>
<Flex justify={'center'} align={'center'} direction={'column'} <Flex
style={{ cursor: 'pointer' }} justify={"center"}
onClick={() => { align={"center"}
router.push(`/member/edit/${id}`) direction={"column"}
}} style={{ cursor: "pointer" }}
> onClick={() => {
<Box> router.push(`/member/edit/${id}`);
<FaPencil size={30} color={WARNA.biruTua} /> }}
</Box> >
<Box> <Box>
<Text c={WARNA.biruTua} ta='center'>Edit</Text> <FaPencil size={30} color={WARNA.biruTua} />
</Box> </Box>
</Flex> <Box>
</SimpleGrid> <Text c={WARNA.biruTua} ta="center">
</Stack> Edit
<LayoutModal opened={isModal} onClose={() => setModal(false)} </Text>
description="Apakah Anda yakin ingin mengubah status aktifasi anggota?" </Box>
onYes={(val) => { nonActive(val) }} /> </Flex>
</Box> </SimpleGrid>
) </Stack>
} <LayoutModal
opened={isModal}
onClose={() => setModal(false)}
description="Apakah Anda yakin ingin mengubah status aktifasi anggota?"
onYes={(val) => {
nonActive(val);
}}
/>
</Box>
);
}

89
src/module/user/member/ui/edit_member.tsx
View File

@@ -2,43 +2,24 @@
import { API_ADDRESS, WARNA } from "@/module/_global"; import { API_ADDRESS, WARNA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal"; import LayoutModal from "@/module/_global/layout/layout_modal";
import { funGetAllGroup, IDataGroup } from "@/module/group"; import { funGetAllGroup, IDataGroup } from "@/module/group";
import { funGetAllPosition } from "@/module/position/lib/api_position";
import { Box, Button, Select, Stack, TextInput } from "@mantine/core"; import { Box, Button, Select, Stack, TextInput } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks"; import { useShallowEffect } from "@mantine/hooks";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { useState } from "react"; import { useState } from "react";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import { HiUser } from "react-icons/hi2"; 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 [isModal, setModal] = useState(false)
const router = useRouter() const router = useRouter()
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 [data, setData] = useState<dataMember>({ const [data, setData] = useState<IEditDataMember>({
id: "", id: "",
nik: "", nik: "",
name: "", name: "",
@@ -49,7 +30,6 @@ export default function EditMember({ id }: { id: string | undefined }) {
idPosition: "", idPosition: "",
idUserRole: "", idUserRole: "",
}) })
const [listData, setListData] = useState<dataMember>()
async function getAllGroup() { async function getAllGroup() {
try { try {
@@ -67,10 +47,9 @@ export default function EditMember({ id }: { id: string | undefined }) {
async function getOneData() { async function getOneData() {
try { 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) { } catch (error) {
console.error(error) console.error(error)
} }
@@ -78,9 +57,10 @@ export default function EditMember({ id }: { id: string | undefined }) {
async function getAllPosition(val: any) { async function getAllPosition(val: any) {
try { 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) { } catch (error) {
console.error(error) console.error(error)
@@ -89,9 +69,8 @@ export default function EditMember({ id }: { id: string | undefined }) {
async function getAllUserRole() { async function getAllUserRole() {
try { try {
const res = await fetch(`${API_ADDRESS.apiGetRoleUser}`) const res = await funGetRoleUser();
const data = await res.json() setListUserRole(res.data)
setListUserRole(data)
} catch (error) { } catch (error) {
console.error(error) console.error(error)
} }
@@ -116,32 +95,22 @@ export default function EditMember({ id }: { id: string | undefined }) {
async function onSubmit(val: boolean) { async function onSubmit(val: boolean) {
try { try {
const res = await fetch(API_ADDRESS.apiUpdateUser, {
method: "POST", const res = await funEditMember(id,{
headers: { id: data.id,
"Content-Type": "application/json", nik: data.nik,
}, name: data.name,
body: JSON.stringify({ phone: data.phone,
id: data.id, email: data.email,
nik: data.nik, gender: data.gender,
name: data.name, idGroup: data.idGroup,
phone: data.phone, idPosition: data.idPosition,
email: data.email, idUserRole: data.idUserRole
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) { } catch (error) {
toast.error('Error'); toast.error('Error');
} }

90
src/module/user/member/ui/list_member.tsx
View File

@@ -1,40 +1,58 @@
'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() { 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 ( return (
<Box p={20}> <Box p={20}>
<Tabs variant="pills" color='#FF9861' radius="xl" defaultValue="aktif"> <Tabs
<Tabs.List bg={"white"} style={{ variant="pills"
border: `1px solid ${"#EDEDED"}`, color="#FF9861"
padding: 5, radius="xl"
borderRadius: 100 defaultValue={status == "false" ? "false" : "true"}
}}> >
<Tabs.Tab value="aktif" w={"45%"} leftSection={<IoMdCheckmarkCircleOutline style={iconStyle} />}> <Tabs.List
Aktif bg={"white"}
</Tabs.Tab> style={{
<Tabs.Tab value="tidak-aktif" w={"53%"} leftSection={<IoCloseCircleOutline style={iconStyle} />}> border: `1px solid ${"#EDEDED"}`,
Tidak Aktif padding: 5,
</Tabs.Tab> borderRadius: 100,
</Tabs.List> }}
>
<Tabs.Panel value="aktif"> <Tabs.Tab
<TabListMember status={true} /> value="true"
</Tabs.Panel> w={"45%"}
leftSection={<IoMdCheckmarkCircleOutline style={iconStyle} />}
<Tabs.Panel value="tidak-aktif"> onClick={() => {
<TabListMember status={false} /> router.push("/member?active=true");
{/* <TabListMember /> */} }}
</Tabs.Panel> >
</Tabs> Aktif
</Box> </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>
);
} }

38
src/module/user/member/ui/navbar_detail_member.tsx
View File

@@ -11,26 +11,16 @@ import { MdEmail } from "react-icons/md";
import { IoMaleFemale } from "react-icons/io5"; import { IoMaleFemale } from "react-icons/io5";
import { useShallowEffect } from "@mantine/hooks"; import { useShallowEffect } from "@mantine/hooks";
import Link from "next/link"; 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 [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(() => { useShallowEffect(() => {
featchGetOne() featchGetOne()
@@ -39,11 +29,17 @@ export default function NavbarDetailMember({ id }: IdMember) {
async function featchGetOne() { async function featchGetOne() {
try { 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) { } catch (error) {
console.error(error) console.error(error)
toast.error("Gagal mendapatkan detail user, coba lagi nanti");
} }
} }
@@ -103,7 +99,7 @@ export default function NavbarDetailMember({ id }: IdMember) {
</Group> </Group>
</Box> </Box>
<LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}> <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> </LayoutDrawer>
</Box> </Box>
</Box> </Box>

24
src/module/user/member/ui/tab_list_member.tsx
View File

@@ -5,35 +5,25 @@ import { useShallowEffect } from "@mantine/hooks"
import { useRouter, useSearchParams } from "next/navigation" import { useRouter, useSearchParams } from "next/navigation"
import { useEffect, useState } from "react" import { useEffect, useState } from "react"
import { HiMagnifyingGlass, HiMiniUser } from "react-icons/hi2" 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 router = useRouter()
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [dataMember, setDataMember] = useState<dataMember[]>([]) const [dataMember, setDataMember] = useState<IListMember[]>([])
const searchParams = useSearchParams() const searchParams = useSearchParams()
const [searchQuery, setSearchQuery] = useState('') const [searchQuery, setSearchQuery] = useState('')
const group = searchParams.get('group') const group = searchParams.get('group')
const status = searchParams.get('active')
async function getAllUser() { async function getAllUser() {
try { try {
setLoading(true) 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) { } catch (error) {
console.error(error) console.error(error)
throw new Error("Error") throw new Error("Error")

14
src/module/user/member/ui/view_create_member.tsx
View File

@@ -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>
)
}

14
src/module/user/member/ui/view_detail_member.tsx
View File

@@ -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>
)
}

14
src/module/user/member/ui/view_edit_member.tsx
View File

@@ -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>
)
}

12
src/module/user/member/ui/view_list_member.tsx
View File

@@ -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>
)
}