wibu/sistem-desa-mandiri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style : update style

Browse Source 
Deskripsi :
- update calender
- update division
- position

No issue
This commit is contained in:
lukman
2024-09-27 15:17:21 +08:00
parent 57bfe50ef2
commit 3c6082b548
8 changed files with 240 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/module/calender/ui/date_event_division.tsx
View File

@@ -1,4 +1,4 @@
import { Box, Divider, Flex, Group, Indicator, Skeleton, Text } from '@mantine/core'; import { Box, Divider, Flex, Grid, Group, Indicator, Skeleton, Text } from '@mantine/core';
import { DatePicker, DatePickerProps } from '@mantine/dates'; import { DatePicker, DatePickerProps } from '@mantine/dates';
import { useParams, useRouter } from 'next/navigation'; import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react'; import React, { useState } from 'react';
@@ -134,28 +134,36 @@ export default function DateEventDivision() {
<Box onClick={() => router.push(`/division/${param.id}/calender/${event.id}`)} bg={bgColor} pl={15} p={10} style={{ <Box onClick={() => router.push(`/division/${param.id}/calender/${event.id}`)} bg={bgColor} pl={15} p={10} style={{
borderRadius: 10 borderRadius: 10
}} h={113}> }} h={113}>
<Group> <Grid align='center'>
<Divider h={92} size="lg" orientation="vertical" color={colorDivider} /> <Grid.Col span={{
<Flex direction={'column'}> base: 0.5,
<Text fz={isMobile ? 14 : 16}>{event.timeStart} - {event.timeEnd}</Text> xs: 0.5,
<Box w={{ sm: 0.5,
base: isMobile ? 220 : 280, md: 0.5,
xl: 430 lg: 0.5,
}}> xl: 0.5,
}}>
<Divider h={92} size="lg" orientation="vertical" color={colorDivider} />
</Grid.Col>
<Grid.Col span={{
base: 11,
xs: 11,
sm: 11,
md: 11,
lg: 11,
xl: 11,
}}>
<Flex direction={'column'}>
<Text fz={isMobile ? 14 : 16}>{event.timeStart} - {event.timeEnd}</Text>
<Text fw={"bold"} lineClamp={1}> <Text fw={"bold"} lineClamp={1}>
{_.startCase(event.title)} {_.startCase(event.title)}
</Text> </Text>
</Box>
<Box w={{
base: isMobile ? 230 : 280,
xl: 420
}}>
<Text lineClamp={1}> <Text lineClamp={1}>
Dibuat oleh : {event.user_name} Dibuat oleh : {event.user_name}
</Text> </Text>
</Box> </Flex>
</Flex> </Grid.Col>
</Group> </Grid>
</Box> </Box>
</Box> </Box>
) )

258
src/module/calender/ui/detail_event_division.tsx
View File

