feat : update all button

src/module/division_new/ui/create_anggota_division.tsx

@@ -1,9 +1,9 @@
 "use client"
-import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
 import LayoutModal from '@/module/_global/layout/layout_modal';
 import { funGetUserByCookies } from '@/module/auth';
 import { funGetAllmember, TypeUser } from '@/module/user';
-import { Avatar, Box, Button, Divider, Group, Stack, Text, TextInput } from '@mantine/core';
+import { Avatar, Box, Button, Divider, Group, rem, Stack, Text, TextInput } from '@mantine/core';
 import { useParams, useRouter } from 'next/navigation';
 import React, { useState } from 'react';
 import toast from 'react-hot-toast';
@@ -22,6 +22,7 @@ export default function CreateAnggotaDivision() {
   const [group, setGroup] = useState("")
   const [isOpen, setOpen] = useState(false)
   const param = useParams<{ id: string }>()
+  const [loading, setLoading] = useState(true)
 
   const handleFileClick = (index: number) => {
     if (selectedFiles.some((i: any) => i.idUser == dataMember[index].id)) {
@@ -33,6 +34,7 @@ export default function CreateAnggotaDivision() {
 
 
   async function loadMember(group: string, search: string) {
+    setLoading(true)
     const res = await funGetAllmember('?active=true&group=' + group + '&search=' + search);
     const user = await funGetUserByCookies();
 
@@ -41,6 +43,7 @@ export default function CreateAnggotaDivision() {
     } else {
       toast.error(res.message)
     }
+    setLoading(false)
   }
 
   async function loadFirst() {
@@ -99,7 +102,17 @@ export default function CreateAnggotaDivision() {
             onChange={(e: any) => loadMember(group, e.target.value)}
           />
         </Stack>
-        <Box mt={20}>
+
+        {loading ? 
+           Array(8)
+           .fill(null)
+           .map((_, i) => (
+              <Box key={i}>
+                 <SkeletonSingle/>
+              </Box>
+           ))
+          :
+        <Box mt={20} mb={60}>
           {dataMember.map((v: any, index: any) => {
             const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id)
             const found = memberDb.some((i: any) => i.idUser == v.id)
@@ -122,7 +135,13 @@ export default function CreateAnggotaDivision() {
             )
           })}
         </Box>
-        <Box mt="xl">
+        }
+      </Box>
+        <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
+            maxWidth: rem(550),
+            zIndex: 999,
+            backgroundColor: `${WARNA.bgWhite}`,
+         }}>
           <Button
             color="white"
             bg={WARNA.biruTua}
@@ -134,7 +153,6 @@ export default function CreateAnggotaDivision() {
             Simpan
           </Button>
         </Box>
-      </Box>
       <LayoutModal opened={isOpen} onClose={() => setOpen(false)}
         description="Apakah Anda yakin ingin menambahkan anggota divisi?"
         onYes={(val) => {

src/module/division_new/ui/create_division.tsx

@@ -7,6 +7,7 @@ import {
     Button,
     Flex,
     Group,
+    rem,
     Select,
     Stack,
     Text,
@@ -167,7 +168,7 @@ export default function CreateDivision() {
                             <IoIosArrowDropright size={25} />
                         </Group>
                     </Box>
-                    <Box pt={20}>
+                    <Box pt={20} pb={50}>
                         <Group justify="space-between">
                             <Text c={WARNA.biruTua}>Anggota Terpilih</Text>
                             <Text c={WARNA.biruTua}>Total {member.length} Anggota</Text>
@@ -210,22 +211,26 @@ export default function CreateDivision() {
                             </Box>
                         </Box>
                     </Box>
-                    <Box mt="xl">
-                        <Button
-                            color="white"
-                            bg={WARNA.biruTua}
-                            size="lg"
-                            radius={30}
-                            fullWidth
-                            onClick={() => {
-                                onSubmit()
-                            }}
-                        >
-                            Simpan
-                        </Button>
-                    </Box>
                 </Stack>
             </Box>
+            <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
+                maxWidth: rem(550),
+                zIndex: 999,
+                backgroundColor: `${WARNA.bgWhite}`,
+            }}>
+                <Button
+                    color="white"
+                    bg={WARNA.biruTua}
+                    size="lg"
+                    radius={30}
+                    fullWidth
+                    onClick={() => {
+                        onSubmit()
+                    }}
+                >
+                    Simpan
+                </Button>
+            </Box>
         </Box>
     );
 }

src/module/division_new/ui/edit_division.tsx

@@ -1,7 +1,7 @@
 "use client"
 import { LayoutNavbarNew, WARNA } from '@/module/_global';
 import LayoutModal from '@/module/_global/layout/layout_modal';
-import { Box, Button, Select, Stack, Textarea, TextInput } from '@mantine/core';
+import { Box, Button, rem, Select, Stack, Textarea, TextInput } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { useParams, useRouter } from 'next/navigation';
 import React, { useState } from 'react';
@@ -106,7 +106,12 @@ export default function EditDivision() {
             }}
           />
         </Stack>
-        <Box pos={"absolute"} bottom={10} left={0} right={0} p={20}>
+      </Box>
+        <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
+            maxWidth: rem(550),
+            zIndex: 999,
+            backgroundColor: `${WARNA.bgWhite}`,
+         }}>
           <Button
             color="white"
             bg={WARNA.biruTua}
@@ -126,7 +131,6 @@ export default function EditDivision() {
             Simpan
           </Button>
         </Box>
-      </Box>
       <LayoutModal opened={openModal} onClose={() => setOpenModal(false)} description='Apakah Anda yakin ingin edit data'
         onYes={(val) => {
           if (val) {

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, Skeleton, Stack, Text, TextInput } from '@mantine/core';
+import { Avatar, Box, Button, Center, Input, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { useRouter } from 'next/navigation';
 import React, { useState } from 'react';
@@ -94,50 +94,56 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
                   ))}
               </SimpleGrid>
               :
-              <SimpleGrid
-                cols={{ base: 2, sm: 2, lg: 2 }}
-                spacing={{ base: 20, sm: "xl" }}
-                verticalSpacing={{ base: "md", sm: "xl" }}
-              >
-                {dataMember.map((v, index) => {
-                  const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id);
-                  return (
-                    <Box key={index} mb={10}>
-                      <Box
-                        bg={isSelected ? WARNA.bgHijauMuda : "white"}
-                        style={{
-                          border: `1px solid ${WARNA.biruTua}`,
-                          borderRadius: 20,
-                        }}
-                        py={10}
-                        onClick={() => handleFileClick(index)}
-                      >
-                        <Center>
-                          <Avatar src={"https://i.pravatar.cc/1000?img=37"} alt="it's me" size="xl" />
-                        </Center>
-                        <Text mt={20} ta="center">
-                          {v.name}
-                        </Text>
+              <Box mb={60}>
+                <SimpleGrid
+                  cols={{ base: 2, sm: 2, lg: 2 }}
+                  spacing={{ base: 20, sm: "xl" }}
+                  verticalSpacing={{ base: "md", sm: "xl" }}
+                >
+                  {dataMember.map((v, index) => {
+                    const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id);
+                    return (
+                      <Box key={index} mb={10}>
+                        <Box
+                          bg={isSelected ? WARNA.bgHijauMuda : "white"}
+                          style={{
+                            border: `1px solid ${WARNA.biruTua}`,
+                            borderRadius: 20,
+                          }}
+                          py={10}
+                          onClick={() => handleFileClick(index)}
+                        >
+                          <Center>
+                            <Avatar src={"https://i.pravatar.cc/1000?img=37"} alt="it's me" size="xl" />
+                          </Center>
+                          <Text mt={20} ta="center">
+                            {v.name}
+                          </Text>
+                        </Box>
                       </Box>
-                    </Box>
-                  );
-                })}
-              </SimpleGrid>
+                    );
+                  })}
+                </SimpleGrid>
+              </Box>
             }
           </Box>
         </Stack>
-        <Box mt="xl">
-          <Button
-            color="white"
-            bg={WARNA.biruTua}
-            size="lg"
-            radius={30}
-            fullWidth
-            onClick={() => { onSubmit() }}
-          >
-            Simpan
-          </Button>
-        </Box>
+      </Box>
+      <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
+        maxWidth: rem(550),
+        zIndex: 999,
+        backgroundColor: `${WARNA.bgWhite}`,
+      }}>
+        <Button
+          color="white"
+          bg={WARNA.biruTua}
+          size="lg"
+          radius={30}
+          fullWidth
+          onClick={() => { onSubmit() }}
+        >
+          Simpan
+        </Button>
       </Box>
     </Box>
   );