Merge pull request #147 from bipproduction/lukman/27-agustus-2024

feat : update validation and color

src/app/api/project/route.ts

@@ -140,10 +140,10 @@ export async function POST(request: Request) {
         }
 
 
-        return NextResponse.json({ success: true, message: "Berhasil membuat proyek", data: data, }, { status: 200 });
+        return NextResponse.json({ success: true, message: "Berhasil membuat kegiatan", data: data, }, { status: 200 });
 
     } catch (error) {
         console.error(error);
-        return NextResponse.json({ success: false, message: "Gagal membuat proyek, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
+        return NextResponse.json({ success: false, message: "Gagal membuat kegiatan, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
     }
 }

src/module/_global/fun/WARNA.ts

@@ -1,7 +1,9 @@
 export const WARNA = {
     bgWhite: "#F4F9FD",
-    biruTua: "#19345E",
+    // biruTua: "#19345E",
-    bgIcon: "#384288",
+    biruTua: "#508D4E",
+    // bgIcon: "#384288",
+    bgIcon: "#3C8754",
     borderOrange: "#FCAA4B",
     bgHijauMuda: "#DCEED8",
     borderBiruMuda: "#9EBDED"

src/module/_global/layout/layout_login.tsx

@@ -12,7 +12,7 @@ export default function LayoutLogin({
       <Stack justify="center" align="center" pt={rem(50)}>
         <Image w={102} h={103} src={"/assets/img/logo/logo-1.png"} alt="logo" />
         <Title c={WARNA.biruTua} order={4}>
-          PERBEKAL DARMASABA
+          PERBEKEL DARMASABA
         </Title>
       </Stack>
       {children}

src/module/auth/welcome/view_welcome.tsx

@@ -17,7 +17,7 @@ import { WARNA } from "@/module/_global";
 const listTextWellcome = [
   {
     id: "1",
-    text: "Selamat Datang di Aplikasi Desa Darmasaba Optimalkan Proyek Desa dengan Fitur Kolaboratif Manajemen Proyek yang Efisien untuk Masa Depan Yang Lebih Baik",
+    text: "Selamat Datang di Aplikasi Desa Darmasaba Optimalkan Kegiatan Desa dengan Fitur Kolaboratif Manajemen Kegiatan yang Efisien untuk Masa Depan Yang Lebih Baik",
     img: "/assets/img/welcome/wellcome-1.png",
   },
   {

src/module/calender/ui/navbar_create_division_calender.tsx

@@ -108,7 +108,10 @@ export default function NavbarCreateDivisionCalender() {
             placeholder="Nama Acara"
             label="Nama Acara"
             value={isData.title}
-            onChange={(event) => setData({ ...isData, title: event.target.value })}
+            onChange={(event) => {
+              setData({ ...isData, title: event.target.value })
+              setTouched({ ...touched, title: false })
+            }}
             onBlur={() => setTouched({ ...touched, title: true })}
             error={
               touched.title && (
@@ -129,6 +132,7 @@ export default function NavbarCreateDivisionCalender() {
             onChange={(val) => {
               setValue(val);
               setData({ ...isData, dateStart: moment(val).format("YYYY-MM-DD") });
+              setTouched({ ...touched, dateStart: false });
             }}
             placeholder="Input Tanggal"
             label="Tanggal"
@@ -215,8 +219,10 @@ export default function NavbarCreateDivisionCalender() {
               { value: '5', label: 'Tahunan' },
             ]}
             value={isData.repeatEventTyper}
-            onChange={(val: any) =>
+            onChange={(val: any) => {
               setData({ ...isData, repeatEventTyper: val })
+              setTouched({ ...touched, repeatEventTyper: false })
+            }
             }
             onBlur={() => setTouched({ ...touched, repeatEventTyper: true })}
             error={

src/module/calender/ui/update_division_calender.tsx

@@ -104,11 +104,16 @@ export default function UpdateDivisionCalender() {
                   ...isDataCalender,
                   title: event.target.value
                 })
+                setTouched({ ...touched, title: false })
               }
             }
             onBlur={() => setTouched({ ...touched, title: true })}
             required
-            error={touched.title && !isDataCalender?.title ? "Nama Acara Tidak Boleh Kosong" : null}
+            error={
+              touched.title && (
+                isDataCalender?.title == "" ? "Nama Acara Tidak Boleh Kosong" : null
+              )
+            }
           />
           <DateInput
             styles={{
@@ -128,13 +133,18 @@ export default function UpdateDivisionCalender() {
                   ...isDataCalender,
                   dateStart: moment(val).format("YYYY-MM-DD")
                 })
+                setTouched({ ...touched, dateStart: false })
               }
             }
             placeholder="Input Tanggal"
             label="Tanggal"
             minDate={new Date()}
             onBlur={() => setTouched({ ...touched, dateStart: true })}
-            error={touched.dateStart && !isDataCalender?.dateStart ? "Tanggal Tidak Boleh Kosong" : null}
+            error={
+              touched.dateStart && (
+                isDataCalender?.dateStart == "" ? "Tanggal Tidak Boleh Kosong" : null
+              )
+            }
             required
           />
           <SimpleGrid
@@ -238,6 +248,7 @@ export default function UpdateDivisionCalender() {
                   ...isDataCalender,
                   repeatEventTyper: val
                 })
+                setTouched({ ...touched, repeatEventTyper: false })
               }
             }
             onBlur={() => setTouched({ ...touched, repeatEventTyper: true })}

src/module/document/ui/drawer_cut_documents.tsx

@@ -1,5 +1,5 @@
 import { WARNA } from '@/module/_global';
-import { Box, Breadcrumbs, Button, Divider, Flex, Grid, Group, Modal, Text, TextInput } from '@mantine/core';
+import { Box, Breadcrumbs, Button, Divider, Flex, Grid, Group, Modal, ScrollArea, Text, TextInput } from '@mantine/core';
 import React, { useState } from 'react';
 import toast from 'react-hot-toast';
 import { FcFolder } from 'react-icons/fc';
@@ -95,6 +95,10 @@ export default function DrawerCutDocuments({ category, onChoosePath, data }: { c
             }
           </Breadcrumbs>
         </Box>
+        <ScrollArea h={{
+          base: "55vh", xl: "58vh", md: "57vh",
+          sm: "58vh",
+        }} type="scroll" scrollbarSize={2} scrollHideDelay={0} scrollbars="y">
         {dataDocument.map((v, i) => {
           const found = data.some((i: any) => i.id == v.id)
           return (
@@ -128,6 +132,7 @@ export default function DrawerCutDocuments({ category, onChoosePath, data }: { c
             </Box>
           )
         })}
+        </ScrollArea>
       </Box>
 
 

src/module/home/components/chart_progress_tugas.tsx

@@ -16,7 +16,7 @@ export default function ChartProgressHome() {
    const loadData = () => {
       const option: EChartsOption = {
          title: {
-            text: "PROGRES PROYEK",
+            text: "PROGRES KEGIATAN",
             top: '2%',
             left: 'center',
             textStyle: {

src/module/home/components/features.tsx

@@ -39,7 +39,7 @@ export default function Features() {
               </ActionIcon>
             </Center>
             <Center>
-              <Text fz={15} c={WARNA.biruTua}>Proyek</Text>
+              <Text fz={15} c={WARNA.biruTua}>Kegiatan</Text>
             </Center>
           </Box>
           <Box onClick={() => router.push('/announcement')}>

src/module/home/components/list_divisi.tsx

@@ -42,7 +42,7 @@ export default function ListDivisi() {
                               </Box>
                            </Card.Section>
                            <Box pt={10} mih={150}>
-                              <Text fw={'bold'} fz={18}>PROYEK</Text>
+                              <Text fw={'bold'} fz={18}>KEGIATAN</Text>
                               <Text fw={'bolder'} ta={'center'} fz={70}>{v.total}</Text>
                            </Box>
                         </Card>

src/module/home/components/list_project.tsx

@@ -36,7 +36,7 @@ export default function ListProjects() {
    return (
       <>
          <Box pt={10}>
-            <Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Proyek Terbaru</Text>
+            <Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Kegiatan Terbaru</Text>
             <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
                {dataProject.map((v) =>
                   <Carousel.Slide key={v.id}>

src/module/home/view/view_detail_feature.tsx

@@ -42,7 +42,7 @@ export default function ViewDetailFeature() {
                 </ActionIcon>
               </Center>
               <Center>
-                <Text fz={15} c={WARNA.biruTua}>Proyek</Text>
+                <Text fz={15} c={WARNA.biruTua}>Kegiatan</Text>
               </Center>
             </Box>
             <Box onClick={() => router.push('/announcement')}>

src/module/home/view/view_home.tsx

@@ -17,7 +17,7 @@ export default function ViewHome() {
     <>
       <LayoutNavbarHome>
         <Group justify='space-between'>
-          <Text fw={'bold'} c={'white'} >Perbekal Darmasaba</Text>
+          <Text fw={'bold'} c={'white'} >Perbekel Darmasaba</Text>
           <IconNavbar />
         </Group>
       </LayoutNavbarHome>

src/module/position/ui/drawer_detail_position.tsx

@@ -141,7 +141,7 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
          </Stack>
 
          <LayoutDrawer opened={openDrawerGroup} onClose={() => setOpenDrawerGroup(false)} title={'Edit Jabatan'} size="lg">
-            <Box pt={10}>
+            <Box pt={10} pos={"relative"} h={"70vh"}>
                <Select
                   label="Grup"
                   placeholder="Pilih grup"
@@ -202,7 +202,7 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
                   radius={10}
                   placeholder="Nama Jabatan"
                />
-               <Box mt={'xl'}>
+               <Box pos={"absolute"} bottom={10} left={0} right={0}>
                   <Button
                      c={"white"}
                      bg={WARNA.biruTua}

src/module/position/ui/drawer_list_position.tsx

@@ -89,7 +89,7 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
             </SimpleGrid>
          </Stack>
          <LayoutDrawer opened={openDrawerGroup} onClose={() => setOpenDrawerGroup(false)} title={'Tambah Jabatan'} size="lg">
-            <Box pt={0}>
+            <Box pt={10} pos={"relative"} h={"70vh"}>
                <Select
                   label="Grup"
                   placeholder="Pilih grup"
@@ -156,7 +156,7 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
                   onBlur={() => setTouched({ ...touched, name: true })}
                   required
                />
-               <Box mt={'xl'}>
+               <Box pos={"absolute"} bottom={10} left={0} right={0}>
                   <Button
                      c={"white"}
                      bg={WARNA.biruTua}

src/module/project/components/detail_project/detail_project.tsx

@@ -61,7 +61,7 @@ export default function DetailProject() {
     <Box>
       <LayoutNavbarNew
         back=""
-        title="Proyek Desa Maju"
+        title="Kegiatan Desa Maju"
         menu={
           <ActionIcon
             variant="light"
@@ -98,7 +98,7 @@ export default function DetailProject() {
               </Grid.Col>
               <Grid.Col span={9}>
                 <Box>
-                  <Text>Kemajuan Proyek 60%</Text>
+                  <Text>Kemajuan Kegiatan 60%</Text>
                   <Progress
                     style={{
                       border: `1px solid ${"#BDBDBD"}`,

src/module/project/components/detail_project/update_progres.tsx

@@ -200,7 +200,7 @@ export default function UpdateProgres({ searchParams }: { searchParams: any }) {
             >
               <Group>
                 <BsFiletypeCsv size={25} />
-                <Text>Proyek Laporan Permasyarakatan</Text>
+                <Text>Kegiatan Laporan Permasyarakatan</Text>
               </Group>
             </Box>
             <Box
@@ -212,7 +212,7 @@ export default function UpdateProgres({ searchParams }: { searchParams: any }) {
             >
               <Group>
                 <BsFiletypeCsv size={25} />
-                <Text>Proyek Laporan Permasyarakatan</Text>
+                <Text>Kegiatan Laporan Permasyarakatan</Text>
               </Group>
             </Box>
           </Box>

src/module/project/components/project_cencel.tsx

@@ -82,7 +82,7 @@ export default function ProjectCencel() {
         </Grid>
         <Box pt={20}>
           <Box bg={"#DCEED8"} p={10} style={{ borderRadius: 10 }}>
-            <Text fw={'bold'} c={WARNA.biruTua}>Total Proyek</Text>
+            <Text fw={'bold'} c={WARNA.biruTua}>Total Kegiatan</Text>
             <Flex justify={'center'} align={'center'} h={'100%'}>
               <Text fz={40} fw={'bold'} c={WARNA.biruTua}>35</Text>
             </Flex>

src/module/project/components/project_done.tsx

@@ -82,7 +82,7 @@ export default function ProjectDone() {
         </Grid>
         <Box pt={20}>
           <Box bg={"#DCEED8"} p={10} style={{ borderRadius: 10 }}>
-            <Text fw={'bold'} c={WARNA.biruTua}>Total Proyek</Text>
+            <Text fw={'bold'} c={WARNA.biruTua}>Total Kegiatan</Text>
             <Flex justify={'center'} align={'center'} h={'100%'}>
               <Text fz={40} fw={'bold'} c={WARNA.biruTua}>35</Text>
             </Flex>

src/module/project/components/project_process.tsx

@@ -82,7 +82,7 @@ export default function ProjectProcess() {
         </Grid>
         <Box pt={20}>
           <Box bg={"#DCEED8"} p={10} style={{ borderRadius: 10 }}>
-            <Text fw={'bold'} c={WARNA.biruTua}>Total Proyek</Text>
+            <Text fw={'bold'} c={WARNA.biruTua}>Total Kegiatan</Text>
             <Flex justify={'center'} align={'center'} h={'100%'}>
               <Text fz={40} fw={'bold'} c={WARNA.biruTua}>35</Text>
             </Flex>

src/module/project/components/ui/drawer_project.tsx

@@ -16,7 +16,7 @@ export default function DrawerProject() {
               <IoAddCircle size={30} color={WARNA.biruTua} />
             </Box>
             <Box>
-              <Text c={WARNA.biruTua}>Tambah Proyek</Text>
+              <Text c={WARNA.biruTua}>Tambah Kegiatan</Text>
             </Box>
           </Flex>
           <Flex onClick={() => window.location.href = "/project?cat=filter"} justify={'center'} align={'center'} direction={'column'} >

src/module/project/components/ui/navbar_project.tsx

@@ -59,7 +59,7 @@ export default function NavbarProject() {
 
   return (
     <Box>
-      <LayoutNavbarNew back='/home' title='proyek'
+      <LayoutNavbarNew back='/home' title='Kegiatan'
         menu={<ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
           <HiMenu size={20} color='white' />
         </ActionIcon>} />

src/module/project/lib/api_project.ts

@@ -8,7 +8,7 @@ export const funGetAllProject = async (path?: string) => {
 
 export const funCreateProject = async (data: IFormProject) => {
     if (data.title.length < 3)
-        return { success: false, message: 'Nama proyek minimal 3 karakter' }
+        return { success: false, message: 'Nama Kegiatan minimal 3 karakter' }
     
     const response = await fetch(`/api/project`, {
         method: "POST",

src/module/project/ui/add_detail_task_project.tsx

@@ -3,131 +3,145 @@ import { useParams, useRouter } from 'next/navigation';
 import React, { useState } from 'react';
 import toast from 'react-hot-toast';
 import { funCreateDetailProject } from '../lib/api_project';
-import { Box, Button, Group, Input, SimpleGrid, Stack, Text } from '@mantine/core';
+import { Box, Button, Group, Input, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
 import { LayoutNavbarNew, WARNA } from '@/module/_global';
 import { DatePicker } from '@mantine/dates';
 import moment from 'moment';
 import LayoutModal from '@/module/_global/layout/layout_modal';
 
 export default function AddDetailTaskProject() {
-  const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
+   const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
-  const router = useRouter()
+   const router = useRouter()
-  const [name, setName] = useState("")
+   const [name, setName] = useState("")
-  const [openModal, setOpenModal] = useState(false)
+   const [openModal, setOpenModal] = useState(false)
-  const param = useParams<{ id: string }>()
+   const param = useParams<{ id: string }>()
+   const [touched, setTouched] = useState({
+      name: false,
+   });
 
-  function onVerification() {
+   function onVerification() {
-    if (value[0] == null || value[1] == null)
+      if (value[0] == null || value[1] == null)
-       return toast.error("Error! harus memilih tanggal")
+         return toast.error("Error! harus memilih tanggal")
 
-    if (name == "")
+      if (name == "")
-       return toast.error("Error! harus memasukkan judul tugas")
+         return toast.error("Error! harus memasukkan judul tugas")
 
-    setOpenModal(true)
+      setOpenModal(true)
-  }
+   }
-  
-  async function onSubmit() {
-    try {
-      const res = await funCreateDetailProject(param.id, {
-        name,
-        dateStart: (value[0] != null) ? value[0] : new Date,
-        dateEnd: (value[1] != null) ? value[1] : new Date,
-      })
 
-      if (res.success) {
+   async function onSubmit() {
-        toast.success(res.message)
+      try {
-        setOpenModal(false)
+         const res = await funCreateDetailProject(param.id, {
-        router.push(`/project/${param.id}`)
+            name,
-      } else {
+            dateStart: (value[0] != null) ? value[0] : new Date,
-        toast.error(res.message)
+            dateEnd: (value[1] != null) ? value[1] : new Date,
+         })
+
+         if (res.success) {
+            toast.success(res.message)
+            setOpenModal(false)
+            router.push(`/project/${param.id}`)
+         } else {
+            toast.error(res.message)
+         }
+      } catch (error) {
+         console.log(error)
+         toast.error("Gagal menambahkan tugas, coba lagi nanti")
       }
-    } catch (error) {
+   }
-      console.log(error)
-      toast.error("Gagal menambahkan tugas, coba lagi nanti")
-    }
-  }
 
-  return (
+   return (
-    <Box>
+      <Box>
-    <LayoutNavbarNew back="" title={"Tambah Proyek"} menu />
+         <LayoutNavbarNew back="" title={"Tambah Kegiatan"} menu />
-    <Box p={20}>
+         <Box p={20}>
-       <Group
+            <Group
-          justify="center"
+               justify="center"
-          bg={"white"}
+               bg={"white"}
-          py={20}
+               py={20}
-          style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
+               style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
-       >
+            >
-          <DatePicker
+               <DatePicker
-             styles={{}}
+                  styles={{}}
-             type="range"
+                  type="range"
-             value={value}
+                  value={value}
-             onChange={setValue}
+                  onChange={setValue}
-             size="md"
+                  size="md"
-             c={WARNA.biruTua}
+                  c={WARNA.biruTua}
-          />
+               />
-       </Group>
+            </Group>
-       <SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
+            <SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
-          <Box>
+               <Box>
-             <Text>Tanggal Mulai</Text>
+                  <Text>Tanggal Mulai</Text>
-             <Group
+                  <Group
-                justify="center"
+                     justify="center"
-                bg={"white"}
+                     bg={"white"}
-                h={45}
+                     h={45}
-                style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
+                     style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
-             >
+                  >
-                <Text>{value[0] ? `${moment(value[0]).format('DD-MM-YYYY')}` : ""}</Text>
+                     <Text>{value[0] ? `${moment(value[0]).format('DD-MM-YYYY')}` : ""}</Text>
-             </Group>
+                  </Group>
-          </Box>
+               </Box>
-          <Box>
+               <Box>
-             <Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
+                  <Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
-             <Group
+                  <Group
-                justify="center"
+                     justify="center"
-                bg={"white"}
+                     bg={"white"}
-                h={45}
+                     h={45}
-                style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
+                     style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
-             >
+                  >
-                <Text>{value[1] ? `${moment(value[1]).format('DD-MM-YYYY')}` : ""}</Text>
+                     <Text>{value[1] ? `${moment(value[1]).format('DD-MM-YYYY')}` : ""}</Text>
-             </Group>
+                  </Group>
-          </Box>
+               </Box>
-       </SimpleGrid>
+            </SimpleGrid>
-       <Stack pt={15}>
+            <Stack pt={15}>
-          <Input
+               <TextInput
-             styles={{
+                  styles={{
-                input: {
+                     input: {
-                   border: `1px solid ${"#D6D8F6"}`,
+                        border: `1px solid ${"#D6D8F6"}`,
-                   borderRadius: 10,
+                        borderRadius: 10,
-                },
+                     },
-             }}
+                  }}
-             placeholder="Input Nama Tahapan"
+                  placeholder="Input Nama Tahapan"
-             size="md"
+                  label="Judul Tahapan"
-             value={name}
+                  required
-             onChange={(e) => setName(e.target.value)}
+                  size="md"
-          />
+                  value={name}
-       </Stack>
+                  onChange={(e) => {
-       <Box mt={"xl"}>
+                     setName(e.target.value)
-          <Button
+                     setTouched({ ...touched, name: false })
-             c={"white"}
+                  }}
-             bg={WARNA.biruTua}
+                  onBlur={() => setTouched({ ...touched, name: true })}
-             size="lg"
+                  error={
-             radius={30}
+                     touched.name && (
-             fullWidth
+                        name == "" ? "Judul Tidak Boleh Kosong" : null
-             onClick={() => { onVerification() }}
+                     )
-          >
+                  }
-             Simpan
+               />
-          </Button>
+            </Stack>
-       </Box>
+            <Box mt={"xl"}>
-    </Box>
+               <Button
+                  c={"white"}
+                  bg={WARNA.biruTua}
+                  size="lg"
+                  radius={30}
+                  fullWidth
+                  onClick={() => { onVerification() }}
+               >
+                  Simpan
+               </Button>
+            </Box>
+         </Box>
 
 
-    <LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
+         <LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
-       description="Apakah Anda yakin ingin menambahkan tugas?"
+            description="Apakah Anda yakin ingin menambahkan tugas?"
-       onYes={(val) => {
+            onYes={(val) => {
-          if (val) {
+               if (val) {
-             onSubmit()
+                  onSubmit()
-          }
+               }
-          setOpenModal(false)
+               setOpenModal(false)
-       }} />
+            }} />
- </Box>
+      </Box>
-  );
+   );
 }
 

src/module/project/ui/cancel_project.tsx

@@ -12,10 +12,13 @@ export default function CancelProject() {
   const [alasan, setAlasan] = useState("")
   const [openModal, setOpenModal] = useState(false)
   const param = useParams<{ id: string }>()
+  const [touched, setTouched] = useState({
+    reason: false,
+  });
 
   function onVerification() {
     if (alasan == "")
-      return toast.error("Error! harus memasukkan alasan pembatalan proyek")
+      return toast.error("Error! harus memasukkan alasan pembatalan Kegiatan")
 
     setOpenModal(true)
   }
@@ -31,13 +34,13 @@ export default function CancelProject() {
       }
     } catch (error) {
       console.log(error)
-      toast.error("Gagal membatalkan proyek, coba lagi nanti")
+      toast.error("Gagal membatalkan Kegiatan, coba lagi nanti")
     }
   }
 
   return (
-    <Box>
+    <Box pos={"relative"} h={"100vh"}>
-      <LayoutNavbarNew back="" title={"Pembatalan Proyek"} menu />
+      <LayoutNavbarNew back="" title={"Pembatalan Kegiatan"} menu />
       <Box p={20}>
         <Stack pt={15}>
           <Textarea styles={{
@@ -47,11 +50,20 @@ export default function CancelProject() {
             },
           }}
             value={alasan}
-            size="md" placeholder='Contoh : proyek tidak sesuai' label="Alasan Pembatalan"
+            size="md" placeholder='Contoh : Kegiatan tidak sesuai' label="Alasan Pembatalan"
-            onChange={(event) => setAlasan(event.target.value)}
+            onChange={(event) => {
+              setAlasan(event.target.value)
+              setTouched({ ...touched, reason: false })
+            }}
+            error={
+              touched.reason && (
+                alasan == "" ? "Alasan Tidak Boleh Kosong" : null
+              )
+            }
+            onBlur={() => setTouched({ ...touched, reason: true })}
           />
         </Stack>
-        <Box mt={"xl"}>
+        <Box pos={"absolute"} bottom={10} left={0} right={0} p={20}>
           <Button
             c={"white"}
             bg={WARNA.biruTua}
@@ -67,7 +79,7 @@ export default function CancelProject() {
 
 
       <LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
-        description="Apakah Anda yakin ingin membatalkan proyek ini? Pembatalan proyek bersifat permanen"
+        description="Apakah Anda yakin ingin membatalkan Kegiatan ini? Pembatalan Kegiatan bersifat permanen"
         onYes={(val) => {
           if (val) {
             onSubmit()

src/module/project/ui/create_date_end_task.tsx

@@ -10,6 +10,7 @@ import {
   SimpleGrid,
   Stack,
   Text,
+  TextInput,
 } from "@mantine/core";
 import React, { useState } from "react";
 import { DatePicker } from "@mantine/dates";
@@ -23,6 +24,9 @@ export default function ViewDateEndTask({ onClose }: { onClose: (val: IFormDateP
   const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
   const router = useRouter()
   const [title, setTitle] = useState("")
+  const [touched, setTouched] = useState({
+    title: false
+  });
 
   function onSubmit() {
     if (value[0] == null || value[1] == null)
@@ -85,7 +89,7 @@ export default function ViewDateEndTask({ onClose }: { onClose: (val: IFormDateP
           </Box>
         </SimpleGrid>
         <Stack pt={15}>
-          <Input
+          <TextInput
             styles={{
               input: {
                 border: `1px solid ${"#D6D8F6"}`,
@@ -93,9 +97,20 @@ export default function ViewDateEndTask({ onClose }: { onClose: (val: IFormDateP
               },
             }}
             placeholder="Input Nama Tahapan"
+            label="Judul Tahapan"
+            required
             size="md"
             value={title}
-            onChange={(e) => setTitle(e.target.value)}
+            onChange={(e) => {
+              setTitle(e.target.value)
+              setTouched({ ...touched, title: false })
+            }}
+            onBlur={() => setTouched({ ...touched, title: true })}
+            error={
+              touched.title && (
+                title == "" ? "Judul Tidak Boleh Kosong" : null
+              )
+            }
           />
         </Stack>
         <Box mt={"xl"}>

src/module/project/ui/create_project.tsx

@@ -125,7 +125,7 @@ export default function CreateProject() {
 
   return (
     <Box>
-      <LayoutNavbarNew back="/project" title="tambah proyek" menu />
+      <LayoutNavbarNew back="/project" title="tambah Kegiatan" menu />
       <Box p={20}>
         <Stack>
           {
@@ -156,7 +156,7 @@ export default function CreateProject() {
             )
           }
           <TextInput
-            label="Proyek"
+            label="Kegiatan"
             styles={{
               input: {
                 border: `1px solid ${"#D6D8F6"}`,
@@ -164,14 +164,17 @@ export default function CreateProject() {
               },
             }}
             required withAsterisk
-            placeholder="Nama Proyek"
+            placeholder="Nama Kegiatan"
             size="md"
             value={body.title}
-            onChange={(e) => setBody({ ...body, title: e.target.value })}
+            onChange={(e) => {
+              setBody({ ...body, title: e.target.value })
+              setTouched({ ...touched, title: false })
+            }}
             onBlur={() => setTouched({ ...touched, title: true })}
             error={
               touched.title && (
-                body.title == "" ? "Proyek Tidak Boleh Kosong" : null
+                body.title == "" ? "Kegiatan Tidak Boleh Kosong" : null
               )
             }
           />
@@ -304,7 +307,22 @@ export default function CreateProject() {
         }
 
         <Box mt="xl">
-          <Button color="white" bg={WARNA.biruTua} size="lg" radius={30} fullWidth onClick={() => setModal(true)}>
+          <Button
+            color="white"
+            bg={WARNA.biruTua}
+            size="lg"
+            radius={30}
+            fullWidth
+            onClick={() => {
+              if (
+                body.title !== "" &&
+                body.idGroup !== ""
+              ) {
+                setModal(true)
+              } else {
+                toast.error("Mohon lengkapi data terlebih dahulu");
+              }
+            }}>
             Simpan
           </Button>
         </Box>

src/module/project/ui/edit_detail_task_project.tsx

@@ -5,144 +5,163 @@ import toast from 'react-hot-toast';
 import { funEditDetailProject, funGetDetailProject } from '../lib/api_project';
 import moment from 'moment';
 import { useShallowEffect } from '@mantine/hooks';
-import { Box, Button, Group, Input, SimpleGrid, Stack, Text } from '@mantine/core';
+import { Box, Button, Group, Input, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
 import { LayoutNavbarNew, WARNA } from '@/module/_global';
 import { DatePicker } from '@mantine/dates';
 import LayoutModal from '@/module/_global/layout/layout_modal';
 
 export default function EditDetailTaskProject() {
-  const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
+   const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
-  const [name, setName] = useState("")
+   const [name, setName] = useState("")
-  const param = useParams<{ id: string}>()
+   const param = useParams<{ id: string }>()
-  const [openModal, setOpenModal] = useState(false)
+   const [openModal, setOpenModal] = useState(false)
+   const [touched, setTouched] = useState({
+      title: false,
+   });
 
-  async function onSubmit() {
+   async function onSubmit() {
-    if (value[0] == null || value[1] == null)
+      if (value[0] == null || value[1] == null)
-      return toast.error("Error! harus memilih tanggal")
+         return toast.error("Error! harus memilih tanggal")
 
-    if (name == "")
+      if (name == "")
-      return toast.error("Error! harus memasukkan judul tugas")
+         return toast.error("Error! harus memasukkan judul tugas")
 
-    try {
+      try {
-      const res = await funEditDetailProject(param.id, {
+         const res = await funEditDetailProject(param.id, {
-        title: name,
+            title: name,
-        dateStart: value[0],
+            dateStart: value[0],
-        dateEnd: value[1],
+            dateEnd: value[1],
 
-      })
+         })
 
-      if (res.success) {
+         if (res.success) {
-        toast.success(res.message);
+            toast.success(res.message);
-      } else {
+         } else {
-        toast.error(res.message);
+            toast.error(res.message);
+         }
+      } catch (error) {
+         console.error(error);
+         toast.error("Gagal edit detail tugas Kegiatan, coba lagi nanti");
       }
-    } catch (error) {
+   }
-      console.error(error);
-      toast.error("Gagal edit detail tugas proyek, coba lagi nanti");
-    }
-  }
 
-  async function getOneData() {
+   async function getOneData() {
-    try {
+      try {
-      const res = await funGetDetailProject(param.id);
+         const res = await funGetDetailProject(param.id);
-      if (res.success) {
+         if (res.success) {
-        setName(res.data.title)
+            setName(res.data.title)
-        setValue([
+            setValue([
-          new Date(moment(res.data.dateStart).format('YYYY-MM-DD')),
+               new Date(moment(res.data.dateStart).format('YYYY-MM-DD')),
-          new Date(moment(res.data.dateEnd).format('YYYY-MM-DD')),
+               new Date(moment(res.data.dateEnd).format('YYYY-MM-DD')),
-        ])
+            ])
-      } else {
+         } else {
-        toast.error(res.message);
+            toast.error(res.message);
+         }
+      } catch (error) {
+         console.error(error);
+         toast.error("Gagal mendapatkan detail tugas Kegiatan, coba lagi nanti");
       }
-    } catch (error) {
+   }
-      console.error(error);
-      toast.error("Gagal mendapatkan detail tugas proyek, coba lagi nanti");
-    }
-  }
 
-  useShallowEffect(() => {
+   useShallowEffect(() => {
-    getOneData();
+      getOneData();
-  }, [param.id])
+   }, [param.id])
 
-  return (
+   return (
-    <Box>
+      <Box>
-    <LayoutNavbarNew back="" title={"Edit Detail Proyek"} menu />
+         <LayoutNavbarNew back="" title={"Edit Detail Kegiatan"} menu />
-    <Box p={20}>
+         <Box p={20}>
-       <Group
+            <Group
-          justify="center"
+               justify="center"
-          bg={"white"}
+               bg={"white"}
-          py={20}
+               py={20}
-          style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
+               style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
-       >
+            >
-          <DatePicker
+               <DatePicker
-             styles={{}}
+                  styles={{}}
-             type="range"
+                  type="range"
-             value={value}
+                  value={value}
-             onChange={setValue}
+                  onChange={setValue}
-             size="md"
+                  size="md"
-             c={WARNA.biruTua}
+                  c={WARNA.biruTua}
-          />
+               />
-       </Group>
+            </Group>
-       <SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
+            <SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
-          <Box>
+               <Box>
-             <Text>Tanggal Mulai</Text>
+                  <Text>Tanggal Mulai</Text>
-             <Group
+                  <Group
-                justify="center"
+                     justify="center"
-                bg={"white"}
+                     bg={"white"}
-                h={45}
+                     h={45}
-                style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
+                     style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
-             >
+                  >
-                <Text>{value[0] ? `${moment(value[0]).format('DD-MM-YYYY')}` : ""}</Text>
+                     <Text>{value[0] ? `${moment(value[0]).format('DD-MM-YYYY')}` : ""}</Text>
-             </Group>
+                  </Group>
-          </Box>
+               </Box>
-          <Box>
+               <Box>
-             <Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
+                  <Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
-             <Group
+                  <Group
-                justify="center"
+                     justify="center"
-                bg={"white"}
+                     bg={"white"}
-                h={45}
+                     h={45}
-                style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
+                     style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
-             >
+                  >
-                <Text>{value[1] ? `${moment(value[1]).format('DD-MM-YYYY')}` : ""}</Text>
+                     <Text>{value[1] ? `${moment(value[1]).format('DD-MM-YYYY')}` : ""}</Text>
-             </Group>
+                  </Group>
-          </Box>
+               </Box>
-       </SimpleGrid>
+            </SimpleGrid>
-       <Stack pt={15}>
+            <Stack pt={15}>
-          <Input
+               <TextInput
-             styles={{
+                  styles={{
-                input: {
+                     input: {
-                   border: `1px solid ${"#D6D8F6"}`,
+                        border: `1px solid ${"#D6D8F6"}`,
-                   borderRadius: 10,
+                        borderRadius: 10,
-                },
+                     },
-             }}
+                  }}
-             placeholder="Input Nama Tahapan"
+                  placeholder="Input Nama Tahapan"
-             size="md"
+                  label="Judul Tahapan"
-             value={name}
+                  required
-             onChange={(e) => { setName(e.target.value) }}
+                  size="md"
-          />
+                  value={name}
-       </Stack>
+                  onChange={(e) => { setName(e.target.value) }}
-       <Box mt={"xl"}>
+                  onBlur={() => setTouched({ ...touched, title: true })}
-          <Button
+                  error={
-             c={"white"}
+                     touched.title && (
-             bg={WARNA.biruTua}
+                       name == "" ? "Judul Tidak Boleh Kosong" : null
-             size="lg"
+                     )
-             radius={30}
+                   }
-             fullWidth
+               />
-             onClick={() => { setOpenModal(true) }}
+            </Stack>
-          >
+            <Box mt={"xl"}>
-             Simpan
+               <Button
-          </Button>
+                  c={"white"}
-       </Box>
+                  bg={WARNA.biruTua}
-    </Box>
+                  size="lg"
+                  radius={30}
+                  fullWidth
+                  onClick={() => {
+                     if (
+                       name !== ""
+                     ) {
+                        setOpenModal(true)
+                     } else {
+                        toast.error("Judul Tidak Boleh Kosong")
+                     }
+                   }}
+               >
+                  Simpan
+               </Button>
+            </Box>
+         </Box>
 
-    <LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
+         <LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
-       description="Apakah Anda yakin ingin mengubah data?"
+            description="Apakah Anda yakin ingin mengubah data?"
-       onYes={(val) => {
+            onYes={(val) => {
-          if (val) {
+               if (val) {
-             onSubmit()
+                  onSubmit()
-          }
+               }
-          setOpenModal(false)
+               setOpenModal(false)
-       }} />
+            }} />
- </Box>
+      </Box>
-  );
+   );
 }

src/module/project/ui/edit_task_project.tsx

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import toast from 'react-hot-toast';
 import { funEditProject, funGetOneProjectById } from '../lib/api_project';
 import { useShallowEffect } from '@mantine/hooks';
-import { Box, Button, Input, Stack } from '@mantine/core';
+import { Box, Button, Input, Stack, TextInput } from '@mantine/core';
 import { LayoutNavbarNew, WARNA } from '@/module/_global';
 import LayoutModal from '@/module/_global/layout/layout_modal';
 
@@ -13,6 +13,9 @@ export default function EditTaskProject() {
   const [name, setName] = useState("")
   const [openModal, setOpenModal] = useState(false)
   const param = useParams<{ id: string }>()
+  const [touched, setTouched] = useState({
+    name: false,
+ });
 
   function onVerification() {
     if (name == "")
@@ -32,7 +35,7 @@ export default function EditTaskProject() {
       }
     } catch (error) {
       console.log(error)
-      toast.error("Gagal mengedit proyek, coba lagi nanti")
+      toast.error("Gagal mengedit Kegiatan, coba lagi nanti")
     }
   }
 
@@ -47,7 +50,7 @@ export default function EditTaskProject() {
 
     } catch (error) {
       console.error(error);
-      toast.error("Gagal mendapatkan data proyek, coba lagi nanti");
+      toast.error("Gagal mendapatkan data Kegiatan, coba lagi nanti");
     }
   }
 
@@ -56,11 +59,11 @@ export default function EditTaskProject() {
   }, [param.id])
 
   return (
-    <Box>
+    <Box pos={"relative"} h={"100vh"}>
-      <LayoutNavbarNew back="" title={"Edit Judul Proyek"} menu />
+      <LayoutNavbarNew back="" title={"Edit Judul Kegiatan"} menu />
       <Box p={20}>
         <Stack pt={15}>
-          <Input
+          <TextInput
             styles={{
               input: {
                 border: `1px solid ${"#D6D8F6"}`,
@@ -68,12 +71,22 @@ export default function EditTaskProject() {
               },
             }}
             placeholder="Tugas"
+            required
             size="md"
             value={name}
-            onChange={(e) => { setName(e.target.value) }}
+            onChange={(e) => {
+              setName(e.target.value)
+              setTouched({ ...touched, name: false })
+             }}
+            error={
+              touched.name && (
+                 name == "" ? "Judul Tidak Boleh Kosong" : null
+              )
+           }
+            onBlur={() => setTouched({ ...touched, name: true })}
           />
         </Stack>
-        <Box mt={"xl"}>
+        <Box pos={"absolute"} bottom={10} left={0} right={0} p={20}>
           <Button
             c={"white"}
             bg={WARNA.biruTua}

src/module/project/ui/list_anggota_detail_project.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { LayoutDrawer, WARNA } from '@/module/_global';
+import { LayoutDrawer, SkeletonSingle, WARNA } from '@/module/_global';
 import { Avatar, Box, Flex, Group, SimpleGrid, Stack, Text } from '@mantine/core';
 import React, { useState } from 'react';
 import { funDeleteMemberProject, funGetOneProjectById } from '../lib/api_project';
@@ -33,7 +33,7 @@ export default function ListAnggotaDetailProject() {
 
     } catch (error) {
       console.error(error);
-      toast.error("Gagal mendapatkan member proyek, coba lagi nanti");
+      toast.error("Gagal mendapatkan member Kegiatan, coba lagi nanti");
     } finally {
       setLoading(false)
     }
@@ -56,7 +56,7 @@ export default function ListAnggotaDetailProject() {
       }
     } catch (error) {
       console.error(error);
-      toast.error("Gagal menghapus anggota proyek, coba lagi nanti");
+      toast.error("Gagal menghapus anggota Kegiatan, coba lagi nanti");
     }
   }
 
@@ -77,7 +77,15 @@ export default function ListAnggotaDetailProject() {
             py={10}
           >
             {
-              loading ? <Text>loading</Text> :
+              loading ?
+                Array(6)
+                  .fill(null)
+                  .map((_, i) => (
+                    <Box key={i}>
+                      <SkeletonSingle />
+                    </Box>
+                  ))
+                :
                 isData.length === 0 ? <Text>Tidak ada anggota</Text> :
                   isData.map((v, i) => {
                     return (
@@ -113,41 +121,41 @@ export default function ListAnggotaDetailProject() {
       </Box>
 
       <LayoutDrawer opened={openDrawer} title={dataChoose.name} onClose={() => setOpenDrawer(false)}>
-            <Box>
+        <Box>
-               <Stack pt={10}>
+          <Stack pt={10}>
-                  <SimpleGrid
+            <SimpleGrid
-                     cols={{ base: 3, sm: 3, lg: 3 }}
+              cols={{ base: 3, sm: 3, lg: 3 }}
-                  >
+            >
-                     <Flex onClick={() => { router.push('/member/' + dataChoose.id) }} justify={'center'} align={'center'} direction={'column'} >
+              <Flex onClick={() => { router.push('/member/' + dataChoose.id) }} justify={'center'} align={'center'} direction={'column'} >
-                        <Box>
+                <Box>
-                           <FaUser size={30} color={WARNA.biruTua} />
+                  <FaUser size={30} color={WARNA.biruTua} />
-                        </Box>
+                </Box>
-                        <Box>
+                <Box>
-                           <Text c={WARNA.biruTua}>Lihat profil</Text>
+                  <Text c={WARNA.biruTua}>Lihat profil</Text>
-                        </Box>
+                </Box>
-                     </Flex>
+              </Flex>
 
-                     <Flex onClick={() => { setOpenModal(true) }} justify={'center'} align={'center'} direction={'column'} >
+              <Flex onClick={() => { setOpenModal(true) }} justify={'center'} align={'center'} direction={'column'} >
-                        <Box>
+                <Box>
-                           <IoIosCloseCircle size={30} color={WARNA.biruTua} />
+                  <IoIosCloseCircle size={30} color={WARNA.biruTua} />
-                        </Box>
+                </Box>
-                        <Box>
+                <Box>
-                           <Text c={WARNA.biruTua}>Keluarkan anggota</Text>
+                  <Text c={WARNA.biruTua}>Keluarkan anggota</Text>
-                        </Box>
+                </Box>
-                     </Flex>
+              </Flex>
-                  </SimpleGrid>
+            </SimpleGrid>
-               </Stack>
+          </Stack>
-            </Box>
+        </Box>
-         </LayoutDrawer>
+      </LayoutDrawer>
 
-         <LayoutModal opened={isOpenModal} onClose={() => setOpenModal(false)}
+      <LayoutModal opened={isOpenModal} onClose={() => setOpenModal(false)}
-            description="Apakah Anda yakin ingin mengeluarkan anggota?"
+        description="Apakah Anda yakin ingin mengeluarkan anggota?"
-            onYes={(val) => {
+        onYes={(val) => {
-               if (val) {
+          if (val) {
-                  onSubmit()
+            onSubmit()
-               }
+          }
-               setOpenModal(false)
+          setOpenModal(false)
-            }} />
+        }} />
 
     </Box>
   );

src/module/project/ui/list_file_detail_project.tsx

@@ -1,6 +1,6 @@
 'use client'
 import { WARNA } from '@/module/_global';
-import { Box, Group, Text } from '@mantine/core';
+import { Box, Group, Skeleton, Text } from '@mantine/core';
 import React, { useState } from 'react';
 import toast from 'react-hot-toast';
 import { funGetOneProjectById } from '../lib/api_project';
@@ -26,7 +26,7 @@ export default function ListFileDetailProject() {
 
     } catch (error) {
       console.error(error);
-      toast.error("Gagal mendapatkan file proyek, coba lagi nanti");
+      toast.error("Gagal mendapatkan file Kegiatan, coba lagi nanti");
     } finally {
       setLoading(false)
     }
@@ -47,7 +47,18 @@ export default function ListFileDetailProject() {
         }}>
           {
 
-            loading ? <Text>loading</Text> :
+            loading ?
+              Array(1)
+                .fill(null)
+                .map((_, i) => (
+                  <Box key={i} mb={10}>
+                    <Group>
+                      <Skeleton width={30} height={30} radius={"md"} />
+                      <Skeleton width={"50%"} height={30} radius={"md"} />
+                    </Group>
+                  </Box>
+                ))
+              :
               isData.length === 0 ? <Text>Tidak ada file</Text> :
                 isData.map((item, index) => {
                   return (

src/module/project/ui/list_project.tsx

@@ -35,7 +35,7 @@ export default function ListProject() {
 
       setLoading(false);
     } catch (error) {
-      toast.error("Gagal mendapatkan proyek, coba lagi nanti");
+      toast.error("Gagal mendapatkan Kegiatan, coba lagi nanti");
       console.error(error);
     } finally {
       setLoading(false);
@@ -83,7 +83,7 @@ export default function ListProject() {
       </Grid>
       <Box pt={20}>
         <Box bg={"#DCEED8"} p={10} style={{ borderRadius: 10 }}>
-          <Text fw={'bold'} c={WARNA.biruTua}>Total Proyek</Text>
+          <Text fw={'bold'} c={WARNA.biruTua}>Total Kegiatan</Text>
           <Flex justify={'center'} align={'center'} h={'100%'}>
             <Text fz={40} fw={'bold'} c={WARNA.biruTua}>{isData.length}</Text>
           </Flex>

src/module/project/ui/list_tugas_detail_project.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { LayoutDrawer, WARNA } from '@/module/_global';
+import { LayoutDrawer, SkeletonDetailListTugasTask, WARNA } from '@/module/_global';
 import { Box, Center, Checkbox, Divider, Flex, Grid, Group, SimpleGrid, Stack, Text } from '@mantine/core';
 import React, { useState } from 'react';
 import toast from 'react-hot-toast';
@@ -37,7 +37,7 @@ export default function ListTugasDetailProject() {
 
     } catch (error) {
       console.error(error);
-      toast.error("Gagal mendapatkan list tugas proyek, coba lagi nanti");
+      toast.error("Gagal mendapatkan list tugas Kegiatan, coba lagi nanti");
     } finally {
       setLoading(false)
     }
@@ -61,7 +61,7 @@ export default function ListTugasDetailProject() {
       }
     } catch (error) {
       console.error(error);
-      toast.error("Gagal hapus tugas proyek, coba lagi nanti");
+      toast.error("Gagal hapus tugas Kegiatan, coba lagi nanti");
     }
   }
 
@@ -80,7 +80,7 @@ export default function ListTugasDetailProject() {
       }
     } catch (error) {
       console.error(error);
-      toast.error("Gagal update status tugas proyek, coba lagi nanti");
+      toast.error("Gagal update status tugas Kegiatan, coba lagi nanti");
     }
   }
 
@@ -99,7 +99,9 @@ export default function ListTugasDetailProject() {
           }}
         >
           {
-            loading ? <Text>loading</Text> :
+            loading ? <>
+              <SkeletonDetailListTugasTask />
+            </> :
               isData.length === 0 ? <Text>Tidak ada tugas</Text> :
                 isData.map((item, index) => {
                   return (
@@ -163,7 +165,10 @@ export default function ListTugasDetailProject() {
                           </Box>
                         </Grid.Col>
                       </Grid>
-                      <Divider my={"lg"} />
+                      {isData.length >= 1
+                        ? "" :
+                        <Divider my={"lg"} />
+                      }
                     </Box>
                   )
                 })
@@ -207,7 +212,7 @@ export default function ListTugasDetailProject() {
         </LayoutDrawer>
 
         <LayoutModal opened={isOpenModal} onClose={() => setOpenModal(false)}
-          description="Apakah Anda yakin ingin menghapus proyek ini?"
+          description="Apakah Anda yakin ingin menghapus Kegiatan ini?"
           onYes={(val) => {
             if (val) {
               onDelete()

src/module/project/ui/menu_drawer_project.tsx

@@ -16,7 +16,7 @@ export default function MenuDrawerProject() {
               <IoAddCircle size={30} color={WARNA.biruTua} />
             </Box>
             <Box>
-              <Text c={WARNA.biruTua}>Tambah Proyek</Text>
+              <Text c={WARNA.biruTua}>Tambah Kegiatan</Text>
             </Box>
           </Flex>
           <Flex onClick={() => window.location.href = "/project?cat=filter"} justify={'center'} align={'center'} direction={'column'} >

src/module/project/ui/navbar_detail_project.tsx

@@ -28,7 +28,7 @@ export default function NavbarDetailProject() {
 
     } catch (error) {
       console.error(error);
-      toast.error("Gagal mendapatkan data proyek, coba lagi nanti");
+      toast.error("Gagal mendapatkan data Kegiatan, coba lagi nanti");
     }
   }
 
@@ -38,7 +38,7 @@ export default function NavbarDetailProject() {
 
   return (
     <>
-      <LayoutNavbarNew back="" title={name} menu={
+      <LayoutNavbarNew back="/project?status=0" title={name} menu={
         <ActionIcon
           variant="light"
           bg={WARNA.bgIcon}

src/module/project/ui/progress_detail_project.tsx

@@ -1,7 +1,7 @@
 'use client'
 import { WARNA } from '@/module/_global';
 import { useHookstate } from '@hookstate/core';
-import { ActionIcon, Box, Grid, Progress, Text } from '@mantine/core';
+import { ActionIcon, Box, Grid, Progress, Skeleton, Text } from '@mantine/core';
 import { useParams } from 'next/navigation';
 import React, { useState } from 'react';
 import { HiMiniPresentationChartBar } from 'react-icons/hi2';
@@ -15,9 +15,11 @@ export default function ProgressDetailProject() {
   const [valLastUpdate, setValLastUpdate] = useState('')
   const param = useParams<{ id: string }>()
   const refresh = useHookstate(globalRefreshProject)
+  const [loading, setLoading] = useState(true)
 
   async function getOneData() {
     try {
+      setLoading(true)
       const res = await funGetOneProjectById(param.id, 'progress');
       if (res.success) {
         setValProgress(res.data.progress);
@@ -25,10 +27,12 @@ export default function ProgressDetailProject() {
       } else {
         toast.error(res.message);
       }
-
+      setLoading(false)
     } catch (error) {
       console.error(error);
-      toast.error("Gagal mendapatkan progress proyek, coba lagi nanti");
+      toast.error("Gagal mendapatkan progress Kegiatan, coba lagi nanti");
+    } finally {
+      setLoading(false)
     }
   }
 
@@ -50,6 +54,9 @@ export default function ProgressDetailProject() {
   return (
     <>
       <Box mt={10}>
+        {loading ? 
+          <Skeleton width={"100%"} height={100} radius={"md"} />
+          :
         <Box
           p={20}
           bg={"#DCEED8"}
@@ -71,7 +78,7 @@ export default function ProgressDetailProject() {
             </Grid.Col>
             <Grid.Col span={9}>
               <Box>
-                <Text>Kemajuan Proyek {valProgress}%</Text>
+                <Text>Kemajuan Kegiatan {valProgress}%</Text>
                 <Progress
                   style={{
                     border: `1px solid ${"#BDBDBD"}`,
@@ -86,6 +93,7 @@ export default function ProgressDetailProject() {
             </Grid.Col>
           </Grid>
         </Box>
+        }
       </Box>
     </>
   );

src/module/project/ui/tab_project.tsx

@@ -22,7 +22,7 @@ export default function TabProject() {
 
   return (
     <Box>
-      <LayoutNavbarNew back='/home' title='proyek'
+      <LayoutNavbarNew back='/home' title='Kegiatan'
         menu={<ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
           <HiMenu size={20} color='white' />
         </ActionIcon>} />

src/module/task/lib/api_task.ts

@@ -8,7 +8,7 @@ export const funGetAllTask = async (path?: string) => {
 
 export const funCreateTask = async (data: IFormTaskDivision) => {
    if (data.title.length < 3)
-      return { success: false, message: 'Nama proyek minimal 3 karakter' }
+      return { success: false, message: 'Nama Kegiatan minimal 3 karakter' }
 
    const response = await fetch("/api/task", {
       method: "POST",

src/module/task/ui/cancel_task.tsx

@@ -59,6 +59,7 @@ export default function CancelTask() {
                }}
                   value={alasan}
                   size="md" placeholder='Contoh : Tugas tidak sesuai' label="Alasan Pembatalan"
+                  required
                   onChange={(event) => {
                      setAlasan(event.target.value)
                      setTouched({ ...touched, reason: false })

src/module/task/ui/detail_progress_task.tsx

@@ -78,7 +78,7 @@ export default function ProgressDetailTask() {
                   </Grid.Col>
                   <Grid.Col span={9}>
                      <Box>
-                        <Text>Kemajuan Proyek {valProgress}%</Text>
+                        <Text>Kemajuan Kegiatan {valProgress}%</Text>
                         <Progress
                            style={{
                               border: `1px solid ${"#BDBDBD"}`,

src/module/task/ui/edit_task.tsx

@@ -80,6 +80,7 @@ export default function EditTask() {
                         borderRadius: 10,
                      },
                   }}
+                  required
                   placeholder="Tugas"
                   label="Judul Tugas"
                   size="md"

src/module/task/ui/list_division_task.tsx

@@ -86,7 +86,7 @@ export default function ListDivisionTask() {
                </Box>
             :
             <Box bg={"#DCEED8"} p={10} style={{ borderRadius: 10 }}>
-               <Text fw={'bold'} c={WARNA.biruTua}>Total Proyek</Text>
+               <Text fw={'bold'} c={WARNA.biruTua}>Total Kegiatan</Text>
                <Flex justify={'center'} align={'center'} h={'100%'}>
                   <Text fz={40} fw={'bold'} c={WARNA.biruTua}>{isData.length}</Text>
                </Flex>

src/module/user/member/ui/create_member.tsx

@@ -371,8 +371,8 @@ export default function CreateMember() {
           }
         />
         <Select
-          placeholder="Pilih Gender"
+          placeholder="Jenis Kelamin"
-          label="Gender"
+          label="Jenis Kelamin"
           w={"100%"}
           size="md"
           required

src/module/user/member/ui/edit_member.tsx

@@ -321,7 +321,7 @@ export default function EditMember({ id }: { id: string }) {
                }
             />
             <Select
-               placeholder="Pilih Gender" label="Gender" w={"100%"} size="md" required withAsterisk radius={30}
+               placeholder="Jenis Kelamin" label="Jenis Kelamin" w={"100%"} size="md" required withAsterisk radius={30}
                styles={{
                   input: {
                      color: WARNA.biruTua,