style : update style

src/module/position/ui/drawer_list_position.tsx

@@ -78,9 +78,8 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
          <Stack pt={10}>
             <SimpleGrid
                cols={{ base: 2, sm: 3, lg: 3 }}
-               onClick={() => setOpenDrawerGroup(true)}
             >
-               <Flex justify={'center'} align={'center'} direction={'column'} >
+               <Flex justify={'center'} align={'center'} direction={'column'} onClick={() => setOpenDrawerGroup(true)}>
                   <Box>
                      <IoAddCircle size={30} color={tema.get().utama} />
                   </Box>
@@ -102,7 +101,13 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
             </SimpleGrid>
          </Stack>
          <LayoutDrawer opened={openDrawerGroup} onClose={() => setOpenDrawerGroup(false)} title={'Tambah Jabatan'} size="lg">
-            <Box pt={10} pos={"relative"} h={"70vh"}>
+            <Box pt={10} pos={"relative"} h={{
+               base: "69vh",
+               sm: "69vh",
+               lg: "69vh",
+               xl: "70vh"
+               
+            }}>
                {
                   roleLogin.get() == "supadmin" &&
                   <Select

src/module/position/ui/list_position_active.tsx

@@ -1,5 +1,5 @@
 import { globalRole, LayoutDrawer, SkeletonSingle, TEMA, WARNA } from "@/module/_global";
-import { ActionIcon, Box, Flex, Grid, Group, Text, TextInput } from "@mantine/core";
+import { ActionIcon, Box, Flex, Grid, Group, Skeleton, Text, TextInput } from "@mantine/core";
 import React, { useState } from "react";
 import { FaUserTie } from "react-icons/fa6";
 import { HiMagnifyingGlass } from "react-icons/hi2";
@@ -66,13 +66,36 @@ export default function ListPositionActive() {
         placeholder="Pencarian"
         onChange={(e) => setSearchQuery(e.target.value)}
       />
+      {roleLogin.get() == 'supadmin' && <Text mt={10}>Filter by: {nameGroup}</Text>}
       {loading ? Array(6).fill(null).map((_, i) => (
-        <Box key={i}>
-          <SkeletonSingle />
+        <Box key={i} mb={roleLogin.get() == 'supadmin' ? "20" : "0"} mt={roleLogin.get() == 'supadmin' ? "0" : "20"}>
+          <Group
+            align="center"
+            style={{
+              border: `1px solid ${tema.get().bgTotalKegiatan}`,
+              padding: 10,
+              borderRadius: 10,
+              cursor: "pointer",
+            }}
+          >
+            <Box>
+              <ActionIcon
+                variant="light"
+                bg={tema.get().bgTotalKegiatan}
+                size={50}
+                radius={100}
+                aria-label="icon"
+              >
+                <Skeleton height={25} width={25} />
+              </ActionIcon>
+            </Box>
+            <Box>
+              <Skeleton height={20} width={100} />
+            </Box>
+          </Group>
         </Box>
       )) :
-        <Box pt={20}>
-          {roleLogin.get() == 'supadmin' && <Text>Filter by: {nameGroup}</Text>}
+        <Box pt={roleLogin.get() == 'supadmin' ? "0" : "20"}>
           {isDataPosition.length == 0 ?
             <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '60vh' }}>
               <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada jabatan</Text>