Merge pull request #322 from bipproduction/join

Join

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/app/api/home/route.ts

@@ -185,9 +185,10 @@ export async function GET(request: Request) {
             const cek = data.some((i: any) => i.status == dataStatus[index].status)
             if (cek) {
                const find = ((Number(data.find((i: any) => i.status == dataStatus[index].status)?._count) * 100) / data.reduce((n, { _count }) => n + _count, 0)).toFixed(2)
+               const fix = find.substr(-2, 2) == "00" ? find.substr(0, 2) : find
                input = {
                   name: dataStatus[index].name,
-                  value: find
+                  value: fix
                }
             } else {
                input = {

src/module/_global/layout/layout_icon_back.tsx

@@ -1,11 +1,9 @@
 'use client'
-import { ActionIcon, Box } from '@mantine/core';
-import { useRouter } from 'next/navigation';
-import React from 'react';
-import { HiChevronLeft } from 'react-icons/hi2';
-import { WARNA } from '../fun/WARNA';
-import _ from 'lodash';
 import { useHookstate } from '@hookstate/core';
+import { ActionIcon, Box } from '@mantine/core';
+import _ from 'lodash';
+import { useRouter } from 'next/navigation';
+import { HiChevronLeft } from 'react-icons/hi2';
 import { TEMA } from '../bin/val_global';
 
 function LayoutIconBack({ back }: { back?: string }) {

src/module/_global/layout/layout_navbar_new.tsx

@@ -1,11 +1,10 @@
 'use client'
-import { ActionIcon, Box, Grid, Group, Text, Title } from '@mantine/core';
-import React from 'react';
-import { WARNA } from '../fun/WARNA';
-import LayoutIconBack from './layout_icon_back';
-import _ from 'lodash';
 import { useHookstate } from '@hookstate/core';
+import { Box, Grid, Group, Title } from '@mantine/core';
+import _ from 'lodash';
+import React from 'react';
 import { TEMA } from '../bin/val_global';
+import LayoutIconBack from './layout_icon_back';
 
 export const LayoutNavbarNew = ({ back, state, title, menu }: { back?: string, title: string, menu: React.ReactNode, state?: React.ReactNode }) => {
    const tema = useHookstate(TEMA)

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={() => {
+                    <Paper radius={'md'} withBorder onClick={() => {
-                    setIdData(v.id);
+                      setIdData(v.id);
-                    setIdDataStorage(v.image);
+                      setIdDataStorage(v.image);
-                    setExtension(v.extension);
+                      setExtension(v.extension);
-                    setOpenDrawer(true)
+                      setOpenDrawer(true)
-                  }
+                    }
-                  }
+                    }
-                    style={{
+                      style={{
-                      width: '100%',
+                        width: '100%',
-                      maxWidth: 550,
+                        maxWidth: 550,
-                      height: 85,
+                        height: 85,
-                      backgroundColor: 'transparent',
+                        backgroundColor: 'transparent',
-                      border: `1px solid ${tema.get().bgTotalKegiatan}`
+                        border: `1px solid ${tema.get().bgTotalKegiatan}`
 
-                    }}>
+                      }}>
-                    <Group mt={"25"}>
+                      <Group mt={"25"}>
-                      <ActionIcon variant='transparent' w={"100"}>
+                        <ActionIcon variant='transparent' w={"100"}>
-                        <Image
+                          <Image
-                          radius={"xs"}
+                            radius={"xs"}
-                          src={`https://wibu-storage.wibudev.com/api/files/${v.image}`}
+                            src={`https://wibu-storage.wibudev.com/api/files/${v.image}`}
-                          alt=''
+                            alt=''
-                          w={76}
+                            w={76}
-                          h={38.9}
+                            h={38.9}
-                        />
+                          />
-                      </ActionIcon>
+                        </ActionIcon>
-                      <Text c={"dark"} fz={"h4"}>{v.title}</Text>
+                        <Text c={"dark"} fz={"h4"}>{v.title}</Text>
-                    </Group>
+                      </Group>
-                  </Paper>
+                    </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" />

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>
   );

src/module/division_new/ui/navbar_detail_division.tsx

@@ -1,14 +1,14 @@
 'use client'
 import { LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
-import { ActionIcon, Box } from "@mantine/core";
-import { useState } from "react";
-import { HiMenu } from "react-icons/hi";
-import DrawerDetailDivision from "./drawer_detail_division";
-import { funGetDivisionById } from "../lib/api_division";
-import { useParams } from "next/navigation";
-import toast from "react-hot-toast";
-import { useShallowEffect } from "@mantine/hooks";
 import { useHookstate } from "@hookstate/core";
+import { ActionIcon } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useParams } from "next/navigation";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import { HiMenu } from "react-icons/hi";
+import { funGetDivisionById } from "../lib/api_division";
+import DrawerDetailDivision from "./drawer_detail_division";
 
 export default function NavbarDetailDivision() {
    const [openDrawer, setOpenDrawer] = useState(false)
@@ -37,7 +37,7 @@ export default function NavbarDetailDivision() {
 
    return (
       <>
-         <LayoutNavbarNew back="/division" title={name} menu={
+         <LayoutNavbarNew back="" title={name} menu={
             <ActionIcon variant="light" onClick={() => (setOpenDrawer(true))} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
                <HiMenu size={20} color='white' />
             </ActionIcon>

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() {
@@ -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}
+                          {v.name}
-                    </Text>
+                        </Text>
                       </Box>
                     </Grid.Col>
                   </Grid>

src/module/home/lib/type_home.ts

@@ -2,7 +2,7 @@ export interface IDataHomeKegiatan {
    id: string
    title: string
    desc: string
-   status: string
+   status: number
    progress: number
    createdAt: string
 }

src/module/home/ui/chart_progress_tugas.tsx

@@ -1,13 +1,13 @@
 'use client'
-import { TEMA, WARNA } from "@/module/_global";
+import { TEMA } from "@/module/_global";
-import { Box, Text } from "@mantine/core";
+import { useHookstate } from "@hookstate/core";
+import { Box } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { EChartsOption } from "echarts";
 import EChartsReact from "echarts-for-react";
 import { useState } from "react";
-import { funGetHome } from "../lib/api_home";
 import toast from "react-hot-toast";
-import { useHookstate } from "@hookstate/core";
+import { funGetHome } from "../lib/api_home";
 
 export default function ChartProgressHome() {
    const [options, setOptions] = useState<EChartsOption>({});
@@ -41,7 +41,7 @@ export default function ChartProgressHome() {
       }
    };
 
-   const loadData = (value:any) => {
+   const loadData = (value: any) => {
       const option: EChartsOption = {
          title: {
             text: "PROGRES KEGIATAN",

src/module/home/ui/list_project.tsx

@@ -2,7 +2,7 @@
 import { TEMA } from "@/module/_global";
 import { useHookstate } from "@hookstate/core";
 import { Carousel } from "@mantine/carousel";
-import { Box, Card, Flex, Progress, Skeleton, Stack, Text, Title } from "@mantine/core";
+import { Badge, Box, Card, Flex, Group, Progress, Skeleton, Stack, Text, Title } from "@mantine/core";
 import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
@@ -79,7 +79,24 @@ export default function ListProjects() {
                                           <Progress.Label>{_.isNull(v.progress) ? 0 : v.progress}%</Progress.Label>
                                        </Progress.Section>
                                     </Progress.Root>
-                                    <Text c={tema.get().utama} fz={isMobile ? 14 : 16}>{v.createdAt}</Text>
+                                    <Group align='center' pt={10} justify='space-between'>
+                                       <Text c={tema.get().utama} fz={isMobile ? 14 : 16}>{v.createdAt}</Text>
+                                       <Badge color={
+                                          v.status === 0 ? '#1372C4' :
+                                             v.status === 1 ? '#C5771A' :
+                                                v.status === 2 ? '#0B6025' :
+                                                   v.status === 3 ? '#BB1F1F' :
+                                                      "grey"
+                                       }>
+                                          {
+                                             v.status === 0 ? 'Segera' :
+                                                v.status === 1 ? 'Dikerjakan' :
+                                                   v.status === 2 ? 'Selesai' :
+                                                      v.status === 3 ? 'Dibatalkan' :
+                                                         "Segera"
+                                          }
+                                       </Badge>
+                                    </Group>
                                  </Stack>
                               </Card>
                            </Box>

src/module/home/ui/view_search.tsx

@@ -1,62 +1,49 @@
 "use client";
-import { LayoutNavbarNew, TEMA, WARNA } from "@/module/_global";
+import { LayoutNavbarNew, SkeletonList, TEMA, WARNA } from "@/module/_global";
-import {
-  ActionIcon,
-  Avatar,
-  Box,
-  Divider,
-  Grid,
-  Group,
-  Text,
-  TextInput,
-} from "@mantine/core";
-import React, { useState } from "react";
-import {
-  HiMagnifyingGlass,
-  HiMiniPresentationChartBar,
-  HiMiniUserGroup,
-} from "react-icons/hi2";
-import { funGetSearchAll } from "../lib/api_search";
-import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
-import {
-  IDataDivisionSearch,
-  IDataProjectSearch,
-  IDataUserSearch,
-} from "../lib/type_search";
-import { useRouter } from "next/navigation";
-import _ from "lodash";
 import { useHookstate } from "@hookstate/core";
+import { ActionIcon, Avatar, Box, Divider, Grid, Text, TextInput } from "@mantine/core";
+import { useMediaQuery } from "@mantine/hooks";
+import _ from "lodash";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import { HiMagnifyingGlass, HiMiniPresentationChartBar, HiMiniUserGroup, } from "react-icons/hi2";
+import { funGetSearchAll } from "../lib/api_search";
+import { IDataDivisionSearch, IDataProjectSearch, IDataUserSearch, } from "../lib/type_search";
 
 export default function ViewSearch() {
-  const [search, setSearch] = useState("");
+  const [search, setSearch] = useState("")
-  const [dataUser, setDataUser] = useState<IDataUserSearch[]>([]);
+  const [dataUser, setDataUser] = useState<IDataUserSearch[]>([])
-  const [dataProject, setDataProject] = useState<IDataProjectSearch[]>([]);
+  const [dataProject, setDataProject] = useState<IDataProjectSearch[]>([])
-  const [dataDivision, setDataDivision] = useState<IDataDivisionSearch[]>([]);
+  const [dataDivision, setDataDivision] = useState<IDataDivisionSearch[]>([])
-  const router = useRouter();
+  const [loading, setLoading] = useState(false)
-  const tema = useHookstate(TEMA);
+  const router = useRouter()
+  const tema = useHookstate(TEMA)
+  const isMobile2 = useMediaQuery("(max-width: 460px)");
 
-  async function featchSearch() {
+  async function featchSearch(cari: string) {
     try {
-      const res = await funGetSearchAll("?search=" + search);
+      setLoading(true)
-      setDataUser(res.data.user);
+      setSearch(cari)
-      setDataProject(res.data.project);
+      if (cari != "") {
-      setDataDivision(res.data.division);
+        const res = await funGetSearchAll("?search=" + cari);
+        setDataUser(res.data.user);
+        setDataProject(res.data.project);
+        setDataDivision(res.data.division);
+      } else {
+        setDataUser([]);
+        setDataProject([]);
+        setDataDivision([]);
+      }
     } catch (error) {
       console.error(error);
-      throw new Error("Error");
+      toast.error("Gagal mendapatkan data, coba lagi nanti");
+    } finally {
+      setLoading(false)
     }
   }
 
-  useShallowEffect(() => {
+
-    if (search != "") {
-      featchSearch();
-    } else {
-      setDataUser([]);
-      setDataProject([]);
-      setDataDivision([]);
-    }
-  }, [search]);
-  const isMobile2 = useMediaQuery("(max-width: 460px)");
 
   return (
     <>
@@ -74,263 +61,280 @@ export default function ViewSearch() {
           radius={30}
           leftSection={<HiMagnifyingGlass size={20} />}
           placeholder="Pencarian"
-          onChange={(e) => setSearch(e.target.value)}
+          onChange={(e) => featchSearch(e.target.value)}
         />
-        {dataUser.length || dataProject.length || dataDivision.length > 0 ? (
+        {
-          <Box pt={20}>
+          loading ?
-            <Box
+            Array(5)
-              style={{
+              .fill(null)
-                border: `1px solid ${WARNA.borderBiruMuda}`,
+              .map((_, i) => (
-                padding: 10,
+                <Box key={i}>
-                borderRadius: 10,
+                  <SkeletonList />
-              }}
+                </Box>
-            >
+              ))
-              {dataUser.length > 0 ? (
+            :
-                <Box>
+            dataUser.length || dataProject.length || dataDivision.length > 0 ?
-                  <Text>ANGGOTA</Text>
+              (
+                <Box pt={20}>
                   <Box
                     style={{
-                      paddingLeft: 20,
+                      border: `1px solid ${WARNA.borderBiruMuda}`,
-                      paddingRight: 20,
+                      padding: 10,
-                      paddingTop: 10,
+                      borderRadius: 10,
-                      paddingBottom: 10,
-                      backgroundColor: `#E7EBF1`,
-                      borderRadius: 5,
                     }}
                   >
                     {dataUser.length > 0 ? (
-                      <Box mt={5}>
+                      <Box>
-                        {dataUser.map((v, i) => {
+                        <Text>ANGGOTA</Text>
-                          return (
+                        <Box
-                            <Box key={i}>
+                          style={{
-                              <Box
+                            paddingLeft: 20,
-                                onClick={() => {
+                            paddingRight: 20,
-                                  router.push(`/member/${v.id}`);
+                            paddingTop: 10,
-                                }}
+                            paddingBottom: 10,
-                              >
+                            backgroundColor: `#E7EBF1`,
-                                <Grid align="center">
+                            borderRadius: 5,
-                                  <Grid.Col
+                          }}
-                                    span={{
+                        >
-                                      base: 1.5,
+                          {dataUser.length > 0 ? (
-                                      xs: 1.5,
+                            <Box mt={5}>
-                                      sm: 1.5,
+                              {dataUser.map((v, i) => {
-                                      md: 1.5,
+                                return (
-                                      lg: 1.5,
+                                  <Box key={i}>
-                                      xl: 1.5,
+                                    <Box
-                                    }}
+                                      onClick={() => {
-                                  >
+                                        router.push(`/member/${v.id}`);
-                                    <Avatar
+                                      }}
-                                      src={`https://wibu-storage.wibudev.com/api/files/${v.img}`}
-                                      size={50}
-                                      alt="image"
-                                    />
-                                  </Grid.Col>
-                                  <Grid.Col
-                                    span={{
-                                      base: 10,
-                                      xs: 10.5,
-                                      sm: 10.5,
-                                      md: 10.5,
-                                      lg: 10.5,
-                                      xl: 10.5,
-                                    }}
-                                    pl={isMobile2 ? 30 : 20}
-                                  >
-                                    <Text
-                                      fw={"bold"}
-                                      c={tema.get().utama}
-                                      truncate="end"
                                     >
-                                      {_.startCase(v.name)}
+                                      <Grid align="center">
-                                    </Text>
+                                        <Grid.Col
-                                    <Text fw={"lighter"} fz={12} truncate="end">
+                                          span={{
-                                      {v.group + " - " + v.position}
+                                            base: 1.5,
-                                    </Text>
+                                            xs: 1.5,
-                                  </Grid.Col>
+                                            sm: 1.5,
-                                </Grid>
+                                            md: 1.5,
-                              </Box>
+                                            lg: 1.5,
-                              <Divider my={10} />
+                                            xl: 1.5,
+                                          }}
+                                        >
+                                          <Avatar
+                                            src={`https://wibu-storage.wibudev.com/api/files/${v.img}`}
+                                            size={50}
+                                            alt="image"
+                                          />
+                                        </Grid.Col>
+                                        <Grid.Col
+                                          span={{
+                                            base: 10,
+                                            xs: 10.5,
+                                            sm: 10.5,
+                                            md: 10.5,
+                                            lg: 10.5,
+                                            xl: 10.5,
+                                          }}
+                                          pl={isMobile2 ? 30 : 20}
+                                        >
+                                          <Text
+                                            fw={"bold"}
+                                            c={tema.get().utama}
+                                            truncate="end"
+                                          >
+                                            {_.startCase(v.name)}
+                                          </Text>
+                                          <Text fw={"lighter"} fz={12} truncate="end">
+                                            {v.group + " - " + v.position}
+                                          </Text>
+                                        </Grid.Col>
+                                      </Grid>
+                                    </Box>
+                                    <Divider my={10} />
+                                  </Box>
+                                );
+                              })}
                             </Box>
-                          );
+                          ) : null}
-                        })}
+                        </Box>
                       </Box>
                     ) : null}
-                  </Box>
-                </Box>
-              ) : null}
 
-              {dataDivision.length > 0 ? (
-                <Box mt={10}>
-                  <Text>DIVISI</Text>
-                  <Box
-                    style={{
-                      paddingLeft: 20,
-                      paddingRight: 20,
-                      paddingTop: 10,
-                      paddingBottom: 10,
-                      backgroundColor: `#E7EBF1`,
-                      borderRadius: 5,
-                    }}
-                  >
                     {dataDivision.length > 0 ? (
-                      <Box>
+                      <Box mt={10}>
-                        {dataDivision.map((v, i) => {
+                        <Text>DIVISI</Text>
-                          return (
+                        <Box
-                            <Box
+                          style={{
-                              key={i}
+                            paddingLeft: 20,
-                              onClick={() => router.push(`/division/${v.id}`)}
+                            paddingRight: 20,
-                            >
+                            paddingTop: 10,
-                              <Grid align="center" mt={15}>
+                            paddingBottom: 10,
-                                <Grid.Col
+                            backgroundColor: `#E7EBF1`,
-                                  span={{
+                            borderRadius: 5,
-                                    base: 1.5,
+                          }}
-                                    xs: 1.5,
+                        >
-                                    sm: 1.5,
+                          {dataDivision.length > 0 ? (
-                                    md: 1.5,
+                            <Box>
-                                    lg: 1.5,
+                              {dataDivision.map((v, i) => {
-                                    xl: 1.5,
+                                return (
-                                  }}
-                                >
-                                  <ActionIcon
-                                    variant="light"
-                                    bg={tema.get().utama}
-                                    size={50}
-                                    radius={100}
-                                    aria-label="icon"
-                                  >
-                                    <HiMiniUserGroup
-                                      color={"white"}
-                                      size={25}
-                                    />
-                                  </ActionIcon>
-                                </Grid.Col>
-                                <Grid.Col
-                                  span={{
-                                    base: 10,
-                                    xs: 10.5,
-                                    sm: 10.5,
-                                    md: 10.5,
-                                    lg: 10.5,
-                                    xl: 10.5,
-                                  }}
-                                  pl={isMobile2 ? 30 : 20}
-                                >
                                   <Box
+                                    key={i}
+                                    onClick={() => router.push(`/division/${v.id}`)}
                                   >
+                                    <Grid align="center" mt={15}>
+                                      <Grid.Col
+                                        span={{
+                                          base: 1.5,
+                                          xs: 1.5,
+                                          sm: 1.5,
+                                          md: 1.5,
+                                          lg: 1.5,
+                                          xl: 1.5,
+                                        }}
+                                      >
+                                        <ActionIcon
+                                          variant="light"
+                                          bg={tema.get().utama}
+                                          size={50}
+                                          radius={100}
+                                          aria-label="icon"
+                                        >
+                                          <HiMiniUserGroup
+                                            color={"white"}
+                                            size={25}
+                                          />
+                                        </ActionIcon>
+                                      </Grid.Col>
+                                      <Grid.Col
+                                        span={{
+                                          base: 10,
+                                          xs: 10.5,
+                                          sm: 10.5,
+                                          md: 10.5,
+                                          lg: 10.5,
+                                          xl: 10.5,
+                                        }}
+                                        pl={isMobile2 ? 30 : 20}
+                                      >
+                                        <Box
+                                        >
+                                          <Text
+                                            fw={"bold"}
+                                            c={tema.get().utama}
+                                            truncate="end"
+                                          >
+                                            {v.name.toUpperCase()}
+                                          </Text>
+                                        </Box>
+                                        <Text fw={"lighter"} fz={12} truncate="end">
+                                          {v.group}
+                                        </Text>
+                                      </Grid.Col>
+                                    </Grid>
                                     <Text
-                                      fw={"bold"}
+                                      fw={"lighter"}
-                                      c={tema.get().utama}
+                                      mt={10}
-                                      truncate="end"
+                                      mb={10}
+                                      lineClamp={2}
                                     >
-                                      {v.name.toUpperCase()}
+                                      {v.desc}
                                     </Text>
+                                    <Divider my={5} />
                                   </Box>
-                                  <Text fw={"lighter"} fz={12} truncate="end">
+                                );
-                                    {v.group}
+                              })}
-                                  </Text>
-                                </Grid.Col>
-                              </Grid>
-                              <Text
-                                fw={"lighter"}
-                                mt={10}
-                                mb={10}
-                                lineClamp={2}
-                              >
-                                {v.desc}
-                              </Text>
-                              <Divider my={5} />
                             </Box>
-                          );
+                          ) : null}
-                        })}
+                        </Box>
                       </Box>
                     ) : null}
-                  </Box>
-                </Box>
-              ) : null}
 
-              {dataProject.length > 0 ? (
-                <Box mt={10}>
-                  <Text>KEGIATAN</Text>
-                  <Box
-                    style={{
-                      paddingLeft: 20,
-                      paddingRight: 20,
-                      paddingTop: 10,
-                      paddingBottom: 10,
-                      backgroundColor: `#E7EBF1`,
-                      borderRadius: 5,
-                    }}
-                  >
                     {dataProject.length > 0 ? (
-                      <Box>
+                      <Box mt={10}>
-                        {dataProject.map((v, i) => {
+                        <Text>KEGIATAN</Text>
-                          return (
+                        <Box
-                            <Box
+                          style={{
-                              key={i}
+                            paddingLeft: 20,
-                              onClick={() => router.push(`/project/${v.id}`)}
+                            paddingRight: 20,
-                            >
+                            paddingTop: 10,
-                              <Grid justify="center" align="center" mt={10}>
+                            paddingBottom: 10,
-                                <Grid.Col
+                            backgroundColor: `#E7EBF1`,
-                                  span={{
+                            borderRadius: 5,
-                                    base: 1.5,
+                          }}
-                                    xs: 1.5,
+                        >
-                                    sm: 1.5,
+                          {dataProject.length > 0 ? (
-                                    md: 1.5,
+                            <Box>
-                                    lg: 1.5,
+                              {dataProject.map((v, i) => {
-                                    xl: 1.5,
+                                return (
-                                  }}
-                                >
-                                  <ActionIcon
-                                    variant="light"
-                                    bg={tema.get().utama}
-                                    size={50}
-                                    radius={100}
-                                    aria-label="icon"
-                                  >
-                                    <HiMiniPresentationChartBar
-                                      color={"white"}
-                                      size={25}
-                                    />
-                                  </ActionIcon>
-                                </Grid.Col>
-                                <Grid.Col
-                                  span={{
-                                    base: 10,
-                                    xs: 10.5,
-                                    sm: 10.5,
-                                    md: 10.5,
-                                    lg: 10.5,
-                                    xl: 10.5,
-                                  }}
-                                  pl={isMobile2 ? 30 : 20}
-                                >
                                   <Box
+                                    key={i}
+                                    onClick={() => router.push(`/project/${v.id}`)}
                                   >
-                                    <Text
+                                    <Grid justify="center" align="center" mt={10}>
-                                      fw={"bold"}
+                                      <Grid.Col
-                                      c={tema.get().utama}
+                                        span={{
-                                      truncate="end"
+                                          base: 1.5,
-                                    >
+                                          xs: 1.5,
-                                      {v.title.toUpperCase()}
+                                          sm: 1.5,
-                                    </Text>
+                                          md: 1.5,
+                                          lg: 1.5,
+                                          xl: 1.5,
+                                        }}
+                                      >
+                                        <ActionIcon
+                                          variant="light"
+                                          bg={tema.get().utama}
+                                          size={50}
+                                          radius={100}
+                                          aria-label="icon"
+                                        >
+                                          <HiMiniPresentationChartBar
+                                            color={"white"}
+                                            size={25}
+                                          />
+                                        </ActionIcon>
+                                      </Grid.Col>
+                                      <Grid.Col
+                                        span={{
+                                          base: 10,
+                                          xs: 10.5,
+                                          sm: 10.5,
+                                          md: 10.5,
+                                          lg: 10.5,
+                                          xl: 10.5,
+                                        }}
+                                        pl={isMobile2 ? 30 : 20}
+                                      >
+                                        <Box
+                                        >
+                                          <Text
+                                            fw={"bold"}
+                                            c={tema.get().utama}
+                                            truncate="end"
+                                          >
+                                            {v.title.toUpperCase()}
+                                          </Text>
+                                        </Box>
+                                        <Text fw={"lighter"} fz={12} truncate="end">
+                                          {v.group}
+                                        </Text>
+                                      </Grid.Col>
+                                    </Grid>
+                                    <Divider mt={10} />
                                   </Box>
-                                  <Text fw={"lighter"} fz={12} truncate="end">
+                                );
-                                    {v.group}
+                              })}
-                                  </Text>
-                                </Grid.Col>
-                              </Grid>
-                              <Divider mt={10} />
                             </Box>
-                          );
+                          ) : null}
-                        })}
+                        </Box>
                       </Box>
                     ) : null}
                   </Box>
                 </Box>
-              ) : null}
+              ) :
-            </Box>
+              search != '' ?
-          </Box>
+                <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
-        ) : null}
+                  <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada data</Text>
+                </Box>
+                : null
+        }
       </Box>
     </>
   );

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/project/ui/navbar_detail_project.tsx

@@ -10,8 +10,8 @@ import { FaFileCirclePlus, FaPencil, FaUsers } from 'react-icons/fa6';
 import { HiMenu } from 'react-icons/hi';
 import { IoAddCircle } from 'react-icons/io5';
 import { MdCancel } from 'react-icons/md';
-import { funGetOneProjectById } from '../lib/api_project';
 import { useWibuRealtime } from 'wibu-realtime';
+import { funGetOneProjectById } from '../lib/api_project';
 
 export default function NavbarDetailProject() {
   const router = useRouter()
@@ -54,7 +54,7 @@ export default function NavbarDetailProject() {
 
   return (
     <>
-      <LayoutNavbarNew back="/project?status=0" title={name} menu={
+      <LayoutNavbarNew back="" title={name} menu={
         <ActionIcon
           variant="light"
           bg={tema.get().bgIcon}

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 router = useRouter()
-  const [isModal, setModal] = useState(false);
+   const [isModal, setModal] = useState(false)
-  const tema = useHookstate(TEMA)
+   const tema = useHookstate(TEMA)
-  const [dataRealTime, setDataRealtime] = useWibuRealtime({
+   const [loadingModal, setLoadingModal] = useState(false)
-    WIBU_REALTIME_TOKEN: keyWibu,
+   const [dataRealTime, setDataRealtime] = useWibuRealtime({
-    project: "sdm"
+      WIBU_REALTIME_TOKEN: keyWibu,
-  })
+      project: "sdm"
+   })
 
-  async function nonActive(val: boolean) {
+   async function nonActive(val: boolean) {
-    try {
+      try {
-      if (val) {
+         if (val) {
-        const res = await funEditStatusMember(id, {
+            setLoadingModal(true)
-          isActive: status ? true : false,
+            const res = await funEditStatusMember(id, {
-        });
+               isActive: status ? true : false,
-        if (res.success) {
+            });
-          setDataRealtime([{
+            if (res.success) {
-            category: "data-member",
+               setDataRealtime([{
-            group: res.data.idGroup,
+                  category: "data-member",
-          }])
+                  group: res.data.idGroup,
-          toast.success(res.message);
+               }])
-          router.push("/member?active=true");
+               toast.success(res.message);
-          onDeleted(true);
+               router.push("/member?active=true");
-        } else {
+               onDeleted(true);
-          onDeleted(false);
+            } 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 (
+   return (
-    <Box>
+      <Box>
-      <Stack pt={10}>
+         <Stack pt={10}>
-        <SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }}>
+            <SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }}>
-          <Flex
+               <Flex
-            justify={"center"}
+                  justify={"center"}
-            align={"center"}
+                  align={"center"}
-            direction={"column"}
+                  direction={"column"}
-            style={{ cursor: "pointer" }}
+                  style={{ cursor: "pointer" }}
-            onClick={() => {
+                  onClick={() => {
-              setModal(true);
+                     setModal(true);
-            }}
+                  }}
-          >
+               >
-            <Box>
+                  <Box>
-              <FaToggleOff size={30} color={tema.get().utama} />
+                     <FaToggleOff size={30} color={tema.get().utama} />
-            </Box>
+                  </Box>
-            <Box>
+                  <Box>
-              <Text c={tema.get().utama} ta="center">
+                     <Text c={tema.get().utama} ta="center">
-                {" "}
+                        {" "}
-                {status === false ? "Aktifkan" : "Non Aktifkan"}
+                        {status === false ? "Aktifkan" : "Non Aktifkan"}
-              </Text>
+                     </Text>
-            </Box>
+                  </Box>
-          </Flex>
+               </Flex>
 
-          <Flex
+               <Flex
-            justify={"center"}
+                  justify={"center"}
-            align={"center"}
+                  align={"center"}
-            direction={"column"}
+                  direction={"column"}
-            style={{ cursor: "pointer" }}
+                  style={{ cursor: "pointer" }}
-            onClick={() => {
+                  onClick={() => {
-              router.push(`/member/edit/${id}`);
+                     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>
+      </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>
-  );
 }

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 (
@@ -72,12 +75,12 @@ export default function Profile() {
             justify="center"
             gap="xs"
           >
-            {loading ? <Skeleton height={100} radius={"100"} width={100} /> :      
+            {loading ? <Skeleton height={100} radius={"100"} width={100} /> :
-            <Avatar
+              <Avatar
-              size="100"
+                size="100"
-              radius={"100"}
+                radius={"100"}
-              src={img}
+                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)} />
     </>