Merge pull request #320 from bipproduction/amalia/29-okt-24

Amalia/29 okt 24

src/app/(application)/banner/page.tsx

@@ -1,4 +1,3 @@
-
 import { ListBanner, NavbarBanner } from "@/module/banner";
 import { Box } from "@mantine/core";
 
@@ -7,7 +6,6 @@ export default function Page() {
       <Box>
          <NavbarBanner />
          <ListBanner />
-    
       </Box>
    );
 }

src/module/banner/ui/list_banner.tsx

@@ -5,7 +5,7 @@ import LayoutModal from '@/module/_global/layout/layout_modal';
 import { useHookstate } from '@hookstate/core';
 import { ActionIcon, Box, Flex, Group, Image, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { useParams, useRouter } from 'next/navigation';
+import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import toast from 'react-hot-toast';
 import { FaFile, FaPencil, FaTrash } from 'react-icons/fa6';
@@ -25,6 +25,7 @@ function ListBanner() {
   const [isData, setData] = useState<IDataBanner[]>([])
   const [idData, setIdData] = useState('')
   const [isPage, setPage] = useState(1)
+  const [loadingModal, setLoadingModal] = useState(false)
 
   const fetchData = async (loading: boolean) => {
     try {
@@ -57,6 +58,7 @@ function ListBanner() {
 
   async function onDelete(id: string) {
     try {
+      setLoadingModal(true)
       const res = await funDeleteBanner(id);
       if (res.success) {
         toast.success(res.message)
@@ -70,8 +72,10 @@ function ListBanner() {
     } catch (error) {
       console.error(error);
       toast.error("Gagal menghapus banner, coba lagi nanti");
+    } finally {
+      setLoadingModal(false)
+      setOpenModal(false)
     }
-
   }
 
 
@@ -178,14 +182,16 @@ function ListBanner() {
       </LayoutDrawer>
 
       <LayoutModal
+        loading={loadingModal}
         opened={isOpenModal}
         onClose={() => setOpenModal(false)}
         description='Apakah Anda yakin ingin menghapus banner?'
         onYes={(val) => {
           if (val) {
             onDelete(idData)
-          }
+          } else {
             setOpenModal(false)
+          }
         }} />
 
       <LayoutModalViewFile opened={isOpenModalView} onClose={() => setOpenModalView(false)} file={idDataStorage} extension={isExtension} fitur="image" />

src/module/color_palette/ui/drawer_palet_edit_end_default.tsx

@@ -3,11 +3,11 @@ import LayoutModal from '@/module/_global/layout/layout_modal';
 import { useHookstate } from '@hookstate/core';
 import { Box, Flex, SimpleGrid, Text } from '@mantine/core';
 import { useRouter } from 'next/navigation';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import toast from 'react-hot-toast';
 import { FaPencil, FaTrash } from 'react-icons/fa6';
 import { IoColorPalette } from 'react-icons/io5';
-import { funChangeTheme, funDeleteTheme, funGetThemeById } from '../lib/api_theme';
+import { funChangeTheme, funDeleteTheme } from '../lib/api_theme';
 import { globalRefreshTheme } from '../lib/val_theme';
 
 export default function DrawerPaletEditEndDefault({ id, idVillage, isUse }: { id: string, idVillage: string, isUse: boolean }) {
@@ -16,9 +16,12 @@ export default function DrawerPaletEditEndDefault({ id, idVillage, isUse }: { id
   const [isModalDel, setModalDel] = useState(false)
   const tema = useHookstate(TEMA)
   const refresh = useHookstate(globalRefreshTheme)
+  const [loadingApply, setLoadingApply] = useState(false)
+  const [loadingDelete, setLoadingDelete] = useState(false)
 
   async function onChangeTheme() {
     try {
+      setLoadingApply(true)
       const res = await funChangeTheme(id)
       if (res.success) {
         tema.set(res.data)
@@ -29,11 +32,15 @@ export default function DrawerPaletEditEndDefault({ id, idVillage, isUse }: { id
     } catch (error) {
       console.error(error)
       toast.error("Gagal mengubah tema, coba lagi nanti");
+    } finally {
+      setLoadingApply(false)
+      setModal(false)
     }
   }
 
   async function onDelete() {
     try {
+      setLoadingDelete(true)
       const res = await funDeleteTheme(id)
       if (res.success) {
         toast.success(res.message);
@@ -44,6 +51,9 @@ export default function DrawerPaletEditEndDefault({ id, idVillage, isUse }: { id
     } catch (error) {
       console.error(error)
       toast.error("Gagal menghapus tema, coba lagi nanti");
+    } finally {
+      setLoadingDelete(false)
+      setModalDel(false)
     }
   }
 
@@ -86,23 +96,25 @@ export default function DrawerPaletEditEndDefault({ id, idVillage, isUse }: { id
         }
       </SimpleGrid>
 
-      <LayoutModal opened={isModal} onClose={() => setModal(false)}
+      <LayoutModal loading={loadingApply} opened={isModal} onClose={() => setModal(false)}
         description="Apakah Anda yakin ingin mengubah Tema Aplikasi?"
         onYes={(val) => {
           if (val) {
             onChangeTheme()
-          }
+          }else{
             setModal(false)
+          }
         }} />
 
 
-      <LayoutModal opened={isModalDel} onClose={() => setModalDel(false)}
+      <LayoutModal loading={loadingDelete} opened={isModalDel} onClose={() => setModalDel(false)}
         description="Apakah Anda yakin ingin menghapus Tema Aplikasi?"
         onYes={(val) => {
           if (val) {
             onDelete()
-          }
+          }else{
             setModalDel(false)
+          }
         }} />
     </Box>
   );

src/module/group/ui/drawer_group.tsx

@@ -12,6 +12,7 @@ export default function DrawerGroup({ onSuccess, }: { onSuccess: (val: boolean)
   const [namaGroup, setNamaGroup] = useState("");
   const tema = useHookstate(TEMA)
   const refresh = useHookstate(globalRefreshGroup)
+  const [loading, setLoading] = useState(false)
   const [touched, setTouched] = useState({
     name: false,
   });
@@ -19,8 +20,8 @@ export default function DrawerGroup({ onSuccess, }: { onSuccess: (val: boolean)
 
   async function createData() {
     try {
+      setLoading(true)
       const response = await funCreateGroup({ name: namaGroup })
-
       if (response.success) {
         toast.success(response.message);
         refresh.set(!refresh.get())
@@ -33,6 +34,8 @@ export default function DrawerGroup({ onSuccess, }: { onSuccess: (val: boolean)
     } catch (error) {
       console.error(error);
       toast.error("Gagal menambahkan grup, coba lagi nanti");
+    } finally {
+      setLoading(false)
     }
   }
 
@@ -85,7 +88,7 @@ export default function DrawerGroup({ onSuccess, }: { onSuccess: (val: boolean)
         onClose={() => setOpenDrawerGroup(false)}
         title={"Tambah Grup"}
       >
-        <Box pt={10}>
+        <Box pos={"relative"} h={"28.5vh"}>
           <TextInput
             styles={{
               input: {
@@ -109,7 +112,7 @@ export default function DrawerGroup({ onSuccess, }: { onSuccess: (val: boolean)
               )
             }
           />
-          <Box mt={"xl"}>
+          <Box pos={"absolute"} bottom={10} left={0} right={0}>
             <Button
               c={"white"}
               bg={tema.get().utama}
@@ -117,6 +120,7 @@ export default function DrawerGroup({ onSuccess, }: { onSuccess: (val: boolean)
               radius={30}
               fullWidth
               onClick={() => { onCheck() }}
+              loading={loading}
             >
               Simpan
             </Button>

src/module/group/ui/edit_drawer_group.tsx

@@ -2,15 +2,7 @@
 import { LayoutDrawer, TEMA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
 import { useHookstate } from "@hookstate/core";
-import {
+import { Box, Button, Flex, SimpleGrid, Stack, Text, TextInput } from "@mantine/core";
-  Box,
-  Button,
-  Flex,
-  SimpleGrid,
-  Stack,
-  Text,
-  TextInput
-} from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useState } from "react";
 import toast from "react-hot-toast";
@@ -23,6 +15,7 @@ export default function EditDrawerGroup({ onUpdated, id, isActive, }: { onUpdate
   const [isModal, setModal] = useState(false);
   const [name, setName] = useState("");
   const [loading, setLoading] = useState(false);
+  const [loadingModal, setLoadingModal] = useState(false)
   const refresh = useHookstate(globalRefreshGroup)
   const tema = useHookstate(TEMA)
   const [touched, setTouched] = useState({
@@ -90,6 +83,7 @@ export default function EditDrawerGroup({ onUpdated, id, isActive, }: { onUpdate
   async function nonActive(val: boolean) {
     try {
       if (val) {
+        setLoadingModal(true)
         const res = await funEditStatusGroup(id, { isActive: isActive });
         if (res.success) {
           toast.success(res.message);
@@ -99,11 +93,12 @@ export default function EditDrawerGroup({ onUpdated, id, isActive, }: { onUpdate
           toast.error(res.message)
         }
       }
-      setModal(false);
     } catch (error) {
-      setModal(false);
       console.error(error);
       toast.error("Edit grup gagal, coba lagi nanti");
+    } finally {
+      setLoadingModal(false)
+      setModal(false);
     }
   }
 
@@ -146,7 +141,7 @@ export default function EditDrawerGroup({ onUpdated, id, isActive, }: { onUpdate
         onClose={() => setOpenDrawerGroup(false)}
         title={"Edit Grup"}
       >
-        <Box pt={10}>
+        <Box pos={"relative"} h={"28.5vh"}>
           <TextInput
             styles={{
               input: {
@@ -155,7 +150,7 @@ export default function EditDrawerGroup({ onUpdated, id, isActive, }: { onUpdate
                 borderColor: tema.get().utama,
               },
             }}
-            size="lg"
+            size="md"
             value={name}
             onChange={(e) => {
               onValidation('name', e.target.value)
@@ -171,7 +166,7 @@ export default function EditDrawerGroup({ onUpdated, id, isActive, }: { onUpdate
             label="Grup"
             required
           />
-          <Box mt={"xl"}>
+          <Box pos={"absolute"} bottom={10} left={0} right={0}>
             <Button
               c={"white"}
               bg={tema.get().utama}
@@ -188,6 +183,7 @@ export default function EditDrawerGroup({ onUpdated, id, isActive, }: { onUpdate
       </LayoutDrawer>
 
       <LayoutModal
+        loading={loadingModal}
         opened={isModal}
         onClose={() => setModal(false)}
         description="Apakah Anda yakin ingin mangubah status aktifasi data?"

src/module/group/ui/list_group_active.tsx

@@ -1,26 +1,17 @@
-import { LayoutDrawer, SkeletonSingle, TEMA, WARNA } from "@/module/_global";
+import { LayoutDrawer, SkeletonSingle, TEMA } from "@/module/_global";
-import {
+import { useHookstate } from "@hookstate/core";
-  ActionIcon,
+import { ActionIcon, Box, Flex, Grid, Group, Text, TextInput } from "@mantine/core";
-  Box,
+import { useShallowEffect } from "@mantine/hooks";
-  Flex,
+import _ from "lodash";
-  Grid,
+import { useSearchParams } from "next/navigation";
-  Group,
+import { useState } from "react";
-  Skeleton,
+import toast from "react-hot-toast";
-  Text,
-  TextInput,
-} from "@mantine/core";
-import React, { useEffect, useState } from "react";
 import { HiOutlineOfficeBuilding } from "react-icons/hi";
 import { HiMagnifyingGlass } from "react-icons/hi2";
-import EditDrawerGroup from "./edit_drawer_group";
-import toast from "react-hot-toast";
-import { useShallowEffect } from "@mantine/hooks";
 import { funGetAllGroup } from "../lib/api_group";
 import { IDataGroup } from "../lib/type_group";
-import { useSearchParams } from "next/navigation";
-import _ from "lodash";
-import { useHookstate } from "@hookstate/core";
 import { globalRefreshGroup } from "../lib/val_group";
+import EditDrawerGroup from "./edit_drawer_group";
 
 
 export default function ListGroupActive() {

src/module/position/ui/drawer_detail_position.tsx

@@ -1,25 +1,24 @@
-import { keyWibu, LayoutDrawer, TEMA, WARNA } from "@/module/_global"
+import { keyWibu, LayoutDrawer, TEMA } from "@/module/_global"
 import LayoutModal from "@/module/_global/layout/layout_modal"
-import { funGetAllGroup, IDataGroup } from "@/module/group"
+import { funGetAllGroup } from "@/module/group"
-import { Box, Stack, SimpleGrid, Flex, Text, Select, TextInput, Button, Skeleton } from "@mantine/core"
+import { useHookstate } from "@hookstate/core"
+import { Box, Button, Flex, SimpleGrid, Skeleton, Stack, Text, TextInput } from "@mantine/core"
 import { useShallowEffect } from "@mantine/hooks"
-import { useEffect, useState } from "react"
+import { useState } from "react"
 import toast from "react-hot-toast"
 import { FaPencil, FaToggleOff } from "react-icons/fa6"
+import { useWibuRealtime } from "wibu-realtime"
 import { funEditPosition, funEditStatusPosition, funGetOnePosition } from "../lib/api_position"
 import { IDataPosition } from "../lib/type_position"
-import { useHookstate } from "@hookstate/core"
 import { globalRefreshPosition } from "../lib/val_posisition"
-import { useWibuRealtime } from "wibu-realtime"
 
-export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
+export default function DrawerDetailPosition({ onUpdated, id, isActive }: { onUpdated: (val: boolean) => void, id: string, isActive: boolean; }) {
-   onUpdated: (val: boolean) => void, id: string, isActive: boolean;
-}) {
    const [openDrawerGroup, setOpenDrawerGroup] = useState(false)
    const [isModal, setModal] = useState(false)
    const refresh = useHookstate(globalRefreshPosition)
    const [loading, setLoading] = useState(true)
    const [loadingEdit, setLoadingEdit] = useState(false)
+   const [loadingModal, setLoadingModal] = useState(false)
    const tema = useHookstate(TEMA)
    const [data, setData] = useState<any>({
       id: id,
@@ -128,6 +127,7 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
    async function nonActive(val: boolean) {
       try {
          if (val) {
+            setLoadingModal(true)
             const res = await funEditStatusPosition(id, { isActive: isActive })
             if (res.success) {
                toast.success(res.message);
@@ -142,12 +142,13 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
                toast.error(res.message)
             }
          }
-         setModal(false);
       } catch (error) {
          console.error(error);
-         setModal(false);
          toast.error("Edit jabatan gagal, coba lagi nanti");
-         onUpdated(false);
+         onUpdated(false)
+      } finally {
+         setLoadingModal(false)
+         setModal(false)
       }
    }
 
@@ -185,7 +186,7 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
          </Stack>
 
          <LayoutDrawer opened={openDrawerGroup} onClose={() => setOpenDrawerGroup(false)} title={'Edit Jabatan'} >
-            <Box pt={10} pos={"relative"} h={"28.5vh"}>
+            <Box pos={"relative"} h={"28.5vh"}>
                {loading ?
                   <Box>
                      <Skeleton height={40} mt={6} radius={10} />
@@ -233,7 +234,7 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
          </LayoutDrawer>
 
 
-         <LayoutModal opened={isModal} onClose={() => setModal(false)}
+         <LayoutModal loading={loadingModal} opened={isModal} onClose={() => setModal(false)}
             description="Apakah Anda yakin ingin mengubah status aktifasi data?"
             onYes={(val) => { nonActive(val) }} />
       </Box>

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

@@ -11,9 +11,10 @@ import { useWibuRealtime } from "wibu-realtime";
 import { funEditStatusMember } from "../lib/api_member";
 
 export default function DrawerDetailMember({ onDeleted, id, status, }: { onDeleted: (val: boolean) => void; id: string; status: boolean; }) {
-  const router = useRouter();
+   const router = useRouter()
-  const [isModal, setModal] = useState(false);
+   const [isModal, setModal] = useState(false)
    const tema = useHookstate(TEMA)
+   const [loadingModal, setLoadingModal] = useState(false)
    const [dataRealTime, setDataRealtime] = useWibuRealtime({
       WIBU_REALTIME_TOKEN: keyWibu,
       project: "sdm"
@@ -22,6 +23,7 @@ export default function DrawerDetailMember({ onDeleted, id, status, }: { onDelet
    async function nonActive(val: boolean) {
       try {
          if (val) {
+            setLoadingModal(true)
             const res = await funEditStatusMember(id, {
                isActive: status ? true : false,
             });
@@ -37,11 +39,12 @@ export default function DrawerDetailMember({ onDeleted, id, status, }: { onDelet
                onDeleted(false);
             }
          }
-      setModal(false);
       } catch (error) {
          console.error(error);
-      setModal(false);
          toast.error("Terjadi kesalahan");
+      } finally {
+         setModal(false)
+         setLoadingModal(false)
       }
    }
 
@@ -90,6 +93,7 @@ export default function DrawerDetailMember({ onDeleted, id, status, }: { onDelet
             </SimpleGrid>
          </Stack>
          <LayoutModal
+            loading={loadingModal}
             opened={isModal}
             onClose={() => setModal(false)}
             description="Apakah Anda yakin ingin mengubah status aktifasi anggota?"

src/module/user/member/ui/navbar_detail_member.tsx

@@ -1,19 +1,19 @@
 'use client'
-import { LayoutNavbarHome, LayoutIconBack, WARNA, LayoutDrawer, SkeletonDetailProfile, globalRole, TEMA } from "@/module/_global";
+import { globalRole, LayoutDrawer, LayoutIconBack, LayoutNavbarHome, SkeletonDetailProfile, TEMA } from "@/module/_global";
-import { Box, Group, ActionIcon, Stack, Text, Center, Avatar, Skeleton, Grid } from "@mantine/core";
-import { HiMenu } from "react-icons/hi";
-import DrawerDetailMember from "./drawer_detail_member";
-import { useState } from "react";
-import { RiIdCardFill } from "react-icons/ri";
-import { FaSquarePhone } from "react-icons/fa6";
-import { MdEmail } from "react-icons/md";
-import { IoMaleFemale } from "react-icons/io5";
-import { useShallowEffect } from "@mantine/hooks";
-import { funGetOneMember } from "../lib/api_member";
-import toast from "react-hot-toast";
-import { IListMember, IMember } from "../lib/type_member";
 import { useHookstate } from "@hookstate/core";
+import { ActionIcon, Avatar, Box, Center, Grid, Group, Skeleton, Stack, Text } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import { FaSquarePhone } from "react-icons/fa6";
+import { HiMenu } from "react-icons/hi";
+import { IoMaleFemale } from "react-icons/io5";
+import { MdEmail } from "react-icons/md";
+import { RiIdCardFill } from "react-icons/ri";
 import { valueRoleUser } from "../../lib/val_user";
+import { funGetOneMember } from "../lib/api_member";
+import { IListMember, IMember } from "../lib/type_member";
+import DrawerDetailMember from "./drawer_detail_member";
 
 
 export default function NavbarDetailMember({ id }: IMember) {

src/module/user/profile/ui/profile.tsx

@@ -1,19 +1,19 @@
 "use client"
-import { LayoutIconBack, LayoutNavbarHome, SkeletonAvatar, SkeletonDetailProfile, TEMA, WARNA } from "@/module/_global";
+import { LayoutIconBack, LayoutNavbarHome, SkeletonDetailProfile, TEMA } from "@/module/_global";
-import { ActionIcon, Avatar, Box, Grid, Group, Skeleton, Stack, Text } from "@mantine/core";
-import { RiIdCardFill } from "react-icons/ri";
-import { FaSquarePhone } from "react-icons/fa6";
-import { MdEmail } from "react-icons/md";
-import { IoMaleFemale } from "react-icons/io5";
-import toast from "react-hot-toast";
-import { LuLogOut } from "react-icons/lu";
 import LayoutModal from "@/module/_global/layout/layout_modal";
-import { useState } from "react";
-import { funGetProfileByCookies } from "../lib/api_profile";
-import { useShallowEffect } from "@mantine/hooks";
-import { IProfileById } from "../lib/type_profile";
-import { useRouter } from "next/navigation";
 import { useHookstate } from "@hookstate/core";
+import { ActionIcon, Avatar, Box, Grid, Group, Skeleton, Stack, Text } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import { FaSquarePhone } from "react-icons/fa6";
+import { IoMaleFemale } from "react-icons/io5";
+import { LuLogOut } from "react-icons/lu";
+import { MdEmail } from "react-icons/md";
+import { RiIdCardFill } from "react-icons/ri";
+import { funGetProfileByCookies } from "../lib/api_profile";
+import { IProfileById } from "../lib/type_profile";
 
 export default function Profile() {
   const [openModal, setOpenModal] = useState(false);
@@ -22,6 +22,7 @@ export default function Profile() {
   const [loading, setLoading] = useState(true)
   const [img, setIMG] = useState<any | null>()
   const tema = useHookstate(TEMA)
+  const [loadingModal, setLoadingModal] = useState(false)
 
   async function getData() {
     try {
@@ -44,17 +45,19 @@ export default function Profile() {
   async function onLogout(val: boolean) {
     try {
       if (val) {
+        setLoadingModal(true)
         await fetch('/api/auth/logout', {
           method: 'DELETE',
         });
         toast.success('Logout Sukses')
         window.location.href = '/';
       }
-
-      setOpenModal(false)
-
     } catch (error) {
       console.error(error);
+      toast.error("Logout gagal, coba lagi nanti");
+    } finally {
+      setLoadingModal(false)
+      setOpenModal(false)
     }
   }
   return (
@@ -150,7 +153,7 @@ export default function Profile() {
           </Stack>
         }
       </Box>
-      <LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
+      <LayoutModal loading={loadingModal} opened={openModal} onClose={() => setOpenModal(false)}
         description="Apakah Anda yakin ingin keluar?"
         onYes={(val) => onLogout(val)} />
     </>