From 0db13c9e5ec38bdcc41dcd24de805241c5c8aab0 Mon Sep 17 00:00:00 2001
From: lukman <lukman@lukmans-MacBook-Air.local>
Date: Mon, 23 Sep 2024 15:28:30 +0800
Subject: [PATCH] style : update style

---
 .../_global/components/skeleton_list.tsx      |  21 +++
 .../_global/components/skeleton_user.tsx      |  22 +++
 src/module/_global/index.ts                   |   4 +
 .../announcement/ui/list_announcement.tsx     |  17 +-
 .../calender/ui/create_user_calender.tsx      |   2 +-
 .../ui/create_user_detail_calender.tsx        |   2 +-
 src/module/calender/ui/update_list_users.tsx  |   2 +-
 .../ui/create_anggota_division.tsx            |   2 +-
 .../division_new/ui/navbar_create_users.tsx   |   2 +-
 .../project/ui/add_member_detail_project.tsx  |   2 +-
 .../project/ui/create_date_end_task.tsx       |   6 +-
 src/module/project/ui/create_project.tsx      |  17 +-
 .../project/ui/create_users_project.tsx       |  37 ++--
 src/module/project/ui/list_project.tsx        | 161 +++++++++---------
 src/module/task/ui/add_member_detail_task.tsx |   2 +-
 src/module/task/ui/create_users_project.tsx   |   2 +-
 src/module/user/member/ui/tab_list_member.tsx |  34 +---
 17 files changed, 187 insertions(+), 148 deletions(-)
 create mode 100644 src/module/_global/components/skeleton_list.tsx
 create mode 100644 src/module/_global/components/skeleton_user.tsx

diff --git a/src/module/_global/components/skeleton_list.tsx b/src/module/_global/components/skeleton_list.tsx
new file mode 100644
index 0000000..a61bb3c
--- /dev/null
+++ b/src/module/_global/components/skeleton_list.tsx
@@ -0,0 +1,21 @@
+import { Box, Divider, Grid, Skeleton } from '@mantine/core';
+import React from 'react';
+
+export default function SkeletonList() {
+  return (
+    <div>
+      <Box>
+        <Grid p={10} align="center">
+          <Grid.Col span={2}>
+            <Skeleton w={50} h={50} radius={100} />
+          </Grid.Col>
+          <Grid.Col span={9}>
+            <Skeleton w={"80%"} h={20} />
+          </Grid.Col>
+        </Grid>
+      </Box>
+      <Divider my={2} />
+    </div >
+  );
+}
+
diff --git a/src/module/_global/components/skeleton_user.tsx b/src/module/_global/components/skeleton_user.tsx
new file mode 100644
index 0000000..899dfac
--- /dev/null
+++ b/src/module/_global/components/skeleton_user.tsx
@@ -0,0 +1,22 @@
+import { Box, Divider, Grid, Skeleton } from '@mantine/core';
+import React from 'react';
+
+export default function SkeletonUser() {
+  return (
+    <div>
+      <Box>
+        <Grid p={10} align="center">
+          <Grid.Col span={2}>
+            <Skeleton w={50} h={50} radius={100} />
+          </Grid.Col>
+          <Grid.Col span={9}>
+            <Skeleton w={"50%"} h={20} />
+            <Skeleton mt={5} w={"30%"} h={10} />
+          </Grid.Col>
+        </Grid>
+      </Box>
+      <Divider my={10} />
+    </div>
+  );
+}
+
diff --git a/src/module/_global/index.ts b/src/module/_global/index.ts
index 3f987f4..cc3e59a 100644
--- a/src/module/_global/index.ts
+++ b/src/module/_global/index.ts
@@ -25,6 +25,8 @@ import ViewFilter from "./view/view_filter";
 import mtqq_client from "./bin/mqtt_client"
 import NotificationCustome from "./components/notification_custome";
 import { ScrollProvider } from "./components/scroll_provider";
+import SkeletonUser from "./components/skeleton_user";
+import SkeletonList from "./components/skeleton_list";
 
 export { WARNA };
 export { LayoutLogin };
@@ -58,3 +60,5 @@ export { ReloadButtonTop }
 export { NotificationCustome }
 export { ScrollProvider }
 export { currentScroll }
