Merge pull request #143 from bipproduction/lukman/23-agustus-2024

style: update skelaton

src/module/_global/components/skeleton_detail_list_tugas_task.tsx

@@ -0,0 +1,60 @@
+import { Box, Center, Grid, Group, SimpleGrid, Skeleton } from '@mantine/core';
+import React from 'react';
+
+export default function SkeletonDetailListTugasTask() {
+  return (
+    <Grid>
+    <Grid.Col span={"auto"}>
+      <Center>
+        <Skeleton width={30} height={30} radius={"md"} />
+      </Center>
+    </Grid.Col>
+    <Grid.Col span={10}>
+      <Box
+        style={{
+          borderRadius: 10,
+          border: `1px solid ${"#D6D8F6"}`,
+          padding: 10,
+        }}
+      >
+        <Group>
+          <Skeleton width={25} height={25} radius={"md"} />
+          <Skeleton width={"50%"} height={20} radius={"md"} />
+        </Group>
+      </Box>
+      <Box>
+        <SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
+          <Box>
+            <Skeleton width={"50%"} height={20} radius={"md"} />
+            <Group
+                bg={"white"}
+                mt={3}
+              h={45}
+              style={{
+                borderRadius: 10,
+                border: `1px solid ${"#D6D8F6"}`,
+              }}
+            >
+              <Skeleton ml={5} width={"80%"} height={20} radius={"md"} />
+            </Group>
+          </Box>
+          <Box>
+            <Skeleton width={"50%"} height={20} radius={"md"} />
+            <Group
+                bg={"white"}
+                mt={3}
+              h={45}
+              style={{
+                borderRadius: 10,
+                border: `1px solid ${"#D6D8F6"}`,
+              }}
+            >
+              <Skeleton ml={5} width={"80%"} height={20} radius={"md"} />
+            </Group>
+          </Box>
+        </SimpleGrid>
+      </Box>
+    </Grid.Col>
+  </Grid>
+  );
+}

src/module/_global/index.ts

@@ -2,6 +2,7 @@ import prisma from "./bin/prisma";
 import { pwd_key_config } from "./bin/val_global";
 import SkeletonDetailDiscussionComment from "./components/skeleton_detail_discussion_comment";
 import SkeletonDetailDiscussionMember from "./components/skeleton_detail_discussion_member";
+import SkeletonDetailListTugasTask from "./components/skeleton_detail_list_tugas_task";
 import SkeletonDetailProfile from "./components/skeleton_detail_profile";
 import SkeletonSingle from "./components/skeleton_single";
 import { funUploadFile } from "./fun/upload-file";
@@ -29,3 +30,4 @@ export { SkeletonDetailDiscussionComment }
 export { SkeletonDetailDiscussionMember }
 export { funUploadFile }
 export { SkeletonDetailProfile }
+export {SkeletonDetailListTugasTask}

src/module/discussion/ui/detail_discussion.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { ActionIcon, Avatar, Badge, Box, Center, Divider, Flex, Grid, Group, Text, TextInput } from "@mantine/core";
+import { ActionIcon, Avatar, Badge, Box, Center, Divider, Flex, Grid, Group, Skeleton, Text, TextInput } from "@mantine/core";
 import { SkeletonDetailDiscussionComment, SkeletonDetailDiscussionMember, SkeletonSingle, WARNA } from "@/module/_global";
 import { GrChatOption } from "react-icons/gr";
 import { LuSendHorizonal } from "react-icons/lu";
@@ -17,7 +17,7 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
    const [isData, setData] = useState<IDetailDiscussion>()
    const [isComent, setIsComent] = useState("")
    const param = useParams<{ id: string, detail: string }>()
