style : update skeleton

Deskripsi:
- update announcement
- update celender
- update division
- update task
- update project
- update user

No Issue

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, rem, Stack, Text, Textarea, TextInput } from "@mantine/core";
+import { Box, Button, Flex, List, rem, Skeleton, Stack, Text, Textarea, TextInput } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useState } from "react";
 import toast from "react-hot-toast";
@@ -17,10 +17,11 @@ export default function EditAnnouncement() {
    const [isOpen, setOpen] = useState(false)
    const [isChooseDivisi, setChooseDivisi] = useState(false)
    const param = useParams<{ id: string }>()
+   const [loading, setLoading] = useState(true)
    const [touched, setTouched] = useState({
       title: false,
       desc: false
-    });
+   });
    const [body, setBody] = useState({
       title: "",
       desc: "",
@@ -30,6 +31,7 @@ export default function EditAnnouncement() {
 
    async function fetchOneAnnouncement() {
       try {
+         setLoading(true)
          memberGroup.set([])
          const res = await funGetAnnouncementById(param.id)
          if (res.success) {
@@ -62,9 +64,13 @@ export default function EditAnnouncement() {
             toast.error(res.message)
          }
 
+         setLoading(false)
+
       } catch (error) {
          console.error(error)
          toast.error("Gagal mendapatkan pengumuman, coba lagi nanti")
+      } finally {
+         setLoading(false)
       }
    }
 
@@ -110,61 +116,83 @@ export default function EditAnnouncement() {
             pt={30}
             px={20}
          >
-            <TextInput
+            {loading ?
-               size="md" type="text" radius={30} placeholder="Judul Pengumuman" withAsterisk label="Judul" w={"100%"}
+
-               styles={{
+               <>
-                  input: {
+                  <Skeleton height={40} mt={20} radius={30} />
-                     color: WARNA.biruTua,
+                  <Skeleton height={75} mt={20} radius={10} />
-                     borderRadius: WARNA.biruTua,
+                  <Skeleton height={40} mt={10} radius={30} />
-                     borderColor: WARNA.biruTua,
+               </>
-                  },
+               :
-               }}
+               <>
-               value={body.title}
+                  <TextInput
-               onChange={(val) => {
+                     size="md" type="text" radius={30} placeholder="Judul Pengumuman" withAsterisk label="Judul" w={"100%"}
-                  setBody({ ...body, title: val.target.value })
+                     styles={{
-                  setTouched({ ...touched, title: false })
+                        input: {
-               }}
+                           color: WARNA.biruTua,
-               onBlur={() => setTouched({ ...touched, title: true })}
+                           borderRadius: WARNA.biruTua,
-               error={
+                           borderColor: WARNA.biruTua,
-                  touched.title && (
+                        },
-                     body.title == "" ? "Judul Tidak Boleh Kosong" : null
+                     }}
-                  )
+                     value={body.title}
-                }
+                     onChange={(val) => {
-            />
+                        setBody({ ...body, title: val.target.value })
-            <Textarea
+                        setTouched({ ...touched, title: false })
-               size="md"
+                     }}
-               radius={20}
+                     onBlur={() => setTouched({ ...touched, title: true })}
-               w={"100%"}
+                     error={
-               label="Pengumuman"
+                        touched.title && (
-               withAsterisk
+                           body.title == "" ? "Judul Tidak Boleh Kosong" : null
-               placeholder="Deskripsi Pengumuman"
+                        )
-               styles={{
+                     }
-                  input: {
+                  />
-                     color: WARNA.biruTua,
+                  <Textarea
-                     borderRadius: WARNA.biruTua,
+                     size="md"
-                     borderColor: WARNA.biruTua,
+                     radius={10}
-                  },
+                     w={"100%"}
-               }}
+                     label="Pengumuman"
-               value={body.desc}
+                     withAsterisk
-               onChange={(val) => {
+                     placeholder="Deskripsi Pengumuman"
-                  setBody({ ...body, desc: val.target.value })
+                     styles={{
-                  setTouched({ ...touched, desc: false })
+                        input: {
-               }}
+                           color: WARNA.biruTua,
-               onBlur={() => setTouched({ ...touched, desc: true })}
+                           borderRadius: WARNA.biruTua,
-               error={
+                           borderColor: WARNA.biruTua,
-                  touched.desc && (
+                        },
-                     body.desc == "" ? "Pengumuman Tidak Boleh Kosong" : null
+                     }}
-                  )
+                     value={body.desc}
-                }
+                     onChange={(val) => {
-               
+                        setBody({ ...body, desc: val.target.value })
-            />
+                        setTouched({ ...touched, desc: false })
+                     }}
+                     onBlur={() => setTouched({ ...touched, desc: true })}
+                     error={
+                        touched.desc && (
+                           body.desc == "" ? "Pengumuman Tidak Boleh Kosong" : null
+                        )
+                     }
+
+                  />
+                  <Button onClick={() => { setChooseDivisi(true) }} rightSection={<HiOutlineChevronRight size={14} />} variant="default" fullWidth radius={30} size="md" mt={10}>
+                     Pilih Divisi
+                  </Button>
+               </>
+            }
 
-            <Button onClick={() => { setChooseDivisi(true) }} rightSection={<HiOutlineChevronRight size={14} />} variant="default" fullWidth radius={30} size="md" mt={10}>
-               Pilih Divisi
-            </Button>
          </Stack>
          <Box mb={60} p={20}>
-            {
+            {loading ?
+               Array(3)
+                  .fill(null)
+                  .map((_, i) => (
+                     <Box key={i} mb={20}>
+                        <Skeleton height={20} radius={10} mt={20} width={"30%"} />
+                        <Skeleton height={20} ml={40} radius={10} mt={10} width={"80%"} />
+                        <Skeleton height={20} ml={40} radius={10} mt={20} width={"80%"} />
+                     </Box>
+                  ))
+
+               :
                memberGroup.get().map((v: any, i: any) => {
                   return (
                      <Box key={i} mt={10}>
@@ -190,25 +218,29 @@ export default function EditAnnouncement() {
             zIndex: 999,
             backgroundColor: `${WARNA.bgWhite}`,
          }}>
-            <Button
+            {loading ?
-               c={"white"}
+               <Skeleton height={40} radius={30} />
-               bg={WARNA.biruTua}
+               :
-               size="lg"
+               <Button
-               radius={30}
+                  c={"white"}
-               fullWidth
+                  bg={WARNA.biruTua}
-               onClick={() => { 
+                  size="lg"
-                  if (
+                  radius={30}
-                     body.title !== "" &&
+                  fullWidth
-                     body.desc !== "" 
+                  onClick={() => {
-                  ) {
+                     if (
-                     setOpen(true)
+                        body.title !== "" &&
-                  } else {
+                        body.desc !== ""
-                     toast.error("Isi data dengan lengkap")
+                     ) {
-                  }
+                        setOpen(true)
-                }}
+                     } else {
-            >
+                        toast.error("Isi data dengan lengkap")
-               Simpan
+                     }
-            </Button>
+                  }}
+               >
+                  Simpan
+               </Button>
+            }
          </Box>
          <LayoutModal opened={isOpen} onClose={() => setOpen(false)}
             description="Apakah Anda yakin ingin mengubah data?"

src/module/announcement/ui/edit_choose_member.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { LayoutNavbarNew, WARNA } from '@/module/_global';
 import { funGetGroupDivision } from '@/module/group/lib/api_group';
-import { Box, Button, Divider, Flex, Group, Stack, Text } from '@mantine/core';
+import { Box, Button, Divider, Flex, Group, rem, Skeleton, Stack, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import React, { useState } from 'react';
 import { FaCheck } from 'react-icons/fa';
@@ -22,6 +22,7 @@ export default function EditChooseMember({ onClose }: { onClose: (val: any) => v
    const [selectAll, setSelectAll] = useState(false);
    const [isData, setIsData] = useState<GroupData[]>([])
    const memberGroup = useHookstate(globalMemberEditAnnouncement)
+   const [loading, setLoading] = useState(true)
 
    const handleCheck = (groupId: string, divisionId: string) => {
       const newChecked = { ...checked };
@@ -70,6 +71,7 @@ export default function EditChooseMember({ onClose }: { onClose: (val: any) => v
    };
 
    async function getData() {
+      setLoading(true)
       const response = await funGetGroupDivision()
       setIsData(response.data)
 
@@ -81,6 +83,7 @@ export default function EditChooseMember({ onClose }: { onClose: (val: any) => v
 
          setChecked(formatArray)
       }
+      setLoading(false)
    }
 
    const handleSubmit = () => {
@@ -107,7 +110,7 @@ export default function EditChooseMember({ onClose }: { onClose: (val: any) => v
    return (
       <div>
          <LayoutNavbarNew back="" title="Tambah Divisi Penerima Pengumuman" menu={<></>} />
-         <Box p={20}>
+         <Box p={20} pb={100}>
             <Group justify='flex-end' mb={20}>
                <Text
                   onClick={handleSelectAll}
@@ -121,60 +124,81 @@ export default function EditChooseMember({ onClose }: { onClose: (val: any) => v
                   Pilih Semua
                </Text>
             </Group>
-            {isData.map((item) => (
+            {loading ?
-               <Stack mb={30} key={item.id}>
+               Array(6)
-                  <Group onClick={() => handleGroupCheck(item.id)} justify='space-between' align='center'>
+                  .fill(null)
-                     <Text
+                  .map((_, i) => (
-                        style={{
+                     <Box key={i} mb={20}>
-                           cursor: 'pointer',
+                        <Skeleton height={20} radius={10} mt={20} width={"30%"} />
-                           display: 'flex',
+                        <Skeleton height={20} ml={40} radius={10} mt={10} width={"80%"} />
-                           alignItems: 'center',
+                        <Skeleton height={20} ml={40} radius={10} mt={20} width={"80%"} />
-                        }}
-                        fw={checked[item.id] && checked[item.id].length === item.Division.length ? 'bold' : 'normal'}
-                     >
-                        {item.name}
-                     </Text>
-                     <Text
-                     >
-                        {checked[item.id] && checked[item.id].length === item.Division.length ? <FaCheck style={{ marginRight: 10 }} />
-                           : (checked[item.id] && checked[item.id].length > 0 && checked[item.id].length < item.Division.length) ? <FaMinus style={{ marginRight: 10 }} /> : ""}
-                     </Text>
-                  </Group>
-                  <Divider />
-                  {item.Division.map((division) => (
-                     <Box key={division.id}>
-                        <Group onClick={() => handleCheck(item.id, division.id)} justify='space-between' align='center'>
-                           <Text
-                              style={{
-                                 cursor: 'pointer',
-                                 display: 'flex',
-                                 alignItems: 'center',
-                                 paddingLeft: 20,
-                              }}
-                           >
-                              {division.name}
-                           </Text>
-                           <Text
-                              style={{
-                                 cursor: 'pointer',
-                                 display: 'flex',
-                                 alignItems: 'center',
-                                 paddingLeft: 20,
-                              }}
-                           >
-                              {checked[item.id] && checked[item.id].includes(division.id) ? <FaCheck style={{ marginRight: 10 }} /> : ""}
-                           </Text>
-                        </Group>
-                        <Box pt={15}>
-                           <Divider />
-                        </Box>
                      </Box>
+                  ))
+               :
+               isData.map((item) => (
+                  <Stack mb={30} key={item.id}>
+                     <Group onClick={() => handleGroupCheck(item.id)} justify='space-between' align='center'>
+                        <Text
+                           style={{
+                              cursor: 'pointer',
+                              display: 'flex',
+                              alignItems: 'center',
+                           }}
+                           fw={checked[item.id] && checked[item.id].length === item.Division.length ? 'bold' : 'normal'}
+                        >
+                           {item.name}
+                        </Text>
+                        <Text
+                        >
+                           {checked[item.id] && checked[item.id].length === item.Division.length ? <FaCheck style={{ marginRight: 10 }} />
+                              : (checked[item.id] && checked[item.id].length > 0 && checked[item.id].length < item.Division.length) ? <FaMinus style={{ marginRight: 10 }} /> : ""}
+                        </Text>
+                     </Group>
+                     <Divider />
+                     {item.Division.map((division) => (
+                        <Box key={division.id}>
+                           <Group onClick={() => handleCheck(item.id, division.id)} justify='space-between' align='center'>
+                              <Text
+                                 style={{
+                                    cursor: 'pointer',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    paddingLeft: 20,
+                                 }}
+                              >
+                                 {division.name}
+                              </Text>
+                              <Text
+                                 style={{
+                                    cursor: 'pointer',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    paddingLeft: 20,
+                                 }}
+                              >
+                                 {checked[item.id] && checked[item.id].includes(division.id) ? <FaCheck style={{ marginRight: 10 }} /> : ""}
+                              </Text>
+                           </Group>
+                           <Box pt={15}>
+                              <Divider />
+                           </Box>
+                        </Box>
 
-                  ))}
+                     ))}
-               </Stack>
+                  </Stack>
-            ))}
+               ))
+            }
 
-            <Box mt="xl">
+
+         </Box>
+         <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
+            maxWidth: rem(550),
+            zIndex: 999,
+            backgroundColor: `${WARNA.bgWhite}`,
+         }}>
+            {loading ?
+               <Skeleton height={50} radius={30} />
+               :
                <Button
                   color="white"
                   bg={WARNA.biruTua}
@@ -188,8 +212,7 @@ export default function EditChooseMember({ onClose }: { onClose: (val: any) => v
                >
                   Simpan
                </Button>
-            </Box>
+            }
-
          </Box>
       </div>
    );

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, rem, Select, SimpleGrid, Stack, Text, Textarea, TextInput } from '@mantine/core';
+import { Avatar, Box, Button, Flex, Group, Input, rem, Select, SimpleGrid, Skeleton, Stack, Text, Textarea, TextInput } from '@mantine/core';
 import { DateInput, TimeInput } from '@mantine/dates';
 import React, { useState } from 'react';
 import { IoIosArrowDropright } from 'react-icons/io';
@@ -23,6 +23,7 @@ export default function UpdateDivisionCalender() {
   const memberValue = memberUser.get() as IFormMemberCalender[]
   const [isDataCalender, setDataCalender] = useState<IDetailByIdCalender>()
   const [openMember, setOpenMember] = useState(false)
+  const [loading, setLoading] = useState(true)
   const [touched, setTouched] = useState({
     title: false,
     dateStart: false,
@@ -34,11 +35,14 @@ export default function UpdateDivisionCalender() {
 
   const fetchGetOne = async () => {
     try {
+      setLoading(true)
       const response = await funGetOneCalender(param.detail)
       setDataCalender(response.data.calender)
       memberUser.set(response.data.member)
     } catch (error) {
       console.log(error)
+    } finally {
+      setLoading(false)
     }
   }
 
@@ -87,256 +91,273 @@ export default function UpdateDivisionCalender() {
       <LayoutNavbarNew back={`/division/${param.id}/calender/${param.detail}`} title="Edit kalender" menu />
       <Box p={20}>
         <Stack>
-          <TextInput
+          {loading ?
-            styles={{
+            <>
-              input: {
+              <Skeleton height={40} mt={25} radius={10} />
-                border: `1px solid ${"#D6D8F6"}`,
+              <Skeleton height={40} mt={25} radius={10} />
-                borderRadius: 10,
+              <Group justify='space-between'>
-              },
+                <Skeleton height={40} width={"47%"} mt={20} radius={10} />
-            }}
+                <Skeleton height={40} width={"47%"} mt={20} radius={10} />
-            size="md"
+              </Group>
-            placeholder="Event Nama"
+              <Skeleton height={40} mt={25} radius={10} />
-            label="Event Nama"
+              <Skeleton height={40} mt={25} radius={10} />
-            defaultValue={isDataCalender?.title}
+              <Skeleton height={80} mt={25} radius={10} />
-            onChange={
+              <Skeleton height={40} mt={20} radius={10} />
-              (event) => {
+            </>
-                setDataCalender({
+            :
-                  ...isDataCalender,
+            <>
-                  title: event.target.value
+              <TextInput
-                })
+                styles={{
-                setTouched({ ...touched, title: false })
+                  input: {
-              }
+                    border: `1px solid ${"#D6D8F6"}`,
-            }
+                    borderRadius: 10,
-            onBlur={() => setTouched({ ...touched, title: true })}
+                  },
-            required
+                }}
-            error={
+                size="md"
-              touched.title && (
+                placeholder="Event Nama"
-                isDataCalender?.title == "" ? "Nama Acara Tidak Boleh Kosong" : null
+                label="Event Nama"
-              )
+                defaultValue={isDataCalender?.title}
-            }
+                onChange={
-          />
+                  (event) => {
-          <DateInput
+                    setDataCalender({
-            styles={{
+                      ...isDataCalender,
-              input: {
+                      title: event.target.value
-                border: `1px solid ${"#D6D8F6"}`,
+                    })
-                borderRadius: 10,
+                    setTouched({ ...touched, title: false })
-              },
+                  }
-            }}
+                }
-            size="md"
+                onBlur={() => setTouched({ ...touched, title: true })}
-            value={
+                required
-              (isDataCalender?.dateStart == '' || isDataCalender?.dateStart == null) ? null : new Date(isDataCalender.dateStart)
+                error={
-            }
+                  touched.title && (
-            onChange={
+                    isDataCalender?.title == "" ? "Nama Acara Tidak Boleh Kosong" : null
-              (val) => {
+                  )
-                setValue(val);
+                }
-                setDataCalender({
+              />
-                  ...isDataCalender,
+              <DateInput
-                  dateStart: moment(val).format("YYYY-MM-DD")
+                styles={{
-                })
+                  input: {
-                setTouched({ ...touched, dateStart: false })
+                    border: `1px solid ${"#D6D8F6"}`,
-              }
+                    borderRadius: 10,
-            }
+                  },
-            placeholder="Input Tanggal"
+                }}
-            label="Tanggal"
+                size="md"
-            minDate={new Date()}
+                value={
-            onBlur={() => setTouched({ ...touched, dateStart: true })}
+                  (isDataCalender?.dateStart == '' || isDataCalender?.dateStart == null) ? null : new Date(isDataCalender.dateStart)
-            error={
+                }
-              touched.dateStart && (
+                onChange={
-                isDataCalender?.dateStart == "" ? "Tanggal Tidak Boleh Kosong" : null
+                  (val) => {
-              )
+                    setValue(val);
-            }
+                    setDataCalender({
-            required
+                      ...isDataCalender,
-          />
+                      dateStart: moment(val).format("YYYY-MM-DD")
-          <SimpleGrid
+                    })
-            cols={{ base: 2, sm: 2, lg: 2 }}
+                    setTouched({ ...touched, dateStart: false })
-          >
+                  }
-            <TimeInput
+                }
-              styles={{
+                placeholder="Input Tanggal"
+                label="Tanggal"
+                minDate={new Date()}
+                onBlur={() => setTouched({ ...touched, dateStart: true })}
+                error={
+                  touched.dateStart && (
+                    isDataCalender?.dateStart == "" ? "Tanggal Tidak Boleh Kosong" : null
+                  )
+                }
+                required
+              />
+              <SimpleGrid
+                cols={{ base: 2, sm: 2, lg: 2 }}
+              >
+                <TimeInput
+                  styles={{
+                    input: {
+                      border: `1px solid ${"#D6D8F6"}`,
+                      borderRadius: 10,
+                    },
+                  }}
+                  size="md"
+                  label="Waktu Awal"
+                  // value={isDataCalender?.timeStart}
+                  defaultValue={isDataCalender?.timeStart}
+                  onChange={
+                    (event) => {
+                      setDataCalender({
+                        ...isDataCalender,
+                        timeStart: event.target.value
+                      })
+                    }
+                  }
+                  onBlur={() => setTouched({ ...touched, timeStart: true })}
+                  error={touched.timeStart && !isDataCalender?.timeStart ? "Waktu Awal Tidak Boleh Kosong" : null}
+                  required
+                />
+                <TimeInput
+                  styles={{
+                    input: {
+                      border: `1px solid ${"#D6D8F6"}`,
+                      borderRadius: 10,
+                    },
+                  }}
+                  size="md"
+                  label="Waktu Akhir"
+                  // value={isDataCalender?.timeEnd}
+                  defaultValue={isDataCalender?.timeEnd}
+                  onChange={
+                    (event) => {
+                      setDataCalender({
+                        ...isDataCalender,
+                        timeEnd: event.target.value
+                      })
+                    }
+                  }
+                  onBlur={() => setTouched({ ...touched, timeEnd: true })}
+                  required
+                  error={
+                    touched.timeEnd && (
+                      isDataCalender?.timeEnd == "" ? "Waktu Akhir Tidak Boleh Kosong" : null
+                    ) ||
+                    (String(isDataCalender?.timeStart) > String(isDataCalender?.timeEnd) ? "Waktu Akhir Tidak Tepat" : null)
+                  }
+                />
+              </SimpleGrid>
+              <TextInput
+                styles={{
+                  input: {
+                    border: `1px solid ${"#D6D8F6"}`,
+                    borderRadius: 10,
+                  },
+                }}
+                size="md"
+                placeholder="Link Meet"
+                label="Link Meet"
+                // value={isDataCalender?.linkMeet}
+                defaultValue={isDataCalender?.linkMeet}
+                onChange={
+                  (event) => {
+                    setDataCalender({
+                      ...isDataCalender,
+                      linkMeet: event.target.value
+                    })
+                  }
+                }
+              />
+              <Select
+                styles={{
+                  input: {
+                    border: `1px solid ${"#D6D8F6"}`,
+                    borderRadius: 10,
+                  },
+                }}
+                size="md"
+                placeholder="Ulangi Event"
+                label="Ulangi Event"
+                data={[
+                  { value: '1', label: 'Acara 1 Kali' },
+                  { value: '2', label: 'Hari Kerja (Sen - Jum)' },
+                  { value: '3', label: 'Mingguan' },
+                  { value: '4', label: 'Bulanan' },
+                  { value: '5', label: 'Tahunan' },
+                ]}
+                value={isDataCalender?.repeatEventTyper}
+                defaultValue={isDataCalender?.repeatEventTyper}
+                onChange={
+                  (val: any) => {
+                    setDataCalender({
+                      ...isDataCalender,
+                      repeatEventTyper: val
+                    })
+                    setTouched({ ...touched, repeatEventTyper: false })
+                  }
+                }
+                onBlur={() => setTouched({ ...touched, repeatEventTyper: true })}
+                error={
+                  touched.repeatEventTyper && (
+                    isDataCalender?.repeatEventTyper == "" ? "Ulangi Event Tidak Boleh Kosong" : null
+                  )
+                }
+                required
+              />
+              <Textarea styles={{
                 input: {
                   border: `1px solid ${"#D6D8F6"}`,
                   borderRadius: 10,
                 },
               }}
-              size="md"
+                size="md" placeholder='Deskripsi' label="Deskripsi"
-              label="Waktu Awal"
+                // value={isDataCalender?.desc}
-              // value={isDataCalender?.timeStart}
+                defaultValue={isDataCalender?.desc}
-              defaultValue={isDataCalender?.timeStart}
+                onChange={
-              onChange={
+                  (event) => {
-                (event) => {
+                    setDataCalender({
-                  setDataCalender({
+                      ...isDataCalender,
-                    ...isDataCalender,
+                      desc: event.target.value
-                    timeStart: event.target.value
+                    })
-                  })
+                  }
                 }
-              }
+              />
-              onBlur={() => setTouched({ ...touched, timeStart: true })}
+              <Box mt={5} onClick={() => setOpenMember(true)}>
-              error={touched.timeStart && !isDataCalender?.timeStart ? "Waktu Awal Tidak Boleh Kosong" : null}
+                <Group
-              required
+                  justify="space-between"
-            />
+                  p={10}
-            <TimeInput
-              styles={{
-                input: {
-                  border: `1px solid ${"#D6D8F6"}`,
-                  borderRadius: 10,
-                },
-              }}
-              size="md"
-              label="Waktu Akhir"
-              // value={isDataCalender?.timeEnd}
-              defaultValue={isDataCalender?.timeEnd}
-              onChange={
-                (event) => {
-                  setDataCalender({
-                    ...isDataCalender,
-                    timeEnd: event.target.value
-                  })
-                }
-              }
-              onBlur={() => setTouched({ ...touched, timeEnd: true })}
-              required
-              error={
-                touched.timeEnd && (
-                  isDataCalender?.timeEnd == "" ? "Waktu Akhir Tidak Boleh Kosong" : null
-                ) ||
-                (String(isDataCalender?.timeStart) > String(isDataCalender?.timeEnd) ? "Waktu Akhir Tidak Tepat" : null)
-              }
-            />
-          </SimpleGrid>
-          <TextInput
-            styles={{
-              input: {
-                border: `1px solid ${"#D6D8F6"}`,
-                borderRadius: 10,
-              },
-            }}
-            size="md"
-            placeholder="Link Meet"
-            label="Link Meet"
-            // value={isDataCalender?.linkMeet}
-            defaultValue={isDataCalender?.linkMeet}
-            onChange={
-              (event) => {
-                setDataCalender({
-                  ...isDataCalender,
-                  linkMeet: event.target.value
-                })
-              }
-            }
-          />
-          <Select
-            styles={{
-              input: {
-                border: `1px solid ${"#D6D8F6"}`,
-                borderRadius: 10,
-              },
-            }}
-            size="md"
-            placeholder="Ulangi Event"
-            label="Ulangi Event"
-            data={[
-              { value: '1', label: 'Acara 1 Kali' },
-              { value: '2', label: 'Hari Kerja (Sen - Jum)' },
-              { value: '3', label: 'Mingguan' },
-              { value: '4', label: 'Bulanan' },
-              { value: '5', label: 'Tahunan' },
-            ]}
-            value={isDataCalender?.repeatEventTyper}
-            defaultValue={isDataCalender?.repeatEventTyper}
-            onChange={
-              (val: any) => {
-                setDataCalender({
-                  ...isDataCalender,
-                  repeatEventTyper: val
-                })
-                setTouched({ ...touched, repeatEventTyper: false })
-              }
-            }
-            onBlur={() => setTouched({ ...touched, repeatEventTyper: true })}
-            error={
-              touched.repeatEventTyper && (
-                isDataCalender?.repeatEventTyper == "" ? "Ulangi Event Tidak Boleh Kosong" : null
-              )
-            }
-            required
-          />
-          <Textarea styles={{
-            input: {
-              border: `1px solid ${"#D6D8F6"}`,
-              borderRadius: 10,
-            },
-          }}
-            size="md" placeholder='Deskripsi' label="Deskripsi"
-            // value={isDataCalender?.desc}
-            defaultValue={isDataCalender?.desc}
-            onChange={
-              (event) => {
-                setDataCalender({
-                  ...isDataCalender,
-                  desc: event.target.value
-                })
-              }
-            }
-          />
-          <Box mt={5} onClick={() => setOpenMember(true)}>
-            <Group
-              justify="space-between"
-              p={10}
-              style={{
-                border: `1px solid ${"#D6D8F6"}`,
-                borderRadius: 10,
-              }}
-            >
-              <Text>Tambah Anggota *</Text>
-              <IoIosArrowDropright size={25} />
-            </Group>
-          </Box>
-          <Box pt={30}>
-            <Group justify="space-between">
-              <Text c={WARNA.biruTua}>Anggota Terpilih</Text>
-              <Text c={WARNA.biruTua}>Total {memberUser.length} Anggota</Text>
-            </Group>
-            <Box pt={10} >
-              <Box mb={100}>
-                <Box
                   style={{
-                    border: `1px solid ${"#C7D6E8"}`,
+                    border: `1px solid ${"#D6D8F6"}`,
                     borderRadius: 10,
                   }}
-                  px={20}
-                  py={10}
                 >
-                  {memberUser.length == 0 ?
+                  <Text>Tambah Anggota *</Text>
-                    <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '10vh' }}>
+                  <IoIosArrowDropright size={25} />
-                      <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada Anggota</Text>
+                </Group>
-                    </Box>
+              </Box>
-                    :
+              <Box pt={30}>
+                <Group justify="space-between">
+                  <Text c={WARNA.biruTua}>Anggota Terpilih</Text>
+                  <Text c={WARNA.biruTua}>Total {memberUser.length} Anggota</Text>
+                </Group>
+                <Box pt={10} >
+                  <Box mb={100}>
+                    <Box
+                      style={{
+                        border: `1px solid ${"#C7D6E8"}`,
+                        borderRadius: 10,
+                      }}
+                      px={20}
+                      py={10}
+                    >
+                      {memberUser.length == 0 ?
+                        <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '10vh' }}>
+                          <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada Anggota</Text>
+                        </Box>
+                        :
 
-                    memberUser.get().map((v: any, i: any) => {
+                        memberUser.get().map((v: any, i: any) => {
-                      return (
+                          return (
-                        <Flex
+                            <Flex
-                          justify={"space-between"}
+                              justify={"space-between"}
-                          align={"center"}
+                              align={"center"}
-                          mt={20}
+                              mt={20}
-                          key={i}
+                              key={i}
-                        >
+                            >
-                          <Group>
+                              <Group>
-                            <Avatar src={"v.image"} alt="it's me" size="lg" />
+                                <Avatar src={"v.image"} alt="it's me" size="lg" />
-                            <Box>
+                                <Box>
+                                  <Text c={WARNA.biruTua} fw={"bold"}>
+                                    {v.name}
+                                  </Text>
+                                </Box>
+                              </Group>
                               <Text c={WARNA.biruTua} fw={"bold"}>
-                                {v.name}
+                                Anggota
                               </Text>
-                            </Box>
+                            </Flex>
-                          </Group>
+                          );
-                          <Text c={WARNA.biruTua} fw={"bold"}>
+                        })}
-                            Anggota
+                    </Box>
-                          </Text>
+                  </Box>
-                        </Flex>
-                      );
-                    })}
                 </Box>
               </Box>
-            </Box>
+            </>
-          </Box>
+          }
         </Stack>
       </Box>
       <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
@@ -344,16 +365,20 @@ export default function UpdateDivisionCalender() {
         zIndex: 999,
         backgroundColor: `${WARNA.bgWhite}`,
       }}>
-        <Button
+        {loading ?
-          c={"white"}
+          <Skeleton height={50} radius={30} />
-          bg={WARNA.biruTua}
+          :
-          size="lg"
+          <Button
-          radius={30}
+            c={"white"}
-          fullWidth
+            bg={WARNA.biruTua}
-          onClick={() => setModal(true)}
+            size="lg"
-        >
+            radius={30}
-          Simpan
+            fullWidth
-        </Button>
+            onClick={() => setModal(true)}
+          >
+            Simpan
+          </Button>
+        }
       </Box>
       <LayoutModal opened={isModal} onClose={() => setModal(false)}
         description="Apakah Anda yakin ingin menambahkan data?"

src/module/calender/ui/update_list_users.tsx

@@ -2,7 +2,7 @@
 import { LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
 import { funGetDivisionById, IDataMemberDivision } from '@/module/division_new';
 import { useHookstate } from '@hookstate/core';
-import { Avatar, Box, Button, Center, Divider, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import { Avatar, Box, Button, Center, Divider, Flex, Group, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
 import { useParams, useRouter } from 'next/navigation';
 import React, { useState } from 'react';
 import { HiMagnifyingGlass } from 'react-icons/hi2';
@@ -171,7 +171,15 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
             })}
           </Box>
         }
-        <Box mt={"xl"}>
+      </Box>
+        <Box  pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
+            maxWidth: rem(550),
+            zIndex: 999,
+            backgroundColor: `${WARNA.bgWhite}`,
+      }}>
+        {loading ?
+          <Skeleton height={50} radius={30} />
+          :
           <Button
             c={"white"}
             bg={WARNA.biruTua}
@@ -182,8 +190,8 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
           >
             Simpan
           </Button>
+        }
         </Box>
-      </Box>
     </Box>
   );
 }

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, rem } from "@mantine/core"
+import { Box, Group, Avatar, Textarea, Button, Grid, rem, Skeleton } from "@mantine/core"
 import { useParams, useRouter } from "next/navigation"
 import { useState } from "react"
 import toast from "react-hot-toast"
@@ -13,17 +13,21 @@ export default function FormEditDiscussion() {
    const router = useRouter()
    const param = useParams<{ id: string, detail: string }>()
    const [isDataOne, setDataOne] = useState("")
+   const [loading, setLoading] = useState(true)
    const [touched, setTouched] = useState({
       desc: false,
    });
 
    async function fetchGetOneDiscussion() {
       try {
+         setLoading(true)
          const response = await funGetDiscussionById(param.detail)
          setDataOne(response.data.desc)
       } catch (error) {
          console.log(error);
          toast.error("Gagal menampilkan discussion, coba lagi nanti");
+      } finally {
+         setLoading(false)
       }
    }
 
@@ -60,9 +64,22 @@ export default function FormEditDiscussion() {
          <Box p={20}>
             <Grid gutter={0} pt={10}>
                <Grid.Col span={"auto"}>
+                  {loading ? 
+                    <Skeleton height={60} width={60} radius={100} />  
+               :   
                   <Avatar src={'https://i.pravatar.cc/1000?img=32'} alt="it's me" size="lg" />
+               }
                </Grid.Col>
                <Grid.Col span={10}>
+                  {loading ?
+                      Array(10)
+                      .fill(null)
+                      .map((_, i) => (
+                        <Box key={i} mb={20}>
+                          <Skeleton height={20} radius={10} />
+                        </Box>
+                      ))
+               :   
                   <Box>
                      <Textarea
                         placeholder="Tuliskan apa yang ingin anda diskusikan"
@@ -83,6 +100,7 @@ export default function FormEditDiscussion() {
                         }
                      />
                   </Box>
+               }
                </Grid.Col>
             </Grid>
          </Box>
@@ -91,24 +109,28 @@ export default function FormEditDiscussion() {
             zIndex: 999,
             backgroundColor: `${WARNA.bgWhite}`,
          }}>
-            <Button
+            {loading ?
-               color="white"
+               <Skeleton height={50} radius={30} />
-               bg={WARNA.biruTua}
+               :
-               size="lg"
+               <Button
-               radius={30}
+                  color="white"
-               fullWidth
+                  bg={WARNA.biruTua}
-               onClick={() => {
+                  size="lg"
-                  if (
+                  radius={30}
-                     isDataOne !== ""
+                  fullWidth
-                  ) {
+                  onClick={() => {
-                     setValModal(true)
+                     if (
-                  } else {
+                        isDataOne !== ""
-                     toast.error("Form Tidak Boleh Kosong");
+                     ) {
-                  }
+                        setValModal(true)
-               }}
+                     } else {
-            >
+                        toast.error("Form Tidak Boleh Kosong");
-               Simpan
+                     }
-            </Button>
+                  }}
+               >
+                  Simpan
+               </Button>
+            }
          </Box>
 
          <LayoutModal opened={isValModal} onClose={() => setValModal(false)}

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, rem, Select, Stack, Textarea, TextInput } from '@mantine/core';
+import { Box, Button, rem, Select, Skeleton, Stack, Textarea, TextInput } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { useParams, useRouter } from 'next/navigation';
 import React, { useState } from 'react';
@@ -78,40 +78,52 @@ export default function EditDivision() {
       <LayoutNavbarNew back="" title="Edit Divisi" menu />
       <Box p={20}>
         <Stack>
-          <TextInput
+          {loading ?
-            placeholder="Judul"
+            <>
-            label="Judul"
+              <Skeleton height={40} mt={20} radius={30} />
-            size="md"
+              <Skeleton height={"40vh"} mt={20} radius={10} />
-            required
+            </>
-            radius={40}
+            :
-            value={body.name}
+            <>
-            onChange={(e) => {
+              <TextInput
-              setBody({ ...body, name: e.target.value })
+                placeholder="Judul"
-              setTouched({ ...touched, name: false })
+                label="Judul"
-            }}
+                size="md"
-            onBlur={() => setTouched({ ...touched, name: true })}
+                required
-            error={
+                radius={40}
-              touched.name && (
+                value={body.name}
-                body.name == "" ? "Judul Tidak Boleh Kosong" : null
+                onChange={(e) => {
-              )
+                  setBody({ ...body, name: e.target.value })
-            }
+                  setTouched({ ...touched, name: false })
-          />
+                }}
-          <Textarea placeholder="Deskripsi" label="Deskripsi" size="md" radius={10}
+                onBlur={() => setTouched({ ...touched, name: true })}
-            value={body.desc}
+                error={
-            onChange={(e) => { setBody({ ...body, desc: e.currentTarget.value }) }}
+                  touched.name && (
-            styles={{
+                    body.name == "" ? "Judul Tidak Boleh Kosong" : null
-              input: {
+                  )
-                height: "40vh"
+                }
-              }
+              />
-            }}
+              <Textarea placeholder="Deskripsi" label="Deskripsi" size="md" radius={10}
-          />
+                value={body.desc}
+                onChange={(e) => { setBody({ ...body, desc: e.currentTarget.value }) }}
+                styles={{
+                  input: {
+                    height: "40vh"
+                  }
+                }}
+              />
+            </>
+          }
         </Stack>
       </Box>
-        <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
+      <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
-            maxWidth: rem(550),
+        maxWidth: rem(550),
-            zIndex: 999,
+        zIndex: 999,
-            backgroundColor: `${WARNA.bgWhite}`,
+        backgroundColor: `${WARNA.bgWhite}`,
-         }}>
+      }}>
+        {loading ?
+          <Skeleton height={50} radius={30} />
+          :
           <Button
             color="white"
             bg={WARNA.biruTua}
@@ -130,7 +142,8 @@ 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/position/ui/drawer_detail_position.tsx

@@ -1,7 +1,7 @@
 import { LayoutDrawer, WARNA } from "@/module/_global"
 import LayoutModal from "@/module/_global/layout/layout_modal"
 import { funGetAllGroup, IDataGroup } from "@/module/group"
-import { Box, Stack, SimpleGrid, Flex, Text, Select, TextInput, Button } from "@mantine/core"
+import { Box, Stack, SimpleGrid, Flex, Text, Select, TextInput, Button, Skeleton } from "@mantine/core"
 import { useShallowEffect } from "@mantine/hooks"
 import { useEffect, useState } from "react"
 import toast from "react-hot-toast"
@@ -17,6 +17,7 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
    const [openDrawerGroup, setOpenDrawerGroup] = useState(false)
    const [isModal, setModal] = useState(false)
    const refresh = useHookstate(globalRefreshPosition)
+   const [loading, setLoading] = useState(true)
    const [data, setData] = useState<any>({
       id: id,
       name: "",
@@ -26,7 +27,7 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
    const [touched, setTouched] = useState({
       name: false,
       idGroup: false
-    });
+   });
 
    function onCLose() {
       onUpdated(true)
@@ -49,15 +50,19 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
 
    async function getOneData() {
       try {
+         setLoading(true)
          const res = await funGetOnePosition(id)
          if (res.success) {
             setData(res.data)
          } else {
             toast.error(res.message)
          }
+         setLoading(false)
       } catch (error) {
          console.error(error)
          toast.error("Gagal mendapatkan jabatan, coba lagi nanti");
+      } finally {
+         setLoading(false)
       }
    }
 
@@ -147,66 +152,75 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
 
          <LayoutDrawer opened={openDrawerGroup} onClose={() => setOpenDrawerGroup(false)} title={'Edit Jabatan'} size="lg">
             <Box pt={10} pos={"relative"} h={"70vh"}>
-               <Select
+               {loading ?
-                  label="Grup"
+                  <Box>
-                  placeholder="Pilih grup"
+                     <Skeleton height={40} mt={6} radius={10} />
-                  size="md"
+                     <Skeleton height={40} mt={15} radius={10} />
-                  radius={10}
+                  </Box>
-                  data={
+                  :
-                     listGroup
+                  <Box>
-                        ? listGroup.map((data) => ({
+                     <Select
-                           value: data.id,
+                        label="Grup"
-                           label: data.name,
+                        placeholder="Pilih grup"
-                        }))
+                        size="md"
-                        : []
+                        radius={10}
-                  }
+                        data={
-                  value={String(data.idGroup)}
+                           listGroup
-                  mb={5}
+                              ? listGroup.map((data) => ({
-                  onChange={(val) => {
+                                 value: data.id,
-                     setData({ ...data, idGroup: val })
+                                 label: data.name,
-                     setTouched({ ...touched, idGroup: false })
+                              }))
-                  }}
+                              : []
-                  withAsterisk
+                        }
-                  styles={{
+                        value={String(data.idGroup)}
-                     input: {
+                        mb={5}
-                        color: WARNA.biruTua,
+                        onChange={(val) => {
-                        borderRadius: WARNA.biruTua,
+                           setData({ ...data, idGroup: val })
-                        borderColor: WARNA.biruTua,
+                           setTouched({ ...touched, idGroup: false })
-                     },
+                        }}
-                  }}
+                        withAsterisk
-                  error={
+                        styles={{
-                     touched.idGroup && (
+                           input: {
-                       data.idGroup == "" ? "Grup Tidak Boleh Kosong" : null
+                              color: WARNA.biruTua,
-                     )
+                              borderRadius: WARNA.biruTua,
-                   }
+                              borderColor: WARNA.biruTua,
-                  onBlur={() => setTouched({ ...touched, idGroup: true })}
+                           },
-               />
+                        }}
-               <TextInput
+                        error={
-                  label="Jabatan"
+                           touched.idGroup && (
-                  styles={{
+                              data.idGroup == "" ? "Grup Tidak Boleh Kosong" : null
-                     input: {
+                           )
-                        color: WARNA.biruTua,
+                        }
-                        borderRadius: WARNA.biruTua,
+                        onBlur={() => setTouched({ ...touched, idGroup: true })}
-                        borderColor: WARNA.biruTua,
+                     />
-                     },
+                     <TextInput
-                  }}
+                        label="Jabatan"
-                  required
+                        styles={{
-                  my={15}
+                           input: {
-                  size="md"
+                              color: WARNA.biruTua,
-                  value={String(data.name)}
+                              borderRadius: WARNA.biruTua,
-                  onChange={(e) => {
+                              borderColor: WARNA.biruTua,
-                     setData({ ...data, name: e.target.value })
+                           },
-                     setTouched({ ...touched, name: false })
+                        }}
-                  }}
+                        required
-                  onBlur={() => setTouched({ ...touched, name: true })}
+                        my={15}
-                  error={
+                        size="md"
-                     touched.name && (
+                        value={String(data.name)}
-                       data.name == "" ? "Nama Jabatan Tidak Boleh Kosong" : null
+                        onChange={(e) => {
-                     )
+                           setData({ ...data, name: e.target.value })
-                   }
+                           setTouched({ ...touched, name: false })
-                  radius={10}
+                        }}
-                  placeholder="Nama Jabatan"
+                        onBlur={() => setTouched({ ...touched, name: true })}
-               />
+                        error={
+                           touched.name && (
+                              data.name == "" ? "Nama Jabatan Tidak Boleh Kosong" : null
+                           )
+                        }
+                        radius={10}
+                        placeholder="Nama Jabatan"
+                     />
+                  </Box>
+               }
                <Box pos={"absolute"} bottom={10} left={0} right={0}>
                   <Button
                      c={"white"}

src/module/project/ui/add_member_detail_project.tsx

@@ -5,8 +5,8 @@ import { IDataMemberProject, IDataMemberProjectDetail } from '../lib/type_projec
 import toast from 'react-hot-toast';
 import { funAddMemberProject, funGetAllMemberById, funGetOneProjectById } from '../lib/api_project';
 import { useShallowEffect } from '@mantine/hooks';
-import { Avatar, Box, Button, Divider, Flex, Group, rem, Stack, Text } from '@mantine/core';
+import { Avatar, Box, Button, Divider, Flex, Group, rem, Skeleton, Stack, Text } from '@mantine/core';
-import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
 import { FaCheck } from 'react-icons/fa6';
 import LayoutModal from '@/module/_global/layout/layout_modal';
 
@@ -17,27 +17,31 @@ export default function AddMemberDetailProject() {
   const [isData, setData] = useState<IDataMemberProjectDetail[]>([])
   const [isDataMember, setDataMember] = useState<IDataMemberProject[]>([])
   const [selectAll, setSelectAll] = useState(false)
+  const [loading, setLoading] = useState(true)
   const [openModal, setOpenModal] = useState(false)
 
 
   async function getData() {
     try {
+      setLoading(true)
       const response = await funGetAllMemberById(param.id)
       if (response.success) {
         setData(response.data.member)
       } else {
         toast.error(response.message)
       }
-
       const res = await funGetOneProjectById(param.id, 'member');
       if (res.success) {
         setDataMember(res.data)
       } else {
         toast.error(res.message);
       }
+      setLoading(false)
     } catch (error) {
       console.log(error)
       toast.error("Gagal mendapatkan anggota, coba lagi nanti");
+    } finally {
+      setLoading(false)
     }
   }
 
@@ -112,6 +116,15 @@ export default function AddMemberDetailProject() {
           </Text>
           {selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
         </Group>
+        {loading ? 
+          Array(8)
+          .fill(null)
+          .map((_, i) => (
+            <Box key={i} mb={10}>
+              <SkeletonSingle/>
+            </Box>
+          ))
+      :  
         <Box mt={15} mb={100}>
           {isData.map((v, i) => {
             const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
@@ -148,12 +161,16 @@ export default function AddMemberDetailProject() {
             );
           })}
         </Box>
+      }
       </Box>
         <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
             maxWidth: rem(550),
             zIndex: 999,
             backgroundColor: `${WARNA.bgWhite}`,
-         }}>
+      }}>
+        {loading ? 
+          <Skeleton height={50} radius={30} />
+        :
           <Button
             c={"white"}
             bg={WARNA.biruTua}
@@ -164,6 +181,7 @@ export default function AddMemberDetailProject() {
           >
             Simpan
           </Button>
+      }
         </Box>
 
       <LayoutModal opened={openModal} onClose={() => setOpenModal(false)}

src/module/project/ui/edit_detail_task_project.tsx

@@ -5,7 +5,7 @@ import toast from 'react-hot-toast';
 import { funEditDetailProject, funGetDetailProject } from '../lib/api_project';
 import moment from 'moment';
 import { useShallowEffect } from '@mantine/hooks';
-import { Box, Button, Group, Input, rem, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import { Box, Button, Group, Input, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
 import { LayoutNavbarNew, WARNA } from '@/module/_global';
 import { DatePicker } from '@mantine/dates';
 import LayoutModal from '@/module/_global/layout/layout_modal';
@@ -15,6 +15,7 @@ export default function EditDetailTaskProject() {
    const [name, setName] = useState("")
    const param = useParams<{ id: string }>()
    const [openModal, setOpenModal] = useState(false)
+   const [loading, setLoading] = useState(true)
    const [touched, setTouched] = useState({
       title: false,
    });
@@ -47,6 +48,7 @@ export default function EditDetailTaskProject() {
 
    async function getOneData() {
       try {
+         setLoading(true)
          const res = await funGetDetailProject(param.id);
          if (res.success) {
             setName(res.data.title)
@@ -57,9 +59,12 @@ export default function EditDetailTaskProject() {
          } else {
             toast.error(res.message);
          }
+         setLoading(false);
       } catch (error) {
          console.error(error);
          toast.error("Gagal mendapatkan detail tugas Kegiatan, coba lagi nanti");
+      } finally {
+         setLoading(false);
       }
    }
 
@@ -88,49 +93,65 @@ export default function EditDetailTaskProject() {
             </Group>
             <SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
                <Box>
-                  <Text>Tanggal Mulai</Text>
+                  {loading ?
-                  <Group
+                     <Skeleton height={45} mt={20} radius={10} />
-                     justify="center"
+                     :
-                     bg={"white"}
+                     <> 
-                     h={45}
+                     <Text>Tanggal Mulai</Text>
-                     style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
+                     <Group
-                  >
+                        justify="center"
-                     <Text>{value[0] ? `${moment(value[0]).format('DD-MM-YYYY')}` : ""}</Text>
+                        bg={"white"}
-                  </Group>
+                        h={45}
+                        style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
+                     >
+                        <Text>{value[0] ? `${moment(value[0]).format('DD-MM-YYYY')}` : ""}</Text>
+                     </Group>
+                     </>
+                  }
                </Box>
                <Box>
-                  <Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
+                  {loading ?
-                  <Group
+                     <Skeleton height={45} mt={20} radius={10} />
-                     justify="center"
+                     :
-                     bg={"white"}
+                     <>
-                     h={45}
+                        <Text>Tanggal Berakhir</Text>
-                     style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
+                        <Group
-                  >
+                           justify="center"
-                     <Text>{value[1] ? `${moment(value[1]).format('DD-MM-YYYY')}` : ""}</Text>
+                           bg={"white"}
-                  </Group>
+                           h={45}
+                           style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
+                        >
+                           <Text>{value[1] ? `${moment(value[1]).format('DD-MM-YYYY')}` : ""}</Text>
+                        </Group>
+                     </>
+                  }
                </Box>
             </SimpleGrid>
-            <Stack pt={15}>
+            <Stack pt={15} pb={100}>
-               <TextInput
+               {loading ?
-                  styles={{
+                  <Skeleton height={40} mt={20} radius={10} />
-                     input: {
+                  :
-                        border: `1px solid ${"#D6D8F6"}`,
+                  <TextInput
-                        borderRadius: 10,
+                     styles={{
-                     },
+                        input: {
-                  }}
+                           border: `1px solid ${"#D6D8F6"}`,
-                  placeholder="Input Nama Tahapan"
+                           borderRadius: 10,
-                  label="Judul Tahapan"
+                        },
-                  required
+                     }}
-                  size="md"
+                     placeholder="Input Nama Tahapan"
-                  value={name}
+                     label="Judul Tahapan"
-                  onChange={(e) => { setName(e.target.value) }}
+                     required
-                  onBlur={() => setTouched({ ...touched, title: true })}
+                     size="md"
-                  error={
+                     value={name}
-                     touched.title && (
+                     onChange={(e) => { setName(e.target.value) }}
-                        name == "" ? "Judul Tidak Boleh Kosong" : null
+                     onBlur={() => setTouched({ ...touched, title: true })}
-                     )
+                     error={
-                  }
+                        touched.title && (
-               />
+                           name == "" ? "Judul Tidak Boleh Kosong" : null
+                        )
+                     }
+                  />
+               }
             </Stack>
          </Box>
          <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
@@ -138,6 +159,9 @@ export default function EditDetailTaskProject() {
             zIndex: 999,
             backgroundColor: `${WARNA.bgWhite}`,
          }}>
+            {loading ?
+               <Skeleton height={50} radius={30} />
+               :
             <Button
                c={"white"}
                bg={WARNA.biruTua}
@@ -156,6 +180,7 @@ export default function EditDetailTaskProject() {
             >
                Simpan
             </Button>
+            }
          </Box>
 
          <LayoutModal opened={openModal} onClose={() => setOpenModal(false)}

src/module/project/ui/edit_task_project.tsx

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import toast from 'react-hot-toast';
 import { funEditProject, funGetOneProjectById } from '../lib/api_project';
 import { useShallowEffect } from '@mantine/hooks';
-import { Box, Button, Input, rem, Stack, TextInput } from '@mantine/core';
+import { Box, Button, Input, rem, Skeleton, Stack, TextInput } from '@mantine/core';
 import { LayoutNavbarNew, WARNA } from '@/module/_global';
 import LayoutModal from '@/module/_global/layout/layout_modal';
 
@@ -13,6 +13,7 @@ export default function EditTaskProject() {
   const [name, setName] = useState("")
   const [openModal, setOpenModal] = useState(false)
   const param = useParams<{ id: string }>()
+  const [loading, setLoading] = useState(true)
   const [touched, setTouched] = useState({
     name: false,
   });
@@ -41,16 +42,19 @@ export default function EditTaskProject() {
 
   async function getOneData() {
     try {
+      setLoading(true)
       const res = await funGetOneProjectById(param.id, 'data');
       if (res.success) {
         setName(res.data.title);
       } else {
         toast.error(res.message);
       }
-
+      setLoading(false);
     } catch (error) {
       console.error(error);
       toast.error("Gagal mendapatkan data Kegiatan, coba lagi nanti");
+    } finally {
+      setLoading(false);
     }
   }
 
@@ -63,6 +67,9 @@ export default function EditTaskProject() {
       <LayoutNavbarNew back="" title={"Edit Judul Kegiatan"} menu />
       <Box p={20}>
         <Stack pt={15}>
+          {loading ? 
+             <Skeleton height={40} mt={20} radius={10} />
+            :
           <TextInput
             styles={{
               input: {
@@ -86,6 +93,7 @@ export default function EditTaskProject() {
             }
             onBlur={() => setTouched({ ...touched, name: true })}
           />
+          }
         </Stack>
       </Box>
       <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
@@ -93,6 +101,9 @@ export default function EditTaskProject() {
         zIndex: 999,
         backgroundColor: `${WARNA.bgWhite}`,
       }}>
+        {loading ?
+           <Skeleton height={50} radius={30} />
+      :  
         <Button
           c={"white"}
           bg={WARNA.biruTua}
@@ -103,6 +114,7 @@ export default function EditTaskProject() {
         >
           Simpan
         </Button>
+      }
       </Box>
 
 

src/module/task/ui/add_detail_task.tsx

@@ -7,6 +7,7 @@ import {
    Flex,
    Group,
    Input,
+   rem,
    SimpleGrid,
    Stack,
    Text,
@@ -98,7 +99,7 @@ export default function AddDetailTask() {
                   </Group>
                </Box>
                <Box>
-                  <Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
+                  <Text >Tanggal Berakhir</Text>
                   <Group
                      justify="center"
                      bg={"white"}
@@ -109,7 +110,7 @@ export default function AddDetailTask() {
                   </Group>
                </Box>
             </SimpleGrid>
-            <Stack pt={15}>
+            <Stack pt={15} pb={100}>
                <TextInput
                   styles={{
                      input: {
@@ -125,13 +126,22 @@ export default function AddDetailTask() {
                   onChange={(e) => {
                      setTitle(e.target.value)
                      setTouched({ ...touched, title: false })
-                     }
+                  }
                   }
                   onBlur={() => setTouched({ ...touched, title: true })}
-                  error={touched.title ? "Tahapan wajib diisi" : undefined}
+                  error={
+                     touched.title && (
+                        title == "" ? "Tahapan 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}
@@ -143,8 +153,6 @@ export default function AddDetailTask() {
                   Simpan
                </Button>
             </Box>
-         </Box>
-
 
          <LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
             description="Apakah Anda yakin ingin menambahkan tugas?"

src/module/task/ui/create_date_end_task.tsx

@@ -79,7 +79,7 @@ export default function ViewDateEndTask({ onClose }: { onClose: (val: IFormDateT
             </Group>
           </Box>
           <Box>
-            <Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
+            <Text >Tanggal Berakhir</Text>
             <Group
               justify="center"
               bg={"white"}
@@ -90,7 +90,7 @@ export default function ViewDateEndTask({ onClose }: { onClose: (val: IFormDateT
             </Group>
           </Box>
         </SimpleGrid>
-        <Stack pt={15}>
+        <Stack pt={15} mb={100}>
           <TextInput
             styles={{
               input: {

src/module/task/ui/create_users_project.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 { useHookstate } from "@hookstate/core";
 import {
@@ -116,26 +116,11 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
         }
         <Box mt={15} mb={100}>
           {loading ?
-            Array(3)
+            Array(8)
               .fill(null)
               .map((_, i) => (
                 <Box key={i} mb={15}>
-                  <Group>
+                  <SkeletonSingle/>
-                    <Box>
-                      <ActionIcon
-                        variant="light"
-                        bg={"#DCEED8"}
-                        size={"lg"}
-                        radius={100}
-                        aria-label="icon"
-                      >
-                        <Skeleton height={30} width={30} />
-                      </ActionIcon>
-                    </Box>
-                    <Box>
-                      <Skeleton height={20} width={"80%"} />
-                    </Box>
-                  </Group>
                 </Box>
               ))
             :

src/module/task/ui/edit_detail_task.tsx

@@ -9,6 +9,7 @@ import {
    Input,
    rem,
    SimpleGrid,
+   Skeleton,
    Stack,
    Text,
    TextInput,
@@ -29,6 +30,7 @@ export default function EditDetailTask() {
    const [title, setTitle] = useState("")
    const param = useParams<{ id: string, detail: string }>()
    const [openModal, setOpenModal] = useState(false)
+   const [loading, setLoading] = useState(true)
 
    async function onSubmit() {
       if (value[0] == null || value[1] == null)
@@ -58,6 +60,7 @@ export default function EditDetailTask() {
 
    async function getOneData() {
       try {
+         setLoading(true)
          const res = await funGetDetailTask(param.detail);
          if (res.success) {
             setTitle(res.data.title)
@@ -68,10 +71,12 @@ export default function EditDetailTask() {
          } else {
             toast.error(res.message);
          }
-
+         setLoading(false)
       } catch (error) {
          console.error(error);
          toast.error("Gagal mendapatkan detail tugas divisi, coba lagi nanti");
+      } finally {
+         setLoading(false)
       }
    }
 
@@ -101,43 +106,59 @@ export default function EditDetailTask() {
             </Group>
             <SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
                <Box>
-                  <Text>Tanggal Mulai</Text>
+                  {loading ?
-                  <Group
+                     <Skeleton height={45} mt={20} radius={10} />
-                     justify="center"
+                     :
-                     bg={"white"}
+                     <>
-                     h={45}
+                        <Text>Tanggal Mulai</Text>
-                     style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
+                        <Group
-                  >
+                           justify="center"
-                     <Text>{value[0] ? `${moment(value[0]).format('DD-MM-YYYY')}` : ""}</Text>
+                           bg={"white"}
-                  </Group>
+                           h={45}
+                           style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
+                        >
+                           <Text>{value[0] ? `${moment(value[0]).format('DD-MM-YYYY')}` : ""}</Text>
+                        </Group>
+                     </>
+                  }
                </Box>
                <Box>
-                  <Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
+                  {loading ?
-                  <Group
+                     <Skeleton height={45} mt={20} radius={10} />
-                     justify="center"
+                     :
-                     bg={"white"}
+                     <>
-                     h={45}
+                        <Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
-                     style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
+                        <Group
-                  >
+                           justify="center"
-                     <Text>{value[1] ? `${moment(value[1]).format('DD-MM-YYYY')}` : ""}</Text>
+                           bg={"white"}
-                  </Group>
+                           h={45}
+                           style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
+                        >
+                           <Text>{value[1] ? `${moment(value[1]).format('DD-MM-YYYY')}` : ""}</Text>
+                        </Group>
+                     </>
+                  }
                </Box>
             </SimpleGrid>
-            <Stack pt={15}>
+            <Stack pt={15} pb={100}>
-               <TextInput
+               {loading ?
-                  styles={{
+                  <Skeleton height={40} mt={20} radius={10} />
-                     input: {
+                  :
-                        border: `1px solid ${"#D6D8F6"}`,
+                  <TextInput
-                        borderRadius: 10,
+                     styles={{
-                     },
+                        input: {
-                  }}
+                           border: `1px solid ${"#D6D8F6"}`,
-                  label={"Nama Tahapan"}
+                           borderRadius: 10,
-                  required
+                        },
-                  placeholder="Input Nama Tahapan"
+                     }}
-                  size="md"
+                     label={"Nama Tahapan"}
-                  value={title}
+                     required
-                  onChange={(e) => { setTitle(e.target.value) }}
+                     placeholder="Input Nama Tahapan"
-               />
+                     size="md"
+                     value={title}
+                     onChange={(e) => { setTitle(e.target.value) }}
+                  />
+               }
             </Stack>
          </Box>
          <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
@@ -145,16 +166,20 @@ export default function EditDetailTask() {
             zIndex: 999,
             backgroundColor: `${WARNA.bgWhite}`,
          }}>
-            <Button
+            {loading ?
-               c={"white"}
+               <Skeleton height={50} radius={30} />
-               bg={WARNA.biruTua}
+               :
-               size="lg"
+               <Button
-               radius={30}
+                  c={"white"}
-               fullWidth
+                  bg={WARNA.biruTua}
-               onClick={() => { setOpenModal(true) }}
+                  size="lg"
-            >
+                  radius={30}
-               Simpan
+                  fullWidth
-            </Button>
+                  onClick={() => { setOpenModal(true) }}
+               >
+                  Simpan
+               </Button>
+            }
          </Box>
 
          <LayoutModal opened={openModal} onClose={() => setOpenModal(false)}

src/module/task/ui/edit_task.tsx

@@ -5,6 +5,7 @@ import {
    Button,
    Input,
    rem,
+   Skeleton,
    Stack,
    Textarea,
    TextInput,
@@ -22,6 +23,7 @@ export default function EditTask() {
    const [title, setTitle] = useState("")
    const [openModal, setOpenModal] = useState(false)
    const param = useParams<{ id: string, detail: string }>()
+   const [loading, setLoading] = useState(true)
    const [touched, setTouched] = useState({
       title: false,
    });
@@ -50,16 +52,19 @@ export default function EditTask() {
 
    async function getOneData() {
       try {
+         setLoading(true)
          const res = await funGetTaskDivisionById(param.detail, 'data');
          if (res.success) {
             setTitle(res.data.title);
          } else {
             toast.error(res.message);
          }
-
+         setLoading(false);
       } catch (error) {
          console.error(error);
          toast.error("Gagal mendapatkan data tugas divisi, coba lagi nanti");
+      } finally {
+         setLoading(false);
       }
    }
 
@@ -74,36 +79,43 @@ export default function EditTask() {
          <LayoutNavbarNew back="" title={"Edit Judul Tugas"} menu />
          <Box p={20}>
             <Stack pt={15}>
-               <TextInput
+               {loading ?
-                  styles={{
+                  <Skeleton height={40} mt={20} radius={10} />
-                     input: {
+                  :
-                        border: `1px solid ${"#D6D8F6"}`,
+                  <TextInput
-                        borderRadius: 10,
+                     styles={{
-                     },
+                        input: {
-                  }}
+                           border: `1px solid ${"#D6D8F6"}`,
-                  required
+                           borderRadius: 10,
-                  placeholder="Tugas"
+                        },
-                  label="Judul Tugas"
+                     }}
-                  size="md"
+                     required
-                  value={title}
+                     placeholder="Tugas"
-                  onChange={(e) => {
+                     label="Judul Tugas"
-                     setTitle(e.target.value)
+                     size="md"
-                     setTouched({ ...touched, title: false })
+                     value={title}
-                  }}
+                     onChange={(e) => {
-                  error={
+                        setTitle(e.target.value)
-                     touched.title && (
+                        setTouched({ ...touched, title: false })
-                        title == "" ? "Error! harus memasukkan judul tugas" : null
+                     }}
-                     )
+                     error={
-                  }
+                        touched.title && (
-                  onBlur={() => setTouched({ ...touched, title: true })}
+                           title == "" ? "Error! harus memasukkan judul tugas" : null
-               />
+                        )
+                     }
+                     onBlur={() => setTouched({ ...touched, title: true })}
+                  />
+               }
             </Stack>
          </Box>
-            <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
+         <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
-               maxWidth: rem(550),
+            maxWidth: rem(550),
-               zIndex: 999,
+            zIndex: 999,
-               backgroundColor: `${WARNA.bgWhite}`,
+            backgroundColor: `${WARNA.bgWhite}`,
-            }}>
+         }}>
+            {loading ?
+               <Skeleton height={50} radius={30} />
+               :
                <Button
                   c={"white"}
                   bg={WARNA.biruTua}
@@ -114,7 +126,9 @@ export default function EditTask() {
                >
                   Simpan
                </Button>
-            </Box>
+            }
+
+         </Box>
 
 
          <LayoutModal opened={openModal} onClose={() => setOpenModal(false)}

src/module/user/member/ui/create_member.tsx

@@ -2,7 +2,7 @@
 import { WARNA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
 import { funGetAllGroup, IDataGroup } from "@/module/group";
-import { Box, Button, Select, Stack, Text, TextInput } from "@mantine/core";
+import { Box, Button, rem, Select, Stack, Text, TextInput } from "@mantine/core";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
@@ -129,7 +129,7 @@ export default function CreateMember() {
 
   return (
     <Box>
-      <Stack align="center" justify="center" gap="xs" pt={30} px={20}>
+      <Stack align="center" justify="center" gap="xs" pt={30} px={20} pb={100}>
         <Box
           bg={WARNA.biruTua}
           py={30}
@@ -406,7 +406,11 @@ export default function CreateMember() {
           }
         />
       </Stack>
-      <Box mt={30} mx={20} pb={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}

src/module/user/member/ui/edit_member.tsx

@@ -3,7 +3,7 @@ import { WARNA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
 import { funGetAllGroup, IDataGroup } from "@/module/group";
 import { funGetAllPosition } from "@/module/position/lib/api_position";
-import { Avatar, Box, Button, Indicator, Select, Stack, Text, TextInput } from "@mantine/core";
+import { Avatar, Box, Button, Indicator, rem, Select, Skeleton, Stack, Text, TextInput } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useRouter } from "next/navigation";
 import { useRef, useState } from "react";
@@ -25,6 +25,7 @@ export default function EditMember({ id }: { id: string }) {
    const [imgForm, setImgForm] = useState<any>()
    const openRef = useRef<() => void>(null)
    const [img, setIMG] = useState<any | null>()
+   const [loading, setLoading] = useState(true)
    const [touched, setTouched] = useState({
       nik: false,
       name: false,
@@ -63,12 +64,16 @@ export default function EditMember({ id }: { id: string }) {
 
    async function getOneData() {
       try {
+         setLoading(true)
          const res = await funGetOneMember(id)
          setData(res.data)
          getAllPosition(res.data?.idGroup)
          setIMG(`/api/file/img?cat=user&file=${res.data.img}`)
+         setLoading(false)
       } catch (error) {
          console.error(error)
+      } finally {
+         setLoading(false)
       }
    }
 
@@ -143,6 +148,7 @@ export default function EditMember({ id }: { id: string }) {
             gap="xs"
             pt={30}
             px={20}
+            pb={100}
          >
             <Dropzone
                openRef={openRef}
@@ -161,249 +167,276 @@ export default function EditMember({ id }: { id: string }) {
                }}
             >
             </Dropzone>
-            <Indicator offset={20} withBorder inline color={WARNA.borderBiruMuda} position="bottom-end" label={<FaCamera size={20} />} size={40} onClick={() => openRef.current?.()}>
+            {loading ?
-               <Avatar
+               <Skeleton height={150} width={150} radius={"100"} />
-                  size="150"
+               :
-                  radius={"100"}
+               <Indicator offset={20} withBorder inline color={WARNA.borderBiruMuda} position="bottom-end" label={<FaCamera size={20} />} size={40} onClick={() => openRef.current?.()}>
-                  src={img}
+                  <Avatar
-               />
+                     size="150"
-            </Indicator>
+                     radius={"100"}
-            <Select
+                     src={img}
-               placeholder="Pilih Grup" label="Grup" w={"100%"} size="md" required withAsterisk radius={30}
+                  />
-               styles={{
+               </Indicator>
-                  input: {
+            }
-                     color: WARNA.biruTua,
+            {loading ?
-                     borderRadius: WARNA.biruTua,
+               <>
-                     borderColor: WARNA.biruTua,
+                  <Skeleton height={40} mt={20} radius={30} />
-                  },
+                  <Skeleton height={40} mt={10} radius={30} />
-               }}
+                  <Skeleton height={40} mt={10} radius={30} />
-               data={
+                  <Skeleton height={40} mt={10} radius={30} />
-                  listGroup
+                  <Skeleton height={40} mt={10} radius={30} />
-                     ? listGroup.map((data) => ({
+                  <Skeleton height={40} mt={10} radius={30} />
-                        value: data.id,
+                  <Skeleton height={40} mt={10} radius={30} />
-                        label: data.name,
+               </>
-                     }))
+               :
-                     : []
+               <>
-               }
+
-               onChange={(val: any) => {
+                  <Select
-                  changeGrup(val)
+                     placeholder="Pilih Grup" label="Grup" w={"100%"} size="md" required withAsterisk radius={30}
-                  setTouched({ ...touched, idGroup: false })
+                     styles={{
-               }}
+                        input: {
-               value={data?.idGroup}
+                           color: WARNA.biruTua,
-               onBlur={() => setTouched({ ...touched, idGroup: true })}
+                           borderRadius: WARNA.biruTua,
-               error={
+                           borderColor: WARNA.biruTua,
-                  touched.idGroup && (
+                        },
-                     data.idGroup == "" ? "Grup Tidak Boleh Kosong" : null
+                     }}
-                  )
+                     data={
-               }
+                        listGroup
-            />
+                           ? listGroup.map((data) => ({
-            <Select
+                              value: data.id,
-               placeholder="Pilih Jabatan" label="Jabatan" w={"100%"} size="md" required withAsterisk radius={30}
+                              label: data.name,
-               styles={{
+                           }))
-                  input: {
+                           : []
-                     color: WARNA.biruTua,
-                     borderRadius: WARNA.biruTua,
-                     borderColor: WARNA.biruTua,
-                  },
-               }}
-               data={
-                  listPosition
-                     ? listPosition.map((data) => ({
-                        value: data.id,
-                        label: data.name,
-                     }))
-                     : []
-               }
-               onChange={(val: any) => {
-                  setData({ ...data, idPosition: val })
-                  setTouched({ ...touched, idPosition: false })
-               }}
-               value={(data?.idPosition == "") ? null : data.idPosition}
-               onBlur={() => setTouched({ ...touched, idPosition: true })}
-               error={
-                  touched.idPosition && (
-                     data.idPosition == "" ? "Jabatan Tidak Boleh Kosong" : null
-                  )
-               }
-            />
-            <Select
-               placeholder="Pilih Role" label="User Role" w={"100%"} size="md" required withAsterisk radius={30}
-               styles={{
-                  input: {
-                     color: WARNA.biruTua,
-                     borderRadius: WARNA.biruTua,
-                     borderColor: WARNA.biruTua,
-                  },
-               }}
-               data={
-                  listUserRole
-                     ? listUserRole.map((data) => ({
-                        value: data.id,
-                        label: data.name,
-                     }))
-                     : []
-               }
-               onChange={(val: any) => {
-                  setData({ ...data, idUserRole: val })
-                  setTouched({ ...touched, idUserRole: false })
-               }}
-               value={data?.idUserRole}
-               onBlur={() => setTouched({ ...touched, idUserRole: true })}
-               error={
-                  touched.idUserRole && (
-                     data.idUserRole == "" ? "Role Tidak Boleh Kosong" : null
-                  )
-               }
-            />
-            <TextInput
-               size="md" type="number" radius={30} placeholder="NIK" withAsterisk label="NIK" w={"100%"}
-               styles={{
-                  input: {
-                     color: WARNA.biruTua,
-                     borderRadius: WARNA.biruTua,
-                     borderColor: WARNA.biruTua,
-                  },
-               }}
-               onChange={(e) => {
-                  setData({ ...data, nik: e.target.value })
-                  setTouched({ ...touched, nik: false })
-               }}
-               value={data.nik}
-               onBlur={() => setTouched({ ...touched, nik: true })}
-               error={
-                  touched.nik && (
-                     data.nik === "" ? "NIK Tidak Boleh Kosong" :
-                        data.nik.length !== 16 ? "NIK Harus 16 Karakter" : null
-                  )
-               }
-            />
-            <TextInput
-               size="md" type="text" radius={30} placeholder="Nama" withAsterisk label="Nama" w={"100%"}
-               styles={{
-                  input: {
-                     color: WARNA.biruTua,
-                     borderRadius: WARNA.biruTua,
-                     borderColor: WARNA.biruTua,
-                  },
-               }}
-               onChange={(e) => {
-                  setData({ ...data, name: e.target.value })
-                  setTouched({ ...touched, name: false })
-               }}
-               value={data.name}
-               onBlur={() => setTouched({ ...touched, name: true })}
-               error={
-                  touched.name && (
-                     data.name == "" ? "Nama Tidak Boleh Kosong" : null
-                  )
-               }
-            />
-            <TextInput
-               size="md" type="email" radius={30} placeholder="Email" withAsterisk label="Email" w={"100%"}
-               styles={{
-                  input: {
-                     color: WARNA.biruTua,
-                     borderRadius: WARNA.biruTua,
-                     borderColor: WARNA.biruTua,
-                  },
-               }}
-               onChange={(e) => {
-                  setData({ ...data, email: e.target.value })
-                  setTouched({ ...touched, email: false })
-               }}
-               value={data.email}
-               onBlur={() => setTouched({ ...touched, email: true })}
-               error={
-                  touched.email && (
-                     data.email == "" ? "Email Tidak Boleh Kosong" :
-                        !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(data.email) ? "Email tidak valid" : null
-                  )
-               }
-            />
-            <TextInput
-               size="md" type="number" radius={30} withAsterisk label="Nomor Telepon" w={"100%"}
-               styles={{
-                  input: {
-                     color: WARNA.biruTua,
-                     borderRadius: WARNA.biruTua,
-                     borderColor: WARNA.biruTua,
-                  },
-               }}
-               placeholder="8xxx xxxx xxxx"
-               leftSection={<Text>+62</Text>}
-               onChange={(e) => {
-                  setData({ ...data, phone: e.target.value })
-                  setTouched({ ...touched, phone: false })
-               }}
-               value={data.phone}
-               onBlur={() => setTouched({ ...touched, phone: true })}
-               error={
-                  touched.phone && (
-                     data.phone == "" ? "Nomor Telepon Tidak Boleh Kosong" :
-                        data.phone.length < 10 ? "Nomor Telepon harus 10 digit" : null
-                  )
-               }
-            />
-            <Select
-               placeholder="Jenis Kelamin" label="Jenis Kelamin" w={"100%"} size="md" required withAsterisk radius={30}
-               styles={{
-                  input: {
-                     color: WARNA.biruTua,
-                     borderRadius: WARNA.biruTua,
-                     borderColor: WARNA.biruTua,
-                  },
-               }}
-               data={
-                  [
-                     {
-                        value: "M",
-                        label: "Laki-laki"
-                     },
-                     {
-                        value: "F",
-                        label: "Perempuan"
                      }
-                  ]
+                     onChange={(val: any) => {
-               }
+                        changeGrup(val)
-               onChange={(val: any) => {
+                        setTouched({ ...touched, idGroup: false })
-                  setData({ ...data, gender: val })
+                     }}
-                  setTouched({ ...touched, gender: false })
+                     value={data?.idGroup}
-               }}
+                     onBlur={() => setTouched({ ...touched, idGroup: true })}
-               value={data.gender}
+                     error={
-               onBlur={() => setTouched({ ...touched, gender: true })}
+                        touched.idGroup && (
-               error={
+                           data.idGroup == "" ? "Grup Tidak Boleh Kosong" : null
-                  touched.gender && (
+                        )
-                     data.gender == "" ? "Gender Tidak Boleh Kosong" : null
+                     }
-                  )
+                  />
-               }
+                  <Select
-            />
+                     placeholder="Pilih Jabatan" label="Jabatan" w={"100%"} size="md" required withAsterisk radius={30}
+                     styles={{
+                        input: {
+                           color: WARNA.biruTua,
+                           borderRadius: WARNA.biruTua,
+                           borderColor: WARNA.biruTua,
+                        },
+                     }}
+                     data={
+                        listPosition
+                           ? listPosition.map((data) => ({
+                              value: data.id,
+                              label: data.name,
+                           }))
+                           : []
+                     }
+                     onChange={(val: any) => {
+                        setData({ ...data, idPosition: val })
+                        setTouched({ ...touched, idPosition: false })
+                     }}
+                     value={(data?.idPosition == "") ? null : data.idPosition}
+                     onBlur={() => setTouched({ ...touched, idPosition: true })}
+                     error={
+                        touched.idPosition && (
+                           data.idPosition == "" ? "Jabatan Tidak Boleh Kosong" : null
+                        )
+                     }
+                  />
+                  <Select
+                     placeholder="Pilih Role" label="User Role" w={"100%"} size="md" required withAsterisk radius={30}
+                     styles={{
+                        input: {
+                           color: WARNA.biruTua,
+                           borderRadius: WARNA.biruTua,
+                           borderColor: WARNA.biruTua,
+                        },
+                     }}
+                     data={
+                        listUserRole
+                           ? listUserRole.map((data) => ({
+                              value: data.id,
+                              label: data.name,
+                           }))
+                           : []
+                     }
+                     onChange={(val: any) => {
+                        setData({ ...data, idUserRole: val })
+                        setTouched({ ...touched, idUserRole: false })
+                     }}
+                     value={data?.idUserRole}
+                     onBlur={() => setTouched({ ...touched, idUserRole: true })}
+                     error={
+                        touched.idUserRole && (
+                           data.idUserRole == "" ? "Role Tidak Boleh Kosong" : null
+                        )
+                     }
+                  />
+                  <TextInput
+                     size="md" type="number" radius={30} placeholder="NIK" withAsterisk label="NIK" w={"100%"}
+                     styles={{
+                        input: {
+                           color: WARNA.biruTua,
+                           borderRadius: WARNA.biruTua,
+                           borderColor: WARNA.biruTua,
+                        },
+                     }}
+                     onChange={(e) => {
+                        setData({ ...data, nik: e.target.value })
+                        setTouched({ ...touched, nik: false })
+                     }}
+                     value={data.nik}
+                     onBlur={() => setTouched({ ...touched, nik: true })}
+                     error={
+                        touched.nik && (
+                           data.nik === "" ? "NIK Tidak Boleh Kosong" :
+                              data.nik.length !== 16 ? "NIK Harus 16 Karakter" : null
+                        )
+                     }
+                  />
+                  <TextInput
+                     size="md" type="text" radius={30} placeholder="Nama" withAsterisk label="Nama" w={"100%"}
+                     styles={{
+                        input: {
+                           color: WARNA.biruTua,
+                           borderRadius: WARNA.biruTua,
+                           borderColor: WARNA.biruTua,
+                        },
+                     }}
+                     onChange={(e) => {
+                        setData({ ...data, name: e.target.value })
+                        setTouched({ ...touched, name: false })
+                     }}
+                     value={data.name}
+                     onBlur={() => setTouched({ ...touched, name: true })}
+                     error={
+                        touched.name && (
+                           data.name == "" ? "Nama Tidak Boleh Kosong" : null
+                        )
+                     }
+                  />
+                  <TextInput
+                     size="md" type="email" radius={30} placeholder="Email" withAsterisk label="Email" w={"100%"}
+                     styles={{
+                        input: {
+                           color: WARNA.biruTua,
+                           borderRadius: WARNA.biruTua,
+                           borderColor: WARNA.biruTua,
+                        },
+                     }}
+                     onChange={(e) => {
+                        setData({ ...data, email: e.target.value })
+                        setTouched({ ...touched, email: false })
+                     }}
+                     value={data.email}
+                     onBlur={() => setTouched({ ...touched, email: true })}
+                     error={
+                        touched.email && (
+                           data.email == "" ? "Email Tidak Boleh Kosong" :
+                              !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(data.email) ? "Email tidak valid" : null
+                        )
+                     }
+                  />
+                  <TextInput
+                     size="md" type="number" radius={30} withAsterisk label="Nomor Telepon" w={"100%"}
+                     styles={{
+                        input: {
+                           color: WARNA.biruTua,
+                           borderRadius: WARNA.biruTua,
+                           borderColor: WARNA.biruTua,
+                        },
+                     }}
+                     placeholder="8xxx xxxx xxxx"
+                     leftSection={<Text>+62</Text>}
+                     onChange={(e) => {
+                        setData({ ...data, phone: e.target.value })
+                        setTouched({ ...touched, phone: false })
+                     }}
+                     value={data.phone}
+                     onBlur={() => setTouched({ ...touched, phone: true })}
+                     error={
+                        touched.phone && (
+                           data.phone == "" ? "Nomor Telepon Tidak Boleh Kosong" :
+                              data.phone.length < 10 ? "Nomor Telepon harus 10 digit" : null
+                        )
+                     }
+                  />
+                  <Select
+                     placeholder="Jenis Kelamin" label="Jenis Kelamin" w={"100%"} size="md" required withAsterisk radius={30}
+                     styles={{
+                        input: {
+                           color: WARNA.biruTua,
+                           borderRadius: WARNA.biruTua,
+                           borderColor: WARNA.biruTua,
+                        },
+                     }}
+                     data={
+                        [
+                           {
+                              value: "M",
+                              label: "Laki-laki"
+                           },
+                           {
+                              value: "F",
+                              label: "Perempuan"
+                           }
+                        ]
+                     }
+                     onChange={(val: any) => {
+                        setData({ ...data, gender: val })
+                        setTouched({ ...touched, gender: false })
+                     }}
+                     value={data.gender}
+                     onBlur={() => setTouched({ ...touched, gender: true })}
+                     error={
+                        touched.gender && (
+                           data.gender == "" ? "Gender Tidak Boleh Kosong" : null
+                        )
+                     }
+                  />
+               </>
+            }
          </Stack>
-         <Box mt={30} mx={20} pb={20}>
+         <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
-            <Button
+            maxWidth: rem(550),
-               c={"white"}
+            zIndex: 999,
-               bg={WARNA.biruTua}
+            backgroundColor: `${WARNA.bgWhite}`,
-               size="md"
+         }}>
-               radius={30}
+            {loading ?
-               fullWidth
+               <Skeleton height={50} radius={30} />
-               onClick={() => {
+               :
-                  if (
+               <Button
-                     data.nik !== "" &&
+                  c={"white"}
-                     data.name !== "" &&
+                  bg={WARNA.biruTua}
-                     data.email !== "" &&
+                  size="md"
-                     data.phone !== "" &&
+                  radius={30}
-                     data.gender !== "" &&
+                  fullWidth
-                     data.idGroup !== "" &&
+                  onClick={() => {
-                     data.idPosition !== "" &&
+                     if (
-                     data.idUserRole !== ""
+                        data.nik !== "" &&
-                  ) {
+                        data.name !== "" &&
-                     setModal(true);
+                        data.email !== "" &&
-                  } else {
+                        data.phone !== "" &&
-                     toast.error("Mohon lengkapi semua form");
+                        data.gender !== "" &&
-                  }
+                        data.idGroup !== "" &&
-               }}
+                        data.idPosition !== "" &&
-            >
+                        data.idUserRole !== ""
-               Simpan
+                     ) {
-            </Button>
+                        setModal(true);
+                     } else {
+                        toast.error("Mohon lengkapi semua form");
+                     }
+                  }}
+               >
+                  Simpan
+               </Button>
+            }
          </Box>
          <LayoutModal opened={isModal} onClose={() => setModal(false)}
             description="Apakah Anda yakin ingin mengubah data?"

src/module/user/profile/ui/edit_profile.tsx

@@ -1,6 +1,6 @@
 "use client"
 import { LayoutNavbarNew, WARNA } from "@/module/_global";
-import { Avatar, Box, Button, Flex, Indicator, Modal, Select, Stack, Text, TextInput } from "@mantine/core";
+import { Avatar, Box, Button, Flex, Indicator, Modal, rem, Select, Skeleton, Stack, Text, TextInput } from "@mantine/core";
 import toast from "react-hot-toast";
 import LayoutModal from "@/module/_global/layout/layout_modal";
 import { useRef, useState } from "react";
@@ -19,6 +19,7 @@ export default function EditProfile() {
   const [img, setIMG] = useState<any | null>()
   const [imgForm, setImgForm] = useState<any>()
   const router = useRouter()
+  const [loading, setLoading] = useState(true)
 
   const [touched, setTouched] = useState({
     nik: false,
@@ -41,11 +42,15 @@ export default function EditProfile() {
 
   async function getAllProfile() {
     try {
+      setLoading(true)
       const res = await funGetProfileByCookies()
       setData(res.data)
       setIMG(`/api/file/img?cat=user&file=${res.data.img}`)
+      setLoading(false)
     } catch (error) {
       console.error(error);
+    } finally {
+      setLoading(false)
     }
   }
 
@@ -104,135 +109,158 @@ export default function EditProfile() {
         >
         </Dropzone>
 
-        <Indicator offset={20} withBorder inline color={WARNA.borderBiruMuda} position="bottom-end" label={<FaCamera size={20} />} size={40} onClick={() => openRef.current?.()}>
+        {loading ?
-          <Avatar
+          <Skeleton height={150} width={150} radius={"100"} />
-            size="150"
+          :
-            radius={"100"}
+          <Indicator offset={20} withBorder inline color={WARNA.borderBiruMuda} position="bottom-end" label={<FaCamera size={20} />} size={40} onClick={() => openRef.current?.()}>
-            src={img}
+            <Avatar
-          />
+              size="150"
-        </Indicator>
+              radius={"100"}
-        <TextInput
+              src={img}
-          size="md" type="number" radius={30} placeholder="NIK" withAsterisk label="NIK" w={"100%"}
+            />
-          styles={{
+          </Indicator>
-            input: {
+        }
-              color: WARNA.biruTua,
+        {loading ?
-              borderRadius: WARNA.biruTua,
+          <>
-              borderColor: WARNA.biruTua,
+            <Skeleton height={40} mt={20} radius={30} />
-            },
+            <Skeleton height={40} mt={20} radius={30} />
-          }}
+            <Skeleton height={40} mt={20} radius={30} />
-          onChange={(e) => {
+            <Skeleton height={40} mt={20} radius={30} />
-            setData({ ...data, nik: e.target.value })
+            <Skeleton height={40} mt={20} radius={30} />
-            setTouched({ ...touched, nik: false })
+          </>
-          }}
+          :
-          value={data.nik}
+          <>
-          onBlur={() => setTouched({ ...touched, nik: true })}
+            <TextInput
-          error={
+              size="md" type="number" radius={30} placeholder="NIK" withAsterisk label="NIK" w={"100%"}
-            touched.nik && (
+              styles={{
-              data.nik === "" ? "NIK Tidak Boleh Kosong" :
+                input: {
-                data.nik.length !== 16 ? "NIK Harus 16 Karakter" : null
+                  color: WARNA.biruTua,
-            )
+                  borderRadius: WARNA.biruTua,
-          }
+                  borderColor: WARNA.biruTua,
-        />
+                },
-        <TextInput
+              }}
-          size="md" type="text" radius={30} placeholder="Nama" withAsterisk label="Nama" w={"100%"}
+              onChange={(e) => {
-          styles={{
+                setData({ ...data, nik: e.target.value })
-            input: {
+                setTouched({ ...touched, nik: false })
-              color: WARNA.biruTua,
+              }}
-              borderRadius: WARNA.biruTua,
+              value={data.nik}
-              borderColor: WARNA.biruTua,
+              onBlur={() => setTouched({ ...touched, nik: true })}
-            },
+              error={
-          }}
+                touched.nik && (
-          onChange={(e) => {
+                  data.nik === "" ? "NIK Tidak Boleh Kosong" :
-            setData({ ...data, name: e.target.value })
+                    data.nik.length !== 16 ? "NIK Harus 16 Karakter" : null
-            setTouched({ ...touched, name: false })
+                )
-          }}
-          value={data.name}
-          onBlur={() => setTouched({ ...touched, name: true })}
-          error={
-            touched.name && (
-              data.name == "" ? "Nama Tidak Boleh Kosong" : null
-            )
-          }
-        />
-        <TextInput
-          size="md" type="email" radius={30} placeholder="Email" withAsterisk label="Email" w={"100%"}
-          styles={{
-            input: {
-              color: WARNA.biruTua,
-              borderRadius: WARNA.biruTua,
-              borderColor: WARNA.biruTua,
-            },
-          }}
-          onChange={(e) => {
-            setData({ ...data, email: e.target.value })
-            setTouched({ ...touched, email: false })
-          }}
-          value={data.email}
-          onBlur={() => setTouched({ ...touched, email: true })}
-          error={
-            touched.email && (
-              data.email == "" ? "Email Tidak Boleh Kosong" :
-                !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(data.email) ? "Email tidak valid" : null
-            )
-          }
-        />
-        <TextInput
-          size="md" type="number" radius={30} placeholder="8xx xxxx xxxx" withAsterisk label="Nomor Telepon" w={"100%"}
-          styles={{
-            input: {
-              color: WARNA.biruTua,
-              borderRadius: WARNA.biruTua,
-              borderColor: WARNA.biruTua,
-            },
-          }}
-          leftSection={<Text>+62</Text>}
-          onChange={(e) => {
-            setData({ ...data, phone: e.target.value })
-            setTouched({ ...touched, phone: false })
-          }}
-          value={data.phone}
-          onBlur={() => setTouched({ ...touched, phone: true })}
-          error={
-            touched.phone && (
-              data.phone == "" ? "Nomor Telepon Tidak Boleh Kosong" : null
-            )
-          }
-        />
-        <Select
-          placeholder="Jenis Kelamin" label="Jenis Kelamin" w={"100%"} size="md" required withAsterisk radius={30}
-          styles={{
-            input: {
-              color: WARNA.biruTua,
-              borderRadius: WARNA.biruTua,
-              borderColor: WARNA.biruTua,
-            },
-          }}
-          data={
-            [
-              {
-                value: "M",
-                label: "Laki-laki"
-              },
-              {
-                value: "F",
-                label: "Perempuan"
               }
-            ]
+            />
-          }
+            <TextInput
-          onChange={(val: any) => {
+              size="md" type="text" radius={30} placeholder="Nama" withAsterisk label="Nama" w={"100%"}
-            setData({ ...data, gender: val })
+              styles={{
-            setTouched({ ...touched, gender: false })
+                input: {
-          }}
+                  color: WARNA.biruTua,
-          value={data.gender}
+                  borderRadius: WARNA.biruTua,
-          onBlur={() => setTouched({ ...touched, gender: true })}
+                  borderColor: WARNA.biruTua,
-          error={
+                },
-            touched.gender && (
+              }}
-              data.gender == "" ? "Jenis Kelamin Tidak Boleh Kosong" : null
+              onChange={(e) => {
-            )
+                setData({ ...data, name: e.target.value })
-          }
+                setTouched({ ...touched, name: false })
-        />
+              }}
+              value={data.name}
+              onBlur={() => setTouched({ ...touched, name: true })}
+              error={
+                touched.name && (
+                  data.name == "" ? "Nama Tidak Boleh Kosong" : null
+                )
+              }
+            />
+            <TextInput
+              size="md" type="email" radius={30} placeholder="Email" withAsterisk label="Email" w={"100%"}
+              styles={{
+                input: {
+                  color: WARNA.biruTua,
+                  borderRadius: WARNA.biruTua,
+                  borderColor: WARNA.biruTua,
+                },
+              }}
+              onChange={(e) => {
+                setData({ ...data, email: e.target.value })
+                setTouched({ ...touched, email: false })
+              }}
+              value={data.email}
+              onBlur={() => setTouched({ ...touched, email: true })}
+              error={
+                touched.email && (
+                  data.email == "" ? "Email Tidak Boleh Kosong" :
+                    !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(data.email) ? "Email tidak valid" : null
+                )
+              }
+            />
+            <TextInput
+              size="md" type="number" radius={30} placeholder="8xx xxxx xxxx" withAsterisk label="Nomor Telepon" w={"100%"}
+              styles={{
+                input: {
+                  color: WARNA.biruTua,
+                  borderRadius: WARNA.biruTua,
+                  borderColor: WARNA.biruTua,
+                },
+              }}
+              leftSection={<Text>+62</Text>}
+              onChange={(e) => {
+                setData({ ...data, phone: e.target.value })
+                setTouched({ ...touched, phone: false })
+              }}
+              value={data.phone}
+              onBlur={() => setTouched({ ...touched, phone: true })}
+              error={
+                touched.phone && (
+                  data.phone == "" ? "Nomor Telepon Tidak Boleh Kosong" : null
+                )
+              }
+            />
+            <Select
+              placeholder="Jenis Kelamin" label="Jenis Kelamin" w={"100%"} size="md" required withAsterisk radius={30}
+              styles={{
+                input: {
+                  color: WARNA.biruTua,
+                  borderRadius: WARNA.biruTua,
+                  borderColor: WARNA.biruTua,
+                },
+              }}
+              data={
+                [
+                  {
+                    value: "M",
+                    label: "Laki-laki"
+                  },
+                  {
+                    value: "F",
+                    label: "Perempuan"
+                  }
+                ]
+              }
+              onChange={(val: any) => {
+                setData({ ...data, gender: val })
+                setTouched({ ...touched, gender: false })
+              }}
+              value={data.gender}
+              onBlur={() => setTouched({ ...touched, gender: true })}
+              error={
+                touched.gender && (
+                  data.gender == "" ? "Jenis Kelamin Tidak Boleh Kosong" : null
+                )
+              }
+            />
+          </>
+        }
       </Stack>
-      <Box mt={30} mx={20} pb={20}>
+      <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
+        maxWidth: rem(550),
+        zIndex: 999,
+        backgroundColor: `${WARNA.bgWhite}`,
+      }}>
+        {loading ? 
+           <Skeleton height={50} radius={30} />
+          :
         <Button
           c={"white"}
           bg={WARNA.biruTua}
@@ -255,6 +283,7 @@ export default function EditProfile() {
         >
           Simpan
         </Button>
+        }
       </Box>
       <LayoutModal opened={isValModal} onClose={() => setValModal(false)}
         description="Apakah Anda yakin ingin