feat : update all button

src/module/_global/view/view_filter.tsx

@@ -84,21 +84,23 @@ export default function ViewFilter({ linkFilter }: { linkFilter: string }) {
                )
             }
          </Box>
-            <Box pos={'fixed'} bottom={0} p={rem(15)}  w={"100%"} style={{
+         <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
-               maxWidth: rem(550)
+            maxWidth: rem(550),
-            }}>
+            zIndex: 999,
-               <Button
+            backgroundColor: `${WARNA.bgWhite}`,
-                  fullWidth
+         }}>
-                  radius={100}
+            <Button
-                  size="lg"
+               fullWidth
-                  color={WARNA.biruTua}
+               radius={100}
-                  onClick={() => {
+               size="lg"
-                     router.push(`/${linkFilter}?group=` + selectedFilter)
+               color={WARNA.biruTua}
-                  }}
+               onClick={() => {
-               >
+                  router.push(`/${linkFilter}?group=` + selectedFilter)
-                  Terapkan
+               }}
-               </Button>
+            >
-            </Box>
+               Terapkan
+            </Button>
+         </Box>
       </Box>
    );
 }

src/module/announcement/ui/create_announcement.tsx

@@ -2,7 +2,7 @@
 import { LayoutNavbarNew, WARNA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
 import { useHookstate } from "@hookstate/core";
-import { Avatar, Box, Button, Flex, Group, Stack, Text, Textarea, TextInput } from "@mantine/core";
+import { Avatar, Box, Button, Flex, Group, rem, Stack, Text, Textarea, TextInput } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useState } from "react";
 import toast from "react-hot-toast";
@@ -140,7 +140,7 @@ export default function CreateAnnouncement() {
                   <IoIosArrowForward />
                </Group>
             </Box>
-            <Box pt={20}>
+            <Box pt={20} mb={60}>
                <Text c={WARNA.biruTua} mb={10}>Divisi Terpilih</Text>
                {(memberGroup.length === 0) ? (
                   <Text c="dimmed" ta={"center"} fs={"italic"}>Belum ada anggota</Text>
@@ -160,11 +160,15 @@ export default function CreateAnnouncement() {
                })}
             </Box>
          </Stack>
-         <Box mt={30} mx={20}>
+         <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
+            maxWidth: rem(550),
+            zIndex: 999,
+            backgroundColor: `${WARNA.bgWhite}`,
+         }}>
             <Button
                c={"white"}
                bg={WARNA.biruTua}
