style : update style

src/module/calender/ui/create_user_calender.tsx

@@ -4,9 +4,9 @@ import { useParams, useRouter } from 'next/navigation';
 import { funGetDivisionById, funGetSearchMemberDivision, IDataMemberDivision } from '@/module/division_new';
 import { useHookstate } from '@hookstate/core';
 import toast from 'react-hot-toast';
-import { useShallowEffect } from '@mantine/hooks';
-import { LayoutNavbarNew, SkeletonSingle, TEMA } from '@/module/_global';
-import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Text, TextInput } from '@mantine/core';
+import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
+import { LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA } from '@/module/_global';
+import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Stack, Text, TextInput } from '@mantine/core';
 import { FaCheck } from 'react-icons/fa6';
 import { HiChevronLeft, HiMagnifyingGlass } from 'react-icons/hi2';
 import { IoArrowBackOutline, IoClose } from 'react-icons/io5';
@@ -23,6 +23,7 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
   const [onClickSearch, setOnClickSearch] = useState(false)
   const [searchQuery, setSearchQuery] = useState('')
   const tema = useHookstate(TEMA)
+  const isMobile2 = useMediaQuery("(max-width: 438px)");
 
   async function getData() {
     try {
@@ -168,8 +169,8 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
         )
         : null
       }
-            {/* Close User */}
-            <Box pos={'fixed'} top={80} pl={rem(20)} pr={rem(20)} pt={rem(20)} pb={rem(5)} w={"100%"} style={{
+      {/* Close User */}
+      <Box pos={'fixed'} top={80} pl={rem(20)} pr={rem(20)} pt={rem(20)} pb={rem(5)} w={"100%"} style={{
         maxWidth: rem(550),
         zIndex: 100,
         backgroundColor: `${tema.get().bgUtama}`,
@@ -208,50 +209,70 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
         )}
       </Box>
 
-      <Box p={20}>
-        <Group justify="space-between" mt={100} onClick={handleSelectAll}>
+      <Box p={20} mt={80}>
+        {/* <Group justify="space-between" mt={100} onClick={handleSelectAll}>
           <Text c={tema.get().utama} fw={"bold"}>
             Pilih Semua Anggota
           </Text>
           {selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
-        </Group>
+        </Group> */}
         {loading ?
           Array(8)
             .fill(null)
             .map((_, i) => (
               <Box key={i}>
-                <SkeletonSingle />
+                <SkeletonList />
               </Box>
             ))
           :
-          <Box mt={20} mb={100}>
-            {isData.map((v, i) => {
-              const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
-              return (
-                <Box mb={15} key={i} onClick={() => handleFileClick(i)}>
-                  <Grid align='center' gutter={{
-                    base: 60,
-                    xl: "xs"
-                  }}>
-                    <Grid.Col span={2}>
-                      <Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
-                    </Grid.Col>
-                    <Grid.Col span={10}>
-                      <Flex justify='space-between' align={"center"}>
-                        <Flex direction={'column'} align="flex-start" justify="flex-start">
-                          <Text lineClamp={1}>{v.name}</Text>
+          (isData.length === 0) ?
+            <Stack align="stretch" justify="center" w={"100%"} h={"60vh"}>
+              <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text>
+            </Stack>
+            :
+            <Box mt={20} mb={100}>
+              {isData.map((v, i) => {
+                const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
+                return (
+                  <Box mb={15} key={i} onClick={() => handleFileClick(i)}>
+                    <Grid align='center'>
+                      <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: 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} pl={isMobile2 ? 40 : 30}>{v.name}</Text>
+                          </Flex>
+                          {isSelected ? <FaCheck /> : null}
                         </Flex>
-                        {isSelected ? <FaCheck /> : null}
-                      </Flex>
-                    </Grid.Col>
-                  </Grid>
-                  <Box mt={10}>
-                    <Divider size={"xs"} />
+                      </Grid.Col>
+                    </Grid>
+                    <Box mt={10}>
+                      <Divider size={"xs"} />
+                    </Box>
                   </Box>
-                </Box>
-              );
-            })}
-          </Box>
+                );
+              })}
+            </Box>
         }
       </Box>
       <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{