From 85cea0d785d5e0b4fa86e6ddd788ffa50aaf2d0a Mon Sep 17 00:00:00 2001
From: amel <amel@amel.local>
Date: Tue, 29 Oct 2024 16:31:50 +0800
Subject: [PATCH 1/4] upd:

Deskripsi:
- loading saat mengganti status jabatan

No Issues
---
 .../user/member/ui/drawer_detail_member.tsx   | 170 +++++++++---------
 .../user/member/ui/navbar_detail_member.tsx   |  26 +--
 2 files changed, 100 insertions(+), 96 deletions(-)

diff --git a/src/module/user/member/ui/drawer_detail_member.tsx b/src/module/user/member/ui/drawer_detail_member.tsx
index bb537fd..744b096 100644
--- a/src/module/user/member/ui/drawer_detail_member.tsx
+++ b/src/module/user/member/ui/drawer_detail_member.tsx
@@ -11,92 +11,96 @@ 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 [isModal, setModal] = useState(false);
-  const tema = useHookstate(TEMA)
-  const [dataRealTime, setDataRealtime] = useWibuRealtime({
-    WIBU_REALTIME_TOKEN: keyWibu,
-    project: "sdm"
-  })
+   const router = useRouter()
+   const [isModal, setModal] = useState(false)
+   const tema = useHookstate(TEMA)
+   const [loadingModal, setLoadingModal] = useState(false)
+   const [dataRealTime, setDataRealtime] = useWibuRealtime({
+      WIBU_REALTIME_TOKEN: keyWibu,
+      project: "sdm"
+   })
 
-  async function nonActive(val: boolean) {
-    try {
-      if (val) {
-        const res = await funEditStatusMember(id, {
-          isActive: status ? true : false,
-        });
-        if (res.success) {
-          setDataRealtime([{
-            category: "data-member",
-            group: res.data.idGroup,
-          }])
-          toast.success(res.message);
-          router.push("/member?active=true");
-          onDeleted(true);
-        } else {
-          onDeleted(false);
-        }
+   async function nonActive(val: boolean) {
+      try {
+         if (val) {
+            setLoadingModal(true)
+            const res = await funEditStatusMember(id, {
+               isActive: status ? true : false,
+            });
+            if (res.success) {
+               setDataRealtime([{
+                  category: "data-member",
+                  group: res.data.idGroup,
+               }])
+               toast.success(res.message);
+               router.push("/member?active=true");
+               onDeleted(true);
+            } else {
+               onDeleted(false);
+            }
+         }
+      } catch (error) {
+         console.error(error);
+         toast.error("Terjadi kesalahan");
+      } finally {
+         setModal(false)
+         setLoadingModal(false)
       }
-      setModal(false);
-    } catch (error) {
-      console.error(error);
-      setModal(false);
-      toast.error("Terjadi kesalahan");
-    }
-  }
+   }
 
-  return (
-    <Box>
-      <Stack pt={10}>
-        <SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }}>
-          <Flex
-            justify={"center"}
-            align={"center"}
-            direction={"column"}
-            style={{ cursor: "pointer" }}
-            onClick={() => {
-              setModal(true);
-            }}
-          >
-            <Box>
-              <FaToggleOff size={30} color={tema.get().utama} />
-            </Box>
-            <Box>
-              <Text c={tema.get().utama} ta="center">
-                {" "}
-                {status === false ? "Aktifkan" : "Non Aktifkan"}
-              </Text>
-            </Box>
-          </Flex>
+   return (
+      <Box>
+         <Stack pt={10}>
+            <SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }}>
+               <Flex
+                  justify={"center"}
+                  align={"center"}
+                  direction={"column"}
+                  style={{ cursor: "pointer" }}
+                  onClick={() => {
+                     setModal(true);
+                  }}
+               >
+                  <Box>
+                     <FaToggleOff size={30} color={tema.get().utama} />
+                  </Box>
+                  <Box>
+                     <Text c={tema.get().utama} ta="center">
+                        {" "}
+                        {status === false ? "Aktifkan" : "Non Aktifkan"}
+                     </Text>
+                  </Box>
+               </Flex>
 
