From 75218f5dc314db1de0e39de5bb8f9bc154d16b32 Mon Sep 17 00:00:00 2001
From: lukman <lukman@lukmans-MacBook-Air.local>
Date: Wed, 25 Sep 2024 12:17:27 +0800
Subject: [PATCH] style : update revisi style

---
 .../ui/create_anggota_division.tsx            |  38 ++-
 .../division_new/ui/create_division.tsx       |   4 +-
 .../ui/drawer_detail_division.tsx             |   2 +-
 src/module/division_new/ui/event_report.tsx   |   2 +-
 .../division_new/ui/information_division.tsx  |  38 +--
 src/module/division_new/ui/list_division.tsx  |  28 +-
 .../division_new/ui/navbar_admin_division.tsx |   8 +-
 .../division_new/ui/navbar_create_users.tsx   | 245 ++++++++++--------
 .../project/ui/add_member_detail_project.tsx  |  99 +++----
 src/module/project/ui/edit_task_project.tsx   |   8 +-
 .../ui/list_anggota_detail_project.tsx        |  25 +-
 .../project/ui/list_file_detail_project.tsx   |  43 ++-
 .../project/ui/list_tugas_detail_project.tsx  |  27 +-
 .../project/ui/navbar_detail_project.tsx      |  46 ++--
 .../project/ui/progress_detail_project.tsx    | 114 +++++---
 15 files changed, 441 insertions(+), 286 deletions(-)

diff --git a/src/module/division_new/ui/create_anggota_division.tsx b/src/module/division_new/ui/create_anggota_division.tsx
index 64910df..03ec094 100644
--- a/src/module/division_new/ui/create_anggota_division.tsx
+++ b/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={{ base: 10, xl: 0 }} c={"dimmed"} lineClamp={1}>{(found) ? "sudah menjadi anggota divisi" : ""}</Text>
+                          <Text pl={isMobile2 ? 40 : 30} lineClamp={1}>{v.name}</Text>
+                          <Text pl={isMobile2 ? 40 : 30} c={"dimmed"} lineClamp={1}>{(found) ? "sudah menjadi anggota divisi" : ""}</Text>
                         </Flex>
                         {isSelected ? <FaCheck /> : null}
                       </Flex>
diff --git a/src/module/division_new/ui/create_division.tsx b/src/module/division_new/ui/create_division.tsx
index c9f5de5..6618c5a 100644
--- a/src/module/division_new/ui/create_division.tsx
+++ b/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 })}
diff --git a/src/module/division_new/ui/drawer_detail_division.tsx b/src/module/division_new/ui/drawer_detail_division.tsx
index bc79051..8cb498d 100644
--- a/src/module/division_new/ui/drawer_detail_division.tsx
+++ b/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>
diff --git a/src/module/division_new/ui/event_report.tsx b/src/module/division_new/ui/event_report.tsx
index 232791d..85fafb1 100644
--- a/src/module/division_new/ui/event_report.tsx
+++ b/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)
           ?
diff --git a/src/module/division_new/ui/information_division.tsx b/src/module/division_new/ui/information_division.tsx
index 88c49e6..ef72ac8 100644
--- a/src/module/division_new/ui/information_division.tsx
+++ b/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
-                      variant="light"
-                      bg={"#DCEED8"}
-                      size={50}
-                      radius={100}
-                      aria-label="icon"
-                    >
-                      <Skeleton height={25} width={25} />
-                    </ActionIcon>
-                  </Box>
-                  <Box>
-                    <Skeleton height={20} width={100} />
-                  </Box>
-                </Group>
+                <Box>
+                  <Grid p={10} align="center">
+                    <Grid.Col span={2}>
+                      <Skeleton w={50} h={50} radius={100} />
+                    </Grid.Col>
+                    <Grid.Col span={9}>
+                      <Skeleton w={"80%"} h={20} />
+                    </Grid.Col>
+                  </Grid>
+                </Box>
                 :
 
                 ((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) => {
diff --git a/src/module/division_new/ui/list_division.tsx b/src/module/division_new/ui/list_division.tsx
index 8f7792c..0a0a257 100644
--- a/src/module/division_new/ui/list_division.tsx
+++ b/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 ?
-            <>
-              <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>
+            <Box bg={tema.get().bgTotalKegiatan} p={10} style={{ borderRadius: 10 }}>
+              <Text fw={'bold'} c={tema.get().utama}>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} />
diff --git a/src/module/division_new/ui/navbar_admin_division.tsx b/src/module/division_new/ui/navbar_admin_division.tsx
index e350715..8ef22ec 100644
--- a/src/module/division_new/ui/navbar_admin_division.tsx
+++ b/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>
                 );
