Merge pull request #306 from bipproduction/amalia/16-okt-24

Amalia/16 okt 24

src/app/api/division/[id]/detail/route.ts

@@ -100,6 +100,7 @@ export async function GET(request: Request, context: { params: { id: string } })
             },
             select: {
                id: true,
+               idProject: true,
                title: true,
                dateStart: true,
                dateEnd: true,

src/module/calender/ui/create_calender_division_caleder.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 { Avatar, Box, Button, Divider, Grid, Group, rem, Select, SimpleGrid, Stack, Text, Textarea, TextInput } from '@mantine/core';
@@ -10,6 +10,7 @@ import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 import toast from 'react-hot-toast';
 import { IoIosArrowDropright } from 'react-icons/io';
+import { useWibuRealtime } from 'wibu-realtime';
 import { funCreateCalender } from '../lib/api_calender';
 import { IFormMemberCalender } from '../lib/type_calender';
 import { globalCalender } from '../lib/val_calender';
@@ -47,6 +48,11 @@ export default function CreateCalenderDivisionCaleder() {
         desc: "",
         repeatValue: "1"
     })
+    const [dataRealTime, setDataRealtime] = useWibuRealtime({
+        WIBU_REALTIME_TOKEN: keyWibu,
+        project: "sdm"
+    })
+
 
     async function onSubmit(val: boolean) {
         try {
@@ -65,6 +71,11 @@ export default function CreateCalenderDivisionCaleder() {
             })
 
             if (response.success) {
+                setDataRealtime([{
+                    category: "calendar-event",
+                    division: param.id,
+                    date: isData.dateStart
+                }])
                 setModal(false)
                 router.push(`/division/${param.id}/calender`)
                 toast.success(response.message)

src/module/calender/ui/date_event_division.tsx

@@ -1,14 +1,16 @@
+import { keyWibu } from '@/module/_global';
 import { Box, Divider, Flex, Grid, Group, Indicator, Skeleton, Text } from '@mantine/core';
 import { DatePicker, DatePickerProps } from '@mantine/dates';
-import { useParams, useRouter } from 'next/navigation';
-import React, { useState } from 'react';
-import { funGetAllCalender, funGetIndicatorCalender } from '../lib/api_calender';
 import { useMediaQuery, useSetState, useShallowEffect } from '@mantine/hooks';
-import { IDataCalender } from '../lib/type_calender';
+import 'dayjs/locale/id';
-import moment from 'moment';
 import _ from 'lodash';
+import moment from 'moment';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
 import toast from 'react-hot-toast';
-import 'dayjs/locale/id'
+import { useWibuRealtime } from 'wibu-realtime';
+import { funGetAllCalender, funGetIndicatorCalender } from '../lib/api_calender';
+import { IDataCalender } from '../lib/type_calender';
 
 
 export default function DateEventDivision() {
@@ -20,11 +22,15 @@ export default function DateEventDivision() {
   const [isMonth, setMonth] = useState<any>(moment().month() + 1)
   const [loading, setLoading] = useState(true)
   const isMobile = useMediaQuery('(max-width: 369px)');
+  const [dataRealTime, setDataRealtime] = useWibuRealtime({
+    WIBU_REALTIME_TOKEN: keyWibu,
+    project: "sdm"
+  })
 
 
-  const getData = async (tgl: any) => {
+  const getData = async (tgl: any, loading: boolean) => {
     try {
-      setLoading(true)
+      setLoading(loading)
       const response = await funGetAllCalender('?division=' + param.id + '&date=' + tgl)
       if (response.success) {
         setData(response.data)
@@ -66,12 +72,12 @@ export default function DateEventDivision() {
   function change(val: Date) {
     const a: any = moment(new Date(val)).format('YYYY-MM-DD')
     setDate(a)
-    getData(a)
+    getData(a, true)
   }
 
 
   useShallowEffect(() => {
-    getData(isDate)
+    getData(isDate, true)
     getIndicator(isDate)
   }, [])
 
@@ -88,6 +94,15 @@ export default function DateEventDivision() {
     );
   };
 
+  useShallowEffect(() => {
+    if (dataRealTime && dataRealTime.some((i: any) => i.category == 'calendar-event' && i.division == param.id && i.date == isDate)) {
+      getIndicator(isDate)
+      getData(isDate, false)
+    } else if (dataRealTime && dataRealTime.some((i: any) => i.category == 'calendar-event' && i.division == param.id && i.date != isDate)) {
+      getIndicator(isDate)
+    }
+  }, [dataRealTime])
+
 
 
 

src/module/division_new/lib/type_division.ts

@@ -31,6 +31,7 @@ export interface IDataJumlahDetailDivision {
 
 export interface IDataTaskOnDetailDivision {
    id: string,
+   idProject: string,
    title: string,
    dateStart: string,
    dateEnd: string,

src/module/division_new/ui/list_division.tsx

@@ -1,18 +1,18 @@
 'use client'
-import { currentScroll, globalRole, LayoutDrawer, LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA } from '@/module/_global';
+import { currentScroll, globalNotifPage, globalRole, LayoutDrawer, LayoutNavbarNew, 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';
+import _ from 'lodash';
 import { useRouter, useSearchParams } from 'next/navigation';
-import React, { useEffect, useState } from 'react';
+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 DrawerDivision from './drawer_division';
-import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
-import { IDataDivison } from '../lib/type_division';
 import { funGetAllDivision } from '../lib/api_division';
-import toast from 'react-hot-toast';
+import { IDataDivison } from '../lib/type_division';
-import { useHookstate } from '@hookstate/core';
+import DrawerDivision from './drawer_division';
-import _ from 'lodash';
 
 export default function ListDivision() {
   const [isList, setIsList] = useState(false)
@@ -29,8 +29,9 @@ export default function ListDivision() {
   const tema = useHookstate(TEMA)
   const { value: containerRef } = useHookstate(currentScroll);
   const [isPage, setPage] = useState(1)
-
   const paddingLift = useMediaQuery('(max-width: 505px)')
+  const [isRefresh, setRefresh] = useState(false)
+  const notifLoadPage = useHookstate(globalNotifPage)
 
 
   const handleList = () => {
@@ -39,21 +40,23 @@ export default function ListDivision() {
 
   const fetchData = async (loading: boolean) => {
     try {
-      if (loading)
+      
-        setLoading(true);
+      setLoading(loading);
+      if (isPage == 1) {
+        setData([])
+      }
       const response = await funGetAllDivision('?search=' + searchQuery + '&group=' + group + '&page=' + isPage)
       if (response.success) {
         setJumlah(response.total)
         setNameGroup(response.filter.name)
         if (isPage == 1) {
           setData(response.data)
-        }else{
+        } else {
-          setData([...data, ...response.data])
+          setData((data) => [...data, ...response.data])
         }
       } else {
         toast.error(response.message);
       }
-      setLoading(false);
     } catch (error) {
       toast.error("Gagal mendapatkan divisi, coba lagi nanti");
       console.error(error);
@@ -95,7 +98,25 @@ export default function ListDivision() {
     return () => {
       container?.removeEventListener("scroll", handleScroll);
     };
-}, [containerRef, isPage]);
+  }, [containerRef, isPage]);
+
+  useShallowEffect(() => {
+    if (notifLoadPage.get().category == 'division' && notifLoadPage.get().load == true) {
+      setRefresh(true)
+    }
+  }, [notifLoadPage.get().load])
+
+  function onRefresh() {
+    notifLoadPage.set({
+      category: '',
+      load: false
+    })
+    setRefresh(false)
+    setPage(1)
+    setTimeout(() => {
+      fetchData(false)
+    }, 500)
+  }
 
 
   return (
@@ -109,6 +130,14 @@ export default function ListDivision() {
         } />
 
       <Box p={20}>
+        {
+          isRefresh &&
+          <ReloadButtonTop
+            onReload={() => { onRefresh() }}
+            title='UPDATE'
+          />
+
+        }
         <Grid justify='center' align='center'>
           <Grid.Col span={10}>
             <TextInput
@@ -153,7 +182,7 @@ export default function ListDivision() {
                 .fill(null)
                 .map((_, i) => (
                   <Box key={i}>
-                    <SkeletonList/>
+                    <SkeletonList />
                   </Box>
                 ))
               :

src/module/division_new/ui/list_task.tsx

@@ -55,7 +55,7 @@ export default function ListTaskOnDetailDivision() {
                      .map((_, i) => (
                         <Stack align="stretch" justify="center" key={i}>
                            <Skeleton height={80} radius="md" m={0} w={isMobile ? "80%" : "90%"} />
-                           <Skeleton height={10} radius="md" m={0} w={isMobile ? "80%" : "90%"}/>
+                           <Skeleton height={10} radius="md" m={0} w={isMobile ? "80%" : "90%"} />
                         </Stack>
                      ))
                   :
@@ -72,8 +72,8 @@ export default function ListTaskOnDetailDivision() {
                   <Box p={20} w={{
                      base: isMobile ? 230 : 300,
                      md: 400
-                  }} onClick={() => router.push(`/task/${v.id}`)} bg={"white"}  style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}>
+                  }} onClick={() => router.push(`/division/${param.id}/task/${v.idProject}`)} bg={"white"} style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}>
-                     <Text fw={'bold'} c={tema.get().utama} lineClamp={1}>{v.title+' - '+ v.projectTitle}</Text>
+                     <Text fw={'bold'} c={tema.get().utama} lineClamp={1}>{v.title + ' - ' + v.projectTitle}</Text>
                      <Group justify="space-between" mt={20}>
                         <Group gap={5} align="center">
                            <CiClock2 size={18} />

src/module/task/ui/add_detail_task.tsx

@@ -1,28 +1,15 @@
 "use client";
-import { LayoutNavbarNew, TEMA } from "@/module/_global";
+import { keyWibu, LayoutNavbarNew, TEMA } from "@/module/_global";
-import {
-   Avatar,
-   Box,
-   Button,
-   Flex,
-   Group,
-   Input,
-   rem,
-   SimpleGrid,
-   Stack,
-   Text,
-   TextInput,
-} from "@mantine/core";
-import React, { useState } from "react";
-import { DatePicker } from "@mantine/dates";
-import { useParams, useRouter } from "next/navigation";
-import toast from "react-hot-toast";
-import { IFormDateTask } from "../lib/type_task";
-import moment from "moment";
-import { funCreateDetailTask } from "../lib/api_task";
 import LayoutModal from "@/module/_global/layout/layout_modal";
 import { useHookstate } from "@hookstate/core";
-
+import { Box, Button, Group, rem, SimpleGrid, Stack, Text, TextInput } from "@mantine/core";
+import { DatePicker } from "@mantine/dates";
+import moment from "moment";
+import { useParams, useRouter } from "next/navigation";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import { funCreateDetailTask } from "../lib/api_task";
+import { useWibuRealtime } from "wibu-realtime";
 
 export default function AddDetailTask() {
    const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
@@ -34,6 +21,11 @@ export default function AddDetailTask() {
    const [touched, setTouched] = useState({
       title: false,
    });
+   const [dataRealTime, setDataRealtime] = useWibuRealtime({
+      WIBU_REALTIME_TOKEN: keyWibu,
+      project: "sdm"
+   })
+
 
    function onVerification() {
       if (value[0] == null || value[1] == null)
@@ -55,6 +47,10 @@ export default function AddDetailTask() {
          })
 
          if (res.success) {
+            setDataRealtime([{
+               category: "tugas-detail-task",
+               id: param.detail,
+            }])
             toast.success(res.message)
             setOpenModal(false)
             router.push(`/division/${param.id}/task/${param.detail}`)

src/module/task/ui/add_file_detail_task.tsx

@@ -1,27 +1,19 @@
 "use client";
-import { LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
+import { keyWibu, LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
-import {
-   Box,
-   Button,
-   Flex,
-   Group,
-   rem,
-   SimpleGrid,
-   Stack,
-   Text,
-} from "@mantine/core";
-import React, { useRef, useState } from "react";
-import { useParams, useRouter } from "next/navigation";
-import toast from "react-hot-toast";
-import { IoIosArrowDropright } from "react-icons/io";
-import { Dropzone } from "@mantine/dropzone";
-import _ from "lodash";
-import { IListFileTask } from "../lib/type_task";
-import ResultsFile from "./results_file";
-import { FaTrash } from "react-icons/fa6";
-import { funAddFileTask, funCekNamFileUploadTask } from "../lib/api_task";
 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 { Dropzone } from "@mantine/dropzone";
+import _ from "lodash";
+import { useParams, useRouter } from "next/navigation";
+import { useRef, useState } from "react";
+import toast from "react-hot-toast";
+import { FaTrash } from "react-icons/fa6";
+import { IoIosArrowDropright } from "react-icons/io";
+import { funAddFileTask, funCekNamFileUploadTask } from "../lib/api_task";
+import { IListFileTask } from "../lib/type_task";
+import ResultsFile from "./results_file";
+import { useWibuRealtime } from "wibu-realtime";
 
 
 export default function AddFileDetailTask() {
@@ -34,6 +26,10 @@ export default function AddFileDetailTask() {
    const [openDrawerFile, setOpenDrawerFile] = useState(false)
    const tema = useHookstate(TEMA)
    const openRef = useRef<() => void>(null)
+   const [dataRealTime, setDataRealtime] = useWibuRealtime({
+      WIBU_REALTIME_TOKEN: keyWibu,
+      project: "sdm"
+   })
 
    function deleteFile(index: number) {
       setListFile([...listFile.filter((val, i) => i !== index)])
@@ -68,6 +64,10 @@ export default function AddFileDetailTask() {
 
          const response = await funAddFileTask(param.detail, fd)
          if (response.success) {
+            setDataRealtime([{
+               category: "tugas-detail-file",
+               id: param.detail,
+            }])
             toast.success(response.message)
             setFileForm([])
             setListFile([])

src/module/task/ui/add_member_detail_task.tsx

@@ -1,36 +1,20 @@
 "use client"
-import { LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA } from "@/module/_global";
+import { keyWibu, LayoutNavbarNew, SkeletonList, TEMA } from "@/module/_global";
-import { funGetDivisionById, funGetSearchMemberDivision, IDataMemberDivision } from "@/module/division_new";
+import LayoutModal from "@/module/_global/layout/layout_modal";
-import {
+import { funGetSearchMemberDivision, IDataMemberDivision } from "@/module/division_new";
-   ActionIcon,
+import { useHookstate } from "@hookstate/core";
-   Anchor,
+import { Carousel } from "@mantine/carousel";
-   Avatar,
+import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Stack, Text, TextInput } from "@mantine/core";
-   Box,
-   Button,
-   Center,
-   Checkbox,
-   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 React, { useState } from "react";
+import { useState } from "react";
 import toast from "react-hot-toast";
 import { FaCheck } from "react-icons/fa6";
-import { funAddMemberTask, funGetTaskDivisionById } from "../lib/api_task";
-import { IDataMemberTaskDivision } from "../lib/type_task";
-import LayoutModal from "@/module/_global/layout/layout_modal";
 import { HiMagnifyingGlass } from "react-icons/hi2";
 import { IoArrowBackOutline, IoClose } from "react-icons/io5";
-import { Carousel } from "@mantine/carousel";
+import { funAddMemberTask, funGetTaskDivisionById } from "../lib/api_task";
-import { useHookstate } from "@hookstate/core";
+import { IDataMemberTaskDivision } from "../lib/type_task";
+import { useWibuRealtime } from "wibu-realtime";
 
 export default function AddMemberDetailTask() {
    const router = useRouter()
@@ -45,6 +29,10 @@ export default function AddMemberDetailTask() {
    const [searchQuery, setSearchQuery] = useState('')
    const tema = useHookstate(TEMA)
    const isMobile2 = useMediaQuery("(max-width: 438px)");
+   const [dataRealTime, setDataRealtime] = useWibuRealtime({
+      WIBU_REALTIME_TOKEN: keyWibu,
+      project: "sdm"
+   })
 
 
    async function getData() {
@@ -120,6 +108,10 @@ export default function AddMemberDetailTask() {
       try {
          const res = await funAddMemberTask(param.detail, { idDivision: param.id, member: selectedFiles });
          if (res.success) {
+            setDataRealtime([{
+               category: "tugas-detail-anggota",
+               id: param.detail,
+            }])
             toast.success(res.message)
             router.back()
          } else {

src/module/task/ui/cancel_task.tsx

@@ -1,18 +1,13 @@
 "use client";
-import { LayoutNavbarNew, TEMA } from "@/module/_global";
+import { keyWibu, LayoutNavbarNew, TEMA } from "@/module/_global";
-import {
-   Box,
-   Button,
-   rem,
-   Stack,
-   Textarea,
-} from "@mantine/core";
-import React, { useState } from "react";
-import { useParams, useRouter } from "next/navigation";
-import toast from "react-hot-toast";
-import { funCancelTask } from "../lib/api_task";
 import LayoutModal from "@/module/_global/layout/layout_modal";
 import { useHookstate } from "@hookstate/core";
+import { Box, Button, rem, Stack, Textarea, } from "@mantine/core";
+import { useParams, useRouter } from "next/navigation";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import { funCancelTask } from "../lib/api_task";
+import { useWibuRealtime } from "wibu-realtime";
 
 
 export default function CancelTask() {
@@ -24,6 +19,10 @@ export default function CancelTask() {
    const [touched, setTouched] = useState({
       reason: false,
    });
+   const [dataRealTime, setDataRealtime] = useWibuRealtime({
+      WIBU_REALTIME_TOKEN: keyWibu,
+      project: "sdm"
+   })
 
    function onVerification() {
       if (alasan == "")
@@ -36,6 +35,10 @@ export default function CancelTask() {
       try {
          const res = await funCancelTask(param.detail, { reason: alasan })
          if (res.success) {
+            setDataRealtime([{
+               category: "tugas-detail-status",
+               id: param.detail,
+             }])
             toast.success(res.message)
             router.push("./")
          } else {

src/module/task/ui/detail_list_anggota_task.tsx

@@ -1,17 +1,18 @@
 'use client'
-import { globalRole, LayoutDrawer, SkeletonList, SkeletonSingle, TEMA } from "@/module/_global";
+import { globalRole, keyWibu, LayoutDrawer, SkeletonList, TEMA } from "@/module/_global";
-import { Box, Group, Flex, Avatar, Text, SimpleGrid, Stack, Grid, Divider } from "@mantine/core";
+import LayoutModal from "@/module/_global/layout/layout_modal";
+import { globalIsAdminDivision } from "@/module/division_new";
+import { useHookstate } from "@hookstate/core";
+import { Avatar, Box, Divider, Flex, Grid, Group, SimpleGrid, 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 { funDeleteMemberTask, funGetTaskDivisionById } from "../lib/api_task";
-import { IDataMemberTaskDivision } from "../lib/type_task";
 import { FaUser } from "react-icons/fa6";
 import { IoIosCloseCircle } from "react-icons/io";
-import LayoutModal from "@/module/_global/layout/layout_modal";
+import { funDeleteMemberTask, funGetTaskDivisionById } from "../lib/api_task";
-import { useHookstate } from "@hookstate/core";
+import { IDataMemberTaskDivision } from "../lib/type_task";
-import { globalIsAdminDivision } from "@/module/division_new";
+import { useWibuRealtime } from "wibu-realtime";
 
 
 export default function ListAnggotaDetailTask() {
@@ -28,6 +29,10 @@ export default function ListAnggotaDetailTask() {
    const isMobile2 = useMediaQuery("(max-width: 438px)");
    const tema = useHookstate(TEMA)
    const [reason, setReason] = useState("")
+   const [dataRealTime, setDataRealtime] = useWibuRealtime({
+      WIBU_REALTIME_TOKEN: keyWibu,
+      project: "sdm"
+   })
 
    async function getOneDataCancel() {
       try {
@@ -48,16 +53,15 @@ export default function ListAnggotaDetailTask() {
       getOneDataCancel();
    }, [param.detail])
 
-   async function getOneData() {
+   async function getOneData(loading: boolean) {
       try {
-         setLoading(true)
+         setLoading(loading)
          const res = await funGetTaskDivisionById(param.detail, 'member');
          if (res.success) {
             setData(res.data)
          } else {
             toast.error(res.message);
          }
-
       } catch (error) {
          console.error(error);
          toast.error("Gagal mendapatkan member tugas divisi, coba lagi nanti");
@@ -67,17 +71,30 @@ export default function ListAnggotaDetailTask() {
    }
 
    useShallowEffect(() => {
-      getOneData();
+      getOneData(true);
    }, [param.detail])
 
 
+   useShallowEffect(() => {
+      if (dataRealTime && dataRealTime.some((i: any) => i.category == 'tugas-detail-anggota' && i.id == param.detail)) {
+         getOneData(false)
+      } else if (dataRealTime && dataRealTime.some((i: any) => i.category == 'tugas-detail-status' && i.id == param.detail)) {
+         getOneDataCancel()
+      }
+   }, [dataRealTime])
+
+
    async function onSubmit() {
       try {
          const res = await funDeleteMemberTask(param.detail, { idUser: dataChoose.id });
          if (res.success) {
+            setDataRealtime([{
+               category: "tugas-detail-anggota",
+               id: param.detail,
+            }])
             toast.success(res.message)
             setDataChoose({ id: '', name: '' })
-            getOneData()
+            getOneData(false)
             setOpenDrawer(false)
          } else {
             toast.error(res.message)

src/module/task/ui/detail_list_file_task.tsx

@@ -1,16 +1,17 @@
 'use client'
-import { LayoutDrawer, LayoutModalViewFile, SkeletonDetailListTugasTask, TEMA } from "@/module/_global";
+import { keyWibu, LayoutDrawer, LayoutModalViewFile, TEMA } from "@/module/_global";
+import LayoutModal from "@/module/_global/layout/layout_modal";
+import { useHookstate } from "@hookstate/core";
 import { Box, Center, Flex, Grid, Group, SimpleGrid, Skeleton, Stack, Text } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useParams } from "next/navigation";
 import { useState } from "react";
 import toast from "react-hot-toast";
 import { BsFileTextFill, BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from "react-icons/bs";
+import { FaTrash } from "react-icons/fa6";
 import { funDeleteFileTask, funGetTaskDivisionById } from "../lib/api_task";
 import { IDataFileTaskDivision } from "../lib/type_task";
-import { FaTrash } from "react-icons/fa6";
+import { useWibuRealtime } from "wibu-realtime";
-import LayoutModal from "@/module/_global/layout/layout_modal";
-import { useHookstate } from "@hookstate/core";
 
 export default function ListFileDetailTask() {
    const [isData, setData] = useState<IDataFileTaskDivision[]>([])
@@ -26,6 +27,10 @@ export default function ListFileDetailTask() {
    const [isExtension, setExtension] = useState('')
    const tema = useHookstate(TEMA)
    const [reason, setReason] = useState("")
+   const [dataRealTime, setDataRealtime] = useWibuRealtime({
+      WIBU_REALTIME_TOKEN: keyWibu,
+      project: "sdm"
+   })
 
    async function getOneDataCancel() {
       try {
@@ -46,9 +51,9 @@ export default function ListFileDetailTask() {
       getOneDataCancel();
    }, [param.detail])
 
-   async function getOneData() {
+   async function getOneData(loading: boolean) {
       try {
-         setLoading(true)
+         setLoading(loading)
          const res = await funGetTaskDivisionById(param.detail, 'file');
          if (res.success) {
             setData(res.data)
@@ -64,7 +69,7 @@ export default function ListFileDetailTask() {
    }
 
    useShallowEffect(() => {
-      getOneData();
+      getOneData(true);
    }, [param.detail])
 
 
@@ -72,8 +77,12 @@ export default function ListFileDetailTask() {
       try {
          const res = await funDeleteFileTask(idData);
          if (res.success) {
+            setDataRealtime([{
+               category: "tugas-detail-file",
+               id: param.detail,
+            }])
             toast.success(res.message)
-            getOneData()
+            getOneData(false)
             setIdData("")
             setIdDataStorage("")
             setOpenDrawer(false)
@@ -84,9 +93,16 @@ export default function ListFileDetailTask() {
          console.error(error);
          toast.error("Gagal menghapus file, coba lagi nanti");
       }
-
    }
 
+   useShallowEffect(() => {
+      if (dataRealTime && dataRealTime.some((i: any) => i.category == 'tugas-detail-file' && i.id == param.detail)) {
+         getOneData(false)
+      } else if (dataRealTime && dataRealTime.some((i: any) => i.category == 'tugas-detail-status' && i.id == param.detail)) {
+         getOneDataCancel()
+      }
+   }, [dataRealTime])
+
    return (
       <Box pt={20}>
          <Text fw={'bold'} c={tema.get().utama}>File</Text>

src/module/task/ui/detail_list_tugas_task.tsx

@@ -1,18 +1,19 @@
 'use client'
-import { LayoutDrawer, SkeletonDetailListTugasTask, TEMA } from "@/module/_global"
+import { keyWibu, LayoutDrawer, SkeletonDetailListTugasTask, TEMA } from "@/module/_global"
-import { Box, Grid, Center, Checkbox, Group, SimpleGrid, Text, Stack, Flex, Divider } from "@mantine/core"
+import LayoutModal from "@/module/_global/layout/layout_modal"
+import { useHookstate } from "@hookstate/core"
+import { Box, Center, Checkbox, Divider, Flex, Grid, Group, SimpleGrid, Stack, Text } from "@mantine/core"
 import { useShallowEffect } from "@mantine/hooks"
+import "moment/locale/id"
 import { useParams, useRouter } from "next/navigation"
+import { useState } from "react"
 import toast from "react-hot-toast"
 import { AiOutlineFileDone, AiOutlineFileSync } from "react-icons/ai"
-import { funDeleteDetailTask, funGetTaskDivisionById, funUpdateStatusDetailTask } from "../lib/api_task"
-import { useState } from "react"
-import { IDataListTaskDivision } from "../lib/type_task"
 import { FaCheck, FaPencil, FaTrash } from "react-icons/fa6"
-import LayoutModal from "@/module/_global/layout/layout_modal"
+import { useWibuRealtime } from "wibu-realtime"
+import { funDeleteDetailTask, funGetTaskDivisionById, funUpdateStatusDetailTask } from "../lib/api_task"
+import { IDataListTaskDivision } from "../lib/type_task"
 import { globalRefreshTask, valStatusDetailTask } from "../lib/val_task"
-import { useHookstate } from "@hookstate/core"
-import "moment/locale/id"
 
 export default function ListTugasDetailTask() {
    const [openDrawer, setOpenDrawer] = useState(false)
@@ -27,6 +28,10 @@ export default function ListTugasDetailTask() {
    const refresh = useHookstate(globalRefreshTask)
    const tema = useHookstate(TEMA)
    const [reason, setReason] = useState("")
+   const [dataRealTime, setDataRealtime] = useWibuRealtime({
+      WIBU_REALTIME_TOKEN: keyWibu,
+      project: "sdm"
+   })
 
    async function getOneDataCancel() {
       try {
@@ -47,9 +52,9 @@ export default function ListTugasDetailTask() {
       getOneDataCancel();
    }, [param.detail])
 
-   async function getOneData() {
+   async function getOneData(loading: boolean) {
       try {
-         setLoading(true)
+         setLoading(loading)
          const res = await funGetTaskDivisionById(param.detail, 'task');
          if (res.success) {
             setData(res.data)
@@ -66,7 +71,7 @@ export default function ListTugasDetailTask() {
    }
 
    useShallowEffect(() => {
-      getOneData();
+      getOneData(true);
    }, [param.detail])
 
 
@@ -74,9 +79,13 @@ export default function ListTugasDetailTask() {
       try {
          const res = await funDeleteDetailTask(idData, { idProject: param.detail });
          if (res.success) {
+            setDataRealtime([{
+               category: "tugas-detail-task",
+               id: param.detail,
+            }])
             toast.success(res.message);
             refresh.set(true)
-            getOneData();
+            getOneData(false);
             setIdData("")
             setOpenDrawer(false)
          } else {
@@ -93,9 +102,13 @@ export default function ListTugasDetailTask() {
       try {
          const res = await funUpdateStatusDetailTask(idData, { status: val, idProject: param.detail });
          if (res.success) {
+            setDataRealtime([{
+               category: "tugas-detail-task",
+               id: param.detail,
+            }])
             toast.success(res.message);
             refresh.set(true)
-            getOneData();
+            getOneData(false);
             setIdData("")
             setOpenDrawerStatus(false)
             setOpenDrawer(false)
@@ -108,6 +121,15 @@ export default function ListTugasDetailTask() {
       }
    }
 
+   useShallowEffect(() => {
+      if (dataRealTime && dataRealTime.some((i: any) => i.category == 'tugas-detail-task' && i.id == param.detail)) {
+         refresh.set(true)
+         getOneData(false)
+      } else if (dataRealTime && dataRealTime.some((i: any) => i.category == 'tugas-detail-status' && i.id == param.detail)) {
+         getOneDataCancel()
+      }
+   }, [dataRealTime])
+
    return (
       <Box pt={20}>
          <Text fw={"bold"} c={tema.get().utama}>
@@ -118,7 +140,7 @@ export default function ListTugasDetailTask() {
             style={{
                borderRadius: 10,
                border: `1px solid ${"#D6D8F6"}`,
-               padding:20
+               padding: 20
             }}
          >
             {

src/module/task/ui/detail_progress_task.tsx

@@ -1,15 +1,16 @@
 'use client'
-import { TEMA } from "@/module/_global";
+import { keyWibu, TEMA } from "@/module/_global";
-import { Box, Grid, ActionIcon, Progress, Text, Skeleton, Group } from "@mantine/core";
+import { useHookstate } from "@hookstate/core";
+import { ActionIcon, Box, Grid, Group, Progress, Skeleton, Text } from "@mantine/core";
 import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
 import { useParams } from "next/navigation";
+import { useState } from "react";
 import toast from "react-hot-toast";
 import { HiMiniPresentationChartBar } from "react-icons/hi2";
-import { funGetTaskDivisionById } from "../lib/api_task";
-import { useState } from "react";
-import { globalRefreshTask } from "../lib/val_task";
-import { useHookstate } from "@hookstate/core";
 import { IoIosWarning } from "react-icons/io";
+import { useWibuRealtime } from "wibu-realtime";
+import { funGetTaskDivisionById } from "../lib/api_task";
+import { globalRefreshTask } from "../lib/val_task";
 
 export default function ProgressDetailTask() {
    const [valProgress, setValProgress] = useState(0)
@@ -20,6 +21,10 @@ export default function ProgressDetailTask() {
    const isMobile = useMediaQuery('(max-width: 369px)');
    const tema = useHookstate(TEMA)
    const [reason, setReason] = useState("")
+   const [dataRealTime, setDataRealtime] = useWibuRealtime({
+      WIBU_REALTIME_TOKEN: keyWibu,
+      project: "sdm"
+   })
 
    async function getOneDataCancel() {
       try {
@@ -41,9 +46,9 @@ export default function ProgressDetailTask() {
    }, [param.detail])
 
 
-   async function getOneData() {
+   async function getOneData(loading: boolean) {
       try {
-         setLoading(true)
+         setLoading(loading)
          const res = await funGetTaskDivisionById(param.detail, 'progress');
          if (res.success) {
             setValProgress(res.data.progress);
@@ -51,7 +56,6 @@ export default function ProgressDetailTask() {
          } else {
             toast.error(res.message);
          }
-         setLoading(false)
       } catch (error) {
          console.error(error);
          toast.error("Gagal mendapatkan progress tugas divisi, coba lagi nanti");
@@ -62,7 +66,7 @@ export default function ProgressDetailTask() {
 
    function onRefresh() {
       if (refresh.get()) {
-         getOneData()
+         getOneData(false)
          refresh.set(false)
       }
    }
@@ -73,9 +77,16 @@ export default function ProgressDetailTask() {
    }, [refresh.get()])
 
    useShallowEffect(() => {
-      getOneData();
+      getOneData(true);
    }, [param.detail])
 
+   useShallowEffect(() => {
+      if (dataRealTime && dataRealTime.some((i: any) => i.category == 'tugas-detail-status' && i.id == param.detail)) {
+         getOneDataCancel()
+         getOneData(false)
+      }
+   }, [dataRealTime])
+
    return (
       <Box mt={10}>
          {loading ? "" :

src/module/task/ui/edit_task.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, rem, Skeleton, Stack, TextInput } from "@mantine/core";
@@ -8,6 +8,7 @@ import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
 import toast from "react-hot-toast";
 import { funEditTask, funGetTaskDivisionById } from "../lib/api_task";
+import { useWibuRealtime } from "wibu-realtime";
 
 
 export default function EditTask() {
@@ -20,6 +21,10 @@ export default function EditTask() {
    const [touched, setTouched] = useState({
       title: false,
    });
+   const [dataRealTime, setDataRealtime] = useWibuRealtime({
+      WIBU_REALTIME_TOKEN: keyWibu,
+      project: "sdm"
+   })
 
    function onVerification() {
       if (Object.values(touched).some((v) => v == true))
@@ -42,6 +47,10 @@ export default function EditTask() {
       try {
          const res = await funEditTask(param.detail, { title })
          if (res.success) {
+            setDataRealtime([{
+               category: "tugas-detail",
+               id: param.detail,
+            }])
             toast.success(res.message)
             router.push("./")
          } else {
@@ -97,7 +106,7 @@ export default function EditTask() {
                      label="Judul Tugas"
                      size="md"
                      value={title}
-                     onChange={(e) => { onValidation('title', e.target.value)}}
+                     onChange={(e) => { onValidation('title', e.target.value) }}
                      error={
                         touched.title && (
                            title == "" ? "Error! harus memasukkan judul tugas" : null

src/module/task/ui/list_division_task.tsx

@@ -1,4 +1,4 @@
-import { currentScroll, SkeletonList, TEMA } from "@/module/_global";
+import { currentScroll, globalNotifPage, ReloadButtonTop, SkeletonList, TEMA } from "@/module/_global";
 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";
@@ -25,6 +25,8 @@ export default function ListDivisionTask() {
    const { value: containerRef } = useHookstate(currentScroll)
    const [isPage, setPage] = useState(1)
    const [totalData, setTotalData] = useState(0)
+   const [isRefresh, setRefresh] = useState(false)
+   const notifLoadPage = useHookstate(globalNotifPage)
 
    const handleList = () => {
       setIsList(!isList)
@@ -32,15 +34,14 @@ export default function ListDivisionTask() {
 
    const fetchData = async (loading: boolean) => {
       try {
-         if (loading)
+         setLoading(loading)
-            setLoading(true)
          const response = await funGetAllTask('?division=' + param.id + '&status=' + status + '&search=' + searchQuery + '&page=' + isPage)
          if (response.success) {
             setTotalData(response.total)
             if (isPage == 1) {
                setData(response?.data)
             } else {
-               setData([...isData, ...response.data])
+               setData((isData) => [...isData, ...response.data])
             }
          } else {
             toast.error(response.message);
@@ -87,8 +88,36 @@ export default function ListDivisionTask() {
       };
    }, [containerRef, isPage]);
 
+
+   useShallowEffect(() => {
+      if (notifLoadPage.get().category == 'division/' + param.id + '/task' && notifLoadPage.get().load == true) {
+         setRefresh(true)
+      }
+   }, [notifLoadPage.get().load])
+
+   function onRefresh() {
+      notifLoadPage.set({
+         category: '',
+         load: false
+      })
+      setRefresh(false)
+      setPage(1)
+      setTimeout(() => {
+         fetchData(false)
+      }, 500)
+   }
+
+
    return (
       <Box py={20}>
+         {
+            isRefresh &&
+            <ReloadButtonTop
+               onReload={() => { onRefresh() }}
+               title='UPDATE'
+            />
+
+         }
          <Grid justify='center' align='center'>
             <Grid.Col span={10}>
                <TextInput

src/module/task/ui/navbar_detail_division_task.tsx

@@ -1,17 +1,18 @@
 'use client'
-import { globalRole, LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
+import { globalRole, keyWibu, LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
+import { globalIsAdminDivision } from "@/module/division_new";
+import { useHookstate } from "@hookstate/core";
 import { ActionIcon, Box, Flex, SimpleGrid, Stack, Text } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
 import toast from "react-hot-toast";
-import { funGetTaskDivisionById } from "../lib/api_task";
+import { FaFileCirclePlus, FaPencil, FaUsers } from "react-icons/fa6";
-import { useShallowEffect } from "@mantine/hooks";
 import { HiMenu } from "react-icons/hi";
 import { IoAddCircle } from "react-icons/io5";
-import { FaFileCirclePlus, FaPencil, FaUsers } from "react-icons/fa6";
 import { MdCancel } from "react-icons/md";
-import { globalIsAdminDivision } from "@/module/division_new";
+import { funGetTaskDivisionById } from "../lib/api_task";
-import { useHookstate } from "@hookstate/core";
+import { useWibuRealtime } from "wibu-realtime";
 
 export default function NavbarDetailDivisionTask() {
    const router = useRouter()
@@ -22,6 +23,10 @@ export default function NavbarDetailDivisionTask() {
    const adminLogin = useHookstate(globalIsAdminDivision)
    const tema = useHookstate(TEMA)
    const [reason, setReason] = useState("")
+   const [dataRealTime, setDataRealtime] = useWibuRealtime({
+      WIBU_REALTIME_TOKEN: keyWibu,
+      project: "sdm"
+   })
 
    async function getOneData() {
       try {
@@ -43,6 +48,13 @@ export default function NavbarDetailDivisionTask() {
       getOneData();
    }, [param.detail])
 
+
+   useShallowEffect(() => {
+      if (dataRealTime && dataRealTime.some((i: any) => (i.category == 'tugas-detail' || i.category == 'tugas-detail-status') && i.id == param.detail)) {
+         getOneData()
+      }
+   }, [dataRealTime])
+
    return (
       <>
          <LayoutNavbarNew back={`/division/${param.id}/task/`} title={name} menu={