Merge pull request #328 from bipproduction/join

Join

src/app/(application)/division/[id]/(fitur-division)/calender/[detail]/page.tsx

@@ -1,10 +1,9 @@
 import { DetailEventDivision } from '@/module/calender';
-import React from 'react';
 
 function Page() {
   return (
     <>
-    <DetailEventDivision />
+      <DetailEventDivision />
     </>
   );
 }

src/app/api/calender/[id]/route.ts

@@ -100,7 +100,7 @@ export async function GET(request: Request, context: { params: { id: string } })
         }
 
 
-        return NextResponse.json({ success: true, message: "Berhasil mendapatkan kalender", data: dataFix }, { status: 200 });
+        return NextResponse.json({ success: true, message: "Berhasil mendapatkan kalender", data: dataFix, user: user.id }, { status: 200 });
 
     } catch (error) {
         return NextResponse.json({ success: false, message: "Gagal mendapatkan kalender, data tidak ditemukan (error: 500)", }, { status: 500 });
@@ -139,13 +139,16 @@ export async function DELETE(request: Request, context: { params: { id: string }
             },
             data: {
                 isActive: false
+            },
+            select: {
+                dateStart: true
             }
         });
 
         // create log user
         const log = await createLogUser({ act: 'DELETE', desc: 'User menghapus data acara kalender', table: 'divisionCalendar', data: id })
 
-        return NextResponse.json({ success: true, message: "Berhasil menghapus acara kalender", data }, { status: 200 });
+        return NextResponse.json({ success: true, message: "Berhasil menghapus acara kalender", data, user: user.id }, { status: 200 });
 
     } catch (error) {
         return NextResponse.json({ success: false, message: "Gagal menghapus kalender, coba lagi nanti (error: 500)", }, { status: 500 }

src/app/api/division/report/route.ts

@@ -8,14 +8,20 @@ export async function GET(request: Request) {
    try {
       const user = await funGetUserByCookies()
       const { searchParams } = new URL(request.url)
-      const group = searchParams.get("group")
+      const idGroup = searchParams.get("group")
       const division = searchParams.get("division")
       const date = searchParams.get("date")
+      let grup
 
       if (user.id == undefined) {
          return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 })
       }
 
+      if (idGroup == "null" || idGroup == undefined || idGroup == "") {
+         grup = user.idGroup
+      } else {
+         grup = idGroup
+      }
 
       // CHART PROGRESS
       let kondisiProgress
@@ -26,7 +32,7 @@ export async function GET(request: Request) {
                lte: new Date(String(date))
             },
             Division: {
-               idGroup: String(group)
+               idGroup: String(grup)
             }
          }
       } else {
@@ -52,9 +58,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 != "100.00" ? find.substr(-2, 2) == "00" ? find.substr(0, 2) : find : "100"
             input = {
                name: dataStatus[index].name,
-               value: find
+               value: fix
             }
          } else {
             input = {
@@ -75,7 +82,7 @@ export async function GET(request: Request) {
             isActive: true,
             category: 'FILE',
             Division: {
-               idGroup: String(group)
+               idGroup: String(grup)
             },
             createdAt: {
                lte: new Date(String(date))
@@ -137,7 +144,7 @@ export async function GET(request: Request) {
          kondisiEvent = {
             isActive: true,
             Division: {
-               idGroup: String(group)
+               idGroup: String(grup)
             },
             dateStart: new Date(String(date))
          }

src/app/api/document/route.ts

@@ -125,6 +125,11 @@ export async function GET(request: Request) {
                         updatedAt: true
                      }
                   }
+               },
+               orderBy: {
+                  DivisionDocumentFolderFile: {
+                     createdAt: 'desc'
+                  }
                }
             })
 
@@ -169,7 +174,7 @@ export async function GET(request: Request) {
             updatedAt: true
          },
          orderBy: {
-            name: 'asc'
+            createdAt: 'desc'
          }
       })
 
@@ -185,7 +190,7 @@ export async function GET(request: Request) {
          allData.push(...formatDataShare)
       }
 
-      const formatData = _.orderBy(allData, ['category', 'name'], ['desc', 'asc']);
+      const formatData = _.orderBy(allData, ['category', 'createdAt'], ['desc', 'asc']);
 
       let pathNow = path
       let jalur = []

src/app/api/home/route.ts

@@ -185,7 +185,7 @@ 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
+               const fix = find != "100.00" ? find.substr(-2, 2) == "00" ? find.substr(0, 2) : find : "100"
                input = {
                   name: dataStatus[index].name,
                   value: fix

src/app/api/project/[id]/member/route.ts

@@ -136,6 +136,10 @@ export async function GET(request: Request, context: { params: { id: string } })
                 id: {
                     not: String(userId)
                 },
+                OR: [
+                    { idUserRole: 'coadmin', },
+                    { idUserRole: 'user', }
+                ],
                 isActive: true,
                 name: {
                     contains: (name == undefined || name == "null") ? "" : name,
@@ -147,14 +151,24 @@ export async function GET(request: Request, context: { params: { id: string } })
                 id: true,
                 name: true,
                 email: true,
-                img: true
+                img: true,
+                UserRole: {
+                    select: {
+                        name: true
+                    }
+                }
             },
             orderBy: {
                 name: 'asc'
             }
         })
 