diff --git a/src/module/division_new/ui/navbar_create_users.tsx b/src/module/division_new/ui/navbar_create_users.tsx
index 6727c42..d5fa916 100644
--- a/src/module/division_new/ui/navbar_create_users.tsx
+++ b/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)) {
@@ -88,123 +89,141 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
         menu={<ActionIcon onClick={handleSearchClick} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="search">
           <HiMagnifyingGlass size={20} color='white' />
         </ActionIcon>} />
-        {/* SEARCH */}
-        {onClickSearch
-          ? (
-            <Box
-              pos={'fixed'} top={0} p={rem(20)} w={"100%"} style={{
-                maxWidth: rem(550),
-                zIndex: 9999,
-                backgroundColor: `${tema.get().utama}`,
-                borderBottomLeftRadius: 20,
-                borderBottomRightRadius: 20,
-              }}>
-              <Grid justify='center' align='center' gutter={'lg'}>
-                <Grid.Col span={1}>
-                  <ActionIcon onClick={handleClose} variant="subtle" color='white' size="lg" mt={5} radius="lg" aria-label="search">
-                    <IoArrowBackOutline size={30} />
-                  </ActionIcon>
-                </Grid.Col>
-                <Grid.Col span={11}>
-                  <TextInput
-                    styles={{
-                      input: {
-                        color: "white",
-                        borderRadius: '#A3A3A3',
-                        borderColor: `${tema.get().utama}`,
-                        backgroundColor: `${tema.get().utama}`,
-                      },
-                    }}
-                    size="md"
-                    radius={30}
-                    placeholder="Pencarian"
-                    onChange={(e) => loadData(e.target.value)}
-                  />
-                </Grid.Col>
-              </Grid>
-            </Box>
-          )
-          : null
-        }
-        {/* Close User */}
-        <Box pos={'fixed'} top={80} pl={rem(20)} pr={rem(20)} pt={rem(20)} pb={rem(5)} w={"100%"} style={{
-          maxWidth: rem(550),
-          zIndex: 100,
-          backgroundColor: `${tema.get().bgUtama}`,
-          borderBottom: `1px solid ${"#E0DFDF"}`
-        }}>
-          {selectedFiles.length > 0 ? (
-            <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"}  withControls={false}>
-              {selectedFiles.map((v: any, i: any) => {
-                return (
-                  <Carousel.Slide key={i}>
-                    <Box w={{
-                      base: 70,
-                      xl: 70
-                    }}
-                      onClick={() => { handleXMember(v.idUser) }}
-                    >
-                      <Center>
-                        <Indicator inline size={25} offset={7} position="bottom-end" color="red" withBorder label={<IoClose />}>
-                          <Avatar style={{
-                            border: `2px solid ${tema.get().utama}`
-                          }} src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
-                        </Indicator>
-                      </Center>
-                      <Text ta={"center"} lineClamp={1}>{v.name}</Text>
-                    </Box>
-                  </Carousel.Slide>
-                )
-              })}
-            </Carousel>
-          ) : (
-            <Box h={rem(81)}>
-              <Flex justify={"center"} align={'center'} h={"100%"}>
-                <Text ta={'center'} fz={14}>Tidak ada anggota yang dipilih</Text>
-              </Flex>
-            </Box>
-          )}
-        </Box>
+      {/* SEARCH */}
+      {onClickSearch
+        ? (
+          <Box
+            pos={'fixed'} top={0} p={rem(20)} w={"100%"} style={{
+              maxWidth: rem(550),
+              zIndex: 9999,
+              backgroundColor: `${tema.get().utama}`,
+              borderBottomLeftRadius: 20,
+              borderBottomRightRadius: 20,
+            }}>
+            <Grid justify='center' align='center' gutter={'lg'}>
+              <Grid.Col span={1}>
+                <ActionIcon onClick={handleClose} variant="subtle" color='white' size="lg" mt={5} radius="lg" aria-label="search">
+                  <IoArrowBackOutline size={30} />
+                </ActionIcon>
+              </Grid.Col>
+              <Grid.Col span={11}>
+                <TextInput
+                  styles={{
+                    input: {
+                      color: "white",
+                      borderRadius: '#A3A3A3',
+                      borderColor: `${tema.get().utama}`,
+                      backgroundColor: `${tema.get().utama}`,
+                    },
+                  }}
+                  size="md"
+                  radius={30}
+                  placeholder="Pencarian"
+                  onChange={(e) => loadData(e.target.value)}
+                />
+              </Grid.Col>
+            </Grid>
+          </Box>
+        )
+        : null
+      }
+      {/* Close User */}
+      <Box pos={'fixed'} top={80} pl={rem(20)} pr={rem(20)} pt={rem(20)} pb={rem(5)} w={"100%"} style={{
+        maxWidth: rem(550),
+        zIndex: 100,
+        backgroundColor: `${tema.get().bgUtama}`,
+        borderBottom: `1px solid ${"#E0DFDF"}`
+      }}>
+        {selectedFiles.length > 0 ? (
+          <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withControls={false}>
+            {selectedFiles.map((v: any, i: any) => {
+              return (
+                <Carousel.Slide key={i}>
+                  <Box w={{
+                    base: 70,
+                    xl: 70
+                  }}
+                    onClick={() => { handleXMember(v.idUser) }}
+                  >
+                    <Center>
+                      <Indicator inline size={25} offset={7} position="bottom-end" color="red" withBorder label={<IoClose />}>
+                        <Avatar style={{
+                          border: `2px solid ${tema.get().utama}`
+                        }} src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
+                      </Indicator>
+                    </Center>
+                    <Text ta={"center"} lineClamp={1}>{v.name}</Text>
+                  </Box>
+                </Carousel.Slide>
+              )
+            })}
+          </Carousel>
+        ) : (
+          <Box h={rem(81)}>
+            <Flex justify={"center"} align={'center'} h={"100%"}>
+              <Text ta={'center'} fz={14}>Tidak ada anggota yang dipilih</Text>
+            </Flex>
+          </Box>
+        )}
+      </Box>
       <Box p={20}>
         <Stack>
           <Box pt={100} mb={100}>
             {loading ?
               Array(6)
-              .fill(null)
-              .map((_, i) => (
-                <Box key={i}>
-                  <SkeletonSingle />
-                </Box>
-              ))
-              : dataMember.map((v, index) => {
-                const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id);
-                return (
-                  <Box mb={15} key={index} onClick={() => handleFileClick(index)}>
-                    <Grid align='center'>
-                      <Grid.Col span={{
-                        base: 3,
-                        xl: 2
-                      }}>
-                        <Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
-                      </Grid.Col>
-                      <Grid.Col span={{
-                        base: 9,
-                        xl: 10
-                      }}>
-                        <Flex justify='space-between' align={"center"}>
-                          <Flex direction={'column'} align="flex-start" justify="flex-start">
-                            <Text lineClamp={1}>{v.name}</Text>
-                          </Flex>
-                          {isSelected ? <FaCheck /> : null}
-                        </Flex>
-                      </Grid.Col>
-                    </Grid>
-                    <Box mt={10}>
-                      <Divider size={"xs"} />
-                    </Box>
+                .fill(null)
+                .map((_, i) => (
+                  <Box key={i}>
+                    <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>
+                :
+                dataMember.map((v, index) => {
+                  const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id);
+                  return (
+                    <Box mb={10} key={index} onClick={() => handleFileClick(index)}>
+                      <Grid align='center'>
+                        <Grid.Col
+                          span={{
+                            base: 1,
+                            xs: 1,
+                            sm: 1,
+                            md: 1,
+                            lg: 1,
+                            xl: 1,
+                          }}
+                        >
+                          <Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
+                        </Grid.Col>
+                        <Grid.Col
+                          span={{
+                            base: 11,
+                            xs: 11,
+                            sm: 11,
+                            md: 11,
+                            lg: 11,
+                            xl: 11,
+                          }}
+                        >
+                          <Flex justify='space-between' align={"center"}>
+                            <Flex direction={'column'} align="flex-start" justify="flex-start">
+                              <Text lineClamp={1}  pl={isMobile2 ? 40 : 30}>{v.name}</Text>
+                            </Flex>
+                            {isSelected ? <FaCheck /> : null}
+                          </Flex>
+                        </Grid.Col>
+                      </Grid>
+                      <Box mt={10}>
+                        <Divider my={10} />
+                      </Box>
+                    </Box>
+                  );
+                })
             }
           </Box>
         </Stack>
diff --git a/src/module/project/ui/add_member_detail_project.tsx b/src/module/project/ui/add_member_detail_project.tsx
index 16b1f83..198b6b2 100644
--- a/src/module/project/ui/add_member_detail_project.tsx
+++ b/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 {
@@ -57,7 +57,7 @@ export default function AddMemberDetailProject() {
     if (selectedFiles.some((i: any) => i.idUser == isData[index].idUser)) {
       setSelectedFiles(selectedFiles.filter((i: any) => i.idUser != isData[index].idUser))
     } else {
-      setSelectedFiles([...selectedFiles, { idUser: isData[index].idUser, name: isData[index].name, img: isData[index].img  }])
+      setSelectedFiles([...selectedFiles, { idUser: isData[index].idUser, name: isData[index].name, img: isData[index].img }])
     }
   };
 
@@ -221,55 +221,60 @@ export default function AddMemberDetailProject() {
             .fill(null)
             .map((_, i) => (
               <Box key={i} mb={10}>
-                <SkeletonSingle />
+                <SkeletonList />
               </Box>
             ))
           :
-          <Box mt={15} mb={100}>
-            {isData.map((v, i) => {
-              const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
-              const found = isDataMember.some((i: any) => i.idUser == v.idUser)
-              return (
-                <Box mb={15} key={i} onClick={() => (!found) ? handleFileClick(i) : null}>
-                  <Grid align='center'>
-                    <Grid.Col
-                    span={{
-                      base: 1,
-                      xs: 1,
-                      sm: 1,
-                      md: 1,
-                      lg: 1,
-                      xl: 1,
-                    }}
-                    >
-                      <Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
-                    </Grid.Col>
-                    <Grid.Col
-                    span={{
-                      base: 11,
-                      xs: 11,
-                      sm: 11,
-                      md: 11,
-                      lg: 11,
-                      xl: 11,
-                    }}
-                    >
-                      <Flex justify='space-between' align={"center"}>
-                        <Flex direction={'column'} align="flex-start" justify="flex-start">
-                          <Text lineClamp={1} pl={isMobile2 ? 40 : 30}>{v.name}</Text>
-                          <Text c={"dimmed"} pl={isMobile2 ? 40 : 30}>{(found) ? "sudah menjadi anggota" : ""}</Text>
+          (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);
+                const found = isDataMember.some((i: any) => i.idUser == v.idUser)
+                return (
+                  <Box mb={15} key={i} onClick={() => (!found) ? handleFileClick(i) : null}>
+                    <Grid align='center'>
+                      <Grid.Col
+                        span={{
+                          base: 1,
+                          xs: 1,
+                          sm: 1,
+                          md: 1,
+                          lg: 1,
+                          xl: 1,
+                        }}
+                      >
+                        <Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
+                      </Grid.Col>
+                      <Grid.Col
+                        span={{
+                          base: 11,
+                          xs: 11,
+                          sm: 11,
+                          md: 11,
+                          lg: 11,
+                          xl: 11,
+                        }}
+                      >
+                        <Flex justify='space-between' align={"center"}>
+                          <Flex direction={'column'} align="flex-start" justify="flex-start">
+                            <Text lineClamp={1} pl={isMobile2 ? 40 : 30}>{v.name}</Text>
+                            <Text c={"dimmed"} pl={isMobile2 ? 40 : 30}>{(found) ? "sudah menjadi anggota" : ""}</Text>
+                          </Flex>
+                          {isSelected ? <FaCheck /> : null}
                         </Flex>
-                        {isSelected ? <FaCheck /> : null}
-                      </Flex>
-                    </Grid.Col>
-                  </Grid>
-                  <Box mt={10}>
-                    <Divider size={"xs"} />
+                      </Grid.Col>
+                    </Grid>
+                    <Box mt={10}>
+                      <Divider size={"xs"} />
+                    </Box>
                   </Box>
-                </Box>
-              );
-            })}
-          </Box>
+                );
+              })}
+            </Box>
         }
       </Box>
       <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
diff --git a/src/module/project/ui/edit_task_project.tsx b/src/module/project/ui/edit_task_project.tsx
index b0cf7ac..6f8e8bc 100644
--- a/src/module/project/ui/edit_task_project.tsx
+++ b/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()
diff --git a/src/module/project/ui/list_anggota_detail_project.tsx b/src/module/project/ui/list_anggota_detail_project.tsx
index e0e6281..80a8e01 100644
--- a/src/module/project/ui/list_anggota_detail_project.tsx
+++ b/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 })
-                            setOpenDrawer(true)
+                            reason == null ?
+                              setOpenDrawer(true)
+                              : setOpenDrawer(false)
                           }}
                         >
                           <Grid.Col span={9}>
