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

feat : update member

Browse Source
This commit is contained in:
lukman
2024-08-09 17:27:34 +08:00
parent 5b4b780af5
commit 8b97a6f27d
19 changed files with 427 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

307
src/module/user/member/ui/create_member.tsx Normal file
View File

@@ -0,0 +1,307 @@
'use client'
import { API_ADDRESS, WARNA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { funGetAllGroup, IDataGroup } from "@/module/group";
import { Box, Button, Select, Stack, TextInput } from "@mantine/core";
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;
}
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 [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 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) {
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'
},
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
})
})
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) }} />
</Box>
)
}

83
src/module/user/member/ui/drawer_detail_member.tsx Normal file
View File

@@ -0,0 +1,83 @@
'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";
import { useShallowEffect } from "@mantine/hooks";
import { useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import { FaPencil, FaToggleOff } from "react-icons/fa6";
import { ImUserCheck } from "react-icons/im";
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)
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");
}
}
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>
)
}

50
src/module/user/member/ui/drawer_list_member.tsx Normal file
View File

@@ -0,0 +1,50 @@
import { WARNA } from '@/module/_global';
import { Box, Flex, SimpleGrid, Stack, Text } from '@mantine/core';
import { useRouter } from 'next/navigation';
import React, { useState } from 'react';
import { IoAddCircle } from "react-icons/io5";
import { RiFilter2Line } from 'react-icons/ri';
export default function DrawerListMember() {
const router = useRouter()
return (
<Box>
<Stack pt={10}>
<SimpleGrid
cols={{ base: 3, sm: 3, lg: 3 }}
>
<Flex justify={'center'} align={'center'} direction={'column'}
style={{
cursor: 'pointer'
}}
onClick={() => {
router.push('/member/create')
}}
>
<Box>
<IoAddCircle size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text c={WARNA.biruTua} ta='center'>Tambah Anggota</Text>
</Box>
</Flex>
<Flex justify={'center'} align={'center'} direction={'column'}
style={{ cursor: 'pointer' }}
onClick={() => {
router.push('/member?page=filter')
}}
>
<Box>
<RiFilter2Line size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text c={WARNA.biruTua} ta='center'>Filter</Text>
</Box>
</Flex>
</SimpleGrid>
</Stack>
</Box>
);
}

322
src/module/user/member/ui/edit_member.tsx Normal file
View File

@@ -0,0 +1,322 @@
'use client'
import { API_ADDRESS, WARNA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { funGetAllGroup, IDataGroup } from "@/module/group";
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;
}
type dataPosition = {
id: string;
name: string;
};
type dataROleUser = {
id: string;
name: string;
}
export default function EditMember({ id }: { id: string | undefined }) {
const [isModal, setModal] = useState(false)
const router = useRouter()
const [listGroup, setListGorup] = useState<IDataGroup[]>([])
const [listPosition, setListPosition] = useState<dataPosition[]>([])
const [listUserRole, setListUserRole] = useState<dataROleUser[]>([])
const [data, setData] = useState<dataMember>({
id: "",
nik: "",
name: "",
phone: "",
email: "",
gender: "",
idGroup: "",
idPosition: "",
idUserRole: "",
})
const [listData, setListData] = useState<dataMember>()
async function getAllGroup() {
try {
const 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 getOneData() {
try {
const res = await fetch(`${API_ADDRESS.apiGetOneUser}&userID=${id}`)
const data = await res.json()
setData(data)
getAllPosition(data?.idGroup)
} catch (error) {
console.error(error)
}
}
async function getAllPosition(val: any) {
try {
const res = await fetch(`${API_ADDRESS.apiGetAllPosition}&groupId=${val}&active=true`)
const data = await res.json()
setListPosition(data)
} catch (error) {
console.error(error)
}
}
async function getAllUserRole() {
try {
const res = await fetch(`${API_ADDRESS.apiGetRoleUser}`)
const data = await res.json()
setListUserRole(data)
} catch (error) {
console.error(error)
}
}
async function changeGrup(val: any) {
setListPosition([])
setData({
...data,
idGroup: val,
idPosition: ""
})
getAllPosition(val)
}
useShallowEffect(() => {
getAllGroup()
getOneData()
getAllUserRole()
}, [])
async function onSubmit(val: boolean) {
try {
const res = await fetch(API_ADDRESS.apiUpdateUser, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
id: data.id,
nik: data.nik,
name: data.name,
phone: data.phone,
email: data.email,
gender: data.gender,
idGroup: data.idGroup,
idPosition: data.idPosition,
idUserRole: data.idUserRole
}),
})
const respon = await res.json()
if (res.status == 200) {
toast.success(respon.message)
} else {
toast.error(respon.message)
}
router.push('/member')
} catch (error) {
toast.error('Error');
}
}
return (
<Box>
<Stack
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)
}}
value={data?.idGroup}
/>
<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) => setData({ ...data, idPosition: val })}
value={(data?.idPosition == "") ? null : data.idPosition}
/>
<Select
placeholder="Pilih Role" label="User Role" w={"100%"} size="md" required withAsterisk radius={30}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
data={
listUserRole
? listUserRole.map((data) => ({
value: data.id,
label: data.name,
}))
: []
}
onChange={(val: any) => setData({ ...data, idUserRole: val })}
value={data?.idUserRole}
/>
<TextInput
size="md" type="number" radius={30} placeholder="NIK" withAsterisk label="NIK" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
onChange={(e) => setData({ ...data, nik: e.target.value })}
value={data.nik}
/>
<TextInput
size="md" type="text" radius={30} placeholder="Nama" withAsterisk label="Nama" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
onChange={(e) => setData({ ...data, name: e.target.value })}
value={data.name}
/>
<TextInput
size="md" type="email" radius={30} placeholder="Email" withAsterisk label="Email" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
onChange={(e) => setData({ ...data, email: e.target.value })}
value={data.email}
/>
<TextInput
size="md" type="number" radius={30} placeholder="+62...." withAsterisk label="Nomor Telepon" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
onChange={(e) => setData({ ...data, phone: e.target.value })}
value={data.phone}
/>
<Select
placeholder="Pilih Gender" label="Gender" w={"100%"} size="md" required withAsterisk radius={30}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
data={
[
{
value: "M",
label: "Laki-laki"
},
{
value: "F",
label: "Perempuan"
}
]
}
onChange={(val: any) => setData({ ...data, gender: val })}
value={data.gender}
/>
</Stack>
<Box mt={30} mx={20} pb={20}>
<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 mengubah data?"
onYes={(val) => {
if (val)
onSubmit(val)
setModal(false)
}
} />
</Box>
)
}