-               size="md"
+               size="lg"
                radius={30}
                fullWidth
                onClick={() => { 

src/module/announcement/ui/edit_announcement.tsx

@@ -1,7 +1,7 @@
 'use client'
 import { LayoutNavbarNew, WARNA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
-import { Box, Button, Flex, List, Stack, Text, Textarea, TextInput } from "@mantine/core";
+import { Box, Button, Flex, List, rem, Stack, Text, Textarea, TextInput } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useState } from "react";
 import toast from "react-hot-toast";
@@ -163,7 +163,7 @@ export default function EditAnnouncement() {
                Pilih Divisi
             </Button>
          </Stack>
-         <Box mt={20} mx={20}>
+         <Box mb={60} p={20}>
             {
                memberGroup.get().map((v: any, i: any) => {
                   return (
@@ -185,11 +185,15 @@ export default function EditAnnouncement() {
 
          </Box>
 
-         <Box mt={30} mx={20}>
+         <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
+            maxWidth: rem(550),
+            zIndex: 999,
+            backgroundColor: `${WARNA.bgWhite}`,
+         }}>
             <Button
                c={"white"}
                bg={WARNA.biruTua}
-               size="md"
+               size="lg"
                radius={30}
                fullWidth
                onClick={() => { 

src/module/calender/ui/create_user_calender.tsx

@@ -6,7 +6,7 @@ import { useHookstate } from '@hookstate/core';
 import toast from 'react-hot-toast';
 import { useShallowEffect } from '@mantine/hooks';
 import { LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
-import { Avatar, Box, Button, Divider, Flex, Group, Text } from '@mantine/core';
+import { Avatar, Box, Button, Divider, Flex, Group, rem, Text } from '@mantine/core';
 import { FaCheck } from 'react-icons/fa6';
 
 export default function CreateUserCalender({ onClose }: { onClose: (val: any) => void }) {
@@ -96,7 +96,7 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
         {selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
         </Group>
         {loading ? 
-          Array(4)
+          Array(8)
           .fill(null)
           .map((_, i) => (
              <Box key={i}>
@@ -137,7 +137,12 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
         })}
       </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
           c={"white"}
           bg={WARNA.biruTua}
@@ -149,7 +154,6 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
           Simpan
         </Button>
       </Box>
-    </Box>
   </Box>
   );
 }

src/module/calender/ui/history_division_calender.tsx

@@ -18,6 +18,7 @@ export default function HistoryDivisionCalender() {
   const [searchQuery, setSearchQuery] = useState('')
   const [loading, setLoading] = useState(true)
 
+
   const getData = async () => {
     try {
       setLoading(true)
@@ -100,7 +101,9 @@ export default function HistoryDivisionCalender() {
                     <Grid.Col span={'auto'}>
                       {v.data.map((d, x) => {
                         return (
-                          <Box mb={10} key={x} >
+                          <Box mb={10} key={x}
+                          onClick={() => router.push(`/division/${param.id}/calender/${d.id}`)}
+                          >
                             <Text fw={"bold"}>{d.title}</Text>
                             <Text>{d.timeStart} | {d.timeEnd}</Text>
                           </Box>

src/module/calender/ui/navbar_create_division_calender.tsx

@@ -1,6 +1,6 @@
 "use client"
 import { LayoutNavbarNew, WARNA } from '@/module/_global';
-import { Avatar, Box, Button, Flex, Group, Input, Select, SimpleGrid, Stack, Text, Textarea, TextInput } from '@mantine/core';
+import { Avatar, Box, Button, Flex, Group, Input, rem, Select, SimpleGrid, Stack, Text, Textarea, TextInput } from '@mantine/core';
 import { DateInput, TimeInput } from '@mantine/dates';
 import React, { useState } from 'react';
 import { IoIosArrowDropright } from 'react-icons/io';
@@ -245,7 +245,7 @@ export default function NavbarCreateDivisionCalender() {
           </Box>
           {
             memberUser.length > 0 &&
-            <Box pt={30}>
+            <Box pt={30} mb={60}>
               <Group justify="space-between">
                 <Text c={WARNA.biruTua}>Anggota Terpilih</Text>
                 <Text c={WARNA.biruTua}>Total {memberUser.length} Anggota</Text>
@@ -287,32 +287,36 @@ export default function NavbarCreateDivisionCalender() {
               </Box>
             </Box>
           }
-          <Box mt={"xl"}>
-            <Button
-              c={"white"}
-              bg={WARNA.biruTua}
-              size="lg"
-              radius={30}
-              fullWidth
-              onClick={() => {
-                if (
-                  isData.title !== "" &&
-                  isData.dateStart !== " " &&
-                  isData.timeStart !== "" &&
-                  isData.timeEnd !== "" &&
-                  isData.repeatEventTyper !== ""
-                ) {
-                  setModal(true);
-                } else {
-                  toast.error("Mohon lengkapi semua form");
-                }
-              }}
-            >
-              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
+          c={"white"}
+          bg={WARNA.biruTua}
+          size="lg"
+          radius={30}
+          fullWidth
+          onClick={() => {
+            if (
+              isData.title !== "" &&
+              isData.dateStart !== " " &&
+              isData.timeStart !== "" &&
+              isData.timeEnd !== "" &&
+              isData.repeatEventTyper !== ""
+            ) {
+              setModal(true);
+            } else {
+              toast.error("Mohon lengkapi semua form");
+            }
+          }}
+        >
+          Simpan
+        </Button>
+      </Box>
       <LayoutModal opened={isModal} onClose={() => setModal(false)}
         description="Apakah Anda yakin ingin menambahkan data?"
         onYes={(val) => { onSubmit(val) }} />

src/module/calender/ui/update_division_calender.tsx

@@ -1,6 +1,6 @@
 "use client"
 import { LayoutNavbarNew, WARNA } from '@/module/_global';
-import { Avatar, Box, Button, Flex, Group, Input, Select, SimpleGrid, Stack, Text, Textarea, TextInput } from '@mantine/core';
+import { Avatar, Box, Button, Flex, Group, Input, rem, Select, SimpleGrid, Stack, Text, Textarea, TextInput } from '@mantine/core';
 import { DateInput, TimeInput } from '@mantine/dates';
 import React, { useState } from 'react';
 import { IoIosArrowDropright } from 'react-icons/io';
@@ -295,8 +295,8 @@ export default function UpdateDivisionCalender() {
               <Text c={WARNA.biruTua}>Anggota Terpilih</Text>
               <Text c={WARNA.biruTua}>Total {memberUser.length} Anggota</Text>
             </Group>
-            <Box pt={10}>
+            <Box pt={10} >
-              <Box mb={20}>
+              <Box mb={100}>
                 <Box
                   style={{
                     border: `1px solid ${"#C7D6E8"}`,
@@ -305,46 +305,56 @@ export default function UpdateDivisionCalender() {
                   px={20}
                   py={10}
                 >
-                  {memberUser.get().map((v: any, i: any) => {
+                  {memberUser.length == 0 ?
-                    return (
+                    <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '10vh' }}>
-                      <Flex
+                      <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada Anggota</Text>
-                        justify={"space-between"}
+                    </Box>
-                        align={"center"}
+                    :
-                        mt={20}
+
-                        key={i}
+                    memberUser.get().map((v: any, i: any) => {
-                      >
+                      return (
-                        <Group>
+                        <Flex
-                          <Avatar src={"v.image"} alt="it's me" size="lg" />
+                          justify={"space-between"}
-                          <Box>
+                          align={"center"}
-                            <Text c={WARNA.biruTua} fw={"bold"}>
+                          mt={20}
-                              {v.name}
+                          key={i}
-                            </Text>
+                        >
-                          </Box>
+                          <Group>
-                        </Group>
+                            <Avatar src={"v.image"} alt="it's me" size="lg" />
-                        <Text c={WARNA.biruTua} fw={"bold"}>
+                            <Box>
-                          Anggota
+                              <Text c={WARNA.biruTua} fw={"bold"}>
-                        </Text>
+                                {v.name}
-                      </Flex>
+                              </Text>
-                    );
+                            </Box>
-                  })}
+                          </Group>
+                          <Text c={WARNA.biruTua} fw={"bold"}>
+                            Anggota
+                          </Text>
+                        </Flex>
+                      );
+                    })}
                 </Box>
               </Box>
             </Box>
           </Box>
-          <Box mt={"xl"}>
-            <Button
-              c={"white"}
-              bg={WARNA.biruTua}
-              size="lg"
-              radius={30}
-              fullWidth
-              onClick={() => setModal(true)}
-            >
-              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
+          c={"white"}
+          bg={WARNA.biruTua}
+          size="lg"
+          radius={30}
+          fullWidth
+          onClick={() => setModal(true)}
+        >
+          Simpan
+        </Button>
+      </Box>
       <LayoutModal opened={isModal} onClose={() => setModal(false)}
         description="Apakah Anda yakin ingin menambahkan data?"
         onYes={(val) => { onSubmit(val) }} />

src/module/discussion/ui/form_create_discussion.tsx

@@ -1,7 +1,7 @@
 'use client'
 import { WARNA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
-import { Avatar, Box, Button, Center, Grid, Group, Text, Textarea } from "@mantine/core";
+import { Avatar, Box, Button, Center, Grid, Group, rem, Text, Textarea } from "@mantine/core";
 import { useState } from "react";
 import toast from "react-hot-toast";
 import { funCreateDiscussion } from "../lib/api_discussion";
@@ -13,7 +13,7 @@ export default function FormCreateDiscussion({ id }: { id: string }) {
    const param = useParams<{ id: string }>()
    const [touched, setTouched] = useState({
       desc: false,
-    });
+   });
    const [isData, setData] = useState({
       desc: "",
       idDivision: id
@@ -26,7 +26,7 @@ export default function FormCreateDiscussion({ id }: { id: string }) {
                desc: isData.desc,
                idDivision: id
             })
-   
+
             if (response.success) {
                toast.success(response.message)
                router.push(`/division/${param.id}/discussion/`)
@@ -47,7 +47,7 @@ export default function FormCreateDiscussion({ id }: { id: string }) {
 
 
    return (
-      <Box pos={"relative"} h={"89vh"}>
+      <Box >
          <Box p={20} >
             <Grid gutter={0} pt={10}>
                <Grid.Col span={"auto"}>
@@ -69,34 +69,38 @@ export default function FormCreateDiscussion({ id }: { id: string }) {
                         onBlur={() => setTouched({ ...touched, desc: true })}
                         error={
                            touched.desc && (
-                             isData.desc == "" ? "Form Tidak Boleh Kosong" : null
+                              isData.desc == "" ? "Form Tidak Boleh Kosong" : null
                            )
-                         }
+                        }
                      />
                   </Box>
                </Grid.Col>
             </Grid>
-         <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}
                size="lg"
                radius={30}
                fullWidth
-                  onClick={() => {
+               onClick={() => {
-                     if (
+                  if (
-                        isData.desc !== ""
+                     isData.desc !== ""
-                     ) {
+                  ) {
-                        setValModal(true)   
+                     setValModal(true)
-                     } else {
+                  } else {
-                        toast.error("Form Tidak Boleh Kosong");
+                     toast.error("Form Tidak Boleh Kosong");
                   }
                }}
             >
                Simpan
             </Button>
          </Box>
-         </Box>
 
          <LayoutModal opened={isValModal} onClose={() => setValModal(false)}
             description="Apakah Anda yakin ingin

src/module/discussion/ui/form_edit_discussion.tsx

@@ -1,7 +1,7 @@
 'use client'
 import { WARNA } from "@/module/_global"
 import LayoutModal from "@/module/_global/layout/layout_modal"
-import { Box, Group, Avatar, Textarea, Button, Grid } from "@mantine/core"
+import { Box, Group, Avatar, Textarea, Button, Grid, rem } from "@mantine/core"
 import { useParams, useRouter } from "next/navigation"
 import { useState } from "react"
 import toast from "react-hot-toast"
@@ -15,7 +15,7 @@ export default function FormEditDiscussion() {
    const [isDataOne, setDataOne] = useState("")
    const [touched, setTouched] = useState({
       desc: false,
-    });
+   });
 
    async function fetchGetOneDiscussion() {
       try {
@@ -56,7 +56,7 @@ export default function FormEditDiscussion() {
    }, [])
 
    return (
-      <Box pos={"relative"} h={"89vh"}>
+      <Box >
          <Box p={20}>
             <Grid gutter={0} pt={10}>
                <Grid.Col span={"auto"}>
@@ -78,33 +78,37 @@ export default function FormEditDiscussion() {
                         onBlur={() => setTouched({ ...touched, desc: true })}
                         error={
                            touched.desc && (
-                             isDataOne == "" ? "Form Tidak Boleh Kosong" : null
+                              isDataOne == "" ? "Form Tidak Boleh Kosong" : null
                            )
-                         }
+                        }
                      />
                   </Box>
                </Grid.Col>
             </Grid>
-            <Box pos={"absolute"} bottom={10} left={0} right={0} p={20}>
+         </Box>
-               <Button
+         <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
-                  color="white"
+            maxWidth: rem(550),
-                  bg={WARNA.biruTua}
+            zIndex: 999,
-                  size="lg"
+            backgroundColor: `${WARNA.bgWhite}`,
-                  radius={30}
+         }}>
-                  fullWidth
+            <Button
-                  onClick={() => {
+               color="white"
-                     if (
+               bg={WARNA.biruTua}
-                        isDataOne !== ""
+               size="lg"
-                     ) {
+               radius={30}
-                        setValModal(true)   
+               fullWidth
-                     } else {
+               onClick={() => {
-                        toast.error("Form Tidak Boleh Kosong");
+                  if (
+                     isDataOne !== ""
+                  ) {
+                     setValModal(true)
+                  } else {
+                     toast.error("Form Tidak Boleh Kosong");
                   }
                }}
-               >
+            >
-                  Simpan
+               Simpan
-               </Button>
+            </Button>
-            </Box>
          </Box>
 
          <LayoutModal opened={isValModal} onClose={() => setValModal(false)}

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

src/module/task/ui/add_member_detail_task.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { LayoutNavbarNew, WARNA } from "@/module/_global";
+import { LayoutNavbarNew, SkeletonSingle, WARNA } from "@/module/_global";
 import { funGetDivisionById, IDataMemberDivision } from "@/module/division_new";
 import {
    Anchor,
@@ -10,6 +10,7 @@ import {
    Divider,
    Flex,
    Group,
+   rem,
    Stack,
    Text,
    TextInput,
@@ -31,10 +32,12 @@ export default function AddMemberDetailTask() {
    const [isDataMember, setDataMember] = useState<IDataMemberTaskDivision[]>([])
    const [selectAll, setSelectAll] = useState(false)
    const [openModal, setOpenModal] = useState(false)
+   const [loading, setLoading] = useState(true)
 
 
    async function getData() {
       try {
+         setLoading(true)
          const response = await funGetDivisionById(param.id)
          if (response.success) {
             setData(response.data.member)
@@ -48,9 +51,13 @@ export default function AddMemberDetailTask() {
          } else {
             toast.error(res.message);
          }
+
+         setLoading(false)
       } catch (error) {
          console.log(error)
          toast.error("Gagal mendapatkan anggota, coba lagi nanti");
+      } finally {
+         setLoading(false)
       }
    }
 
@@ -127,54 +134,67 @@ export default function AddMemberDetailTask() {
                </Text>
                {selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
             </Group>
-            <Box mt={15}>
+            {loading ? Array(8)
-               {isData.map((v, i) => {
+               .fill(null)
-                  const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
+               .map((_, i) => (
-                  const found = isDataMember.some((i: any) => i.idUser == v.idUser)
+                  <Box key={i}>
-                  return (
+                     <SkeletonSingle />
-                     <Box mb={15} key={i} onClick={() => (!found) ? handleFileClick(i) : null}>
+                  </Box>
-                        <Flex justify={"space-between"} align={"center"}>
+               ))
-                           <Group>
+               :
-                              <Avatar src={"v.image"} alt="it's me" size="lg" />
+               <Box mt={15} mb={60}>
-                              <Stack align="flex-start" justify="flex-start">
+                  {isData.map((v, i) => {
-                                 <Text style={{
+                     const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
+                     const found = isDataMember.some((i: any) => i.idUser == v.idUser)
+                     return (
+                        <Box mb={15} key={i} onClick={() => (!found) ? handleFileClick(i) : null}>
+                           <Flex justify={"space-between"} align={"center"}>
+                              <Group>
+                                 <Avatar src={"v.image"} alt="it's me" size="lg" />
+                                 <Stack align="flex-start" justify="flex-start">
+                                    <Text style={{
+                                       cursor: 'pointer',
+                                       display: 'flex',
+                                       alignItems: 'center',
+                                    }}>
+                                       {v.name}
+                                    </Text>
+                                    <Text c={"dimmed"}>{(found) ? "sudah menjadi anggota" : ""}</Text>
+                                 </Stack>
+                              </Group>
+                              <Text
+                                 style={{
                                     cursor: 'pointer',
                                     display: 'flex',
                                     alignItems: 'center',
-                                 }}>
+                                    paddingLeft: 20,
-                                    {v.name}
+                                 }}
-                                 </Text>
+                              >
-                                 <Text c={"dimmed"}>{(found) ? "sudah menjadi anggota" : ""}</Text>
+                                 {isSelected ? <FaCheck style={{ marginRight: 10 }} /> : ""}
-                              </Stack>
+                              </Text>
-                           </Group>
+                           </Flex>
-                           <Text
+                           <Divider my={"md"} />
-                              style={{
+                        </Box>
-                                 cursor: 'pointer',
+                     );
-                                 display: 'flex',
+                  })}
-                                 alignItems: 'center',
+               </Box>
-                                 paddingLeft: 20,
+            }
-                              }}
+         </Box>
-                           >
+         <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
-                              {isSelected ? <FaCheck style={{ marginRight: 10 }} /> : ""}
+            maxWidth: rem(550),
-                           </Text>
+            zIndex: 999,
-                        </Flex>
+            backgroundColor: `${WARNA.bgWhite}`,
-                        <Divider my={"md"} />
+         }}>
-                     </Box>
+            <Button
-                  );
+               c={"white"}
-               })}
+               bg={WARNA.biruTua}
-            </Box>
+               size="lg"
-            <Box mt={"xl"}>
+               radius={30}
-               <Button
+               fullWidth
-                  c={"white"}
+               onClick={() => { onVerifikasi() }}
-                  bg={WARNA.biruTua}
+            >
-                  size="lg"
+               Simpan
-                  radius={30}
+            </Button>
-                  fullWidth
-                  onClick={() => { onVerifikasi() }}
-               >
-                  Simpan
-               </Button>
-            </Box>
          </Box>
 
          <LayoutModal opened={openModal} onClose={() => setOpenModal(false)}

src/module/task/ui/cancel_task.tsx

@@ -3,6 +3,7 @@ import { LayoutNavbarNew, WARNA } from "@/module/_global";
 import {
    Box,
    Button,
+   rem,
    Stack,
    Textarea,
 } from "@mantine/core";
@@ -20,7 +21,7 @@ export default function CancelTask() {
    const param = useParams<{ id: string, detail: string }>()
    const [touched, setTouched] = useState({
       reason: false,
-    });
+   });
 
    function onVerification() {
       if (alasan == "")
@@ -47,7 +48,7 @@ export default function CancelTask() {
 
 
    return (
-      <Box pos={"relative"} h={"100vh"}>
+      <Box>
          <LayoutNavbarNew back="" title={"Pembatalan Tugas"} menu />
          <Box p={20}>
             <Stack pt={15}>
@@ -68,18 +69,22 @@ export default function CancelTask() {
                   onBlur={() => setTouched({ ...touched, reason: true })}
                />
             </Stack>
-            <Box pos={"absolute"} bottom={10} left={0} right={0} p={20}>
+         </Box>
-               <Button
+         <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
-                  c={"white"}
+            maxWidth: rem(550),
-                  bg={WARNA.biruTua}
+            zIndex: 999,
-                  size="lg"
+            backgroundColor: `${WARNA.bgWhite}`,
-                  radius={30}
+         }}>
-                  fullWidth
+            <Button
-                  onClick={() => { onVerification() }}
+               c={"white"}
-               >
+               bg={WARNA.biruTua}
-                  Simpan
+               size="lg"
-               </Button>
+               radius={30}
-            </Box>
+               fullWidth
+               onClick={() => { onVerification() }}
+            >
+               Simpan
+            </Button>
          </Box>
 
 

src/module/task/ui/create_date_end_task.tsx

@@ -7,6 +7,7 @@ import {
   Flex,
   Group,
   Input,
+  rem,
   SimpleGrid,
   Stack,
   Text,
@@ -110,7 +111,12 @@ export default function ViewDateEndTask({ onClose }: { onClose: (val: IFormDateT
             error={touched.title && title == "" ? "Judul Tugas Tidak Boleh Kosong" : null}
           />
         </Stack>
-        <Box mt={"xl"}>
+      </Box>
+        <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
+            maxWidth: rem(550),
+            zIndex: 999,
+            backgroundColor: `${WARNA.bgWhite}`,
+         }}>
           <Button
             c={"white"}
             bg={WARNA.biruTua}
@@ -122,7 +128,6 @@ export default function ViewDateEndTask({ onClose }: { onClose: (val: IFormDateT
             Simpan
           </Button>
         </Box>
-      </Box>
     </Box>
   );
 }

src/module/task/ui/create_task.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
-import { Avatar, Box, Button, Center, Flex, Group, Input, SimpleGrid, Stack, Text, TextInput } from "@mantine/core";
+import { Avatar, Box, Button, Center, Flex, Group, Input, rem, SimpleGrid, Stack, Text, TextInput } from "@mantine/core";
 import { useParams, useRouter } from "next/navigation";
 import React, { useRef, useState } from "react";
 import { IoIosArrowDropright } from "react-icons/io";
@@ -205,7 +205,7 @@ export default function CreateTask() {
 
         {
           member.length > 0 &&
-          <Box pt={30}>
+          <Box pt={30} mb={60}>
             <Group justify="space-between">
               <Text c={WARNA.biruTua}>Anggota Terpilih</Text>
               <Text c={WARNA.biruTua}>Total {member.length} Anggota</Text>
@@ -249,7 +249,12 @@ export default function CreateTask() {
         }
 
 
-        <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}
@@ -267,7 +272,6 @@ export default function CreateTask() {
             Simpan
           </Button>
         </Box>
-      </Box>
 
 
 

src/module/task/ui/create_users_project.tsx

@@ -12,6 +12,7 @@ import {
   Divider,
   Flex,
   Group,
+  rem,
   Skeleton,
   Text,
   TextInput,
@@ -104,19 +105,6 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
         menu
       />
       <Box p={20}>
-        {/* <TextInput
-          styles={{
-            input: {
-              color: WARNA.biruTua,
-              borderRadius: WARNA.biruTua,
-              borderColor: WARNA.biruTua,
-            },
-          }}
-          size="md"
-          radius={30}
-          leftSection={<HiMagnifyingGlass size={20} />}
-          placeholder="Pencarian"
-        /> */}
         {loading ?
           <Skeleton height={20} width={"100%"} mt={20} />
           :
@@ -127,7 +115,7 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
             {selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
           </Group>
         }
-        <Box mt={15}>
+        <Box mt={15} mb={60}>
           {loading ?
             Array(3)
               .fill(null)
@@ -184,7 +172,12 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
             })
           }
         </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
             c={"white"}
             bg={WARNA.biruTua}
@@ -196,7 +189,6 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
             Simpan
           </Button>
         </Box>
-      </Box>
     </Box>
   );
 }

src/module/task/ui/edit_detail_task.tsx

@@ -7,9 +7,11 @@ import {
    Flex,
    Group,
    Input,
+   rem,
    SimpleGrid,
    Stack,
    Text,
+   TextInput,
 } from "@mantine/core";
 import React, { useState } from "react";
 import { DatePicker } from "@mantine/dates";
@@ -122,31 +124,37 @@ export default function EditDetailTask() {
                </Box>
             </SimpleGrid>
             <Stack pt={15}>
-               <Input
+               <TextInput
                   styles={{
                      input: {
                         border: `1px solid ${"#D6D8F6"}`,
                         borderRadius: 10,
                      },
                   }}
+                  label={"Nama Tahapan"}
+                  required
                   placeholder="Input Nama Tahapan"
                   size="md"
                   value={title}
                   onChange={(e) => { setTitle(e.target.value) }}
                />
             </Stack>
-            <Box mt={"xl"}>
+         </Box>
-               <Button
+         <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
-                  c={"white"}
+            maxWidth: rem(550),
-                  bg={WARNA.biruTua}
+            zIndex: 999,
-                  size="lg"
+            backgroundColor: `${WARNA.bgWhite}`,
-                  radius={30}
+         }}>
-                  fullWidth
+            <Button
-                  onClick={() => { setOpenModal(true) }}
+               c={"white"}
-               >
+               bg={WARNA.biruTua}
-                  Simpan
+               size="lg"
-               </Button>
+               radius={30}
-            </Box>
+               fullWidth
+               onClick={() => { setOpenModal(true) }}
+            >
+               Simpan
+            </Button>
          </Box>
 
          <LayoutModal opened={openModal} onClose={() => setOpenModal(false)}

src/module/task/ui/edit_task.tsx

@@ -4,6 +4,7 @@ import {
    Box,
    Button,
    Input,
+   rem,
    Stack,
    Textarea,
    TextInput,
@@ -23,7 +24,7 @@ export default function EditTask() {
    const param = useParams<{ id: string, detail: string }>()
    const [touched, setTouched] = useState({
       title: false,
-    });
+   });
 
    function onVerification() {
       if (title == "")
@@ -69,7 +70,7 @@ export default function EditTask() {
 
 
    return (
-      <Box pos={"relative"} h={"100vh"}>
+      <Box >
          <LayoutNavbarNew back="" title={"Edit Judul Tugas"} menu />
          <Box p={20}>
             <Stack pt={15}>
@@ -86,18 +87,23 @@ export default function EditTask() {
                   size="md"
                   value={title}
                   onChange={(e) => {
-                     setTitle(e.target.value) 
+                     setTitle(e.target.value)
                      setTouched({ ...touched, title: false })
                   }}
                   error={
                      touched.title && (
-                       title == "" ? "Error! harus memasukkan judul tugas" : null
+                        title == "" ? "Error! harus memasukkan judul tugas" : null
                      )
-                   }
+                  }
                   onBlur={() => setTouched({ ...touched, title: true })}
                />
             </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
                   c={"white"}
                   bg={WARNA.biruTua}
@@ -109,7 +115,6 @@ export default function EditTask() {
                   Simpan
                </Button>
             </Box>
-         </Box>
 
 
          <LayoutModal opened={openModal} onClose={() => setOpenModal(false)}