Merge pull request #327 from bipproduction/amalia/06-nov-24

Amalia/06 nov 24

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

@@ -1,5 +1,4 @@
 import { DetailEventDivision } from '@/module/calender';
-import React from 'react';
 
 function Page() {
   return (

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/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/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 { LayoutNavbarNew, SkeletonList, TEMA } from '@/module/_global';
-import { globalCalender } from '../lib/val_calender';
+import { funGetSearchMemberDivision, IDataMemberDivision } from '@/module/division_new';
-import { useParams, useRouter } from 'next/navigation';
-import { funGetDivisionById, 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 { useParams } from 'next/navigation';
-import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Stack, Text, TextInput } from '@mantine/core';
+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 { keyWibu, LayoutNavbarNew, SkeletonList, TEMA } from '@/module/_global';
-import { useParams, useRouter } from 'next/navigation';
 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 { useParams, useRouter } from 'next/navigation';
-import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Stack, Text, TextInput } from '@mantine/core';
+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 { keyWibu, LayoutDrawer, LayoutNavbarNew, SkeletonList, TEMA } from '@/module/_global';
-import { ActionIcon, Avatar, Box, Center, CopyButton, Divider, Flex, Grid, Group, SimpleGrid, Skeleton, Spoiler, Stack, Text, Tooltip } from '@mantine/core';
+import LayoutModal from '@/module/_global/layout/layout_modal';
-import React, { useState } from 'react';
+import { useHookstate } from '@hookstate/core';
-import { BsCalendar2Event, BsCalendarDate } from 'react-icons/bs';
+import { ActionIcon, Avatar, Box, Center, CopyButton, Divider, Flex, Grid, Group, SimpleGrid, Spoiler, Stack, Text, Tooltip } from '@mantine/core';
-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 { useMediaQuery, useShallowEffect } from '@mantine/hooks';
 import moment from "moment";
 import "moment/locale/id";
-import { IDataDetailByIdCalender, IDataDetailByIdMember } from '../lib/type_calender';
+import { useParams, useRouter } from 'next/navigation';
-import SkeletonDetailEvent from './skeleton_detail_event';
+import { useState } from 'react';
-import { IoIosCloseCircle } from 'react-icons/io';
-import LayoutModal from '@/module/_global/layout/layout_modal';
 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)
+          }
         }} />
       <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/task/ui/list_division_task.tsx

@@ -54,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) {
@@ -249,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.Section value={_.isNull(v.progress) ? 0 : v.progress} color="yellow" striped >
-                                             <Progress.Label>{v.progress}%</Progress.Label>
+                                             <Progress.Label>{_.isNull(v.progress) ? 0 : v.progress}%</Progress.Label>
                                           </Progress.Section>
                                        </Progress.Root>
                                        <Text my={10}>{v.desc}</Text>