Merge pull request #255 from bipproduction/lukman/25-september-2024

style : update style

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

@@ -72,8 +72,8 @@ export async function GET(request: Request, context: { params: { id: string } })
 
          const fix = dataProgress.map((v: any) => ({
             ..._.omit(v, ["dateStart", "dateEnd"]),
-            dateStart: moment(v.dateStart).format("DD MMMM YYYY"),
+            dateStart: moment(v.dateStart).format("DD-MM-YYYY"),
-            dateEnd: moment(v.dateEnd).format("DD MMMM YYYY"),
+            dateEnd: moment(v.dateEnd).format("DD-MM-YYYY"),
          }))
 
          allData = fix

src/module/division_new/ui/list_discussion.tsx

@@ -19,6 +19,7 @@ export default function ListDiscussionOnDetailDivision() {
   const [loading, setLoading] = useState(true);
   const isMobile = useMediaQuery('(max-width: 399px)');
   const tema = useHookstate(TEMA)
+  const isMobile2 = useMediaQuery("(max-width: 438px)");
 
   async function fetchData() {
     try {
@@ -87,17 +88,34 @@ export default function ListDiscussionOnDetailDivision() {
                 }}
                   onClick={() => router.push(`${param.id}/discussion/${v.id}`)}
                 >
-                  <Group>
+                  <Grid align='center'>
+                    <Grid.Col
+                      span={{
+                        base: 1,
+                        xs: 1,
+                        sm: 1,
+                        md: 1,
+                        lg: 1,
+                        xl: 1,
+                      }}
+                    >
                       <GoDiscussionClosed size={25} />
-                    <Box w={{
+                    </Grid.Col>
-                     base: isMobile ? 180 : 230,
+                    <Grid.Col
-                      md: 400
+                      span={{
-                    }}>
+                        base: 11,
-                      <Text fw={"bold"} truncate="end" fz={isMobile ? 14 : 16}>
+                        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>
+                    </Grid.Col>
-                  </Group>
+                  </Grid>
                   <Grid align="center" mt={20}>
                     <Grid.Col span={{
                       base: 7,

src/module/task/ui/add_detail_task.tsx

@@ -120,8 +120,8 @@ export default function AddDetailTask() {
                         borderRadius: 10,
                      },
                   }}
-                  label="Tahapan"
+                  label="Judul Tahapan"
-                  placeholder="Input Nama Tahapan"
+                  placeholder="Input Judul Tahapan"
                   size="md"
                   required
                   value={title}
@@ -133,7 +133,7 @@ export default function AddDetailTask() {
                   onBlur={() => setTouched({ ...touched, title: true })}
                   error={
                      touched.title && (
-                        title == "" ? "Tahapan Tidak Boleh Kosong" : null
+                        title == "" ? "Judul Tahapan Tidak Boleh Kosong" : null
                      )
                   }
                />

src/module/task/ui/add_member_detail_task.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { LayoutNavbarNew, SkeletonSingle, TEMA } from "@/module/_global";
+import { LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA } from "@/module/_global";
 import { funGetDivisionById, funGetSearchMemberDivision, IDataMemberDivision } from "@/module/division_new";
 import {
    ActionIcon,
@@ -19,7 +19,7 @@ import {
    Text,
    TextInput,
 } from "@mantine/core";
-import { useShallowEffect } from "@mantine/hooks";
+import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
 import { useParams, useRouter } from "next/navigation";
 import React, { useState } from "react";
 import toast from "react-hot-toast";
@@ -44,6 +44,7 @@ export default function AddMemberDetailTask() {
    const [onClickSearch, setOnClickSearch] = useState(false)
    const [searchQuery, setSearchQuery] = useState('')
    const tema = useHookstate(TEMA)
+   const isMobile2 = useMediaQuery("(max-width: 438px)");
 
 
    async function getData() {
@@ -255,10 +256,15 @@ export default function AddMemberDetailTask() {
                .fill(null)
                .map((_, i) => (
                   <Box key={i}>
-                     <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);
@@ -267,19 +273,27 @@ export default function AddMemberDetailTask() {
                            <Box mb={15} key={i} onClick={() => (!found) ? handleFileClick(i) : null}>
                               <Grid align='center'>
                                  <Grid.Col span={{
-                                 base: 3,
+                                    base: 1,
-                                 xl: 2
+                                    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: 9,
+                                    base: 11,
-                                 xl: 10
+                                    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>
-                                       <Text c={"dimmed"}>{(found) ? "sudah menjadi anggota" : ""}</Text>
+                                          <Text c={"dimmed"} pl={isMobile2 ? 40 : 30}>{(found) ? "sudah menjadi anggota" : ""}</Text>
                                        </Flex>
                                        {isSelected ? <FaCheck /> : null}
                                     </Flex>

src/module/task/ui/create_date_end_task.tsx

@@ -59,7 +59,7 @@ export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: bool
             <HiChevronLeft size={20} color='white' />
           </ActionIcon>
         </Box>
-      } title={"Tanggal Tugas"} menu />
+      } title={"Tanggal dan Tugas"} menu />
       <Box p={20}>
         <Group
           justify="center"
@@ -108,8 +108,8 @@ export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: bool
                 borderRadius: 10,
               },
             }}
-            placeholder="Input Nama Tahapan"
+            placeholder="Input Judul Tahapan"
-            label="Judul Tugas"
+            label="Judul Tahapan"
             required
             size="md"
             value={title}
@@ -118,7 +118,7 @@ export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: bool
               setTouched({ ...touched, title: false })
             }}
             onBlur={() => setTouched({ ...touched, title: true })}
-            error={touched.title && title == "" ? "Judul Tugas Tidak Boleh Kosong" : null}
+            error={touched.title && title == "" ? "Judul Tahapan Tidak Boleh Kosong" : null}
           />
         </Stack>
       </Box>

src/module/task/ui/create_task.tsx

@@ -113,7 +113,7 @@ export default function CreateTask() {
                 borderRadius: 10,
               },
             }}
-            placeholder="Nama Tugas"
+            placeholder="Judul Tugas"
             size="md"
             label="Judul Tugas"
             value={title}
@@ -125,7 +125,7 @@ export default function CreateTask() {
             required
             error={
               touched.title && (
-                title == "" ? "Nama Tidak Boleh Kosong" : null
+                title == "" ? "Judul Tugas Tidak Boleh Kosong" : null
               )
             }
           />

src/module/task/ui/create_users_project.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { LayoutNavbarNew, SkeletonSingle, TEMA } from "@/module/_global";
+import { LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA } from "@/module/_global";
 import { funGetDivisionById, funGetSearchMemberDivision, IDataMemberDivision } from "@/module/division_new";
 import { useHookstate } from "@hookstate/core";
 import {
@@ -15,10 +15,11 @@ import {
   Indicator,
   rem,
   Skeleton,
+  Stack,
   Text,
   TextInput,
 } from "@mantine/core";
-import { useShallowEffect } from "@mantine/hooks";
+import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
 import { useParams, useRouter } from "next/navigation";
 import React, { useState } from "react";
 import toast from "react-hot-toast";
@@ -41,6 +42,7 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
   const [onClickSearch, setOnClickSearch] = useState(false)
   const [searchQuery, setSearchQuery] = useState('')
   const tema = useHookstate(TEMA)
+  const isMobile2 = useMediaQuery("(max-width: 438px)");
 
 
   async function getData() {
@@ -242,28 +244,41 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
               .fill(null)
               .map((_, i) => (
                 <Box key={i} mb={15}>
-                  <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>
+            :
             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: 3,
+                      base: 1,
-                      xl: 2
+                      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: 9,
+                      base: 11,
-                      xl: 10
+                      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>

src/module/task/ui/detail_list_anggota_task.tsx

@@ -26,6 +26,26 @@ export default function ListAnggotaDetailTask() {
    const adminLogin = useHookstate(globalIsAdminDivision)
    const isMobile = useMediaQuery('(max-width: 369px)');
    const tema = useHookstate(TEMA)
+   const [reason, setReason] = useState("")
+
+   async function getOneDataCancel() {
+      try {
+         const res = await funGetTaskDivisionById(param.detail, 'data');
+         if (res.success) {
+            setReason(res.data.reason);
+         } else {
+            toast.error(res.message);
+         }
+
+      } catch (error) {
+         console.error(error);
+         toast.error("Gagal mendapatkan data tugas divisi, coba lagi nanti");
+      }
+   }
+
+   useShallowEffect(() => {
+      getOneDataCancel();
+   }, [param.detail])
 
    async function getOneData() {
       try {
@@ -101,7 +121,9 @@ export default function ListAnggotaDetailTask() {
                                     <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/task/ui/detail_list_file_task.tsx

@@ -25,6 +25,26 @@ export default function ListFileDetailTask() {
    const [isOpenModalView, setOpenModalView] = useState(false)
    const [isExtension, setExtension] = useState('')
    const tema = useHookstate(TEMA)
+   const [reason, setReason] = useState("")
+
+   async function getOneDataCancel() {
+      try {
+         const res = await funGetTaskDivisionById(param.detail, 'data');
+         if (res.success) {
+            setReason(res.data.reason);
+         } else {
+            toast.error(res.message);
+         }
+
+      } catch (error) {
+         console.error(error);
+         toast.error("Gagal mendapatkan data tugas divisi, coba lagi nanti");
+      }
+   }
+
+   useShallowEffect(() => {
+      getOneDataCancel();
+   }, [param.detail])
 
    async function getOneData() {
       try {
@@ -116,12 +136,13 @@ export default function ListFileDetailTask() {
                                        {item.extension == "pdf" && <BsFiletypePdf size={25} />}
                                        {item.extension == "csv" && <BsFiletypeCsv size={25} />}
                                        {item.extension == "png" && <BsFiletypePng size={25} />}
-                                       {(item.extension == "jpg" || item.extension == "jpeg") && <BsFiletypeJpg size={25} />}
+                                       {item.extension == "jpg" && <BsFiletypeJpg size={25} />}
+                                       {item.extension == "jpeg" && <BsFiletypeJpg size={25} />}
                                        {item.extension == "heic" && <BsFiletypeHeic size={25} />}
                                     </Center>
                                  </Grid.Col>
                                  <Grid.Col span={10}>
-                                    <Text>{item.name + '.' + item.extension}</Text>
+                                    <Text truncate={'end'}>{item.name + '.' + item.extension}</Text>
                                  </Grid.Col>
                               </Grid>
                               <Group>
@@ -149,12 +170,16 @@ export default function ListFileDetailTask() {
                         </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/task/ui/detail_list_tugas_task.tsx

@@ -26,6 +26,27 @@ export default function ListTugasDetailTask() {
    const router = useRouter()
    const refresh = useHookstate(globalRefreshTask)
    const tema = useHookstate(TEMA)
+   const [reason, setReason] = useState("")
+
+   async function getOneDataCancel() {
+      try {
+         const res = await funGetTaskDivisionById(param.detail, 'data');
+         if (res.success) {
+            setReason(res.data.reason);
+         } else {
+            toast.error(res.message);
+         }
+
+      } catch (error) {
+         console.error(error);
+         toast.error("Gagal mendapatkan data tugas divisi, coba lagi nanti");
+      }
+   }
+
+   useShallowEffect(() => {
+      getOneDataCancel();
+   }, [param.detail])
+
    async function getOneData() {
       try {
          setLoading(true)
@@ -97,13 +118,16 @@ export default function ListTugasDetailTask() {
             style={{
                borderRadius: 10,
                border: `1px solid ${"#D6D8F6"}`,
-               padding: 20,
             }}
+            pl={20}
+            pr={20}
          >
             {
                loading ?
                   <>
+                     <Box pl={5} pr={5} pt={20} pb={20}>
                         <SkeletonDetailListTugasTask />
+                     </Box>
                   </>
                   :
                   isData.length === 0 ? <Text>Tidak ada tugas</Text> :
@@ -113,8 +137,10 @@ export default function ListTugasDetailTask() {
                               <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'}
                                  />
@@ -137,7 +163,7 @@ export default function ListTugasDetailTask() {
                                        </Grid>
                                     </Box>
                                     <Box>
-                                       <SimpleGrid cols={{ base: 1, sm: 2, lg: 2 }} mt={20}>
+                                       <SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} my={20}>
                                           <Box>
                                              <Text>Tanggal Mulai</Text>
                                              <Group
@@ -164,7 +190,7 @@ export default function ListTugasDetailTask() {
                                     </Box>
                                  </Box>
                               </Box>
-                              <Divider my={"lg"} />
+                              <Divider my={20} />
                            </Box>
                         )
                      })

src/module/task/ui/detail_progress_task.tsx

@@ -1,6 +1,6 @@
 'use client'
 import { TEMA } from "@/module/_global";
-import { Box, Grid, ActionIcon, Progress, Text, Skeleton } from "@mantine/core";
+import { Box, Grid, ActionIcon, Progress, Text, Skeleton, Group } from "@mantine/core";
 import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
 import { useParams } from "next/navigation";
 import toast from "react-hot-toast";
@@ -9,6 +9,7 @@ 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";
 
 export default function ProgressDetailTask() {
    const [valProgress, setValProgress] = useState(0)
@@ -18,6 +19,27 @@ export default function ProgressDetailTask() {
    const [loading, setLoading] = useState(true)
    const isMobile = useMediaQuery('(max-width: 369px)');
    const tema = useHookstate(TEMA)
+   const [reason, setReason] = useState("")
+
+   async function getOneDataCancel() {
+      try {
+         const res = await funGetTaskDivisionById(param.detail, 'data');
+         if (res.success) {
+            setReason(res.data.reason);
+         } else {
+            toast.error(res.message);
+         }
+
+      } catch (error) {
+         console.error(error);
+         toast.error("Gagal mendapatkan data tugas divisi, coba lagi nanti");
+      }
+   }
+
+   useShallowEffect(() => {
+      getOneDataCancel();
+   }, [param.detail])
+
 
    async function getOneData() {
       try {
@@ -56,6 +78,22 @@ export default function ProgressDetailTask() {
 
    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"}>Tugas dibatalkan</Text>
+                     </Group>
+                     <Text mt={5} truncate="end">{reason}</Text>
+                  </Box>
+               </Box>
+            )
+            : null
+         }
          {loading ?
             <Skeleton width={"100%"} height={100} radius={"md"} />
             :
@@ -74,14 +112,14 @@ export default function ProgressDetailTask() {
                         aria-label="Gradient action icon"
                         radius={100}
                         // gradient={{ from: "#DFDA7C", to: "#F2AF46", deg: 174 }}
-                        bg={tema.get().bgFiturDivision}
+                        bg={tema.get().bgFiturHome}
                      >
                         <HiMiniPresentationChartBar size={isMobile ? 25 : 35} color={tema.get().utama} />
                      </ActionIcon>
                   </Grid.Col>
                   <Grid.Col span={9}>
                      <Box>
-                        <Text fz={isMobile ? 14 : 16}>Kemajuan Kegiatan {valProgress}%</Text>
+                        <Text fz={isMobile ? 14 : 16}>Kemajuan Tugas {valProgress}%</Text>
                         <Progress
                            style={{
                               border: `1px solid ${"#BDBDBD"}`,

src/module/task/ui/edit_detail_task.tsx

@@ -89,7 +89,7 @@ export default function EditDetailTask() {
 
    return (
       <Box>
-         <LayoutNavbarNew back="" title={"Edit Detail Tugas"} menu />
+         <LayoutNavbarNew back="" title={"Edit Tanggal dan Tugas"} menu />
          <Box p={20}>
             <Group
                justify="center"
@@ -153,9 +153,9 @@ export default function EditDetailTask() {
                            borderRadius: 10,
                         },
                      }}
-                     label={"Nama Tahapan"}
+                     label={"Judul Tahapan"}
                      required
-                     placeholder="Input Nama Tahapan"
+                     placeholder="Input Judul Tahapan"
                      size="md"
                      value={title}
                      onChange={(e) => { setTitle(e.target.value) }}

src/module/task/ui/list_division_task.tsx

@@ -1,4 +1,4 @@
-import { currentScroll, TEMA } from "@/module/_global";
+import { currentScroll, 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";
@@ -117,21 +117,31 @@ export default function ListDivisionTask() {
             </Grid.Col>
          </Grid>
          <Box pt={20}>
-            {loading ?
-               <Box>
-                  <Skeleton width={"100%"} height={100} radius={"md"} />
-               </Box>
-               :
             <Box bg={tema.get().bgTotalKegiatan} p={10} style={{ borderRadius: 10 }}>
-                  <Text fw={'bold'} c={tema.get().utama}>Total Kegiatan</Text>
+               <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>
                </Flex>
             </Box>
-            }
             {isList ? (
                <Box pt={20}>
-                  {isData.map((v, i) => {
+                  {
+                     loading ?
+                        Array(3)
+                           .fill(null)
+                           .map((_, i) => (
+                              <Box key={i}>
+                                 <SkeletonList />
+                              </Box>
+                           ))
+                        :
+                        _.isEmpty(isData)
+                           ?
+                           <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
+                              <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada Tugas</Text>
+                           </Box>
+                           :
+                           isData.map((v, i) => {
                               return (
                                  <Box key={i}>
                                     <Grid align='center'>

src/module/task/ui/navbar_detail_division_task.tsx

@@ -21,12 +21,14 @@ export default function NavbarDetailDivisionTask() {
    const roleLogin = useHookstate(globalRole)
    const adminLogin = useHookstate(globalIsAdminDivision)
    const tema = useHookstate(TEMA)
+   const [reason, setReason] = useState("")
 
    async function getOneData() {
       try {
          const res = await funGetTaskDivisionById(param.detail, 'data');
          if (res.success) {
             setName(res.data.title);
+            setReason(res.data.reason);
          } else {
             toast.error(res.message);
          }
@@ -41,7 +43,6 @@ export default function NavbarDetailDivisionTask() {
       getOneData();
    }, [param.detail])
 
-
    return (
       <>
          <LayoutNavbarNew back={`/division/${param.id}/task/`} title={name} menu={
@@ -73,15 +74,17 @@ export default function NavbarDetailDivisionTask() {
                            cursor: 'pointer'
                         }}
                         onClick={() => {
+                           reason == null ?
                               router.push(param.detail + '/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>
 
@@ -90,14 +93,16 @@ export default function NavbarDetailDivisionTask() {
                            cursor: 'pointer'
                         }}
                         onClick={() => {
+                           reason == null ?
                               router.push(param.detail + '/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>
 
@@ -108,12 +113,16 @@ export default function NavbarDetailDivisionTask() {
                                  style={{
                                     cursor: 'pointer'
                                  }}
-                                 onClick={() => { router.push(param.detail + '/add-member') }} >
+                                 onClick={() => {
+                                    reason == null ?
+                                       router.push(param.detail + '/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>
 
@@ -121,12 +130,16 @@ export default function NavbarDetailDivisionTask() {
                                  style={{
                                     cursor: 'pointer'
                                  }}
-                                 onClick={() => { router.push(param.detail + '/edit') }} >
+                                 onClick={() => {
+                                    reason == null ?
+                                       router.push(param.detail + '/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,12 +147,16 @@ export default function NavbarDetailDivisionTask() {
                                  style={{
                                     cursor: 'pointer'
                                  }}
-                                 onClick={() => { router.push(param.detail + '/cancel') }} >
+                                 onClick={() => {
+                                    reason == null ?
+                                       router.push(param.detail + '/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/task/ui/navbar_division_task.tsx

@@ -17,7 +17,7 @@ export default function NavbarDivisionTask() {
 
    return (
       <>
-         <LayoutNavbarNew back={`/division/${param.id}`} title="Divisi - Tugas"
+         <LayoutNavbarNew back={`/division/${param.id}`} title="Tugas Divisi"
             menu={((roleLogin.get() != "user" && roleLogin.get() != "coadmin") || adminLogin.get()) ?
                <ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
                   <HiMenu size={20} color='white' />