+export { SkeletonUser }
+export { SkeletonList }
diff --git a/src/module/announcement/ui/list_announcement.tsx b/src/module/announcement/ui/list_announcement.tsx
index 966d95e..93f3f89 100644
--- a/src/module/announcement/ui/list_announcement.tsx
+++ b/src/module/announcement/ui/list_announcement.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { currentScroll, globalNotifPage, SkeletonSingle, TEMA, WARNA } from '@/module/_global';
+import { currentScroll, globalNotifPage, SkeletonSingle, SkeletonUser, TEMA, WARNA } from '@/module/_global';
 import { ActionIcon, Box, Center, Divider, Grid, Group, Spoiler, Stack, Text, TextInput } from '@mantine/core';
 import React, { useEffect, useState } from 'react';
 import { TfiAnnouncement } from "react-icons/tfi";
@@ -63,13 +63,6 @@ export default function ListAnnouncement() {
    }, [isPage])
 
 
-   // useShallowEffect(() => {
-   //    if (load.get().category == "announcement") {
-   //       console.log('masuk sinii', load.get().load)
-   //       fetchData()
-   //    }
-   // }, [load.get().load])
-
 
    useEffect(() => {
       const handleScroll = async () => {
@@ -111,8 +104,8 @@ export default function ListAnnouncement() {
             ? Array(6)
                .fill(null)
                .map((_, i) => (
-                  <Box key={i}>
-                     <SkeletonSingle />
+                  <Box key={i} mt={10}>
+                     <SkeletonUser />
                   </Box>
                ))
             : (isData.length === 0) ?
@@ -135,7 +128,7 @@ export default function ListAnnouncement() {
                               <Grid.Col span={10}>
                                  <Grid onClick={() => {
                                     router.push(`/announcement/${v.id}`)
-                                 }} mb={10}>
+                                 }}>
                                     <Grid.Col span={{
                                        base: 7,
                                        xl: 8
@@ -158,7 +151,7 @@ export default function ListAnnouncement() {
                               </Grid.Col>
                            </Grid>
                         </Box>
-                        <Divider my={15} />
+                        <Divider my={20} />
                      </Box>
                   )
                })}
diff --git a/src/module/calender/ui/create_user_calender.tsx b/src/module/calender/ui/create_user_calender.tsx
index f538ef0..e2e506b 100644
--- a/src/module/calender/ui/create_user_calender.tsx
+++ b/src/module/calender/ui/create_user_calender.tsx
@@ -176,7 +176,7 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
         borderBottom: `1px solid ${"#E0DFDF"}`
       }}>
         {selectedFiles.length > 0 ? (
-          <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
+          <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withControls={false}>
             {selectedFiles.map((v: any, i: any) => {
               return (
                 <Carousel.Slide key={i}>
diff --git a/src/module/calender/ui/create_user_detail_calender.tsx b/src/module/calender/ui/create_user_detail_calender.tsx
index a2a31e9..e5c338f 100644
--- a/src/module/calender/ui/create_user_detail_calender.tsx
+++ b/src/module/calender/ui/create_user_detail_calender.tsx
@@ -183,7 +183,7 @@ export default function CreateUserDetailCalender() {
         borderBottom: `1px solid ${"#E0DFDF"}`
       }}>
         {selectedFiles.length > 0 ? (
-          <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
+          <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withControls={false}>
             {selectedFiles.map((v: any, i: any) => {
               return (
                 <Carousel.Slide key={i}>
diff --git a/src/module/calender/ui/update_list_users.tsx b/src/module/calender/ui/update_list_users.tsx
index 7fcd86c..c59a38b 100644
--- a/src/module/calender/ui/update_list_users.tsx
+++ b/src/module/calender/ui/update_list_users.tsx
@@ -170,7 +170,7 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
         borderBottom: `1px solid ${"#E0DFDF"}`
       }}>
         {selectedFiles.length > 0 ? (
-          <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
+          <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"}  withControls={false}>
             {selectedFiles.map((v: any, i: any) => {
               return (
                 <Carousel.Slide key={i}>
diff --git a/src/module/division_new/ui/create_anggota_division.tsx b/src/module/division_new/ui/create_anggota_division.tsx
index 577457e..64910df 100644
--- a/src/module/division_new/ui/create_anggota_division.tsx
+++ b/src/module/division_new/ui/create_anggota_division.tsx
@@ -148,7 +148,7 @@ export default function CreateAnggotaDivision() {
         borderBottom: `1px solid ${"#E0DFDF"}`
       }}>
         {selectedFiles.length > 0 ? (
-          <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
+          <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"}  withControls={false}>
             {selectedFiles.map((v: any, i: any) => {
               return (
                 <Carousel.Slide key={i}>
diff --git a/src/module/division_new/ui/navbar_create_users.tsx b/src/module/division_new/ui/navbar_create_users.tsx
index 38b3cba..6727c42 100644
--- a/src/module/division_new/ui/navbar_create_users.tsx
+++ b/src/module/division_new/ui/navbar_create_users.tsx
@@ -134,7 +134,7 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
           borderBottom: `1px solid ${"#E0DFDF"}`
         }}>
           {selectedFiles.length > 0 ? (
-            <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
+            <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"}  withControls={false}>
               {selectedFiles.map((v: any, i: any) => {
                 return (
                   <Carousel.Slide key={i}>
diff --git a/src/module/project/ui/add_member_detail_project.tsx b/src/module/project/ui/add_member_detail_project.tsx
index a8ecaac..952de33 100644
--- a/src/module/project/ui/add_member_detail_project.tsx
+++ b/src/module/project/ui/add_member_detail_project.tsx
@@ -176,7 +176,7 @@ export default function AddMemberDetailProject() {
         borderBottom: `1px solid ${"#E0DFDF"}`
       }}>
         {selectedFiles.length > 0 ? (
-          <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
+          <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withControls={false}>
             {selectedFiles.map((v: any, i: any) => {
               return (
                 <Carousel.Slide key={i}>
diff --git a/src/module/project/ui/create_date_end_task.tsx b/src/module/project/ui/create_date_end_task.tsx
index 0310803..d5b6155 100644
--- a/src/module/project/ui/create_date_end_task.tsx
+++ b/src/module/project/ui/create_date_end_task.tsx
@@ -58,7 +58,7 @@ export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: bool
             <HiChevronLeft size={20} color='white' />
           </ActionIcon>
         </Box>
-      } title={"Tanggal Tugas"} menu />
+      } title={"Tanggal dan Tugas"} menu />
       <Box p={20}>
         <Group
           justify="center"
@@ -107,7 +107,7 @@ export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: bool
                 borderRadius: 10,
               },
             }}
-            placeholder="Input Nama Tahapan"
+            placeholder="Input Judul Tahapan"
             label="Judul Tahapan"
             required
             size="md"
@@ -119,7 +119,7 @@ export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: bool
             onBlur={() => setTouched({ ...touched, title: true })}
             error={
               touched.title && (
-                title == "" ? "Judul Tidak Boleh Kosong" : null
+                title == "" ? "Judul Tahapan Tidak Boleh Kosong" : null
               )
             }
           />
diff --git a/src/module/project/ui/create_project.tsx b/src/module/project/ui/create_project.tsx
index 45ab3dd..723f5ec 100644
--- a/src/module/project/ui/create_project.tsx
+++ b/src/module/project/ui/create_project.tsx
@@ -138,15 +138,20 @@ export default function CreateProject() {
     <Box>
       <LayoutNavbarNew back="/project" title="tambah Kegiatan" menu />
       <Box p={20}>
-        <Stack>
+        <Box>
           {
             (roleLogin.get() == "supadmin") && (
               <Select
                 placeholder="Grup"
                 label="Grup"
                 size="md"
+                styles={{
+                  input: {
+                    border: `1px solid ${"#D6D8F6"}`,
+                    borderRadius: 10,
+                  },
+                }}
                 required
-                radius={40}
                 data={dataGroup?.map((pro: any) => ({
                   value: String(pro.id),
                   label: pro.name
@@ -174,6 +179,7 @@ export default function CreateProject() {
                 borderRadius: 10,
               },
             }}
+            mt={10}
             required withAsterisk
             placeholder="Nama Kegiatan"
             size="md"
@@ -189,7 +195,7 @@ export default function CreateProject() {
               )
             }
           />
-          <Box onClick={() => { setOpenTugas(true) }}>
+          <Box onClick={() => { setOpenTugas(true) }} mt={15}>
             <Group
               justify="space-between"
               p={10}
@@ -213,11 +219,12 @@ export default function CreateProject() {
               // setOpenDrawer(true)
               openRef.current?.()
             }
+            mt={15}
           >
             <Text>Upload File</Text>
             <IoIosArrowDropright size={25} />
           </Group>
-          <Box onClick={() => { onToChooseAnggota() }}>
+          <Box onClick={() => { onToChooseAnggota() }} mt={15}>
             <Group
               justify="space-between"
               p={10}
@@ -230,7 +237,7 @@ export default function CreateProject() {
               <IoIosArrowDropright size={25} />
             </Group>
           </Box>
-        </Stack>
+        </Box>
         <Box pb={100}>
 
           {
diff --git a/src/module/project/ui/create_users_project.tsx b/src/module/project/ui/create_users_project.tsx
index ca6718a..45cf376 100644
--- a/src/module/project/ui/create_users_project.tsx
+++ b/src/module/project/ui/create_users_project.tsx
@@ -1,8 +1,8 @@
 "use client"
-import { LayoutNavbarNew, SkeletonSingle, TEMA } from '@/module/_global';
+import { LayoutNavbarNew, SkeletonList, SkeletonSingle, SkeletonUser, TEMA } from '@/module/_global';
 import { useHookstate } from '@hookstate/core';
 import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Indicator, Input, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
 import { useRouter } from 'next/navigation';
 import React, { useState } from 'react';
 import { HiChevronLeft, HiMagnifyingGlass } from 'react-icons/hi2';
@@ -24,6 +24,7 @@ export default function CreateUsersProject({ grup, onClose }: { grup?: string, o
   const [openTugas, setOpenTugas] = useState(false)
   const [onClickSearch, setOnClickSearch] = useState(false)
   const tema = useHookstate(TEMA)
+  const isMobile2 = useMediaQuery("(max-width: 438px)");
 
   const handleFileClick = (index: number) => {
     if (selectedFiles.some((i: any) => i.idUser == dataMember[index].id)) {
@@ -136,7 +137,7 @@ export default function CreateUsersProject({ grup, onClose }: { grup?: string, o
         borderBottom: `1px solid ${"#E0DFDF"}`
       }}>
         {selectedFiles.length > 0 ? (
-          <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
+          <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"}  withControls={false}>
             {selectedFiles.map((v: any, i: any) => {
               return (
                 <Carousel.Slide key={i}>
@@ -175,35 +176,43 @@ export default function CreateUsersProject({ grup, onClose }: { grup?: string, o
                 .fill(null)
                 .map((_, i) => (
                   <Box key={i}>
-                    <SkeletonSingle />
+                    <SkeletonList />
                   </Box>
                 ))
               :
               dataMember.map((v, index) => {
                 const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id);
                 return (
-                  <Box mb={15} key={index} onClick={() => handleFileClick(index)}>
+                  <Box mb={10} key={index} onClick={() => handleFileClick(index)}>
                     <Grid align='center'>
-                      <Grid.Col span={{
-                        base: 3,
-                        xl: 2
-                      }}>
+                      <Grid.Col  span={{
+                          base: 1,
+                          xs: 1,
+                          sm: 1,
+                          md: 1,
+                          lg: 1,
+                          xl: 1,
+                        }}>
                         <Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
                       </Grid.Col>
                       <Grid.Col span={{
-                        base: 9,
-                        xl: 10
-                      }}>
+                          base: 11,
+                          xs: 11,
+                          sm: 11,
+                          md: 11,
+                          lg: 11,
+                          xl: 11,
+                        }}>
                         <Flex justify='space-between' align={"center"}>
                           <Flex direction={'column'} align="flex-start" justify="flex-start">
-                            <Text lineClamp={1}>{v.name}</Text>
+                            <Text lineClamp={1} pl={isMobile2 ? 40 : 30}>{v.name}</Text>
                           </Flex>
                           {isSelected ? <FaCheck /> : null}
                         </Flex>
                       </Grid.Col>
                     </Grid>
                     <Box mt={10}>
-                      <Divider size={"xs"} />
+                      <Divider my={10} />
                     </Box>
                   </Box>
                 );
diff --git a/src/module/project/ui/list_project.tsx b/src/module/project/ui/list_project.tsx
index 0739605..1cd8e71 100644
--- a/src/module/project/ui/list_project.tsx
+++ b/src/module/project/ui/list_project.tsx
@@ -1,5 +1,5 @@
 "use client"
-import { currentScroll, globalRole, TEMA, WARNA } from '@/module/_global';
+import { currentScroll, globalRole, SkeletonList, SkeletonUser, TEMA, WARNA } from '@/module/_global';
 import { ActionIcon, Avatar, Badge, Box, Card, Center, Divider, Flex, Grid, Group, Skeleton, Text, TextInput, Title } from '@mantine/core';
 import { useRouter, useSearchParams } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
@@ -123,86 +123,91 @@ export default function ListProject() {
         </Grid.Col>
       </Grid>
       <Box pt={20}>
-        {roleLogin.get() == 'supadmin' && <Text>Filter by: {nameGroup}</Text>}
-        {loading ?
-          <Box>
-            <Skeleton width={"100%"} height={100} radius={"md"} />
-          </Box>
-          :
-          <Box bg={tema.get().bgTotalKegiatan} p={10} style={{ borderRadius: 10 }}>
-            <Text fw={'bold'} c={tema.get().utama}>Total Kegiatan</Text>
-            <Flex justify={'center'} align={'center'} h={'100%'}>
-              <Text fz={40} fw={'bold'} c={tema.get().utama}>{totalData}</Text>
-            </Flex>
-          </Box>
-        }
+        {roleLogin.get() == 'supadmin' && <Text mb={5}>Filter by: {nameGroup}</Text>}
+        <Box bg={tema.get().bgTotalKegiatan} p={10} style={{ borderRadius: 10 }}>
+          <Text fw={'bold'} c={tema.get().utama}>Total Kegiatan</Text>
+          <Flex justify={'center'} align={'center'} h={'100%'}>
+            <Text fz={40} fw={'bold'} c={tema.get().utama}>{totalData}</Text>
+          </Flex>
+        </Box>
         {isList ? (
           <Box pt={20}>
-            {isData.map((v, i) => {
-              return (
-                <Box key={i}>
-                  <Grid align='center' onClick={() => router.push(`/project/${v.id}`)}>
-                    <Grid.Col span={{
-                      base: 1,
-                      xs: 1,
-                      sm: 1,
-                      md: 1,
-                      lg: 1,
-                      xl: 1
-                    }}>
-                      <Group >
-                        <Center>
-                          <ActionIcon
-                            variant="gradient"
-                            size={50}
-                            aria-label="Gradient action icon"
-                            radius={100}
-                            // gradient={{
-                            //   from: '#DFDA7C',
-                            //   to: '#F2AF46',
-                            //   deg: 174
-                            // }}
-                            bg={tema.get().bgFiturHome}
-                          >
-                            <HiMiniPresentationChartBar size={25} color={tema.get().utama} />
-                          </ActionIcon>
-                        </Center>
-                      </Group>
-                    </Grid.Col>
-                    <Grid.Col span={{
-                      base: 11,
-                      xs: 11,
-                      sm: 11,
-                      md: 11,
-                      lg: 11,
-                      xl: 11,
-                    }}>
-                      <Group justify='space-between' align='center'>
-                        <Box>
-                          <Box w={{
-                            base: isMobile ? 200 : 230,
-                            xl: 430
-                          }}>
-                            <Text truncate="end" pl={paddingLift ? 30 : 20}>
-                              {v.title}
-                            </Text>
-                          </Box>
-
-                        </Box>
-                        <RiCircleFill size={12} color={
-                          v.status === 0 ? '#1372C4' :
-                            v.status === 1 ? '#C5771A' :
-                              v.status === 2 ? '#0B6025' :
-                                v.status === 3 ? '#BB1F1F' :
-                                  ""
-                        } />
-                      </Group>
-                    </Grid.Col>
-                  </Grid>
-                  <Divider my="sm" />
+            {loading ?
+              Array(3)
+                .fill(null)
+                .map((_, i) => (
+                  <Box key={i}>
+                    <SkeletonList/>
+                  </Box>
+                ))
+              :
+              _.isEmpty(isData)
+                ?
+                <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
+                  <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada Kegiatan</Text>
                 </Box>
-              );
-            })}
+                :
+                  isData.map((v, i) => {
+                    return (
+                      <Box key={i}>
+                        <Grid align='center' onClick={() => router.push(`/project/${v.id}`)}>
+                          <Grid.Col span={{
+                            base: 1,
+                            xs: 1,
+                            sm: 1,
+                            md: 1,
+                            lg: 1,
+                            xl: 1
+                          }}>
+                            <Group >
+                              <Center>
+                                <ActionIcon
+                                  variant="gradient"
+                                  size={50}
+                                  aria-label="Gradient action icon"
+                                  radius={100}
+                                  bg={tema.get().bgFiturHome}
+                                >
+                                  <HiMiniPresentationChartBar size={25} color={tema.get().utama} />
+                                </ActionIcon>
+                              </Center>
+                            </Group>
+                          </Grid.Col>
+                          <Grid.Col span={{
+                            base: 11,
+                            xs: 11,
+                            sm: 11,
+                            md: 11,
+                            lg: 11,
+                            xl: 11,
+                          }}>
+                            <Group justify='space-between' align='center'>
+                              <Box>
+                                <Box w={{
+                                  base: isMobile ? 200 : 230,
+                                  xl: 430
+                                }}>
+                                  <Text truncate="end" pl={paddingLift ? 30 : 20}>
+                                    {v.title}
+                                  </Text>
+                                </Box>
+
+                              </Box>
+                              <RiCircleFill size={12} color={
+                                v.status === 0 ? '#1372C4' :
+                                  v.status === 1 ? '#C5771A' :
+                                    v.status === 2 ? '#0B6025' :
+                                      v.status === 3 ? '#BB1F1F' :
+                                        ""
+                              } />
+                            </Group>
+                          </Grid.Col>
+                        </Grid>
+                        <Divider my="sm" />
+                      </Box>
+                    );
+                  })
+                }
           </Box>
         ) : (
           <Box pt={20}>
diff --git a/src/module/task/ui/add_member_detail_task.tsx b/src/module/task/ui/add_member_detail_task.tsx
index dc9b7ef..bdd3a28 100644
--- a/src/module/task/ui/add_member_detail_task.tsx
+++ b/src/module/task/ui/add_member_detail_task.tsx
@@ -211,7 +211,7 @@ export default function AddMemberDetailTask() {
             borderBottom: `1px solid ${"#E0DFDF"}`
          }}>
             {selectedFiles.length > 0 ? (
-               <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
+               <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"}  withControls={false}>
                   {selectedFiles.map((v: any, i: any) => {
                      return (
                         <Carousel.Slide key={i}>
diff --git a/src/module/task/ui/create_users_project.tsx b/src/module/task/ui/create_users_project.tsx
index d932796..afd1c67 100644
--- a/src/module/task/ui/create_users_project.tsx
+++ b/src/module/task/ui/create_users_project.tsx
@@ -192,7 +192,7 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
         borderBottom: `1px solid ${"#E0DFDF"}`
       }}>
         {selectedFiles.length > 0 ? (
-          <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
+          <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"}  withControls={false}>
             {selectedFiles.map((v: any, i: any) => {
               return (
                 <Carousel.Slide key={i}>
diff --git a/src/module/user/member/ui/tab_list_member.tsx b/src/module/user/member/ui/tab_list_member.tsx
index cbef9d2..7b12e81 100644
--- a/src/module/user/member/ui/tab_list_member.tsx
+++ b/src/module/user/member/ui/tab_list_member.tsx
@@ -1,4 +1,4 @@
-import { currentScroll, globalRole, SkeletonSingle, TEMA } from "@/module/_global"
+import { currentScroll, globalRole, SkeletonSingle, SkeletonUser, TEMA } from "@/module/_global"
 import { Box, Text, TextInput, Divider, Avatar, Grid, Group, ActionIcon, Skeleton } from "@mantine/core"
 import { useShallowEffect } from "@mantine/hooks"
 import { useRouter, useSearchParams } from "next/navigation"
@@ -100,35 +100,13 @@ export default function TabListMember() {
             />
             {roleLogin.get() == 'supadmin' && <Text mt={10}>Filter by: {nameGroup}</Text>}
             {loading
-               ? Array(6)
+               ?
+               Array(6)
                   .fill(null)
                   .map((_, i) => (
-                     <Box key={i} mb={20}>
-                        <Group
-                           align="center"
-                           style={{
-                              border: `1px solid ${tema.get().bgTotalKegiatan}`,
-                              padding: 10,
-                              borderRadius: 10,
-                              cursor: "pointer",
-                           }}
-                        >
-                           <Box>
-                              <ActionIcon
-                                 variant="light"
-                                 bg={tema.get().bgTotalKegiatan}
-                                 size={50}
-                                 radius={100}
-                                 aria-label="icon"
-                              >
-                                 <Skeleton height={25} width={25} />
-                              </ActionIcon>
-                           </Box>
-                           <Box>
-                              <Skeleton height={20} width={100} />
-                           </Box>
-                        </Group>
-                     </Box>
+                     <Box key={i} mb={10}>
+                     <SkeletonUser/>
+                   </Box>
                   ))
                :
                <Box>