Merge pull request #141 from bipproduction/lukman/22-agustus-2024

style : update skeleton

src/module/_global/components/skeleton_detail_profile.tsx

@@ -0,0 +1,86 @@
+import { ActionIcon, Box, Group, Skeleton } from '@mantine/core';
+import React from 'react';
+
+export default function SkeletonDetailProfile() {
+    return (
+        <Box p={20}>
+            <Group justify="space-between" grow py={5}>
+                <Group>
+                    <ActionIcon
+                        variant="light"
+                        bg={"#DCEED8"}
+                        size={28}
+                        radius={100}
+                        aria-label="icon"
+                    >
+                        <Skeleton height={20} width={40} />
+                    </ActionIcon>
+                    <Box>
+                        <Skeleton height={18} width={80} />
+                    </Box>
+                </Group>
+                <Box>
+                    <Skeleton height={18} width={"100%"} />
+                </Box>
+            </Group>
+            <Group justify="space-between" grow py={5}>
+                <Group>
+                    <ActionIcon
+                        variant="light"
+                        bg={"#DCEED8"}
+                        size={28}
+                        radius={100}
+                        aria-label="icon"
+                    >
+                        <Skeleton height={20} width={40} />
+                    </ActionIcon>
+                    <Box>
+                        <Skeleton height={18} width={80} />
+                    </Box>
+                </Group>
+                <Box>
+                    <Skeleton height={18} width={"100%"} />
+                </Box>
+            </Group>
+            <Group justify="space-between" grow py={5}>
+                <Group>
+                    <ActionIcon
+                        variant="light"
+                        bg={"#DCEED8"}
+                        size={28}
+                        radius={100}
+                        aria-label="icon"
+                    >
+                        <Skeleton height={20} width={40} />
+                    </ActionIcon>
+                    <Box>
+                        <Skeleton height={18} width={80} />
+                    </Box>
+                </Group>
+                <Box>
+                    <Skeleton height={18} width={"100%"} />
+                </Box>
+            </Group>
+            <Group justify="space-between" grow py={5}>
+                <Group>
+                    <ActionIcon
+                        variant="light"
+                        bg={"#DCEED8"}
+                        size={28}
+                        radius={100}
+                        aria-label="icon"
+                    >
+                        <Skeleton height={20} width={40} />
+                    </ActionIcon>
+                    <Box>
+                        <Skeleton height={18} width={80} />
+                    </Box>
+                </Group>
+                <Box>
+                    <Skeleton height={18} width={"100%"} />
+                </Box>
+            </Group>
+        </Box>
+    );
+}
+

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 SkeletonDetailProfile from "./components/skeleton_detail_profile";
 import SkeletonSingle from "./components/skeleton_single";
 import { funUploadFile } from "./fun/upload-file";
 import { WARNA } from "./fun/WARNA";
@@ -27,3 +28,4 @@ export { SkeletonSingle }
 export { SkeletonDetailDiscussionComment }
 export { SkeletonDetailDiscussionMember }
 export { funUploadFile }
+export { SkeletonDetailProfile }

src/module/announcement/ui/detail_announcement.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { Box, Flex, Grid, Group, List, Skeleton, Spoiler, Stack, Text } from "@mantine/core";
+import { ActionIcon, Box, Flex, Grid, Group, List, Skeleton, Spoiler, Stack, Text } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useState } from "react";
 import { BsCardText } from "react-icons/bs";
