style: update style

This commit is contained in:
lukman
2024-09-27 11:07:44 +08:00
parent 3f85acc3fd
commit 4e43bd62f0
5 changed files with 77 additions and 48 deletions

View File

@@ -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)

View File

@@ -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 { useHookstate } from '@hookstate/core';
import { funAddDivisionMember, funGetDivisionById } from '../lib/api_division';
import { IDataMemberDivision } from '../lib/type_division';
export default function CreateAnggotaDivision() {

View File

@@ -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 }} />

View File

@@ -526,15 +526,15 @@ export default function NavbarDocumentDivision() {
>
{dataJalur.slice(0, 3).map((v, i) => {
return (
<Box p={5}key={i}>
<Text
onClick={() => router.push("?path=" + v.id)}
truncate="end"
>
{v.name}
</Text>
</Box>
<Box p={5} key={i}>
<Text
onClick={() => router.push("?path=" + v.id)}
truncate="end"
>
{v.name}
</Text>
</Box>
);
})}
{dataJalur.length > 3 && (
@@ -574,7 +574,7 @@ export default function NavbarDocumentDivision() {
<Box p={5} key={i}>
<Text
onClick={() => router.push("?path=" + v.id)}
truncate="end"
>
{v.name}
@@ -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

View File

@@ -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) {
@@ -105,8 +106,8 @@ export default function TabListMember() {
.fill(null)
.map((_, i) => (
<Box key={i} mb={10}>
<SkeletonUser/>
</Box>
<SkeletonUser />
</Box>
))
:
<Box>
@@ -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={{
base: 60,
xl: "xs"
}} align="center">
<Grid.Col span={2}>
<Grid p={5} align="center">
<Grid.Col
span={{
base: 1,
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}>
<Text fw={'bold'} c={tema.get().utama} lineClamp={1}>{_.startCase(v.name)}</Text>
<Text fw={'lighter'} fz={12}>{v.group + ' - ' + v.position}</Text>
<Grid.Col
span={{
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>
)
})