style : update style

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 >
+  );
+}
+

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>
+  );
+}
+

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 }

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}>
+                  <Box key={i} mt={10}>
-                     <SkeletonSingle />
+                     <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>
                   )
                })}

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}>

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}>

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}>

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}>

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}>

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}>

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
               )
             }
           />

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}>
 
           {

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,
+                          base: 1,
-                        xl: 2
+                          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,
+                          base: 11,
-                        xl: 10
+                          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>
                 );

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,22 +123,31 @@ export default function ListProject() {
         </Grid.Col>
       </Grid>
       <Box pt={20}>
-        {roleLogin.get() == 'supadmin' && <Text>Filter by: {nameGroup}</Text>}
+        {roleLogin.get() == 'supadmin' && <Text mb={5}>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>
-        }
         {isList ? (
           <Box pt={20}>
-            {isData.map((v, i) => {
+            {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}`)}>
@@ -157,11 +166,6 @@ export default function ListProject() {
                                   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} />
@@ -202,7 +206,8 @@ export default function ListProject() {
                         <Divider my="sm" />
                       </Box>
                     );
-            })}
+                  })
+                }
           </Box>
         ) : (
           <Box pt={20}>

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}>

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}>

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,34 +100,12 @@ 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}>
+                     <Box key={i} mb={10}>
-                        <Group
+                     <SkeletonUser/>
-                           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>
                   ))
                :