diff --git a/src/module/project/ui/list_file_detail_project.tsx b/src/module/project/ui/list_file_detail_project.tsx
index 380dad1..d0628bc 100644
--- a/src/module/project/ui/list_file_detail_project.tsx
+++ b/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 == "csv" && <BsFiletypeCsv size={ 30} />}
-                            {item.extension == "png" && <BsFiletypePng size={ 30} />}
-                            {item.extension == "jpg" && <BsFiletypeJpg size={ 30} />}
-                            {item.extension == "jpeg" && <BsFiletypeJpg size={ 30} />}
-                            {item.extension == "heic" && <BsFiletypeHeic size={ 30} />}
+                          {item.extension == "pdf" && <BsFiletypePdf size={30} />}
+                          {item.extension == "csv" && <BsFiletypeCsv size={30} />}
+                          {item.extension == "png" && <BsFiletypePng size={30} />}
+                          {item.extension == "jpg" && <BsFiletypeJpg size={30} />}
+                          {item.extension == "jpeg" && <BsFiletypeJpg 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>
diff --git a/src/module/project/ui/list_tugas_detail_project.tsx b/src/module/project/ui/list_tugas_detail_project.tsx
index a335b12..6cf303a 100644
--- a/src/module/project/ui/list_tugas_detail_project.tsx
+++ b/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 {
@@ -111,10 +132,12 @@ export default function ListTugasDetailProject() {
                 isData.map((item, index) => {
                   return (
                     <Box key={index}>
-                      <Box onClick={() => {
+                      <Box onClick={() =>  {
                         setIdData(item.id)
                         setStatusData(item.status)
-                        setOpenDrawer(true)
+                        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'}
diff --git a/src/module/project/ui/navbar_detail_project.tsx b/src/module/project/ui/navbar_detail_project.tsx
index 6f7d497..6683118 100644
--- a/src/module/project/ui/navbar_detail_project.tsx
+++ b/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={() => {
-                  router.push(param.id + '/add-task')
+                  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={() => {
-                  router.push(param.id + '/add-file')
+                  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={() => {
-                      router.push(param.id + '/add-member')
+                      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>
                 </>
diff --git a/src/module/project/ui/progress_detail_project.tsx b/src/module/project/ui/progress_detail_project.tsx
index 77f34f6..aea3707 100644
--- a/src/module/project/ui/progress_detail_project.tsx
+++ b/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,7 +18,8 @@ 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 {
       setLoading(true)
@@ -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,46 +77,62 @@ export default function ProgressDetailProject() {
   return (
     <>
       <Box mt={10}>
-        {loading ? 
+        {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"} />
           :
-        <Box
-          p={20}
-          bg={"#DCEED8"}
-          style={{
-            borderRadius: 10,
-          }}
-        >
-          <Grid gutter={"lg"}>
-            <Grid.Col span={3}>
-              <ActionIcon
-                variant="gradient"
-                size={68}
-                aria-label="Gradient action icon"
-                radius={100}
+          <Box
+            p={20}
+            bg={"#DCEED8"}
+            style={{
+              borderRadius: 10,
+            }}
+          >
+            <Grid gutter={"lg"}>
+              <Grid.Col span={3}>
+                <ActionIcon
+                  variant="gradient"
+                  size={68}
+                  aria-label="Gradient action icon"
+                  radius={100}
                   // gradient={{ from: "#DFDA7C", to: "#F2AF46", deg: 174 }}
                   bg={tema.get().bgFiturHome}
-              >
-                <HiMiniPresentationChartBar size={35} color={tema.get().utama} />
-              </ActionIcon>
-            </Grid.Col>
-            <Grid.Col span={9}>
-              <Box>
-                <Text>Kemajuan Kegiatan {valProgress}%</Text>
-                <Progress
-                  style={{
-                    border: `1px solid ${"#BDBDBD"}`,
-                  }}
-                  w={"100%"}
-                  color={tema.get().bgFiturHome}
-                  radius="md"
-                  size="xl"
-                  value={valProgress}
-                />
-              </Box>
-            </Grid.Col>
-          </Grid>
-        </Box>
+                >
+                  <HiMiniPresentationChartBar size={35} color={tema.get().utama} />
+                </ActionIcon>
+              </Grid.Col>
+              <Grid.Col span={9}>
+                <Box>
+                  <Text>Kemajuan Kegiatan {valProgress}%</Text>
+                  <Progress
+                    style={{
+                      border: `1px solid ${"#BDBDBD"}`,
+                    }}
+                    w={"100%"}
+                    color={tema.get().bgFiturHome}
+                    radius="md"
+                    size="xl"
+                    value={valProgress}
+                  />
+                </Box>
+              </Grid.Col>
+            </Grid>
+          </Box>
         }
       </Box>
     </>