style: update style

src/module/_global/layout/layout_modal_view_file.tsx

@@ -1,13 +1,11 @@
 'use client'
 import { Box, Button, Flex, Image, Modal, rem } from '@mantine/core';
 import dynamic from 'next/dynamic';
-import React, { useState } from 'react';
+import { useState } from 'react';
 const PdfToImage = dynamic(() => import('./../components/pdf_viewer').then((mod) => mod.default), { ssr: false });
 
 export default function LayoutModal({ opened, onClose, extension, fitur, file }: { opened: boolean, onClose: () => void, extension: string, fitur: string, file: string }) {
-   const [isValModal, setValModal] = useState(opened)
    const [zoom, setZoom] = useState(1)
-   const filePdf = '/file/' + fitur + '/' + file
 
    const handleZoomIn = () => {
       setZoom(zoom + 0.1)

src/module/division_new/ui/create_anggota_division.tsx

@@ -1,20 +1,20 @@
 "use client"
-import { LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA } from '@/module/_global';
+import { LayoutNavbarNew, SkeletonList, TEMA } from '@/module/_global';
 import LayoutModal from '@/module/_global/layout/layout_modal';
 import { funGetUserByCookies } from '@/module/auth';
 import { funGetAllmember, TypeUser } from '@/module/user';
-import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Stack, Text, TextInput } from '@mantine/core';
+import { useHookstate } from '@hookstate/core';
+import { Carousel } from '@mantine/carousel';
+import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Indicator, rem, Stack, Text, TextInput } from '@mantine/core';
+import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
 import { useParams, useRouter } from 'next/navigation';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import toast from 'react-hot-toast';
 import { FaCheck } from 'react-icons/fa6';
 import { HiMagnifyingGlass } from 'react-icons/hi2';
-import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
-import { IDataMemberDivision } from '../lib/type_division';
-import { funAddDivisionMember, funGetDivisionById } from '../lib/api_division';
 import { IoArrowBackOutline, IoClose } from 'react-icons/io5';
