upd: jabatan

Deskripsi:
- mengganti header new

- mengganti global state dg local state
- memberi modal konfirmasi

NO Issues

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

@@ -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>
    )
 }

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

@@ -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>

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

@@ -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">
+      <LayoutDrawer opened={openDrawer} onClose={() => setOpenDrawer(false)} title={isData}>
-        <DrawerDetailPosition />
+        <DrawerDetailPosition onUpdated={() => {
+          setOpenDrawer(false)
+          toast.success('Sukses! data tersimpan')
+        }} />
       </LayoutDrawer>
     </Box>
   );

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

@@ -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">
+         <LayoutDrawer opened={openDrawer} onClose={() => setOpenDrawer(false)} title={isData}>
-            <DrawerDetailPosition />
+            <DrawerDetailPosition onUpdated={() => {
+               setOpenDrawer(false)
+               toast.success('Sukses! data tersimpan')
+            }} />
          </LayoutDrawer>
       </Box>
    );

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

@@ -1,33 +1,27 @@
 'use client'
-import { LayoutNavbarHome, LayoutIconBack, WARNA, LayoutDrawer, isDrawer } from "@/module/_global";
+import { WARNA, LayoutDrawer, LayoutNavbarNew } from "@/module/_global";
-import { useHookstate } from "@hookstate/core";
+import { ActionIcon, Box } from "@mantine/core";
-import { Grid, Group, ActionIcon, Box, Text } 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>
+         <LayoutNavbarNew back="/home" title="Jabatan"
-            <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'}>Jabatan</Text>
+         />
-               </Grid.Col>
+         <LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>
-               <Grid.Col span="auto">
+            <DrawerListPosition onCreated={() => {
-                  <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)}>
-            <DrawerListPosition />
          </LayoutDrawer>
       </Box>
    );