-          <Flex
-            justify={"center"}
-            align={"center"}
-            direction={"column"}
-            style={{ cursor: "pointer" }}
-            onClick={() => {
-              router.push(`/member/edit/${id}`);
+               <Flex
+                  justify={"center"}
+                  align={"center"}
+                  direction={"column"}
+                  style={{ cursor: "pointer" }}
+                  onClick={() => {
+                     router.push(`/member/edit/${id}`);
+                  }}
+               >
+                  <Box>
+                     <FaPencil size={30} color={tema.get().utama} />
+                  </Box>
+                  <Box>
+                     <Text c={tema.get().utama} ta="center">
+                        Edit
+                     </Text>
+                  </Box>
+               </Flex>
+            </SimpleGrid>
+         </Stack>
+         <LayoutModal
+            loading={loadingModal}
+            opened={isModal}
+            onClose={() => setModal(false)}
+            description="Apakah Anda yakin ingin mengubah status aktifasi anggota?"
+            onYes={(val) => {
+               nonActive(val);
             }}
-          >
-            <Box>
-              <FaPencil size={30} color={tema.get().utama} />
-            </Box>
-            <Box>
-              <Text c={tema.get().utama} ta="center">
-                Edit
-              </Text>
-            </Box>
-          </Flex>
-        </SimpleGrid>
-      </Stack>
-      <LayoutModal
-        opened={isModal}
-        onClose={() => setModal(false)}
-        description="Apakah Anda yakin ingin mengubah status aktifasi anggota?"
-        onYes={(val) => {
-          nonActive(val);
-        }}
-      />
-    </Box>
-  );
+         />
+      </Box>
+   );
 }
diff --git a/src/module/user/member/ui/navbar_detail_member.tsx b/src/module/user/member/ui/navbar_detail_member.tsx
index 56b3fe9..c3123ab 100644
--- a/src/module/user/member/ui/navbar_detail_member.tsx
+++ b/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 { 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 { globalRole, LayoutDrawer, LayoutIconBack, LayoutNavbarHome, SkeletonDetailProfile, TEMA } from "@/module/_global";
 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) {

From 55adceb89b40d3f40e358dafde190c88a7fd1de9 Mon Sep 17 00:00:00 2001
From: amel <amel@amel.local>
Date: Tue, 29 Oct 2024 16:50:29 +0800
Subject: [PATCH 2/4] upd: jabatan

Deskripsi:
- loading status aktivasi jabatan

No Issues
---
 .../position/ui/drawer_detail_position.tsx    | 27 ++++++++++---------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/module/position/ui/drawer_detail_position.tsx b/src/module/position/ui/drawer_detail_position.tsx
index aff4f6b..56b8b7f 100644
--- a/src/module/position/ui/drawer_detail_position.tsx
+++ b/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 { Box, Stack, SimpleGrid, Flex, Text, Select, TextInput, Button, Skeleton } from "@mantine/core"
+import { funGetAllGroup } from "@/module/group"
+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 }: {
-   onUpdated: (val: boolean) => void, id: string, isActive: boolean;
-}) {
+export default function DrawerDetailPosition({ onUpdated, id, isActive }: { 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)
       }
    }
 
@@ -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>

From 14e61dedf3dc9fb9093481f1c0fa8385fd78ea6e Mon Sep 17 00:00:00 2001
From: amel <amel@amel.local>
Date: Tue, 29 Oct 2024 17:11:02 +0800
Subject: [PATCH 3/4] fix: update

Deskripsi:
- update jarak button grup
- update jarak form edit jabatan

No Issues
---
 src/module/group/ui/drawer_group.tsx          | 10 ++++--
 src/module/group/ui/edit_drawer_group.tsx     | 24 ++++++--------
 src/module/group/ui/list_group_active.tsx     | 33 +++++++------------
 .../position/ui/drawer_detail_position.tsx    |  2 +-
 4 files changed, 30 insertions(+), 39 deletions(-)