@@ -1,6 +1,6 @@
'use client' 'use client'
import { LayoutDrawer, LayoutNavbarNew, SkeletonSingle, TEMA } from '@/module/_global'; import { LayoutDrawer, LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA } from '@/module/_global';
import { ActionIcon, Avatar, Box, CopyButton, Divider, Flex, Grid, Group, SimpleGrid, Skeleton, Spoiler, Stack, Text, Tooltip } from '@mantine/core'; import { ActionIcon, Avatar, Box, Center, CopyButton, Divider, Flex, Grid, Group, SimpleGrid, Skeleton, Spoiler, Stack, Text, Tooltip } from '@mantine/core';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { BsCalendar2Event, BsCalendarDate } from 'react-icons/bs'; import { BsCalendar2Event, BsCalendarDate } from 'react-icons/bs';
import { MdEventNote, MdOutlineFormatListBulleted } from "react-icons/md"; import { MdEventNote, MdOutlineFormatListBulleted } from "react-icons/md";
@@ -11,7 +11,7 @@ import { HiMenu } from 'react-icons/hi';
import DrawerDetailEvent from './drawer_detail_event'; import DrawerDetailEvent from './drawer_detail_event';
import { useParams, useRouter } from 'next/navigation'; import { useParams, useRouter } from 'next/navigation';
import { funDeleteMemberCalender, funGetOneCalender } from '../lib/api_calender'; import { funDeleteMemberCalender, funGetOneCalender } from '../lib/api_calender';
import { useShallowEffect } from '@mantine/hooks'; import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import moment from "moment"; import moment from "moment";
import "moment/locale/id"; import "moment/locale/id";
import { IDataDetailByIdCalender, IDataDetailByIdMember } from '../lib/type_calender'; import { IDataDetailByIdCalender, IDataDetailByIdMember } from '../lib/type_calender';
@@ -33,6 +33,8 @@ export default function DetailEventDivision() {
const router = useRouter() const router = useRouter()
const [dataChoose, setDataChoose] = useState({ id: '', name: '' }) const [dataChoose, setDataChoose] = useState({ id: '', name: '' })
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA)
const isMobile2 = useMediaQuery("(max-width: 460px)");
const isMobile = useMediaQuery('(max-width: 369px)');
const getData = async () => { const getData = async () => {
@@ -89,60 +91,116 @@ export default function DetailEventDivision() {
borderRadius: 10 borderRadius: 10
}}> }}>
<Stack> <Stack>
<Grid gutter={"lg"}> <Grid align='center'>
<Grid.Col span={{ <Grid.Col
base: 2, span={{
xl: 1 base: 1.5,
}}> xs: 1.5,
<BsCalendar2Event size={25} color={tema.get().utama} /> sm: 1.5,
md: 1.5,
lg: 1.5,
xl: 1.5,
}}
>
<Center>
<BsCalendar2Event size={25} color={tema.get().utama} />
</Center>
</Grid.Col> </Grid.Col>
<Grid.Col span={{ <Grid.Col
base: 10, span={{
xl: 11 base: 10.5,
}}> xs: 10.5,
<Text>{isDataCalender?.title}</Text> sm: 10.5,
md: 10.5,
lg: 10.5,
xl: 10.5,
}}
>
<Text lineClamp={1} pl={isMobile2 ? 5 : 0}>{isDataCalender?.title}</Text>
</Grid.Col> </Grid.Col>
</Grid> </Grid>
<Grid gutter={"lg"}> <Grid>
<Grid.Col span={{ <Grid.Col
base: 2, span={{
xl: 1 base: 1.5,
}}> xs: 1.5,
<BsCalendarDate size={25} color={tema.get().utama} /> sm: 1.5,
md: 1.5,
lg: 1.5,
xl: 1.5,
}}
>
<Center>
<BsCalendarDate size={25} color={tema.get().utama} />
</Center>
</Grid.Col> </Grid.Col>
<Grid.Col span={{ <Grid.Col
base: 10, span={{
xl: 11 base: 10.5,
}}> xs: 10.5,
<Text>{moment(isDataCalender?.dateStart).format('LL')}</Text> sm: 10.5,
md: 10.5,
lg: 10.5,
xl: 10.5,
}}
>
<Text lineClamp={1} pl={isMobile2 ? 5 : 0}>{moment(isDataCalender?.dateStart).format('LL')}</Text>
</Grid.Col> </Grid.Col>
</Grid> </Grid>
<Grid gutter={"lg"}> <Grid>
<Grid.Col span={{ <Grid.Col
base: 2, span={{
xl: 1 base: 1.5,
}}> xs: 1.5,
<LuClock size={25} color={tema.get().utama} /> sm: 1.5,
md: 1.5,
lg: 1.5,
xl: 1.5,
}}
>
<Center>
<LuClock size={25} color={tema.get().utama} />
</Center>
</Grid.Col> </Grid.Col>
<Grid.Col span={{ <Grid.Col
base: 10, span={{
xl: 11 base: 10.5,
}}> xs: 10.5,
<Text>{isDataCalender?.timeStart} | {isDataCalender?.timeEnd} </Text> sm: 10.5,
md: 10.5,
lg: 10.5,
xl: 10.5,
}}
>
<Text lineClamp={1} pl={isMobile2 ? 5 : 0}>{isDataCalender?.timeStart} | {isDataCalender?.timeEnd} </Text>
</Grid.Col> </Grid.Col>
</Grid> </Grid>
<Grid gutter={"lg"}> <Grid>
<Grid.Col span={{ <Grid.Col
base: 2, span={{
xl: 1 base: 1.5,
}}> xs: 1.5,
<BsCalendarDate size={25} color={tema.get().utama} /> sm: 1.5,
md: 1.5,
lg: 1.5,
xl: 1.5,
}}
>
<Center>
<BsCalendarDate size={25} color={tema.get().utama} />
</Center>
</Grid.Col> </Grid.Col>
<Grid.Col span={{ <Grid.Col
base: 10, span={{
xl: 11 base: 10.5,
}}> xs: 10.5,
<Text> sm: 10.5,
md: 10.5,
lg: 10.5,
xl: 10.5,
}}
>
<Text lineClamp={1} pl={isMobile2 ? 5 : 0}>
{isDataCalender?.repeatEventTyper.toString() === 'once' ? 'Acara 1 Kali' : {isDataCalender?.repeatEventTyper.toString() === 'once' ? 'Acara 1 Kali' :
isDataCalender?.repeatEventTyper.toString() === 'daily' ? 'Setiap Hari' : isDataCalender?.repeatEventTyper.toString() === 'daily' ? 'Setiap Hari' :
// isDataCalender?.repeatEventTyper.toString() === 'weekdays' ? 'Hari Kerja (senin - jumat)' : // isDataCalender?.repeatEventTyper.toString() === 'weekdays' ? 'Hari Kerja (senin - jumat)' :
@@ -153,24 +211,38 @@ export default function DetailEventDivision() {
</Text> </Text>
</Grid.Col> </Grid.Col>
</Grid> </Grid>
<Grid gutter={"lg"}> <Grid>
<Grid.Col span={{ <Grid.Col
base: 2, span={{
xl: 1 base: 1.5,
}}> xs: 1.5,
<LuLink size={25} color={tema.get().utama} /> sm: 1.5,
md: 1.5,
lg: 1.5,
xl: 1.5,
}}
>
<Center>
<LuLink size={25} color={tema.get().utama} />
</Center>
</Grid.Col> </Grid.Col>
<Grid.Col span={{ <Grid.Col
base: 10, span={{
xl: 11 base: 10.5,
}}> xs: 10.5,
sm: 10.5,
md: 10.5,
lg: 10.5,
xl: 10.5,
}}
>
{isDataCalender?.linkMeet ? ( {isDataCalender?.linkMeet ? (
<Group justify='space-between'> <Group justify='space-between'>
<Box w={{ <Box w={{
base: 170, base: 170,
xl: 380 xl: 380
}}> }}>
<Text lineClamp={1}>{isDataCalender?.linkMeet}</Text> <Text lineClamp={1} pl={isMobile2 ? 5 : 0}>{isDataCalender?.linkMeet}</Text>
</Box> </Box>
<CopyButton value={String(isDataCalender?.linkMeet)} timeout={2000}> <CopyButton value={String(isDataCalender?.linkMeet)} timeout={2000}>
{({ copied, copy }) => ( {({ copied, copy }) => (
@@ -192,20 +264,34 @@ export default function DetailEventDivision() {
} }
</Grid.Col> </Grid.Col>
</Grid> </Grid>
<Grid gutter={"lg"}> <Grid>
<Grid.Col span={{ <Grid.Col
base: 2, span={{
xl: 1 base: 1.5,
}}> xs: 1.5,
<MdOutlineFormatListBulleted size={25} color={tema.get().utama} /> sm: 1.5,
md: 1.5,
lg: 1.5,
xl: 1.5,
}}
>
<Center>
<MdOutlineFormatListBulleted size={25} color={tema.get().utama} />
</Center>
</Grid.Col> </Grid.Col>
<Grid.Col span={{ <Grid.Col
base: 10, span={{
xl: 11 base: 10.5,
}}> xs: 10.5,
sm: 10.5,
md: 10.5,
lg: 10.5,
xl: 10.5,
}}
>
{isDataCalender?.desc ? ( {isDataCalender?.desc ? (
<Spoiler maxHeight={80} showLabel="Lebih banyak" hideLabel="Lebih sedikit"> <Spoiler maxHeight={80} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
<Text>{isDataCalender?.desc}</Text> <Text pl={isMobile2 ? 5 : 0}>{isDataCalender?.desc}</Text>
</Spoiler> </Spoiler>
) : ( ) : (
<Text>-</Text> <Text>-</Text>
@@ -225,8 +311,8 @@ export default function DetailEventDivision() {
border: `1px solid ${"#C7D6E8"}`, border: `1px solid ${"#C7D6E8"}`,
borderRadius: 10, borderRadius: 10,
}} }}
p={10}
px={20} px={20}
pb={20}
> >
{Array(4) {Array(4)
.fill(null) .fill(null)
@@ -234,7 +320,7 @@ export default function DetailEventDivision() {
<Box <Box
key={i} key={i}
> >
<SkeletonSingle /> <SkeletonList/>
</Box> </Box>
))} ))}
</Box> </Box>
@@ -252,8 +338,8 @@ export default function DetailEventDivision() {
border: `1px solid ${"#C7D6E8"}`, border: `1px solid ${"#C7D6E8"}`,
borderRadius: 10, borderRadius: 10,
}} }}
p={10}
px={20} px={20}
pt={20}
> >
{ {
isLengthMember == 0 ? ( isLengthMember == 0 ? (
@@ -270,21 +356,29 @@ export default function DetailEventDivision() {
setOpenDrawerUser(true) setOpenDrawerUser(true)
}} key={i}> }} key={i}>
<Box my={10}> <Box my={10}>
<Grid align='center' gutter={"lg"}> <Grid align='center'>
<Grid.Col span={{ <Grid.Col span={{
base: 3, base: 1,
xl: 2 xs: 1,
sm: 1,
md: 1,
lg: 1,
xl: 1,
}}> }}>
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" /> <Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={isMobile ? 'md' : 'lg'} />
</Grid.Col> </Grid.Col>
<Grid.Col span={{ <Grid.Col span={{
base: 9, base: 11,
xl: 10 xs: 11,
sm: 11,
md: 11,
lg: 11,
xl: 11,
}}> }}>
<Flex justify='space-between' align={"center"}> <Flex justify='space-between' align={"center"}>
<Flex direction={'column'} align="flex-start" justify="flex-start"> <Flex direction={'column'} align="flex-start" justify="flex-start">
<Text lineClamp={1}>{v.name}</Text> <Text lineClamp={1} pl={isMobile ? 35 : 40}>{v.name}</Text>
<Text c={"#5A687D"} fz={14} lineClamp={1}> <Text c={"#5A687D"} fz={14} lineClamp={1} pl={isMobile ? 35 : 40}>
{v.email} {v.email}
</Text> </Text>
</Flex> </Flex>
@@ -319,7 +413,7 @@ export default function DetailEventDivision() {
onClick={() => { router.push('/member/' + dataChoose.id) }} onClick={() => { router.push('/member/' + dataChoose.id) }}
justify={'center'} align={'center'} direction={'column'} > justify={'center'} align={'center'} direction={'column'} >
<Box> <Box>
<FaUser size={30} color={tema.get().utama} /> <FaUser size={25} color={tema.get().utama} />
</Box> </Box>
<Box> <Box>
<Text c={tema.get().utama}>Lihat profil</Text> <Text c={tema.get().utama}>Lihat profil</Text>
@@ -328,7 +422,7 @@ export default function DetailEventDivision() {
<Flex onClick={() => { setOpenModal(true) }} justify={'center'} align={'center'} direction={'column'} > <Flex onClick={() => { setOpenModal(true) }} justify={'center'} align={'center'} direction={'column'} >
<Box> <Box>
<IoIosCloseCircle size={30} color={tema.get().utama} /> <IoIosCloseCircle size={25} color={tema.get().utama} />
</Box> </Box>
<Box> <Box>
<Text c={tema.get().utama}>Keluarkan anggota</Text> <Text c={tema.get().utama}>Keluarkan anggota</Text>

48
src/module/calender/ui/history_division_calender.tsx
View File

@@ -20,7 +20,8 @@ export default function HistoryDivisionCalender() {
const [searchQuery, setSearchQuery] = useState('') const [searchQuery, setSearchQuery] = useState('')
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA)
const isMobile = useMediaQuery('(max-width: 450px)'); const isMobile = useMediaQuery('(max-width: 509px)');
const isMobile2 = useMediaQuery('(max-width: 436px)');
const { value: containerRef } = useHookstate(currentScroll); const { value: containerRef } = useHookstate(currentScroll);
const [isPage, setPage] = useState(1) const [isPage, setPage] = useState(1)
@@ -122,41 +123,38 @@ export default function HistoryDivisionCalender() {
return ( return (
<Box bg={tema.get().bgTotalKegiatan} style={{ <Box bg={tema.get().bgTotalKegiatan} style={{
borderRadius: 10, borderRadius: 10,
}} mb={20} p={20} key={i}> }} mb={20} p={15} key={i}>
<Grid <Grid
style={{ align={isData.length <= 1 ? "center" : "flex-start"}
alignContent: 'flex-start',
alignItems: 'flex-start',
}}
> >
<Grid.Col span={{ <Grid.Col span={{
base: isMobile ? 4 : 3, base: isMobile2 ? 2.5 : 2,
sm: 3, xs: 2,
xs: 3, sm: 2,
md: 3, md: 2,
lg: 3, lg: 2,
xl: 3 xl: 2,
}}> }}>
<Flex justify={"center"} direction={'column'}> <Flex justify={"center"} direction={'column'}>
<Text ta={"center"} fz={20} fw={'bold'}>{moment(v.dateStart).format('D MMM')}</Text> <Text ta={"center"} fz={ isMobile ? 16 : 20} fw={'bold'}>{moment(v.dateStart).format('D MMM')}</Text>
<Text ta={"center"} fz={15}>{moment(v.dateStart).format('dddd')}</Text> <Text ta={"center"} fz={ isMobile ? 13 : 15}>{moment(v.dateStart).format('dddd')}</Text>
</Flex> </Flex>
</Grid.Col> </Grid.Col>
<Grid.Col span={{ <Grid.Col span={{
base: isMobile ? 8 : 9, base: isMobile2 ? 9.5 : 10,
md: 9, xs: 10,
lg: 9, sm: 10,
xl: 9, md: 10,
sm: 9, lg: 10,
xs: 9 xl: 10,
}}> }}>
{v.data.map((d, x) => { {v.data.map((d, x) => {
return ( return (
<Box mb={9} key={x} <Box mb={10} key={x}
onClick={() => router.push(`/division/${param.id}/calender/${d.id}`)} onClick={() => router.push(`/division/${param.id}/calender/${d.id}`)}
> >
<Text fw={"bold"} lineClamp={1}>{d.title}</Text> <Text fw={"bold"} fz={isMobile ? 13 : 16} lineClamp={1}>{d.title}</Text>
<Text>{d.timeStart} | {d.timeEnd}</Text> <Text fz={isMobile ? 13 : 16}>{d.timeStart} | {d.timeEnd}</Text>
</Box> </Box>
) )
})} })}

7
src/module/calender/ui/navbar_create_division_calender.tsx
View File

@@ -238,7 +238,7 @@ export default function NavbarCreateDivisionCalender() {
size="md" size="md"
disabled disabled
placeholder='Jumlah pengulangan' placeholder='Jumlah pengulangan'
value={isData.repeatValue} value={"1"}
onChange={(event) => { onChange={(event) => {
setData({ ...isData, repeatValue: String(event.currentTarget.value) }) setData({ ...isData, repeatValue: String(event.currentTarget.value) })
setTouched({ ...touched, repeatValue: false }) setTouched({ ...touched, repeatValue: false })
@@ -265,6 +265,7 @@ export default function NavbarCreateDivisionCalender() {
size="md" size="md"
placeholder='Jumlah pengulangan' placeholder='Jumlah pengulangan'
value={isData.repeatValue} value={isData.repeatValue}
min={1}
onChange={(event) => { onChange={(event) => {
setData({ ...isData, repeatValue: String(event.currentTarget.value) }) setData({ ...isData, repeatValue: String(event.currentTarget.value) })
setTouched({ ...touched, repeatValue: false }) setTouched({ ...touched, repeatValue: false })
@@ -273,8 +274,8 @@ export default function NavbarCreateDivisionCalender() {
// TODO :: NANTI DIPERBAIKI // TODO :: NANTI DIPERBAIKI
error={ error={
touched.repeatValue && ( touched.repeatValue && (
isData.repeatValue == "" ? "Jumlah pengulangan tidak boleh kosong" : "" isData.repeatValue == "" ? "Jumlah pengulangan tidak boleh kosong" :
// || Number(isData.repeatValue) <= 0 ? "Jumlah pengulangan tidak boleh 0" : "" Number(isData.repeatValue) <= 0 ? "Jumlah pengulangan tidak boleh di bawah 1" : ""
) )
} }
/> />

7
src/module/calender/ui/update_division_calender.tsx
View File

@@ -290,7 +290,7 @@ export default function UpdateDivisionCalender() {
size="md" size="md"
disabled disabled
placeholder='Jumlah pengulangan' placeholder='Jumlah pengulangan'
defaultValue={isDataCalender?.repeatValue} defaultValue={"1"}
onChange={(event) => { onChange={(event) => {
setDataCalender({ ...isDataCalender, repeatValue: String(event.currentTarget.value) }) setDataCalender({ ...isDataCalender, repeatValue: String(event.currentTarget.value) })
setTouched({ ...touched, repeatValue: false }) setTouched({ ...touched, repeatValue: false })
@@ -314,6 +314,7 @@ export default function UpdateDivisionCalender() {
required required
label="Jumlah pengulangan" label="Jumlah pengulangan"
size="md" size="md"
min={1}
placeholder='Jumlah pengulangan' placeholder='Jumlah pengulangan'
defaultValue={isDataCalender?.repeatValue} defaultValue={isDataCalender?.repeatValue}
onChange={(event) => { onChange={(event) => {
@@ -323,8 +324,8 @@ export default function UpdateDivisionCalender() {
onBlur={() => setTouched({ ...touched, repeatValue: true })} onBlur={() => setTouched({ ...touched, repeatValue: true })}
error={ error={
touched.repeatValue && ( touched.repeatValue && (
isDataCalender?.repeatValue == "" ? "Jumlah pengulangan tidak boleh kosong" : null isDataCalender?.repeatValue == "" ? "Jumlah pengulangan tidak boleh kosong" :
// || Number(isDataCalender?.repeatValue) <= 0 ? "Jumlah pengulangan tidak boleh dibawah 1" : null Number(isDataCalender?.repeatValue) <= 0 ? "Jumlah pengulangan tidak boleh di bawah 1" : ""
) )
} }
/> />

2
src/module/division_new/ui/feature_detail_division.tsx
View File

@@ -44,7 +44,7 @@ export default function FeatureDetailDivision() {
return ( return (
<Box pt={10}> <Box pt={10}>
<Text c={tema.get().utama} mb={10} fw={'bold'} fz={16}>Features</Text> <Text c={tema.get().utama} mb={10} fw={'bold'} fz={16}>Fitur</Text>
<SimpleGrid <SimpleGrid
cols={{ base: 2, sm: 2, lg: 2 }} cols={{ base: 2, sm: 2, lg: 2 }}
style={{ style={{

17
src/module/division_new/ui/information_division.tsx
View File

@@ -30,7 +30,7 @@ export default function InformationDivision() {
const [isOpenModal, setOpenModal] = useState(false) const [isOpenModal, setOpenModal] = useState(false)
const roleLogin = useHookstate(globalRole) const roleLogin = useHookstate(globalRole)
const [isAdmin, setAdmin] = useState(false) const [isAdmin, setAdmin] = useState(false)
const isMobile = useMediaQuery('(max-width: 369px)'); const isMobile = useMediaQuery('(max-width: 455px)');
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA)
async function getOneData() { async function getOneData() {
@@ -175,7 +175,7 @@ export default function InformationDivision() {
<Box pt={10}> <Box pt={10}>
<Box mb={10}> <Box mb={10}>
{loading {loading
? Array(3) ? Array(6)
.fill(null) .fill(null)
.map((_, i) => ( .map((_, i) => (
<Box key={i}> <Box key={i}>
@@ -193,18 +193,13 @@ export default function InformationDivision() {
} }
}} }}
> >
<Grid.Col span={9}> <Grid.Col span={1}>
<Group>
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={isMobile ? 'md' : 'lg'} /> <Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={isMobile ? 'md' : 'lg'} />
<Box w={{ </Grid.Col>
base: isMobile ? 130 : 140, <Grid.Col span={8}>
xl: 270 <Text c={tema.get().utama} fw={"bold"} truncate="end" pl={isMobile ? 25 : 30} fz={isMobile ? 14 : 16}>
}}>
<Text c={tema.get().utama} fw={"bold"} lineClamp={1} fz={isMobile ? 14 : 16}>
{v.name} {v.name}
</Text> </Text>
</Box>
</Group>
</Grid.Col> </Grid.Col>
<Grid.Col span={3}> <Grid.Col span={3}>
<Text c={tema.get().utama} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}> <Text c={tema.get().utama} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>

2
src/module/position/ui/list_position_active.tsx
View File

@@ -145,7 +145,7 @@ export default function ListPositionActive() {
<Box <Box
w={{ w={{
base: 220, base: 220,
xl: 400 xl: 500
}} }}
> >
<Text fw={"bold"} c={tema.get().utama} lineClamp={1}> <Text fw={"bold"} c={tema.get().utama} lineClamp={1}>