From 7d70fd2ce701fa847c42a87d2952b229020e2943 Mon Sep 17 00:00:00 2001
From: lukman <lukman@lukmans-MacBook-Air.local>
Date: Mon, 8 Jul 2024 12:32:36 +0800
Subject: [PATCH] style : update module

Deskripsi:
- add global
- add users

No issue
---
 src/app/layout.tsx                            |  2 +
 src/module/_global/index.ts                   |  4 +-
 src/module/_global/layout/layout_modal.tsx    | 30 ++++++
 src/module/_global/val/isModal.ts             |  4 +
 .../user/profile/component/edit_profile.tsx   | 94 +++++++++++++++++++
 .../component/ui/header_edit_profile.tsx      |  2 -
 .../user/profile/view/view_edit_profile.tsx   | 76 ++-------------
 7 files changed, 139 insertions(+), 73 deletions(-)
 create mode 100644 src/module/_global/layout/layout_modal.tsx
 create mode 100644 src/module/_global/val/isModal.ts
 create mode 100644 src/module/user/profile/component/edit_profile.tsx

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 5b9582c..65c0815 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -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>
diff --git a/src/module/_global/index.ts b/src/module/_global/index.ts
index 0265e54..9a9f104 100644
--- a/src/module/_global/index.ts
+++ b/src/module/_global/index.ts
@@ -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 }
\ No newline at end of file
+export { isDrawer }
+export { isModal }
\ No newline at end of file
diff --git a/src/module/_global/layout/layout_modal.tsx b/src/module/_global/layout/layout_modal.tsx
new file mode 100644
index 0000000..2c60bed
--- /dev/null
+++ b/src/module/_global/layout/layout_modal.tsx
@@ -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>
+  );
+}
+
diff --git a/src/module/_global/val/isModal.ts b/src/module/_global/val/isModal.ts
new file mode 100644
index 0000000..df233bc
--- /dev/null
+++ b/src/module/_global/val/isModal.ts
@@ -0,0 +1,4 @@
+'use client'
+import { hookstate } from '@hookstate/core';
+
+export const isModal = hookstate(false)
\ No newline at end of file
diff --git a/src/module/user/profile/component/edit_profile.tsx b/src/module/user/profile/component/edit_profile.tsx
new file mode 100644
index 0000000..bff9b82
--- /dev/null
+++ b/src/module/user/profile/component/edit_profile.tsx
@@ -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>
+  )
+}
+
diff --git a/src/module/user/profile/component/ui/header_edit_profile.tsx b/src/module/user/profile/component/ui/header_edit_profile.tsx
index 5e8f78e..c357a5f 100644
--- a/src/module/user/profile/component/ui/header_edit_profile.tsx
+++ b/src/module/user/profile/component/ui/header_edit_profile.tsx
@@ -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>
    );
 }
 
diff --git a/src/module/user/profile/view/view_edit_profile.tsx b/src/module/user/profile/view/view_edit_profile.tsx
index a79e792..f877051 100644
--- a/src/module/user/profile/view/view_edit_profile.tsx
+++ b/src/module/user/profile/view/view_edit_profile.tsx
@@ -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/>
    )
 }
\ No newline at end of file