diff --git a/src/module/group/ui/drawer_group.tsx b/src/module/group/ui/drawer_group.tsx
index 99d70c3..b53a39d 100644
--- a/src/module/group/ui/drawer_group.tsx
+++ b/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>
diff --git a/src/module/group/ui/edit_drawer_group.tsx b/src/module/group/ui/edit_drawer_group.tsx
index cc34ea3..f5c7e48 100644
--- a/src/module/group/ui/edit_drawer_group.tsx
+++ b/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 {
-  Box,
-  Button,
-  Flex,
-  SimpleGrid,
-  Stack,
-  Text,
-  TextInput
-} from "@mantine/core";
+import { 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?"
diff --git a/src/module/group/ui/list_group_active.tsx b/src/module/group/ui/list_group_active.tsx
index 1bb8c16..01d50d7 100644
--- a/src/module/group/ui/list_group_active.tsx
+++ b/src/module/group/ui/list_group_active.tsx
@@ -1,26 +1,17 @@
-import { LayoutDrawer, SkeletonSingle, TEMA, WARNA } from "@/module/_global";
-import {
-  ActionIcon,
-  Box,
-  Flex,
-  Grid,
-  Group,
-  Skeleton,
-  Text,
-  TextInput,
-} from "@mantine/core";
-import React, { useEffect, useState } from "react";
+import { LayoutDrawer, SkeletonSingle, TEMA } from "@/module/_global";
+import { useHookstate } from "@hookstate/core";
+import { ActionIcon, Box, Flex, Grid, Group, Text, TextInput } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import _ from "lodash";
+import { useSearchParams } from "next/navigation";
+import { useState } from "react";
+import toast from "react-hot-toast";
 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() {
@@ -117,7 +108,7 @@ export default function ListGroupActive() {
                       base: 3,
                       xl: 2
                     }}>
-                      <Flex justify={{base: "center", xl: "flex-start"}}>
+                      <Flex justify={{ base: "center", xl: "flex-start" }}>
                         <ActionIcon
                           variant="light"
                           bg={tema.get().bgTotalKegiatan}
@@ -143,8 +134,8 @@ export default function ListGroupActive() {
                         }}
                       >
                         <Text fw={"bold"} c={tema.get().utama} lineClamp={1}>
-                      {v.name}
-                    </Text>
+                          {v.name}
+                        </Text>
                       </Box>
                     </Grid.Col>
                   </Grid>
diff --git a/src/module/position/ui/drawer_detail_position.tsx b/src/module/position/ui/drawer_detail_position.tsx
index 56b8b7f..c81cc9c 100644
--- a/src/module/position/ui/drawer_detail_position.tsx
+++ b/src/module/position/ui/drawer_detail_position.tsx
@@ -186,7 +186,7 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: { onUp
          </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} />

From ce82fc8854ce26b9869ba347e27f4d225b6fb7ac Mon Sep 17 00:00:00 2001
From: amel <amel@amel.local>
Date: Tue, 29 Oct 2024 17:49:45 +0800
Subject: [PATCH 4/4] upd: loading

Dekripsi:
- update loading pada banner
- update loading pada tema
- update loading pada logout

No Issues
---
 src/app/(application)/banner/page.tsx         |  2 -
 src/module/banner/ui/list_banner.tsx          | 66 ++++++++++---------
 .../ui/drawer_palet_edit_end_default.tsx      | 24 +++++--
 src/module/user/profile/ui/profile.tsx        | 49 +++++++-------
 4 files changed, 80 insertions(+), 61 deletions(-)

diff --git a/src/app/(application)/banner/page.tsx b/src/app/(application)/banner/page.tsx
index cf5edef..23618b0 100644
--- a/src/app/(application)/banner/page.tsx
+++ b/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>
    );
 }
\ No newline at end of file
diff --git a/src/module/banner/ui/list_banner.tsx b/src/module/banner/ui/list_banner.tsx
index 05b2c2b..8497475 100644
--- a/src/module/banner/ui/list_banner.tsx
+++ b/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)
     }