40
src/module/user/member/ui/list_member.tsx Normal file
View File

@@ -0,0 +1,40 @@
'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';
export default function ListMember() {
const iconStyle = { width: rem(20), height: rem(20) };
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>
);
}

23
src/module/user/member/ui/navbar_create_member.tsx Normal file
View File

@@ -0,0 +1,23 @@
'use client'
import { LayoutIconBack, LayoutNavbarHome } from '@/module/_global';
import { Box, Grid, Text } from '@mantine/core';
import React from 'react';
export default function NavbarCreateMember() {
return (
<Box>
<LayoutNavbarHome>
<Grid justify='center' align='center'>
<Grid.Col span="auto">
<LayoutIconBack />
</Grid.Col>
<Grid.Col span={6}>
<Text ta={'center'} fw={'bold'} c={'white'}>Tambah Anggota</Text>
</Grid.Col>
<Grid.Col span="auto"></Grid.Col>
</Grid>
</LayoutNavbarHome>
</Box>
);
}

111
src/module/user/member/ui/navbar_detail_member.tsx Normal file
View File

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

23
src/module/user/member/ui/navbar_edit_member.tsx Normal file
View File

@@ -0,0 +1,23 @@
'use client'
import { LayoutIconBack, LayoutNavbarHome } from '@/module/_global';
import { Box, Grid, Text } from '@mantine/core';
import React from 'react';
export default function NavbarEditMember() {
return (
<Box>
<LayoutNavbarHome>
<Grid justify='center' align='center'>
<Grid.Col span="auto">
<LayoutIconBack />
</Grid.Col>
<Grid.Col span={6}>
<Text ta={'center'} fw={'bold'} c={'white'}>Edit Anggota</Text>
</Grid.Col>
<Grid.Col span="auto"></Grid.Col>
</Grid>
</LayoutNavbarHome>
</Box>
);
}

24
src/module/user/member/ui/navbar_list_member.tsx Normal file
View File

@@ -0,0 +1,24 @@
'use client'
import { LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
import { ActionIcon } from "@mantine/core";
import { HiMenu } from "react-icons/hi";
import DrawerListMember from "./drawer_list_member";
import { useState } from "react";
export default function NavbarListMember() {
const [isOpenDrawer, setOpenDrawer] = useState(false)
return (
<>
<LayoutNavbarNew back="/home" title="Anggota"
menu={
<ActionIcon onClick={() => setOpenDrawer(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMenu size={20} color='white' />
</ActionIcon>
}
/>
<LayoutDrawer opened={isOpenDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
<DrawerListMember />
</LayoutDrawer>
</>
)
}

92
src/module/user/member/ui/tab_list_member.tsx Normal file
View File

@@ -0,0 +1,92 @@
import { API_ADDRESS, WARNA } from "@/module/_global"
import { Box, Group, ActionIcon, Text, TextInput } from "@mantine/core"
import { useShallowEffect } from "@mantine/hooks"
import { useRouter, useSearchParams } from "next/navigation"
import { useEffect, useState } from "react"
import { HiMagnifyingGlass, HiMiniUser } from "react-icons/hi2"
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 }) {
const router = useRouter()
const [loading, setLoading] = useState(true);
const [dataMember, setDataMember] = useState<dataMember[]>([])
const searchParams = useSearchParams()
const [searchQuery, setSearchQuery] = useState('')
const group = searchParams.get('group')
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)
} catch (error) {
console.error(error)
throw new Error("Error")
} finally {
setLoading(false)
}
}
useShallowEffect(() => {
getAllUser()
}, [status, searchQuery])
return (
<>
<Box>
<TextInput
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
size="md"
radius={30}
leftSection={<HiMagnifyingGlass size={20} />}
placeholder="Pencarian"
onChange={(e) => setSearchQuery(e.target.value)}
my={10}
/>
{dataMember.map((v, i) => {
return (
<Box pt={20} key={i} onClick={() => {
router.push(`/member/${v.id}`)
}}>
<Group align='center' style={{
borderBottom: `1px solid #D9D9D9`,
padding: 10,
}} >
<Box>
<ActionIcon variant="light" bg={WARNA.biruTua} size={50} radius={100} aria-label="icon">
<HiMiniUser color={'white'} size={25} />
</ActionIcon>
</Box>
<Box>
<Text fw={'bold'} c={WARNA.biruTua}>{v.name}</Text>
<Text fw={'lighter'} fz={12}>{v.group + ' - ' + v.position}</Text>
</Box>
</Group>
</Box>
)
})}
</Box>
</>
)
}

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

@@ -0,0 +1,14 @@
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 Normal file
View File

@@ -0,0 +1,14 @@
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 Normal file
View File

@@ -0,0 +1,14 @@
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 Normal file
View File

@@ -0,0 +1,12 @@
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>
)
}