@@ -12,7 +12,7 @@ import toast from "react-hot-toast";
 export default function DetailAnnouncement({ id }: { id: string }) {
    const [isData, setIsData] = useState<IAnnouncement>()
    const [isMember, setIsMember] = useState<any>({})
-   const [loading, setLoading] = useState(false)
+   const [loading, setLoading] = useState(true)
 
    async function fetchOneAnnouncement() {
       try {
@@ -41,36 +41,59 @@ export default function DetailAnnouncement({ id }: { id: string }) {
    return (
       <Box py={30} px={20}>
          <Box p={20} style={{ borderRadius: 10, border: '1px solid #E5E5E5' }} bg={'white'} >
+            {loading ?
+               <Stack>
+                  <Group>
+                     <ActionIcon
+                        variant="light"
+                        bg={"#DCEED8"}
+                        size={30}
+                        radius={100}
+                        aria-label="icon"
+                     >
+                        <Skeleton height={25} width={40} />
+                     </ActionIcon>
+                     <Box>
+                        <Skeleton height={18} width={150} />
+                     </Box>
+                  </Group>
+                  <Grid gutter={'md'}>
+                     <Grid.Col span={1}>
+                        <ActionIcon
+                           variant="light"
+                           bg={"#DCEED8"}
+                           size={30}
+                           radius={100}
+                           aria-label="icon"
+                        >
+                           <Skeleton height={25} width={40} />
+                        </ActionIcon>
+                     </Grid.Col>
+                     <Grid.Col span={11}>
+                        <Spoiler maxHeight={100} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
+                           <Skeleton mt={5} ml={5} height={18} width={150} />
+                        </Spoiler>
+                     </Grid.Col>
+                  </Grid>
+               </Stack>
+               :
                <Stack>
                   <Group>
                      <TfiAnnouncement size={25} />
-                  {
+                     <Text fw={'bold'}>{isData?.title}</Text>
-                     loading ?
-                        <Skeleton height={10} radius="md" m={0} width={200} />
-                        : <Text fw={'bold'}>{isData?.title}</Text>
-                  }
-
                   </Group>
                   <Grid gutter={'md'}>
                      <Grid.Col span={1}>
                         <BsCardText size={25} />
                      </Grid.Col>
                      <Grid.Col span={11}>
-                     {
+                        <Spoiler maxHeight={100} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
-                        loading ? Array(3)
-                           .fill(null)
-                           .map((_, i) => (
-                              <Skeleton key={i} height={10} radius="md" mb={5} width={"100%"} />
-                           ))
-
-                           : <Spoiler maxHeight={100} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
                            <Text>{isData?.desc}</Text>
                         </Spoiler>
-                     }
-
                      </Grid.Col>
                   </Grid>
                </Stack>
+            }
          </Box>
          <Box my={15} p={20} style={{ borderRadius: 10, border: '1px solid #E5E5E5' }} bg={'white'} >
 

src/module/announcement/ui/list_announcement.tsx

@@ -65,13 +65,13 @@ export default function ListAnnouncement() {
                   </Box>
                ))
             : (isData.length === 0) ?
-               <Stack align="stretch" justify="center" w={"100%"} h={200}>
+               <Stack align="stretch" justify="center" w={"100%"} h={"60vh"}>
                   <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada pengumuman</Text>
                </Stack>
                :
                isData.map((v, i) => {
                   return (
-                     <Box key={i} mt={15}>
+                     <Box key={i} mt={20}>
                         <Box >
                            <Grid>
                               <Grid.Col span={2}>

src/module/division_new/ui/list_division.tsx

@@ -1,6 +1,6 @@
 'use client'
 import { LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
-import { ActionIcon, Avatar, Box, Card, Center, Divider, Flex, Grid, Group, Text, TextInput, Title } from '@mantine/core';
+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';
 import { HiMenu } from 'react-icons/hi';
@@ -21,6 +21,8 @@ export default function ListDivision() {
   const [searchQuery, setSearchQuery] = useState('')
   const searchParams = useSearchParams()
   const group = searchParams.get('group')
+  const [loading, setLoading] = useState(true)
+
 
   const handleList = () => {
     setIsList(!isList)
@@ -29,6 +31,7 @@ export default function ListDivision() {
   const fetchData = async (search: string) => {
     try {
       setData([]);
+      setLoading(true);
       const response = await funGetAllDivision('?search=' + search + '&group=' + group)
 
       if (response.success) {
@@ -37,10 +40,12 @@ export default function ListDivision() {
       } else {
         toast.error(response.message);
       }
-
+      setLoading(false);
     } catch (error) {
       toast.error("Gagal mendapatkan divisi, coba lagi nanti");
       console.error(error);
+    } finally {
+      setLoading(false);
     }
   };
 
@@ -142,7 +147,7 @@ export default function ListDivision() {
                       </Box>
                     </Card.Section>
                     <Box pt={10}>
-                      <Text>{v.desc}</Text>
+                      <Text lineClamp={2}>{v.desc}</Text>
                       <Group align='center' pt={10} justify='flex-end'>
                         <Avatar.Group>
                           <Avatar>

src/module/group/ui/list_group_active.tsx

@@ -16,6 +16,7 @@ import { useShallowEffect } from "@mantine/hooks";
 import { funGetAllGroup } from "../lib/api_group";
 import { IDataGroup } from "../lib/type_group";
 import { useSearchParams } from "next/navigation";
+import _ from "lodash";
 
 
 export default function ListGroupActive() {
@@ -80,7 +81,14 @@ export default function ListGroupActive() {
               <SkeletonSingle />
             </Box>
           ))
-        : isData.map((v, i) => {
+        :
+        _.isEmpty(isData)
+          ?
+          <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '60vh' }}>
+             <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada grup</Text>
+          </Box>
+          :
+          isData.map((v, i) => {
             return (
               <Box pt={20} key={i}>
                 <Group

src/module/home/view/view_detail_feature.tsx

@@ -73,7 +73,7 @@ export default function ViewDetailFeature() {
                 <Text fz={15} c={WARNA.biruTua}>Anggota</Text>
               </Center>
             </Box>
-            <Box onClick={() => router.push('/position')}>
+            <Box onClick={() => router.push('position?active=true')}>
               <Center>
                 <ActionIcon variant="gradient"
                   size={68}

src/module/position/ui/list_position_active.tsx

@@ -64,6 +64,11 @@ export default function ListPositionActive() {
           <SkeletonSingle />
         </Box>
       )) :
+        _.isEmpty(isDataPosition) ?
+          <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '60vh' }}>
+             <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada jabatan</Text>
+          </Box>
+          :
           isDataPosition.map((v, i) => {
             return (
               <Box pt={20} key={i}>

src/module/task/ui/add_member_detail_task.tsx

@@ -120,8 +120,6 @@ export default function AddMemberDetailTask() {
             title="Pilih Anggota"
             menu
          />
-               <pre>{JSON.stringify(isData, null, 1)}</pre>
-               <pre>{JSON.stringify(isDataMember, null, 1)}</pre>
          <Box p={20}>
             {/* <TextInput
           styles={{

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

@@ -1,6 +1,6 @@
 'use client'
-import { LayoutNavbarHome, LayoutIconBack, WARNA, LayoutDrawer } from "@/module/_global";
+import { LayoutNavbarHome, LayoutIconBack, WARNA, LayoutDrawer, SkeletonDetailProfile } from "@/module/_global";
-import { Box, Group, ActionIcon, Stack, Text, Center, Avatar } from "@mantine/core";
+import { Box, Group, ActionIcon, Stack, Text, Center, Avatar, Skeleton } from "@mantine/core";
 import { HiMenu } from "react-icons/hi";
 import { HiUser } from "react-icons/hi2";
 import DrawerDetailMember from "./drawer_detail_member";
@@ -21,6 +21,7 @@ export default function NavbarDetailMember({ id }: IMember) {
    const [dataOne, setDataOne] = useState<IListMember>()
    const [selectId, setSelectId] = useState<string>('');
    const [active, setActive] = useState<boolean>(false)
+   const [loading, setLoading] = useState(true)
 
    useShallowEffect(() => {
       featchGetOne()
@@ -29,6 +30,7 @@ export default function NavbarDetailMember({ id }: IMember) {
 
    async function featchGetOne() {
       try {
+         setLoading(true)
          const respose = await funGetOneMember(id)
          if (respose.success) {
             setDataOne(respose.data)
@@ -37,9 +39,13 @@ export default function NavbarDetailMember({ id }: IMember) {
          } else {
             toast.error(respose.message)
          }
+
+         setLoading(false)
       } catch (error) {
          console.error(error)
          toast.error("Gagal mendapatkan detail user, coba lagi nanti");
+      } finally {
+         setLoading(false)
       }
    }
 
@@ -62,10 +68,23 @@ export default function NavbarDetailMember({ id }: IMember) {
                   <Center>
                      <Avatar src={'https://i.pravatar.cc/1000?img=25'} alt="it's me" size="xl" />
                   </Center>
+                  {loading ? 
+                     <>
+                     <Skeleton height={25} mt={10} width={"40%"} />
+                     <Skeleton height={15} mt={12} width={"30%"} />
+                     </>
+                  :
+                     <>
                         <Text c={'white'} fw={'bold'} fz={25}>{dataOne?.name}</Text>
                         <Text c={'white'} fw={'lighter'} fz={15}>{dataOne?.group} - {dataOne?.position}</Text>
+                     </>
+                  }
                </Stack>
             </LayoutNavbarHome>
+            {loading
+               ? 
+               <SkeletonDetailProfile />
+               :
                <Box p={20}>
                   <Group justify="space-between" grow py={5}>
                      <Group>
@@ -98,6 +117,7 @@ export default function NavbarDetailMember({ id }: IMember) {
                      </Text>
                   </Group>
                </Box>
+            }
             <LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>
                <DrawerDetailMember id={selectId} status={active} onDeleted={() => setOpen(false)} />
             </LayoutDrawer>

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

@@ -1,5 +1,5 @@
 
-import { WARNA } from "@/module/_global"
+import { SkeletonSingle, WARNA } from "@/module/_global"
 import { Box, Group, ActionIcon, Text, TextInput } from "@mantine/core"
 import { useShallowEffect } from "@mantine/hooks"
 import { useRouter, useSearchParams } from "next/navigation"
@@ -54,7 +54,21 @@ export default function TabListMember() {
                onChange={(e) => setSearchQuery(e.target.value)}
                my={10}
             />
-            {dataMember.map((v, i) => {
+            {loading
+               ? Array(6)
+                  .fill(null)
+                  .map((_, i) => (
+                     <Box key={i}>
+                        <SkeletonSingle />
+                     </Box>
+                  ))
+               :
+               dataMember.length == 0 ?
+                  <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '60vh' }}>
+                      <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text>
+                  </Box>
+                  :
+                  dataMember.map((v, i) => {
                      return (
                         <Box pt={20} key={i} onClick={() => {
                            router.push(`/member/${v.id}`)
@@ -75,7 +89,8 @@ export default function TabListMember() {
                            </Group>
                         </Box>
                      )
-            })}
+                  })
+            }
          </Box>
       </>
    )