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

Merge pull request #24 from bipproduction/lukman/8-juli-2024

Browse Source 
Lukman/8 juli 2024
This commit is contained in:
Amalia
2024-07-08 12:33:43 +08:00
committed by GitHub
parent db05141ea0 cb58302691
commit be868f8f07
9 changed files with 152 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -39,6 +39,7 @@
"next": "14.2.4",
"react": "^18",
"react-dom": "^18",
"react-hot-toast": "^2.4.1",
"react-icons": "^5.2.1",
"recharts": "2"
},

2
src/app/layout.tsx
View File

@@ -9,6 +9,7 @@ import {
import { WARNA } from "@/module/_global";
import { Lato } from "next/font/google";
import '@mantine/carousel/styles.css';
import { Toaster } from 'react-hot-toast';
export const metadata = {
title: "SISTEM DESA MANDIRI",
@@ -35,6 +36,7 @@ export default function RootLayout({
<Box bg={'#252A2F'} pos={"fixed"} w={"100%"} h={"100%"} style={{
overflowY: "auto"
}}>
<Toaster/>
<Container mih={'100vh'} p={0} size={rem(550)} bg={WARNA.bgWhite}>
{children}
</Container>

4
src/module/_global/index.ts
View File

@@ -5,6 +5,7 @@ import LoadingPage from "./layout/layout_loading_page";
import LayoutLogin from "./layout/layout_login";
import LayoutNavbarHome from "./layout/layout_navbar_home";
import { isDrawer } from "./val/isDrawer";
import { isModal } from "./val/isModal";
export { WARNA }
export { LayoutLogin }
@@ -12,4 +13,5 @@ export { LayoutNavbarHome }
export { LayoutIconBack }
export { LoadingPage }
export { LayoutDrawer }
export { isDrawer }
export { isDrawer }
export { isModal }

30
src/module/_global/layout/layout_modal.tsx Normal file
View File

@@ -0,0 +1,30 @@
import { useHookstate } from '@hookstate/core';
import { Box, Button, Flex, Modal, Text } from '@mantine/core';
import React 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)
return (
<Modal styles={{
body: {
margin: 10,
},
content: {
border: `2px solid ${'#828AFC'}`,
borderRadius: 10
}
}} opened={opened} onClose={onClose} withCloseButton={false} centered closeOnClickOutside={false}>
<Flex justify={"center"} align={"center"} direction={"column"}>
<BsQuestionCircleFill size={100} color="red" />
<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>
</Box>
</Flex>
</Modal>
);
}

4
src/module/_global/val/isModal.ts Normal file
View File

@@ -0,0 +1,4 @@
'use client'
import { hookstate } from '@hookstate/core';
export const isModal = hookstate(false)

94
src/module/user/profile/component/edit_profile.tsx Normal file
View File

@@ -0,0 +1,94 @@
"use client"
import { isModal, 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";
export default function EditProfile() {
const openModal = useHookstate(isModal)
function onTrue() {
toast.success("Sukses! Data tersimpan");
openModal.set(false)
}
return (
<Box>
<HeaderEditProfile />
<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} pb={20}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="md"
radius={30}
fullWidth
onClick={() => openModal.set(true)}
>
Simpan
</Button>
</Box>
<LayoutModal opened={openModal.get()} onClose={() => openModal.set(false)}
description="Apakah Anda Ingin Mengganti
Status Aktivasi Data?"
onYes={onTrue} />
</Box>
)
}

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

@@ -5,7 +5,6 @@ import React from 'react';
export default function HeaderEditProfile() {
return (
<Box>
<LayoutNavbarHome>
<Grid justify='center' align='center'>
<Grid.Col span="auto">
@@ -17,7 +16,6 @@ export default function HeaderEditProfile() {
<Grid.Col span="auto"></Grid.Col>
</Grid>
</LayoutNavbarHome>
</Box>
);
}

76
src/module/user/profile/view/view_edit_profile.tsx
View File

@@ -1,77 +1,13 @@
import { WARNA } from "@/module/_global";
import { Box, Button, Stack, TextInput } from "@mantine/core";
import { isModal, WARNA } from "@/module/_global";
import { Box, Button, Modal, Stack, TextInput } from "@mantine/core";
import HeaderEditProfile from "../component/ui/header_edit_profile";
import { HiUser } from "react-icons/hi2";
import { useHookstate } from "@hookstate/core";
import EditProfile from "../component/edit_profile";
export default function ViewEditProfile() {
return (
<Box>
<HeaderEditProfile />
<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>
</Box>
<EditProfile/>
)
}

12
yarn.lock
View File

@@ -1921,6 +1921,11 @@ globby@^11.1.0:
merge2 "^1.4.1"
slash "^3.0.0"
goober@^2.1.10:
version "2.1.14"
resolved "https://registry.yarnpkg.com/goober/-/goober-2.1.14.tgz#4a5c94fc34dc086a8e6035360ae1800005135acd"
integrity sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==
gopd@^1.0.1:
version "1.0.1"
resolved "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz"
@@ -2819,6 +2824,13 @@ react-dropzone-esm@15.0.1:
dependencies:
prop-types "^15.8.1"
react-hot-toast@^2.4.1:
version "2.4.1"
resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.4.1.tgz#df04295eda8a7b12c4f968e54a61c8d36f4c0994"
integrity sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==
dependencies:
goober "^2.1.10"
react-icons@^5.2.1:
version "5.2.1"
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.2.1.tgz#28c2040917b2a2eda639b0f797bff1888e018e4a"