-import { Carousel } from '@mantine/carousel';
+import { funAddDivisionMember, funGetDivisionById } from '../lib/api_division';
-import { useHookstate } from '@hookstate/core';
+import { IDataMemberDivision } from '../lib/type_division';
 
 
 export default function CreateAnggotaDivision() {

src/module/document/ui/drawer_share_document.tsx

@@ -3,30 +3,27 @@ import {
   funGetListDivisionByIdDivision,
   IDataDivison,
 } from "@/module/division_new";
-import { IDataMemberTaskDivision } from "@/module/task/lib/type_task";
+import { useHookstate } from "@hookstate/core";
 import {
+  ActionIcon,
   Box,
-  Select,
   Button,
-  Avatar,
   Divider,
   Flex,
+  Grid,
   Group,
-  Stack,
-  Text,
-  ActionIcon,
   ScrollArea,
   Skeleton,
-  Grid,
+  Stack,
+  Text
 } from "@mantine/core";
 import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
 import { useParams } from "next/navigation";
 import { useState } from "react";
 import toast from "react-hot-toast";
 import { FaCheck, FaUsers } from "react-icons/fa6";
-import { IShareDivision } from "../lib/type_document";
 import { funShareDocument } from "../lib/api_document";
-import { useHookstate } from "@hookstate/core";
+import { IShareDivision } from "../lib/type_document";
 import { globalRefreshDocument } from "../lib/val_document";
 
 export default function DrawerShareDocument({
@@ -185,7 +182,7 @@ export default function DrawerShareDocument({
                           }}>
                             <Flex justify='space-between' align={"center"}>
                               <Flex direction={'column'} align="flex-start" justify="flex-start">
-                                <Text lineClamp={1} pl={isMobile2 ? 40 : 30}>{v.name}</Text>
+                                <Text lineClamp={1} pl={isMobile2 ? 30 : 25}>{v.name}</Text>
                               </Flex>
                               {isSelected ? (
                                 <FaCheck style={{ marginRight: 10 }} />

src/module/document/ui/navbar_document_division.tsx

@@ -673,7 +673,14 @@ export default function NavbarDocumentDivision() {
                       <Box mt={10} mb={10}>
                         <Grid align="center">
                           <Grid.Col
-                            span={2}
+                            span={{
+                              base: 1,
+                              xs: 1,
+                              sm: 1,
+                              md: 1,
+                              lg: 1,
+                              xl: 1,
+                            }}
                             onClick={() => {
                               if (
                                 v.category == "FOLDER" &&
@@ -728,7 +735,16 @@ export default function NavbarDocumentDivision() {
                               </Box>
                             </Group>
                           </Grid.Col>
-                          <Grid.Col span={10}>
+                          <Grid.Col
+                            span={{
+                              base: 11,
+                              xs: 11,
+                              sm: 11,
+                              md: 11,
+                              lg: 11,
+                              xl: 11,
+                            }}
+                          >
                             <Group justify="space-between" align="center">
                               <Flex
                                 direction={"column"}
@@ -759,12 +775,12 @@ export default function NavbarDocumentDivision() {
                                     xs: 380,
                                   }}
                                 >
-                                  <Text lineClamp={1}>
+                                  <Text lineClamp={1} pl={isMobile2 ? 30 : 25}>
                                     {v.category == "FOLDER"
                                       ? v.name
                                       : v.name + "." + v.extension}
                                   </Text>
-                                  <Text fz={10}>{v.updatedAt}</Text>
+                                  <Text fz={10} pl={isMobile2 ? 30 : 25}>{v.updatedAt}</Text>
                                 </Box>
                               </Flex>
                               <Checkbox

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

@@ -1,6 +1,6 @@
 import { currentScroll, globalRole, SkeletonSingle, SkeletonUser, TEMA } from "@/module/_global"
 import { Box, Text, TextInput, Divider, Avatar, Grid, Group, ActionIcon, Skeleton } from "@mantine/core"
-import { useShallowEffect } from "@mantine/hooks"
+import { useMediaQuery, useShallowEffect } from "@mantine/hooks"
 import { useRouter, useSearchParams } from "next/navigation"
 import { useEffect, useState } from "react"
 import { HiMagnifyingGlass } from "react-icons/hi2"
@@ -24,6 +24,7 @@ export default function TabListMember() {
    const tema = useHookstate(TEMA)
    const { value: containerRef } = useHookstate(currentScroll);
    const [isPage, setPage] = useState(1)
+   const isMobile2 = useMediaQuery("(max-width: 438px)");
 
 
    async function getAllUser(loading: boolean) {
@@ -117,24 +118,41 @@ export default function TabListMember() {
                      :
                      dataMember.map((v, i) => {
                         return (
-                           <Box key={i}>
+                           <Box my={10} key={i}>
                               <Box onClick={() => {
                                  router.push(`/member/${v.id}`)
                               }}>
-                                 <Grid p={10} gutter={{
+                                 <Grid p={5} align="center">
-                                    base: 60,
+                                    <Grid.Col
-                                    xl: "xs"
+                                       span={{
-                                 }} align="center">
+                                          base: 1,
-                                    <Grid.Col span={2}>
+                                          xs: 1,
+                                          sm: 1,
+                                          md: 1,
+                                          lg: 1,
+                                          xl: 1,
+                                       }}
+                                    >
                                        <Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} size={50} alt="image" />
                                     </Grid.Col>
-                                    <Grid.Col span={9}>
+                                    <Grid.Col
-                                       <Text fw={'bold'} c={tema.get().utama} lineClamp={1}>{_.startCase(v.name)}</Text>
+                                       span={{
-                                       <Text fw={'lighter'} fz={12}>{v.group + ' - ' + v.position}</Text>
+                                          base: 11,
+                                          xs: 11,
+                                          sm: 11,
+                                          md: 11,
+                                          lg: 11,
+                                          xl: 11,
+                                       }}
+                                    >
+                                       <Text fw={'bold'} pl={isMobile2 ? 40 : 30} c={tema.get().utama} lineClamp={1}>{_.startCase(v.name)}</Text>
+                                       <Text fw={'lighter'} pl={isMobile2 ? 40 : 30} fz={12}>{v.group + ' - ' + v.position}</Text>
                                     </Grid.Col>
                                  </Grid>
                               </Box>
-                              <Divider my={10} />
+                              <Box mt={10}>
+                                 <Divider size={"xs"} />
+                              </Box>
                            </Box>
                         )
                      })