-        const fixMember = member.map((v: any) => ({
+        const omitData = member.map((v: any) => ({
+            ..._.omit(v, ["UserRole"]),
+            userRole: v.UserRole.name
+        }))
+
+        const fixMember = omitData.map((v: any) => ({
             idUser: v.id,
             name: v.name,
             email: v.email,

src/app/api/project/[id]/route.ts

@@ -65,6 +65,7 @@ export async function GET(request: Request, context: { params: { id: string } })
                     status: true,
                     dateStart: true,
                     dateEnd: true,
+                    createdAt: true
                 },
                 orderBy: {
                     createdAt: 'asc'
@@ -72,12 +73,13 @@ export async function GET(request: Request, context: { params: { id: string } })
             })
 
             const formatData = dataProgress.map((v: any) => ({
-                ..._.omit(v, ["dateStart", "dateEnd"]),
+                ..._.omit(v, ["dateStart", "dateEnd", "createdAt"]),
                 dateStart: moment(v.dateStart).format("DD-MM-YYYY"),
                 dateEnd: moment(v.dateEnd).format("DD-MM-YYYY"),
+                createdAt: moment(v.createdAt).format("DD-MM-YYYY HH:mm"),
             }))
-
-            allData = formatData
+            const dataFix = _.orderBy(formatData, 'createdAt', 'asc')
+            allData = dataFix
 
         } else if (kategori == "file") {
             const dataFile = await prisma.projectFile.findMany({
@@ -86,7 +88,7 @@ export async function GET(request: Request, context: { params: { id: string } })
                     idProject: String(id)
                 },
                 orderBy: {
-                    createdAt: 'desc'
+                    createdAt: 'asc'
                 },
                 select: {
                     id: true,

src/app/api/user/route.ts

@@ -50,6 +50,7 @@ export async function GET(request: Request) {
         },
         select: {
           id: true,
+          idUserRole: true,
           isActive: true,
           nik: true,
           name: true,
@@ -92,6 +93,7 @@ export async function GET(request: Request) {
         },
         select: {
           id: true,
+          idUserRole: true,
           isActive: true,
           nik: true,
           name: true,

src/app/api/version-app/route.ts

@@ -2,7 +2,7 @@ import { NextResponse } from "next/server";
 
 export async function GET(request: Request) {
    try {
-      return NextResponse.json({ success: true, version: "0.1.8", mode: "staging" }, { status: 200 });
+      return NextResponse.json({ success: true, version: "0.1.9", mode: "staging" }, { status: 200 });
    } catch (error) {
       console.error(error);
       return NextResponse.json({ success: false, version: "Gagal mendapatkan version, coba lagi nanti (error: 500)", reason: (error as Error).message, }, { status: 500 });

src/app/page.tsx

@@ -1,8 +1,4 @@
-import { pwd_key_config } from "@/module/_global";
 import { funDetectCookies, ViewLogin } from "@/module/auth";
-import { unsealData } from "iron-session";
-import _ from "lodash";
-import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
 
 export default async function Home() {

src/module/auth/login/view/view_login.tsx

@@ -1,28 +1,14 @@
 "use client"
 import { LayoutLogin, WARNA } from "@/module/_global";
-import {
-  Box,
-  Button,
-  Checkbox,
-  Image,
-  rem,
-  Stack,
-  Text,
-  TextInput,
-  Title,
-} from "@mantine/core";
-import { useRouter } from "next/navigation";
-import React, { useState } from "react";
+import { Box, Button, Stack, Text, TextInput } from "@mantine/core";
+import { useFocusTrap } from "@mantine/hooks";
+import { useState } from "react";
 import toast from "react-hot-toast";
 import ViewVerification from "../../varification/view/view_verification";
-import { useFocusTrap } from "@mantine/hooks";
 
 function ViewLogin() {
   const focusTrapRef = useFocusTrap()
-  const router = useRouter()
-  const textInfo =
-    "Kami akan mengirimkan kode verifikasi melalui WhatsApp untuk mengonfirmasi nomor Anda.";
-
+  const textInfo = "Kami akan mengirimkan kode verifikasi melalui WhatsApp untuk mengonfirmasi nomor Anda.";
   const [isPhone, setPhone] = useState("")
   const [isOTP, setOTP] = useState<any>(null)
   const [isValPhone, setValPhone] = useState<any>(null)
@@ -37,46 +23,50 @@ function ViewLogin() {
     if (isPhone.toString().length <= 11)
       return toast.error('Nomor telepon tidak valid')
 
-    const cek = await fetch('/api/auth/login', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ phone: isPhone })
-    })
-    const cekLogin = await cek.json()
-
-    if (cekLogin.success) {
-      const code = Math.floor(Math.random() * 1000) + 1000
+    try {
       setLoading(true)
-      try {
-        const res = await fetch(`https://wa.wibudev.com/code?nom=${cekLogin.phone}&text=*DARMASABA*%0A%0A
-          JANGAN BERIKAN KODE RAHASIA ini kepada siapa pun TERMASUK PIHAK DARMASABA. Masukkan otentikasi:  *${encodeURIComponent(code)}*`).then(
-          async (res) => {
-            if (res.status == 200) {
-              setValPhone(cekLogin.phone)
-              setOTP(code)
-              setUser(cekLogin.id)
-              setVerif(true)
-              setLoading(false)
-              toast.success('Kode verifikasi telah dikirim')
-            } else {
-              console.error(res.status)
-              toast.error('Internal Server Error')
-              setLoading(false)
+      const cek = await fetch('/api/auth/login', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ phone: isPhone })
+      })
+      const cekLogin = await cek.json()
+      if (cekLogin.success) {
+        const code = Math.floor(Math.random() * 1000) + 1000
+        try {
+          const res = await fetch(`https://wa.wibudev.com/code?nom=${cekLogin.phone}&text=*DARMASABA*%0A%0A
+            JANGAN BERIKAN KODE RAHASIA ini kepada siapa pun TERMASUK PIHAK DARMASABA. Masukkan otentikasi:  *${encodeURIComponent(code)}*`).then(
+            async (res) => {
+              if (res.status == 200) {
+                setValPhone(cekLogin.phone)
+                setOTP(code)
+                setUser(cekLogin.id)
+                setVerif(true)
+                toast.success('Kode verifikasi telah dikirim')
+              } else {
+                console.error(res.status)
+                toast.error('Internal Server Error')
+              }
             }
-          }
-        )
-      } catch (error) {
-        console.error(error)
-        toast.error('Internal Server Error')
-      }finally{
-        setLoading(false)
+          )
+        } catch (error) {
+          console.error(error)
+          toast.error('Internal Server Error')
+        }
+      } else {
+        return toast.error(cekLogin.message)
       }
-    } else {
-      return toast.error(cekLogin.message)
+    } catch (error) {
+      console.error(error)
+      toast.error('Internal Server Error')
+    } finally {
+      setLoading(false)
     }
 
+
+
   }
 
   if (isVerif) return <ViewVerification otp={isOTP} phone={isValPhone} user={isUser} />

src/module/calender/ui/create_calender_division_caleder.tsx

@@ -211,6 +211,7 @@ export default function CreateCalenderDivisionCaleder() {
                         }
                     />
                     <DateInput
+                        valueFormat='DD-MM-YYYY'
                         required
                         styles={{
                             input: {

src/module/calender/ui/create_user_calender.tsx

@@ -1,19 +1,18 @@
-import React, { useState } from 'react';
-import { globalCalender } from '../lib/val_calender';
-import { useParams, useRouter } from 'next/navigation';
-import { funGetDivisionById, funGetSearchMemberDivision, IDataMemberDivision } from '@/module/division_new';
+import { LayoutNavbarNew, SkeletonList, TEMA } from '@/module/_global';
+import { funGetSearchMemberDivision, IDataMemberDivision } from '@/module/division_new';
 import { useHookstate } from '@hookstate/core';
-import toast from 'react-hot-toast';
+import { Carousel } from '@mantine/carousel';
+import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Indicator, rem, Stack, Text, TextInput } from '@mantine/core';
 import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
-import { LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA } from '@/module/_global';
-import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Stack, Text, TextInput } from '@mantine/core';
+import { useParams } from 'next/navigation';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
 import { FaCheck } from 'react-icons/fa6';
 import { HiChevronLeft, HiMagnifyingGlass } from 'react-icons/hi2';
 import { IoArrowBackOutline, IoClose } from 'react-icons/io5';
-import { Carousel } from '@mantine/carousel';
+import { globalCalender } from '../lib/val_calender';
 
 export default function CreateUserCalender({ onClose }: { onClose: (val: any) => void }) {
-  const router = useRouter()
   const param = useParams<{ id: string }>()
   const [selectedFiles, setSelectedFiles] = useState<any>([])
   const [isData, setData] = useState<IDataMemberDivision[]>([])
@@ -34,11 +33,9 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
         if (member.length > 0) {
           setSelectedFiles(JSON.parse(JSON.stringify(member.get())))
         }
-        setLoading(false)
       } else {
         toast.error(response.message)
       }
-
     } catch (error) {
       console.error(error)
       toast.error("Gagal mendapatkan anggota, coba lagi nanti");
@@ -103,6 +100,7 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
   async function fetchGetMember(val: string) {
     setSearchQuery(val)
     try {
+      setLoading(true)
       const res = await funGetSearchMemberDivision('?search=' + val, param.id);
       if (res.success) {
         setData(res.data)
@@ -111,6 +109,8 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
       }
     } catch (error) {
       console.error(error);
+    } finally {
+      setLoading(false)
     }
   }
 

src/module/calender/ui/create_user_detail_calender.tsx

@@ -1,18 +1,19 @@
 "use client"
-import React, { useState } from 'react';
-import { useParams, useRouter } from 'next/navigation';
+import { keyWibu, LayoutNavbarNew, SkeletonList, TEMA } from '@/module/_global';
 import { funGetSearchMemberDivision, IDataMemberDivision } from '@/module/division_new';
-import toast from 'react-hot-toast';
+import { useHookstate } from '@hookstate/core';
+import { Carousel } from '@mantine/carousel';
+import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Indicator, rem, Stack, Text, TextInput } from '@mantine/core';
 import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
-import { LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA } from '@/module/_global';
-import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Stack, Text, TextInput } from '@mantine/core';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
 import { FaCheck } from 'react-icons/fa6';
 import { HiMagnifyingGlass } from 'react-icons/hi2';
 import { IoArrowBackOutline, IoClose } from 'react-icons/io5';
-import { Carousel } from '@mantine/carousel';
 import { funAddMemberCalender, funGetOneCalender } from '../lib/api_calender';
 import { IDataDetailByIdCalender, IDataDetailByIdMember } from '../lib/type_calender';
-import { useHookstate } from '@hookstate/core';
+import { useWibuRealtime } from 'wibu-realtime';
 
 export default function CreateUserDetailCalender() {
   const router = useRouter()
@@ -27,6 +28,11 @@ export default function CreateUserDetailCalender() {
   const [searchQuery, setSearchQuery] = useState('')
   const tema = useHookstate(TEMA)
   const isMobile2 = useMediaQuery("(max-width: 438px)");
+  const [loadingSubmit, setLoadingSubmit] = useState(false)
+  const [dataRealTime, setDataRealtime] = useWibuRealtime({
+    WIBU_REALTIME_TOKEN: keyWibu,
+    project: "sdm"
+  })
 
   async function getData() {
     try {
@@ -88,9 +94,13 @@ export default function CreateUserDetailCalender() {
       if (selectedFiles.length == 0) {
         return toast.error("Error! silahkan pilih anggota")
       }
-
+      setLoadingSubmit(true)
       const res = await funAddMemberCalender(String(isDataCalender?.idCalendar), selectedFiles)
       if (res.success) {
+        setDataRealtime([{
+          category: "calendar-detail",
+          id: isDataCalender?.idCalendar,
+        }])
         toast.success(res.message)
         router.push('./')
       } else {
@@ -99,6 +109,8 @@ export default function CreateUserDetailCalender() {
     } catch (error) {
       console.error(error);
       toast.error("Gagal menambahkan anggota, coba lagi nanti");
+    } finally {
+      setLoadingSubmit(false)
     }
   }
 
@@ -290,6 +302,7 @@ export default function CreateUserDetailCalender() {
         backgroundColor: `${tema.get().bgUtama}`,
       }}>
         <Button
+          loading={loadingSubmit}
           c={"white"}
           bg={tema.get().utama}
           size="lg"

src/module/calender/ui/detail_event_division.tsx

@@ -1,25 +1,26 @@
 'use client'
-import { LayoutDrawer, LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA } from '@/module/_global';
-import { ActionIcon, Avatar, Box, Center, CopyButton, Divider, Flex, Grid, Group, SimpleGrid, Skeleton, Spoiler, Stack, Text, Tooltip } from '@mantine/core';
-import React, { useState } from 'react';
-import { BsCalendar2Event, BsCalendarDate } from 'react-icons/bs';
-import { MdEventNote, MdOutlineFormatListBulleted } from "react-icons/md";
-import { LuClock, LuCopy, LuLink } from "react-icons/lu";
-import { FaCheck, FaUser } from 'react-icons/fa6';
-import { TbCopy } from 'react-icons/tb';
-import { HiMenu } from 'react-icons/hi';
-import DrawerDetailEvent from './drawer_detail_event';
-import { useParams, useRouter } from 'next/navigation';
-import { funDeleteMemberCalender, funGetOneCalender } from '../lib/api_calender';
+import { keyWibu, LayoutDrawer, LayoutNavbarNew, SkeletonList, TEMA } from '@/module/_global';
+import LayoutModal from '@/module/_global/layout/layout_modal';
+import { useHookstate } from '@hookstate/core';
+import { ActionIcon, Avatar, Box, Center, CopyButton, Divider, Flex, Grid, Group, SimpleGrid, Spoiler, Stack, Text, Tooltip } from '@mantine/core';
 import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
 import moment from "moment";
 import "moment/locale/id";
-import { IDataDetailByIdCalender, IDataDetailByIdMember } from '../lib/type_calender';
-import SkeletonDetailEvent from './skeleton_detail_event';
-import { IoIosCloseCircle } from 'react-icons/io';
-import LayoutModal from '@/module/_global/layout/layout_modal';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
 import toast from 'react-hot-toast';
-import { useHookstate } from '@hookstate/core';
+import { BsCalendar2Event, BsCalendarDate } from 'react-icons/bs';
+import { FaCheck, FaUser } from 'react-icons/fa6';
+import { HiMenu } from 'react-icons/hi';
+import { IoIosCloseCircle } from 'react-icons/io';
+import { LuClock, LuLink } from "react-icons/lu";
+import { MdOutlineFormatListBulleted } from "react-icons/md";
+import { TbCopy } from 'react-icons/tb';
+import { useWibuRealtime } from 'wibu-realtime';
+import { funDeleteMemberCalender, funGetOneCalender } from '../lib/api_calender';
+import { IDataDetailByIdCalender, IDataDetailByIdMember } from '../lib/type_calender';
+import DrawerDetailEvent from './drawer_detail_event';
+import SkeletonDetailEvent from './skeleton_detail_event';
 
 export default function DetailEventDivision() {
   const param = useParams<{ id: string, detail: string }>()
@@ -35,16 +36,22 @@ export default function DetailEventDivision() {
   const tema = useHookstate(TEMA)
   const isMobile2 = useMediaQuery("(max-width: 460px)");
   const isMobile = useMediaQuery('(max-width: 369px)');
+  const [loadingDelete, setLoadingDelete] = useState(false)
+  const [dataRealTime, setDataRealtime] = useWibuRealtime({
+    WIBU_REALTIME_TOKEN: keyWibu,
+    project: "sdm"
+  })
+  const [isUserLogin, setUserLogin] = useState('')
 
 
-  const getData = async () => {
+  const getData = async (loading: boolean) => {
     try {
-      setLoading(true)
+      setLoading(loading)
       const response = await funGetOneCalender(param.detail)
+      setUserLogin(response.user)
       setDataCalender(response.data.calender)
       setDataAnggota(response.data.member)
       setLengthMember(response.data.total)
-      setLoading(false)
     } catch (error) {
       console.error(error)
     } finally {
@@ -53,16 +60,34 @@ export default function DetailEventDivision() {
   }
 
   useShallowEffect(() => {
-    getData()
+    getData(true)
   }, [])
 
+  useShallowEffect(() => {
+    if (dataRealTime && dataRealTime.some((i: any) => i.category == 'calendar-detail' && i.id == isDataCalender?.idCalendar)) {
+      getData(false)
+    }
+
+    if (dataRealTime && dataRealTime.some((i: any) => i.category == 'calendar-detail-delete' && i.id == isDataCalender?.idCalendar && i.idUserFrom != isUserLogin)) {
+      toast.error("Data telah di hapus, anda akan beralih ke halaman list acara")
+      setTimeout(() => {
+        router.push(`/division/${param.id}/calender`)
+      }, 2000)
+    }
+  }, [dataRealTime])
+
   async function onSubmit() {
     try {
+      setLoadingDelete(true)
       const res = await funDeleteMemberCalender(String(isDataCalender?.idCalendar), { idUser: dataChoose.id });
       if (res.success) {
+        setDataRealtime([{
+          category: "calendar-detail",
+          id: isDataCalender?.idCalendar,
+        }])
         toast.success(res.message)
         setDataChoose({ id: '', name: '' })
-        getData()
+        getData(false)
         setOpenDrawer(false)
         setOpenDrawerUser(false)
       } else {
@@ -71,6 +96,9 @@ export default function DetailEventDivision() {
     } catch (error) {
       console.error(error);
       toast.error("Gagal mengeluarkan anggota, coba lagi nanti");
+    } finally {
+      setLoadingDelete(false)
+      setOpenModal(false)
     }
   }
 
@@ -432,16 +460,17 @@ export default function DetailEventDivision() {
         </Box>
       </LayoutDrawer>
 
-      <LayoutModal opened={isOpenModal} onClose={() => setOpenModal(false)}
+      <LayoutModal loading={loadingDelete} opened={isOpenModal} onClose={() => setOpenModal(false)}
         description="Apakah Anda yakin ingin mengeluarkan anggota?"
         onYes={(val) => {
           if (val) {
             onSubmit()
+          } else {
+            setOpenModal(false)
           }
-          setOpenModal(false)
         }} />
       <LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
-        <DrawerDetailEvent idCalendar={String(isDataCalender?.idCalendar)} />
+        <DrawerDetailEvent idCalendar={String(isDataCalender?.idCalendar)} close={() => { setOpenDrawer(false) }} />
       </LayoutDrawer>
     </Box>
   );

src/module/calender/ui/drawer_detail_event.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { TEMA } from '@/module/_global';
+import { keyWibu, TEMA } from '@/module/_global';
 import LayoutModal from '@/module/_global/layout/layout_modal';
 import { Box, Flex, SimpleGrid, Stack, Text } from '@mantine/core';
 import { useParams, useRouter } from 'next/navigation';
@@ -9,30 +9,50 @@ import { MdDelete, MdEdit } from 'react-icons/md';
 import { funDeleteCalenderById } from '../lib/api_calender';
 import { FaUsers } from 'react-icons/fa6';
 import { useHookstate } from '@hookstate/core';
+import { useWibuRealtime } from 'wibu-realtime';
 
-export default function DrawerDetailEvent({ idCalendar }: { idCalendar: string }) {
+export default function DrawerDetailEvent({ idCalendar, close }: { idCalendar: string, close: (val:boolean) => void }) {
   const router = useRouter()
   const [isModal, setModal] = useState(false)
   const param = useParams<{ id: string, detail: string }>()
   const tema = useHookstate(TEMA)
+  const [loadingDelete, setLoadingDelete] = useState(false)
+  const [dataRealTime, setDataRealtime] = useWibuRealtime({
+    WIBU_REALTIME_TOKEN: keyWibu,
+    project: "sdm"
+  })
 
   async function fetchDeleteCalender(val: boolean) {
     try {
       if (val) {
+        setLoadingDelete(true)
         const response = await funDeleteCalenderById(idCalendar)
         if (response.success) {
+          setDataRealtime([
+            {
+              category: "calendar-detail-delete",
+              id: idCalendar,
+            },
+            {
+              category: "calendar-event",
+              division: param.id,
+              date: response.data.dateStart,
+              idUserFrom: response.user
+            }
+          ])
           toast.success(response.message)
-          setModal(false)
           router.push(`/division/${param.id}/calender`)
         } else {
           toast.error(response.message)
         }
       }
-      setModal(false)
     } catch (error) {
       console.error(error);
-      setModal(false)
       toast.error("Gagal hapus acara, coba lagi nanti");
+    } finally {
+      close(true)
+      setLoadingDelete(false)
+      setModal(false)
     }
   }
 
@@ -72,7 +92,7 @@ export default function DrawerDetailEvent({ idCalendar }: { idCalendar: string }
           </Flex>
         </SimpleGrid>
       </Stack>
-      <LayoutModal opened={isModal} onClose={() => setModal(false)}
+      <LayoutModal loading={loadingDelete} opened={isModal} onClose={() => setModal(false)}
         description="Apakah Anda yakin ingin menghapus data acara ini? Data ini akan mempengaruhi semua data yang terkait"
         onYes={(val) => { fetchDeleteCalender(val) }} />
     </Box>

src/module/discussion/ui/detail_discussion.tsx

@@ -6,7 +6,7 @@ import { ActionIcon, Avatar, Badge, Box, Center, Divider, Flex, Grid, Group, rem
 import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
 import moment from "moment";
 import "moment/locale/id";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 import { useState } from "react";
 import toast from "react-hot-toast";
 import { GrChatOption } from "react-icons/gr";
@@ -23,7 +23,6 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
    const [isComent, setIsComent] = useState("")
    const param = useParams<{ id: string, detail: string }>()
    const [isLoad, setIsLoad] = useState(true)
-   const router = useRouter()
    const refresh = useHookstate(globalRefreshDiscussion)
    const roleLogin = useHookstate(globalRole)
    const [isCreator, setCreator] = useState(false)

src/module/discussion/ui/drawer_detail_discussion.tsx

@@ -23,13 +23,15 @@ export default function DrawerDetailDiscussion({ onSuccess, id, status, idDivisi
       WIBU_REALTIME_TOKEN: keyWibu,
       project: "sdm"
    })
+   const [loadingUpdate, setLoadingUpdate] = useState(false)
+   const [loadingDelete, setLoadingDelete] = useState(false)
 
 
    async function fetchStatusDiscussion(val: boolean) {
       try {
+         setLoadingUpdate(true)
          if (val) {
             const response = await funEditStatusDiscussion(id, { status: status })
-
             if (response.success) {
                toast.success(response.message)
                refresh.set(!refresh.get())
@@ -38,40 +40,37 @@ export default function DrawerDetailDiscussion({ onSuccess, id, status, idDivisi
                   id: id,
                }])
                onSuccess(false)
-               setValModalStatus(false)
             } else {
                toast.error(response.message)
             }
          }
-         setValModalStatus(false)
       } catch (error) {
          console.error(error);
-         setValModalStatus(false)
          toast.error("Gagal menambahkan diskusi, coba lagi nanti");
       } finally {
+         setLoadingUpdate(false)
          setValModalStatus(false)
       }
    }
 
    async function fetchDeleteDiscussion(val: boolean) {
       try {
+         setLoadingDelete(true)
          if (val) {
             const response = await funDeleteDiscussion(id)
             if (response.success) {
                toast.success(response.message)
-               setValModal(false)
                onSuccess(false)
                router.push(`/division/${param.id}/discussion`)
             } else {
                toast.error(response.message)
             }
          }
-         setValModal(false)
       } catch (error) {
          console.error(error);
-         setValModal(false)
          toast.error("Gagal hapus diskusi, coba lagi nanti");
       } finally {
+         setLoadingDelete(false)
          setValModal(false)
       }
    }
@@ -130,12 +129,12 @@ export default function DrawerDetailDiscussion({ onSuccess, id, status, idDivisi
             </SimpleGrid>
          </Stack>
 
-         <LayoutModal opened={isValModal} onClose={() => setValModal(false)}
+         <LayoutModal loading={loadingDelete} opened={isValModal} onClose={() => setValModal(false)}
             description="Apakah Anda yakin ingin menghapus diskusi ini?"
             onYes={(val) => { fetchDeleteDiscussion(val) }} />
 
 
-         <LayoutModal opened={isValModalStatus} onClose={() => setValModalStatus(false)}
+         <LayoutModal loading={loadingUpdate} opened={isValModalStatus} onClose={() => setValModalStatus(false)}
             description="Apakah Anda yakin ingin mengubah status diskusi ini?"
             onYes={(val) => { fetchStatusDiscussion(val) }} />
       </Box>

src/module/discussion/ui/form_create_discussion.tsx

@@ -15,7 +15,6 @@ export default function FormCreateDiscussion({ id }: { id: string }) {
    const [isValModal, setValModal] = useState(false)
    const [loadingModal, setLoadingModal] = useState(false)
    const router = useRouter()
-   const [isImg, setImg] = useState("")
    const param = useParams<{ id: string, detail: string }>()
    const [loading, setLoading] = useState(true)
    const [img, setIMG] = useState<any | null>()
@@ -51,25 +50,27 @@ export default function FormCreateDiscussion({ id }: { id: string }) {
 
    async function createDiscussion(val: boolean) {
       try {
-         setLoadingModal(true)
-         const response = await funCreateDiscussion({
-            desc: isData.desc,
-            idDivision: id
-         })
+         if (val) {
+            setLoadingModal(true)
+            const response = await funCreateDiscussion({
+               desc: isData.desc,
+               idDivision: id
+            })
 
-         if (response.success) {
-            setDataRealtime(response.notif)
-            toast.success(response.message)
-            router.push(`/division/${param.id}/discussion/`)
-         } else {
-            toast.error(response.message)
+            if (response.success) {
+               setDataRealtime(response.notif)
+               toast.success(response.message)
+               router.push(`/division/${param.id}/discussion/`)
+            } else {
+               toast.error(response.message)
+            }
          }
       } catch (error) {
          console.error(error);
          toast.error("Gagal menambahkan diskusi, coba lagi nanti");
       } finally {
-         setValModal(false)
          setLoadingModal(false)
+         setValModal(false)
       }
    }
 

src/module/discussion/ui/list_discussion.tsx

@@ -1,16 +1,17 @@
 'use client'
-import { currentScroll, TEMA } from "@/module/_global";
+import { currentScroll, globalNotifPage, ReloadButtonTop, TEMA } from "@/module/_global";
+import { useHookstate } from "@hookstate/core";
 import { Avatar, Badge, Box, Divider, Flex, Grid, Group, Skeleton, Spoiler, Text, TextInput } from "@mantine/core";
-import { useParams, useRouter, useSearchParams } from "next/navigation";
+import { useShallowEffect } from "@mantine/hooks";
+import _ from "lodash";
+import { useParams, useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
+import toast from "react-hot-toast";
 import { GrChatOption } from "react-icons/gr";
 import { HiMagnifyingGlass } from "react-icons/hi2";
 import { funGetAllDiscussion } from "../lib/api_discussion";
-import { useShallowEffect } from "@mantine/hooks";
 import { IDataDiscussion } from "../lib/type_discussion";
-import toast from "react-hot-toast";
-import _ from "lodash";
-import { useHookstate } from "@hookstate/core";
+
 
 export default function ListDiscussion({ id }: { id: string }) {
    const [isData, setData] = useState<IDataDiscussion[]>([])
@@ -21,11 +22,12 @@ export default function ListDiscussion({ id }: { id: string }) {
    const router = useRouter()
    const { value: containerRef } = useHookstate(currentScroll);
    const [isPage, setPage] = useState(1)
+   const notifLoadPage = useHookstate(globalNotifPage)
+   const [isRefresh, setRefresh] = useState(false)
 
    const getData = async (loading: boolean) => {
       try {
-         if (loading)
-            setLoading(true)
+         setLoading(loading)
          const response = await funGetAllDiscussion('?division=' + id + '&search=' + searchQuery + '&page=' + isPage)
          if (response.success) {
             if (isPage == 1) {
@@ -36,7 +38,6 @@ export default function ListDiscussion({ id }: { id: string }) {
          } else {
             toast.error(response.message)
          }
-         setLoading(false)
       } catch (error) {
          console.error(error)
       } finally {
@@ -75,8 +76,37 @@ export default function ListDiscussion({ id }: { id: string }) {
    }, [containerRef, isPage]);
 
 
+
+   useShallowEffect(() => {
+      console.log(notifLoadPage.get())
+      if (notifLoadPage.get().category == 'division/' + param.id + '/discussion' && notifLoadPage.get().load == true) {
+         setRefresh(true)
+      }
+   }, [notifLoadPage.get().load])
+
+   function onRefresh() {
+      notifLoadPage.set({
+         category: '',
+         load: false
+      })
+      setRefresh(false)
+      setPage(1)
+      setTimeout(() => {
+         getData(false)
+      }, 500)
+   }
+
+
    return (
       <Box p={20}>
+         {
+            isRefresh &&
+            <ReloadButtonTop
+               onReload={() => { onRefresh() }}
+               title='UPDATE'
+            />
+
+         }
          <TextInput
             styles={{
                input: {

src/module/division_new/ui/create_anggota_division.tsx

@@ -28,7 +28,8 @@ export default function CreateAnggotaDivision() {
   const [loading, setLoading] = useState(true)
   const [onClickSearch, setOnClickSearch] = useState(false)
   const tema = useHookstate(TEMA)
-  const isMobile2 = useMediaQuery("(max-width: 438px)");
+  const isMobile2 = useMediaQuery("(max-width: 438px)")
+  const [loadingModal, setLoadingModal] = useState(false)
 
   const handleFileClick = (index: number) => {
     if (selectedFiles.some((i: any) => i.idUser == dataMember[index].id)) {
@@ -44,16 +45,25 @@ export default function CreateAnggotaDivision() {
 
 
   async function loadMember(group: string, search: string) {
-    setLoading(true)
-    const res = await funGetAllmember('?active=true&group=' + group + '&search=' + search);
-    const user = await funGetUserByCookies();
+    try {
+      setLoading(true)
+      const res = await funGetAllmember('?active=true&group=' + group + '&search=' + search);
+      const user = await funGetUserByCookies();
 
-    if (res.success) {
-      setDataMember(res.data.filter((i: any) => i.id != user.id))
-    } else {
-      toast.error(res.message)
+      if (res.success) {
+        const dariUserLogin = res.data.filter((i: any) => i.id != user.id)
+        const fixListUser = dariUserLogin.filter((i: any) => i.idUserRole == 'coadmin' || i.idUserRole == 'user')
+        setDataMember(fixListUser)
+      } else {
+        toast.error(res.message)
+      }
+    } catch (error) {
+      console.error(error)
+      toast.error("Gagal memuat data, coba lagi nanti")
+    } finally {
+      setLoading(false)
     }
-    setLoading(false)
+
   }
 
   async function loadFirst() {
@@ -69,6 +79,7 @@ export default function CreateAnggotaDivision() {
 
   async function addMember() {
     try {
+      setLoadingModal(true)
       const res = await funAddDivisionMember(param.id, selectedFiles)
       if (res.success) {
         toast.success(res.message)
@@ -76,15 +87,22 @@ export default function CreateAnggotaDivision() {
       } else {
         toast.error(res.message)
       }
-      setOpen(false)
     } catch (error) {
-      setOpen(false)
       console.error(error);
       toast.error("Gagal menambahkan anggota divisi, coba lagi nanti");
-
+    } finally {
+      setLoadingModal(false)
+      setOpen(false)
     }
   }
 
+  function onCheck() {
+    if (selectedFiles.length == 0) {
+      return toast.error("Error! silahkan pilih anggota")
+    }
+    setOpen(true)
+  }
+
 
   useShallowEffect(() => {
     loadFirst()
@@ -149,7 +167,7 @@ export default function CreateAnggotaDivision() {
         borderBottom: `1px solid ${"#E0DFDF"}`
       }}>
         {selectedFiles.length > 0 ? (
-          <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"}  withControls={false}>
+          <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withControls={false}>
             {selectedFiles.map((v: any, i: any) => {
               return (
                 <Carousel.Slide key={i}>
@@ -195,51 +213,51 @@ export default function CreateAnggotaDivision() {
               <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text>
             </Stack>
             :
-          <Box pt={90} mb={100}>
-            {dataMember.map((v: any, index: any) => {
-              const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id)
-              const found = memberDb.some((i: any) => i.idUser == v.id)
-              return (
-                <Box my={10} key={index} onClick={() => (!found) ? handleFileClick(index) : null}>
-                  <Grid align='center' >
-                    <Grid.Col
-                    span={{
-                      base: 1,
-                      xs: 1,
-                      sm: 1,
-                      md: 1,
-                      lg: 1,
-                      xl: 1,
-                    }}
-                    >
-                      <Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
-                    </Grid.Col>
-                    <Grid.Col
-                     span={{
-                      base: 11,
-                      xs: 11,
-                      sm: 11,
-                      md: 11,
-                      lg: 11,
-                      xl: 11,
-                    }}
-                    >
-                      <Flex justify='space-between' align={"center"}>
-                        <Flex direction={'column'} align="flex-start" justify="flex-start">
-                          <Text pl={isMobile2 ? 40 : 30} lineClamp={1}>{v.name}</Text>
-                          <Text pl={isMobile2 ? 40 : 30} c={"dimmed"} lineClamp={1}>{(found) ? "sudah menjadi anggota divisi" : ""}</Text>
+            <Box pt={90} mb={100}>
+              {dataMember.map((v: any, index: any) => {
+                const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id)
+                const found = memberDb.some((i: any) => i.idUser == v.id)
+                return (
+                  <Box my={10} key={index} onClick={() => (!found) ? handleFileClick(index) : null}>
+                    <Grid align='center' >
+                      <Grid.Col
+                        span={{
+                          base: 1,
+                          xs: 1,
+                          sm: 1,
+                          md: 1,
+                          lg: 1,
+                          xl: 1,
+                        }}
+                      >
+                        <Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
+                      </Grid.Col>
+                      <Grid.Col
+                        span={{
+                          base: 11,
+                          xs: 11,
+                          sm: 11,
+                          md: 11,
+                          lg: 11,
+                          xl: 11,
+                        }}
+                      >
+                        <Flex justify='space-between' align={"center"}>
+                          <Flex direction={'column'} align="flex-start" justify="flex-start">
+                            <Text pl={isMobile2 ? 40 : 30} lineClamp={1}>{v.name}</Text>
+                            <Text pl={isMobile2 ? 40 : 30} c={"dimmed"} lineClamp={1}>{(found) ? "sudah menjadi anggota divisi" : ""}</Text>
+                          </Flex>
+                          {isSelected ? <FaCheck /> : null}
                         </Flex>
-                        {isSelected ? <FaCheck /> : null}
-                      </Flex>
-                    </Grid.Col>
-                  </Grid>
-                  <Box mt={10}>
-                    <Divider size={"xs"} />
+                      </Grid.Col>
+                    </Grid>
+                    <Box mt={10}>
+                      <Divider size={"xs"} />
+                    </Box>
                   </Box>
-                </Box>
-              )
-            })}
-          </Box>
+                )
+              })}
+            </Box>
         }
       </Box>
       <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
@@ -253,12 +271,12 @@ export default function CreateAnggotaDivision() {
           size="lg"
           radius={30}
           fullWidth
-          onClick={() => { setOpen(true) }}
+          onClick={() => { onCheck() }}
         >
           Simpan
         </Button>
       </Box>
-      <LayoutModal opened={isOpen} onClose={() => setOpen(false)}
+      <LayoutModal loading={loadingModal} opened={isOpen} onClose={() => setOpen(false)}
         description="Apakah Anda yakin ingin menambahkan anggota divisi?"
         onYes={(val) => {
           if (val) {

src/module/division_new/ui/create_report.tsx

@@ -1,19 +1,18 @@
 "use client";
-import { LayoutNavbarNew, TEMA } from "@/module/_global";
-import { Box, Select, Skeleton, Stack, Text } from "@mantine/core";
-import { DateInput } from "@mantine/dates";
-import React, { useState } from "react";
-import EchartPaiReport from "./echart_pai_report";
-import EchartBarReport from "./echart_bar_report";
-import EventReport from "./event_report";
-import DiscussionReport from "./discussion_report";
+import { globalRole, LayoutNavbarNew, TEMA } from "@/module/_global";
 import { funGetAllGroup, IDataGroup } from "@/module/group";
-import toast from "react-hot-toast";
-import { useShallowEffect } from "@mantine/hooks";
-import { funGetReportDivision } from "../lib/api_division";
-import { useParams } from "next/navigation";
-import moment from "moment";
 import { useHookstate } from "@hookstate/core";
+import { Box, Select, Skeleton, Stack } from "@mantine/core";
+import { DateInput } from "@mantine/dates";
+import { useShallowEffect } from "@mantine/hooks";
+import moment from "moment";
+import { useParams } from "next/navigation";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import { funGetReportDivision } from "../lib/api_division";
+import EchartBarReport from "./echart_bar_report";
+import EchartPaiReport from "./echart_pai_report";
+import EventReport from "./event_report";
 
 export default function CreateReport() {
   const [value, setValue] = useState<Date | null>(null);
@@ -23,6 +22,7 @@ export default function CreateReport() {
   const [isGroup, setIsGroup] = useState("");
   const param = useParams<{ id: string }>()
   const tema = useHookstate(TEMA)
+  const roleLogin = useHookstate(globalRole)
   const [report, setReport] = useState({
     progress: [],
     dokumen: [],
@@ -74,13 +74,20 @@ export default function CreateReport() {
   }
 
   function onChangeDate(val: any) {
-    if (val != null && val != "" && isGroup != "" && isGroup != "null") {
-      onReport(isGroup, val)
-    }
 
-    if (isGroup == null || isGroup == "") {
-      setTampil(false)
-      toast.error("Error! harus memilih grup")
+    if (roleLogin.get() == "supadmin") {
+      if (val != null && val != "" && isGroup != "" && isGroup != "null") {
+        onReport(isGroup, val)
+      }
+
+      if (isGroup == null || isGroup == "") {
+        setTampil(false)
+        toast.error("Error! harus memilih grup")
+      }
+    } else {
+      if (val != null && val != "") {
+        onReport(isGroup, val)
+      }
     }
 
     setValue(val)
@@ -95,19 +102,23 @@ export default function CreateReport() {
       <LayoutNavbarNew back="/division" title="Laporan Divisi" menu />
       <Box p={20}>
         <Stack>
-          <Select
-            placeholder="Grup"
-            label="Grup"
-            size="md"
-            required
-            radius={10}
-            data={dataGroup?.map((pro: any) => ({
-              value: String(pro.id),
-              label: pro.name
-            }))}
-            onChange={(val) => { onChooseGroup(val) }}
-          />
+          {roleLogin.get() == "supadmin" &&
+            <Select
+              placeholder="Grup"
+              label="Grup"
+              size="md"
+              required
+              radius={10}
+              data={dataGroup?.map((pro: any) => ({
+                value: String(pro.id),
+                label: pro.name
+              }))}
+              onChange={(val) => { onChooseGroup(val) }}
+            />
+          }
+
           <DateInput
+            valueFormat="DD-MM-YYYY"
             value={value}
             onChange={(val) => { onChangeDate(val) }}
             radius={10}

src/module/division_new/ui/drawer_detail_division.tsx

@@ -1,10 +1,9 @@
 "use client"
 import { TEMA } from "@/module/_global";
 import { useHookstate } from "@hookstate/core";
-import { Box, Stack, SimpleGrid, Flex, Text } from "@mantine/core";
+import { Box, Flex, SimpleGrid, Stack, Text } from "@mantine/core";
 import { useParams, useRouter } from "next/navigation";
 import { BsInfoCircle } from "react-icons/bs";
-import { FaPencil } from "react-icons/fa6";
 import { TbReportAnalytics } from "react-icons/tb";
 
 export default function DrawerDetailDivision() {

src/module/division_new/ui/echart_pai_report.tsx

@@ -1,11 +1,10 @@
-import React, { useState } from 'react';
-import { EChartsOption, color } from "echarts";
-import EChartsReact from "echarts-for-react";
-import { useShallowEffect } from '@mantine/hooks';
-import * as echarts from 'echarts';
-import { Box } from '@mantine/core';
 import { TEMA } from '@/module/_global';
 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';
 
 export default function EchartPaiReport({ data }: { data: any }) {
   const [options, setOptions] = useState<EChartsOption>({});

src/module/division_new/ui/edit_division.tsx

@@ -70,8 +70,6 @@ export default function EditDivision() {
       } else {
         toast.error(res.message);
       }
-      setLoading(false);
-
     } catch (error) {
       console.error(error);
       toast.error("Gagal mendapatkan divisi, coba lagi nanti");
@@ -87,6 +85,7 @@ export default function EditDivision() {
       const res = await funEditDivision(param.id, body)
       if (res.success) {
         toast.success(res.message)
+        router.push("/division/info/" + param.id)
       } else {
         toast.error(res.message)
       }

src/module/division_new/ui/event_report.tsx

@@ -1,8 +1,7 @@
-import { Box, Divider, Group, ScrollArea, Stack, Text } from '@mantine/core';
-import React from 'react';
-import { IDataReportDivision } from '../lib/type_division';
+import { Box, Divider, Group, Text } from '@mantine/core';
 import _ from 'lodash';
 import { useRouter } from 'next/navigation';
+import { IDataReportDivision } from '../lib/type_division';
 
 export default function EventReport({ data, tgl }: { data: IDataReportDivision[], tgl: string }) {
   const router = useRouter()
@@ -14,7 +13,7 @@ export default function EventReport({ data, tgl }: { data: IDataReportDivision[]
         _.isEmpty(data)
           ?
           <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '20vh' }}>
-            <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada event</Text>
+            <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada acara</Text>
           </Box>
           :
           data.map((event, index) => {

src/module/division_new/ui/information_division.tsx

@@ -37,10 +37,11 @@ export default function InformationDivision() {
   const isMobile2 = useMediaQuery("(max-width: 438px)");
   const tema = useHookstate(TEMA)
   const [loadingStatus, setLoadingStatus] = useState(false)
+  const [loadingDelete, setLoadingDelete] = useState(false)
 
-  async function getOneData() {
+  async function getOneData(loading: boolean) {
     try {
-      setLoading(true);
+      setLoading(loading)
       const res = await funGetDivisionById(param.id);
       const login = await funGetUserByCookies()
       if (res.success) {
@@ -53,18 +54,17 @@ export default function InformationDivision() {
       } else {
         toast.error(res.message);
       }
-      setLoading(false);
 
     } catch (error) {
       console.error(error);
       toast.error("Gagal mendapatkan divisi, coba lagi nanti");
     } finally {
-      setLoading(false);
+      setLoading(false)
     }
   }
 
   useShallowEffect(() => {
-    getOneData();
+    getOneData(true);
   }, [param.id])
 
 
@@ -77,19 +77,21 @@ export default function InformationDivision() {
 
   async function deleteMember() {
     try {
+      setLoadingDelete(true)
       const res = await funDeleteMemberDivision(param.id, { id: valChooseMember })
       if (res.success) {
         toast.success(res.message)
         setDrawer(false)
-        getOneData()
+        getOneData(false)
       } else {
         toast.error(res.message)
       }
-      setOpenModal(false)
     } catch (error) {
       console.error(error);
-      setOpenModal(false)
       toast.error("Gagal mendapatkan divisi, coba lagi nanti");
+    } finally {
+      setLoadingDelete(false)
+      setOpenModal(false)
     }
   }
 
@@ -99,7 +101,7 @@ export default function InformationDivision() {
       const res = await funEditStatusAdminDivision(param.id, { id: valChooseMember, isAdmin: valChooseMemberStatus })
       if (res.success) {
         toast.success(res.message)
-        getOneData()
+        getOneData(false)
       } else {
         toast.error(res.message)
       }
@@ -116,7 +118,7 @@ export default function InformationDivision() {
       const res = await funUpdateStatusDivision(param.id, { isActive: valActive })
       if (res.success) {
         toast.success(res.message)
-        getOneData()
+        getOneData(false)
       } else {
         toast.error(res.message)
       }
@@ -276,7 +278,7 @@ export default function InformationDivision() {
         </Box>
       </LayoutDrawer>
 
-      <LayoutModal opened={isOpenModal} onClose={() => setOpenModal(false)}
+      <LayoutModal loading={loadingDelete} opened={isOpenModal} onClose={() => setOpenModal(false)}
         description="Apakah Anda yakin ingin mengeluarkan anggota?"
         onYes={(val) => {
           if (!val) {

src/module/division_new/ui/list_discussion.tsx

@@ -1,15 +1,15 @@
 "use client"
 import { TEMA } from "@/module/_global";
+import { useHookstate } from "@hookstate/core";
 import { Box, Grid, Group, Skeleton, Stack, Text } from "@mantine/core";
 import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
 import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
 import toast from "react-hot-toast";
-import { CiUser, CiClock2 } from "react-icons/ci";
+import { CiClock2, CiUser } from "react-icons/ci";
 import { GoDiscussionClosed } from "react-icons/go";
 import { funGetDetailDivisionById } from "../lib/api_division";
 import { IDataDiscussionOnDetailDivision } from "../lib/type_division";
-import { useHookstate } from "@hookstate/core";
 
 
 export default function ListDiscussionOnDetailDivision() {
@@ -30,7 +30,6 @@ export default function ListDiscussionOnDetailDivision() {
       } else {
         toast.error(res.message);
       }
-      setLoading(false);
     } catch (error) {
       console.error(error);
       toast.error("Gagal mendapatkan divisi, coba lagi nanti");
@@ -49,106 +48,108 @@ export default function ListDiscussionOnDetailDivision() {
         <Text c={tema.get().utama} mb={10} fw={"bold"} fz={16}>
           Diskusi Terbaru
         </Text>
-        <Box
-          bg={"white"}
-          style={{
-            borderRadius: 10,
-            border: `1px solid ${"#D6D8F6"}`,
-            padding: 10,
-          }}
-        >
+        {
+          !loading && data.length === 0 ?
+            <Stack align="stretch" justify="center" w={"100%"}>
+              <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada diskusi</Text>
+            </Stack>
+            :
+            <Box
+              bg={"white"}
+              style={{
+                borderRadius: 10,
+                border: `1px solid ${"#D6D8F6"}`,
+                padding: 10,
+              }}
+            >
 
-          {
-            loading ?
-              Array(2)
-                .fill(null)
-                .map((_, i) => (
-                  <Stack align="stretch" justify="center" key={i} pb={10}>
-                    <Skeleton height={80} radius="md" m={0} />
-                    <Group justify="space-between">
-                      <Skeleton height={10} radius="md" m={0} w={100} />
-                      <Skeleton height={10} radius="md" m={0} w={100} />
-                    </Group>
-                  </Stack>
-                ))
-              :
-              (data.length === 0) ?
-                <Stack align="stretch" justify="center" w={"100%"}>
-                  <Text c="dimmed" ta={"center"} fs={"italic"}>Belum ada diskusi</Text>
-                </Stack>
-                : <></>
-          }
-          {data.map((v, i) => {
-            return (
-              <Box key={i} p={10}>
-                <Box style={{
-                  borderRadius: 10,
-                  border: `1px solid ${"#D6D8F6"}`,
-                  padding: 10,
-                }}
-                  onClick={() => router.push(`${param.id}/discussion/${v.id}`)}
-                >
-                  <Grid align='center'>
-                    <Grid.Col
-                      span={{
-                        base: 1,
-                        xs: 1,
-                        sm: 1,
-                        md: 1,
-                        lg: 1,
-                        xl: 1,
-                      }}
+              {
+                loading ?
+                  Array(2)
+                    .fill(null)
+                    .map((_, i) => (
+                      <Stack align="stretch" justify="center" key={i} pb={10}>
+                        <Skeleton height={80} radius="md" m={0} />
+                        <Group justify="space-between">
+                          <Skeleton height={10} radius="md" m={0} w={100} />
+                          <Skeleton height={10} radius="md" m={0} w={100} />
+                        </Group>
+                      </Stack>
+                    ))
+                  : <></>
+              }
+              {data.map((v, i) => {
+                return (
+                  <Box key={i} p={10}>
+                    <Box style={{
+                      borderRadius: 10,
+                      border: `1px solid ${"#D6D8F6"}`,
+                      padding: 10,
+                    }}
+                      onClick={() => router.push(`${param.id}/discussion/${v.id}`)}
                     >
-                      <GoDiscussionClosed size={25} />
-                    </Grid.Col>
-                    <Grid.Col
-                      span={{
-                        base: 11,
-                        xs: 11,
-                        sm: 11,
-                        md: 11,
-                        lg: 11,
-                        xl: 11,
-                      }}
-                    >
-                      <Text fw={"bold"} truncate="end" pl={isMobile2 ? 10 : 0} fz={isMobile ? 14 : 16}>
-                        {v.desc}
-                      </Text>
-                    </Grid.Col>
-                  </Grid>
-                  <Grid align="center" mt={20}>
-                    <Grid.Col span={{
-                      base: 7,
-                      xl: 9
-                    }}>
-                      <Group gap={5} align="center">
-                        <CiUser size={18} />
-                        <Box w={{
-                          base: isMobile ? 110 : 125,
-                          xl: 300
-                        }}>
-                          <Text fz={13} lineClamp={1}>
-                            {v.user}
+                      <Grid align='center'>
+                        <Grid.Col
+                          span={{
+                            base: 1,
+                            xs: 1,
+                            sm: 1,
+                            md: 1,
+                            lg: 1,
+                            xl: 1,
+                          }}
+                        >
+                          <GoDiscussionClosed size={25} />
+                        </Grid.Col>
+                        <Grid.Col
+                          span={{
+                            base: 11,
+                            xs: 11,
+                            sm: 11,
+                            md: 11,
+                            lg: 11,
+                            xl: 11,
+                          }}
+                        >
+                          <Text fw={"bold"} truncate="end" pl={isMobile2 ? 10 : 0} fz={isMobile ? 14 : 16}>
+                            {v.desc}
                           </Text>
-                        </Box>
-                      </Group>
-                    </Grid.Col>
-                    <Grid.Col span={{
-                      base: 5,
-                      xl: 3
-                    }}>
-                      <Group gap={5} align="center" justify="flex-end">
-                        <CiClock2 size={18} />
-                        <Text fz={isMobile ? 11 : 13}>{v.date}</Text>
-                      </Group>
-                    </Grid.Col>
-                  </Grid>
-                </Box>
-              </Box>
+                        </Grid.Col>
+                      </Grid>
+                      <Grid align="center" mt={20}>
+                        <Grid.Col span={{
+                          base: 7,
+                          xl: 9
+                        }}>
+                          <Group gap={5} align="center">
+                            <CiUser size={18} />
+                            <Box w={{
+                              base: isMobile ? 110 : 125,
+                              xl: 300
+                            }}>
+                              <Text fz={13} lineClamp={1}>
+                                {v.user}
+                              </Text>
+                            </Box>
+                          </Group>
+                        </Grid.Col>
+                        <Grid.Col span={{
+                          base: 5,
+                          xl: 3
+                        }}>
+                          <Group gap={5} align="center" justify="flex-end">
+                            <CiClock2 size={18} />
+                            <Text fz={isMobile ? 11 : 13}>{v.date}</Text>
+                          </Group>
+                        </Grid.Col>
+                      </Grid>
+                    </Box>
+                  </Box>
 
-            );
-          })}
-        </Box>
+                );
+              })}
+            </Box>
+        }
       </Box>
     </>
   );

src/module/division_new/ui/list_division.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { currentScroll, globalNotifPage, globalRole, LayoutDrawer, LayoutNavbarNew, ReloadButtonTop, SkeletonList, TEMA } from '@/module/_global';
+import { currentScroll, globalNotifPage, globalRole, ReloadButtonTop, SkeletonList, TEMA } from '@/module/_global';
 import { useHookstate } from '@hookstate/core';
 import { ActionIcon, Avatar, Box, Card, Center, Divider, Flex, Grid, Group, Skeleton, Text, TextInput, Title } from '@mantine/core';
 import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
@@ -7,12 +7,10 @@ import _ from 'lodash';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import toast from 'react-hot-toast';
-import { HiMenu } from 'react-icons/hi';
 import { HiMagnifyingGlass, HiMiniUserGroup, HiOutlineListBullet, HiSquares2X2 } from 'react-icons/hi2';
 import { MdAccountCircle } from 'react-icons/md';
 import { funGetAllDivision } from '../lib/api_division';
 import { IDataDivison } from '../lib/type_division';
-import DrawerDivision from './drawer_division';
 
 export default function ListDivision() {
   const [isList, setIsList] = useState(false)
@@ -243,36 +241,42 @@ export default function ListDivision() {
                   </Box>
                 ))
               :
-              data?.map((v: any, i: any) => {
-                return (
-                  <Box key={i} mb={20}>
-                    <Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/division/${v.id}`)}>
-                      <Card.Section>
-                        <Box h={120} bg={tema.get().utama}>
-                          <Flex justify={'center'} align={'center'} h={"100%"} pl={20} pr={20}>
-                            <Title order={3} c={"white"} ta={"center"} lineClamp={2}>{v.name}</Title>
-                          </Flex>
+              _.isEmpty(data)
+                ?
+                <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
+                  <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada Divisi</Text>
+                </Box>
+                :
+                data?.map((v: any, i: any) => {
+                  return (
+                    <Box key={i} mb={20}>
+                      <Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/division/${v.id}`)}>
+                        <Card.Section>
+                          <Box h={120} bg={tema.get().utama}>
+                            <Flex justify={'center'} align={'center'} h={"100%"} pl={20} pr={20}>
+                              <Title order={3} c={"white"} ta={"center"} lineClamp={2}>{v.name}</Title>
+                            </Flex>
+                          </Box>
+                        </Card.Section>
+                        <Box pt={10}>
+                          <Text lineClamp={2}>{v.desc}</Text>
+                          <Group align='center' pt={10} justify='flex-end'>
+                            <Avatar.Group>
+                              <Avatar>
+                                <MdAccountCircle size={32} color={tema.get().utama} />
+                              </Avatar>
+                              <Avatar>
+                                {
+                                  (v.jumlah_member == 0) ? "0" : "+" + (v.jumlah_member - 1)
+                                }
+                              </Avatar>
+                            </Avatar.Group>
+                          </Group>
                         </Box>
-                      </Card.Section>
-                      <Box pt={10}>
-                        <Text lineClamp={2}>{v.desc}</Text>
-                        <Group align='center' pt={10} justify='flex-end'>
-                          <Avatar.Group>
-                            <Avatar>
-                              <MdAccountCircle size={32} color={tema.get().utama} />
-                            </Avatar>
-                            <Avatar>
-                              {
-                                (v.jumlah_member == 0) ? "0" : "+" + (v.jumlah_member - 1)
-                              }
-                            </Avatar>
-                          </Avatar.Group>
-                        </Group>
-                      </Box>
-                    </Card>
-                  </Box>
-                );
-              })
+                      </Card>
+                    </Box>
+                  );
+                })
             }
           </Box>
         )}

src/module/division_new/ui/list_document.tsx

@@ -1,15 +1,15 @@
 'use client'
 import { TEMA, } from "@/module/_global";
+import { useHookstate } from "@hookstate/core";
 import { Carousel } from "@mantine/carousel";
-import { Box, Image, Text, Center, Paper, Stack, UnstyledButton, Skeleton, Group } from "@mantine/core";
-import * as ICON from '../lib/file_icon'
-import { useParams, useRouter } from "next/navigation";
+import { Box, Center, Group, Image, Skeleton, Stack, Text, UnstyledButton } from "@mantine/core";
 import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
+import { useParams, useRouter } from "next/navigation";
+import { useState } from "react";
 import toast from "react-hot-toast";
 import { funGetDetailDivisionById } from "../lib/api_division";
+import * as ICON from '../lib/file_icon';
 import { IDataKalenderOnDetailDivision } from "../lib/type_division";
-import { useState } from "react";
-import { useHookstate } from "@hookstate/core";
 
 const iconContainer = (icon: string) => 'data:image/svg+xml;base64,' + btoa(icon)
 
@@ -29,7 +29,6 @@ export default function ListDocumentOnDetailDivision() {
          } else {
             toast.error(res.message);
          }
-         setLoading(false);
       } catch (error) {
          console.error(error);
          toast.error("Gagal mendapatkan divisi, coba lagi nanti");
@@ -60,7 +59,7 @@ export default function ListDocumentOnDetailDivision() {
                      ))
                   : (data.length === 0) ?
                      <Stack align="stretch" justify="center" w={"100%"}>
-                        <Text c="dimmed" ta={"center"} fs={"italic"}>Belum ada file</Text>
+                        <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada dokumen</Text>
                      </Stack>
                      : <></>
             }

src/module/division_new/ui/list_task.tsx

@@ -1,16 +1,15 @@
 'use client'
 import { TEMA } from "@/module/_global";
+import { useHookstate } from "@hookstate/core";
 import { Carousel } from "@mantine/carousel";
-import { Avatar, Box, Group, Skeleton, Stack, Text } from "@mantine/core";
+import { Box, Group, Skeleton, Stack, Text } from "@mantine/core";
 import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
 import { useParams, useRouter } from "next/navigation";
+import { useState } from "react";
 import toast from "react-hot-toast";
 import { CiClock2 } from "react-icons/ci";
 import { funGetDetailDivisionById } from "../lib/api_division";
-import { useState } from "react";
 import { IDataTaskOnDetailDivision } from "../lib/type_division";
-import _ from "lodash";
-import { useHookstate } from "@hookstate/core";
 
 
 export default function ListTaskOnDetailDivision() {
@@ -29,7 +28,6 @@ export default function ListTaskOnDetailDivision() {
          } else {
             toast.error(res.message);
          }
-         setLoading(false);
       } catch (error) {
          console.error(error);
          toast.error("Gagal mendapatkan divisi, coba lagi nanti");
@@ -61,7 +59,7 @@ export default function ListTaskOnDetailDivision() {
                   :
                   (data.length === 0) ?
                      <Stack align="stretch" justify="center" w={"100%"}>
-                        <Text c="dimmed" ta={"center"} fs={"italic"}>Belum ada tugas hari ini</Text>
+                        <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada tugas hari ini</Text>
                      </Stack>
                      : <></>
             }

src/module/division_new/ui/navbar_detail_division.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
+import { globalRole, LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
 import { useHookstate } from "@hookstate/core";
 import { ActionIcon } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
@@ -15,12 +15,16 @@ export default function NavbarDetailDivision() {
    const param = useParams<{ id: string }>()
    const [name, setName] = useState('')
    const tema = useHookstate(TEMA)
+   const roleLogin = useHookstate(globalRole)
+   const [grup, setGroup] = useState('')
+
 
    async function getOneData() {
       try {
          const res = await funGetDivisionById(param.id);
          if (res.success) {
             setName(res.data.division.name);
+            setGroup(res.data.division.idGroup)
          } else {
             toast.error(res.message);
          }
@@ -37,7 +41,7 @@ export default function NavbarDetailDivision() {
 
    return (
       <>
-         <LayoutNavbarNew back="" title={name} menu={
+         <LayoutNavbarNew back={roleLogin.get() == 'supadmin' ? `/division?group=${grup}` : '/division'} 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/division_new/ui/report_division_id.tsx

@@ -1,18 +1,17 @@
 "use client"
 import { LayoutNavbarNew, TEMA } from '@/module/_global';
+import { useHookstate } from '@hookstate/core';
 import { Box, Skeleton, Stack } from '@mantine/core';
 import { DateInput } from '@mantine/dates';
-import React, { useState } from 'react';
-import EchartPaiReport from './echart_pai_report';
-import EchartBarReport from './echart_bar_report';
-import EventReport from './event_report';
-import DiscussionReport from './discussion_report';
-import { useParams } from 'next/navigation';
-import { funGetReportDivision } from '../lib/api_division';
 import moment from 'moment';
 import "moment/locale/id";
+import { useParams } from 'next/navigation';
+import { useState } from 'react';
 import toast from 'react-hot-toast';
-import { useHookstate } from '@hookstate/core';
+import { funGetReportDivision } from '../lib/api_division';
+import EchartBarReport from './echart_bar_report';
+import EchartPaiReport from './echart_pai_report';
+import EventReport from './event_report';
 
 
 export default function ReportDivisionId() {
@@ -64,6 +63,7 @@ export default function ReportDivisionId() {
       <Box p={20}>
         <Stack>
           <DateInput
+            valueFormat='DD-MM-YYYY'
             value={value}
             onChange={(val) => { onChangeDate(val) }}
             radius={10}

src/module/document/ui/drawer_cut_documents.tsx

@@ -8,11 +8,11 @@ import toast from "react-hot-toast";
 import { FcFolder } from "react-icons/fc";
 import { GoChevronRight } from "react-icons/go";
 import { MdFolder } from "react-icons/md";
+import { useWibuRealtime } from "wibu-realtime";
 import { funCreateFolder, funGetAllDocument } from "../lib/api_document";
 import { IDataDocument, IFormDetailMoreItem, IJalurItem, } from "../lib/type_document";
-import { useWibuRealtime } from "wibu-realtime";
 
-export default function DrawerCutDocuments({ category, onChoosePath, data, }: { category: string; data: IFormDetailMoreItem[]; onChoosePath: (val: string) => void; }) {
+export default function DrawerCutDocuments({ category, loadingAction, onChoosePath, data, }: { category: string; loadingAction: boolean; data: IFormDetailMoreItem[]; onChoosePath: (val: string) => void; }) {
   const [opened, setOpened] = useState(false);
   const param = useParams<{ id: string }>();
   const [path, setPath] = useState("home");
@@ -100,6 +100,7 @@ export default function DrawerCutDocuments({ category, onChoosePath, data, }: {
           </Grid.Col>
           <Grid.Col span={6}>
             <Button
+              loading={loadingAction}
               variant="filled"
               fullWidth
               color={tema.get().utama}

src/module/document/ui/drawer_menu_document_division.tsx

@@ -24,6 +24,7 @@ export default function DrawerMenuDocumentDivision() {
   const openRef = useRef<() => void>(null)
   const tema = useHookstate(TEMA)
   const [loading, setLoading] = useState(false)
+  const [loadingCreate, setLoadingCreate] = useState(false)
   const [dataRealTime, setDataRealtime] = useWibuRealtime({
     WIBU_REALTIME_TOKEN: keyWibu,
     project: "sdm"
@@ -36,6 +37,7 @@ export default function DrawerMenuDocumentDivision() {
 
   async function onCreateFolder() {
     try {
+      setLoadingCreate(true)
       const res = await funCreateFolder(bodyFolder)
       if (!res.success) {
         toast.error(res.message)
@@ -48,11 +50,13 @@ export default function DrawerMenuDocumentDivision() {
     } catch (error) {
       console.error(error);
       toast.error("Gagal membuat folder baru, coba lagi nanti");
+    } finally {
+      setLoadingCreate(false)
+      refresh.set(true)
+      setOpenModal(false)
+      setOpenDrawerDocument(false)
     }
 
-    refresh.set(true)
-    setOpenModal(false)
-    setOpenDrawerDocument(false)
   }
 
   async function onUploadFile(data: any) {
@@ -204,7 +208,7 @@ export default function DrawerMenuDocumentDivision() {
               <Button variant="subtle" fullWidth color='#969494' onClick={() => setOpenModal(false)}>Batalkan</Button>
             </Grid.Col>
             <Grid.Col span={6}>
-              <Button variant="subtle" fullWidth color={tema.get().utama} onClick={() => onCreateFolder()}>Membuat</Button>
+              <Button loading={loadingCreate} variant="subtle" fullWidth color={tema.get().utama} onClick={() => onCreateFolder()}>Membuat</Button>
             </Grid.Col>
           </Grid>
         </Box>

src/module/document/ui/drawer_more.tsx

@@ -2,15 +2,15 @@ import { keyWibu, LayoutDrawer, TEMA } from "@/module/_global";
 import { useHookstate } from "@hookstate/core";
 import { Box, Flex, SimpleGrid, Stack, Text } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
-import { useParams } from "next/navigation";
+import { useParams, useSearchParams } from "next/navigation";
 import { useState } from "react";
 import toast from "react-hot-toast";
 import { LuFolders, LuFolderSymlink } from "react-icons/lu";
+import { useWibuRealtime } from "wibu-realtime";
 import { funCopyDocument, funMoveDocument } from "../lib/api_document";
 import { IDataDocument } from "../lib/type_document";
 import { globalRefreshDocument } from "../lib/val_document";
 import DrawerCutDocuments from "./drawer_cut_documents";
-import { useWibuRealtime } from "wibu-realtime";
 
 export default function DrawerMore({ data }: { data: IDataDocument[] }) {
   const [isCut, setIsCut] = useState(false)
@@ -19,20 +19,31 @@ export default function DrawerMore({ data }: { data: IDataDocument[] }) {
   const param = useParams<{ id: string }>()
   const [forbidCopy, setForbidCopy] = useState(true)
   const tema = useHookstate(TEMA)
+  const [loadingMove, setLoadingMove] = useState(false)
+  const [loadingCopy, setLoadingCopy] = useState(false)
   const [dataRealTime, setDataRealtime] = useWibuRealtime({
     WIBU_REALTIME_TOKEN: keyWibu,
     project: "sdm"
   })
+  const searchParams = useSearchParams()
+  const pathAwal = searchParams.get('path')
 
 
   async function onMoveItem(path: string) {
     try {
+      setLoadingMove(true)
       const res = await funMoveDocument({ path, dataItem: data })
       if (res.success) {
-        setDataRealtime([{
-          category: "division-document",
-          id: path,
-        }])
+        setDataRealtime([
+          {
+            category: "division-document",
+            id: path,
+          },
+          {
+            category: "division-document",
+            id: pathAwal,
+          }
+        ])
         toast.success(res.message)
         refresh.set(true)
       } else {
@@ -41,13 +52,16 @@ export default function DrawerMore({ data }: { data: IDataDocument[] }) {
     } catch (error) {
       console.error(error)
       toast.error("Gagal memindahkan item, coba lagi nanti")
+    } finally {
+      setLoadingMove(false)
+      setIsCut(false)
     }
-    setIsCut(false)
   }
 
 
   async function onCopyItem(path: string) {
     try {
+      setLoadingCopy(true)
       const res = await funCopyDocument({ idDivision: param.id, path, dataItem: data })
       if (res.success) {
         setDataRealtime([{
@@ -62,8 +76,10 @@ export default function DrawerMore({ data }: { data: IDataDocument[] }) {
     } catch (error) {
       console.error(error)
       toast.error("Gagal memindahkan item, coba lagi nanti")
+    } finally {
+      setLoadingCopy(false)
+      setIsCopy(false)
     }
-    setIsCopy(false)
   }
 
 
@@ -108,11 +124,11 @@ export default function DrawerMore({ data }: { data: IDataDocument[] }) {
 
 
       <LayoutDrawer opened={isCut} onClose={() => setIsCut(false)} title={'Pilih Lokasi Pemindahan'} size="lg">
-        <DrawerCutDocuments data={data} onChoosePath={(val) => { onMoveItem(val) }} category="move" />
+        <DrawerCutDocuments data={data} loadingAction={loadingMove} onChoosePath={(val) => { onMoveItem(val) }} category="move" />
       </LayoutDrawer>
 
       <LayoutDrawer opened={isCopy} onClose={() => setIsCopy(false)} title={'Pilih Lokasi Salin'} size="lg">
-        <DrawerCutDocuments data={data} onChoosePath={(val) => { onCopyItem(val) }} category="copy" />
+        <DrawerCutDocuments data={data} loadingAction={loadingCopy} onChoosePath={(val) => { onCopyItem(val) }} category="copy" />
       </LayoutDrawer>
     </Box>
   );

src/module/document/ui/navbar_document_division.tsx

@@ -18,13 +18,13 @@ import { HiMenu } from "react-icons/hi";
 import { LuShare2 } from "react-icons/lu";
 import { MdClose, MdOutlineMoreHoriz } from "react-icons/md";
 import { RiListCheck } from "react-icons/ri";
+import { useWibuRealtime } from "wibu-realtime";
 import { funDeleteDocument, funGetAllDocument, funRenameDocument, } from "../lib/api_document";
 import { IDataDocument, IJalurItem } from "../lib/type_document";
 import { globalRefreshDocument } from "../lib/val_document";
 import DrawerMenuDocumentDivision from "./drawer_menu_document_division";
 import DrawerMore from "./drawer_more";
 import DrawerShareDocument from "./drawer_share_document";
-import { useWibuRealtime } from "wibu-realtime";
 
 export default function NavbarDocumentDivision() {
   const router = useRouter();
@@ -52,6 +52,8 @@ export default function NavbarDocumentDivision() {
   const isMobile2 = useMediaQuery("(max-width: 496px)");
   const tema = useHookstate(TEMA);
   const [loading, setLoading] = useState(true);
+  const [loadingRename, setLoadingRename] = useState(false);
+  const [loadingDelete, setLoadingDelete] = useState(false);
   const [dataRealTime, setDataRealtime] = useWibuRealtime({
     WIBU_REALTIME_TOKEN: keyWibu,
     project: "sdm"
@@ -138,8 +140,9 @@ export default function NavbarDocumentDivision() {
   };
 
   async function onConfirmDelete(val: boolean) {
-    if (val) {
-      try {
+    try {
+      if (val) {
+        setLoadingDelete(true)
         const respon = await funDeleteDocument(selectedFiles);
         if (respon.success) {
           getOneData(false);
@@ -150,19 +153,20 @@ export default function NavbarDocumentDivision() {
         } else {
           toast.error(respon.message);
         }
-      } catch (error) {
-        console.error(error);
-        toast.error("Gagal menghapus item, coba lagi nanti");
+        handleBatal();
       }
-
-      handleBatal();
+    } catch (error) {
+      console.error(error);
+      toast.error("Gagal menghapus item, coba lagi nanti");
+    } finally {
+      setLoadingDelete(false)
+      setIsDelete(false);
     }
-
-    setIsDelete(false);
   }
 
   async function onRenameSubmit() {
     try {
+      setLoadingRename(true);
       const res = await funRenameDocument(bodyRename);
       if (res.success) {
         setDataRealtime([{
@@ -176,11 +180,13 @@ export default function NavbarDocumentDivision() {
     } catch (error) {
       console.error(error);
       toast.error("Gagal mengganti nama item, coba lagi nanti");
+    } finally {
+      setLoadingRename(false)
+      setSelectedFiles([]);
+      setDariSelectAll(false);
+      setRename(false);
     }
 
-    setSelectedFiles([]);
-    setDariSelectAll(false);
-    setRename(false);
   }
 
   useShallowEffect(() => {
@@ -802,6 +808,7 @@ export default function NavbarDocumentDivision() {
 
       {/* MODAL KONFIRMASI DELETE */}
       <LayoutModal
+        loading={loadingDelete}
         opened={isDelete}
         onClose={() => setIsDelete(false)}
         description="Apakah Anda yakin ingin menghapus item?"
@@ -861,6 +868,7 @@ export default function NavbarDocumentDivision() {
             </Grid.Col>
             <Grid.Col span={6}>
               <Button
+                loading={loadingRename}
                 variant="subtle"
                 fullWidth
                 color={tema.get().utama}

src/module/project/lib/api_project.ts

@@ -1,4 +1,4 @@
-import { IFormAddDetailproject, IFormAddMemberProject, IFormDateProject, IFormProject } from "./type_project";
+import { IFormAddDetailproject, IFormAddMemberProject, IFormDateProject } from "./type_project";
 
 
 export const funGetAllProject = async (path?: string) => {

src/module/project/ui/add_file_detail_project.tsx

@@ -2,7 +2,7 @@
 import { keyWibu, LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
 import { useHookstate } from "@hookstate/core";
-import { Box, Button, Flex, Group, rem, SimpleGrid, Stack, Text, } from "@mantine/core";
+import { Box, Button, Flex, Group, Loader, rem, SimpleGrid, Stack, Text, } from "@mantine/core";
 import { Dropzone } from "@mantine/dropzone";
 import _ from "lodash";
 import { useParams, useRouter } from "next/navigation";
@@ -10,10 +10,10 @@ import { useRef, useState } from "react";
 import toast from "react-hot-toast";
 import { FaTrash } from "react-icons/fa6";
 import { IoIosArrowDropright } from "react-icons/io";
+import { useWibuRealtime } from "wibu-realtime";
 import { funAddFileProject, funCekNamFileUploadProject } from "../lib/api_project";
 import { IListFileTaskProject } from "../lib/type_project";
 import ResultsFile from "./results_file";
-import { useWibuRealtime } from "wibu-realtime";
 
 
 export default function AddFileDetailProject() {
@@ -26,6 +26,7 @@ export default function AddFileDetailProject() {
    const [indexDelFile, setIndexDelFile] = useState<number>(0)
    const [openDrawerFile, setOpenDrawerFile] = useState(false)
    const tema = useHookstate(TEMA)
+   const [loadingUpload, setLoadingUpload] = useState(false)
    const openRef = useRef<() => void>(null)
    const [dataRealTime, setDataRealtime] = useWibuRealtime({
       WIBU_REALTIME_TOKEN: keyWibu,
@@ -41,6 +42,7 @@ export default function AddFileDetailProject() {
 
    async function cekFileName(data: any) {
       try {
+         setLoadingUpload(true)
          const fd = new FormData();
          fd.append(`file`, data);
          const res = await funCekNamFileUploadProject(param.id, fd)
@@ -53,6 +55,8 @@ export default function AddFileDetailProject() {
       } catch (error) {
          console.error(error)
          toast.error("Gagal menambahkan file, coba lagi nanti")
+      } finally {
+         setLoadingUpload(false)
       }
    }
 
@@ -92,8 +96,7 @@ export default function AddFileDetailProject() {
    return (
       <Box>
          <LayoutNavbarNew back="" title={"Tambah File"} menu />
-
-         <Box p={20}>
+         <Box p={20} pb={100}>
             <Stack>
                <Dropzone
                   openRef={openRef}
@@ -147,6 +150,13 @@ export default function AddFileDetailProject() {
                   </Box>
                </Box>
             }
+            {
+               loadingUpload &&
+               <Group justify="center" py={20}>
+                  <Loader color="gray" type="dots" />
+               </Group>
+            }
+
          </Box>
          <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
             maxWidth: rem(550),

src/module/project/ui/add_member_detail_project.tsx

@@ -3,7 +3,7 @@ import { keyWibu, LayoutNavbarNew, SkeletonList, TEMA } from '@/module/_global';
 import LayoutModal from '@/module/_global/layout/layout_modal';
 import { useHookstate } from '@hookstate/core';
 import { Carousel } from '@mantine/carousel';
-import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Skeleton, Stack, Text, TextInput } from '@mantine/core';
+import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Stack, Text, TextInput } from '@mantine/core';
 import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
@@ -50,7 +50,6 @@ export default function AddMemberDetailProject() {
       } else {
         toast.error(res.message);
       }
-      setLoading(false)
     } catch (error) {
       console.error(error)
       toast.error("Gagal mendapatkan anggota, coba lagi nanti");
@@ -296,20 +295,16 @@ export default function AddMemberDetailProject() {
         zIndex: 999,
         backgroundColor: `${tema.get().bgUtama}`,
       }}>
-        {loading ?
-          <Skeleton height={50} radius={30} />
-          :
-          <Button
-            c={"white"}
-            bg={tema.get().utama}
-            size="lg"
-            radius={30}
-            fullWidth
-            onClick={() => { onVerifikasi() }}
-          >
-            Simpan
-          </Button>
-        }
+        <Button
+          c={"white"}
+          bg={tema.get().utama}
+          size="lg"
+          radius={30}
+          fullWidth
+          onClick={() => { onVerifikasi() }}
+        >
+          Simpan
+        </Button>
       </Box>
 
       <LayoutModal loading={loadingModal} opened={openModal} onClose={() => setOpenModal(false)}

src/module/project/ui/cancel_project.tsx

@@ -13,6 +13,7 @@ export default function CancelProject() {
   const router = useRouter()
   const [alasan, setAlasan] = useState("")
   const [openModal, setOpenModal] = useState(false)
+  const [loadingModal, setLoadingModal] = useState(false)
   const param = useParams<{ id: string }>()
   const tema = useHookstate(TEMA)
   const [touched, setTouched] = useState({
@@ -23,15 +24,38 @@ export default function CancelProject() {
     project: "sdm"
   })
 
-  function onVerification() {
-    if (alasan == "")
-      return toast.error("Error! harus memasukkan alasan pembatalan Kegiatan")
+  function onCheck() {
+    const cek = checkAll()
+    if (!cek)
+      return false
 
     setOpenModal(true)
   }
 
+  function checkAll() {
+    let nilai = true
+    if (alasan == "") {
+      setTouched(touched => ({ ...touched, reason: true }))
+      nilai = false
+    }
+    return nilai
+  }
+
+
+  function onValidation(kategori: string, val: string) {
+    if (kategori == 'reason') {
+      setAlasan(val)
+      if (val == "") {
+        setTouched({ ...touched, reason: true })
+      } else {
+        setTouched({ ...touched, reason: false })
+      }
+    }
+  }
+
   async function onSubmit() {
     try {
+      setLoadingModal(true)
       const res = await funCancelProject(param.id, { reason: alasan })
       if (res.success) {
         setDataRealtime([{
@@ -39,13 +63,16 @@ export default function CancelProject() {
           id: param.id,
         }])
         toast.success(res.message)
-        router.push("/project")
+        router.push("/project/" + param.id)
       } else {
         toast.error(res.message)
       }
     } catch (error) {
       console.error(error)
       toast.error("Gagal membatalkan Kegiatan, coba lagi nanti")
+    } finally {
+      setLoadingModal(false)
+      setOpenModal(false)
     }
   }
 
@@ -63,8 +90,7 @@ export default function CancelProject() {
             value={alasan}
             size="md" placeholder='Contoh : Kegiatan tidak sesuai' label="Alasan Pembatalan"
             onChange={(event) => {
-              setAlasan(event.target.value)
-              setTouched({ ...touched, reason: false })
+              onValidation('reason', event.target.value)
             }}
             error={
               touched.reason && (
@@ -86,20 +112,21 @@ export default function CancelProject() {
           size="lg"
           radius={30}
           fullWidth
-          onClick={() => { onVerification() }}
+          onClick={() => { onCheck() }}
         >
           Simpan
         </Button>
       </Box>
 
 
-      <LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
-        description="Apakah Anda yakin ingin membatalkan Kegiatan ini? Pembatalan Kegiatan bersifat permanen"
+      <LayoutModal loading={loadingModal} opened={openModal} onClose={() => setOpenModal(false)}
+        description="Apakah Anda yakin ingin membatalkan kegiatan ini? Pembatalan kegiatan bersifat permanen"
         onYes={(val) => {
           if (val) {
             onSubmit()
+          } else {
+            setOpenModal(false)
           }
-          setOpenModal(false)
         }} />
     </Box>
   );

src/module/project/ui/create_users_project.tsx

@@ -1,27 +1,24 @@
 "use client"
-import { LayoutNavbarNew, SkeletonList, SkeletonSingle, SkeletonUser, TEMA } from '@/module/_global';
-import { useHookstate } from '@hookstate/core';
-import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Indicator, Input, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
-import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
-import { useRouter } from 'next/navigation';
-import React, { useState } from 'react';
-import { HiChevronLeft, HiMagnifyingGlass } from 'react-icons/hi2';
-import { funGetAllmember, TypeUser } from '@/module/user';
+import { LayoutNavbarNew, SkeletonList, TEMA } from '@/module/_global';
 import { funGetUserByCookies } from '@/module/auth';
-import toast from 'react-hot-toast';
-import { globalMemberProject } from '../lib/val_project';
-import { FaCheck } from 'react-icons/fa6';
-import { IoArrowBackOutline, IoClose } from 'react-icons/io5';
+import { funGetAllmember, TypeUser } from '@/module/user';
+import { useHookstate } from '@hookstate/core';
 import { Carousel } from '@mantine/carousel';
+import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Indicator, rem, Stack, Text, TextInput } from '@mantine/core';
+import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import { FaCheck } from 'react-icons/fa6';
+import { HiChevronLeft, HiMagnifyingGlass } from 'react-icons/hi2';
+import { IoArrowBackOutline, IoClose } from 'react-icons/io5';
+import { globalMemberProject } from '../lib/val_project';
 
 
 export default function CreateUsersProject({ grup, onClose }: { grup?: string, onClose: (val: any) => void }) {
-  const router = useRouter()
   const member = useHookstate(globalMemberProject)
   const [selectedFiles, setSelectedFiles] = useState<any>([]);
   const [dataMember, setDataMember] = useState<TypeUser>([])
   const [loading, setLoading] = useState(true)
-  const [openTugas, setOpenTugas] = useState(false)
   const [onClickSearch, setOnClickSearch] = useState(false)
   const tema = useHookstate(TEMA)
   const isMobile2 = useMediaQuery("(max-width: 438px)");
@@ -36,21 +33,25 @@ export default function CreateUsersProject({ grup, onClose }: { grup?: string, o
 
 
   async function loadData(search: string) {
-    setLoading(true)
-    const res = await funGetAllmember('?active=true&group=' + grup + '&search=' + search);
-    const user = await funGetUserByCookies();
-
-    if (res.success) {
-      setDataMember(res.data.filter((i: any) => i.id != user.id))
-
-      // cek data member sebelumnya
-      if (member.length > 0) {
-        setSelectedFiles(JSON.parse(JSON.stringify(member.get())))
+    try {
+      setLoading(true)
+      const res = await funGetAllmember('?active=true&group=' + grup + '&search=' + search);
+      const user = await funGetUserByCookies();
+      if (res.success) {
+        setDataMember(res.data.filter((i: any) => i.id != user.id))
+        // cek data member sebelumnya
+        if (member.length > 0) {
+          setSelectedFiles(JSON.parse(JSON.stringify(member.get())))
+        }
+      } else {
+        toast.error("Gagal mendapatkan data, coba lagi nanti")
       }
-    } else {
-      toast.error(res.message)
+    } catch (error) {
+      console.error(error)
+      toast.error("Gagal mendapatkan data, coba lagi nanti")
+    } finally {
+      setLoading(false)
     }
-    setLoading(false)
   }
 
 

src/module/project/ui/edit_detail_task_project.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { LayoutNavbarNew, TEMA } from '@/module/_global';
+import { keyWibu, LayoutNavbarNew, TEMA } from '@/module/_global';
 import LayoutModal from '@/module/_global/layout/layout_modal';
 import { useHookstate } from '@hookstate/core';
 import { Box, Button, Flex, Group, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
@@ -9,6 +9,7 @@ import moment from 'moment';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 import toast from 'react-hot-toast';
+import { useWibuRealtime } from 'wibu-realtime';
 import { funEditDetailProject, funGetDetailProject } from '../lib/api_project';
 
 export default function EditDetailTaskProject() {
@@ -24,6 +25,10 @@ export default function EditDetailTaskProject() {
       title: false,
       date: false,
    });
+   const [dataRealTime, setDataRealtime] = useWibuRealtime({
+      WIBU_REALTIME_TOKEN: keyWibu,
+      project: "sdm"
+   })
    const router = useRouter()
 
    async function onSubmit() {
@@ -43,6 +48,10 @@ export default function EditDetailTaskProject() {
          })
 
          if (res.success) {
+            setDataRealtime([{
+               category: "project-detail-task",
+               id: idProject,
+            }])
             toast.success(res.message);
             router.push('/project/' + idProject)
          } else {

src/module/project/ui/list_project.tsx

@@ -55,7 +55,6 @@ export default function ListProject() {
       } else {
         toast.error(response.message);
       }
-      setLoading(false);
     } catch (error) {
       toast.error("Gagal mendapatkan kegiatan, coba lagi nanti");
       console.error(error);

src/module/project/ui/navbar_detail_project.tsx

@@ -17,6 +17,7 @@ export default function NavbarDetailProject() {
   const router = useRouter()
   const param = useParams<{ id: string }>()
   const [name, setName] = useState('')
+  const [grup, setGrup] = useState("")
   const [isOpen, setOpen] = useState(false)
   const roleLogin = useHookstate(globalRole)
   const tema = useHookstate(TEMA)
@@ -32,6 +33,7 @@ export default function NavbarDetailProject() {
       if (res.success) {
         setName(res.data.title);
         setReason(res.data.reason);
+        setGrup(res.data.idGroup);
       } else {
         toast.error(res.message);
       }
@@ -54,7 +56,7 @@ export default function NavbarDetailProject() {
 
   return (
     <>
-      <LayoutNavbarNew back="" title={name} menu={
+      <LayoutNavbarNew back={`/project?group=${grup}`} title={name} menu={
         <ActionIcon
           variant="light"
           bg={tema.get().bgIcon}

src/module/project/ui/progress_detail_project.tsx

@@ -110,7 +110,7 @@ export default function ProgressDetailProject() {
           :
           <Box
             p={20}
-            bg={"#DCEED8"}
+            bg={tema.get().bgTotalKegiatan}
             style={{
               borderRadius: 10,
             }}

src/module/task/ui/add_file_detail_task.tsx

@@ -2,7 +2,7 @@
 import { keyWibu, LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
 import { useHookstate } from "@hookstate/core";
-import { Box, Button, Flex, Group, rem, SimpleGrid, Stack, Text, } from "@mantine/core";
+import { Box, Button, Flex, Group, Loader, rem, SimpleGrid, Stack, Text, } from "@mantine/core";
 import { Dropzone } from "@mantine/dropzone";
 import _ from "lodash";
 import { useParams, useRouter } from "next/navigation";
@@ -27,6 +27,7 @@ export default function AddFileDetailTask() {
    const [openDrawerFile, setOpenDrawerFile] = useState(false)
    const tema = useHookstate(TEMA)
    const openRef = useRef<() => void>(null)
+   const [loadingUpload, setLoadingUpload] = useState(false)
    const [dataRealTime, setDataRealtime] = useWibuRealtime({
       WIBU_REALTIME_TOKEN: keyWibu,
       project: "sdm"
@@ -41,6 +42,7 @@ export default function AddFileDetailTask() {
 
    async function cekFileName(data: any) {
       try {
+         setLoadingUpload(true)
          const fd = new FormData();
          fd.append(`file`, data);
          const res = await funCekNamFileUploadTask(param.detail, fd)
@@ -53,6 +55,8 @@ export default function AddFileDetailTask() {
       } catch (error) {
          console.error(error)
          toast.error("Gagal menambahkan file, coba lagi nanti")
+      } finally {
+         setLoadingUpload(false)
       }
    }
 
@@ -146,6 +150,12 @@ export default function AddFileDetailTask() {
                   </Box>
                </Box>
             }
+            {
+               loadingUpload &&
+               <Group justify="center" py={20}>
+                  <Loader color="gray" type="dots" />
+               </Group>
+            }
          </Box>
          <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
             maxWidth: rem(550),

src/module/task/ui/add_member_detail_task.tsx

@@ -4,7 +4,7 @@ import LayoutModal from "@/module/_global/layout/layout_modal";
 import { funGetSearchMemberDivision, IDataMemberDivision } from "@/module/division_new";
 import { useHookstate } from "@hookstate/core";
 import { Carousel } from "@mantine/carousel";
-import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Stack, Text, TextInput } from "@mantine/core";
+import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Indicator, rem, Stack, Text, TextInput } from "@mantine/core";
 import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
 import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
@@ -53,7 +53,6 @@ export default function AddMemberDetailTask() {
             toast.error(res.message);
          }
 
-         setLoading(false)
       } catch (error) {
          console.error(error)
          toast.error("Gagal mendapatkan anggota, coba lagi nanti");
@@ -143,6 +142,7 @@ export default function AddMemberDetailTask() {
    async function fetchGetMember(val: string) {
       setSearchQuery(val)
       try {
+         setLoading(true)
          const res = await funGetSearchMemberDivision('?search=' + val, param.id);
          if (res.success) {
             setData(res.data)
@@ -151,6 +151,8 @@ export default function AddMemberDetailTask() {
          }
       } catch (error) {
          console.error(error);
+      } finally {
+         setLoading(false)
       }
    }
 
@@ -243,12 +245,12 @@ export default function AddMemberDetailTask() {
 
 
          <Box p={20}>
-            <Group justify="space-between" mt={100} onClick={handleSelectAll}>
+            {/* <Group justify="space-between" mt={100} onClick={handleSelectAll}>
                <Text c={tema.get().utama} fw={"bold"}>
                   Pilih Semua Anggota
                </Text>
                {selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
-            </Group>
+            </Group> */}
             {loading ? Array(8)
                .fill(null)
                .map((_, i) => (
@@ -267,7 +269,7 @@ export default function AddMemberDetailTask() {
                         const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
                         const found = isDataMember.some((i: any) => i.idUser == v.idUser)
                         return (
-                           <Box mb={15} key={i} onClick={() => (!found) ? handleFileClick(i) : null}>
+                           <Box mb={15} mt={i === 0 ? 100 : 0} key={i} onClick={() => (!found) ? handleFileClick(i) : null}>
                               <Grid align='center'>
                                  <Grid.Col span={{
                                     base: 1,

src/module/task/ui/create_task.tsx

@@ -34,7 +34,6 @@ export default function CreateTask() {
   const [dataTask, setDataTask] = useState<IFormDateTask[]>([])
   const openRef = useRef<() => void>(null)
   const [fileForm, setFileForm] = useState<any[]>([])
-  const [imgForm, setImgForm] = useState<any>()
   const [listFile, setListFile] = useState<IListFileTask[]>([])
   const [indexDelFile, setIndexDelFile] = useState<number>(0)
   const [indexDelTask, setIndexDelTask] = useState<number>(0)

src/module/task/ui/create_users_project.tsx

@@ -1,38 +1,20 @@
 "use client"
-import { LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA } from "@/module/_global";
-import { funGetDivisionById, funGetSearchMemberDivision, IDataMemberDivision } from "@/module/division_new";
+import { LayoutNavbarNew, SkeletonList, TEMA } from "@/module/_global";
+import { funGetSearchMemberDivision, IDataMemberDivision } from "@/module/division_new";
 import { useHookstate } from "@hookstate/core";
-import {
-  ActionIcon,
-  Avatar,
-  Box,
-  Button,
-  Center,
-  Divider,
-  Flex,
-  Grid,
-  Group,
-  Indicator,
-  rem,
-  Skeleton,
-  Stack,
-  Text,
-  TextInput,
-} from "@mantine/core";
+import { Carousel } from "@mantine/carousel";
+import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Skeleton, Stack, Text, TextInput } from "@mantine/core";
 import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
 import { useParams, useRouter } from "next/navigation";
-import React, { useState } from "react";
+import { useState } from "react";
 import toast from "react-hot-toast";
-import { globalMemberTask } from "../lib/val_task";
-import { FaCheck } from "react-icons/fa6";
-import { RiListCheck } from "react-icons/ri";
 import { BsListCheck } from "react-icons/bs";
+import { FaCheck } from "react-icons/fa6";
 import { HiChevronLeft, HiMagnifyingGlass } from "react-icons/hi2";
 import { IoArrowBackOutline, IoClose } from "react-icons/io5";
-import { Carousel } from "@mantine/carousel";
+import { globalMemberTask } from "../lib/val_task";
 
 export default function CreateUsersProject({ onClose }: { onClose: (val: any) => void }) {
-  const router = useRouter()
   const param = useParams<{ id: string }>()
   const [selectedFiles, setSelectedFiles] = useState<any>([])
   const [isData, setData] = useState<IDataMemberDivision[]>([])
@@ -57,7 +39,6 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
       } else {
         toast.error(response.message)
       }
-      setLoading(false)
     } catch (error) {
       console.error(error)
       toast.error("Gagal mendapatkan anggota, coba lagi nanti");
@@ -122,6 +103,7 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
   async function fetchGetMember(val: string) {
     setSearchQuery(val)
     try {
+      setLoading(true)
       const res = await funGetSearchMemberDivision('?search=' + val, param.id);
       if (res.success) {
         setData(res.data)
@@ -130,6 +112,8 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
       }
     } catch (error) {
       console.error(error);
+    } finally {
+      setLoading(false)
     }
   }
 
@@ -228,7 +212,7 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
 
 
       <Box p={20}>
-        {loading ?
+        {/* {loading ?
           <Skeleton height={20} width={"100%"} mt={20} />
           :
           <Group justify="space-between" mt={100} onClick={handleSelectAll}>
@@ -237,7 +221,7 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
             </Text>
             <BsListCheck size={25} style={{ marginRight: 5 }} color={tema.get().utama} />
           </Group>
-        }
+        } */}
         <Box mt={15} mb={100}>
           {loading ?
             Array(8)
@@ -249,47 +233,47 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
               ))
             :
             (isData.length === 0) ?
-            <Stack align="stretch" justify="center" w={"100%"} h={"60vh"}>
-              <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text>
-            </Stack>
-            :
-            isData.map((v, i) => {
-              const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
-              return (
-                <Box mb={15} key={i} onClick={() => handleFileClick(i)}>
-                  <Grid align='center'>
-                    <Grid.Col span={{
-                      base: 1,
-                      xs: 1,
-                      sm: 1,
-                      md: 1,
-                      lg: 1,
-                      xl: 1
-                    }}>
-                      <Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
-                    </Grid.Col>
-                    <Grid.Col span={{
-                      base: 11,
-                      xs: 11,
-                      sm: 11,
-                      md: 11,
-                      lg: 11,
-                      xl: 11,
-                    }}>
-                      <Flex justify='space-between' align={"center"}>
-                        <Flex direction={'column'} align="flex-start" justify="flex-start">
-                          <Text lineClamp={1} pl={isMobile2 ? 40 : 30}>{v.name}</Text>
+              <Stack align="stretch" justify="center" w={"100%"} h={"60vh"}>
+                <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text>
+              </Stack>
+              :
+              isData.map((v, i) => {
+                const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
+                return (
+                  <Box mb={15} key={i} onClick={() => handleFileClick(i)} mt={i===0 ? 100 : 0}>
+                    <Grid align='center'>
+                      <Grid.Col span={{
+                        base: 1,
+                        xs: 1,
+                        sm: 1,
+                        md: 1,
+                        lg: 1,
+                        xl: 1
+                      }}>
+                        <Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
+                      </Grid.Col>
+                      <Grid.Col span={{
+                        base: 11,
+                        xs: 11,
+                        sm: 11,
+                        md: 11,
+                        lg: 11,
+                        xl: 11,
+                      }}>
+                        <Flex justify='space-between' align={"center"}>
+                          <Flex direction={'column'} align="flex-start" justify="flex-start">
+                            <Text lineClamp={1} pl={isMobile2 ? 40 : 30}>{v.name}</Text>
+                          </Flex>
+                          {isSelected ? <FaCheck /> : null}
                         </Flex>
-                        {isSelected ? <FaCheck /> : null}
-                      </Flex>
-                    </Grid.Col>
-                  </Grid>
-                  <Box mt={10}>
-                    <Divider size={"xs"} />
+                      </Grid.Col>
+                    </Grid>
+                    <Box mt={10}>
+                      <Divider size={"xs"} />
+                    </Box>
                   </Box>
-                </Box>
-              );
-            })
+                );
+              })
           }
         </Box>
       </Box>

src/module/task/ui/edit_task.tsx

@@ -114,7 +114,7 @@ export default function EditTask() {
                      onChange={(e) => { onValidation('title', e.target.value) }}
                      error={
                         touched.title && (
-                           title == "" ? "Error! harus memasukkan judul tugas" : null
+                           title == "" ? "Judul Tugas Tidak Boleh Kosong" : null
                         )
                      }
                   />

src/module/task/ui/list_division_task.tsx

@@ -1,15 +1,15 @@
 import { currentScroll, globalNotifPage, ReloadButtonTop, SkeletonList, TEMA } from "@/module/_global";
+import { useHookstate } from "@hookstate/core";
 import { ActionIcon, Avatar, Box, Card, Center, Divider, Flex, Grid, Group, Progress, Skeleton, Text, TextInput, Title } from "@mantine/core";
-import { useParams, useRouter, useSearchParams } from "next/navigation";
-import { useEffect, useState } from "react";
-import { HiMagnifyingGlass, HiMiniPresentationChartBar, HiOutlineListBullet, HiSquares2X2 } from "react-icons/hi2";
-import { MdAccountCircle } from "react-icons/md";
-import { IDataTask } from "../lib/type_task";
-import { funGetAllTask } from "../lib/api_task";
-import toast from "react-hot-toast";
 import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
 import _ from "lodash";
-import { useHookstate } from "@hookstate/core";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+import toast from "react-hot-toast";
+import { HiMagnifyingGlass, HiMiniPresentationChartBar, HiOutlineListBullet, HiSquares2X2 } from "react-icons/hi2";
+import { MdAccountCircle } from "react-icons/md";
+import { funGetAllTask } from "../lib/api_task";
+import { IDataTask } from "../lib/type_task";
 
 export default function ListDivisionTask() {
    const [isList, setIsList] = useState(false)
@@ -46,8 +46,6 @@ export default function ListDivisionTask() {
          } else {
             toast.error(response.message);
          }
-
-         setLoading(false);
       } catch (error) {
          toast.error("Gagal mendapatkan tugas divisi, coba lagi nanti");
          console.error(error);
@@ -56,17 +54,16 @@ export default function ListDivisionTask() {
       }
    };
 
+   useShallowEffect(() => {
+      fetchData(false)
+   }, [isPage])
+
 
    useShallowEffect(() => {
       setPage(1)
       fetchData(true);
    }, [status, searchQuery]);
 
-
-   useShallowEffect(() => {
-      fetchData(false)
-   }, [isPage])
-
    useEffect(() => {
       const handleScroll = async () => {
          if (containerRef && containerRef.current) {
@@ -149,7 +146,7 @@ export default function ListDivisionTask() {
             <Box bg={tema.get().bgTotalKegiatan} p={10} style={{ borderRadius: 10 }}>
                <Text fw={'bold'} c={tema.get().utama}>Total Tugas</Text>
                <Flex justify={'center'} align={'center'} h={'100%'}>
-                  <Text fz={40} fw={'bold'} c={tema.get().utama}>{totalData}</Text>
+                  <Text fz={40} fw={'bold'} c={tema.get().utama}>{loading ? 0 : totalData}</Text>
                </Flex>
             </Box>
             {isList ? (
@@ -173,7 +170,7 @@ export default function ListDivisionTask() {
                            isData.map((v, i) => {
                               return (
                                  <Box key={i}>
-                                    <Grid align='center'>
+                                    <Grid align='center' onClick={() => router.push(`task/${v.id}`)}>
                                        <Grid.Col span={{
                                           base: 1,
                                           xs: 1,
@@ -182,7 +179,7 @@ export default function ListDivisionTask() {
                                           lg: 1,
                                           xl: 1
                                        }}>
-                                          <Group onClick={() => router.push(`task/${v.id}`)}>
+                                          <Group>
                                              <Center>
                                                 <ActionIcon
                                                    variant="gradient"
@@ -251,8 +248,8 @@ export default function ListDivisionTask() {
                                     </Card.Section>
                                     <Box pt={10}>
                                        <Progress.Root size="xl" radius="xl" style={{ border: `1px solid ${'#BDBDBD'}` }}>
-                                          <Progress.Section value={v.progress} color="yellow" striped >
-                                             <Progress.Label>{v.progress}%</Progress.Label>
+                                          <Progress.Section value={_.isNull(v.progress) ? 0 : v.progress} color="yellow" striped >
+                                             <Progress.Label>{_.isNull(v.progress) ? 0 : v.progress}%</Progress.Label>
                                           </Progress.Section>
                                        </Progress.Root>
                                        <Text my={10}>{v.desc}</Text>

src/module/task/ui/tabs_division_task.tsx

@@ -1,14 +1,13 @@
 'use client'
-import { Box, Button, Flex, rem, Tabs } from "@mantine/core";
+import { TEMA } from "@/module/_global";
+import { useHookstate } from "@hookstate/core";
+import { Box, Button, Flex, rem } from "@mantine/core";
+import { useRouter, useSearchParams } from "next/navigation";
 import { IoIosCheckmarkCircleOutline } from "react-icons/io";
 import { IoCloseCircleOutline } from "react-icons/io5";
 import { RiProgress3Line } from "react-icons/ri";
 import { TbClockPause } from "react-icons/tb";
 import ListDivisionTask from "./list_division_task";
-import { useRouter, useSearchParams } from "next/navigation";
-import { Carousel } from "@mantine/carousel";
-import { TEMA } from "@/module/_global";
-import { useHookstate } from "@hookstate/core";
 
 export default function TabsDivisionTask() {
    const iconStyle = { width: rem(20), height: rem(20) };
@@ -43,40 +42,40 @@ export default function TabsDivisionTask() {
    return (
       <Box p={20}>
          <Box
-          style={{
-            display: "flex",
-            gap: "20px",
-            position: "relative",
-            overflowX: "scroll",
-            scrollbarWidth: "none",
-            maxWidth: "550px"
-          }}
-        >
-          <Flex gap={"md"} justify={"space-between"}>
-            {dataStatus.map((item, index) => (
-              <Button
-              variant="subtle"
-              color={
-                 status == item.id
-                    ? "white"
-                    : (status == null && item.id == "0") ? "white" : tema.get().utama
-              }
-              onClick={() => { router.push("?status=" + item.id) }}
-              defaultValue={(status == "1" || status == "2" || status == "3") ? status : "0"}
-                  radius={"xl"}
-                  key={index}
-              bg={
-                 status == item.id
-                    ? tema.get().bgFiturDivision
-                    : (status == null && item.id == "0") ? tema.get().bgFiturDivision : "transparent"
-              }
-              leftSection={item.icon}
-           >
-                {item.title}
-              </Button>
-            ))}
-          </Flex>
-        </Box>
+            style={{
+               display: "flex",
+               gap: "20px",
+               position: "relative",
+               overflowX: "scroll",
+               scrollbarWidth: "none",
+               maxWidth: "550px"
+            }}
+         >
+            <Flex gap={"md"} justify={"space-between"}>
+               {dataStatus.map((item, index) => (
+                  <Button
+                     variant="subtle"
+                     color={
+                        status == item.id
+                           ? "white"
+                           : (status == null && item.id == "0") ? "white" : tema.get().utama
+                     }
+                     onClick={() => { router.push("?status=" + item.id) }}
+                     defaultValue={(status == "1" || status == "2" || status == "3") ? status : "0"}
+                     radius={"xl"}
+                     key={index}
+                     bg={
+                        status == item.id
+                           ? tema.get().bgFiturDivision
+                           : (status == null && item.id == "0") ? tema.get().bgFiturDivision : "transparent"
+                     }
+                     leftSection={item.icon}
+                  >
+                     {item.title}
+                  </Button>
+               ))}
+            </Flex>
+         </Box>
          <ListDivisionTask />
       </Box>
    )

src/module/user/lib/type_user.ts

@@ -1,11 +1,12 @@
 export type TypeUser = {
    id: string
+   idUserRole: string
    name: string
    nik: string
    phone: string
    email: string
    gender: string
-   img:string
+   img: string
    isActive: boolean,
    group: string,
    position: string

src/module/user/member/lib/api_member.ts

@@ -1,4 +1,4 @@
-import { IEditDataMember, IFormMember, IStatusmember } from "./type_member";
+import { IStatusmember } from "./type_member";
 
 export const funGetAllmember = async (path?: string) => {
     const response = await fetch(`/api/user${(path) ? path : ''}`, { next: { tags: ['member'] } });