style : update revisi style

src/module/division_new/ui/create_anggota_division.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { LayoutNavbarNew, SkeletonSingle, TEMA } from '@/module/_global';
+import { LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA } from '@/module/_global';
 import LayoutModal from '@/module/_global/layout/layout_modal';
 import { funGetUserByCookies } from '@/module/auth';
 import { funGetAllmember, TypeUser } from '@/module/user';
@@ -9,7 +9,7 @@ import React, { useState } from 'react';
 import toast from 'react-hot-toast';
 import { FaCheck } from 'react-icons/fa6';
 import { HiMagnifyingGlass } from 'react-icons/hi2';
-import { useShallowEffect } from '@mantine/hooks';
+import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
 import { IDataMemberDivision } from '../lib/type_division';
 import { funAddDivisionMember, funGetDivisionById } from '../lib/api_division';
 import { IoArrowBackOutline, IoClose } from 'react-icons/io5';
@@ -28,6 +28,7 @@ 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 handleFileClick = (index: number) => {
     if (selectedFiles.some((i: any) => i.idUser == dataMember[index].id)) {
@@ -185,10 +186,15 @@ export default function CreateAnggotaDivision() {
             .fill(null)
             .map((_, i) => (
               <Box key={i}>
-                <SkeletonSingle />
+                <SkeletonList />
               </Box>
             ))
           :
+          (dataMember.length === 0) ?
+            <Stack align="stretch" justify="center" w={"100%"} h={"60vh"}>
+              <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)
@@ -196,14 +202,32 @@ export default function CreateAnggotaDivision() {
               return (
                 <Box my={10} key={index} onClick={() => (!found) ? handleFileClick(index) : null}>
                   <Grid align='center' >
-                    <Grid.Col span={2}>
+                    <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={10}>
+                    <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={{ base: 10, xl: 0 }} lineClamp={1}>{v.name}</Text>
+                          <Text pl={isMobile2 ? 40 : 30} lineClamp={1}>{v.name}</Text>
-                          <Text pl={{ base: 10, xl: 0 }} c={"dimmed"} lineClamp={1}>{(found) ? "sudah menjadi anggota divisi" : ""}</Text>
+                          <Text pl={isMobile2 ? 40 : 30} c={"dimmed"} lineClamp={1}>{(found) ? "sudah menjadi anggota divisi" : ""}</Text>
                         </Flex>
                         {isSelected ? <FaCheck /> : null}
                       </Flex>

src/module/division_new/ui/create_division.tsx

@@ -125,7 +125,7 @@ export default function CreateDivision() {
                                 label="Grup"
                                 size="md"
                                 required
-                                radius={40}
+                                radius={10}
                                 data={dataGroup?.map((pro: any) => ({
                                     value: String(pro.id),
                                     label: pro.name
@@ -148,7 +148,7 @@ export default function CreateDivision() {
                         label="Nama Divisi"
                         size="md"
                         required
-                        radius={40}
+                        radius={10}
                         value={body.name}
                         onChange={(val) => { setBody({ ...body, name: val.target.value }) }}
                         onBlur={() => setTouched({ ...touched, name: true })}

src/module/division_new/ui/drawer_detail_division.tsx

@@ -33,7 +33,7 @@ export default function DrawerDetailDivision() {
                      <TbReportAnalytics size={30} color={tema.get().utama} />
                   </Box>
                   <Box>
-                     <Text c={tema.get().utama}>Report Divisi</Text>
+                     <Text c={tema.get().utama}>Laporan Divisi</Text>
                   </Box>
                </Flex>
             </SimpleGrid>

src/module/division_new/ui/event_report.tsx

@@ -9,7 +9,7 @@ export default function EventReport({ data, tgl }: { data: IDataReportDivision[]
 
   return (
     <Box>
-      <Text mb={20} mt={10} ta={'center'} fw={"bold"}>EVENT <br /> {tgl}</Text>
+      <Text mb={20} mt={10} ta={'center'} fw={"bold"}>ACARA <br /> {tgl}</Text>
       {
         _.isEmpty(data)
           ?

src/module/division_new/ui/information_division.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { globalRole, LayoutDrawer, LayoutNavbarNew, SkeletonSingle, TEMA } from '@/module/_global';
+import { globalRole, LayoutDrawer, LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA } from '@/module/_global';
 import { ActionIcon, Avatar, Box, Button, Divider, Flex, Grid, Group, Skeleton, Stack, Text } from '@mantine/core';
 import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
 import { useParams, useRouter } from 'next/navigation';
@@ -150,30 +150,16 @@ export default function InformationDivision() {
             </Box>
             <Box mt={15}>
               {loading ?
-                <Group
-                  align="center"
-                  style={{
-                    border: `1px solid ${"#DCEED8"}`,
-                    padding: 10,
-                    borderRadius: 10,
-                    cursor: "pointer",
-                  }}
-                >
                 <Box>
-                    <ActionIcon
+                  <Grid p={10} align="center">
-                      variant="light"
+                    <Grid.Col span={2}>
-                      bg={"#DCEED8"}
+                      <Skeleton w={50} h={50} radius={100} />
-                      size={50}
+                    </Grid.Col>
-                      radius={100}
+                    <Grid.Col span={9}>
-                      aria-label="icon"
+                      <Skeleton w={"80%"} h={20} />
-                    >
+                    </Grid.Col>
-                      <Skeleton height={25} width={25} />
+                  </Grid>
-                    </ActionIcon>
                 </Box>
-                  <Box>
-                    <Skeleton height={20} width={100} />
-                  </Box>
-                </Group>
                 :
 
                 ((roleLogin.get() != 'user' && roleLogin.get() != 'coadmin') || isAdmin) ?
@@ -193,7 +179,7 @@ export default function InformationDivision() {
                     .fill(null)
                     .map((_, i) => (
                       <Box key={i}>
-                        <SkeletonSingle />
+                        <SkeletonList />
                       </Box>
                     ))
                   : member.map((v, i) => {

src/module/division_new/ui/list_division.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { currentScroll, globalRole, LayoutDrawer, LayoutNavbarNew, SkeletonSingle, TEMA } from '@/module/_global';
+import { currentScroll, globalRole, LayoutDrawer, LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA } from '@/module/_global';
 import { ActionIcon, Avatar, Box, Card, Center, Divider, Flex, Grid, Group, Skeleton, Text, TextInput, Title } from '@mantine/core';
 import { useRouter, useSearchParams } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
@@ -12,6 +12,7 @@ import { IDataDivison } from '../lib/type_division';
 import { funGetAllDivision } from '../lib/api_division';
 import toast from 'react-hot-toast';
 import { useHookstate } from '@hookstate/core';
+import _ from 'lodash';
 
 export default function ListDivision() {
   const [isList, setIsList] = useState(false)
@@ -138,18 +139,12 @@ export default function ListDivision() {
         </Grid>
         <Box pt={20}>
           {roleLogin.get() == 'supadmin' && <Text>Filter by: {nameGroup}</Text>}
-          {loading ?
+            <Box bg={tema.get().bgTotalKegiatan} p={10} style={{ borderRadius: 10 }}>
-            <>
+              <Text fw={'bold'} c={tema.get().utama}>Total Divisi</Text>
-              <Skeleton width={"100%"} height={100} radius={"md"} />
-            </>
-            :
-            <Box bg={tema.get().utama} p={10} style={{ borderRadius: 10 }}>
-              <Text fw={'bold'} c={'white'}>Total Divisi</Text>
               <Flex justify={'center'} align={'center'} h={'100%'}>
-                <Text fz={40} fw={'bold'} c={'white'}>{jumlah}</Text>
+                <Text fz={40} fw={'bold'} c={tema.get().utama}>{jumlah}</Text>
               </Flex>
             </Box>
-          }
         </Box>
         {isList ? (
           <Box pt={20}>
@@ -158,10 +153,16 @@ export default function ListDivision() {
                 .fill(null)
                 .map((_, i) => (
                   <Box key={i}>
-                    <SkeletonSingle />
+                    <SkeletonList/>
                   </Box>
                 ))
               :
+              _.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}>
@@ -181,11 +182,6 @@ export default function ListDivision() {
                               size={50}
                               aria-label="Gradient action icon"
                               radius={100}
-                              // gradient={{
-                              //   from: '#DFDA7C',
-                              //   to: '#F2AF46',
-                              //   deg: 174
-                              // }}
                               bg={tema.get().bgFiturHome}
                             >
                               <HiMiniUserGroup size={25} color={tema.get().utama} />

src/module/division_new/ui/navbar_admin_division.tsx

@@ -48,7 +48,7 @@ export default function NavbarAdminDivision({ data, onSuccess }: { data: any, on
         </Box>
       } />
       <Box p={20}>
-        <TextInput
+        {/* <TextInput
           styles={{
             input: {
               color: tema.get().utama,
@@ -60,8 +60,8 @@ export default function NavbarAdminDivision({ data, onSuccess }: { data: any, on
           radius={30}
           leftSection={<HiMagnifyingGlass size={20} />}
           placeholder="Pencarian"
-        />
+        /> */}
-        <Box pt={20}>
+        <Box mb={100}>
           <Checkbox.Group value={value} onChange={setValue}>
             {
               (member.length === 0) ? (
@@ -91,7 +91,7 @@ export default function NavbarAdminDivision({ data, onSuccess }: { data: any, on
                       </Grid.Col>
                     </Grid>
                     <Box mt={10}>
-                      <Divider size={"xs"} />
+                      <Divider my={10} />
                     </Box>
                   </Box>
                 );

src/module/division_new/ui/navbar_create_users.tsx

@@ -1,8 +1,8 @@
 "use client"
-import { LayoutNavbarNew, SkeletonSingle, TEMA } from '@/module/_global';
+import { LayoutNavbarNew, SkeletonList, SkeletonSingle, 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 { useShallowEffect } from '@mantine/hooks';
+import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
 import { useRouter } from 'next/navigation';
 import React, { useState } from 'react';
 import { HiChevronLeft, HiMagnifyingGlass } from 'react-icons/hi2';
@@ -23,6 +23,7 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
   const [loading, setLoading] = useState(true)
   const [onClickSearch, setOnClickSearch] = useState(false)
   const tema = useHookstate(TEMA)
+  const isMobile2 = useMediaQuery("(max-width: 438px)");
 
   const handleFileClick = (index: number) => {
     if (selectedFiles.some((i: any) => i.idUser == dataMember[index].id)) {
@@ -173,34 +174,52 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
                 .fill(null)
                 .map((_, i) => (
                   <Box key={i}>
-                  <SkeletonSingle />
+                    <SkeletonList />
                   </Box>
                 ))
-              : dataMember.map((v, index) => {
+              :
+              (dataMember.length === 0) ?
+                <Stack align="stretch" justify="center" w={"100%"} h={"60vh"}>
+                  <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text>
+                </Stack>
+                :
+                dataMember.map((v, index) => {
                   const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id);
                   return (
-                  <Box mb={15} key={index} onClick={() => handleFileClick(index)}>
+                    <Box mb={10} key={index} onClick={() => handleFileClick(index)}>
                       <Grid align='center'>
-                      <Grid.Col span={{
+                        <Grid.Col
-                        base: 3,
+                          span={{
-                        xl: 2
+                            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={{
+                        <Grid.Col
-                        base: 9,
+                          span={{
-                        xl: 10
+                            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}>{v.name}</Text>
+                              <Text lineClamp={1}  pl={isMobile2 ? 40 : 30}>{v.name}</Text>
                             </Flex>
                             {isSelected ? <FaCheck /> : null}
                           </Flex>
                         </Grid.Col>
                       </Grid>
                       <Box mt={10}>
-                      <Divider size={"xs"} />
+                        <Divider my={10} />
                       </Box>
                     </Box>
                   );

src/module/project/ui/add_member_detail_project.tsx

@@ -6,7 +6,7 @@ import toast from 'react-hot-toast';
 import { funAddMemberProject, funGetAllMemberById, funGetOneProjectById } from '../lib/api_project';
 import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
 import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Skeleton, Stack, Text, TextInput } from '@mantine/core';
-import { LayoutNavbarNew, SkeletonSingle, TEMA, WARNA } from '@/module/_global';
+import { LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA, WARNA } from '@/module/_global';
 import { FaCheck } from 'react-icons/fa6';
 import LayoutModal from '@/module/_global/layout/layout_modal';
 import { HiMagnifyingGlass } from 'react-icons/hi2';
@@ -32,7 +32,7 @@ export default function AddMemberDetailProject() {
   async function getData() {
     try {
       setLoading(true)
-      const response = await funGetAllMemberById('?search=' + searchQuery, param.id )
+      const response = await funGetAllMemberById('?search=' + searchQuery, param.id)
       if (response.success) {
         setData(response.data.member)
       } else {
@@ -221,10 +221,15 @@ export default function AddMemberDetailProject() {
             .fill(null)
             .map((_, i) => (
               <Box key={i} mb={10}>
-                <SkeletonSingle />
+                <SkeletonList />
               </Box>
             ))
           :
+          (isData.length === 0) ?
+            <Stack align="stretch" justify="center" w={"100%"} h={"60vh"}>
+              <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text>
+            </Stack>
+            :
             <Box mt={15} mb={100}>
               {isData.map((v, i) => {
                 const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);

src/module/project/ui/edit_task_project.tsx

@@ -22,7 +22,7 @@ export default function EditTaskProject() {
 
   function onVerification() {
     if (name == "")
-      return toast.error("Error! harus memasukkan judul tugas")
+      return toast.error("Error! harus memasukkan judul Kegiatan")
 
     setOpenModal(true)
   }
@@ -79,7 +79,7 @@ export default function EditTaskProject() {
                 borderRadius: 10,
               },
             }}
-            placeholder="Tugas"
+            placeholder="Input Kegiatan"
             label="Judul Kegiatan"
             required
             size="md"
@@ -90,7 +90,7 @@ export default function EditTaskProject() {
             }}
             error={
               touched.name && (
-                name == "" ? "Judul Tidak Boleh Kosong" : null
+                name == "" ? "Judul Kegiatan Tidak Boleh Kosong" : null
               )
             }
             onBlur={() => setTouched({ ...touched, name: true })}
@@ -121,7 +121,7 @@ export default function EditTaskProject() {
 
 
       <LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
-        description="Apakah Anda yakin ingin mengedit tugas ini?"
+        description="Apakah Anda yakin ingin mengedit Kegiatan ini?"
         onYes={(val) => {
           if (val) {
             onSubmit()

src/module/project/ui/list_anggota_detail_project.tsx

@@ -23,6 +23,27 @@ export default function ListAnggotaDetailProject() {
   const router = useRouter()
   const roleLogin = useHookstate(globalRole)
   const tema = useHookstate(TEMA)
+  const [reason, setReason] = useState("")
+
+  async function getOneDataCancel() {
+    try {
+      const res = await funGetOneProjectById(param.id, 'data');
+      console.log(res.data)
+      if (res.success) {
+        setReason(res.data.reason);
+      } else {
+        toast.error(res.message);
+      }
+
+    } catch (error) {
+      console.error(error);
+      toast.error("Gagal mendapatkan data Kegiatan, coba lagi nanti");
+    }
+  }
+
+  useShallowEffect(() => {
+    getOneDataCancel();
+  }, [param.id])
 
   async function getOneData() {
     try {
@@ -98,7 +119,9 @@ const isMobile = useMediaQuery('(max-width: 369px)');
                         <Grid align='center' mt={10}
                           onClick={() => {
                             setDataChoose({ id: v.idUser, name: v.name })
+                            reason == null ?
                               setOpenDrawer(true)
+                              : setOpenDrawer(false)
                           }}
                         >
                           <Grid.Col span={9}>

src/module/project/ui/list_file_detail_project.tsx

@@ -25,6 +25,27 @@ export default function ListFileDetailProject() {
   const [isExtension, setExtension] = useState('')
   const tema = useHookstate(TEMA)
   const isMobile = useMediaQuery("(max-width: 350px)");
+  const [reason, setReason] = useState("")
+
+  async function getOneDataCancel() {
+    try {
+      const res = await funGetOneProjectById(param.id, 'data');
+      console.log(res.data)
+      if (res.success) {
+        setReason(res.data.reason);
+      } else {
+        toast.error(res.message);
+      }
+
+    } catch (error) {
+      console.error(error);
+      toast.error("Gagal mendapatkan data Kegiatan, coba lagi nanti");
+    }
+  }
+
+  useShallowEffect(() => {
+    getOneDataCancel();
+  }, [param.id])
 
   async function getOneData() {
     try {
@@ -120,12 +141,12 @@ export default function ListFileDetailProject() {
                           lg: 1,
                           xl: 1,
                         }}>
-                            {item.extension == "pdf" && <BsFiletypePdf size={ 30} />}
+                          {item.extension == "pdf" && <BsFiletypePdf size={30} />}
-                            {item.extension == "csv" && <BsFiletypeCsv size={ 30} />}
+                          {item.extension == "csv" && <BsFiletypeCsv size={30} />}
-                            {item.extension == "png" && <BsFiletypePng size={ 30} />}
+                          {item.extension == "png" && <BsFiletypePng size={30} />}
-                            {item.extension == "jpg" && <BsFiletypeJpg size={ 30} />}
+                          {item.extension == "jpg" && <BsFiletypeJpg size={30} />}
-                            {item.extension == "jpeg" && <BsFiletypeJpg size={ 30} />}
+                          {item.extension == "jpeg" && <BsFiletypeJpg size={30} />}
-                            {item.extension == "heic" && <BsFiletypeHeic size={ 30} />}
+                          {item.extension == "heic" && <BsFiletypeHeic size={30} />}
                         </Grid.Col>
                         <Grid.Col
                           span={{
@@ -167,12 +188,16 @@ export default function ListFileDetailProject() {
                   </Box>
                 </Flex>
 
-                <Flex onClick={() => { setOpenModal(true) }} justify={'center'} align={'center'} direction={'column'} >
+                <Flex onClick={() => {
+                  reason == null ?
+                    setOpenModal(true)
+                    : setOpenModal(false)
+                }} justify={'center'} align={'center'} direction={'column'} >
                   <Box>
-                    <FaTrash size={30} color={tema.get().utama} />
+                    <FaTrash size={30} color={reason == null ? tema.get().utama : "gray"} />
                   </Box>
                   <Box>
-                    <Text c={tema.get().utama}>Hapus file</Text>
+                    <Text c={reason == null ? tema.get().utama : "gray"}>Hapus file</Text>
                   </Box>
                 </Flex>
               </SimpleGrid>

src/module/project/ui/list_tugas_detail_project.tsx

@@ -25,6 +25,27 @@ export default function ListTugasDetailProject() {
   const [isOpenModal, setOpenModal] = useState(false)
   const router = useRouter()
   const tema = useHookstate(TEMA)
+  const [reason, setReason] = useState("")
+
+  async function getOneDataCancel() {
+    try {
+      const res = await funGetOneProjectById(param.id, 'data');
+      console.log(res.data)
+      if (res.success) {
+        setReason(res.data.reason);
+      } else {
+        toast.error(res.message);
+      }
+
+    } catch (error) {
+      console.error(error);
+      toast.error("Gagal mendapatkan data Kegiatan, coba lagi nanti");
+    }
+  }
+
+  useShallowEffect(() => {
+    getOneDataCancel();
+  }, [param.id])
 
   async function getOneData() {
     try {
@@ -114,7 +135,9 @@ export default function ListTugasDetailProject() {
                       <Box onClick={() =>  {
                         setIdData(item.id)
                         setStatusData(item.status)
+                        reason == null ?
                           setOpenDrawer(true)
+                          :  setOpenDrawer(false)
                       }} my={18}>
                         <Checkbox  color="teal" size="md" checked={(item.status === 1) ? true : false} disabled
                           label={item.status === 1 ? 'Sudah Selesai' : 'Belum Selesai'}

src/module/project/ui/navbar_detail_project.tsx

@@ -19,12 +19,14 @@ export default function NavbarDetailProject() {
   const [isOpen, setOpen] = useState(false)
   const roleLogin = useHookstate(globalRole)
   const tema = useHookstate(TEMA)
+  const [reason, setReason] = useState("")
 
   async function getOneData() {
     try {
       const res = await funGetOneProjectById(param.id, 'data');
       if (res.success) {
         setName(res.data.title);
+        setReason(res.data.reason);
       } else {
         toast.error(res.message);
       }
@@ -69,15 +71,17 @@ export default function NavbarDetailProject() {
                   cursor: 'pointer'
                 }}
                 onClick={() => {
+                  reason == null ?
                     router.push(param.id + '/add-task')
+                    : null
                 }}
                 pb={20}
               >
                 <Box>
-                  <IoAddCircle size={30} color={tema.get().utama} />
+                  <IoAddCircle size={30} color={reason == null ? tema.get().utama : "gray"} />
                 </Box>
                 <Box>
-                  <Text c={tema.get().utama} ta='center'>Tambah Tugas</Text>
+                  <Text c={reason == null ? tema.get().utama : "gray"} ta='center'>Tambah Tugas</Text>
                 </Box>
               </Flex>
 
@@ -86,14 +90,16 @@ export default function NavbarDetailProject() {
                   cursor: 'pointer'
                 }}
                 onClick={() => {
+                  reason == null ?
                     router.push(param.id + '/add-file')
+                    : null
                 }}
               >
                 <Box>
-                  <FaFileCirclePlus size={30} color={tema.get().utama} />
+                  <FaFileCirclePlus size={30} color={reason == null ? tema.get().utama : "gray"} />
                 </Box>
                 <Box>
-                  <Text c={tema.get().utama} ta='center'>Tambah file</Text>
+                  <Text c={reason == null ? tema.get().utama : "gray"} ta='center'>Tambah file</Text>
                 </Box>
               </Flex>
 
@@ -105,14 +111,16 @@ export default function NavbarDetailProject() {
                       cursor: 'pointer'
                     }}
                     onClick={() => {
+                      reason == null ?
                         router.push(param.id + '/add-member')
+                        : null
                     }}
                   >
                     <Box>
-                      <FaUsers size={30} color={tema.get().utama} />
+                      <FaUsers size={30} color={reason == null ? tema.get().utama : "gray"} />
                     </Box>
                     <Box>
-                      <Text c={tema.get().utama} ta='center'>Tambah anggota</Text>
+                      <Text c={reason == null ? tema.get().utama : "gray"} ta='center'>Tambah anggota</Text>
                     </Box>
                   </Flex>
 
@@ -120,13 +128,17 @@ export default function NavbarDetailProject() {
                     style={{
                       cursor: 'pointer'
                     }}
-                    onClick={() => { router.push(param.id + '/edit') }}
+                    onClick={() => {
+                      reason == null ?
+                        router.push(param.id + '/edit')
+                        : null
+                    }}
                   >
                     <Box>
-                      <FaPencil size={30} color={tema.get().utama} />
+                      <FaPencil size={30} color={reason == null ? tema.get().utama : "gray"} />
                     </Box>
                     <Box>
-                      <Text c={tema.get().utama} ta='center'>Edit</Text>
+                      <Text c={reason == null ? tema.get().utama : "gray"} ta='center'>Edit</Text>
                     </Box>
                   </Flex>
 
@@ -134,13 +146,17 @@ export default function NavbarDetailProject() {
                     style={{
                       cursor: 'pointer'
                     }}
-                    onClick={() => { router.push(param.id + '/cancel') }}
+                    onClick={() => {
+                      reason == null ?
+                        router.push(param.id + '/cancel')
+                        : null
+                    }}
                   >
                     <Box>
-                      <MdCancel size={30} color={tema.get().utama} />
+                      <MdCancel size={30} color={reason == null ? tema.get().utama : "gray"} />
                     </Box>
                     <Box>
-                      <Text c={tema.get().utama} ta='center'>Batal</Text>
+                      <Text c={reason == null ? tema.get().utama : "gray"} ta='center'>Batal</Text>
                     </Box>
                   </Flex>
                 </>

src/module/project/ui/progress_detail_project.tsx

@@ -1,6 +1,6 @@
 'use client'
 import { useHookstate } from '@hookstate/core';
-import { ActionIcon, Box, Grid, Progress, Skeleton, Text } from '@mantine/core';
+import { ActionIcon, Box, Grid, Group, Progress, Skeleton, Text } from '@mantine/core';
 import { useParams } from 'next/navigation';
 import React, { useState } from 'react';
 import { HiMiniPresentationChartBar } from 'react-icons/hi2';
@@ -9,6 +9,7 @@ import toast from 'react-hot-toast';
 import { funGetOneProjectById } from '../lib/api_project';
 import { useShallowEffect } from '@mantine/hooks';
 import { TEMA } from '@/module/_global';
+import { IoIosWarning } from 'react-icons/io';
 
 export default function ProgressDetailProject() {
   const [valProgress, setValProgress] = useState(0)
@@ -17,6 +18,7 @@ export default function ProgressDetailProject() {
   const refresh = useHookstate(globalRefreshProject)
   const [loading, setLoading] = useState(true)
   const tema = useHookstate(TEMA)
+  const [reason, setReason] = useState("")
   
   async function getOneData() {
     try {
@@ -37,6 +39,26 @@ export default function ProgressDetailProject() {
     }
   }
 
+  async function getOneDataCancel() {
+    try {
+      const res = await funGetOneProjectById(param.id, 'data');
+      console.log(res.data)
+      if (res.success) {
+        setReason(res.data.reason);
+      } else {
+        toast.error(res.message);
+      }
+
+    } catch (error) {
+      console.error(error);
+      toast.error("Gagal mendapatkan data Kegiatan, coba lagi nanti");
+    }
+  }
+
+  useShallowEffect(() => {
+    getOneDataCancel();
+  }, [param.id])
+
   function onRefresh() {
     if (refresh.get()) {
       getOneData()
@@ -55,6 +77,22 @@ export default function ProgressDetailProject() {
   return (
     <>
       <Box mt={10}>
+        {reason !== null ? 
+          (
+            <Box mb={10}>
+            <Box p={15} bg={"#FFF2CD"} style={{
+              borderRadius: 10,
+              }}>
+              <Group align='center'>
+                <IoIosWarning size={25}/>
+                <Text fw={"bold"}>Kegiatan dibatalkan</Text>
+                </Group>
+                <Text mt={5} truncate="end">{reason}</Text>
+            </Box>
+            </Box>
+        )
+          : null
+      }
         {loading ?
           <Skeleton width={"100%"} height={100} radius={"md"} />
           :