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

Merge pull request #28 from bipproduction/amalia/8-jul-24

Browse Source 
Amalia/8 jul 24
This commit is contained in:
Amalia
2024-07-08 17:25:40 +08:00
committed by GitHub
parent e5bdfaeaa7 b490058803
commit e1e9aca22c
26 changed files with 523 additions and 386 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/module/_global/layout/layout_icon_back.tsx
View File

@@ -11,7 +11,7 @@ function LayoutIconBack({ back }: { back?: string }) {
return (
<Box>
<ActionIcon variant="light" onClick={() => {
if (!_.isUndefined(back) && !_.isNull(back)) {
if (!_.isUndefined(back) && !_.isNull(back) && !_.isEmpty(back)) {
return router.push(back)
} else {
return router.back()

5
src/module/_global/layout/layout_modal.tsx
View File

@@ -1,11 +1,12 @@
import { useHookstate } from '@hookstate/core';
import { Box, Button, Flex, Modal, Text } from '@mantine/core';
import React from 'react';
import React, { useState } from 'react';
import { BsQuestionCircleFill } from 'react-icons/bs';
import { isModal } from '../val/isModal';
export default function LayoutModal({ opened, onClose, description, onYes }: { opened: boolean, onClose: () => void, description: string, onYes: (val: boolean) => void }) {
const openModal = useHookstate(isModal)
const [isValModal, setValModal] = useState(opened)
return (
<Modal styles={{
body: {
@@ -21,7 +22,7 @@ export default function LayoutModal({ opened, onClose, description, onYes }: { o
<Text mt={30} ta={"center"} fw={"bold"} fz={18}>{description}</Text>
<Box mt={30} w={'100%'}>
<Button mb={20} fullWidth size="lg" radius={'xl'} bg={'#4754F0'} onClick={() => onYes(true)}>YA</Button>
<Button fullWidth size="lg" radius={'xl'} bg={'#DCE1FE'} c={'#4754F0'} onClick={() => openModal.set(false)}>TIDAK</Button>
<Button fullWidth size="lg" radius={'xl'} bg={'#DCE1FE'} c={'#4754F0'} onClick={() => onYes(false)}>TIDAK</Button>
</Box>
</Flex>
</Modal>

76
src/module/announcement/component/create_announcement.tsx Normal file
View File

@@ -0,0 +1,76 @@
'use client'
import { WARNA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { Box, Button, Stack, Textarea, TextInput } from "@mantine/core";
import { useState } from "react";
import toast from "react-hot-toast";
import { HiOutlineChevronRight } from "react-icons/hi2";
export default function CreateAnnouncement() {
const [isOpen, setOpen] = useState(false)
function onTrue(val: boolean) {
if (val) {
toast.success("Sukses! Data tersimpan");
}
setOpen(false)
}
return (
<Box>
<Stack
align="center"
justify="center"
gap="xs"
pt={30}
px={20}
>
<TextInput
size="md" type="text" radius={30} placeholder="Judul Pengumuman" withAsterisk label="Judul" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
/>
<Textarea
size="md"
radius={20}
w={"100%"}
label="Pengumuman"
withAsterisk
placeholder="Deskripsi Pengumuman"
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
/>
<Button rightSection={<HiOutlineChevronRight size={14} />} variant="default" fullWidth radius={30} size="md" mt={10}>
Pilih Anggota
</Button>
</Stack>
<Box mt={30} mx={20}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="md"
radius={30}
fullWidth
onClick={() => { setOpen(true) }}
>
Simpan
</Button>
</Box>
<LayoutModal opened={isOpen} onClose={() => setOpen(false)}
description="Apakah Anda yakin ingin menambahkan data?"
onYes={(val) => { onTrue(val) }} />
</Box>
)
}

74
src/module/announcement/component/edit_announcement.tsx Normal file
View File

@@ -0,0 +1,74 @@
'use client'
import { WARNA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { Box, Button, Stack, Textarea, TextInput } from "@mantine/core";
import { useState } from "react";
import toast from "react-hot-toast";
import { HiOutlineChevronRight } from "react-icons/hi2";
export default function EditAnnouncement() {
const [isOpen, setOpen] = useState(false)
function onTrue(val: boolean) {
if (val) {
toast.success("Sukses! Data tersimpan");
}
setOpen(false)
}
return (
<>
<Stack
align="center"
justify="center"
gap="xs"
pt={30}
px={20}
>
<TextInput
size="md" type="text" radius={30} placeholder="Judul Pengumuman" withAsterisk label="Judul" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
/>
<Textarea
size="md"
radius={20}
w={"100%"}
label="Pengumuman"
withAsterisk
placeholder="Deskripsi Pengumuman"
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
/>
<Button rightSection={<HiOutlineChevronRight size={14} />} variant="default" fullWidth radius={30} size="md" mt={10}>
Pilih Anggota
</Button>
</Stack>
<Box mt={30} mx={20}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="md"
radius={30}
fullWidth
onClick={() => { setOpen(true) }}
>
Simpan
</Button>
</Box>
<LayoutModal opened={isOpen} onClose={() => setOpen(false)}
description="Apakah Anda yakin ingin mengubah data?"
onYes={(val) => { onTrue(val) }} />
</>
)
}

10
src/module/announcement/component/ui/drawer_announcement.tsx
View File

@@ -1,18 +1,13 @@
import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
import { useHookstate } from '@hookstate/core';
import { Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
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 DrawerAnnouncement() {
const openDrawer = useHookstate(isDrawer)
const router = useRouter()
function onCLose() {
openDrawer.set(false)
}
return (
<Box>
<Stack pt={10}>
@@ -22,7 +17,6 @@ export default function DrawerAnnouncement() {
<Flex justify={'center'} align={'center'} direction={'column'}
onClick={() => {
router.push('/announcement/create')
onCLose()
}}
>
<Box>

27
src/module/announcement/component/ui/drawer_detail_announcement.tsx
View File

@@ -1,16 +1,21 @@
import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
import { useHookstate } from '@hookstate/core';
import { Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import { WARNA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { Box, Flex, SimpleGrid, Stack, Text, } from '@mantine/core';
import { useRouter } from 'next/navigation';
import React, { useState } from 'react';
import toast from 'react-hot-toast';
import { FaPencil, FaTrash } from 'react-icons/fa6';
export default function DrawerDetailAnnouncement() {
const openDrawer = useHookstate(isDrawer)
export default function DrawerDetailAnnouncement({ onDeleted }: { onDeleted: (val: boolean) => void }) {
const router = useRouter()
const [isOpen, setOpen] = useState(false)
function onCLose() {
openDrawer.set(false)
function onTrue(val: boolean) {
if (val) {
toast.success('Sukses! Data terhapus')
onDeleted(true)
}
setOpen(false)
}
return (
<Box>
@@ -18,7 +23,7 @@ export default function DrawerDetailAnnouncement() {
<SimpleGrid
cols={{ base: 3, sm: 3, lg: 3 }}
>
<Flex justify={'center'} align={'center'} direction={'column'}>
<Flex style={{ cursor: 'pointer' }} justify={'center'} align={'center'} direction={'column'} onClick={() => setOpen(true)}>
<Box>
<FaTrash size={30} color={WARNA.biruTua} />
</Box>
@@ -29,8 +34,7 @@ export default function DrawerDetailAnnouncement() {
<Flex justify={'center'} align={'center'} direction={'column'} onClick={() => {
router.push('edit/123')
onCLose()
}}>
}} style={{ cursor: 'pointer' }}>
<Box>
<FaPencil size={30} color={WARNA.biruTua} />
</Box>
@@ -40,6 +44,9 @@ export default function DrawerDetailAnnouncement() {
</Flex>
</SimpleGrid>
</Stack>
<LayoutModal opened={isOpen} onClose={() => setOpen(false)}
description="Apakah Anda yakin ingin menghapus data?"
onYes={(val) => { onTrue(val) }} />
</Box>
);
}

12
src/module/announcement/component/ui/navbar_announcement.tsx
View File

@@ -1,23 +1,23 @@
"use client"
import { isDrawer, LayoutDrawer, LayoutIconBack, LayoutNavbarHome, LayoutNavbarNew, WARNA } from '@/module/_global';
import { ActionIcon, Box, Drawer, Grid, Group, Text } from '@mantine/core';
import { useRouter } from 'next/navigation';
import React from 'react';
import { isDrawer, LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
import { ActionIcon } from '@mantine/core';
import React, { useState } from 'react';
import { HiMenu } from "react-icons/hi";
import { useHookstate } from '@hookstate/core';
import DrawerAnnouncement from './drawer_announcement';
export default function NavbarAnnouncement() {
const openDrawer = useHookstate(isDrawer)
const [isOpen, setOpen] = useState(false)
return (
<>
<LayoutNavbarNew back='/home' title='pengumuman'
menu={
<ActionIcon onClick={() => openDrawer.set(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<ActionIcon onClick={() => setOpen(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMenu size={20} color='white' />
</ActionIcon>
} />
<LayoutDrawer opened={openDrawer.get()} title={'MENU'} onClose={() => openDrawer.set(false)}>
<LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>
<DrawerAnnouncement />
</LayoutDrawer>
</>

35
src/module/announcement/component/ui/navbar_detail_announcement.tsx
View File

@@ -1,33 +1,22 @@
'use client'
import { isDrawer, LayoutDrawer, LayoutIconBack, LayoutNavbarHome, WARNA } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
import { ActionIcon, Box, Grid, Group, Text } from "@mantine/core";
import { LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
import { ActionIcon, Box } from "@mantine/core";
import { HiMenu } from "react-icons/hi";
import DrawerDetailAnnouncement from "./drawer_detail_announcement";
import { useState } from "react";
export default function NavbarDetailAnnouncement() {
const openDrawer = useHookstate(isDrawer)
const [isOpenDrawer, setOpenDrawer] = useState(false)
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'}>PENGUMUMAN</Text>
</Grid.Col>
<Grid.Col span="auto">
<Group justify='flex-end'>
<ActionIcon onClick={() => openDrawer.set(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMenu size={20} color='white' />
</ActionIcon>
</Group>
</Grid.Col>
</Grid>
</LayoutNavbarHome>
<LayoutDrawer opened={openDrawer.get()} title={'MENU'} onClose={() => openDrawer.set(false)}>
<DrawerDetailAnnouncement />
<LayoutNavbarNew back="" title="Pengumuman"
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)}>
<DrawerDetailAnnouncement onDeleted={() => setOpenDrawer(false)} />
</LayoutDrawer>
</Box>
)

56
src/module/announcement/view/view_create_announcement.tsx
View File

@@ -1,60 +1,14 @@
import { WARNA } from "@/module/_global";
import { LayoutNavbarNew, WARNA } from "@/module/_global";
import { Box, Stack, TextInput, Button, Textarea } from "@mantine/core";
import { HiOutlineChevronRight, HiUser } from "react-icons/hi2";
import NavbarCreateAnnouncement from "../component/ui/navbar_create_announcement";
import CreateAnnouncement from "../component/create_announcement";
export default function ViewCreateAnnouncement() {
return (
<Box>
<NavbarCreateAnnouncement />
<Stack
align="center"
justify="center"
gap="xs"
pt={30}
px={20}
>
<TextInput
size="md" type="text" radius={30} placeholder="Judul Pengumuman" withAsterisk label="Judul" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
/>
<Textarea
size="md"
radius={20}
w={"100%"}
label="Pengumuman"
withAsterisk
placeholder="Deskripsi Pengumuman"
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
/>
<Button rightSection={<HiOutlineChevronRight size={14} />} variant="default" fullWidth radius={30} size="md" mt={10}>
Pilih Anggota
</Button>
</Stack>
<Box mt={30} mx={20}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="md"
radius={30}
fullWidth
>
Simpan
</Button>
</Box>
{/* <NavbarCreateAnnouncement /> */}
<LayoutNavbarNew back="" title="Tambah Pengumuman" menu={<></>} />
<CreateAnnouncement/>
</Box>
)
}

56
src/module/announcement/view/view_edit_announcement.tsx
View File

@@ -1,60 +1,14 @@
import { Box, Button, Stack, Textarea, TextInput } from "@mantine/core";
import NavbarEditAnnouncement from "../component/ui/navbar_edit_announcement";
import { WARNA } from "@/module/_global";
import { LayoutNavbarNew, WARNA } from "@/module/_global";
import { HiOutlineChevronRight } from "react-icons/hi2";
import EditAnnouncement from "../component/edit_announcement";
export default function ViewEditAnnouncement({ data }: { data: string }) {
return (
<Box>
<NavbarEditAnnouncement />
<Stack
align="center"
justify="center"
gap="xs"
pt={30}
px={20}
>
<TextInput
size="md" type="text" radius={30} placeholder="Judul Pengumuman" withAsterisk label="Judul" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
/>
<Textarea
size="md"
radius={20}
w={"100%"}
label="Pengumuman"
withAsterisk
placeholder="Deskripsi Pengumuman"
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
/>
<Button rightSection={<HiOutlineChevronRight size={14} />} variant="default" fullWidth radius={30} size="md" mt={10}>
Pilih Anggota
</Button>
</Stack>
<Box mt={30} mx={20}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="md"
radius={30}
fullWidth
>
Simpan
</Button>
</Box>
{/* <NavbarEditAnnouncement /> */}
<LayoutNavbarNew back="" title="Edit Pengumuman" menu={<></>} />
<EditAnnouncement />
</Box>
)
}

28
src/module/position/component/ui/drawer_detail_position.tsx
View File

@@ -1,25 +1,39 @@
import { isDrawer, LayoutDrawer, WARNA } from "@/module/_global"
import LayoutModal from "@/module/_global/layout/layout_modal"
import { useHookstate } from "@hookstate/core"
import { Box, Stack, SimpleGrid, Flex, Text, Select, TextInput, Button } from "@mantine/core"
import router from "next/router"
import { useState } from "react"
import toast from "react-hot-toast"
import { FaPencil } from "react-icons/fa6"
import { ImUserCheck } from "react-icons/im"
export default function DrawerDetailPosition() {
export default function DrawerDetailPosition({ onUpdated }: { onUpdated: (val: boolean) => void }) {
const [openDrawerGroup, setOpenDrawerGroup] = useState(false)
const openDrawer = useHookstate(isDrawer)
const [isModal, setModal] = useState(false)
function onCLose() {
onUpdated(true)
setOpenDrawerGroup(false)
openDrawer.set(false)
}
function onTrue(val: boolean) {
if (val) {
onUpdated(true)
}
setModal(false)
}
return (
<Box>
<Stack pt={10}>
<SimpleGrid
cols={{ base: 3, sm: 3, lg: 3 }}
>
<Flex justify={'center'} align={'center'} direction={'column'}>
<Flex justify={'center'} align={'center'} direction={'column'}
style={{ cursor: 'pointer' }}
onClick={() => setModal(true)}
>
<Box>
<ImUserCheck size={30} color={WARNA.biruTua} />
</Box>
@@ -29,6 +43,7 @@ export default function DrawerDetailPosition() {
</Flex>
<Flex justify={'center'} align={'center'} direction={'column'}
style={{ cursor: 'pointer' }}
onClick={() => setOpenDrawerGroup(true)}
>
<Box>
@@ -87,6 +102,11 @@ export default function DrawerDetailPosition() {
</Box>
</Box>
</LayoutDrawer>
<LayoutModal opened={isModal} onClose={() => setModal(false)}
description="Apakah Anda yakin ingin mengubah status aktifasi data?"
onYes={(val) => { onTrue(val) }} />
</Box>
)
}

6
src/module/position/component/ui/drawer_list_position.tsx
View File

@@ -1,16 +1,14 @@
import { isDrawer, WARNA, LayoutDrawer } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
import { Box, Stack, SimpleGrid, Flex, TextInput, Button, Text, Select } from "@mantine/core";
import { useState } from "react";
import { IoAddCircle } from "react-icons/io5";
export default function DrawerListPosition() {
export default function DrawerListPosition({ onCreated }: { onCreated: (val: boolean) => void }) {
const [openDrawerGroup, setOpenDrawerGroup] = useState(false)
const openDrawer = useHookstate(isDrawer)
function onCLose() {
setOpenDrawerGroup(false)
openDrawer.set(false)
onCreated(true)
}
return (
<Box>

14
src/module/position/component/ui/list_position_active.tsx
View File

@@ -4,6 +4,7 @@ import React, { useState } from 'react';
import { FaUserTie } from 'react-icons/fa6';
import { HiMagnifyingGlass } from 'react-icons/hi2';
import DrawerDetailPosition from './drawer_detail_position';
import toast from 'react-hot-toast';
const dataGroup = [
{
@@ -42,6 +43,7 @@ const dataGroup = [
export default function ListPositionActive() {
const [openDrawer, setOpenDrawer] = useState(false)
const [isData, setData] = useState("")
return (
<Box pt={20}>
<TextInput
@@ -64,7 +66,10 @@ export default function ListPositionActive() {
border: `1px solid ${"#DCEED8"}`,
padding: 10,
borderRadius: 10
}} onClick={() => setOpenDrawer(true)} >
}} onClick={() => {
setData(v.name)
setOpenDrawer(true)
}} >
<Box>
<ActionIcon variant="light" bg={'#DCEED8'} size={50} radius={100} aria-label="icon">
<FaUserTie color={WARNA.biruTua} size={25} />
@@ -77,8 +82,11 @@ export default function ListPositionActive() {
</Box>
)
})}
<LayoutDrawer opened={openDrawer} onClose={() => setOpenDrawer(false)} title="LEMBAGA PENGKREDITAN DESA">
<DrawerDetailPosition />
<LayoutDrawer opened={openDrawer} onClose={() => setOpenDrawer(false)} title={isData}>
<DrawerDetailPosition onUpdated={() => {
setOpenDrawer(false)
toast.success('Sukses! data tersimpan')
}} />
</LayoutDrawer>
</Box>
);

14
src/module/position/component/ui/list_position_nonactive.tsx
View File

@@ -4,6 +4,7 @@ import React, { useState } from 'react';
import { FaUserTie } from 'react-icons/fa6';
import { HiMagnifyingGlass } from 'react-icons/hi2';
import DrawerDetailPosition from './drawer_detail_position';
import toast from 'react-hot-toast';
const dataGroup = [
{
@@ -42,6 +43,7 @@ const dataGroup = [
export default function ListPositionNonActive() {
const [openDrawer, setOpenDrawer] = useState(false)
const [isData, setData] = useState("")
return (
<Box pt={20}>
<TextInput
@@ -64,7 +66,10 @@ export default function ListPositionNonActive() {
border: `1px solid ${"#DCEED8"}`,
padding: 10,
borderRadius: 10
}} onClick={() => setOpenDrawer(true)}>
}} onClick={() => {
setData(v.name)
setOpenDrawer(true)
}}>
<Box>
<ActionIcon variant="light" bg={'#DCEED8'} size={50} radius={100} aria-label="icon">
<FaUserTie color={WARNA.biruTua} size={25} />
@@ -77,8 +82,11 @@ export default function ListPositionNonActive() {
</Box>
)
})}
<LayoutDrawer opened={openDrawer} onClose={() => setOpenDrawer(false)} title="LEMBAGA PENGKREDITAN DESA">
<DrawerDetailPosition />
<LayoutDrawer opened={openDrawer} onClose={() => setOpenDrawer(false)} title={isData}>
<DrawerDetailPosition onUpdated={() => {
setOpenDrawer(false)
toast.success('Sukses! data tersimpan')
}} />
</LayoutDrawer>
</Box>
);

40
src/module/position/component/ui/navbar_list_position.tsx
View File

@@ -1,33 +1,27 @@
'use client'
import { LayoutNavbarHome, LayoutIconBack, WARNA, LayoutDrawer, isDrawer } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
import { Grid, Group, ActionIcon, Box, Text } from "@mantine/core";
import { WARNA, LayoutDrawer, LayoutNavbarNew } from "@/module/_global";
import { ActionIcon, Box } from "@mantine/core";
import { HiMenu } from "react-icons/hi";
import DrawerListPosition from "./drawer_list_position";
import { useState } from "react";
import toast from "react-hot-toast";
export default function NavbarListPosition() {
const openDrawerMenu = useHookstate(isDrawer)
const [isOpen, setOpen] = useState(false)
return (
<Box>
<LayoutNavbarHome>
<Grid justify='center' align='center'>
<Grid.Col span="auto">
<LayoutIconBack back='/home' />
</Grid.Col>
<Grid.Col span={6}>
<Text ta={'center'} fw={'bold'} c={'white'}>Jabatan</Text>
</Grid.Col>
<Grid.Col span="auto">
<Group justify='flex-end'>
<ActionIcon onClick={() => openDrawerMenu.set(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMenu size={20} color='white' />
</ActionIcon>
</Group>
</Grid.Col>
</Grid>
</LayoutNavbarHome>
<LayoutDrawer opened={openDrawerMenu.get()} title={'MENU'} onClose={() => openDrawerMenu.set(false)}>
<DrawerListPosition />
<LayoutNavbarNew back="/home" title="Jabatan"
menu={
<ActionIcon onClick={() => setOpen(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMenu size={20} color='white' />
</ActionIcon>
}
/>
<LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>
<DrawerListPosition onCreated={() => {
setOpen(false)
toast.success('Sukses! data tersimpan')
}} />
</LayoutDrawer>
</Box>
);

92
src/module/user/member/component/create_member.tsx Normal file
View File

@@ -0,0 +1,92 @@
'use client'
import { WARNA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { Box, Button, Stack, TextInput } from "@mantine/core";
import { useState } from "react";
import toast from "react-hot-toast";
import { HiUser } from "react-icons/hi2";
export default function CreateMember() {
const [isModal, setModal] = useState(false)
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>
<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,
},
}}
/>
<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,
},
}}
/>
<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,
},
}}
/>
<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,
},
}}
/>
</Stack>
<Box mt={30} mx={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) => { onTrue(val) }} />
</Box>
)
}

91
src/module/user/member/component/edit_member.tsx Normal file
View File

@@ -0,0 +1,91 @@
'use client'
import { WARNA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { Box, Button, Stack, TextInput } from "@mantine/core";
import { useState } from "react";
import toast from "react-hot-toast";
import { HiUser } from "react-icons/hi2";
export default function EditMember() {
const [isModal, setModal] = useState(false)
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>
<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,
},
}}
/>
<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,
},
}}
/>
<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,
},
}}
/>
<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,
},
}}
/>
</Stack>
<Box mt={30} mx={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) => { onTrue(val) }} />
</Box>
)
}

29
src/module/user/member/component/ui/drawer_detail_member.tsx
View File

@@ -1,21 +1,39 @@
'use client'
import { isDrawer, WARNA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { useHookstate } from "@hookstate/core";
import { Box, Flex, SimpleGrid, Stack, Text } from "@mantine/core";
import { useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import { FaPencil } from "react-icons/fa6";
import { ImUserCheck } from "react-icons/im";
export default function DrawerDetailMember() {
export default function DrawerDetailMember({ onDeleted }: { onDeleted: (val: boolean) => void }) {
const router = useRouter()
const openDrawer = useHookstate(isDrawer)
const [isModal, setModal] = useState(false)
function onTrue(val: boolean) {
if (val) {
toast.success('Sukses! data tersimpan')
onDeleted(true)
}
setModal(false)
}
return (
<Box>
<Stack pt={10}>
<SimpleGrid
cols={{ base: 3, sm: 3, lg: 3 }}
>
<Flex justify={'center'} align={'center'} direction={'column'}>
<Flex justify={'center'} align={'center'} direction={'column'}
style={{ cursor: 'pointer' }}
onClick={() => {
setModal(true)
}}
>
<Box>
<ImUserCheck size={30} color={WARNA.biruTua} />
</Box>
@@ -25,9 +43,9 @@ export default function DrawerDetailMember() {
</Flex>
<Flex justify={'center'} align={'center'} direction={'column'}
style={{ cursor: 'pointer' }}
onClick={() => {
router.push('/member/edit/123')
openDrawer.set(false)
}}
>
<Box>
@@ -39,6 +57,9 @@ export default function DrawerDetailMember() {
</Flex>
</SimpleGrid>
</Stack>
<LayoutModal opened={isModal} onClose={() => setModal(false)}
description="Apakah Anda yakin ingin mengubah status aktifasi anggota?"
onYes={(val) => { onTrue(val) }} />
</Box>
)
}

12
src/module/user/member/component/ui/navbar_detail_member.tsx
View File

@@ -1,19 +1,19 @@
'use client'
import { LayoutNavbarHome, LayoutIconBack, WARNA, LayoutDrawer, isDrawer } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
import { LayoutNavbarHome, LayoutIconBack, WARNA, LayoutDrawer } from "@/module/_global";
import { Box, Group, ActionIcon, Stack, Text } 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";
export default function NavbarDetailMember() {
const openDrawer = useHookstate(isDrawer)
const [isOpen, setOpen] = useState(false)
return (
<Box>
<LayoutNavbarHome>
<Group justify="space-between">
<LayoutIconBack />
<ActionIcon onClick={()=>{openDrawer.set(true)}} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Info">
<ActionIcon onClick={() => setOpen(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Info">
<HiMenu size={20} color='white' />
</ActionIcon>
</Group>
@@ -27,8 +27,8 @@ export default function NavbarDetailMember() {
<Text c={'white'} fw={'lighter'} fz={15}>Kepala Urusan Pengembangan</Text>
</Stack>
</LayoutNavbarHome>
<LayoutDrawer opened={openDrawer.get()} title={'MENU'} onClose={() => openDrawer.set(false)}>
<DrawerDetailMember />
<LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>
<DrawerDetailMember onDeleted={() => setOpen(false)} />
</LayoutDrawer>
</Box>
)

34
src/module/user/member/component/ui/navbar_list_member.tsx
View File

@@ -1,32 +1,22 @@
'use client'
import { isDrawer, LayoutDrawer, LayoutIconBack, LayoutNavbarHome, WARNA } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
import { ActionIcon, Box, Grid, Group, Text } from "@mantine/core";
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 openDrawer = useHookstate(isDrawer)
const [isOpenDrawer, setOpenDrawer] = useState(false)
return (
<>
<LayoutNavbarHome>
<Grid justify='center' align='center'>
<Grid.Col span="auto">
<LayoutIconBack back='/home' />
</Grid.Col>
<Grid.Col span={6}>
<Text ta={'center'} fw={'bold'} c={'white'}>ANGGOTA</Text>
</Grid.Col>
<Grid.Col span="auto">
<Group justify='flex-end'>
<ActionIcon onClick={() => openDrawer.set(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMenu size={20} color='white' />
</ActionIcon>
</Group>
</Grid.Col>
</Grid>
</LayoutNavbarHome>
<LayoutDrawer opened={openDrawer.get()} title={'MENU'} onClose={() => openDrawer.set(false)}>
<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>
</>

75
src/module/user/member/view/view_create_member.tsx
View File

@@ -1,77 +1,14 @@
import { Box, Button, Stack, TextInput } from "@mantine/core";
import { Box } from "@mantine/core";
import NavbarCreateMember from "../component/ui/navbar_create_member";
import { WARNA } from "@/module/_global";
import { HiUser } from "react-icons/hi2";
import { LayoutNavbarNew, WARNA } from "@/module/_global";
import CreateMember from "../component/create_member";
export default function ViewCreateMember() {
return (
<Box>
<NavbarCreateMember />
<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>
<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,
},
}}
/>
<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,
},
}}
/>
<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,
},
}}
/>
<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,
},
}}
/>
</Stack>
<Box mt={30} mx={20}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="md"
radius={30}
fullWidth
>
Simpan
</Button>
</Box>
{/* <NavbarCreateMember /> */}
<LayoutNavbarNew back="" title="Tambah Anggota" menu={<></>} />
<CreateMember/>
</Box>
)
}

72
src/module/user/member/view/view_edit_member.tsx
View File

@@ -1,77 +1,15 @@
import { WARNA } from "@/module/_global";
import { LayoutNavbarHome, LayoutNavbarNew, WARNA } from "@/module/_global";
import { Box, Stack, TextInput, Button } from "@mantine/core";
import { HiUser } from "react-icons/hi2";
import NavbarEditMember from "../component/ui/navbar_edit_member";
import EditMember from "../component/edit_member";
export default function ViewEditMember() {
return (
<Box>
<NavbarEditMember />
<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>
<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,
},
}}
/>
<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,
},
}}
/>
<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,
},
}}
/>
<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,
},
}}
/>
</Stack>
<Box mt={30} mx={20}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="md"
radius={30}
fullWidth
>
Simpan
</Button>
</Box>
{/* <NavbarEditMember /> */}
<LayoutNavbarNew back="" title="Edit Anggota" menu={<></>} />
<EditMember />
</Box>
)
}

29
src/module/user/profile/component/edit_profile.tsx
View File

@@ -1,23 +1,24 @@
"use client"
import { isModal, WARNA } from "@/module/_global";
import { LayoutNavbarNew, WARNA } from "@/module/_global";
import { Box, Button, Flex, Modal, Stack, Text, TextInput } from "@mantine/core";
import HeaderEditProfile from "../component/ui/header_edit_profile";
import { HiUser } from "react-icons/hi2";
import { useHookstate } from "@hookstate/core";
import { BsQuestionCircleFill } from "react-icons/bs"
import toast from "react-hot-toast";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { useState } from "react";
export default function EditProfile() {
const openModal = useHookstate(isModal)
const [isValModal, setValModal] = useState(false)
function onTrue() {
toast.success("Sukses! Data tersimpan");
openModal.set(false)
function onTrue(val: boolean) {
if (val) {
toast.success("Sukses! Data tersimpan");
}
setValModal(false)
}
return (
<Box>
<HeaderEditProfile />
<LayoutNavbarNew back='' title='Edit Profil' menu='' />
<Stack
align="center"
justify="center"
@@ -79,15 +80,15 @@ export default function EditProfile() {
size="md"
radius={30}
fullWidth
onClick={() => openModal.set(true)}
onClick={() => setValModal(true)}
>
Simpan
</Button>
</Box>
<LayoutModal opened={openModal.get()} onClose={() => openModal.set(false)}
description="Apakah Anda Ingin Mengganti
Status Aktivasi Data?"
onYes={onTrue} />
<LayoutModal opened={isValModal} onClose={() => setValModal(false)}
description="Apakah Anda yakin ingin
melakukan perubahan data?"
onYes={(val) => { onTrue(val) }} />
</Box>
)
}

14
src/module/user/profile/component/ui/header_edit_profile.tsx
View File

@@ -1,21 +1,11 @@
'use client'
import { LayoutIconBack, LayoutNavbarHome } from '@/module/_global';
import { LayoutIconBack, LayoutNavbarHome, LayoutNavbarNew } from '@/module/_global';
import { Box, Grid, Text } from '@mantine/core';
import React from 'react';
export default function HeaderEditProfile() {
return (
<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 PROFIL</Text>
</Grid.Col>
<Grid.Col span="auto"></Grid.Col>
</Grid>
</LayoutNavbarHome>
<LayoutNavbarNew back='' title='Edit Profil' menu='' />
);
}

2
src/module/user/profile/component/ui/ui_profile.tsx
View File

@@ -8,7 +8,7 @@ export function InfoTitleProfile() {
return (
<Group justify="space-between" grow py={5}>
<Text fw={'bold'} fz={20}>Informasi</Text>
<Text ta={"right"} c={"blue"} onClick={() => router.push('/profile/edit')}>Edit</Text>
<Text style={{ cursor: 'pointer' }} ta={"right"} c={"blue"} onClick={() => router.push('/profile/edit')}>Edit</Text>
</Group>
)
}

4
src/module/user/profile/view/view_profile.tsx
View File

@@ -13,9 +13,9 @@ export default function ViewProfile() {
<LayoutNavbarHome>
<Group justify="space-between">
<LayoutIconBack />
<ActionIcon variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Info">
{/* <ActionIcon variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Info">
<BsInfo size={20} color='white' />
</ActionIcon>
</ActionIcon> */}
</Group>
<Stack
align="center"