-
   }
 
 
@@ -100,34 +104,34 @@ function ListBanner() {
               isData.map((v, i) => {
                 return (
                   <Box key={i} mb={20}>
-                  <Paper radius={'md'} withBorder onClick={() => {
-                    setIdData(v.id);
-                    setIdDataStorage(v.image);
-                    setExtension(v.extension);
-                    setOpenDrawer(true)
-                  }
-                  }
-                    style={{
-                      width: '100%',
-                      maxWidth: 550,
-                      height: 85,
-                      backgroundColor: 'transparent',
-                      border: `1px solid ${tema.get().bgTotalKegiatan}`
+                    <Paper radius={'md'} withBorder onClick={() => {
+                      setIdData(v.id);
+                      setIdDataStorage(v.image);
+                      setExtension(v.extension);
+                      setOpenDrawer(true)
+                    }
+                    }
+                      style={{
+                        width: '100%',
+                        maxWidth: 550,
+                        height: 85,
+                        backgroundColor: 'transparent',
+                        border: `1px solid ${tema.get().bgTotalKegiatan}`
 
-                    }}>
-                    <Group mt={"25"}>
-                      <ActionIcon variant='transparent' w={"100"}>
-                        <Image
-                          radius={"xs"}
-                          src={`https://wibu-storage.wibudev.com/api/files/${v.image}`}
-                          alt=''
-                          w={76}
-                          h={38.9}
-                        />
-                      </ActionIcon>
-                      <Text c={"dark"} fz={"h4"}>{v.title}</Text>
-                    </Group>
-                  </Paper>
+                      }}>
+                      <Group mt={"25"}>
+                        <ActionIcon variant='transparent' w={"100"}>
+                          <Image
+                            radius={"xs"}
+                            src={`https://wibu-storage.wibudev.com/api/files/${v.image}`}
+                            alt=''
+                            w={76}
+                            h={38.9}
+                          />
+                        </ActionIcon>
+                        <Text c={"dark"} fz={"h4"}>{v.title}</Text>
+                      </Group>
+                    </Paper>
                   </Box>
                 )
               })
@@ -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)
           }
-          setOpenModal(false)
         }} />
 
       <LayoutModalViewFile opened={isOpenModalView} onClose={() => setOpenModalView(false)} file={idDataStorage} extension={isExtension} fitur="image" />
diff --git a/src/module/color_palette/ui/drawer_palet_edit_end_default.tsx b/src/module/color_palette/ui/drawer_palet_edit_end_default.tsx
index c23d491..d64abd6 100644
--- a/src/module/color_palette/ui/drawer_palet_edit_end_default.tsx
+++ b/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)
           }
-          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)
           }
-          setModalDel(false)
         }} />
     </Box>
   );
diff --git a/src/module/user/profile/ui/profile.tsx b/src/module/user/profile/ui/profile.tsx
index 6a73729..c3af99e 100644
--- a/src/module/user/profile/ui/profile.tsx
+++ b/src/module/user/profile/ui/profile.tsx
@@ -1,19 +1,19 @@
 "use client"
-import { LayoutIconBack, LayoutNavbarHome, SkeletonAvatar, SkeletonDetailProfile, TEMA, WARNA } 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 { LayoutIconBack, LayoutNavbarHome, SkeletonDetailProfile, TEMA } from "@/module/_global";
 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 (
@@ -72,12 +75,12 @@ export default function Profile() {
             justify="center"
             gap="xs"
           >
-            {loading ? <Skeleton height={100} radius={"100"} width={100} /> :      
-            <Avatar
-              size="100"
-              radius={"100"}
-              src={img}
-            />
+            {loading ? <Skeleton height={100} radius={"100"} width={100} /> :
+              <Avatar
+                size="100"
+                radius={"100"}
+                src={img}
+              />
             }
             {/* <SkeletonAvatar size="100" sizeNoImg="100" img={img} /> */}
             {loading ?
@@ -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)} />
     </>