Merge pull request #250 from bipproduction/lukman/23-september-2024

style : update style

src/module/color_palette/ui/drawer_create_palette.tsx

@@ -11,7 +11,7 @@ export default function DrawerCreatePalette() {
   return (
     <Box>
       <SimpleGrid
-        cols={{ base: 2, sm: 3, lg: 3 }}
+        cols={{ base: 3, sm: 3, lg: 3 }}
       >
         <Flex justify={'center'} align={'center'} direction={'column'}
         onClick={() => router.push('/color-palette/create')}

src/module/color_palette/ui/drawer_palet_edit_end_default.tsx

@@ -10,7 +10,7 @@ import { IoColorPalette } from 'react-icons/io5';
 import { funChangeTheme, funDeleteTheme, funGetThemeById } from '../lib/api_theme';
 import { globalRefreshTheme } from '../lib/val_theme';
 
-export default function DrawerPaletEditEndDefault({ id, idVillage }: { id: string, idVillage: string }) {
+export default function DrawerPaletEditEndDefault({ id, idVillage, isUse }: { id: string, idVillage: string, isUse: boolean }) {
   const router = useRouter()
   const [isModal, setModal] = useState(false)
   const [isModalDel, setModalDel] = useState(false)
@@ -71,13 +71,14 @@ export default function DrawerPaletEditEndDefault({ id, idVillage }: { id: strin
                 <Text ta={'center'} c={tema.get().utama}>Edit</Text>
               </Box>
             </Flex>
-
-            <Flex justify={'center'} align={'center'} direction={'column'} onClick={() => { setModalDel(true) }} >
+            <Flex justify={'center'} align={'center'} direction={'column'} onClick={() => {
+              isUse !== true ? setModalDel(true) : undefined
+            }}>
               <Box>
-                <FaTrash size={30} color={tema.get().utama} />
+                <FaTrash size={30} color={isUse !== true ? tema.get().utama : "gray"} />
               </Box>
               <Box>
-                <Text ta={'center'} c={tema.get().utama}>Hapus</Text>
+                <Text ta={'center'} c={isUse !== true ? tema.get().utama : "gray"}>Hapus</Text>
               </Box>
             </Flex>
           </>

src/module/color_palette/ui/list_color_palette.tsx

@@ -25,6 +25,7 @@ export default function ListColorPalette() {
   const [isChooseVillage, setChooseVillage] = useState('')
   const refresh = useHookstate(globalRefreshTheme)
   const [loading, setLoading] = useState(true)
+  const [dataIsUse, setIsUse] = useState(false)
 
   async function loadData() {
     try {
@@ -80,6 +81,7 @@ export default function ListColorPalette() {
                   setChooseName(v.name)
                   setChooseVillage(v.idVillage)
                   setOpenTambahan(true)
+                  setIsUse(v.isUse)
                 }}
               >
                 <Group justify='space-between' align='center'>
@@ -124,7 +126,7 @@ export default function ListColorPalette() {
       </LayoutDrawer>
 
       <LayoutDrawer opened={isOpenTambahan} title={isChooseName} onClose={() => setOpenTambahan(false)}>
-        <DrawerPaletEditEndDefault id={isChooseId} idVillage={isChooseVillage} />
+        <DrawerPaletEditEndDefault id={isChooseId} idVillage={isChooseVillage} isUse={dataIsUse} />
       </LayoutDrawer>
     </Box>
   );

src/module/group/ui/drawer_group.tsx

@@ -47,7 +47,7 @@ export default function DrawerGroup({ onSuccess, }: { onSuccess: (val: boolean)
     <Box>
       <Stack pt={10}>
         <SimpleGrid
-          cols={{ base: 2, sm: 3, lg: 3 }}
+          cols={{ base: 3, sm: 3, lg: 3 }}
           onClick={() => setOpenDrawerGroup(true)}
         >
           <Flex justify={"center"} align={"center"} direction={"column"}>

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>

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

@@ -117,7 +117,7 @@ export default function NavbarDetailMember({ id }: IMember) {
                      <Grid.Col span={5}>
                         <Group>
                            <FaSquarePhone size={25} />
-                           <Text fz={15}>No Telpon</Text>
+                           <Text fz={15}>No Telepon</Text>
                         </Group>
                      </Grid.Col>
                      <Grid.Col span={7}>

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

@@ -1,5 +1,5 @@
 import { currentScroll, globalRole, SkeletonSingle, TEMA } from "@/module/_global"
-import { Box, Text, TextInput, Divider, Avatar, Grid } from "@mantine/core"
+import { Box, Text, TextInput, Divider, Avatar, Grid, Group, ActionIcon, Skeleton } from "@mantine/core"
 import { useShallowEffect } from "@mantine/hooks"
 import { useRouter, useSearchParams } from "next/navigation"
 import { useEffect, useState } from "react"
@@ -96,19 +96,42 @@ export default function TabListMember() {
                leftSection={<HiMagnifyingGlass size={20} />}
                placeholder="Pencarian"
                onChange={(e) => setSearchQuery(e.target.value)}
-               my={10}
+               my={20}
             />
+            {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={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>
-                  {roleLogin.get() == 'supadmin' && <Text>Filter by: {nameGroup}</Text>}
                   {dataMember.length == 0 ?
                      <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '60vh' }}>
                         <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text>
@@ -116,7 +139,7 @@ export default function TabListMember() {
                      :
                      dataMember.map((v, i) => {
                         return (
-                           <Box key={i} pt={20}>
+                           <Box key={i}>
                               <Box onClick={() => {
                                  router.push(`/member/${v.id}`)
                               }}>