-   const [isLoad, setIsLoad] = useState(false)
+   const [isLoad, setIsLoad] = useState(true)
 
    const getData = async () => {
       try {
@@ -67,8 +67,26 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
                Array(1)
                   .fill(null)
                   .map((_, i) => (
-                     <Box key={i} p={10}>
+                     <Box key={i}>
-                        <SkeletonDetailDiscussionMember/>
+                        <Box>
+                           <Flex
+                              justify={"space-between"}
+                              align={"center"}
+                              mt={20}
+                           >
+                              <Group>
+                                 <Skeleton width={60} height={60} radius={100} />
+                                 <Box>
+                                    <Skeleton width={"50%"} height={20} radius={"md"} />
+                                    <Skeleton width={"50%"} height={20} radius={"md"} />
+                                 </Box>
+                              </Group>
+                              <Skeleton width={"50%"} height={20} radius={"md"} />
+                           </Flex>
+                           <Box mt={10}>
+                              <Skeleton width={"100%"} height={100} radius={"md"} />
+                           </Box>
+                        </Box>
                      </Box>
                   )) :
                <Box>
@@ -104,11 +122,35 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
             }
             <Box p={10}>
                {isLoad ?
-                  Array(6)
+                  Array(2)
                      .fill(0)
                      .map((_, i) => (
                         <Box key={i} p={10}>
-                          <SkeletonDetailDiscussionComment />
+                           <Box>
+                              <Flex
+                                 justify={"space-between"}
+                                 align={"center"}
+                                 mt={20}
+                              >
+                                 <Group>
+                                    <Skeleton width={40} height={40} radius={100} />
+                                    <Box>
+                                       <Skeleton width={"50%"} height={20} radius={"md"} />
+                                       <Skeleton width={"50%"} height={20} radius={"md"} />
+                                    </Box>
+                                 </Group>
+                                 <Skeleton width={"50%"} height={20} radius={"md"} />
+                              </Flex>
+                              <Box mt={10}>
+                                 <Skeleton width={"100%"} height={50} radius={"md"} />
+                              </Box>
+                              <Group justify="space-between" mt={20} c={'#8C8C8C'}>
+                                 <Skeleton width={"30%"} height={20} radius={"md"} />
+                              </Group>
+                           </Box>
+                           <Box mt={20}>
+                              <Skeleton width={"100%"} height={1} radius={"md"} />
+                           </Box>
                         </Box>
                      )) :
                   isData?.DivisionDisscussionComment.map((v, i) => {
@@ -137,9 +179,15 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
                   })
                }
             </Box>
-            <Box h={60} pos={"fixed"} bottom={0} w={{ base: "90%", md: "35.5%" }} style={{
+            {isLoad ? 
+             <Skeleton width={"100%"} height={50} radius={100} />
+            :
+            <Box h={60} pos={"fixed"} bottom={20} w={{ base: "90%", md: "35.5%" }} style={{
                zIndex: 999
             }}>
+                  <Group justify="flex-end">
+                     <Text fz={13}>{300 - isComent.length} karakter tersisa</Text>
+                  </Group>
                <Grid bg={"white"} style={{
                   border: '1px solid gray',
                   borderRadius: 40
@@ -158,7 +206,9 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
                         disabled={isData?.status === 2}
                         onChange={(e) => setIsComent(e.target.value)}
                            value={isComent}
+                           maxLength={300}
                         />
+                        
                   </Grid.Col>
                   <Grid.Col span={2}>
                      <Center>
@@ -171,6 +221,7 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
                   </Grid.Col>
                </Grid>
             </Box>
+            }
          </Box>
       </>
    )

src/module/discussion/ui/list_discussion.tsx

@@ -1,6 +1,6 @@
 'use client'
 import { WARNA } from "@/module/_global";
-import { Avatar, Badge, Box, Divider, Flex, Group, Text, TextInput } from "@mantine/core";
+import { Avatar, Badge, Box, Divider, Flex, Group, Skeleton, Text, TextInput } from "@mantine/core";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
 import { useState } from "react";
 import { GrChatOption } from "react-icons/gr";
@@ -13,13 +13,18 @@ export default function ListDiscussion({ id }: { id: string }) {
    const [isData, setData] = useState<IDataDiscussion[]>([])
    const [searchQuery, setSearchQuery] = useState('')
    const param = useParams<{ id: string }>()
+   const [loading, setLoading] = useState(true)
 
    const getData = async () => {
       try {
+         setLoading(true)
          const response = await funGetAllDiscussion('?division=' + id + '&search=' + searchQuery)
          setData(response.data)
+         setLoading(false)
       } catch (error) {
          console.log(error)
+      } finally {
+         setLoading(false)
       }
    }
 
@@ -45,7 +50,41 @@ export default function ListDiscussion({ id }: { id: string }) {
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
          />
-         {isData.map((v, i) => {
+         {loading ?
+            Array(3)
+               .fill(null)
+               .map((_, i) => (
+                  <Box key={i}>
+                     <Box pl={10} pr={10}>
+                        <Flex
+                           justify={"space-between"}
+                           align={"center"}
+                           mt={20}
+                        >
+                           <Group>
+                              <Skeleton width={40} height={40} radius={"md"} />
+                              <Box>
+                                 <Skeleton width={"50%"} height={20} radius={"md"} />
+                                 <Skeleton width={"50%"} height={20} radius={"md"} />
+                              </Box>
+                           </Group>
+                           <Skeleton width={"50%"} height={20} radius={"md"} />
+                        </Flex>
+                        <Box mt={10}>
+                           <Skeleton width={"100%"} height={100} radius={"md"} />
+                        </Box>
+                        <Group justify="space-between" mt={20} c={'#8C8C8C'}>
+                           <Skeleton width={"30%"} height={20} radius={"md"} />
+                           <Skeleton width={"30%"} height={20} radius={"md"} />
+                        </Group>
+                        <Box mt={20}>
+                           <Skeleton width={"100%"} height={1} radius={"md"} />
+                        </Box>
+                     </Box>
+                  </Box>
+               ))
+            :
+            isData.map((v, i) => {
                return (
                   <Box key={i} pl={10} pr={10}
                      onClick={() => {
@@ -79,11 +118,15 @@ export default function ListDiscussion({ id }: { id: string }) {
                         </Group>
                      </Group>
                      <Box mt={20}>
+                        {isData.length <= 1 ? "" :
                            <Divider size={"xs"} />
+                        }
                      </Box>
                   </Box>
                );
-         })}
+            })
+         }
+
       </Box>
    )
 }

src/module/division_new/ui/information_division.tsx

@@ -21,7 +21,7 @@ export default function InformationDivision() {
   const [name, setName] = useState('')
   const [deskripsi, setDeskripsi] = useState('')
   const [member, setMember] = useState<IDataMemberDivision[]>([])
-  const [loading, setLoading] = useState(false)
+  const [loading, setLoading] = useState(true)
   const [valChooseMember, setChooseMember] = useState("")
   const [valChooseMemberStatus, setChooseMemberStatus] = useState<boolean>(false)
   const [valChooseMemberName, setChooseMemberName] = useState("")
@@ -137,12 +137,36 @@ export default function InformationDivision() {
               <Text>{member.length} Anggota</Text>
             </Box>
             <Box mt={15}>
+              {loading ?
+                <Group
+                  align="center"
+                  style={{
+                    padding: 10,
+                  }}
+                >
+                  <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>
+                :
                 <Group align='center' onClick={() => router.push('/division/add-member/' + param.id)}>
                   <Avatar size="lg">
                     <AiOutlineUserAdd size={30} color={WARNA.biruTua} />
                   </Avatar>
                   <Text>Tambah Anggota</Text>
                 </Group>
+              }
             </Box>
             <Box pt={10}>
               <Box mb={10}>

src/module/division_new/ui/list_division.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
+import { LayoutDrawer, LayoutNavbarNew, SkeletonSingle, WARNA } 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, { useState } from 'react';
@@ -96,16 +96,31 @@ export default function ListDivision() {
           </Grid.Col>
         </Grid>
         <Box pt={20}>
+          {loading ?
+            <>
+              <Skeleton width={"100%"} height={100} radius={"md"} />
+            </>
+            :
             <Box bg={WARNA.biruTua} p={10} style={{ borderRadius: 10 }}>
               <Text fw={'bold'} c={'white'}>Total Divisi</Text>
               <Flex justify={'center'} align={'center'} h={'100%'}>
                 <Text fz={40} fw={'bold'} c={'white'}>{jumlah}</Text>
               </Flex>
             </Box>
+          }
         </Box>
         {isList ? (
           <Box pt={20}>
-            {data?.map((v: any, i: any) => {
+            {loading
+              ? Array(6)
+                .fill(null)
+                .map((_, i) => (
+                  <Box key={i}>
+                    <SkeletonSingle />
+                  </Box>
+                ))
+              :
+              data?.map((v: any, i: any) => {
                 return (
                   <Box key={i}>
                     <Group justify="space-between" mb={10} onClick={() => router.push(`/division/${v.id}`)}>
@@ -131,11 +146,21 @@ export default function ListDivision() {
                     <Divider my="sm" />
                   </Box>
                 );
-            })}
+              })
+            }
           </Box>
         ) : (
           <Box pt={20}>
-            {data?.map((v: any, i: any) => {
+            {loading ?
+              Array(6)
+                .fill(null)
+                .map((_, i) => (
+                  <Box key={i} pb={20}>
+                    <Skeleton width={"100%"} height={200} radius={"md"} />
+                  </Box>
+                ))
+              :
+              data?.map((v: any, i: any) => {
                 return (
                   <Box key={i} mb={20}>
                     <Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/division/${v.id}`)}>
@@ -160,7 +185,8 @@ export default function ListDivision() {
                     </Card>
                   </Box>
                 );
-            })}
+              })
+            }
           </Box>
         )}
       </Box>

src/module/division_new/ui/navbar_create_users.tsx

@@ -1,7 +1,7 @@
 "use client"
 import { LayoutNavbarNew, WARNA } from '@/module/_global';
 import { useHookstate } from '@hookstate/core';
-import { Avatar, Box, Button, Center, Input, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import { Avatar, Box, Button, Center, Input, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { useRouter } from 'next/navigation';
 import React, { useState } from 'react';
@@ -17,6 +17,7 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
   const member = useHookstate(globalMemberDivision)
   const [selectedFiles, setSelectedFiles] = useState<any>([]);
   const [dataMember, setDataMember] = useState<TypeUser>([])
+  const [loading, setLoading] = useState(true)
 
   const handleFileClick = (index: number) => {
     if (selectedFiles.some((i: any) => i.idUser == dataMember[index].id)) {
@@ -28,6 +29,7 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
 
 
   async function loadData(search: string) {
+    setLoading(true)
     const res = await funGetAllmember('?active=true&group=' + grup + '&search=' + search);
     const user = await funGetUserByCookies();
 
@@ -41,7 +43,7 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
     } else {
       toast.error(res.message)
     }
-
+    setLoading(false)
   }
 
 
@@ -77,6 +79,21 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
             onChange={(e) => loadData(e.target.value)}
           />
           <Box pt={10}>
+            {loading ?
+              <SimpleGrid
+                cols={{ base: 2, sm: 2, lg: 2 }}
+                spacing={{ base: 20, sm: "xl" }}
+                verticalSpacing={{ base: "md", sm: "xl" }}
+              >
+                {Array(6)
+                  .fill(null)
+                  .map((_, i) => (
+                    <Box key={i}>
+                      <Skeleton width={"100%"} height={100} radius={"md"} />
+                    </Box>
+                  ))}
+              </SimpleGrid>
+              :
               <SimpleGrid
                 cols={{ base: 2, sm: 2, lg: 2 }}
                 spacing={{ base: 20, sm: "xl" }}
@@ -106,6 +123,7 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
                   );
                 })}
               </SimpleGrid>
+            }
           </Box>
         </Stack>
         <Box mt="xl">

src/module/task/ui/create_users_project.tsx

@@ -3,6 +3,7 @@ import { LayoutNavbarNew, WARNA } from "@/module/_global";
 import { funGetDivisionById, IDataMemberDivision } from "@/module/division_new";
 import { useHookstate } from "@hookstate/core";
 import {
+  ActionIcon,
   Anchor,
   Avatar,
   Box,
@@ -11,6 +12,7 @@ import {
   Divider,
   Flex,
   Group,
+  Skeleton,
   Text,
   TextInput,
 } from "@mantine/core";
@@ -28,10 +30,12 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
   const [isData, setData] = useState<IDataMemberDivision[]>([])
   const member = useHookstate(globalMemberTask)
   const [selectAll, setSelectAll] = useState(false)
+  const [loading, setLoading] = useState(true)
 
 
   async function getData() {
     try {
+      setLoading(true)
       const response = await funGetDivisionById(param.id)
       if (response.success) {
         setData(response.data.member)
@@ -41,9 +45,12 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
       } else {
         toast.error(response.message)
       }
+      setLoading(false)
     } catch (error) {
       console.log(error)
       toast.error("Gagal mendapatkan anggota, coba lagi nanti");
+    } finally {
+      setLoading(false)
     }
   }
 
@@ -110,14 +117,42 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
           leftSection={<HiMagnifyingGlass size={20} />}
           placeholder="Pencarian"
         /> */}
+        {loading ?
+          <Skeleton height={20} width={"100%"} mt={20} />
+          :
           <Group justify="space-between" mt={20} onClick={handleSelectAll}>
             <Text c={WARNA.biruTua} fw={"bold"}>
               Pilih Semua Anggota
             </Text>
             {selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
           </Group>
+        }
         <Box mt={15}>
-          {isData.map((v, i) => {
+          {loading ?
+            Array(3)
+              .fill(null)
+              .map((_, i) => (
+                <Box key={i} mb={15}>
+                  <Group>
+                    <Box>
+                      <ActionIcon
+                        variant="light"
+                        bg={"#DCEED8"}
+                        size={"lg"}
+                        radius={100}
+                        aria-label="icon"
+                      >
+                        <Skeleton height={30} width={30} />
+                      </ActionIcon>
+                    </Box>
+                    <Box>
+                      <Skeleton height={20} width={"80%"} />
+                    </Box>
+                  </Group>
+                </Box>
+              ))
+            :
+            isData.map((v, i) => {
               const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
               return (
                 <Box mb={15} key={i} onClick={() => handleFileClick(i)}>
@@ -146,7 +181,8 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
                   <Divider my={"md"} />
                 </Box>
               );
-          })}
+            })
+          }
         </Box>
         <Box mt={"xl"}>
           <Button
@@ -155,7 +191,7 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
             size="lg"
             radius={30}
             fullWidth
-            onClick={() => {onSubmit()}}
+            onClick={() => { onSubmit() }}
           >
             Simpan
           </Button>

src/module/task/ui/detail_list_anggota_task.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { LayoutDrawer, WARNA } from "@/module/_global";
+import { LayoutDrawer, SkeletonSingle, WARNA } from "@/module/_global";
 import { Box, Group, Flex, Avatar, Text, SimpleGrid, Stack } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useParams, useRouter } from "next/navigation";
@@ -79,7 +79,15 @@ export default function ListAnggotaDetailTask() {
                   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 (

src/module/task/ui/detail_list_file_task.tsx

@@ -1,6 +1,6 @@
 'use client'
-import { WARNA } from "@/module/_global";
+import { SkeletonDetailListTugasTask, WARNA } from "@/module/_global";
-import { Box, Group, Text } from "@mantine/core";
+import { Box, Group, Skeleton, Text } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useParams } from "next/navigation";
 import { useState } from "react";
@@ -22,7 +22,6 @@ export default function ListFileDetailTask() {
          } else {
             toast.error(res.message);
          }
-
       } catch (error) {
          console.error(error);
          toast.error("Gagal mendapatkan file tugas divisi, coba lagi nanti");
@@ -45,7 +44,18 @@ export default function ListFileDetailTask() {
          }}>
             {
 
-               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/task/ui/detail_list_tugas_task.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { LayoutDrawer, WARNA } from "@/module/_global"
+import { LayoutDrawer, SkeletonDetailListTugasTask, WARNA } from "@/module/_global"
 import { Box, Grid, Center, Checkbox, Group, SimpleGrid, Text, Stack, Flex, Divider } from "@mantine/core"
 import { useShallowEffect } from "@mantine/hooks"
 import { useParams, useRouter } from "next/navigation"
@@ -99,7 +99,11 @@ export default function ListTugasDetailTask() {
             }}
          >
             {
-               loading ? <Text>loading</Text> :
+               loading ?
+                  <>
+                     <SkeletonDetailListTugasTask />
+                  </>
+                  :
                   isData.length === 0 ? <Text>Tidak ada tugas</Text> :
                      isData.map((item, index) => {
                         return (
@@ -163,7 +167,10 @@ export default function ListTugasDetailTask() {
                                     </Box>
                                  </Grid.Col>
                               </Grid>
+                              {isData.length >= 1
+                                 ? "" :
                                  <Divider my={"lg"} />
+                              }
                            </Box>
                         )
                      })

src/module/task/ui/detail_progress_task.tsx

@@ -1,6 +1,6 @@
 'use client'
 import { WARNA } from "@/module/_global";
-import { Box, Grid, ActionIcon, Progress, Text } from "@mantine/core";
+import { Box, Grid, ActionIcon, Progress, Text, Skeleton } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useParams } from "next/navigation";
 import toast from "react-hot-toast";
@@ -15,9 +15,11 @@ export default function ProgressDetailTask() {
    const [valLastUpdate, setValLastUpdate] = useState('')
    const param = useParams<{ id: string, detail: string }>()
    const refresh = useHookstate(globalRefreshTask)
+   const [loading, setLoading] = useState(true)
 
    async function getOneData() {
       try {
+         setLoading(true)
          const res = await funGetTaskDivisionById(param.detail, 'progress');
          if (res.success) {
             setValProgress(res.data.progress);
@@ -25,10 +27,12 @@ export default function ProgressDetailTask() {
          } else {
             toast.error(res.message);
          }
-
+         setLoading(false)
       } catch (error) {
          console.error(error);
          toast.error("Gagal mendapatkan progress tugas divisi, coba lagi nanti");
+      } finally {
+         setLoading(false)
       }
    }
 
@@ -51,6 +55,9 @@ export default function ProgressDetailTask() {
 
    return (
       <Box mt={10}>
+         {loading ?
+             <Skeleton width={"100%"} height={100} radius={"md"} />
+            : 
          <Box
             p={20}
             bg={"#DCEED8"}
@@ -83,11 +90,11 @@ export default function ProgressDetailTask() {
                         size="xl"
                         value={valProgress}
                      />
-                     {/* <Text c={"dimmed"}>Update terakhir : {valLastUpdate}</Text> */}
                   </Box>
                </Grid.Col>
             </Grid>
          </Box>
+         }
       </Box>
    )
 }

src/module/task/ui/list_division_task.tsx

@@ -1,5 +1,5 @@
 import { WARNA } from "@/module/_global";
-import { ActionIcon, Avatar, Badge, Box, Card, Center, Divider, Flex, Grid, Group, Progress, Text, TextInput, Title } from "@mantine/core";
+import { ActionIcon, Avatar, Badge, Box, Card, Center, Divider, Flex, Grid, Group, Progress, Skeleton, Text, TextInput, Title } from "@mantine/core";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
 import { useState } from "react";
 import { HiMagnifyingGlass, HiMiniPresentationChartBar, HiOutlineListBullet, HiSquares2X2 } from "react-icons/hi2";
@@ -8,6 +8,7 @@ import { IDataTask } from "../lib/type_task";
 import { funGetAllTask } from "../lib/api_task";
 import toast from "react-hot-toast";
 import { useShallowEffect } from "@mantine/hooks";
+import _ from "lodash";
 
 export default function ListDivisionTask() {
    const [isList, setIsList] = useState(false)
@@ -79,12 +80,18 @@ export default function ListDivisionTask() {
             </Grid.Col>
          </Grid>
          <Box pt={20}>
+            {loading ? 
+               <Box>
+                  <Skeleton width={"100%"} height={100} radius={"md"} />
+               </Box>
+            :
             <Box bg={"#DCEED8"} p={10} style={{ borderRadius: 10 }}>
                <Text fw={'bold'} c={WARNA.biruTua}>Total Proyek</Text>
                <Flex justify={'center'} align={'center'} h={'100%'}>
                   <Text fz={40} fw={'bold'} c={WARNA.biruTua}>{isData.length}</Text>
                </Flex>
             </Box>
+         }
             {isList ? (
                <Box pt={20}>
                   {isData.map((v, i) => {
@@ -117,7 +124,22 @@ export default function ListDivisionTask() {
                </Box>
             ) : (
                <Box pt={20}>
-                  {isData.map((v: any, i: any) => {
+                     {loading ? 
+                        Array(3)
+                        .fill(null)
+                        .map((_, i) => (
+                          <Box key={i} mb={20}>
+                            <Skeleton width={"100%"} height={200} radius={"md"} />
+                          </Box>
+                        ))
+                        :
+                        _.isEmpty(isData)
+                        ?
+                        <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
+                           <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada Tugas</Text>
+                        </Box>
+                        :
+                     isData.map((v: any, i: any) => {
                         return (
                            <Box key={i} mb={20}>
                               <Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`task/${v.id}`)}>
@@ -140,14 +162,15 @@ export default function ListDivisionTask() {
                                           <Avatar>
                                              <MdAccountCircle size={32} color={WARNA.biruTua} />
                                           </Avatar>
-                                       <Avatar>+{v.member-1}</Avatar>
+                                          <Avatar>+{v.member - 1}</Avatar>
                                        </Avatar.Group>
                                     </Group>
                                  </Box>
                               </Card>
                            </Box>
                         );
-                  })}
+                     })
+                  }
                </Box>
             )}
          </Box>

src/module/task/ui/navbar_division_task.tsx

@@ -4,12 +4,14 @@ import { ActionIcon } from "@mantine/core";
 import { useState } from "react";
 import { HiMenu } from "react-icons/hi";
 import DrawerDivisionTask from "./drawer_division_task";
+import { useParams } from "next/navigation";
 
 export default function NavbarDivisionTask() {
    const [openDrawer, setOpenDrawer] = useState(false)
+   const param = useParams<{ id: string}>()
    return (
       <>
-         <LayoutNavbarNew back="" title="Divisi - Tugas"
+         <LayoutNavbarNew back={`/division/${param.id}`} title="Divisi - Tugas"
             menu={
                <ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
                   <HiMenu size={20} color='white' />

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

@@ -10,6 +10,7 @@ import { HiUser } from "react-icons/hi2";
 import { IDataPositionMember, IDataROleMember } from "../lib/type_member";
 import { funGetAllPosition } from "@/module/position/lib/api_position";
 import { funCreateMember, funGetRoleUser } from "../lib/api_member";
+import _ from "lodash";
 
 export default function CreateMember() {
   const router = useRouter();
@@ -17,6 +18,16 @@ export default function CreateMember() {
   const [listGroup, setListGorup] = useState<IDataGroup[]>([]);
   const [listPosition, setListPosition] = useState<IDataPositionMember[]>([]);
   const [listUserRole, setListUserRole] = useState<IDataROleMember[]>([]);
+  const [touched, setTouched] = useState({
+    nik: false,
+    name: false,
+    phone: false,
+    email: false,
+    gender: false,
+    idGroup: false,
+    idPosition: false,
+    idUserRole: false
+  });
 
   const [listData, setListData] = useState({
     nik: "",
@@ -80,6 +91,10 @@ export default function CreateMember() {
 
   async function onSubmit(val: boolean) {
     try {
+      if (_.isEmpty(listData)) {
+        return;
+      }
+      if (val) {
         const res = await funCreateMember({
           nik: listData.nik,
           name: listData.name,
@@ -90,7 +105,6 @@ export default function CreateMember() {
           idPosition: listData.idPosition,
           idUserRole: listData.idUserRole,
         });
-
         if (res.success) {
           toast.success(res.message);
           setModal(false);
@@ -98,6 +112,8 @@ export default function CreateMember() {
         } else {
           toast.error(res.message);
         }
+      }
+      setModal(false);
     } catch (error) {
       toast.error("Error");
     } finally {
@@ -150,6 +166,12 @@ export default function CreateMember() {
           onChange={(val: any) => {
             changeGrup(val);
           }}
+          onBlur={() => setTouched({ ...touched, idGroup: true })}
+          error={
+            touched.idGroup && (
+              listData.idGroup == "" ? "Grup Tidak Boleh Kosong" : null
+            )
+          }
         />
         <Select
           placeholder="Pilih Jabatan"
@@ -181,6 +203,12 @@ export default function CreateMember() {
             })
           }
           value={listData.idPosition == "" ? null : listData.idPosition}
+          onBlur={() => setTouched({ ...touched, idPosition: true })}
+          error={
+            touched.idPosition && (
+              listData.idPosition == "" ? "Jabatan Tidak Boleh Kosong" : null
+            )
+          }
         />
         <Select
           placeholder="Pilih Role"
@@ -211,6 +239,12 @@ export default function CreateMember() {
               idUserRole: val,
             })
           }
+          onBlur={() => setTouched({ ...touched, idUserRole: true })}
+          error={
+            touched.idUserRole && (
+              listData.idUserRole == "" ? "Role Tidak Boleh Kosong" : null
+            )
+          }
         />
         <TextInput
           size="md"
@@ -227,11 +261,16 @@ export default function CreateMember() {
               borderColor: WARNA.biruTua,
             },
           }}
-          onChange={(event: any) =>
+          onChange={(event: any) => {
-            setListData({
+            setListData({ ...listData, nik: event.target.value });
-              ...listData,
+            setTouched({ ...touched, nik: true });
-              nik: event.target.value,
+          }}
-            })
+          onBlur={() => setTouched({ ...touched, nik: true })}
+          error={
+            touched.nik && (
+              listData.nik == "" ? "NIK Tidak Boleh Kosong" :
+                listData.nik.length < 16 ? "NIK Harus 16 Karakter" : null
+            )
           }
         />
         <TextInput
@@ -255,6 +294,12 @@ export default function CreateMember() {
               name: event.target.value,
             })
           }
+          onBlur={() => setTouched({ ...touched, name: true })}
+          error={
+            touched.name && (
+              listData.name == "" ? "Nama Tidak Boleh Kosong" : null
+            )
+          }
         />
         <TextInput
           size="md"
@@ -277,6 +322,13 @@ export default function CreateMember() {
               email: event.target.value,
             })
           }
+          onBlur={() => setTouched({ ...touched, email: true })}
+          error={
+            touched.email && (
+              listData.email == "" ? "Email Tidak Boleh Kosong" :
+                !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(listData.email) ? "Email tidak valid" : null
+            )
+          }
         />
         <TextInput
           size="md"
@@ -299,6 +351,13 @@ export default function CreateMember() {
               phone: event.target.value,
             })
           }
+          onBlur={() => setTouched({ ...touched, phone: true })}
+          error={
+            touched.phone && (
+              listData.phone == "" ? "Nomor Telepon Tidak Boleh Kosong" :
+                listData.phone.length < 10 ? "Nomor Telepon harus 10 digit" : null
+            )
+          }
         />
         <Select
           placeholder="Pilih Gender"
@@ -325,6 +384,12 @@ export default function CreateMember() {
               gender: val,
             })
           }
+          onBlur={() => setTouched({ ...touched, gender: true })}
+          error={
+            touched.gender && (
+              listData.gender == "" ? "Gender Tidak Boleh Kosong" : null
+            )
+          }
         />
       </Stack>
       <Box mt={30} mx={20} pb={20}>
@@ -334,7 +399,22 @@ export default function CreateMember() {
           size="md"
           radius={30}
           fullWidth
-          onClick={() => setModal(true)}
+          onClick={() => {
+            if (
+              listData.nik !== "" &&
+              listData.name !== "" &&
+              listData.email !== "" &&
+              listData.phone !== "" &&
+              listData.gender !== "" &&
+              listData.idGroup !== "" &&
+              listData.idPosition !== "" &&
+              listData.idUserRole !== ""
+            ) {
+              setModal(true);
+            } else {
+              toast.error("Mohon lengkapi semua form");
+            }
+          }}
         >
           Simpan
         </Button>

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

@@ -11,6 +11,7 @@ import toast from "react-hot-toast";
 import { HiUser } from "react-icons/hi2";
 import { IDataPositionMember, IDataROleMember, IEditDataMember, IFormMember } from "../lib/type_member";
 import { funEditMember, funGetOneMember, funGetRoleUser } from "../lib/api_member";
+import _ from "lodash";
 
 
 export default function EditMember({ id }: { id: string }) {
@@ -19,6 +20,16 @@ export default function EditMember({ id }: { id: string }) {
    const [listGroup, setListGorup] = useState<IDataGroup[]>([])
    const [listPosition, setListPosition] = useState<IDataPositionMember[]>([])
    const [listUserRole, setListUserRole] = useState<IDataROleMember[]>([])
+   const [touched, setTouched] = useState({
+      nik: false,
+      name: false,
+      phone: false,
+      email: false,
+      gender: false,
+      idGroup: false,
+      idPosition: false,
+      idUserRole: false
+    });
    const [data, setData] = useState<IEditDataMember>({
       id: "",
       nik: "",
@@ -95,7 +106,10 @@ export default function EditMember({ id }: { id: string }) {
 
    async function onSubmit(val: boolean) {
       try {
-
+         if (_.isEmpty(data)) {
+            return
+         }
+         if (val) {
             const res = await funEditMember(id, {
                id: data.id,
                nik: data.nik,
@@ -110,6 +124,7 @@ export default function EditMember({ id }: { id: string }) {
    
             toast.success(res.message)
             router.push(`/member?active=true`)
+         }
 
       } catch (error) {
          toast.error('Error');
@@ -152,6 +167,12 @@ export default function EditMember({ id }: { id: string }) {
                   changeGrup(val)
                }}
                value={data?.idGroup}
+               onBlur={() => setTouched({ ...touched, idGroup: true })}
+               error={
+                 touched.idGroup && (
+                   data.idGroup == "" ? "Grup Tidak Boleh Kosong" : null
+                 )
+               }
             />
             <Select
                placeholder="Pilih Jabatan" label="Jabatan" w={"100%"} size="md" required withAsterisk radius={30}
@@ -172,6 +193,12 @@ export default function EditMember({ id }: { id: string }) {
                }
                onChange={(val: any) => setData({ ...data, idPosition: val })}
                value={(data?.idPosition == "") ? null : data.idPosition}
+               onBlur={() => setTouched({ ...touched, idPosition: true })}
+               error={
+                 touched.idPosition && (
+                   data.idPosition == "" ? "Jabatan Tidak Boleh Kosong" : null
+                 )
+               }
             />
             <Select
                placeholder="Pilih Role" label="User Role" w={"100%"} size="md" required withAsterisk radius={30}
@@ -192,6 +219,12 @@ export default function EditMember({ id }: { id: string }) {
                }
                onChange={(val: any) => setData({ ...data, idUserRole: val })}
                value={data?.idUserRole}
+               onBlur={() => setTouched({ ...touched, idUserRole: true })}
+               error={
+                 touched.idUserRole && (
+                   data.idUserRole == "" ? "Role Tidak Boleh Kosong" : null
+                 )
+               }
             />
             <TextInput
                size="md" type="number" radius={30} placeholder="NIK" withAsterisk label="NIK" w={"100%"}
@@ -204,6 +237,13 @@ export default function EditMember({ id }: { id: string }) {
                }}
                onChange={(e) => setData({ ...data, nik: e.target.value })}
                value={data.nik}
+               onBlur={() => setTouched({ ...touched, nik: true })}
+               error={
+                 touched.nik && (
+                   data.nik == "" ? "NIK Tidak Boleh Kosong" :
+                     data.nik.length < 16 ? "NIK Harus 16 Karakter" : null
+                 )
+               }
             />
             <TextInput
                size="md" type="text" radius={30} placeholder="Nama" withAsterisk label="Nama" w={"100%"}
@@ -216,6 +256,12 @@ export default function EditMember({ id }: { id: string }) {
                }}
                onChange={(e) => setData({ ...data, name: e.target.value })}
                value={data.name}
+               onBlur={() => setTouched({ ...touched, name: true })}
+               error={
+                 touched.name && (
+                   data.name == "" ? "Nama Tidak Boleh Kosong" : null
+                 )
+               }
             />
             <TextInput
                size="md" type="email" radius={30} placeholder="Email" withAsterisk label="Email" w={"100%"}
@@ -228,6 +274,13 @@ export default function EditMember({ id }: { id: string }) {
                }}
                onChange={(e) => setData({ ...data, email: e.target.value })}
                value={data.email}
+               onBlur={() => setTouched({ ...touched, email: true })}
+               error={
+                 touched.email && (
+                   data.email == "" ? "Email Tidak Boleh Kosong" :
+                     !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(data.email) ? "Email tidak valid" : null
+                 )
+               }
             />
             <TextInput
                size="md" type="number" radius={30} placeholder="+62...." withAsterisk label="Nomor Telepon" w={"100%"}
@@ -240,6 +293,13 @@ export default function EditMember({ id }: { id: string }) {
                }}
                onChange={(e) => setData({ ...data, phone: e.target.value })}
                value={data.phone}
+               onBlur={() => setTouched({ ...touched, phone: true })}
+               error={
+                 touched.phone && (
+                   data.phone == "" ? "Nomor Telepon Tidak Boleh Kosong" :
+                     data.phone.length < 10 ? "Nomor Telepon harus 10 digit" : null
+                 )
+               }
             />
             <Select
                placeholder="Pilih Gender" label="Gender" w={"100%"} size="md" required withAsterisk radius={30}
@@ -264,6 +324,12 @@ export default function EditMember({ id }: { id: string }) {
                }
                onChange={(val: any) => setData({ ...data, gender: val })}
                value={data.gender}
+               onBlur={() => setTouched({ ...touched, gender: true })}
+               error={
+                 touched.gender && (
+                   data.gender == "" ? "Gender Tidak Boleh Kosong" : null
+                 )
+               }
             />
          </Stack>
          <Box mt={30} mx={20} pb={20}>
@@ -273,7 +339,22 @@ export default function EditMember({ id }: { id: string }) {
           size="md"
           radius={30}
           fullWidth
-               onClick={() => setModal(true)}
+          onClick={() => {
+            if (
+              data.nik !== "" &&
+              data.name !== "" &&
+              data.email !== "" &&
+              data.phone !== "" &&
+              data.gender !== "" &&
+              data.idGroup !== "" &&
+              data.idPosition !== "" &&
+              data.idUserRole !== ""
+            ) {
+              setModal(true);
+            } else {
+              toast.error("Mohon lengkapi semua form");
+            }
+          }}
         >
           Simpan
         </Button>