Merge pull request #30 from bipproduction/amalia/9-jul-24

Amalia/9 jul 24

src/module/_global/index.ts

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

src/module/_global/layout/layout_modal.tsx

@@ -1,11 +1,8 @@
-import { useHookstate } from '@hookstate/core';
 import { Box, Button, Flex, Modal, Text } from '@mantine/core';
 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={{

src/module/_global/val/isDrawer.ts

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

src/module/_global/val/isModal.ts

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

src/module/announcement/component/list_announcement.tsx

@@ -1,6 +1,6 @@
 'use client'
-import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
+import { WARNA } from '@/module/_global';
-import { ActionIcon, Anchor, Box, Group, Text, TextInput } from '@mantine/core';
+import { ActionIcon, Box, Group, Text, TextInput } from '@mantine/core';
 import React from 'react';
 import { TfiAnnouncement } from "react-icons/tfi";
 import { HiMagnifyingGlass } from 'react-icons/hi2';

src/module/announcement/component/ui/navbar_announcement.tsx

@@ -1,14 +1,13 @@
 "use client"
-import { isDrawer, LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
+import { 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'

src/module/group/components/list_group_active.tsx

@@ -1,50 +1,50 @@
-import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
+import { LayoutDrawer, WARNA } from '@/module/_global';
 import { ActionIcon, Box, Group, Text, TextInput } from '@mantine/core';
 import React, { useState } from 'react';
 import { HiOutlineOfficeBuilding } from 'react-icons/hi';
 import { HiMagnifyingGlass } from 'react-icons/hi2';
 import EditDrawerGroup from './ui/edit_drawer_group';
-import { useHookstate } from '@hookstate/core';
+import toast from 'react-hot-toast';
-import { useRouter } from 'next/navigation';
 
 const dataGroup = [
   {
     id: 1,
-    name: 'Lembaga Pengkreditan Desa'
+    name: 'Dinas'
   },
   {
     id: 2,
-    name: 'Lembaga Pengkreditan Desa'
+    name: 'Adat'
   },
   {
     id: 3,
-    name: 'Lembaga Pengkreditan Desa'
+    name: 'LPD'
   },
   {
     id: 4,
-    name: 'Lembaga Pengkreditan Desa'
+    name: 'Karang Taruna'
   },
   {
     id: 5,
-    name: 'Lembaga Pengkreditan Desa'
+    name: 'BPD'
   },
   {
     id: 6,
-    name: 'Lembaga Pengkreditan Desa'
+    name: 'LPM'
   },
   {
     id: 7,
-    name: 'Lembaga Pengkreditan Desa'
+    name: 'PKK'
   },
   {
     id: 8,
-    name: 'Lembaga Pengkreditan Desa'
+    name: 'Pengelolaan Penduduk'
   },
 ]
 
 export default function ListGroupActive() {
-  // const openDrawerEdit = useHookstate(isDrawer)
   const [openDrawer, setOpenDrawer] = useState(false)
+  const [valChoose, setValChoose] = useState("")
+
   return (
     <Box pt={20}>
       <TextInput
@@ -63,11 +63,18 @@ export default function ListGroupActive() {
       {dataGroup.map((v, i) => {
         return (
           <Box pt={20} key={i}>
-            <Group align='center' style={{
+            <Group align='center'
-              border: `1px solid ${"#DCEED8"}`,
+              style={{
-              padding: 10,
+                border: `1px solid ${"#DCEED8"}`,
-              borderRadius: 10
+                padding: 10,
-            }} onClick={() => setOpenDrawer(true)} >
+                borderRadius: 10,
+                cursor: 'pointer'
+              }}
+              onClick={() => {
+                setValChoose(v.name)
+                setOpenDrawer(true)
+              }}
+            >
               <Box>
                 <ActionIcon variant="light" bg={'#DCEED8'} size={50} radius={100} aria-label="icon">
                   <HiOutlineOfficeBuilding color={WARNA.biruTua} size={25} />
@@ -80,8 +87,13 @@ export default function ListGroupActive() {
           </Box>
         )
       })}
-      <LayoutDrawer opened={openDrawer} onClose={() => setOpenDrawer(false)} title="LEMBAGA PENGKREDITAN DESA">
+      <LayoutDrawer opened={openDrawer} onClose={() => setOpenDrawer(false)} title={valChoose}>
-        <EditDrawerGroup />
+        <EditDrawerGroup onUpdated={(val) => {
+          if (val) {
+            toast.success('Sukses! data tersimpan')
+          }
+          setOpenDrawer(false)
+        }} />
       </LayoutDrawer>
     </Box>
   );

src/module/group/components/list_group_non_active.tsx

@@ -1,47 +1,50 @@
-import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
+import { LayoutDrawer, WARNA } from '@/module/_global';
 import { ActionIcon, Box, Group, Text, TextInput } from '@mantine/core';
 import React, { useState } from 'react';
 import { HiOutlineOfficeBuilding } from 'react-icons/hi';
 import { HiMagnifyingGlass } from 'react-icons/hi2';
 import EditDrawerGroup from './ui/edit_drawer_group';
+import toast from 'react-hot-toast';
 
 const dataGroup = [
   {
     id: 1,
-    name: 'No Active Desa'
+    name: 'Dinas'
   },
   {
     id: 2,
-    name: 'No Active Desa'
+    name: 'Adat'
   },
   {
     id: 3,
-    name: 'No Active Desa'
+    name: 'LPD'
   },
   {
     id: 4,
-    name: 'No Active Desa'
+    name: 'Karang Taruna'
   },
   {
     id: 5,
-    name: 'No Active Desa'
+    name: 'BPD'
   },
   {
     id: 6,
-    name: 'No Active Desa'
+    name: 'LPM'
   },
   {
     id: 7,
-    name: 'No Active Desa'
+    name: 'PKK'
   },
   {
     id: 8,
-    name: 'No Active Desa'
+    name: 'Pengelolaan Penduduk'
   },
 ]
 
 export default function ListGroupNonActive() {
   const [openDrawer, setOpenDrawer] = useState(false)
+  const [valChoose, setValChoose] = useState("")
+
   return (
     <Box pt={20}>
       <TextInput
@@ -60,11 +63,18 @@ export default function ListGroupNonActive() {
       {dataGroup.map((v, i) => {
         return (
           <Box pt={20} key={i}>
-            <Group align='center' style={{
+            <Group align='center'
-              border: `1px solid ${"#DCEED8"}`,
+              style={{
-              padding: 10,
+                border: `1px solid ${"#DCEED8"}`,
-              borderRadius: 10
+                padding: 10,
-            }} onClick={() => setOpenDrawer(true)}>
+                borderRadius: 10,
+                cursor: 'pointer'
+              }}
+              onClick={() => {
+                setValChoose(v.name)
+                setOpenDrawer(true)
+              }}
+            >
               <Box>
                 <ActionIcon variant="light" bg={'#DCEED8'} size={50} radius={100} aria-label="icon">
                   <HiOutlineOfficeBuilding color={WARNA.biruTua} size={25} />
@@ -77,8 +87,13 @@ export default function ListGroupNonActive() {
           </Box>
         )
       })}
-      <LayoutDrawer opened={openDrawer} onClose={() => setOpenDrawer(false)} title="LEMBAGA PENGKREDITAN DESA">
+      <LayoutDrawer opened={openDrawer} onClose={() => setOpenDrawer(false)} title={valChoose}>
-        <EditDrawerGroup />
+        <EditDrawerGroup onUpdated={(val) => {
+          if (val) {
+            toast.success('Sukses! data tersimpan')
+          }
+          setOpenDrawer(false)
+        }} />
       </LayoutDrawer>
     </Box>
   );

src/module/group/components/ui/drawer_group.tsx

@@ -1,17 +1,16 @@
-import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
+import { LayoutDrawer, WARNA } from '@/module/_global';
-import { useHookstate } from '@hookstate/core';
 import { Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
 import React, { useState } from 'react';
 import { IoAddCircle } from "react-icons/io5";
 
-export default function DrawerGroup() {
+export default function DrawerGroup({ onSuccess }: { onSuccess: (val: boolean) => void }) {
   const [openDrawerGroup, setOpenDrawerGroup] = useState(false)
-  const openDrawer = useHookstate(isDrawer)
 
   function onCLose() {
     setOpenDrawerGroup(false)
-    openDrawer.set(false)
+    onSuccess(true)
   }
+
   return (
     <Box>
       <Stack pt={10}>
@@ -29,7 +28,7 @@ export default function DrawerGroup() {
           </Flex>
         </SimpleGrid>
       </Stack>
-      <LayoutDrawer opened={openDrawerGroup} onClose={() => setOpenDrawerGroup(false)} title={'TAMBAH GRUP'}>
+      <LayoutDrawer opened={openDrawerGroup} onClose={() => setOpenDrawerGroup(false)} title={'Tambah Grup'}>
         <Box pt={10}>
           <TextInput
             styles={{
@@ -41,7 +40,7 @@ export default function DrawerGroup() {
             }}
             size="lg"
             radius={10}
-            placeholder="Tambah Grup"
+            placeholder="Grup"
           />
           <Box mt={'xl'}>
             <Button
@@ -52,7 +51,7 @@ export default function DrawerGroup() {
               fullWidth
               onClick={onCLose}
             >
-              MASUK
+              Simpan
             </Button>
           </Box>
         </Box>

src/module/group/components/ui/edit_drawer_group.tsx

@@ -1,26 +1,31 @@
 'use client'
-import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
+import { LayoutDrawer, WARNA } from '@/module/_global';
-import { useHookstate } from '@hookstate/core';
+import LayoutModal from '@/module/_global/layout/layout_modal';
 import { Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
 import React, { useState } from 'react';
 import { IoAddCircle, IoCloseCircleOutline } from "react-icons/io5";
 
-export default function EditDrawerGroup() {
+export default function EditDrawerGroup({ onUpdated }: { onUpdated: (val: boolean) => void }) {
   const [openDrawerGroup, setOpenDrawerGroup] = useState(false)
-  const openDrawerEdit = useHookstate(isDrawer)
+  const [isModal, setModal] = useState(false)
 
   function onCLose() {
     setOpenDrawerGroup(false)
-    openDrawerEdit.set(false)
+    onUpdated(true)
   }
+
+  function onTrue(val: boolean) {
+    if (val) {
+      onUpdated(true)
+    }
+    setModal(false)
+  }
+
   return (
     <Box>
       <Stack pt={10}>
-        <SimpleGrid
+        <SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }}>
-          cols={{ base: 3, sm: 3, lg: 3 }}
+          <Flex justify={'center'} align={'center'} direction={'column'} onClick={() => setModal(true)} style={{ cursor: 'pointer' }}>
-          
-        >
-          <Flex justify={'center'} align={'center'} direction={'column'} >
             <Box>
               <IoCloseCircleOutline size={30} color={WARNA.biruTua} />
             </Box>
@@ -28,7 +33,7 @@ export default function EditDrawerGroup() {
               <Text c={WARNA.biruTua}>Tidak Aktif</Text>
             </Box>
           </Flex>
-          <Flex justify={'center'} align={'center'} direction={'column'} onClick={() => setOpenDrawerGroup(true)}>
+          <Flex justify={'center'} align={'center'} direction={'column'} onClick={() => setOpenDrawerGroup(true)} style={{ cursor: 'pointer' }}>
             <Box>
               <IoAddCircle size={30} color={WARNA.biruTua} />
             </Box>
@@ -38,7 +43,7 @@ export default function EditDrawerGroup() {
           </Flex>
         </SimpleGrid>
       </Stack>
-      <LayoutDrawer opened={openDrawerGroup} onClose={() => setOpenDrawerGroup(false)} title={'EDIT GRUP'}>
+      <LayoutDrawer opened={openDrawerGroup} onClose={() => setOpenDrawerGroup(false)} title={'Edit Grup'}>
         <Box pt={10}>
           <TextInput
             styles={{
@@ -50,7 +55,7 @@ export default function EditDrawerGroup() {
             }}
             size="lg"
             radius={10}
-            placeholder="Edit Grup"
+            placeholder="Grup"
           />
           <Box mt={'xl'}>
             <Button
@@ -61,11 +66,15 @@ export default function EditDrawerGroup() {
               fullWidth
               onClick={onCLose}
             >
-              EDIT
+              Simpan
             </Button>
           </Box>
         </Box>
       </LayoutDrawer>
+
+      <LayoutModal opened={isModal} onClose={() => setModal(false)}
+        description="Apakah Anda yakin ingin mangubah status aktifasi data?"
+        onYes={(val) => { onTrue(val) }} />
     </Box>
   );
 }

src/module/group/components/ui/navbar_group.tsx

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

src/module/position/component/ui/drawer_detail_position.tsx

@@ -1,10 +1,7 @@
-import { isDrawer, LayoutDrawer, WARNA } from "@/module/_global"
+import { 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"
 

src/module/position/component/ui/drawer_list_position.tsx

@@ -1,4 +1,4 @@
-import { isDrawer, WARNA, LayoutDrawer } from "@/module/_global";
+import { WARNA, LayoutDrawer } from "@/module/_global";
 import { Box, Stack, SimpleGrid, Flex, TextInput, Button, Text, Select } from "@mantine/core";
 import { useState } from "react";
 import { IoAddCircle } from "react-icons/io5";

src/module/position/component/ui/list_position_active.tsx

@@ -1,4 +1,4 @@
-import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
+import { LayoutDrawer, WARNA } from '@/module/_global';
 import { ActionIcon, Box, Group, Text, TextInput } from '@mantine/core';
 import React, { useState } from 'react';
 import { FaUserTie } from 'react-icons/fa6';
@@ -44,6 +44,7 @@ const dataGroup = [
 export default function ListPositionActive() {
   const [openDrawer, setOpenDrawer] = useState(false)
   const [isData, setData] = useState("")
+
   return (
     <Box pt={20}>
       <TextInput

src/module/position/component/ui/list_position_nonactive.tsx

@@ -1,4 +1,4 @@
-import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
+import { LayoutDrawer, WARNA } from '@/module/_global';
 import { ActionIcon, Box, Group, Text, TextInput } from '@mantine/core';
 import React, { useState } from 'react';
 import { FaUserTie } from 'react-icons/fa6';
@@ -44,6 +44,7 @@ const dataGroup = [
 export default function ListPositionNonActive() {
    const [openDrawer, setOpenDrawer] = useState(false)
    const [isData, setData] = useState("")
+
    return (
       <Box pt={20}>
          <TextInput

src/module/project/components/ui/navbar_project.tsx

@@ -1,6 +1,5 @@
 "use client"
-import { isDrawer, LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
+import { LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
-import { useHookstate } from '@hookstate/core';
 import { ActionIcon, Avatar, Badge, Box, Card, Center, Divider, Flex, Grid, Group, Text, TextInput, Title } from '@mantine/core';
 import React, { useState } from 'react';
 import { HiMenu } from 'react-icons/hi';

src/module/user/member/component/list_member.tsx

@@ -1,6 +1,6 @@
 'use client'
-import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
+import { WARNA } from '@/module/_global';
-import { ActionIcon, Anchor, Box, Group, Text, TextInput } from '@mantine/core';
+import { ActionIcon, Box, Group, Text, TextInput } from '@mantine/core';
 import React from 'react';
 import { HiMagnifyingGlass, HiMiniUser } from 'react-icons/hi2';
 import { useRouter } from 'next/navigation';

src/module/user/member/component/ui/drawer_detail_member.tsx

@@ -1,7 +1,6 @@
 'use client'
-import { isDrawer, WARNA } from "@/module/_global";
+import { 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";

src/module/user/member/component/ui/drawer_list_member.tsx

@@ -1,18 +1,13 @@
-import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
+import { WARNA } from '@/module/_global';
-import { useHookstate } from '@hookstate/core';
+import { Box, Flex, SimpleGrid, Stack, Text } from '@mantine/core';
-import { Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text, TextInput } 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 openDrawer = useHookstate(isDrawer)
    const router = useRouter()
 
-   function onCLose() {
-      openDrawer.set(false)
-   }
    return (
       <Box>
          <Stack pt={10}>
@@ -20,9 +15,11 @@ export default function DrawerListMember() {
                cols={{ base: 3, sm: 3, lg: 3 }}
             >
                <Flex justify={'center'} align={'center'} direction={'column'}
+                  style={{
+                     cursor: 'pointer'
+                  }}
                   onClick={() => {
                      router.push('/member/create')
-                     onCLose()
                   }}
                >
                   <Box>
@@ -33,7 +30,9 @@ export default function DrawerListMember() {
                   </Box>
                </Flex>
 
-               <Flex justify={'center'} align={'center'} direction={'column'} >
+               <Flex justify={'center'} align={'center'} direction={'column'}
+                  style={{ cursor: 'pointer' }}
+               >
                   <Box>
                      <RiFilter2Line size={30} color={WARNA.biruTua} />
                   </Box>

src/module/user/member/view/view_detail_member.tsx

@@ -1,9 +1,5 @@
-import { LayoutNavbarHome, LayoutIconBack, WARNA, LayoutDrawer, isDrawer } from "@/module/_global";
+import {  Box, Group, Text } from "@mantine/core";
-import { useHookstate } from "@hookstate/core";
-import { ActionIcon, Box, Group, Stack, Text } from "@mantine/core";
 import { FaSquarePhone } from "react-icons/fa6";
-import { HiMenu } from "react-icons/hi";
-import { HiUser } from "react-icons/hi2";
 import { MdEmail } from "react-icons/md";
 import { RiIdCardFill } from "react-icons/ri";
 import NavbarDetailMember from "../component/ui/navbar_detail_member";

src/module/user/profile/view/view_edit_profile.tsx

@@ -1,13 +1,7 @@
-
-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 (
-      <EditProfile/>
+      <EditProfile />
    )
 }